Belajar CodeIgniter #13: Cara Membuat Fitur Pencarian yang Keren dan Gampang Dipahami
Belajar CodeIgniter #13 - Halo, bro, apa kabar? Kali ini kita akan melanjutkan petualangan seru kita di dunia coding bersama CodeIgniter. Tema hari ini adalah Belajar CodeIgniter dengan fokus pada fitur pencarian – sesuatu yang bisa membuat website kamu semakin keren dan ramah pengguna. Bayangkan, jika konten di website kamu sudah sangat banyak, pengguna pasti membutuhkan cara cepat untuk menemukan apa yang mereka cari, bukan? Nah, di artikel ini, kita akan membuat fitur pencarian dari nol hingga selesai, langkah demi langkah, dengan gaya santai yang mudah diikuti. Yuk, langsung mulai!
Kenapa Fitur Pencarian Itu Penting?
Saat ini, mungkin kita hanya memiliki sedikit konten, sehingga fitur pencarian terasa belum terlalu mendesak. Tapi bayangkan, bro, ketika kontenmu sudah menumpuk, fitur ini akan menjadi penyelamat! Pengguna bisa mencari apa saja dengan mudah, tanpa harus scroll sampai jempol pegel. Jadi, daripada menunggu lama, lebih baik kita buat sekarang. Siap? Mari kita mulai!
Pertama, kita akan membuat fitur pencarian untuk halaman publik – halaman yang bisa diakses semua orang tanpa perlu login. Ini akan menjadi senjata utama bagi pengguna biasa. Kita akan melanjutkan proyek beritacoding yang sudah kita buat sebelumnya. Yuk, simak langkah-langkahnya!
1. Update Article_model.php: Jantungnya Pencarian
Langkah pertama, kita membutuhkan "otak" untuk mencari artikel di database. Buka file Article_model.php, lalu tambahkan method baru bernama search. Berikut kodenya:
public function search($keyword) { if(!$keyword){ return null; } $this->db->like('title', $keyword); $this->db->or_like('content', $keyword); $query = $this->db->get($this->_table); return $query->result(); }
Apa maksudnya? Simpel, bro. Method ini mencari artikel berdasarkan kata kunci di judul atau isi konten menggunakan query LIKE. Jika kamu sudah pernah belajar SQL, pasti langsung paham. Keren, kan? Lanjut ke langkah berikutnya!
2. Buat Controller Search: Nyawa Fitur Pencarian
Sekarang, buat file baru di application/controllers dengan nama Search.php. Isinya seperti ini:
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Search extends CI_Controller { public function index() { $data['keyword'] = $this->input->get('keyword'); $this->load->model('article_model'); $data['search_result'] = $this->article_model->search($data['keyword']); $this->load->view('search.php', $data); } }
Di sini, kita mengambil kata kunci dari URL menggunakan $this->input->get('keyword'), lalu mengirimkannya ke method search di model. Hasilnya akan ditampilkan di view yang akan kita buat. Sabar ya, hampir selesai!
3. Desain View search.php: Tampilan yang Menarik
Buat file baru di application/views dengan nama search.php. Berikut kodenya:
<!DOCTYPE html> <html lang="en"> <head> <?php $this->load->view('_partials/head.php'); ?> </head> <body> <?php $this->load->view('_partials/navbar.php'); ?> <div class="container"> <h1>Cari Artikel</h1> <p>Tuliskan kata kunci artikel yang ingin kamu cari</p> <form action="" method="get" style="flex-direction: row; align-items:center"> <div> <input type="search" name="keyword" style="width: 360px;" placeholder="Keyword.." value="<?= html_escape($keyword) ?>" required maxlength="32" /> </div> <div> <input type="submit" class="button button-primary" value="Cari"> </div> </form> <?php if ($search_result) : ?> <div class="search-result"> <hr> <?php foreach ($search_result as $article) : ?> <h2> <a href="<?= site_url('article/' . $article->slug) ?>"><?= html_escape($article->title) ?></a> </h2> <p><?= strip_tags(substr($article->content, 0, 200)) ?></p> <?php endforeach ?> </div> <?php else : ?> <?php if ($keyword) : ?> <div style="height: 400px;"> <h1>Tidak ada yang ditemukan</h1> <p>Coba gunakan kata kunci lain, bro!</p> </div> <?php endif ?> <?php endif ?> </div> <?php $this->load->view('_partials/footer.php'); ?> </body> </html>
Lihat bagian html_escape($keyword)? Itu untuk mencegah serangan XSS. Belum tahu XSS? Nanti kita bahas, atau cari tahu dulu ya, hehe. Intinya, view ini memungkinkan pengguna mencari artikel dengan tampilan simpel namun menarik.
4. Coba Jalankan: Test Drive Fitur Baru
Buka browser, ketik /index.php/search, lalu masukkan kata kunci apa saja. Jika berhasil, hasil pencarian akan muncul. Keren, kan? Fitur pencarian untuk publik sudah selesai!
5. Tambahkan Menu di Navbar: Biar Mudah Diakses
Agar pengguna tidak bingung, kita akan menambahkan link ke halaman pencarian di navbar. Edit file views/_partials/navbar.php seperti ini:
<nav class="navbar"> <a href="<?= site_url() ?>">Home</a> <a href="<?= site_url('article') ?>">Article</a> <a href="<?= site_url('search') ?>">Cari</a> <a href="<?= site_url('page/about') ?>">About</a> <a href="<?= site_url('page/contact') ?>">Contact</a> <a href="<?= site_url('auth/login') ?>" style="margin-left:auto">Login</a> </nav>
Sekarang, cukup klik “Cari” di navbar, dan kamu akan langsung masuk ke halaman pencarian. Praktis, bukan?
Fitur Pencarian di Halaman Admin: Khusus yang Punya Akses
Jika tadi kita membuat fitur pencarian untuk publik, sekarang kita akan membuat versi adminnya. Bedanya, ini untuk mencari artikel dari dashboard, agar lebih mudah mengelola konten. Langkahnya mirip, tapi lebih simpel. Yuk, simak!
1. Update Controller Post: Otak Admin
Buka file admin/Post.php, lalu edit method index() seperti ini:
public function index() { $data['current_user'] = $this->auth_model->current_user(); $data['articles'] = $this->article_model->get(); $data['keyword'] = $this->input->get('keyword'); if(!empty($this->input->get('keyword'))){ $data['articles'] = $this->article_model->search($data['keyword']); } if(count($data['articles']) <= 0 && !$this->input->get('keyword')){ $this->load->view('admin/post_empty.php', $data); } else { $this->load->view('admin/post_list.php', $data); } }
Di sini, kita menggunakan method search yang sudah ada di model. Jika ada kata kunci, sistem akan mencari menggunakan method tersebut. Jika tidak, semua artikel akan ditampilkan menggunakan method get. Mudah, kan?
2. Edit View post_list.php: Tampilan Admin
Buka file views/admin/post_list.php, lalu tambahkan form pencarian di bagian toolbar:
<div class="toolbar"> <a href="<?= site_url('admin/post/new') ?>" class="button button-primary" role="button">+ Tulis Artikel</a> <div> <form action="" method="GET" style="flex-direction: row; width:360px"> <input type="search" name="keyword" placeholder="Cari artikel" value="<?= html_escape($keyword) ?>"> <input type="submit" value="Cari" class="button" style="width: 32%;"> </form> </div> </div>
Agar tampilan lebih rapi, edit CSS di assets/css/admin.css:
.toolbar { display: flex; margin: 1rem 0; justify-content: space-between; align-items: center; }
Masuk ke halaman admin (/admin/post), lalu coba cari artikel menggunakan form baru tadi. Jika berhasil, hasil pencarian akan muncul sesuai kata kunci. Mantap!
Kesimpulan
Fitur pencarian ini hanyalah salah satu dari banyak hal seru yang bisa kamu buat menggunakan CodeIgniter. Jika kamu rajin belajar, banyak trik lain yang bisa kamu kuasai, seperti membuat pagination, upload file, atau bahkan integrasi API. Sabar saja, semua akan kita bahas satu per satu di seri berikutnya!
Gimana, bro? Sekarang website kamu sudah memiliki fitur pencarian yang keren untuk publik dan admin. Dari nol sampai jadi, kita sudah melewatinya bersama. Belajar CodeIgniter memang asyik jika dipelajari dengan santai namun pasti, seperti ini. Nah, jika kamu masih bingung atau ingin bertanya tentang coding, langsung saja bergabung dengan komunitas di Codepolitan! Di sana, ada fitur komunitas untuk kamu yang masih newbie atau sudah pro. Kamu bisa bertanya, membaca, atau bahkan menulis ide-ide kerenmu sendiri. Yuk, bagikan pengalamanmu di sana, biar kita bisa belajar bersama!
What do you think?
Reactions
