Membuat CRUD dengan Codeigniter dan Bootstrap (Part 2)

Membuat CRUD dengan Codeigniter dan Bootstrap (Part 2)

Membuat CRUD dengan Codeignier dan Bootstrap (Part 2)

Artikel ini merupakan lanjutan dari artikel sebelumnya yaitu Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1), Jika kalian belum membaca silahkan baca terlebih dahulu dan mempraktekkannya, karena disana dibahas tentang setup dan implementasi view.

Baiklah untuk bagian kedua ini kita akan membuat sebuah model, seperti yang sudah dijelaskan pada Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1) bahwa model merupakan bagian yang berfungsi untuk menyediakan data dimana data ini nantinya akan kita proses di controller dan menampilkannya di view.

Baiklah tanpa panjang lebar mari kita bikin modelnya dengan nama MahasiswaModel.php

Membuat Model

application > models > MahasiswaModel.php (file baru)

Silahkan ketikkan code seperti dibawah ini :

Dari code diatas aku membuat beberapa fungsi yaitu insert, delete, update, select all, select by id jika dibandingkan dengan code php biasa ini sangat-sangat membantu dalam penulisan code dan pemrosesan data ke database. Jika di php biasa kalian harus cek koneksi dulu, kalian harus menuliskan query sql secara manual, kalian juga harus cek query ini udah bener atau belum, pokonya panjang sekali. Sementara di codeigniter kalian hanya perlu config database (kita jelaskan setelah ini), load libarary database dan load model diatas, selesai.

Config Database

application > config > database.php

Disini kita akan mengatur koneksi databasenya, yang perlu kalian perhatikan hanya empat sebernernya yaitu : 

'hostname' => 'localhost', //hostname database kalian apa?
'username' => '', // username database kalian apa?
'password' => '', // password database kalian apa?
'database' => '', // nama database kalian apa?

Namun di beberapa kesempatan kalian perlu mengganti 'stricton' => false, menjadi 'stricton' => true. Baiklah langsung saja kalian ubah file database.php menjadi seperti ini misalnya.

Dari code diatas jelas ya bahwa nama hostnamenya adalah localhost, usernamenya root, password kosong dan nama databasenya db_mhs.

Selanjutnya kita akan menambahkan library database di autoload.

Menambahkan Library database

application > config > autoload.php

Baiklah tanpa panjang lebar mari kita tambahkan kode berikut pada autoload.php.

$autoload['libraries'] = array('database');

Jika kalian ingin menambahkan library lain kalian tinggal masukkan nama library ke dalam array tsb, sekali lagi ini di autoload, artinya semua halaman membutuhkan, kalau kalian butuhnya cuman di controller tertentu silahkan load di halaman itu saja.

Selanjutnya kita akan bermain dengan controller, silahkan kalian buka controller Mahasiswa dimana controller ini sudah kita buat pada bahasan Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1), Jika kalian belum membacanya silahkan baca dan ikuti step-by stepnya.

Membuat method-method CRUD dalam Controller

Mengubah controller Mahasiswa

application > controller > Mahasiswa.php

Method Read

Untuk melakukan read data database, kita cukup memanggil method selectAll pada model MahasiswaModel.php, namun sebelum memanggilnya maka kita perlu me load dulu model ini, pada constructor tambahkan kodel berikut :

$this->load->model('MahasiswaModel');

Kemudian di method index kalian bisa tambahkan kode berikut :

Yups simpel bet dah kita cuman nambahin data title dan mhs, yg di bungkus dalam array kirimin deh ke view biar dikonsumsi sama si view :)

Method Insert

Untuk melakukan insert data ke dalam database, maka aku membuat sebuah method seperti ini :

Pada kode diatas kita akan memanfaatkan 2 library lagi yaitu form_validation dan session, library form_validation digunakan untuk membantu kita dalam hal validasi form, kalian bisa baca selengkapnya disini form validation codeigniter 3, sementara session digunakan untuk mengatur session yang kita buat, implementasinya adalah misal $this->session->set_flashdata($dataNotif); arti dari flashdata adalah kita mengirimkan suatu data, namun data itu hanya di pake sekali saja, apabila session itu sudah dipanggil, maka kemudian session itu akan dihancurkan. 

Karena kita akan menambahkan libraries di autoload, maka ubah baris kode ini pada autoload.php menjadi seperti ini

$autoload['libraries'] = array('database','form_validation','session');

Sepertinya aku nda jelasin baris perbaris kode insert ini, ininya flow dari kode ini adalah seperti ini :

