Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1)

Membuat CRUD dengan Codeigniter dan Bootstrap

Membuat CRUD dengan codeigniter dan Bootstrap

Apa Itu Codeigniter

CodeIgniter merupakan aplikasi sumber terbuka yang berupa kerangka kerja PHP dengan model MVC (Model, View, Controller) untuk membangun situs web dinamis dengan menggunakan PHP. CodeIgniter memudahkan pengembang web untuk membuat aplikasi web dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi stabil terakhir adalah versi 3.1.11. (Sumber: id.wikipedia.org/wiki/CodeIgniter).

Penjelasan diatas merupakan penjelasan dari wikipedia, intinya codeigniter merupakan sebuah framework php open source yang memudahkan kita sebagai web developer dalam mengembangkan sebuah aplikasi website. 

Codeigniter menganut pattern MVC(Model, View, Controller), dimana masing-masing component ini mempunyai fungsi sendiri-sendiri, Model sebagai sumber data, View sebagai yang menampilkan data dan Controller sebagai yang memproses data. Sesimple itu sih yang aku pahami, lebih jelasnya kalian bisa pelajari dari sumbernya di codeigniter official website

Apa Itu Bootstrap

Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.

Penjelasan diatas juga aku ambil dari wikipedia, yang intinya bootstrap itu merupakan salah satu framework css open source yang membantu kita dalam layouting sebuah website, ketika kita ingin gunakan bootstrap ini kita cukup menggunakan class-class yang dimilikinya. Lebih jelasnya nanti kita praktek secara langsung, atau jika sudah penasaran langsung saja belajar dari sumbernya di Official Website bootstrap.

Membuat CRUD dengan Codeigniter dan Bootstrap

Setelah kita mengetahui sedikit tentang apa itu codeigniter dan apa itu bootstrap, maka selanjutnya kita akan langsung ke codelabs, implementasi CRUD (Create Read Update Delete) menggunakan kedua framework ini case nya kita ambil CRUD Mahasiswa biar enak wkwkwk.

Requirement

1. XAMPP bisa di download disini apachefriends.org silahkan download sesuai dengan OS yang kalian gunakan (Linux, Windows atau OS X), kalau aku linux fanboy
2. Codeigniter bisa kalian download disini codeigniter.com silahkan download, disini ada versi 4 dan versi 3, kalau aku menggunakan versi 3.
3. Bootstrap bisa kalian download disini getbootstrap.com silahkan download, aku menggunakan bootstrap versi 4.
4. Text Editor, terserah kalian bisa gunakan text editor apapun, mau sublime, notepad++ atau vscode terserah, kalau aku pake vscode

Instalasi

Oke, jika kalian sudah download semua, selanjutnya

Install XAMPP

Install xampp / lampp seperti biasa tinggal next-next aja sampai selesai. kemudian jalankan xampp atau lampp nya. Jika kalian mengguna linux maka cara menjalankannya cukup simple, buka terminal dan ketikkan perintah berikut :

sudo /opt/lampp/lampp start

Extract Codeigniter

Extract file codeigniter yang sudah kita download tadi ke htdocs. jika kalian pengguna linux maka directory htdocs berada di (/opt/lampp/htdocs/), kemudian rename sesuai yang kalian inginkan.

Extract Bootstrap

Extract file bootstrap yang kita download tadi dan copy/paste ke dalam assets folder web kalian. sehingga struktur folder web kita akan seperti ini.

CRUD denan Codeigniter dan Bootstrap

Jika anda butuh jquery maka kalian perlu download jquery.js dan propper.js tersendiri, berhubung kita cuman pingin buat layout yang simple maka kita belum membutuhkan itu.

Selanjutnya silahkan jalankan di web browser, jika muncul seperti gambar dibawah maka instalasi xampp, codeigniter dan bootstrap berjalan dengan lancar.

CRUD denan Codeigniter dan Bootstrap

Membuat Database

Kalian bisa buka phpmyadmin, localhost/phpmyadmin silahkan buat database dan table mahasiswa. Disini aku membuat database dengan nama db_mhs dan tablenya tbl_mhs isinya adalah sebagai berikut.

CRUD denan Codeigniter dan Bootstrap

Jangan lupa set field nim sebagai primary key.

Membuat layout menggunakan Bootstrap

Langkah selanjutnya kita akan membuat layout menggunakan framework bootstrap, layoutnya cukup simple hanya menampilkan table list mahasiswa dan satu tombol create untuk menambahkan data mahasiswa. Sehingga hasil akhir nanti seperti berikut.

CRUD denan Codeigniter dan Bootstrap

Untuk membuat layout seperti itu, kita harus mengatur beberapa confing di codeigniternya.

Config base_url

application > config > config.php

kemudian cari baris kode $config['base_url'] = ''; dan ganti dengan base url kalian contoh :

..
$config['base_url'] = 'http://localhost/mahasiswa/';
..

sehingga config.php punyaku adalah seperti ini

Config autoload

application > config > autoload.php

Pada file ini digunakan untuk meload library, helper, model dll untuk semua halaman, jadi kita tidak perlu meload di masing-masing halaman. Gunakanlah autoload jika memang library, model tsb akan digunakan di semua halaman, dan load lah di controller jika memang library, model dsb itu hanya digunakan di halaman / controller tertentu saja.

