FP PWEB PPDB with Framework CI

Web dibuat dengan menggunakan Framework Code Igniter dan Bootstrap.

Rancangan Basis Data

Basis data dirancang menggunakan MySql. Rancangan terdiri dari 6 Tabel. 

Tabel users

Tabel sekolah

Tabel rilis_pengumuman

Tabel prioritas pilihan

Nilai mata pelajaran dimasukkan ke tabel users

Interface

Siswa

Siswa masuk ke web dan melakukan login sesuai username dan password yang telah diberikan. Setelah masuk siswa dapat mendaftar dan melengkapi biodata. Setelah itu siswa dapat memilih pilihan prioritas sekolah sebanyak tiga sekolah. Jika selesai maka siswa dapat memberi berkas nilai kepada pihak sekolah untuk diverifikasi. Setelah pemberkasan selesai siswa dapat menunggu hasil pengumuman di tab pengumuman.

Sekolah

Sekolah masuk ke web dan melakukan login. Setelah masuk sekolah dapat memasukkan nilai yang telah diberikan oleh siswa. Dan dapat melakukan verifikasi terhadap nilai tersebut jika. Sekolah juga dapat melihat siswa sementara yang diterima sampai nantinya rilis batas akhir pengumuman oleh admin. 

Admin

Admin masuk ke web dan melakukan login. Setelah masuk admin dapat pergi ke beberapa pilihan. Untuk pilihan siswa, admin dapat melakukan verifikasi dan pembatalan verifikasi serta menghapus akun siswa. Admin juga dapat membuat akun baru untuk siswa. Untuk nilai, admin dapat memasukkan nilai siswa bersangkutan ataupun memperbaharuinya. Di pilihan sekolah admin dapat mendaftarkan sekolah lain, dan dapat menghapus sekolah dari daftar. dan di pilihan pengumuman admin dapat melakukan rilis untuk pengumuman yang dapat di lihat di akun siswa.

Arsitektur sistem dan penjelasannya

public_html/
–––ppdb/
–––– application/ 
–––––––– config/ 
–––––––––––– autoload.php 
–––––––––––– ... 
–––––––––––– doctypes.php 
–––––––––––– foreign_chars.php 
–––––––––––– grocery_crud.php 
–––––––––––– ... 
–––––––– controllers/ 
–––––––––––– Home.php 
–––––––––––– Login.php
–––––––––––– Main.php 
–––––––––––– Verifylogin.php  
–––––––––––– index.html 
–––––––––––– Welcome.php 
–––––––– libraries/ 
–––––––––––– index.html 
–––––––– models/ 
–––––––––––– index.html 
–––––––––––– Main_model.php
–––––––––––– User.php  
–––––––– views/ 
–––––––––––––––– umum/
–––––––––––––––––––– p_loginpage.php
–––––––––––––––– admin/
–––––––––––––––––––– admin_footer.php
–––––––––––––––––––– admin_header.php
–––––––––––––––––––– admin_nav.php
–––––––––––––––––––– charts.php
–––––––––––––––––––– form.php
–––––––––––––––––––– index.php
–––––––––––––––––––– widgets.php
–––––––––––––––– siswa/
–––––––––––––––––––– siswa_head.php
–––––––––––––––––––– siswa_footer.php
–––––––––––––––––––– siswa_isi_pengumuman.php
–––––––––––––––––––– siswa_isi_biodata.php
–––––––––––––––––––– siswa_isi_sekolah.php
–––––––––––––––––––– siswa_nav.php
–––––––––––––––– sekolah/
–––––––––––––––––––– sekolah_head.php
–––––––––––––––––––– sekolah_footer.php
–––––––––––––––––––– sekolah_isi_pengumuman.php
–––––––––––––––––––– sekolah_isi_inputnilai.php
–––––––––––––––––––– sekolah_isi_verifikasi.php
–––––––––––––––––––– sekolah_nav.php
–––––––––––– index.html 
–––––––––––– welcome_message.php 
–––– font/ 
–––––––– glyphicons-halflings-regular.eot 
–––––––– glyphicons-halflings-regular.svg
–––––––– glyphicons-halflings-regular.ttf
–––––––– glyphicons-halflings-regular.woff
–––– sass/
–––––––– bootstrap/
–––––––––––– mixins/
–––––––––––––––– _alerts.scss
–––––––––––––––– ...
–––––––––––––––– _vendor-prefixes.scss
–––––––––––– _alerts.scss
–––––––––––– _badges.scss
–––––––––––– ... 
–––––––––––– _wells.scss
–––––––––––– index.html
–––––––– _bootstrap-compass.scss
–––––––– _bootstrap-mincer.scss
–––––––– _bootstrap-sprockets.scss
–––––––– _bootstrap.scss
–––––––– index.html
–––––––– style.scss
–––– style/
–––––––– css/
–––––––––––– bootstrap-table.css
–––––––––––– bootstrap-theme.css
–––––––––––– ...
––––––––––––styles.css
–––––––– css2/
–––––––––––– animate.css
–––––––––––– icomoon.css
–––––––––––– ...
–––––––––––– style.css.map
–––– script/   
–––––––– js/
–––––––––––– bootsrap-datepicker.js
–––––––––––– bootstrap-table.js
–––––––––––– ...
–––––––––––– respond.min.js
–––––––– js2/
–––––––––––– bootstrap.min.js
–––––––––––– index.html
–––––––––––– ...
–––––––––––– respond.min.js
–––– system/ 
–––– user_guide/ 
–––– change_log.txt 
–––– example_database.sql 
–––– index.php 
–––– licence-grocery-crud.txt 
–––– license.tx