Validasi form

Melakukan validasi form dimana aturannya field nim tidak boleh kosong, max 8 karakter dan unique maksudnya tidak boleh dalam satu table ada nim yang sama.

Kondisi

Setelah menentukan rule form validasinya selanjutnya aku ngecek, apakah rule nya udah terpenuhi semua? kalau sudah maka lakukan insert data, kirim data notif lewat session dan redirect ke halaman home, tapi jika belum kita akan mengirimkan data notif gagal lewat session juga.

Proses Insert

Proses insert cukup mudah, kita tinggal membuat sebuah array dimana di dalamnnya kita ambil value dari field-field form yg sudah dikirimkan, kemudian kita akses method yang ada di model MahasiswaModel.php seperti ini :

            $data = [
                'nim' => $this->input->post('nim'),
                'nama' => $this->input->post('nama'),
                'jurusan' => $this->input->post('jur'),
                'fakultas' => $this->input->post('fak'),
                'angkatan' => $this->input->post('akt')
            ];

            $this->MahasiswaModel->insert($data); 

Baiklah method insert sudah cukup segitu doang, simple banget kan :)

Method Delete

Pada method delete ini sangat sederhana kita cuma memanggil fungsi yg ada di model MahasiswaModel.php, kirim data notif da redirect ke home, selesai. Kodenya untuk method delete adalah sebagai berikut

 public function delete($nim)
    {
        $this->MahasiswaModel->delete($nim);
        $dataNotif = [
            'title' => 'Sukses',
            'msg' => 'Berhasil hapus data',
            'classbs' => 'alert-success'
        ];
        $this->session->set_flashdata($dataNotif);
        redirect('home');
    }

Namun pada method ini kita membutuhkan parameter nim untuk menghapus data (yg nanti gunakan untuk where clause di model), dan kita akan menggunakan url untuk melemparkan nim ini. kalau di php biasa kalian pasti mengenal istilah $_GET dan $_POST , nah untuk melemparkan data nim ini kita akan gunakan $_GET, namun bedanya di codeigniter kita gk perlu inisialisasi variable nim seperti yg dilakukan pada php biasa.

Method Update

Selanjutnya method yang terakhir yaitu update data, hampir sama dengan insert berbeda di model doang, namun di update ini kita membutuhkan paramater satu lagi yaitu nim (yg nanti gunakan untuk where clause di model). Berbeda implementasi dengan delete, kita akan menggunakan $_POST untuk dapatkan data nim ini. Kodenya adalah sebagai berikut :

public function update()

    {

        $nim = $this->input->post('nim');

        $data = [

            'nama' => $this->input->post('nama'),

            'jurusan' => $this->input->post('jur'),

            'fakultas' => $this->input->post('fak'),

            'angkatan' => $this->input->post('akt')

        ];

        $this->MahasiswaModel->update($data, $nim);

        $dataNotif = [

            'title' => 'Sukses',

            'msg' => 'Berhasil update data',

            'classbs' => 'alert-success'

        ];

        $this->session->set_flashdata($dataNotif);

        redirect('home');

    }

Jadi aku akan membuat nim itu tidak bisa di ubah-ubah karena nim di table ini menjadi primary key, sehingga aku cuman ngubah 4 data doang nama, jurusan, fakultas dan angkatan. Pada method ini aku gak pake form validation karena field nim tidak berubah dan field lain tidak membutuhkan form validasi. Kalau kalian ingin menambahkan ya flownya seperti insert, seperti yg aku bilang diawal sebenernya ini cuman beda di method modelnya aja.

Sehingga keseluruhan kode controller Mahasiswa adalah sebagai berikut :

Mengubah view_mhs.php

Baiklah lanjut ke langkah terakhir, kita akan mengubah view_mhs.php, kita akan tambahkan form insert update dan konfirmasi delete, menggunakan modal untuk lebih jelasnya kalian bisa membaca  Component Modal Bootstrap dan juga menambahkan alert ketika terjadi error atau berhasil melakukan event tertentu, lebih jelasnya kalian bisa baca-baca Alert Bootstrap.

Membuat Alert Bootstrap

Baiklah pertama kita akan membuat alert, dimana alert ini akan muncul jika ada data session flashdata yg dikirimkan oleh si controller. tambahkan kode berikut diatas tag <div class="table-responsive">

