Tutorial CRUD CodeIgniter 4 Dengan Bootstrap #5 : Edit & Update Data - Halo teman-teman semuanya, pada tutorial kali ini kita semua akan belajar membuat edit & update data ke dalam database di CodeIgniter 4.
Langkah 1 - Membuat Fungsi Edit & Update di Controller
Kali ini kita akan menambah 2 function baru di dalam controller Post, yaitu function edit & function update.
-
function edit - fungsi ini akan kita gunakan untuk menampilkan sebuah data di dalam form sesuai dengan ID.
-
function update - fungsi ini akan kita gunakan untuk memproses data inputan dari form yang akan diupdate ke dalam database.
Sekarang silahkan teman-teman buka file app/Controllers/Post.php dan tambahkan 2 function berikut ini dibawah function store :
/**
* edit function
*/
public function edit($id)
{
//model initialize
$postModel = new PostModel();
$data = array(
'post' => $postModel->find($id)
);
return view('post-edit', $data);
}
/**
* update function
*/
public function update($id)
{
//load helper form and URL
helper(['form', 'url']);
//define validation
$validation = $this->validate([
'title' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan Judul Post.'
]
],
'content' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan konten Post.'
]
],
]);
if(!$validation) {
//model initialize
$postModel = new PostModel();
//render view with error validation message
return view('post-edit', [
'post' => $postModel->find($id),
'validation' => $this->validator
]);
} else {
//model initialize
$postModel = new PostModel();
//insert data into database
$postModel->update($id, [
'title' => $this->request->getPost('title'),
'content' => $this->request->getPost('content'),
]);
//flash message
session()->setFlashdata('message', 'Post Berhasil Diupdate');
return redirect()->to(base_url('post'));
}
}
Jika Controller Post.php di tulis dengan lengkap, kurang lebih seperti berikut ini :
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\PostModel;
class Post extends Controller
{
/**
* index function
*/
public function index()
{
//model initialize
$postModel = new PostModel();
//pager initialize
$pager = \Config\Services::pager();
$data = array(
'posts' => $postModel->paginate(2, 'post'),
'pager' => $postModel->pager
);
return view('post-index', $data);
}
/**
* create function
*/
public function create()
{
return view('post-create');
}
/**
* store function
*/
public function store()
{
//load helper form and URL
helper(['form', 'url']);
//define validation
$validation = $this->validate([
'title' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan Judul Post.'
]
],
'content' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan konten Post.'
]
],
]);
if(!$validation) {
//render view with error validation message
return view('post-create', [
'validation' => $this->validator
]);
} else {
//model initialize
$postModel = new PostModel();
//insert data into database
$postModel->insert([
'title' => $this->request->getPost('title'),
'content' => $this->request->getPost('content'),
]);
//flash message
session()->setFlashdata('message', 'Post Berhasil Disimpan');
return redirect()->to(base_url('post'));
}
}
/**
* edit function
*/
public function edit($id)
{
//model initialize
$postModel = new PostModel();
$data = array(
'post' => $postModel->find($id)
);
return view('post-edit', $data);
}
/**
* update function
*/
public function update($id)
{
//load helper form and URL
helper(['form', 'url']);
//define validation
$validation = $this->validate([
'title' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan Judul Post.'
]
],
'content' => [
'rules' => 'required',
'errors' => [
'required' => 'Masukkan konten Post.'
]
],
]);
if(!$validation) {
//model initialize
$postModel = new PostModel();
//render view with error validation message
return view('post-edit', [
'post' => $postModel->find($id),
'validation' => $this->validator
]);
} else {
//model initialize
$postModel = new PostModel();
//insert data into database
$postModel->update($id, [
'title' => $this->request->getPost('title'),
'content' => $this->request->getPost('content'),
]);
//flash message
session()->setFlashdata('message', 'Post Berhasil Diupdate');
return redirect()->to(base_url('post'));
}
}
}
Langkah 2 - Membuat View
Selanjutnya, silahkan teman-teman baut sebuah file baru dengan nama post-edit.php di dalam folder app/Views/ dan masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Edit Data - santriKoding.com</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<?php if(isset($validation)) { ?>
<div class="alert alert-danger" role="alert">
<?php echo $validation->listErrors() ?>
</div>
<?php } ?>
<div class="card">
<div class="card-body">
<form action="<?php echo base_url('post/update/'.$post['id']) ?>" method="POST">
<div class="form-group">
<label>TITLE</label>
<input type="text" class="form-control" name="title" value="<?php echo $post['title'] ?>" placeholder="Masukkan Title">
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" name="content" rows="4" placeholder="Masukkan Konten"><?php echo $post['content'] ?></textarea>
</div>
<button type="submit" class="btn btn-primary">UPDATE</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Langkah 3 - Menjalankan Aplikasi
Untuk mengaksesnya, teman-teman bisa mencoba dengan ketik http://localhost:8080/post/edit/1
Maka kurang lebih hasilnya seperti gambar dibawah ini :
DOWNLOAD SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CodeIgniter4-CRUD
KESIMPULAN
Pada tutorial kali ini kita semua sudah belajar bagaimana cara menambahkan function edit & update ke dalam database di CodeIgniter 4.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih