Aplikasi Web dengan FItur CRUD untuk Data Mahasiswa dengan Menggunakan Code Igniter

Dalam mengembangkan aplikasi web ini, saya melanjutkan aplikasi web yang sudah saya buat di post sebelumnya dengan membuat views/halaman baru. 

Langkah pertama, kita sebaiknya menjalankan project web Code Igniter-nya terlebih dahulu supaya nanti ketika ingin melakukan check bisa langsung. 

Kemudian kita perlu membuat views yang nantinya akan menampilkan tabel mahasiswa kita. Di sini, saya membuat views dengan nama 'view_mahasiswa'.

Pada views yang baru saja kita buat, kita bisa memasukkan perintah-perintah HTML dan CSS yang kita ingin tampilkan di halaman ini. Karena kita akan membuat tabel pada halaman ini, maka kita perlu memasukkan syntax untuk membuat tabel mahasiswa di sini. Namun sebelum itu, ada baiknya kita mengatur controller dan route-nya terlebih dahulu, sehingga kita dapat lebih mudah nanti ketika ingin melakukan check.

Untuk itu, kita perlu membuat fungsi baru pada controller dengan nama Pages yang sudah buat kemarin. Di sini, saya membuat fungsi dengan nama mahasiswa yang akan me-return views yang pada langkah sebelumnya sudah kita buat.

Untuk itu, saya akan membuat controller baru yang akan mengatur seluruh proses yang berhubungan dengan mahasiswa, mulai dari me-return views, sampai dengan membantu berhubungan dengan database nantinya. Controller tersebut saya buat dengan nama "MahasiswaController"

dan dengan isian awal sebagai berikut :

Setelah itu, kita perlu mengatur route agar kita bisa mengakses halaman yang sudah kita buat melalui URL

Agar sistem bisa masuk dengan tombol ke tombol (tanpa mengetikkan pada URL bar browser), kita perlu mengedit views profildiri dan welcome_message yang pada post sebelumnya kita buat. Saya membuat tombol yang akan digunakan untuk ke semua halaman sebagai Navigation Bar supaya lebih mudah dan bisa diakses di semua halaman. Namun, pada pembuatan navbar kali ini masih statis, Sehingga code navbar-nya harus ditulis secara berulang di setiap views/halaman. Alangkah baiknya dibuat dengan dinamis jikalau halaman web yang akan dibuat berjumlah banyak. Berikut adalah code untuk navbar-nya :

Dan berikut adalah hasil navbar-nya :

Selanjutnya, kita perlu membuat tabel pada view_mahasiswa. Untuk sementara, saya mengisi data di tabel dengan satu static record.

Kemudian, kita perlu membuat database. Di sini saya menggunakan phpmyadmin dan membuat satu tabel dengan nama mahasiswa dengan kolom berisi urutan, nama, NRP, asal sekolah, dan alamat.

Setelah itu, kita harus membuat model yang berguna untuk mengatur dan menghubungkan dengan database. Model yang saya buat bernama MahasiswaModel. Pada model ini, kita perlu memasukkan data-data yang dirasa perlu. Di sini, saya memasukkan $table, $primaryKey, dan $useTimestamps.

Selanjutnya, kita perlu menghubungkan antara model dan controller yang sebelumnya sudah kita buat.

Pertama kita membuat variabel $mahasiswaModel yang berguna untuk menghubungkan dengan MahasiswaModel (Line 13) yang sebelumnya sudah terkoneksi ke table mahasiswa di database. Kemudian seluruh data pada mahasiswaModel akan disimpan di variabel mahasiswa (line 18) yang nantinya akan dikirimkan ke view_mahasiswa melalui $data.

READ

Kemudian, kita bisa mengakses variabel mahasiswa tadi di view_mahasiswa, kita juga bisa langsung melakukan looping atau perulangan untuk mencetak data yang ada di database ke dalam tabel dengan cara sebagai berikut :

Maka, tampilan web akan menjadi seperti berikut :

Langkah berikutnya adalah kita perlu mengatur route supaya kita bisa menekan tombol Open. Di sini kita perlu menambahkan route sebagai berikut (line 37) di mana ketika kita mengakses /mahasiswa/ dengan segment tertentu, akan memanggil controller MahasiswaController dan memanggil fungsi detail pada controller tersebut dengan mengirim satu variabel yaitu segment yang tadinya sudah kita simpan:

Segment berguna untuk menyimpan variabel, dalam kasus ini yang disimpan adalah NRP sebagai primary key dari tabel mahasiswa.

Selanjutnya yang perlu kita ubah adalah controller mahasiswa. Di sini saya menambahkan satu fungsi 'detail' dan mengedit fungsi yang 'index' dengan membuat fungsi baru di model dengan nama getMahasiswa. Hal ini bertujuan agar code lebih rapi dan bisa dengan mengakses satu fungsi saja pada model. :

Kemudian kita perlu membuat view baru dengan nama sesuai yang kita buat pada controller, yaitu view_detailmahasiswa yang berisi detail dari mahasiswa yang dipilih serta tombol edit dan delete. Untuk membuat tampilan ini, kita bisa menggunakan script HTML dan CSS seperti pada views-views yang sudah dibuat sebelumnya. Tampilan yang saya buat kurang lebih seperti berikut :

CREATE

