Kali ini kita akan membuat sebuah pencarian sederhana di CodeIgniter 4, ada banyak perubahan yang perlu dilakukan bila anda pindah dari CodeIgniter versi 2/3 ke CodeIgniter 4. Beberapa diantaranya
– Penggunaan .env untuk menyimpan variabel
– Penggunaan composer
– PHP minimal 7.2+
– Server development menggunakan spark, seperti artisan di Laravel
Sebelum memulai tutorial ini pastikan PHP, MySQL/MariaDB sudah terinstall di system anda.
Install CodeIgniter 4
Install CodeIgniter 4 dengan composer
composer create-project codeigniter4/appstarter pencariansetelah selesai, folder baru dengan nama pencarian akan muncul. Pindah ke folder tersebut untuk memulai proses pembuatan scriptnya.
Mirip seperti Laravel, CodeIgniter 4 sudah menggunakan dotenv (.env) untuk menyimpan konfigurasinya. Copy file env menjadi .env, di linux/MacOS caranya
cp env .env
Buat User dan Database
Database yang akan digunakan adalah MariaDB, kita perlu membuat database dan user baru untuk aplikasi yang akan kita buat. Hal ini sangat penting agar tidak bercampur dengan aplikasi lainnya.
Login sebagai MySQL root, lalu jalankan perintah dibawah ini
# buat database baru create database pencarian; # buat user untuk database GRANT ALL PRIVILEGES ON pencarian.* TO "pencarian"@"localhost" IDENTIFIED BY "JARANGUDACOM";
Konfigurasi Database di CodeIgniter 4
Di folder project pencarian yang tadi dibuat terdapat file .env, buka file tersebut lalu edit/tambahkan
database.default.hostname = localhost database.default.database = pencarian database.default.username = pencarian database.default.password = JARANGUDACOM database.default.DBDriver = MySQLi
Import Data Dummy
Sebagai contoh kita akan mengimport data dummy yang sudah dipersiapkan dibawah ini. Login ke database pencarian
mysql -h localhost -u pencarian -p pencarian
copy paste file dibawah ini
CREATE TABLE `users` ( `id` INT(11) NOT NULL, `first_name` VARCHAR(50) DEFAULT NULL, `last_name` VARCHAR(50) DEFAULT NULL, `email` VARCHAR(50) DEFAULT NULL, `password` VARCHAR(50) DEFAULT NULL, `country` VARCHAR(50) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`id`, `first_name`, `last_name`, `email`, `password`, `country`) VALUES (1, 'Winston', 'Bebis', '[email protected]', 'RCOWs2uJq7', 'Indonesia'), (2, 'Ethelyn', 'Henrys', '[email protected]', 'ZwirrolHMukN', 'Russia'), (3, 'Vittorio', 'Vellender', '[email protected]', 'hz7uqNpZ', 'Brazil'), (4, 'Gearalt', 'Scinelli', '[email protected]', 'noer33vU', 'Poland'), (5, 'Fey', 'Stevens', '[email protected]', 'j1afGfuw7Ve7', 'China'), (6, 'Bentley', 'Ditt', '[email protected]', 'BUR6fv0A', 'Portugal'), (7, 'Tonya', 'Rye', '[email protected]', 'X5tmZ9jDcS', 'China'), (8, 'Juline', 'Roughey', '[email protected]', 'kjRRO45jeD0w', 'Indonesia'), (9, 'Alic', 'Wevell', '[email protected]', 'TzSWEfZWy8vQ', 'China'), (10, 'Norbie', 'Gelder', '[email protected]', '4jYZi2rj', 'Albania'), (11, 'Emmalynn', 'Gabler', '[email protected]', 'Uri553LlQO', 'Sweden'), (12, 'Sibelle', 'Bernardo', '[email protected]', 'Lbiznun', 'Ukraine'), (13, 'Laurie', 'Spooner', '[email protected]', 'IpkvoEL96BXc', 'China'), (14, 'Othilie', 'Eckly', '[email protected]', '27kZgqGFJMmL', 'Venezuela'), (15, 'Artus', 'Pennycook', '[email protected]', 'QOs7uRh5yLKB', 'Mali'), (16, 'Vincenz', 'Osler', '[email protected]', 'Gu5QCXHQ', 'China'), (17, 'Isidro', 'Hemphall', '[email protected]', 'NQ4KEqzc', 'France'), (18, 'Pinchas', 'Le Guin', '[email protected]', 'ZsfzyYqo', 'China'), (19, 'Rorie', 'Aleksandrev', '[email protected]', 'dstH8RB5', 'South Africa'), (20, 'Mayer', 'Pitkethly', '[email protected]', 'OHjZtbmX5gt', 'Canada'), (21, 'Karol', 'Baiden', '[email protected]', 'EZ1iIWBYV1p6', 'Morocco'), (22, 'Franciska', 'Peeters', '[email protected]', 'QJX2b8DfGs', 'Russia'), (23, 'Chlo', 'Kennford', '[email protected]', 'NU8YjWQF', 'Portugal'), (24, 'Wolfie', 'Lownds', '[email protected]', '1D00dQaOaO', 'Greece'), (25, 'Sherri', 'Hellens', '[email protected]', 'Ee7nls3', 'Poland'), (26, 'Emory', 'Semark', '[email protected]', 'VAIBfR8uO', 'Tajikistan'), (27, 'Jakie', 'Hulks', '[email protected]', 'jI5ylhi', 'China'), (28, 'Leticia', 'Mathie', '[email protected]', 'euFzcmE', 'Indonesia'), (29, 'Raimondo', 'Milier', '[email protected]', '3fNmX69MpoiF', 'Poland'), (30, 'Fawn', 'Cush', '[email protected]', 'odFVlovDiSj9', 'China'); ALTER TABLE `users` ADD PRIMARY KEY (`id`); ALTER TABLE `users` MODIFY `id` INT(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=31; COMMIT;
Membuat Model
Buat file model baru dengan nama UserModel.php di folder app/Models/
<?php namespace App\Models; use CodeIgniter\Model; class UserModel extends Model { protected $table = 'users'; }
model diatas agar kita mudah mengakses table users yang tadi dibuat, untuk pencarian ini, file model tersebut sudah cukup.
Membuat Controller
Buat satu file controller baru dengan nama User.php di folder app/Controllers/. File di controller ini bisa kita bilang merupakan backend dari aplikasi sederhana yang kita buat
<?php namespace App\Controllers; use App\Models\UserModel; class User extends BaseController { public function index() { return view('pencarian'); } public function cari() { $users = new UserModel(); $cari = $this->request->getGet('cari'); $data = $users->where('country', $cari)->findAll(); return view('hasil_pencarian', compact('data')); } }
dari script diatas $users->where('country', $cari)->findAll(); melakukan query SELECT * FROM users WHERE country="$cari" untuk mengambil data berdasarkan firstname, lastname atau lainnya tinggal merubah dibagian country, sesuai dengan nama kolom tabel.
function index fungsi tersebut untuk menampilkan halaman HTML yang akan kita buat kemudian, sementara function cari berguna untuk melakukan query ke model UserModel dan menyimpan datanya di variable $data
Membuat View
Bagian terakhir disini kita membuat tampilan untuk user atau biasa disebut frontend. File yang akan kita buat diletakkan di app/Views/.
1. File pencarian.php, file ini akan ditampilkan sewaktu mengakses /user di browser. File ini berisi file HTML, dan memang isinya hanya HTML aja
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<title>Script Pencarian dengan CodeIgniter 4 » Jaranguda.com</title>
</head>
<body>
<div class="container">
<br>
<h3>Pencarian</h3>
<hr>
<form action="<?php echo base_url('user/cari')?>" action="GET">
<div class="mb-3">
<label for="cari">data yang dicari</label>
<input type="text" class="form-control" name="cari" aria-describedby="cari">
</div>
<button type="submit" class="btn btn-primary" value="Cari">Submit</button>
</form>
</div>
</body>
</html>
2. File hasil_pencarian.php, file ini yang akan dipanggil untuk menampilkan hasil pencarian setelah user mengklik tombol Submit.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<title>Script Pencarian dengan CodeIgniter 4 » Jaranguda.com</title>
</head>
<body>
<div class="container">
<br>
<h3>Hasil Pencarian</h3>
<hr>
<table class="table">
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Email</th>
<th>Password</th>
<th>Negara</th>
</tr>
</thead>
<?php
if(count($data)>0) {
foreach ($data as $user) {
echo "<tr>";
echo "<td>" . $user['first_name'] . ' ' . $user['last_name'] . "</td>";
echo "<td>" . $user['email'] . "</td>";
echo "<td>" . $user['password'] . "</td>";
echo "<td>" . $user['country'] . "</td>";
echo "</tr>";
}
}
else {
echo "Data tidak ditemukan";
}
?>
</table>
</div>
</body>
</html>
Leave a Reply