Tutorial CRUD Codeigniter 4 dengan Modal Bootstrap
Tutorial CRUD Codeigniter 4 dengan Modal Bootstrap
Pada tutorial ini Anda akan belajar tentang:
Bagaimana membuat CRUD menggunakan Codeigniter 4 dengan modal Bootstrap.
Jika Anda pemula di Codeigniter 4, saya sarankan terlebih dahulu untuk mempelajari “Tutorial lengkap Codeigniter 4 untuk pemula”.
Jika Anda merasa sudah familiar dengan Codeigniter 4, maka Anda berada di tempat yang tepat.
Pada tutorial ini, Anda juga akan belajar bagaimana menggunakan query join dari 2 table menggunakan query builder Codeigniter 4.
Step-by-Step
Mari kita mulai.
Step #1. Persiapan
Untuk membuat CRUD dengan Codeigniter dan Modal Bootstrap, inilah yang perlu Anda persiapkan:
2. JQuery
5. Bootstrap
Pada tutorial ini saya menggunakan Codeigniter v4.0.2, JQuery v3.4.1, Bootstrap v4.4.x.
Step #2. Membuat Database dan Table
Buat database baru dengan nama “berita_db”.
Jika Anda membuat database dengan nama yang sama itu lebih baik.
Untuk membuat database “berita_db” pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:
CREATEDATABASE berita_db;
Perintah SQL diatas, akan membuat sebuah database dengan nama “berita_db” pada MySQL.
Selanjutnya, buat table baru di dalam database “berita_db”.
Pada tutorial ini, dibutuhkan 2 table, yaitu table “category” dan table “post”.
Untuk membuat table “category” dapat dilakukan dengan mengeksekusi query berikut:
CREATETABLEcategory(
category_id INT PRIMARY KEYAUTO_INCREMENT,
category_name VARCHAR(50)
)ENGINE=INNODB;
Perintah SQL diatas, akan membuat sebuah table bernama “category” dengan fields: category_id dan category_name.
Selanjutnya, untuk membuat table “post” dapat dilakukan dengan mengeksekusi query berikut:
CREATE TABLE post(
post_id INT PRIMARY KEY AUTO_INCREMENT,
judul VARCHAR(50),
isi TEXT,
id_kategori INT,
lihat INT,
post_date DATE
)ENGINE=INNODB;
Perintah SQL diatas, akan membuat sebuah table bernama “post” dengan fields: post_id, judul, isi,id_kategori,slug, lihat,post_date.
Jika Anda masih bingung bagaimana membuat database dan table pada MySQL, saya sarankan untuk mempelajari “Data Definition Language (DDL)” pada MySQL.
Step #3. Insert data ke table Category dan Product
Ini penting.
Insert beberapa data pada table “category” dan table “post” sebagai data sample.
Insert beberapa data pada table “post” dengan mengeksekusi query berikut:
INSERT INTO category(category_name)
VALUES ('success'),('motivasi'),('tips dan trick');
Query diatas akan meng-insert data sebanyak 3 records kedalam table “category”.
Selanjutnya, insert beberapa data pada table “post” dengan mengeksekusi query berikut:
INSERT INTO post ( judul, isi, id_kategori, lihat, post_date)
VALUES
( 'Belajar Web Programming Codeigniter 4', 'ini adalah isi konten belajar web programming cogeigniter 4', '1', '10', '2023-03-20' );
Query diatas akan meng-insert data sebanyak 2 records kedalam table “product”.
Jika Anda masih bingung bagaimana meng-insert data kedalam table pada MySQL, saya sarankan untuk mempelajari “Data Manipulation Language (DML)” pada MySQL.
Step #4. Instalasi Codeigniter 4
Untuk menginstal Codeigniter 4 dapat dilakukan dengan 2 cara yaitu: Instalasi manual dan Instalasi melalui composer.
Pada sebelumnya sudah kita Bahasa cara install Codeigniter 4, lihat tutorial di link berikut Tutorial Instalasi Lengkap Codeigniter 4 Untuk Pemula
C:\xampp\htdocs
Pada tutorial ini, saya menggunakan XAMPP.
Jika Anda menggunakan Visual Studio Code, Anda dapat mengetikan perintah diatas langsung pada terminal di Visual Studio Code.
Kemudian buka browser Anda dan kunjungi url berikut:
Jika instalasi berhasil, maka akan terlihat seperti gambar berikut:
Selanjutnya, extract file bootstrap yang telah di persiapkan sebelumnya kedalam folder “berita/public” seperti gambar berikut:
Setelah itu buka folder “public/js”, kemudian buat sebuah file bernama “jquery.min.js”, kemudian open file tersebut menggunakan code editor.
Lalu kunjungi URL berikut:
https://code.jquery.com/jquery-3.4.1.min.js
Kemudian, pilih semua kodenya (Ctrl + A) dan copy (Ctrl + C) lalu paste (Ctrl + V) pada file “jquery.min.js” dan simpan (Ctrl + S).
Step #5. Membuat koneksi ke database
Buka file “Database.php” yang terdapat pada folder “app/Config”, kemudian temukan kode berikut:
Selanjutnya, Ini penting!
Agar Anda memiliki interface yang baik untuk menangani error, temukan file env pada root project, kemudian rename (ganti nama) menjadi .env dan open file tersebut.
Kemudian temukan kode berikut:
# CI_ENVIRONMENT = production
Kemudian ubah menjadi seperti berikut:
CI_ENVIRONMENT = development
Itu artinya Anda masuk ke mode development, mode ini akan membantu Anda mempermudah melacak error saat Anda membangun project.
Setelah project Anda selesai, jangan lupa kembalikan lagi ke mode production!
Step #6. Membuat file Model
Buat sebuah file model bernama “Berita_model.php” pada folder “app/Models”, kemudian ketikan kode berikut:
Step #7. Membuat file Controller
Buat sebuah file controller bernama “Berita.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:
Step #8. Membuat file View
Buat sebuah file view bernama “berita_view.php” pada folder “app/Views”, kemudian ketikan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Berita</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Berita</h3>
<button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addModal">Add New</button>
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Kategori</th>
<th>Isi</th>
<th>dilihat</th>
<th>Posting</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php $no = 1;
foreach ($berita as $row) : ?>
<tr>
<td><?= $no ?></td>
<td><?= $row->judul; ?></td>
<td><?= $row->category_name; ?></td>
<td><?= $row->isi; ?></td>
<td><?= $row->lihat; ?></td>
<td><?= $row->post_date; ?></td>
<td>
<a href="#" class="btn btn-info btn-sm btn-edit" data-id="<?= $row->post_id; ?>" data-judul="<?= $row->judul; ?>" data-isi="<?= $row->isi; ?>" data-id_kategori="<?= $row->id_kategori; ?>">Edit</a> <a href="#" class="btn btn-danger btn-sm btn-delete" data-toggle="modal" data-target="#deleteModal<?= $row->post_id; ?>">Delete</a>
</td>
</tr>
<!-- Modal Delete -->
<form action="/berita/delete/<?= $row->post_id; ?>" method="post">
<div class="modal fade" id="deleteModal<?= $row->post_id; ?>" 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">Delete Berita</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4>Are you sure want to delete this Artikel?</h4>
</div>
<div class="modal-footer">
<input type="hidden" name="post_id" value="<?= $row->post_id; ?>">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</form>
<?php
$no++;
endforeach; ?>
</tbody>
</table>
</div>
<!-- Modal Add -->
<form action="/berita/save" method="post">
<div class="modal fade" id="addModal" 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">Add berita</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>judul</label>
<input type="text" class="form-control" name="judul" placeholder="judul berita">
</div>
<div class="form-group">
<label>Isi Berita</label>
<textarea class="form-control" placeholder="isi berita" name="isi"></textarea>
</div>
<div class="form-group">
<label>Category</label>
<select name="kategori" class="form-control">
<option value="">-Select-</option>
<?php foreach ($category as $row) : ?>
<option value="<?= $row->category_id; ?>"><?= $row->category_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!-- End Modal Add -->
<!-- Modal Edit -->
<form action="/berita/update" method="post">
<div class="modal fade" id="editModal" 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">Edit Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control judul" name="judul" placeholder="judul">
</div>
<div class="form-group">
<label>Price</label>
<textarea class="form-control isi" placeholder="isi berita" name="isi"></textarea>
</div>
<div class="form-group">
<label>Category</label>
<select name="id_kategori" class="form-control id_kategori">
<option value="">-Select-</option>
<?php foreach ($category as $row) : ?>
<option value="<?= $row->category_id; ?>"><?= $row->category_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="post_id" class="post_id">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
<!-- End Modal Edit -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
// get Edit
$('.btn-edit').on('click', function() {
// get data from button edit
const id = $(this).data('id');
const judul = $(this).data('judul');
const isi = $(this).data('isi');
const id_kategori = $(this).data('id_kategori');
// Set data to Form Edit
$('.post_id').val(id);
$('.judul').val(judul);
$('.isi').val(isi);
$('.id_kategori').val(id_kategori).trigger('change');
// Call Modal Edit
$('#editModal').modal('show');
});
});
</script>
</body>
</html>
Step #9. Testing
Untuk memastikan apakan aplikasi CRUD yang dibangun berjalan dengan baik, lakukan uji coba dengan mengunjungi URL berikut:
| 1 | http://localhost:8080/product |
Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:
#1. Add New Product
Klik tombol “Add New” untuk menambah Berita baru, maka akan tampil form seperti berikut:
Masukkan judul, isi, dan pilih category, kemudian klik tombol “Save”.
Jika insert berhasil, maka akan terlihat seperti gambar berikut:
#2. Update Berita
Klik tombol “Edit” untuk mengupdate Berita, maka akan tampil form seperti berikut:
Edit data sesuai dengan yang Anda inginkan, kemudian klik tombol “Update” untuk mengupdate data.
#3. Delete Berita
Klik tombol “Delete” pada product list untuk menghapus berita, maka akan tampil konfirmasi seperti berikut:
Kemudian klik tombol “Yes” untuk menghapus data.
Kesimpulan
Pembahasan kali ini adalah bagaimana membuat aplikasi Create-Read-Update-Delete (CRUD) sederhana dengan Codeigniter 4 dan Modal Bootstrap.
Tidak hanya itu, Anda juga telah belajar menggunakan query join menggunakan query builder pada Codeigniter 4.
Ini adalah fondasi yang bagus bagi Anda untuk membuat aplikasi yang lebih kompleks dengan codeigniter 4 dan bootstrap.
0 Komentar