بِسْمِ اللَّهِ Mudah-mudahan tutorial Codeigniter 3 – CRUD Bagian 2 Edit Data ini bermanfaat
Bagian kedua dari CRUD adalah edit data atau biasa kita menyebutnya update data. Validasi data disini juga diperlukan. Tanpa berlama-lama langsung saja ke tutorialnya berikut ini
Persiapan Codeigniter 3 – CRUD Bagian 2 Edit Data
Untuk melanjutkan tutorial pastikan sudah:
Editor Visual Studio Code
Sudah mengerjakan tutorial List Data di Codeigniter 3 – CRUD List Data dengan Pagination
Mengerjakan CRUD Bagian 1 pada Codeigniter 3 – CRUD Bagian 1 Tambah Data
Barang kali lupa tentang file upload bisa dibaca Dokumentasi CI3 tentang Upload
Pertama
Cara yang paling mudah kita awali dengan menambahkan kolom pada list data yaitu sebagai tempat tombol edit (dan tombol delete). Buka file view list (application\views\product\list.php). Tambahkan script berikut untuk judul (dalam <thead>…</thead>).
<th width="95px"></th>
Dan script berikut untuk tombol edit
<td align='center'>
<a href="<?= base_url('product/edit/' . $row->id); ?>" class="btn btn-warning btn-circle btn-sm">
<i class="fas fa-edit"></i>
</a>
</td>
Sehingga file list.php secara lengkapnya seperti ini
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"><?= $title; ?></h6>
<div class="row">
<div class="col">
<div class="text-center"><?= $links; ?></div>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Nama Produk</th>
<th>Deskripsi</th>
<th>Gambar</th>
<th width="95px"></th>
</tr>
</thead>
<tbody>
<?php
foreach ($products as $row) {
?>
<tr>
<td><?= $row->id; ?></td>
<td><?= $row->product_name; ?></td>
<td><?= $row->description; ?></td>
<td>
<img height="60px" src="<?= base_url().'/assets/upload/image/'.$row->url; ?>" />
</td>
<td align='center'>
<a href="<?= base_url('product/edit/' . $row->id); ?>" class="btn btn-warning btn-circle btn-sm">
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
Tampilannya akan seperti ini
Kedua
Tambahkan pada controller Product (application\controllers\Product.php) dengan fungsi edit dan update. Scriptnya sebagai berikut:
public function edit($id)
{
if ($this->ion_auth->logged_in()) {
$products = $this->product_model->findById($id);
$data['products'] = $products;
$data['title'] = "Edit Produk";
$data['page_name'] = "product/edit";
$this->load->view('template', $data);
} else {
redirect('auth/login');
}
}
public function update()
{
if ($this->ion_auth->logged_in()) {
$this->form_validation->set_rules('product_name', 'Nama Produk', 'trim|required',
array(
'required' => '%s harus diisi.'
)
);
$this->form_validation->set_rules('description', 'Diskripsi', 'trim|required',
array(
'required' => '%s harus diisi.'
)
);
$id = $post["id"];
if ($this->form_validation->run() == FALSE) {
$products = $this->product_model->findById($id);
$data['products'] = $products;
$data['title'] = "Edit Produk";
$data['page_name'] = "product/edit";
$this->load->view('template', $data);
} else {
$this->product_model->update();
redirect('product');
}
} else {
redirect('auth/login');
}
}
- Fungsi edit diatas akan menerima aksi berikut variable id produk pada waktu tombol edit pada view product/list diklik. Variabel id akan dicari pada tabel produk, setelah ditemukan data produk akan dikirim ke view product/edit yang nanti akan dibuat.
- Fungsi update untuk menyimpan data produk yang sudah diedit, tentunya dengan validasi data.
Fungsi-fungsi diatas bisa dijalankan dengan otorisasi, artinya hanya user yang sudah login yang akan bisa menggunakan fungsi-fungsi tersebut.
Dan ini masih bisa dikembangkan lagi, dengan menambahkan role user. Misalnya user dengan role tertentu saja yang bisa membuka atau menggunakan fungsi-fungsi tersebut.
Ketiga
Tambahkan fungsi update/edit data pada model (application\models\Product_model.php). Fungsi ini yang dipanggil dari controller diatas. Sebut saja nama fungsinya update, scriptnya sebagai berikut:
function update() {
$post = $this->input->post();
if (!empty($_FILES["image_file"]["name"])) {
$image = $this->uploadImage();
} else {
$image = $post["url_old"];
}
$id = $post["id"];
$data = array(
'product_name' => $post["product_name"],
'description' => $post["description"],
'url' => $image,
'update_date' => date("Y-m-d H:i:s"),
'update_by' => $this->ion_auth->user()->row()->username,
'active' => '1',
);
$this->db->where('id', $id);
$this->db->update('products', $data);
}
Keempat
Membuat view edit lokasinya gabungkan dengan view list dan add (application\views\product\edit.php). Script view edit sebagai berikut:
<div class="card shadow mb-4">
<div class="card-body">
<?php
if(validation_errors()){
?>
<div class="alert alert-warning" role="alert">
<?php echo validation_errors(); ?>
</div>
<?php
}
?>
<form class="user" action="<?= base_url(); ?>product/update" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?= $products['id']?>" />
<input type="hidden" name="url_old" value="<?= $products['url']?>" />
<div class="form-group">
<input type="text" class="form-control form-control-user" id="product_name" name="product_name" placeholder="Nama Produk" value="<?= set_value('product_name') ?: $products["product_name"]; ?>">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-user" id="description" name="description" placeholder="Diskripsi" value="<?= set_value('description') ?: $products["description"]; ?>">
</div>
<div class="form-group">
<input type="file" id="image_file" name="image_file" class="form-control form-control-user" accept=".jpg,.png,.jpeg,.gif" />
</div>
<button type="submit" class="btn btn-primary btn-user btn-block">Simpan</button>
</form>
</div>
</div>
Hasil tampilan edit akan seperti ini
Akhirnya
Sampai disini sudah selesai untuk tutorial Codeigniter 3 – CRUD Bagian 2 Edit Data. Silakan dilanjutkan dan dikembangkan.
Mudah-mudahan bermanfaat.
You ought to take part in a contest for one of the best websites on the net. I am going to highly recommend this website!