Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter (Bagian II)
total read time
Di sesi I kemarin, kita sudah membuat dasar dari web toko buku menggunakan code igniter dan sudah berhasil menampilkan datanya. Kali ini kita akan melanjutkannya ke tahapan kedua yaitu untuk edit data dan juga delete data.
Edit Data Buku
Pertama, kita akan buat sebuah file view untuk menampilkan data yang akan diedit. Jadi kita akan buat file.php baru dengan nama edit_buku.php di Application\views. Tampilan dari form edit ini akan sangat mirip dengan yang kita buat untuk tampilan tambah data. Dan berikut ini adalah codenya
<html>
<head>
<title>Ubah Data Buku</title>
</head>
<body>
<h3>Form Ubah Data Buku</h3>
<table>
<form action="<?php echo base_url('Welcome/p_editBuku'); ?>" method="POST">
<tr>
<td>ID Buku</td>
<td>:</td>
<td>
<input type="text" value="<?php echo $data_buku->id_buku; ?>" name="id_buku" disabled>
<!--menampilkan data-->
<input type="hidden" name="id_buku" value="<?php echo $data_buku->id_buku; ?>">
<!--menampung data-->
</td>
</tr>
<tr>
<td>Kategori Buku</td>
<td>:</td>
<td><input type="text" name="kategori" value="<?php echo $data_buku->kategori_buku; ?>"></td>
</tr>
<tr>
<td>Judul Buku</td>
<td>:</td>
<td><input type="text" name="judul" value="<?php echo $data_buku->judul_buku; ?>"></td>
</tr>
<tr>
<td>Penerbit</td>
<td>:</td>
<td><input type="text" name="penerbit" value="<?php echo $data_buku->penerbit; ?>"></td>
</tr>
<tr>
<td>Harga</td>
<td>:</td>
<td><input type="number" name="harga" value="<?php echo $data_buku->harga; ?>"></td>
</tr>
<tr>
<td colspan="3">
<center><input type="submit" value="SIMPAN"></center>
</td>
</tr>
</form>
</table>
</body>
</html>
Dan berikut ini adalah tampilan formnya.
 |
| form edit data buku |
Perbedaanya adalah, kita menampilkan data berdasarkan data pilihan yang akan kita edit di Opsi edit tabel data buku.
Sebelumnya, sobat perhatikan pada file home.php di bagian code Opsi Edit, ada code seperti berikut :
href="<?php echo base_url('Welcome/editBuku/') . $row->id_buku; ?> "
Dengan code diatas, kita akan mengirimkan data id_buku ke fungsi editBuku() di controller home.php . Selanjutnya kita get datanya menjadi variable $id.
public function editBuku($id)
{
$dataBukuDetail = $this->M_tokobuku->getDataBukuDetail($id);
$DataBuku = array('data_buku' => $dataBukuDetail);
$this->load->view('edit_buku', $DataBuku);
}
Code diatas adalah function pada editBuku($id) di controller Welcome. Selanjutnya, dari sini akan mengirimkan $id ke modal getDataBukuDetail() untuk mendapatkan detail data dari buku. Dan kita tambahkan function untuk getDataBukuDetail di modal M_tokobuku().
public function getDataBukuDetail($id)
{
$this->db->where('id_buku', $id);
$query = $this->db->get('tb_buku');
return $query->row();
}
Dalam fungsi tersebut kita seleksi data yang ingin ditampilkan pada view edit_buku.php berdasarkan id_buku dan selanjutnya datanya dikembalikan berupa objek yang disimpan pada row(). Row() dalam code igniter memberikan hasil satu baris. Jika hasil query data memiliki hasil lebih dari satu baris, maka hanya akan baris pertama yang nilainya di return. Hasil ini direturn berupa objek.
Setelah itu data yang di return tadi akan disimpan pada $dataBukuDetail di editBuku() pada controller welcome. Selanjutnya akan dikirimkan ke view edit_buku.php , sehinga akan tapil data yang kita pilih.
 |
| contoh perubahan pada edit data buku |
Sobat perhatian gambar pertama, dan di gambar diatas kita ubah nilainya harganya menjadi 30000. Kemudian kita klik simpan untuk menyimpan datanya. Dan setelah data tersimpan, maka kita akan dikembalikan ke halaman awal data buku.
Kedua, Untuk proses edit data buku ini sobat membuat fungsi baru di controller welcome dengan nama p_editBuku().
public function p_editBuku()
{
$id_buku = $this->input->post('id_buku');
$kategori_buku = $this->input->post('kategori');
$judul_buku = $this->input->post('judul');
$penerbit = $this->input->post('penerbit');
$harga = $this->input->post('harga');
$updateData = array(
'kategori_buku' => $kategori_buku,
'judul_buku' => $judul_buku,
'penerbit' => $penerbit,
'harga' => $harga
);
$this->M_tokobuku->editDataBuku($updateData, $id_buku);
redirect(base_url('Welcome'));
}
Pada code di p_editBuku(), kita menangkap data setiap inputan di view edit_buku.php . Kemudian data tersebut kita kirimkan ke modal $updateData() untuk proses update kedalam database. Dan berikut ini adalah code di modal M_tokobuku pada editDataBuku().
public function editDataBuku($data, $id)
{
$this->db->where('id_buku', $id);
$this->db->update('tb_buku', $data);
}
Ketiga, kita sudah berhasil mengupdate data buku, dan selanjutnya kita akan membahas langkah terakhir yaitu Delete data. Nah sobat sekarang perhatikan di file home.php pada code :
href="<?php echo base_url('Welcome/deleteBuku/') . $row->id_buku; ?>"
Pada code itu, id_buku akan dikirimkan ke controller welcome pada fungsi deleteBuku(). Dan berikut adalah code di deleteBuku().
public function deleteBuku($id_buku)
Dari code diatas, $id_buku akan digunakan di modal M_tokobuku pada fungsi deleteDataBuku(). Dan code untuk deleteDataBuku adalah seperti berikut.
public function deleteDataBuku($id)
Jadi ketika sobat mengklik Opsi Delete di tabel data buku, maka data yang sobat pilih akan terhapus. Dan kita sudah berhasil membuat fungsi untuk menghapus data.
Oke sobat, kita sudah belajar untuk membuat sebuah web dengan code igniter, khususnya kita sudah memindahkan web toko buku yang sebelumnya menggunakan php biasa dan sekarang sudah menggunakan framework code igniter.
Untuk tampilan pada artikel ini, akan kita coba benahi di artikel tutorial berikutnya. Jadi jangan sampai ketinggalan ya sobat. Terimakasih perhatian dan silahkan tuliskan komentar apabila ada hal yang ingin ditanyakan. Apabila tidak ada kesibukan berarti, admin akan membalasnya dengan segera. Terimakasih, salam Sidat.ID
Untuk link artikel dan download programmnya, silahkan sobat klik pada link dibawah ini :
- Sesi 1 : Membuat Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter (Bagian I)
- Sesi 2 : Membuat Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter (Bagian II)
- Download file latihan : download