Melanjutkan tutorial tentang CI, kali ini saya akan menuliskan tutorial cara menampilkan data dari database di CodeIgniter 4.
Jika hendak mengikuti tutorial ini, sebaiknya kamu membaca terlebih dahulu tulisan saya sebelumnya tentang CodeIgniter 4. Hal ini karena, untuk mengikuti tutorial ini, kamu harus sudah bisa menginstall dan menjalankan CodeIgniter versi terbaru ini di browser.
Cara Menampilkan Data dari Database MySQL
Tutorial ini sangat sederhana. Cocok sekali untukmu yang sedang belajar CodeIgniter versi 4. Saya akan menunjukkan cara menampilkan data dari database MySQL.
Ikuti saja langkah-langkah yang saya tuliskan berikut:
1. Membuat Database Playground
Di tutorial ini, saya membuat sebuah database dengan nama playground. Di dalam database tersebut, kita memiliki sebuah tabel dengan nama pegawai.
Berikut ini adalah syntax SQL untuk membuat tabel pegawai:
DROP TABLE IF EXISTS `pegawai`;
CREATE TABLE `pegawai` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(150) NOT NULL,
`nip` varchar(150) NOT NULL,
`alamat` varchar(150) NOT NULL,
`telepon` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;
INSERT INTO `pegawai` (`id`, `nama`, `nip`, `alamat`, `telepon`) VALUES ('1', 'Fahmi', '1234567890', 'Jakarta', '-');
INSERT INTO `pegawai` (`id`, `nama`, `nip`, `alamat`, `telepon`) VALUES ('2', 'Ade', '1234567891', 'Jakarta', '-');
INSERT INTO `pegawai` (`id`, `nama`, `nip`, `alamat`, `telepon`) VALUES ('3', 'Joko', '1234567892', 'Jakarta', '-');
INSERT INTO `pegawai` (`id`, `nama`, `nip`, `alamat`, `telepon`) VALUES ('4', 'Vendi', '1234567893', 'Jakarta', '-');
Setelah selesai membuat databasenya, kita akan lanjut ke langkah selanjutnya.
Kesulitan membuat database? Kamu bisa baca tulisan saya tentang cara membuat database MySQL dengan phpMyAdmin.
2. Cara Konfigurasi CodeIgniter 4
Di tulisan saya sebelumnya, saya pernah sedikit membahas mengenai cara konfigurasi CodeIgniter 4.
Hal yang harus kamu lakukan adalah:
- Save As file env menjadi .env (perhatikan tanda titik di depan file)
- Buka file .env tersebut
- Cari bagian CI_ENVIRONMENT, sesuaikan
- Cari bagian database lalu sesuaikan seperti di bawah ini
CI_ENVIRONMENT = development database.default.hostname = localhost database.default.database = playground database.default.username = root database.default.password = root database.default.DBDriver = MySQLi
Di atas hanya ditampilkan baris yang saya ubah saja ya.
CI_ENVIRONMENT kita ubah dari production ke development supaya framework CodeIgniter ini bisa menampilkan stack trace ketika terjadi error pada program/aplikasi.
Konfigurasi database, disesuaikan dengan apa yang ada di laptop kalian masing-masing yah.
3. Membuat class Model
Model untuk apa sih? model adalah class yang kita gunakan untuk berinteraksi dengan database, biasanya 1 model digunakan untuk 1 table tertentu.
Keuntungan menggunakan model adalah, model memiliki method bawaan yang memudahkan kita untuk melakukan query ke database. Sehingga kita tidak perlu lagi membuat method sendiri.
Beberapa method yang sudah tersedia adalah seperti find(), findAll(), update(), dan delete() record di database.
Oke, sekarang kita akan membuat file model untuk tabel pegawai yang sudah kita buat sebelumnya.
Buatlah file baru dengan nama PegawaiModel.php di dalam folder Models:
app/Models/PegawaiModel.php
Isikan file PegawaiModel.php tersebut dengan script seperti ini:
<?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;
}
4. Membuat Entity class
Entity class adalah fitur baru di CodeIgniter 4. Seperti halnya model, entity juga bisa digunakan untuk berinteraksi dengan database.
Di tutorial ini, saya tidak akan menunjukkan penggunaan Entity class karena mungkin akan membuat kamu bingung.
5. Membuat class Controller
Setelah membuat model, kita perlu membuat controller baru. File controller ini kita beri nama Pegawai.php
Lokasi folder untuk membuat controller adalah di folder app/Controllers
app/Controllers/Pegawai.php
Isikan file tersebut dengan script seperti di bawah ini:
<?php namespace App\Controllers;
class Pegawai extends BaseController
{
public function index()
{
$pegawaiModel = new \App\Models\PegawaiModel();
$pegawai = $pegawaiModel->findAll();
return view('pegawai', [
'pegawai' => $pegawai
]);
}
}
6. Membuat Tampilan View
Terakhir, kita harus membuat view supaya hasil query kita dapat kita tampilkan ke browser.
Buatlah file baru di folder Views dengan nama pegawai.php
app/Views/pegawai.php
Copy kan script berikut ini ke dalam file tersebut:
<!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>
#pegawai {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
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;
}
</style>
</head>
<body>
<div>
<table id="pegawai">
<tr>
<th>Nama</th>
<th>NIP</th>
<th>Alamat</th>
<th>Telepon</th>
</tr>
<?php foreach ($pegawai as $r) : ?>
<tr>
<td><?= $r->nama; ?></td>
<td><?= $r->nip; ?></td>
<td><?= $r->alamat; ?></td>
<td><?= $r->telepon; ?></td>
</tr>
<?php endforeach ?>
</table>
</div>
</body>
</html>
7. Test Hasil Akhir Aplikasi
Terakhir, kita coba jalankan apa yang telah kita buat di brower. Jika kamu membuka http://localhost:8080/pegawai, seharusnya kamu akan menemukan tampilan seperti pada gambar berikut ini:
Demikian tutorial tentang cara menampilkan data dari database dengan CodeIgniter 4.
Berikut ini saya berikan link download source code CodeIgniter 4 yang bisa kamu pelajari
Download source code cara menampilkan data dari database CodeIgniter
Jika kamu mengalami kesulitan, jangan sungkan untuk bertanya melalui komentar, saya akan respon secepatnya 🙂