Model
Model berisi query yang dipanggil melalui controller. Di sini dipergunakan dua model terpisah yaitu user.php dan main_model.php. User.php di khususkan untuk menghandle session dari user yang login sedangkan main_model berisi query database yang dipergunakan di website sebagai penampil data, input data, hapus data, dan sebagainya.

Views
View berisi tampilan yang ditampilkan di website. Di sini dipisahkan menjadi empat yaitu umum,siswa, sekolah dan admin. Sesuai namanya siswa untuk menampilkan tampilan dari akun siswa, sekolah untuk menampilkan tampilan akun sekolah, dan admin menampilkan tampilan dari akun admin. Cara penampilan di view diatur juga sedemikian rupa yaitu dengan memisahkan bagian head, nav, body dan footer, yang mana load dari tampilan akan dipanggil satu persatu dari controller. Dibuat terpisah karena umumnya head,nav dan footer umumnya sama tampilannya, dan hanya bodynya yang isinya berbeda, di sini lah dimanfaatkan juga kelebihan dari CI.
Untuk Penjelasan tampilan-tampilan dari bodynya kurang lebih sesuai namanya seperti "sekolah_isi_pengumuman.php" maka itu merupakan php body yang berisi tampilan pengumuman untuk sekolah. Dan untuk admin memang agak berbeda charts.php untuk tampilan isi sekolah, forms.php untuk tampilan isi pengumuman, index.php untuk tampilan isi siswa  dan widgets.php untuk tampilan isi nilai siswa. CSS dan Js yang diletakkan terpisah juga dapat dipanggil melalui view. CSS dan Js yang diperlukan disini sebagian besar dipanggil atau dideklarasikan di bagian head.

CSS
CSS berisi pengaturan untuk tampilan yang disini menggunakan framework tampilan bootstrap. File-file CSS ini diletakkan terpisah dan dipanggil diview jika views membutuhkan. Dan pengaturan untuk pemakainnya juga diatur di views.

Script
Script di sini berisi file js atau java script. Hampir sama dengan CSS, yaitu meleteakkan file js di tempat terpisah yang kemudian dapat digunakan dengan cara dipanggil di view.

