Tutorial Codeigniter #5: Cara Membuat Fitur CRUD yang Benar!
![Menggunakan Database MYSQL pada Codeigniter](https://d33wubrfki0l68.cloudfront.net/0d2d485394a0a1b2560812001636fece6093f0af/655c3/img/ci/codeigniter.png)
Pada tutorial sebelumnya, kita sudah belajar bagaimana cara membuat template admin yang benar dan efisien.
Kita juga sudah membahas tentang Controller dan routing pada Codeigniter.
Nah! yang belum…
Pembahasan tentang database dan model.
Oke, judulnya ini cukup clickbait: “Cara Membuat Fitur CRUD di Codeigniter yang Benar!”
Mengapa saya bilang demikian?
Karena, beberapa tutorial Codeigniter yang pernah saya ikuti tidak mengajari praktek terbaik (best practice) dalam ngoding CI.
Bukan berarti mereka salah…
…dan mengklaim cara pada tutorial ini yang paling benar.
Semua cara dan solusi, benar.
Hanya saja, jika kita menulis kode sembarangan, akibatnya bisa rugi.
Saya pernah mengerjakan project menggunakan Codeigniter, lalu kode-kode yang saya tulis sangat berantakan dan kotor.
Hasilnya:
Project gagal, karena saya tidak mau mengembangkannya lagi.
Ribet!
Saya lebih memilih ngoding ulang dari awal daripada mengembangkan kode tersebut.
Seperti itulah rasanya menulis kode yang buruk dan kotor.
Namun, dari hasil pengulangan tersebut. Saya belajar banyak hal.
Seperti, bagaimana sebaiknya cara menerima data dari form. Apakah langsung di simpan ke database, atauhkah divalidasi dulu.
Ternyata yang benar adalah:
Data harus divalidasi dulu.
Jika tidak divalidasi, bisa jadi nanti akan banyak bugs dan rentan dengan serangan XSS.
Tambah kerjaan lagi… ![😫](https://www.petanikode.com/img/icon/twemoji/1f62b.svg)
Belajar dari pengalaman, saya tidak ingin kamu bernasib sama seperti saya yang gagal menyelesaikan project.
Maka saya membuat tutorial ini…
Jika ada solusi yang lebih baik lagi, silahkan diusulkan di komentar!
Oke, kita masuk ke tutorial.
Pada tutorial ini, kita akan mengerjakan banyak hal. Mulai dari membuat database, menyiapkan library, membuat model, sampai membuat CRUD.
CRUD (Create, Read, Update Delete) adalah fitur dasar yang harus kita buat saat bekerja dengan database.
Berikut ini daftar pekerjaannya…
TODO:
Mari kita mulai kerjakan…
Membuat Database untuk Codeigniter
Silahkan buka PHPMyadmin, kemudian buatlah database baru dengan nama
tokobuah
.![Membuat database baru](https://d33wubrfki0l68.cloudfront.net/81d19535f56f3a2a56e31e446cff45be267c7180/145b5/img/ci/db/create-db.png)
Setelah itu, buat tabel
products
dengan 5
kolom. Tabel ini nanti akan menyimpan data produk.![Tabel produk](https://d33wubrfki0l68.cloudfront.net/56293e6a577a68b080ab716b89debee30c712dc4/bfe50/img/ci/db/table-name.png)
Kolom yang dibutuhkan:
product_id
(Primary Key) bertipe string dengan panjang64
;name
bertipe string dengan panjang255
.price
bertipe integer.image
bertipe string dengan panjang255
.description
bertipe TEXT.
![Membuat tabel dan kolom database](https://d33wubrfki0l68.cloudfront.net/20e7615e64295e1d36cef17f00d4628998431c3e/46930/img/ci/db/kolom.png)
…dan jangan lupa jadikan kolom
product_id
sebagai primary key.![Membuat primary key pada kolom product_id](https://d33wubrfki0l68.cloudfront.net/e3922ece9b2a872d6dedfe2a8b532c3fc6f02b1f/0f479/img/ci/db/primary-key.gif)
Terakhir, klik Save untuk menyimpan.
![Menyimpan tabel](https://d33wubrfki0l68.cloudfront.net/097e3c0137b44c2e8c7787d33c995c9bc0c9e1b2/91bef/img/ci/db/save-table.png)
Sehingga kita sekarang punya tabel
products
dengan struktur seperti ini:![Tabel produk](https://d33wubrfki0l68.cloudfront.net/4a7453ca08fb5c56f522cc3d0844c2719ed6093e/154d9/img/ci/db/tabel-product.png)
Kode SQL-nya:
CREATE TABLE `products` (
`product_id` varchar(64) NOT NULL,
`name` varchar(255) NOT NULL,
`price` int(11) NOT NULL,
`image` varchar(255) NOT NULL DEFAULT 'default.jpg',
`description` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Satu pekerjaan sudah selesai…
TODO:
Berikutnya kita akan melakukan konfigurasi pada Codeigniter agar dapat terhubung dengan database.
Konfigurasi Codeigniter
Silahkan buka
config/database.php
, kemudian isi seperti ini:$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'dian',
'password' => 'kopi',
'database' => 'tokobuah',
'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
);
Perhatikan pada item berikut:
'hostname' => 'localhost',
'username' => 'dian',
'password' => 'kopi',
'database' => 'tokobuah',
Silahkan ubah sesuai dengan konfigurasi server mysql pada komputermu.
Pada komputer saya, username MySQL-nya adalah
dian
dan password-nya kopi
.
Jika kamu menggunakan XAMPP, password-nya biasanya tidak ada dan user yang digunakan adalah
root
.
Gunakan ini untuk XAMPP:
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'tokobuah',
Berikutnya, silahkan buka
config/autoload.php
.
Kemudian cari
$autoload['libraries']
dan tambahkan database
dan session
di sana.$autoload['libraries'] = array('database', 'session');
Ini artinya, kita akan me-load library
database
dan session
secara otomatis.
Apa fungsinya?
- Library
database
akan menyediakan fungsi-fungsi untuk operasi database. Kita butuh ini, karena kita akan menggunakan database dalam aplikasi; - Library
session
menyediakan fungsi-fungsi untuk mengakses variabel$_SESSION
. Kita butuh ini untuk menampilkan flash message dan membuat login.
Dengan demikian konfigurasi selesai…
TODO:
Jika ada yang ingin kita konfigurasi lagi atau mau tambah library lagi, nanti kita bisa ubah konfigurasinya.
Untuk saat ini, kita cukup butuh konfigurasi database dan autoload library saja.
Berikutnya, kita akan mulai menulis kode untuk model.
Membuat Model untuk Tabel
Model merupakan class atau kode yang berhubungan dengan data.
Di dalam model, kita akan membuat pemodelan data dari database. Sehingga kita akan lebih mudah mengaksesnya.
Biasanya satu tabel, dibuatkan satu modelnya.
Silahkan buat file baru di dalam direktori
application/model/
dengan nama Product_model.php
.![File Model](https://d33wubrfki0l68.cloudfront.net/c81d9116ca3f9324b105132337783ae292135749/3f2d2/img/ci/db/file-model.png)
Perhatikan, namanya harus diawali dengan huruf kapital.
Pada contoh di atas,
P
adalah huruf kapital.
Lalu untuk akhiran
_model
ini bersifat opsional. 1
Saya sengaja membuat akhiran ini untuk memudahkan dalam membedakan class Controller dengan class Model.
Nanti kita juga akan membuat class Controller yang bernama
Products.php
, karena itu kita sebaiknya menggunakan akhiran _model
pada class Model.
Setelah membuat file, lalu apa lagi?
Selanjutnya kita akan mulai menulis kode untuk
Product_model.php
.
Silahkan ketik kode berikut…
(ketik ya! jangan copas, agar dapat pengalaman coding, bukan pengalaman copas
)
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Product_model extends CI_Model
{
private $_table = "products";
public $product_id;
public $name;
public $price;
public $image = "default.jpg";
public $description;
public function rules()
{
return [
['field' => 'name',
'label' => 'Name',
'rules' => 'required'],
['field' => 'price',
'label' => 'Price',
'rules' => 'numeric'],
['field' => 'description',
'label' => 'Description',
'rules' => 'required']
];
}
public function getAll()
{
return $this->db->get($this->_table)->result();
}
public function getById($id)
{
return $this->db->get_where($this->_table, ["product_id" => $id])->row();
}
public function save()
{
$post = $this->input->post();
$this->product_id = uniqid();
$this->name = $post["name"];
$this->price = $post["price"];
$this->description = $post["description"];
$this->db->insert($this->_table, $this);
}
public function update()
{
$post = $this->input->post();
$this->product_id = $post["id"];
$this->name = $post["name"];
$this->price = $post["price"];
$this->description = $post["description"];
$this->db->update($this->_table, $this, array('product_id' => $post['id']));
}
public function delete($id)
{
return $this->db->delete($this->_table, array("product_id" => $id));
}
}
Sudah selesai ngetiknya?
Baik, sekarang giliran saya menjelaskan:
Kode di atas memang belum bisa kita coba, karena ini hanya pemodelan data saja.
Nanti kita akan gunakan fungsi-fungsi atau method yang ada di dalam kode ini pada class Controller.
Pertama silahkan perhtaikan bagian ini:
private $_table = "products"; //nama tabel
// nama kolom di tabel, harus sama huruf besar dan huruf kecilnya!
public $product_id;
public $name;
public $price;
public $image = "default.jpg";
public $description;
Ini adalah properti atau variabel yang kita butuhkan dalam model Product.
Pada properti
$_tabel
kita memberikan modifier private
, karena properti ini hanya akan digunakan pada class ini saja.
Jika kamu pernah belajar OOP, pasti paham.
Lalu pada properti
$image
, kita langsung mengisi nilainya dengan "default.jpg"
.
Ini nanti akan menjadi nilai default-nya, sebenarnya kita bisa saja tidak isi demikian.
Karena di tabel sudah kita berikan nilai default-nya.
Selanjutnya silahkan perhatikan method
rules()
:public function rules()
{
return [
['field' => 'name',
'label' => 'Name',
'rules' => 'required'],
['field' => 'price',
'label' => 'Price',
'rules' => 'numeric'],
['field' => 'description',
'label' => 'Description',
'rules' => 'required']
];
}
Method ini akan mengembalikan sebuah array yang berisi rules.
Rules ini nanti kita butuhkan untuk validasi input.
Pada Rules di atas, kita memberikan aturan untuk wajib mengisi (required) field
name
, price
, dan description
.
Berikutnya, silahkan perhatikan method
get()
dan getAll()
. Kedua method ini akan kita gunakan untuk mengambil data dari database.![Kode untuk mengambil data](https://d33wubrfki0l68.cloudfront.net/2a59d9aad9afe1c0f07aa45ab40822ebacf52a0f/5ef66/img/ci/db/method-get.png)
Berikutnya perhatikan method
save()
:![Kode untuk menyimpan data](https://d33wubrfki0l68.cloudfront.net/1a246823d15146ed044835795e1a9e1010f36370/c9f2f/img/ci/db/method-save.png)
Method ini akan kita gunakan untuk menyimpan data ke tabel
product
.
Kita mengambil input yang dikirim dari form menggunakan
$this->input->post()
.
Mengapa ini ditulis di model?
Biasanya orang menuliskannya pada Controller. Namun, biar Controller lebih fokus mengatur hubungan Model dengan View, maka sebaiknya ini kita tulis di Model.
Karena nanti pada Controller, kita tinggal validasi saja inputannya.
Untuk method berikutnya hampir sama.
Method
update()
untuk update data dan delete()
untuk menghapus data.
Pada method
update()
, kita mengisi $this->product_id
dengan id yang didapatkan dari form ($post['id']
). Karena ini untuk update.
Sedangkan pada method
save()
, kita mengisinya dengan fungsi uniqid()
. Karena kita akan membuat baru.
Fungsi ini nantinya akan menghasilkan karakter unik.
Baik, dengan demikian…
…kita sudah selesai membuat model.
TODO:
Berikutnya kita akan membuat Controller.
Membuat Controller
Seperti yang sudah kita pelajari pada tutorial sebelumnya, Controller adalah bagian dari CI yang bertugas untuk menangani HTTP request dan menghubungan Model dengan View.
Pada Controller, kita akan memanggil method-method yang ada di dalam model untuk mendapatkan data.
Setelah itu data tersebut di-render ke dalam view dengan me-load-nya.
Untuk lebih jelasnya…
Mari kita mulai coding.
Silahkan buat file baru di dalam folder
application/controllers/admin/
dengan nama Products.php
.![Membuat file controller](https://d33wubrfki0l68.cloudfront.net/8ac263187249238b6e2d2d249d5e4a42f8959550/620aa/img/ci/db/file-controller.gif)
Kemudian isi file
Products.php
dengan kode berikut:<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Products extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model("product_model");
$this->load->library('form_validation');
}
public function index()
{
$data["products"] = $this->product_model->getAll();
$this->load->view("admin/product/list", $data);
}
public function add()
{
$product = $this->product_model;
$validation = $this->form_validation;
$validation->set_rules($product->rules());
if ($validation->run()) {
$product->save();
$this->session->set_flashdata('success', 'Berhasil disimpan');
}
$this->load->view("admin/product/new_form");
}
public function edit($id = null)
{
if (!isset($id)) redirect('admin/products');
$product = $this->product_model;
$validation = $this->form_validation;
$validation->set_rules($product->rules());
if ($validation->run()) {
$product->update();
$this->session->set_flashdata('success', 'Berhasil disimpan');
}
$data["product"] = $product->getById($id);
if (!$data["product"]) show_404();
$this->load->view("admin/product/edit_form", $data);
}
public function delete($id=null)
{
if (!isset($id)) show_404();
if ($this->product_model->delete($id)) {
redirect(site_url('admin/products'));
}
}
}
Sudah selesai?
Sekarang mari kita perhatikan penjelasannya…
Ada lima method dalam class tersebut:
1. Method __construct()
Method
__construct()
merupakan sebuah konstruktor. Method ini yang akan dieksekusi pertama kali saat Controller diakses.
Pada method ini, kita melakukan load model (
porduct_model
) dan library (form_validation
).public function __construct()
{
parent::__construct();
$this->load->model("product_model");
$this->load->library('form_validation');
}
Library
form_validation
akan kita gunakan untuk memvalidasi input pada method add()
dan edit()
.
Mengapa harus divalidasi?
Karena bisa saja pengguna menginputkan data sembarang. Misalnya, sengaja mengisi dengan data kosong, script jahat seperti: serangan XSS, dll.
Intinya:
Sebelum menyimpan data ke database, pastikan data tersebut sudah benar.
2. Method index()
Pada method ini, kita akan mengambil data dari model dengan memanggil method
product_model->getAll()
.
Lalu kita me-rendernya ke dalam view
admin/product/list
.public function index()
{
$data["products"] = $this->product_model->getAll();
$this->load->view("admin/product/list", $data);
}
View
admin/product/list
belum ada. Nati kita akan membuatnya.
3. Method add()
Method ini bertugas untuk menampilkan form add dan menyimpan data ke database. Tentunya dengan memanggil method
save()
yang ada pada model.
Namun, sebelum memanggil method
save()
, kita lakukan validasi terlebih dahulu dengan mengeksekusi method run()
pada objek $validation
.![Method add pada controller](https://d33wubrfki0l68.cloudfront.net/4eb79677dfa8252538a503ef2982e594b4176dbc/5da2a/img/ci/db/method-add.png)
Jika berhasil, maka pesan
"Berhasil disimpan"
akan ditampilkan.
Terakhir, kita akan menampilkan view
product/new_form
. View ini berisi sebuah form untuk menambah data.
View ini juga belum ada.
Nanti kita akan membuatnya.
4. Method edit()
Hampir sama dengan method
add()
, method edit()
juga bertugas untuk menampilkan form dan menyimpan data.![Kode untuk edit data](https://d33wubrfki0l68.cloudfront.net/0aff9229ceeaaed1ee72df3623de795dc89e2112/f443b/img/ci/db/method-edit.png)
Mungkin kamu akan bertanya…
Nilai
$id
akan didapatkan dari mana?
Nilai
$id
akan kita dapatkan dari parameter atau argumen pada URL.![Parameter URL](https://d33wubrfki0l68.cloudfront.net/7d7fe11ffce4bdf0d69fdf7668f7865f83d88fd7/eb4f0/img/ci/db/url.png)
Ini sudah pernah kita bahas pada tutorial routing pada CI.
5. Method delete()
Method
delete()
befungsi untuk menangni penghapusan data.
Prinsipnya hampir sama seperti method
edit()
, method delete()
juga membutuhkan $id
untuk menentukan data mana yang akan dihapus.public function delete($id=null)
{
if (!isset($id)) show_404();
if ($this->product_model->delete($id)) {
redirect(site_url('admin/products'));
}
}
Apabila data berhasil dihapus, maka kita langsung alihkan (
redirect()
) menuju ke halaman admin/products/
.
Dengan demikian…
Kita sudah selesai membuat Controller. ![👏](https://www.petanikode.com/img/icon/twemoji/1f44f.svg)
![👏](https://www.petanikode.com/img/icon/twemoji/1f44f.svg)
![👏](https://www.petanikode.com/img/icon/twemoji/1f44f.svg)
TODO:
Tugas kita masih belum selesai dan aplikasi masih belum dapat dicoba, karena kita belum membuat view-nya.
Membuat View
View merupakan bagian yang bertugas mengurus tampilan.
Ada tiga macam view yang harus kita buat dalam aplikasi ini:
list.php
untuk menampilkan data;new_form.php
untuk menampilkan form tambah data;- dan
edit_form.php
untuk menampilkan form edit data.
Mari kita buat semuanya.
Tapi sebelum itu, silahkan buat folder baru pada direktori
views/admin
dengan nama product
.![Membut folder untuk view product](https://d33wubrfki0l68.cloudfront.net/9860960c0d30fa63c271cf96d779c333ac919a0f/e25b6/img/ci/db/view-product.gif)
Setelah itu, kita akan membuat ketiga view di dalam folder
views/admin/product/
.1. View List Data
Buatlah file baru dengan nama
list.php
di dalam folder views/admin/product/
.![Membuat view list.php](https://d33wubrfki0l68.cloudfront.net/a167a43b4e76eaea06a5e9bfbb196891b8aca66f/ed04a/img/ci/db/view-list.gif)
Setelah itu, isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>
<body id="page-top">
<?php $this->load->view("admin/_partials/navbar.php") ?>
<div id="wrapper">
<?php $this->load->view("admin/_partials/sidebar.php") ?>
<div id="content-wrapper">
<div class="container-fluid">
<?php $this->load->view("admin/_partials/breadcrumb.php") ?>
<!-- DataTables -->
<div class="card mb-3">
<div class="card-header">
<a href="<?php echo site_url('admin/products/add') ?>"><i class="fas fa-plus"></i> Add New</a>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Photo</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $product): ?>
<tr>
<td width="150">
<?php echo $product->name ?>
</td>
<td>
<?php echo $product->price ?>
</td>
<td>
<img src="<?php echo base_url('upload/product/'.$product->image) ?>" width="64" />
</td>
<td class="small">
<?php echo substr($product->description, 0, 120) ?>...</td>
<td width="250">
<a href="<?php echo site_url('admin/products/edit/'.$product->product_id) ?>"
class="btn btn-small"><i class="fas fa-edit"></i> Edit</a>
<a onclick="deleteConfirm('<?php echo site_url('admin/products/delete/'.$product->product_id) ?>')"
href="#!" class="btn btn-small text-danger"><i class="fas fa-trash"></i> Hapus</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<?php $this->load->view("admin/_partials/footer.php") ?>
</div>
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<?php $this->load->view("admin/_partials/scrolltop.php") ?>
<?php $this->load->view("admin/_partials/modal.php") ?>
<?php $this->load->view("admin/_partials/js.php") ?>
</body>
</html>
View
porduct/list.php
bertugas untuk menampilkan data pada halaman admin.
Datanya didapat dari mana?
Datanya kita dapat dari Controller, coba saja perhatikan method
index()
pada controller Product.php
.public function index()
{
$data["products"] = $this->product_model->getAll(); // ambil data dari model
$this->load->view("admin/product/list", $data); // kirim data ke view
}
2. Membuat Form Add
View berikutnya yang harus kita buat adalah
new_form.php
.
Silahkan buat file baru di dalam folder
view/admin/product/
dengan nama new_form.php
.
Setelah itu, isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>
<body id="page-top">
<?php $this->load->view("admin/_partials/navbar.php") ?>
<div id="wrapper">
<?php $this->load->view("admin/_partials/sidebar.php") ?>
<div id="content-wrapper">
<div class="container-fluid">
<?php $this->load->view("admin/_partials/breadcrumb.php") ?>
<?php if ($this->session->flashdata('success')): ?>
<div class="alert alert-success" role="alert">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
<div class="card mb-3">
<div class="card-header">
<a href="<?php echo site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i> Back</a>
</div>
<div class="card-body">
<form action="<?php base_url('admin/product/add') ?>" method="post" enctype="multipart/form-data" >
<div class="form-group">
<label for="name">Name*</label>
<input class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
type="text" name="name" placeholder="Product name" />
<div class="invalid-feedback">
<?php echo form_error('name') ?>
</div>
</div>
<div class="form-group">
<label for="price">Price*</label>
<input class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"
type="number" name="price" min="0" placeholder="Product price" />
<div class="invalid-feedback">
<?php echo form_error('price') ?>
</div>
</div>
<div class="form-group">
<label for="name">Photo</label>
<input class="form-control-file <?php echo form_error('price') ? 'is-invalid':'' ?>"
type="file" name="image" />
<div class="invalid-feedback">
<?php echo form_error('image') ?>
</div>
</div>
<div class="form-group">
<label for="name">Description*</label>
<textarea class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"
name="description" placeholder="Product description..."></textarea>
<div class="invalid-feedback">
<?php echo form_error('description') ?>
</div>
</div>
<input class="btn btn-success" type="submit" name="btn" value="Save" />
</form>
</div>
<div class="card-footer small text-muted">
* required fields
</div>
</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<?php $this->load->view("admin/_partials/footer.php") ?>
</div>
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<?php $this->load->view("admin/_partials/scrolltop.php") ?>
<?php $this->load->view("admin/_partials/js.php") ?>
</body>
</html>
View
new_form.php
betugas untuk menampilkan form input untuk pembuatan data baru.
Form ini akan mengirim data ke:
/admin/products/add
(controller products, method add).
Perhatikan pada form-nya.
<form action="<?php base_url('admin/product/add') ?>" method="post" enctype="multipart/form-data" >
...
</form>
Pada form tersebut, kita menggunakan
enctype="multipart/form-data"
. Ini nanti akan kita gunakan untuk upload file.
Untuk saat ini fitur upload belum kita buat.
3. Membuat Form Edit
View terakhir yang harus kita buat adalah
edit_form.php
. Isi kodenya hampir sama seperti new_form.php
.
Bedanya, di
edit_form.php
kita menampilkan nilai untuk setiap field-nya.
Silahkan buat file baru di dalam folder
views/admin/product/
dengan nama edit_form.php
.
Setelah itu, isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>
<body id="page-top">
<?php $this->load->view("admin/_partials/navbar.php") ?>
<div id="wrapper">
<?php $this->load->view("admin/_partials/sidebar.php") ?>
<div id="content-wrapper">
<div class="container-fluid">
<?php $this->load->view("admin/_partials/breadcrumb.php") ?>
<?php if ($this->session->flashdata('success')): ?>
<div class="alert alert-success" role="alert">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
<!-- Card -->
<div class="card mb-3">
<div class="card-header">
<a href="<?php echo site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i>
Back</a>
</div>
<div class="card-body">
<form action="<?php base_url('admin/product/edit') ?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $product->product_id?>" />
<div class="form-group">
<label for="name">Name*</label>
<input class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
type="text" name="name" placeholder="Product name" value="<?php echo $product->name ?>" />
<div class="invalid-feedback">
<?php echo form_error('name') ?>
</div>
</div>
<div class="form-group">
<label for="price">Price</label>
<input class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"
type="number" name="price" min="0" placeholder="Product price" value="<?php echo $product->price ?>" />
<div class="invalid-feedback">
<?php echo form_error('price') ?>
</div>
</div>
<div class="form-group">
<label for="name">Photo</label>
<input class="form-control-file <?php echo form_error('image') ? 'is-invalid':'' ?>"
type="file" name="image" />
<input type="hidden" name="old_image" value="<?php echo $product->image ?>" />
<div class="invalid-feedback">
<?php echo form_error('image') ?>
</div>
</div>
<div class="form-group">
<label for="name">Description*</label>
<textarea class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"
name="description" placeholder="Product description..."><?php echo $product->description ?></textarea>
<div class="invalid-feedback">
<?php echo form_error('description') ?>
</div>
</div>
<input class="btn btn-success" type="submit" name="btn" value="Save" />
</form>
</div>
<div class="card-footer small text-muted">
* required fields
</div>
</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<?php $this->load->view("admin/_partials/footer.php") ?>
</div>
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<?php $this->load->view("admin/_partials/scrolltop.php") ?>
<?php $this->load->view("admin/_partials/js.php") ?>
</body>
</html>
Akhirnya selesai juga… ![👏](https://www.petanikode.com/img/icon/twemoji/1f44f.svg)
![👏](https://www.petanikode.com/img/icon/twemoji/1f44f.svg)
![👏](https://www.petanikode.com/img/icon/twemoji/1f44f.svg)
TODO:
Tinggal sentuhan terakhir nih.
Tapi sebelum itu, kita coba dulu aplikasinya.
Perobaan Aplikasi Aplikasi
Jika kamu tidak melihat error, maka itu artinya berhasil.
![Belum ada data di database](https://d33wubrfki0l68.cloudfront.net/2f84578c86db4cb881f8b450db71ebacf7482d45/bfb0d/img/ci/db/list-no-data.png)
Belum ada data yang ditampilkan di dalam halaman list product, karena kita belum menambahkan data apapun.
Mari kita coba buat data baru.
Silahkan buka: http://localhost/tokobuah/index.php/admin/products/add atau klik link + Add New.
Kemudian isi dengan data baru.
![Menambahkan data baru](https://d33wubrfki0l68.cloudfront.net/16283904ec6630f008a34f9be4331629bccbb76b/5c70a/img/ci/db/add-jeruk.png)
Klik Save, jika muncul seperti ini…
![Simpan data berhasil](https://d33wubrfki0l68.cloudfront.net/0769dc50630e4306feeeb2becef7b06128f325bf/e20cc/img/ci/db/add-success.png)
…artinya data berhasil ditambahkan.
Coba periksa lagi halaman products.
![halaman list product yang sudah terisi](https://d33wubrfki0l68.cloudfront.net/44fed302ecaae7eb6e53b9df405b072f787d1919/9a3d0/img/ci/db/list-one-data.png)
Berikutnya coba lakukan update data. Klik tombol Edit yang ada di dekat tombol Hapus.
![Update data](https://d33wubrfki0l68.cloudfront.net/5ee0ec7f5294d59850db3fb5e1ebf645c70c04c4/1c59b/img/ci/db/update-data.png)
Hasilnya:
![Data sudah terupdate](https://d33wubrfki0l68.cloudfront.net/3d72eed3b755fd6a38ccc772ce17efe846cf16c6/5b855/img/ci/db/update-berhasil.png)
Fitur untuk Menghapus Data
Terakhir…
Kita belum membuat fungsi konfirmasi pada tombol Hapus.
Mengapa kita perlu konfirmasi?
Karena tindakan ini berbahaya.
Bisa saja nanti terjadi salah klik, kalau tidak dikonfirmasi data bisa hilang.
Dan ini tentu akan menjadi pengalaman buruk bagi pengguna.
Sebenarnya pada tahapan ini, kita hanya akan membuat satu fungsi Javascript saja.
Karena kita memanggilnya pada tombol Hapus.
Perhatikan view
list.php
.<a onclick="deleteConfirm('<?php echo site_url('admin/products/delete/'.$product->product_id) ?>')"
href="#!" class="btn btn-small text-danger"><i class="fas fa-trash"></i> Hapus</a>
Di sana ada event onclick yang akan memanggil fungsi
deleteConfirm()
. Ini adalah fungsi javascript, bukan PHP.
Fungsi ini nanti akan menampilkan sebuah modal konfirmasi.
Oke, tapi di mana kita akan menulis kode Javascript?
Ada dua tempat yang bisa kita gunakan:
- Embed langsung di dalam view;
- Membuat file Javascript terpisah.
Kita akan menggunakan cara yang pertama, karena fungsi yang kita butuhkan hanya akan digunakan pada view
product/list.php
saja.
Jika nanati ada fungsi Javascript yang digunakan di beberapa view, maka sebaiknya membuat file terpisah.
Baiklah, silahkan buka file
views/admin/product/list.php
, kemduian tambahkan kode berikut di bagian bawah, sebelum tutup <body>
.<script>
function deleteConfirm(url){
$('#btn-delete').attr('href', url);
$('#deleteModal').modal();
}
</script>
Sehingga akan menjadi seperti ini:
![Menambahkan fungsi javascript pada codeigniter](https://d33wubrfki0l68.cloudfront.net/a7651fcf37c5e2dfaf26ad4b7abc23d3c9792798/2f266/img/ci/db/add-js.png)
Setelah itu, tambahkan sebuah modal untuk delete di dalam file
views/admin/_partials/modal.php
.<!-- Logout Delete Confirmation-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Data yang dihapus tidak akan bisa dikembalikan.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a id="btn-delete" class="btn btn-danger" href="#">Delete</a>
</div>
</div>
</div>
</div>
Sehingga akan menjadi seperti ini:
![Modal hapus](https://d33wubrfki0l68.cloudfront.net/6a5f079394566b297e61119a46f0856a99a2a928/4d10e/img/ci/db/modal-delete.png)
Oke, setelah itu coba hapus sebuah data.
![Menghapus data](https://d33wubrfki0l68.cloudfront.net/95ece45e291088bbf4b493bde6149ad9d091ba4d/304cc/img/ci/db/hapus-data.png)
Akhirnya selesai juga… ![😫](https://www.petanikode.com/img/icon/twemoji/1f62b.svg)
TODO: