بِسْمِ اللَّهِ Mudah-mudahan tutorial Codeigniter 4 – CRUD Bagian 2 (Update data dengan upload gambar) ini bermanfaat
Bagian yang tidak kalah penting dari CRUD (Create, Read, Update, dan Delete) adalah Update atau ubah data. Sama dangan Create atau tambah data pada tutorial sebelumnya disini selain validasi data, juga ada upload gambar.
Persiapan Codeigniter 4 – CRUD Bagian 2 (Update data dengan upload gambar)
Untuk melanjutkan tutorial pastikan sudah:
Mengerjakan CRUD Bagian 1 pada tutorial sebelumnya
Pertama
Ubah file app\Views\news\index.php pada bagian <div class=”table-responsive”> saja, dengan script ini. Ingat..! Jangan semuanya diganti, cukup <div class=”table-responsive”> saja.
Update tampilan daftar berita dengan menambahkan kolom pada sisi paling kanan dengan script ini:
<th style="width: 90px;"></th>
kemudian mengisinya dengan tombol Edit dengan script ini:
<a href="<?= base_url('news/edit/' . $row->id); ?>" class="btn btn-warning btn-circle btn-sm">
<i class="fas fa-edit"></i>
</a>
Dan <div class=”table-responsive”> secara lengkap akan seperti ini:
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Judul</th>
<th>Slug</th>
<th>Tanggal</th>
<th style="width: 90px;"></th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Judul</th>
<th>Slug</th>
<th>Tanggal</th>
<th style="width: 90px;"></th>
</tr>
</tfoot>
<tbody>
<?php foreach($news as $row): ?>
<tr>
<td><?= $row->id; ?></td>
<td><?= $row->title; ?></td>
<td><?= $row->slug; ?></td>
<td><?= $row->publish_date; ?></td>
<td>
<a href="<?= base_url('news/edit/' . $row->id); ?>" class="btn btn-warning btn-circle btn-sm">
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
Kurang lebih tampilannya seperti ini, kolom sengaja dibuat agak lebar untuk persiapan tempat tombol Hapus.
Kedua
Update Controller (app\Controllers\News.php) dengan menambahkan dua fungsi yaitu:
- edit adalah fungsi yang panggil oleh tombol Edit
- update adalah fungsi untuk menyimpan data yang sudah diupdate.
Berikut fungsinya:
public function edit($id)
{
$model = new NewsModel();
$data['news'] = $model->getNews($id);
$data['title'] = 'Update Berita';
$data['menu'] = 'news';
return view('news/edit', $data);
}
public function update()
{
$model = new NewsModel();
$rules = [
'body' => 'required',
'title' => 'required'
];
$id = $this->request->getVar('id');
if($this->validate($rules)){
$fileImage_name = $this->request->getVar('oldFile');
if(isset($_FILES) && @$_FILES['image_file']['error'] != '4') {
if($fileImage = $this->request->getFile('image_file')) {
if (! $fileImage->isValid()) {
throw new \RuntimeException($fileImage->getErrorString().'('.$fileImage->getError().')');
} else {
$fileImage->move('images/news');
$fileImage_name = $fileImage->getName();
}
}
}
$data = [
'body' => $this->request->getVar('body'),
'title' => $this->request->getVar('title'),
'publish_date' => $this->request->getVar('publish_date'),
'image' => $fileImage_name
];
$model->update($id, $data);
return redirect()->to(base_url('/news/list?page=1'));
} else {
$data['news'] = $model->getNews($id);
$data['validation'] = $this->validator;
$data['title'] = 'Update Berita';
$data['menu'] = 'news';
return view('news/edit', $data);
}
}
Ketiga
Ini adalah bagian terakhir, yaitu membuat view atau tampilan edit (app\Views\news\edit.php) letaknya satu folder dengan tampilan add. Scriptnya sebagai berikut:
<?= $this->extend('template/index') ?>
<?= $this->section('page-content') ?>
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?></h1>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="<?= base_url(); ?>">Halaman Utama</a></li>
<li class="breadcrumb-item"><a href="<?= base_url('news'); ?>">Daftar Berita</a></li>
<li class="breadcrumb-item active">
<?=$title;?>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="page-section">
<form action="<?= base_url(); ?>/news/update" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?= $news->id; ?>" />
<input type="hidden" name="oldFile" value="<?= $news->image; ?>" />
<div class="row card-group-row">
<?php if (isset($validation)) { ?>
<div class="col-md-12">
<?php foreach ($validation->getErrors() as $error) : ?>
<div class="alert alert-warning" role="alert">
<i class="mdi mdi-alert-outline me-2"></i>
<?= esc($error) ?>
</div>
<?php endforeach ?>
</div>
<?php } ?>
<div class="col-md-12">
<div class="list-group list-group-flush">
<div class="list-group-item p-3">
<div class="row align-items-start">
<div class="col-md-4 mb-8pt mb-md-0">
<div class="media align-items-left">
<div class="d-flex flex-column media-body media-middle">
<span
class="card-title">Judul Berita</span>
</div>
</div>
</div>
<div class="col mb-8pt mb-md-0">
<input name="title"
type="text"
class="form-control"
placeholder="Judul Berita" value="<?= set_value ('title') ?: $news->title; ?>" />
</div>
</div>
</div>
<div class="list-group-item p-3">
<div class="row align-items-start">
<div class="col-md-4 mb-8pt mb-md-0">
<div class="media align-items-left">
<div class="d-flex flex-column media-body media-middle">
<span
class="card-title">Tanggal Terbit</span>
</div>
</div>
</div>
<div class="col mb-8pt mb-md-0">
<input name="publish_date" type="date" class="form-control publish_date" placeholder="Tanggal Terbit" value="<?= set_value ('publish_date') ?: $news->publish_date; ?>" />
</div>
</div>
</div>
<div class="list-group-item p-3">
<div class="row align-items-start">
<div class="col-md-4 mb-8pt mb-md-0">
<div class="media align-items-left">
<div class="d-flex flex-column media-body media-middle">
<span
class="card-title">Gambar</span>
</div>
</div>
</div>
<div class="col mb-8pt mb-md-0">
<input type="file" id="image_file" name="image_file" class="form-control image_file" accept=".jpg,.png,.jpeg,.gif" />
</div>
</div>
</div>
<div class="list-group-item p-3">
<div class="row align-items-start">
<div class="col-md-4 mb-8pt mb-md-0">
<div class="media align-items-left">
<div class="d-flex flex-column media-body media-middle">
<span
class="card-title">Isi Berita</span>
</div>
</div>
</div>
<div class="col mb-8pt mb-md-0">
<textarea name="body" style="width:100%; height: 300px">
<?= set_value ('body') ?: $news->body; ?>
</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col align-items-right">
<button type="submit" class="btn btn-success">Simpan</button>
</div>
</div>
</form>
</div>
<?= $this->endSection() ?>
<?= $this->section('script-js') ?>
<script language="javascript" type="text/javascript" src="<?= base_url() ?>/assets/js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
external_image_list_url : "ext_image_list.php"
});
</script>
<?= $this->endSection() ?>
Terakhir
Silakan dicoba, klik tombol edit yang ada di Daftar Berita. Jika tidak ada error hasilnya akan seperti ini
Sampai disini sudah selesai untuk CRUD Bagian 2 yaitu Update data. Mudah-mudahan bermanfaat.
Receive and send emails through your temporary messaging system. Use our webmail or your favorite email software with our absolutely free disposable email. temp mail