Asumi
Siswa mendapatkan username dan password melalui sekolah, dan username password telah dibuat oleh admin sebelumnya. Siswa dapat mendaftar dan menunggu hasil sesuai kebijakan yang ditentukan dan pengumuman kepada siswa akan muncul saat admin menggunakan tombol rilis pengumuman. Sekolah yang dituju dapat mengkonfirmasi data siswa secara online setelah sebelumnya siswa tersebut tersebut menyerahkan berkasnya dan melengkapi syarat offline dari sekolah bersangkutan. Kelulusan siwa akan diatur sesuai nilai tertinggi dan giliran verifikasi. Sekolah juga dapat memantau siswa mana saja yang masih asuk jangkauan kelulusan, selama proses berlangsung. Pembatalan verifikasi hanya bisa dilakukan admin dan admin dapat memodifikasi akun, ataupun menghapusnya. 

Tutorial Grocery CRUD dan Contoh Pembuatan Database

Kali ini saya akan membuat tutorial tentang salah satu template di CodeIgniter yaitu grocery CRUD(Create, Replace, Update, Delete). Apa fungsinya? Fungsi dari Grocery CRUD adalah agar database kita bisa memiliki kemampuan umtuk melakukan Create, Replace, Update, Delete.

Berikut langkah-langkah dari pembuatan database menggunakan Grocery CRUD

1. Download Grocery CRUD dan copykan ke dalam folder CI

2. Buka folder ci/application/config/database.php menggunakan sublime text atau text editor lainnya, kemudian isikan code dibawah ini untuk me-replace code lama

<?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 $active_group = 'default';  
 $query_builder = TRUE;  
 $db['default']['hostname'] = 'localhost';  
 $db['default']['username'] = 'root';  
 $db['default']['password'] = '';  
 $db['default']['database'] = 'my_new_cms';  
 $db['default']['dbdriver'] = 'mysqli';  
 $db['default']['dbprefix'] = '';  
 $db['default']['pconnect'] = TRUE;  
 $db['default']['db_debug'] = TRUE;  
 $db['default']['cache_on'] = FALSE;  
 $db['default']['cachedir'] = '';  
 $db['default']['char_set'] = 'utf8';  
 $db['default']['dbcollat'] = 'utf8_general_ci';  
 $db['default']['swap_pre'] = '';  
 $db['default']['autoinit'] = TRUE;  
 $db['default']['stricton'] = FALSE;  
 $db['default']['failover'] = array();  

3. Kita akan membuat controller. Buat file dengan nama Main.php dan save di folder ci/application/controllers, ketikkan code di bawah ini

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');  

 class Main extends CI_Controller {  
   function __construct()  
   {  
     parent::__construct();  
     $this->load->database();  
   }  
   public function index()  
   {  
     echo "<h1>Welcome to the world of Codeigniter</h1>";
   }  
 }  

4. Buat database baru di mysql dengan nama my_new_cms dan ketikkan syntax di bawah ini, syntax ini berisi tabel "employee" dengan beberapa data

 CREATE TABLE IF NOT EXISTS `employees` (  
  `employeeNumber` int(11) NOT NULL AUTO_INCREMENT,  
  `lastName` varchar(50) NOT NULL,  
  `firstName` varchar(50) NOT NULL,  
  `extension` varchar(10) NOT NULL,  
  `email` varchar(100) NOT NULL,  
  `officeCode` varchar(10) NOT NULL,  
  `file_url` varchar(250) CHARACTER SET utf8 NOT NULL,  
  `jobTitle` varchar(50) NOT NULL,  
  PRIMARY KEY (`employeeNumber`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1703 ;  
 INSERT INTO `employees` (`employeeNumber`, `lastName`, `firstName`, `extension`, `email`, `officeCode`, `file_url`, `jobTitle`) VALUES  
 (1002, 'Murphy', 'Diane', 'x5800', 'dmurphy@classicmodelcars.com', '1', '', 'President'),  
 (1056, 'Patterson', 'Mary', 'x4611', 'mpatterso@classicmodelcars.com', '1', '', 'VP Sales'),  
 (1076, 'Firrelli', 'Jeff', 'x9273', 'jfirrelli@classicmodelcars.com', '1', '', 'VP Marketing'),  
 (1088, 'Patterson', 'William', 'x4871', 'wpatterson@classicmodelcars.com', '6', '', 'Sales Manager (APAC)'),  
 (1102, 'Bondur', 'Gerard', 'x5408', 'gbondur@classicmodelcars.com', '4', 'pdftest.pdf', 'Sale Manager (EMEA)'),  
 (1143, 'Bow', 'Anthony', 'x5428', 'abow@classicmodelcars.com', '1', '', 'Sales Manager (NA)'),  
 (1165, 'Jennings', 'Leslie', 'x3291', 'ljennings@classicmodelcars.com', '1', '', 'Sales Rep'),  
 (1166, 'Thompson', 'Leslie', 'x4065', 'lthompson@classicmodelcars.com', '1', '', 'Sales Rep'),  
 (1188, 'Firrelli', 'Julie', 'x2173', 'jfirrelli@classicmodelcars.com', '2', 'test-2.pdf', 'Sales Rep'),  
 (1216, 'Patterson', 'Steve', 'x4334', 'spatterson@classicmodelcars.com', '2', '', 'Sales Rep'),  
 (1286, 'Tseng', 'Foon Yue', 'x2248', 'ftseng@classicmodelcars.com', '3', '', 'Sales Rep'),  
 (1323, 'Vanauf', 'George', 'x4102', 'gvanauf@classicmodelcars.com', '3', '', 'Sales Rep'),  
 (1337, 'Bondur', 'Loui', 'x6493', 'lbondur@classicmodelcars.com', '4', '', 'Sales Rep'),  
 (1370, 'Hernandez', 'Gerard', 'x2028', 'ghernande@classicmodelcars.com', '4', '', 'Sales Rep'),  
 (1401, 'Castillo', 'Pamela', 'x2759', 'pcastillo@classicmodelcars.com', '4', '', 'Sales Rep'),  
 (1501, 'Bott', 'Larry', 'x2311', 'lbott@classicmodelcars.com', '7', '', 'Sales Rep'),  
 (1504, 'Jones', 'Barry', 'x102', 'bjones@classicmodelcars.com', '7', '', 'Sales Rep'),  
 (1611, 'Fixter', 'Andy', 'x101', 'afixter@classicmodelcars.com', '6', '', 'Sales Rep'),  
 (1612, 'Marsh', 'Peter', 'x102', 'pmarsh@classicmodelcars.com', '6', '', 'Sales Rep'),  
 (1619, 'King', 'Tom', 'x103', 'tking@classicmodelcars.com', '6', '', 'Sales Rep'),  
 (1621, 'Nishi', 'Mami', 'x101', 'mnishi@classicmodelcars.com', '5', '', 'Sales Rep'),  
 (1625, 'Kato', 'Yoshimi', 'x102', 'ykato@classicmodelcars.com', '5', '', 'Sales Rep'),  
 (1702, 'Gerard', 'Martin', 'x2312', 'mgerard@classicmodelcars.com', '4', '', 'Sales Rep');

5. Ubah file Main.php menjadi berikut ini

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');  
 class Main extends CI_Controller {  
   function __construct()  
   {  
     parent::__construct();  
     /* Standard Libraries of codeigniter are required */  
     $this->load->database();  
     $this->load->helper('url');  
     /* ------------------ */   
     $this->load->library('grocery_CRUD');  
   }  
   public function index()  
   {  
     echo "<h1>Welcome to the world of Codeigniter</h1>";//Just an example to ensure that we get into the function  
     die();  
   }  
   public function employees()  
   {  
     $this->grocery_crud->set_table('employees');  
     $output = $this->grocery_crud->render();  
     echo "<pre>";  
     print_r($output);  
     echo "</pre>";  
     die();  
   }  
 }  

6. Ketikkan localhost/nama_folder/index.php/employee, jika berhasil maka akan keluar seperti dibawah ini

stdClass Object  
 (  
   [output] => Your output will appear here....  
   [js_files] => Array  
     (  
       [763b4d272e158bdb8ed5a12a1824c94f494954bd] => http://grocery_crud/public/grocery_crud/themes/datatables/js/jquery-1.6.2.min.js  
       [0b677f3fc6fb25b4baf39eb144222116c5b60254] => http://grocery_crud/public/grocery_crud/themes/flexigrid/js/cookies.js  
       [ec3ae62b8d5838972e858fe54447bd4bd8d79f88] => http://grocery_crud/public/grocery_crud/themes/flexigrid/js/flexigrid.js  
       [2c0ff56d0cbc6f80a5ef9c770d478f0e00c3170d] => http://grocery_crud/public/grocery_crud/themes/flexigrid/js/jquery.form.js  
       [474495ff1e895eab81fb8afba4db9b06c15b19af] => http://grocery_crud/public/grocery_crud/themes/flexigrid/js/jquery.numeric.js  
     )  
   [css_files] => Array  
     (  
       [732b03aa54d124f062757b71e5560acdc5632ba6] => http://grocery_crud/public/grocery_crud/themes/flexigrid/css/flexigrid.css  
     )  
 )  

7. Sekarang kita akan membuat view, buat file our_templates.php dan simpan di folder ci/application/views, ketikkan code berikut ini

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="utf-8" />  
 <?php   
 foreach($css_files as $file): ?>  
   <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />  
 <?php endforeach; ?>  
 <?php foreach($js_files as $file): ?>  
   <script src="<?php echo $file; ?>"></script>  
 <?php endforeach; ?>  
 <style type='text/css'>  
 body  
 {  
   font-family: Arial;  
   font-size: 14px;  
 }  
 a {  
   color: blue;  
   text-decoration: none;  
   font-size: 14px;  
 }  
 a:hover  
 {  
   text-decoration: underline;  
 }  
 </style>  
 </head>  
 <body>  
 <!-- Beginning header -->  
   <div>  
     <a href='<?php echo site_url('examples/offices_management')?>'>Offices</a> |   
     <a href='<?php echo site_url('examples/employees_management')?>'>Employees</a> |  
     <a href='<?php echo site_url('examples/customers_management')?>'>Customers</a> |  
     <a href='<?php echo site_url('examples/orders_management')?>'>Orders</a> |  
     <a href='<?php echo site_url('examples/products_management')?>'>Products</a> |   
     <a href='<?php echo site_url('examples/film_management')?>'>Films</a>  
   </div>  
 <!-- End of header-->  
   <div style='height:20px;'></div>   
   <div>  
     <?php echo $output; ?>  
   </div>  
 <!-- Beginning footer -->  
 <div>Footer</div>  
 <!-- End of Footer -->  
 </body>  
 </html>  

8. Ubah file Main.php menjadi seperti berikut ini

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');   
  class Main extends CI_Controller {   
   function __construct()   
   {   
    parent::__construct();   
    /* Standard Libraries of codeigniter are required */   
    $this->load->database();   
    $this->load->helper('url');   
    /* ------------------ */    
    $this->load->library('grocery_CRUD');   
   }   
   public function index()   
   {   
    echo "<h1>Welcome to the world of Codeigniter</h1>";//Just an example to ensure that we get into the function   
      die();   
   }   
   public function employees()   
   {   
    $this->grocery_crud->set_table('employees');   
    $output = $this->grocery_crud->render();   
    $this->_example_output($output);     
   }   
   function _example_output($output = null)   
   {   
    $this->load->view('our_template.php',$output);    
   }   
  }   

9. Ketikkan localhost/nama_folder/index.php/employee, jika benar maka akan muncul seperti gambar di bawah ini

Demikian tutorial tentang Grocery CRUD