Kemudian cari baris kode $autoload['helper'] = array(''); dan silahkan tambahkan url didalam array tsb sehingga menjadi seperti ini

...
$autoload['helper'] = array('url');
...

Sehingga autoload.php punyaku adalah sebagai berikut:




Membuat View

application > views > main (membuat folder baru)

Buatlah file view_mhs.php di dalam folder main (folder baru yg kita bikin sendiri), dan tuliskan kodenya seperti ini.



Kemudian untuk menampilkan working atau nda, langkah terakhir tentang membuat layout menggunakan bootstrap ini, kita akan membuat controller baru yaitu Mahasiswa.php.

Config Controller

application > controller > Mahasiswa.php (Controller baru)

Di dalem controller mahasiswa ini sementara kita cuman mau nampilin view yang udah kita bikin tadi, tulis kode berikut di dalam Mahasiswa.php


Kemudian kita akan, config routes untuk menentukan default controller, routes ini juga biasa digunakan untuk memanipulasi sebuah url, kita akan bahas besok lagi.

Config Routes

application > config > routes.php

Kita edit default controller, dari welcome menjadi mahasiswa, sehingga routes menjadi seperti ini


Oke jika sudah, silahkan buka web kalian, jika tidak ada error maka tampilannya akan sesuai dengan view yang kita buat tadi yakni tombol tambah data dan table mahasiswa. Untuk selanjutnya kita akan membuat tampilan form tambah data.

Membuat form menggunakan form helper Codeigniter dan Implementasi Modal dengan Bootstrap

Selanjutnya kita akan implementasi form helper untuk keperluan membuat form, kamu bisa pelajari lebih lanjut di dokumentasinya form helper codeigniter doc, aku disini cuman kasih contoh implementasinya intinya helper ini berguna untuk mempercepat dalam pembuatan form.

Config autoload.php

application > config > autoload.php

Untuk implementasi ini langsung saja kita ubah file autoloadnya dan kita tambahkan form helper, seperti ini

..
$autoload['helper'] = array('url','form');
..

Sehingga code autoload.php secara keseluruhan adalah sebagai berikut:


Modify view_mhs.php

Selanjutnya kita akan implementasi component modal di view_mhs.php, modal kalau dijelaskan secara sederhana itu merupakan pop-up dialog dalam sebuah website. Penjelasan sederhana bisa kalian baca di dokumentasi bootstrap tentang modal.

Baiklah langsung saja, langkah pertama edit code anchor / buttonnya menjadi seperti ini:

..
<a href="#" class="btn btn-outline-primary" data-toggle="modal" data-target="#create">Tambah Data</a>
..  

Kemudian diatas tag </body> kita tambahkan code modalnya seperti ini :

..
<div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="createLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createLabel">Data Mahasiswa Baru</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row justify-content-md-center">
                        <div class="col-10 ">
                            <?php echo form_open(base_url('mahasiswa/create')); ?>
                            <div class="form-group">
                                <?php
                                echo form_open(base_url('create'));
                                $data = [
                                    "class" => "form-control",
                                    "type" => "number",
                                    "placeholder" => "Nim",
                                    "required" => "required"
                                ];
                                echo form_input($data);
                                ?>
                            </div>
                            <div class="form-group">
                                <?php
                                $data = [
                                    "class" => "form-control",
                                    "type" => "text",
                                    "placeholder" => "Nama",
                                    "required" => "required"
                                ];
                                echo form_input($data);
                                ?>
                            </div>
                            <div class=" form-group">
                                <?php
                                $data = [
                                    "class" => "form-control",
                                    "type" => "text",
                                    "placeholder" => "Jurusan",
                                    "required" => "required"
                                ];
                                echo form_input($data);
                                ?>
                            </div>
                            <div class=" form-group">
                                <?php
                                $data = [
                                    "class" => "form-control",
                                    "type" => "text",
                                    "placeholder" => "Fakultas",
                                    "required" => "required"
                                ];
                                echo form_input($data);
                                ?>
                            </div>
                            <div class=" form-group">
                                <?php
                                $data = [
                                    "class" => "form-control",
                                    "type" => "number",
                                    "placeholder" => "Angkatan",
                                    "required" => "required"
                                ];
                                echo form_input($data);
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <?php
                    $data = [
                        "class" => "btn btn-primary",
                        "type" => "submit",
                        "value" => "Simpan"
                    ];
                    echo form_submit($data);
                    echo form_close();
                    ?>
                </div>
            </div>
        </div>
    </div>
..

Sehingga code view_mhs.php secara keseluruhan adalah seperti berikut :

Jika kalian run (diakses di web browser) maka ketika button tambah data di klik akan muncul tampilan seperti ini.

CRUD denan Codeigniter dan Bootstrap

Baiklah kebutuhan tentang view sepertinya sudah selesai, untuk selanjutnya kita akan membahas tentang model dan controller. Kita akan membahas ini di Membuat CRUD dengan Codeigniter dan Bootstrap (Part 2). Pastikan tetep update tulisan-tulisanku ya.

Untuk hari ini cukup sampai disini dulu, silahkan dicoba dulu, stay safe & stay at home buat kalian. :)
Jangan lupa like fanspage blog ini Facebook fans page dan follow akun instagram di MyQuotes10 Instagram, thanks you semua.