Tutorial kali ini akan membahas tentang contoh aplikasi CRUD PHP MySQL sederhana dengan menggunakan CodeIgniter 4.
Aplikasi CRUD adalah pondasi dari semua aplikasi. Dengan menguasai CRUD dari suatu framework, bisa dibilang kita sudah punya modal untuk membuat aplikasi yang lebih kompleks.
Sayangnya, masih banyak orang yang baru tahap belajar mengalami kesulitan saat mencari contoh aplikasi CRUD PHP MySQL yang sederhana dan mudah dipelajari. Hal ini berlaku juga untuk framework CodeIgniter 4 yang masih berumur beberapa bulan.
Membuat CRUD dengan CodeIgniter 4 dan Database MySQL
CodeIgniter adalah salah satu framework PHP yang cukup terkenal. Saat ini, framework ini telah berada pada versi 4.0.3.
Saat artikel ini ditulis, tutorial tentang contoh aplikasi CRUD dengan CodeIgniter 4 masih sangat terbatas. User guide dari CodeIgniter 4 pun dirasa masih perlu memutar otak untuk memahaminya. Bahkan teman saya yang programmer juga mengatakan hal yang sama.
Akhirnya, saya berkeinginan untuk membuat tutorial ini. Dengan adanya tutorial contoh aplikasi CRUD ini, mudah-mudahan membantu kita semua untuk belajar CodeIgniter 4.
1. Hasil Akhir Contoh Aplikasi CRUD PHP MySQL
Supaya kamu termotivasi, kamu bisa melihat demo dari aplikasi CRUD ini di video berikut ini:
Setelah melihat demo di atas, dan tertarik untuk mempelajarinya, yuk simak langkah-langkah cara membuat aplikasi CRUD ini.
2. Prasyarat Sebelum Mengikuti Tutorial CRUD CodeIgniter
Sebelum mengikuti tutorial ini, ada prasyarat (prerequisites) yang harus kamu penuhi, di antaranya adalah:
- Sudah install XAMPP, atau software sejenis, yang penting kamu punya web server dan database MySQL
- Memilki software code editor, misal Visual Studio Code, Sublime, Notepad++, dll.
3. Install CodeIgniter 4 di localhost
Untuk memulai, mari buka CMD, pindah ke folder dimana kamu ingin menginstall CI 4, kemudian jalankan perintah berikut:
composer create-project codeigniter4/appstarter playground
Setelah proses install dengan composer selesai, masuk ke folder tersebut dan update terlebih dahulu dependency nya. Jalankan perintah ini:
composer update
Setelah proses update tersebut selesai, kita running CodeIgniter nya dengan perintah:
php spark serve
Jika tidak ada kendala, ketika membuka http://localhost:8080 di browser, kita akan melihat halaman seperti ini:
Jika sudah tampil seperti di atas, mari kita lanjutkan ke langkah berikutnya.
4. Konfigurasi CodeIgniter 4
Langkah selanjutnya adalah melakukan konfigurasi dari project CodeIgniter 4 ini. Ada 2 hal yang perlu diperhatikan dalam konfigurasi, yaitu konfigurasi database dan konfigurasi environment di CI.
Konfigurasi database kita lakukan agar aplikasi CRUD kita bisa terkoneksi dengan database. Sedangkan konfigurasi environment CodeIgniter kita lakukan supaya lebih memudahkan ketika terjadi error saat kita melakukan coding.
Jadi, hal yang harus dilakukan adalah:
- Buka file env di dalam project root, kemudian Save As menjadi .env
- Edit baris CI_ENVIRONMENT, ubah dari production menjadi development
- Edit baris database, sesuaikan dengan konfigurasi database MySQL yang kita punya
- Jangan lupa menghapus tanda pagar ( # ) di baris yang kita edit
Berikut ini potongan baris konfigurasi yang kita ubah:
CI_ENVIRONMENT = development database.default.hostname = localhost database.default.database = playground database.default.username = root database.default.password = root database.default.DBDriver = MySQLi
5. Membuat Database dan Tabel Pegawai
Langkah selanjutnya adalah membuat database dan tabel yang digunakan untuk menyimpan data.
Di contoh aplikasi CRUD CodeIgniter ini, saya membuat database dengan nama playground, dan sebuah tabel pegawai.
Berikut ini adalah syntax MySQL tabel pegawai yang bisa kalian import di phpMyAdmin
-- phpMyAdmin SQL Dump -- version 4.9.3 -- https://www.phpmyadmin.net/ -- -- Host: localhost:3306 -- Generation Time: Jun 15, 2020 at 06:28 PM -- Server version: 5.7.26 -- PHP Version: 7.2.22 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; CREATE TABLE `pegawai` ( `id` int(11) NOT NULL, `nama` varchar(150) NOT NULL, `nip` varchar(150) NOT NULL, `alamat` varchar(150) NOT NULL, `telepon` varchar(150) NOT NULL, `created_at` datetime DEFAULT NULL, `updated_at` datetime DEFAULT NULL, `deleted_at` datetime DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; INSERT INTO `pegawai` (`id`, `nama`, `nip`, `alamat`, `telepon`, `created_at`, `updated_at`, `deleted_at`) VALUES (1, 'Fahmi', '1234567890', 'Jakarta', '-', NULL, NULL, NULL), (2, 'Ade', '1234567891', 'Jakarta', '-', NULL, NULL, NULL), (3, 'Joko', '1234567892', 'Jakarta', '-', NULL, NULL, NULL), (4, 'Vendi', '1234567893', 'Jakarta', '-', NULL, NULL, NULL); ALTER TABLE `pegawai` ADD PRIMARY KEY (`id`); ALTER TABLE `pegawai` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
Setelah membuat database seperti di atas, langsung saja kita coding!
Hal pertama yang harus kita lakukan adalah membuka code editor favorit kita masing-masing. Saya menggunakan software Visual Studio Code.
Open folder project kita sehingga kita bisa lebih mudah untuk melakukan coding.
6. Membuat File Model
Di sini kita akan membuat class Model yang bernama PegawaiModel.php
Caranya, Klik Kanan folder Models di app/Models, kemudian pilih New File. Berikan nama file tersebut “PegawaiModel.php”
Isi dari script PegawaModel.php adalah sebagai berikut:
<?php
namespace App\Models;
use CodeIgniter\Model;
class PegawaiModel extends Model
{
protected $table = 'pegawai';
protected $primaryKey = 'id';
protected $returnType = 'object';
//protected $useSoftDeletes = true;
protected $allowedFields = ['nama', 'nip', 'alamat', 'telepon'];
protected $useTimestamps = false;
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';
protected $validationRules = [];
protected $validationMessages = [];
protected $skipValidation = false;
}
File model ini jika dilihat sangat simpel sekali bukan? Hal ini adalah salah satu kelebihan ketika menggunakan framework CodeIgniter 4 ini. Dengan code sesingkat di atas, kita sudah bisa membuat fungsi CRUD.
7. Membuat Controller
Setelah membuat Model, sekarang kita akan membuat class Controller. Controller adalah class yang bertugas untuk mengatur flow dari aplikasi.
Buatlah file Pegawai.php di folder app/Controllers, kemudian isikan script seperti di bawah ini
<?php namespace App\Controllers;
class Pegawai extends BaseController
{
//isikan code mu di sini
}
Code di atas adalah syntax minimal untuk membuat Controller. Selanjutnya isikan code yang saya paparkan di bawah untuk membuat fitur CRUD (Create, Read, Update, dan Delete)
Fungsi Index
Fungsi index adalah fungsi yang digunakan untuk menampilkan data dari database dalam bentuk tabel.
Berikut ini adalah code untuk membuat fungsi index:
public function index()
{
$pegawaiModel = new \App\Models\PegawaiModel();
$pegawai = $pegawaiModel->findAll();
return view('pegawai/index', [
'pegawai' => $pegawai
]);
}
Fungsi Create
Fungsi Create adalah fungsi yang digunakan untuk menampilkan halaman form create/add pegawai, juga berfungsi untuk menyimpan data ke dalam database.
Berikut ini adalah code untuk membuat fungsi create:
public function create()
{
helper('form');
if($this->request->getMethod() == 'post'){
$pegawai = [
'nama' => $this->request->getPost('nama'),
'nip' => $this->request->getPost('nip'),
'alamat' => $this->request->getPost('alamat'),
'telepon' => $this->request->getPost('telepon'),
];
$pegawaiModel = new \App\Models\PegawaiModel();
if($pegawaiModel->insert($pegawai)){
session()->setFlashdata('success', 'Data berhasil disimpan');
return redirect()->to('/pegawai/index');
}
}
return view('pegawai/create');
}
Fungsi Update
Fungsi update adalah fungsi yang digunakan untuk menampilkan form update pegawai. Kemudian fungsi ini juga bertugas untuk melakukan update data pegawai.
Berikut ini adalah cod euntuk membuat fungsi update:
public function update($id)
{
helper('form');
$pegawaiModel = new \App\Models\PegawaiModel();
$pegawai = $pegawaiModel->find($id);
if(empty($pegawai)){
session()->setFlashdata('error', 'Data tidak ditemukan');
return redirect()->to('/pegawai/index');
}
if($this->request->getMethod() == 'post'){
$pegawai = [
'nama' => $this->request->getPost('nama'),
'nip' => $this->request->getPost('nip'),
'alamat' => $this->request->getPost('alamat'),
'telepon' => $this->request->getPost('telepon'),
];
if($pegawaiModel->update($id, $pegawai)){
session()->setFlashdata('success', 'Data berhasil disimpan');
return redirect()->to('/pegawai/index');
}
}
return view('pegawai/update', [
'pegawai' => $pegawai
]);
}
Fungsi Delete
Sesuai namanya, fungsi delete digunakan untuk menghapus record dari database.
Berikut ini adalah fungsi delete yang harus kita buat:
public function delete($id)
{
helper('form');
$pegawaiModel = new \App\Models\PegawaiModel();
if($pegawaiModel->delete($id)){
session()->setFlashdata('success', 'Data berhasil dihapus');
return redirect()->to('/pegawai/index');
}
}
Setelah selesai membuat semua fungsi di atas, jangan lupa untuk save code yang ada.
8. Membuat View
View merupakan tampilan aplikasi yang kita lihat di browser. Code di bagian view lebih banyak berisi tentang HTML.
Di contoh aplikasi CRUD ini, buatlah folder pegawai di dalam folder Views. Kemudian buat 3 file di folder pegawai tersebut. Tiga file tersebut adalah index.php, create.php, dan update.php
View index.php
index.php adalah tampilan tabel di beranda yang menampilkan data dari database. Di view index.php ini, ada link Action untuk melakukan Add New Pegawai, Update, dan Delete
Berikut ini adalah code untuk view.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pegawai</title>
<style>
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#container {
width: 80%;
margin: 0 auto;
}
#pegawai {
border-collapse: collapse;
width: 100%;
}
#pegawai td,
#pegawai th {
border: 1px solid #ddd;
padding: 8px;
}
#pegawai tr:nth-child(even) {
background-color: #f2f2f2;
}
#pegawai tr:hover {
background-color: #ddd;
}
#pegawai th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #DD4814;
color: white;
}
/* ALERT */
.alert {
padding: 20px;
color: white;
margin-bottom: 10px;
}
.success {
background-color: #5dbf5d;
}
.error {
background-color: #f44336;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<div id="container">
<h1>Contoh Aplikasi CRUD Pegawai CodeIgniter</h1>
<?php if (!empty(session()->getFlashdata('success'))) : ?>
<div class="alert success">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<?= session()->getFlashdata('success') ?>
</div>
<?php endif ?>
<?php if (!empty(session()->getFlashdata('error'))) : ?>
<div class="alert error">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<?= session()->getFlashdata('error') ?>
</div>
<?php endif ?>
<a href="<?= site_url('pegawai/create') ?>">Add New Pegawai</a>
<table id="pegawai">
<tr>
<th>Nama</th>
<th>NIP</th>
<th>Alamat</th>
<th>Telepon</th>
<th>Action</th>
</tr>
<?php foreach ($pegawai as $r) : ?>
<tr>
<td><?= $r->nama; ?></td>
<td><?= $r->nip; ?></td>
<td><?= $r->alamat; ?></td>
<td><?= $r->telepon; ?></td>
<td>
<a href="<?= site_url('pegawai/update/' . $r->id) ?>">Update</a> | <a href="<?= site_url('pegawai/delete/' . $r->id) ?>" onclick="return confirm('Do you want to delete this record?')">Delete</a>
</td>
</tr>
<?php endforeach ?>
</table>
<p><i>fahmialazhar.com</i></p>
</div>
</body>
</html>
View create.php
Create.php adalah tampilan dari form untuk menambahkan pegawai baru. Berikut ini adalah isi source code dari create.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pegawai</title>
<style>
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#container {
width: 80%;
margin: 0 auto;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
height: 40px;
}
input[type=submit] {
width: 100%;
background-color: #DD4814;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd3b0d;
}
</style>
</head>
<body>
<div id="container">
<h1>Add New Pegawai</h1>
<?= form_open('pegawai/create') ?>
<label for="name">Nama Lengkap</label>
<input type="text" id="nama" name="nama" placeholder="Isikan Nama Pegawai" autocomplete="off">
<label for="nip">NIP</label>
<input type="text" id="nip" name="nip" placeholder="Isikan NIP Pegawai" autocomplete="off">
<label for="alamat">Alamat</label>
<input type="text" id="alamat" name="alamat" placeholder="Isikan Alamat Pegawai" autocomplete="off">
<label for="telepon">Telepon</label>
<input type="text" id="telepon" name="telepon" placeholder="Isikan No Telp Pegawai" autocomplete="off">
<input type="submit" value="Submit">
<?= form_close() ?>
<a href="<?= site_url('pegawai/index') ?>">Cancel</a>
</div>
</body>
</html>
View update.php
Update.php adalah file yang berfungsi untuk menampilkan form saat melakukan update data. Berikut ini adalah source di dalam update.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pegawai</title>
<style>
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#container {
width: 80%;
margin: 0 auto;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
height: 40px;
}
input[type=submit] {
width: 100%;
background-color: #DD4814;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd3b0d;
}
</style>
</head>
<body>
<div id="container">
<h1>Update Pegawai</h1>
<?= form_open('pegawai/create') ?>
<label for="name">Nama Lengkap</label>
<input type="text" id="nama" name="nama" placeholder="Isikan Nama Pegawai" autocomplete="off" value="<?= set_value('nama', $pegawai->nama) ?>">
<label for="nip">NIP</label>
<input type="text" id="nip" name="nip" placeholder="Isikan NIP Pegawai" autocomplete="off" value="<?= set_value('nip', $pegawai->nip) ?>">
<label for="alamat">Alamat</label>
<input type="text" id="alamat" name="alamat" placeholder="Isikan Alamat Pegawai" autocomplete="off" value="<?= set_value('alamat', $pegawai->alamat) ?>">
<label for="telepon">Telepon</label>
<input type="text" id="telepon" name="telepon" placeholder="Isikan No Telp Pegawai" autocomplete="off" value="<?= set_value('telepon', $pegawai->telepon) ?>">
<input type="submit" value="Submit">
<?= form_close() ?>
<a href="<?= site_url('pegawai/index') ?>">Cancel</a>
</div>
</body>
</html>
Nah, selesai sudah kita membuat file view dari tabel pegawai ini.
9. Testing dan Kesimpulan
Setelah selesai mengikuti langkah-langkah membuat CRUD PHP MySQL di atas, sekarang kita bisa melakukan test.
Berikut ini adalah tampilan jika kamu berhasil membuat aplikasi CRUD CodeIgniter ini dengan benar.
Demikan tutorial tentang contoh aplikasi CRUD PHP MySQL dengan CodeIgniter 4. Kamu bisa men-download source code project CRUD CodeIgniter 4 ini di sini:
Download: Contoh Aplikasi CRUD CodeIgniter 4
Jika kamu mengalami kendala dalam mengikuti tutorial yang saya tulis, kamu bisa bertanya pada kotak komentar di bawah.
Semoga bermanfaat