Thursday, May 10, 2018

CRUD Dengan CodeIgniter

doditsuprianto 9:10 AM
Code Igniter adalah salah satu framework PHP yang mudah untuk dipelajari. Sebagaimana umumnya frame PHP mengacu pada arsitektur MVC (Model, View dan Controller). Secara singkat Model berhubungan dengan manipulasi database, View berhubungan dengan tampilan, dan Controller berhubungan dengan arus data menuju dan dari model ke view atau sebaliknya.

1. Persiapan Environment (Hello World...)

Berikut ini tutorial singkat dan sederhana mengenai Create, Retrieve, Update dan Delete atau dikenal dengan istilah CRUD pada pada framework PHP Code Igniter.

Download XAMPP di https://www.apachefriends.org/download.html, kemudian instal XAMPP di komputer kalian.

Sebelumnya buat folder baru bernama crud di folder ..XAMPP\htdocs\crud
Selanjutnya download CodeIgniter (di singkat CI) di https://codeigniter.com/download. Kemudian ektrak file CI CodeIgniter-3.1.8.zip (nama file tidak harus sama) ke crud yang sebelumnya telah dibuat, seperti berikut ini:
Setting base_url codeigniter sesuai dengan nama projek (disini yaitu crud) menjadi 'http://localhost/crud' dengan cara buka file application/config/config.php seperti berikut
$config['base_url'] = 'http://localhost/crud/';
Sekarang memilih template website untuk dipakai sebagai casing atau baju website. Setelah cari-cari saya menemukan beberapa dashboard template gratis di sini https://parameter.io/free-bootstrap-admin-templates/. Dan akhirnya saya memilih AdminBSB – Material Design yang dapat didownload di https://github.com/gurayyarar/AdminBSBMaterialDesign. Setelah itu uraikan file zip AdminBSBMaterialDesign-master.zip
Ubah  file index.html menjadi dashboard.php yang nanti akan dipanggil di bagian controller.
Copykan beberapa file ke xampp/htdocs/application/views seperti berikut ini:
Edit file xampp/htdocs/crud/application/config/routes.php dan ganti default controller menjadi :
$route['default_controller'] = 'dashboardku';
Kemudian kita buat controller baru bernama 'dashboardku' yang akan dipanggil secara default. Kemudian simpan file controller Dashboardku.php ke folder xampp/htdocs/crud/application/controllers/Dashboardku.php.

Sebagai catatan nama class harus diawali dengan huruf besar, nama file controller juga harus diawali dengan huruf besar.

defined('BASEPATH') OR exit('No direct script access allowed');

 // Nama class berawalan huruf besar
// Nama file controller harus berawalan huruf besar
class Dashboardku extends CI_Controller {
public function index()
{
// Memanggil view dashboard.php
$this->load->view('dashboard');
}
}
sekarang buka websitenya http://localhost/crud/, maka akan tampak banyak kerusakan link yang perlu disesuaikan alamat urlnya.
Konfigurasi file xampp/htdocs/crud/application/config/autoload.php seperti ini
$autoload['helper'] = array('url', 'file');
Pindahkan beberapa folder yang terletak di xampp/htdocs/crud/application/views/ berikut ini css, documentation, images, js, pages, plugins, scss
ke folder xampp/htdocs/crud/
Sesuaikan semua link referensi pada xampp/htdocs/crud/application/views/dashboard.php seperti berikut ini
....
<!-- Bootstrap Core Css -->
    <link href="<?=base_url('plugins/bootstrap/css/bootstrap.css');?>" rel="stylesheet">

    <!-- Waves Effect Css -->
    <link href="<?=base_url('plugins/node-waves/waves.css');?>" rel="stylesheet" />

    <!-- Animation Css -->
    <link href="<?=base_url('plugins/animate-css/animate.css');?>" rel="stylesheet" />

    <!-- Morris Chart Css-->
    <link href="<?=base_url('plugins/morrisjs/morris.css');?>" rel="stylesheet" />

    <!-- Custom Css -->
    <link href="<?=base_url('css/style.css');?>" rel="stylesheet">

    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
    <link href="<?=base_url('css/themes/all-themes.css');?>" rel="stylesheet" />
....
....
    <!-- Jquery Core Js -->
    <script src="<?=base_url('plugins/jquery/jquery.min.js');?>"></script>

    <!-- Bootstrap Core Js -->
    <script src="<?=base_url('plugins/bootstrap/js/bootstrap.js');?>"></script>

    <!-- Select Plugin Js -->
    <script src="<?=base_url('plugins/bootstrap-select/js/bootstrap-select.js');?>"></script>

    <!-- Slimscroll Plugin Js -->
    <script src="<?=base_url('plugins/jquery-slimscroll/jquery.slimscroll.js');?>"></script>

    <!-- Waves Effect Plugin Js -->
    <script src="<?=base_url('plugins/node-waves/waves.js');?>"></script>

    <!-- Jquery CountTo Plugin Js -->
    <script src="<?=base_url('plugins/jquery-countto/jquery.countTo.js');?>"></script>

    <!-- Morris Plugin Js -->
    <script src="<?=base_url('plugins/raphael/raphael.min.js');?>"></script>
    <script src="<?=base_url('plugins/morrisjs/morris.js');?>"></script>

    <!-- ChartJs -->
    <script src="<?=base_url('plugins/chartjs/Chart.bundle.js');?>"></script>

    <!-- Flot Charts Plugin Js -->
    <script src="<?=base_url('plugins/flot-charts/jquery.flot.js');?>"></script>
    <script src="<?=base_url('plugins/flot-charts/jquery.flot.resize.js');?>"></script>
    <script src="<?=base_url('plugins/flot-charts/jquery.flot.pie.js');?>"></script>
    <script src="<?=base_url('plugins/flot-charts/jquery.flot.categories.js');?>"></script>
    <script src="<?=base_url('plugins/flot-charts/jquery.flot.time.js');?>"></script>

    <!-- Sparkline Chart Plugin Js -->
    <script src="<?=base_url('plugins/jquery-sparkline/jquery.sparkline.js');?>"></script>

    <!-- Custom Js -->
    <script src="<?=base_url('js/admin.js');?>"></script>
    <script src="<?=base_url('js/pages/index.js');?>"></script>

    <!-- Demo Js -->
    <script src="<?=base_url('js/demo.js');?>"></script>
Jika tidak ada kendala maka http://localhost/crud akan tampak seperti berikut ini:
Selanjutnya kalian tinggal meng-copy template tersebut untuk keperluan halaman yang lain.
Selamat kalian telah bisa membuat view di dalam CI.

Namun jika kalian masih gagal juga maka silahkan download crud.7z dan uraikan di folder htdocs. file tersebut merupakan hasil akhir dari diskusi di atas. Kalian bisa langsung menggunakannya meskipun belum masuk ke pembahasan Database.
---------------------------------------------------------------------
  Download di sini ya ....KLIK ME
---------------------------------------------------------------------


2. Menghilangkan URI index.php pada CI dan Slicing

Kita ketahui bahwa sistem pengalamatan URL CI selalui disertai dengan index.php yang terasa kurang nyaman dilihat. Untuk menghilangkannya, buatlah file baru bernama .htaccess tanpa disertai extension apa-apa ya....dimana kodingnya adalah sebagai berikut:
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

by the way....

Pada contoh view dashboard sebelumnya adalah contoh view satu halaman penuh, artinya untuk membuat view yang lain kalian harus mengcopy semua view dashboard. Kelemahannya adalah jika ada perubahan pada menu navigasi dan menu top maka kalian harus mengubah semua view yang ada. Hal ini tentu sangat merepotkan.

Oleh karena itu untuk menghemat sumberdaya kita perlu melakukan slicing terhadap view. Dimana untuk men-slicing halaman view kalian harus memahami karaktersitik setiap template view, karena setiap template website memiliki model yang berbeda.

Dari contoh template sebelumnya saya putuskan slicing menjadi 3 yaitu halaman top, halaman navigator dan halaman body (body bisa diber nama lain sesuai kebutuhan). Seperti ilustrasi berikut

Sehingga contoh pemanggilan view pada controller adalah sebagai berikut (berlaku untuk semuanya):
public function index()
{
$data['menudashboard'] = "";
$data['menudatamaster'] = "active";
$data['menudatamastersiswa'] = "active";
$data['siswa'] = $this->SiswaModel->retrieve_all();

// Hasil slicing, terdapat 3 bagian
$this->load->view('top'); // view top
$this->load->view('navigator', $data); // view navigator
$this->load->view('siswa'); // view yang dibutuhkan, perubahan hanya di view ini saja
}

3. Manipulasi Database
Sebelum masuk ke database, lakukan konfigurasi sebagai berikut:

Konfigurasi file xampp/htddocs/crud/application/config/autoload.php
$autoload['libraries'] = array('database');

Konfigurasi file xampp/htddocs/crud/application/config/database.php
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'crud',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

Selanjutnya kita membuat database bernama crud dan satu table sederhana bernama siswa_tb melalui phpmyadmin


CREATE TABLE siswa_tb (
  nis char(6) NOT NULL,
  nama varchar(35) NOT NULL,
  alamat text NOT NULL,
  tgl_lahir date NOT NULL,
  jenis_kelamin varchar(15) NOT NULL,
  telp varchar(10) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Ok karena capek nulis, langsung saja download contoh jadi CRUD di link berikut: https://drive.google.com/open?id=1o5Z1dn23y0NnDSJvnd6122TbpJ49dyKd

Dan berikut ini contoh hasilnya:


Kalau ada yang ditanyakan siahkan comment di bawah.

1 comment:

  1. DediJune 25, 2019 at 1:45 AM

    Terima kasih pak, pembahasannya sangat jelas. Semoga ilmunya berkah.

    ReplyDelete

Subscribe to: Post Comments (Atom)


Popular Posts

Contact Form

Name

Email *

Message *