Maksud dari create adalah menambah data baru. Pada kasus ini, kita diharapkan bisa memasukkan data baru pada tabel mahasiswa. Untuk itu, saya menambahkan tombol baru di view_mahasiswa yang berguna untuk mengarahkan kita untuk menambahkan mahasiswa baru :

Dan tampilannya akan sebagai berikut :

selanjutnya kita perlu mengatur routes agar kita bisa mengakses halaman yang baru kita buat dengan manambahkan sebagai berikut :

Jadi ketika tombol Tambah Mahasiswa Baru ditekan, kita akan diarahkan ke /mahasiswa/tambah di mana akan memanggil MahasiswaController dengan method atau fungsi tambah. Karena kita belum memiliki fungsi tambah pada MahasiswaController, kita perlu menambahkannya terlebih dahulu dengan isian awal sebagai berikut :

Dan kita juga perlu membuat view untuk halaman tambah mahasiswa yang berisi form. Di sini saya emmbaut view-nya sesuai dengan nama yang dipanggil tadi yaitu "view_tambahmahasiswa" dengan perintah HTML dan CSS dengan tampilan sebagai berikut :

Bisa kita lihat bahwa form action memanggil MahasiswaController dengan function simpan. Karena kita belum membuat fungsi tersebut sebelumnya, maka sekarang kita harus membuatnya pada MahasiswaController :

Dapat dilihat pada fungsi tersebut bahwa data yang sudah diinputkan pada form dapat kita ambil dengan fungsi getVar dan kita simpan pada tabel dengan kolom sesuai yang dituliskan. Kebetulan saya menyimpan form dengan nama variabel yang sama, jadi bisa lebih mudah untuk menyimpan ke database.

Selanjutnya, yang kita perlu mendeklarasikan kolom-kolom mana saja yang bisa diinputkan secara manual di model dengan memasukkan syntax sebagai berikut (line 12):

Jika sudah, maka fungsi Tambah Mahasiswa Baru kita sudah bisa digunakan 

Dan tentunya kita bisa membuka detail dari masing-masing mahasiswa yang baru kita masukkan :

Untuk mempercantik tampilan, kita bisa menambahkan fitur alert yang akan memberitahu pengguna bahwa data berhasil dimasukkan setelah kita memasukkan data. Pertama, kita harus menambahkan setFlashdata terlebih dahulu di MahasiswaController sebelum me-redirect halaman :

Pada perintah tersebut, kita mendeklarasikan variabel pesan dengan isi "Mahasiswa berhasil ditambahkan"

Selanjutnya, pada view_mahasiswa, kita perlu memasukkan perintah berikut di tempat sesuai keinginan kita. Pada kasus ini, saya meletakkannya di bawah judul

Maka setelah kita memasukkan mahasiswa baru, akan muncul tampilan sebagai berikut :

Untuk memperbaiki form penambahan mahasiswa. saya menambah Form Validation dengan menentukan fields mana saja yang harus diisi ketika memasukkan data. Langkah pertama yang harus kita lakukan adalah membuat variabel dengan nama validate yang akan menyimpan segala pesan error yang ditangkap oleh sistem dan yang akan me-redirect kita ke halaman yang sama apabila ditemukan error dalam penginputan data mahasiswa

Langkah selanjutnya yang harus dilakukan adalah dengan mendeklarasikan fields/kolom mana saja yang perlu divalidasi di MahasiswaController :

dapat dilihat pada gambar tersebut, saya juga meng-custom pesan error yang akan muncul apabila kita melakukan kesalahan dalam mengisi input mahasiswa.

Kita juga harus menambahkan pada view_mahasiswa code sebagai berikut pada setiap field yang kita ingin tampilkan pesan error-nya:

Pada code itu juga saya menambahkan value dengan mengisikan old value dari masing-masing inputan, sehingga, saat terjadi error, kita tidak perlu menulis ulang semua field yang tadi gagal diinputkan.

Maka, nanti tampilanya akan seperti berikut :

DELETE

Untuk membuat fungsi delete, langkah pertama yang harus kita lakukan adalah dengan membuat fungsi delete pada controller mahasiswa dengan kode sebagai berikut :

Selanjutnya, kita hanya perlu untuk mengatur tombol delete pada view mahasiswa. Di mana pada tombol ini, kita akan mengirim NRP mahasiswa yang akan dihapus.

Dan apabila kita ingin menambahkan pesan konfirmasi untuk penghapusan siswa, kita bisa menambahkan kode berikut :

Berikut data mahasiswa setelah menghapus beberapa mahasiswa :

UPDATE

Pertama, dalam melakukan update mahasiswa, kita perlu mengatur routes terlebih dahulu

Pertama, kita membuat kode yang mengecek apakah urutan mahasiswa diubah atau tidak karena urutan mahasiswa bersifat unik, jadi tidak boleh ada yang sama. Setelah dicek, kita akan mengatur rules/aturan yang akan dipakai pada masing-masing kondisi :

Kemudian kita bisa membuat fungsi yang mirip dengan ketika create :

Selanjutnya jangan lupa emngubah tombol edit yang ada di view detail mahasiswa

Kemdian kita perlu membuat view untuk mengubah data yang sudah diinputkan ke database, karena isi dari view edit ini hampir sama dengan form tambah mahasiswa, kita bisa meng-copy view tambahmahasiswa dan mengubah sedikit yang diperlukan :

Yap, begitulah cara membuat CRUD di CI. Buat yang mau coba, semoga bisa yaaaaa!