......                 

                    <?php

                    $title = $this->session->flashdata('title') ?? false;

                    $msg = $this->session->flashdata('msg') ?? false;

                    $classbs = $this->session->flashdata('classbs') ?? false;

                    if ($title && $msg) {

                        echo "<div class='alert $classbs alert-dismissible fade show' role='alert'>

                            <strong>$title</strong> $msg

                            <button type='button' class='close' data-dismiss='alert' aria-label='Close'>

                                <span aria-hidden='true'>&times;</span>

                            </button>

                        </div>";

                    }

                    ?>

.....

Modal Form Insert dan Update

Seperti yang sudah tak kasih tau di awal bahwa, kita akan memanfaatkan modal pada bootstrap untuk form ini. maka sebelumnya kita butuh jquery dan propper js maka tambahkan kode berikut diatas tag </html>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Modal Insert

Selanjutnya kita buat form insertnya seperti ini, tambahkan kode berikut diatas tag </body>

Pada kode diatas, aku memanfaat kan form helper dari codeigniter, hal ini memudahkan kamu dalam membuat form, kamu bisa pelajari lebih lanjut tentang form helper ini disini form helper, sepertinya aku udah bahas ini di  Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1) deh, yuk yuk dibaca yuk.

Modal Update

Selanjutnya kita akan membuat form update, hampir sama dengan form insert cuman beda dikit doang, tambahkan code berikut dibawah modal insert barusan, kodenya adalah seperti berikut:

Modal Delete

Selanjutnya kita akan membuat modal untuk konfirmasi delete, silahkan tambahkan saja kode berikut dibawah modal update diatas.

Mengubah Table Mahasiswa

Selanjutnya kita akan menambahkan button update dan delete di dalam tabel, sehingga tabelnya menjadi seperti ini.

Bisa kamu lihat, coba perhatikan kode berikut :

<a href="#" data-toggle="modal" data-target="#update" data-nim="<?php echo $row->nim; ?>" data-nama="<?php echo $row->nama; ?>" data-jur="<?php echo $row->jurusan; ?>" data-fak="<?php echo $row->fakultas; ?>" data-akt="<?php echo $row->angkatan; ?>" class="btn btn-info">Ubah</a><a href="#" data-toggle="modal" data-target="#delete" data-nim="<?php echo $row->nim; ?>" class="btn btn-danger">Hapus</a>

Disini kita akan mentrigger modal update maupun delete, sambil membawa data-data, misal jika hapus kita cuman butuh data nim, sementara yg update kita butuh semua data, maka kita kirimkan semua data-data tersebut, terus bagaimana mengelolahnya.

Mengelolah Data Modal

Untuk mengelolah data-data tersebut kita perlu code javascript untuk passing semua data-data tersebut, silahkan tambahkan kode berikut di atas tag </html>

Baiklah bisa kita lihat kode diatas, bahwa intinya kita cuman perlu get data, kemudian di set ke field-field yg ada di modal. Sangat simple :)
Sehingga keseluruhan kode view_mhs.php adalah seperti berikut :

Mengubah routes

Baiklah selanjutnya kita perlu mengubah routesnya, seperti yang sudah dijelasin di Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1), routes ini digunakan untuk memanipulasi url. Pada codeigniter secara default, pattern urlnya adalah sebagai berikut. base_url/index.php/controller/method/paramater_1, nah ini bisa kita manipulasi contoh :

$route['home'] = 'mahasiswa/index';

Pada kode diatas ini aku coba manipulasi url, dimana yang tadinya base_url/index.php/mahasiswa/index, berubah menjadi base_url/index.php/home. Paham kan kegunaan routes sekarang, baiklah selanjutnya mari kita ubah file routes.php

Baiklah sepertinya semua sudah selesai, dari view, model dan controller sudah diimplementasi semua, saatnya kita coba jalankan pada web browser jika tidak ada masalah maka akan seperti ini.

Akhirnya selesai juga artikel tentang CRUD dengan Codeigniter dan Bootrap, aku bagi menjadi dua bagian Membuat CRUD dengan Codeigniter dan Bootstrap (Part 1) dan Membuat CRUD dengan Codeigniter dan Bootstrap (Part 2), Silahkan kalian praktekkan jika ada yang masih bingung bisa di tanyakan di kolom komentar atau bisa langsung aja comment atau dm via facebook fanspage di MyQuotes10 Fanspage atau bisa juga ke ig kita MyQuotes10 Instagram. Jangan lupa follow hehe. Untuk full code bisa kalian lihat di repo github aku disini repo github.

Terimakasih telah membaca artikelku sampai akhir, stay safe stay at home buat kalian semua. Sampai jumpa di artikelku yang lain. Stay safe & stay at home buat kalian semua :)