author Ahmad Muhardian

Tutorial Codeigniter #13: Membuat Fitur Pencarian


Tutorial membuat fitur pencarian di Codeigniter

Mari kita lanjutkan project beritacoding!

Saat ini kita memiliki sedikit konten, mungkin fitur pencarian belum begitu dibutuhkan.

Namun, jika nanti kontennya sudah banyak. Maka fitur ini harus ada, agar user dapat menemukan konten dengan mudah.

Nah, pada tutorial kali ini..

Kita akan lanjut mengerjakan fitur pencarian.

Mari kita mulai!

Fitur Pencarian untuk Halaman Publik

Pertama mari kita buat fitur pencarian untuk halaman publik. Halaman publik adalah halaman yang bisa dibuka semua orang tanpa harus login.

Silakan buka project beritacoding dan lanjutkan:

1. Update Article_model.php

Pertama, kita membutuhkan sebuah method untuk melakukan pencarian artikel di database.

Tambahkan method berikut pada Article_model.php:

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();
}
Lihat kode lengkapnya!
<?php

class Article_model extends CI_Model
{

	private $_table = 'article';

	public function rules()
	{
		return [
			[
				'field' => 'title',
				'label' => 'Title',
				'rules' => 'required|max_length[128]'
			],
			[
				'field' => 'draft',
				'label' => 'Draft',
				'rules' => 'required|in_list[true,false]'
			],
			[
				'field' => 'content',
				'label' => 'Content',
				'rules' => '' // <-- rules dikosongkan
			]
		];
	}

	public function get()
	{
		$query = $this->db->get($this->_table);
		return $query->result();
	}

	public function count()
	{
		return $this->db->count_all($this->_table);
	}

	public function get_published($limit = null, $offset = null)
	{
		if (!$limit && $offset) {
			$query = $this->db
				->get_where($this->_table, ['draft' => 'FALSE']);
		} else {
			$query =  $this->db
				->get_where($this->_table, ['draft' => 'FALSE'], $limit, $offset);
		}
		return $query->result();
	}

	public function find_by_slug($slug)
	{
		if (!$slug) {
			return;
		}
		$query = $this->db->get_where($this->_table, ['slug' => $slug]);
		return $query->row();
	}

	public function find($id)
	{
		if (!$id) {
			return;
		}

		$query = $this->db->get_where($this->_table, array('id' => $id));
		return $query->row();
	}

	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();
	}

	public function insert($article)
	{
		return $this->db->insert($this->_table, $article);
	}

	public function update($article)
	{
		if (!isset($article['id'])) {
			return;
		}

		return $this->db->update($this->_table, $article, ['id' => $article['id']]);
	}

	public function delete($id)
	{
		if (!$id) {
			return;
		}

		return $this->db->delete($this->_table, ['id' => $id]);
	}
}

Method ini akan berfungsi untuk melakukan pencarian artikel dengan query LIKE. Jika kamu pernah belajar SQL, pasti akan paham dengan query ini.

Setelah ini, kita akan membuat Controller untuk pencarian.

Buatlah file baru di dalam folder application/controllers dengan nama Search.php, kemudian isi dengan kode berikut:

<?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);
	}
}

Pada controller ini, kita memanggil method search() dengan parameter $data['keyword'] yang kita dapatkan dari $this->input->get('keyword').

Setelah mengeksekusi method search(), kemudian kita akan menampilkannya ke dalam view search.php. View ini belum kita buat.

Karena itu, silakan lanjutkan:

3. Membuat VIew search.php

Buatlah file baru di dalam folder application/views dengan nama search.php kemudian isi dengan kode berikut:

<!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 dengan kata kunci yang lain</p>
				</div>
			<?php endif ?>
		<?php endif ?>
	</div>
	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

Jika kamu perhatikan, pada view ini kita menggunakan fungsi html_escape untuk menampilkan $keyword.

<?= html_escape($keyword) ?>

Ini bertujuan untuk menghindari XSS attack.

Belum tau tentang XSS attack?

Kamu bisa membacanya di:

Oke, sekarang lanjut..

Mari kita coba hasilnya!

4. Percobaan

Coba buka halaman search /index.php/search, kemudian coba masukan kata kunci untuk dicari.

Maka hasilnya:

demo fitur search article

Mantap 👍

5. Menambahkan Menu Search di Navbar

Agar halaman search gampang diakses, kita tambahkan menu menuju ke halaman tersebut di navbar.

Buka file views/_partials/navbar.php kemudian ubah isinya 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>

Nah sekarang kita bisa masuk ke halaman pencarian melalui menu di navbar.

search-menu

Dengan demikian, fitur pencarian untuk halaman publik sudah jadi.

Berikutnya kita akan membuat fitur pencarian di halaman admin.

Mari kita lanjutkan:

Fitur Pencarian untuk Admin

Cara membuat fitur pencarian di admin hampir sama dengan cara yang tadi. Hanya saja.. di sini kita tidak perlu membuat method di model.

Kita tinggal langsung pakai aja.

Mari kita coba!

1. Update Controller Post

Buka controller admin/Post.php kemudian ubah method index() menjadi 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);
	}
}
Lihat kode lengkapnya!
<?php

class Post extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
		$this->load->model('article_model');
		$this->load->model('auth_model');
		if(!$this->auth_model->current_user()){
			redirect('auth/login');
		}
	}

	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);
		}
	}

	public function new()
	{
		$data['current_user'] = $this->auth_model->current_user();
		$this->load->library('form_validation');
		if ($this->input->method() === 'post') {
			// Lakukan validasi sebelum menyimpan ke model
			$rules = $this->article_model->rules();
			$this->form_validation->set_rules($rules);

			if($this->form_validation->run() === FALSE){
				return $this->load->view('admin/post_new_form.php', $data);
			}

			// generate unique id and slug
			$id = uniqid('', true);
			$slug = url_title($this->input->post('title'), 'dash', TRUE) . '-' . $id;

			$article = [
				'id' => $id,
				'title' => $this->input->post('title'),
				'slug' => $slug,
				'content' => $this->input->post('content'),
				'draft' => $this->input->post('draft')
			];

			$saved = $this->article_model->insert($article);

			if ($saved) {
				$this->session->set_flashdata('message', 'Article was created');
				return redirect('admin/post');
			}
		}

		$this->load->view('admin/post_new_form.php', $data);
	}

	public function edit($id = null)
	{
		$data['current_user'] = $this->auth_model->current_user();
		$data['article'] = $this->article_model->find($id);
		$this->load->library('form_validation');

		if (!$data['article'] || !$id) {
			show_404();
		}
		
		if ($this->input->method() === 'post') {
			// lakukan validasi data sebelum simpan ke model
			$rules = $this->article_model->rules();
			$this->form_validation->set_rules($rules);

			if($this->form_validation->run() === FALSE){
				return $this->load->view('admin/post_edit_form.php', $data );
			}

			$article = [
				'id' => $id,
				'title' => $this->input->post('title'),
				'content' => $this->input->post('content'),
				'draft' => $this->input->post('draft')
			];
			$updated = $this->article_model->update($article);
			if ($updated) {
				$this->session->set_flashdata('message', 'Article was updated');
				redirect('admin/post');
			}
		}

		$this->load->view('admin/post_edit_form.php', $data);
	}

	public function delete($id = null)
	{
		if (!$id) {
			show_404();
		}

		$deleted = $this->article_model->delete($id);
		if ($deleted) {
			$this->session->set_flashdata('message', 'Article was deleted');
			redirect('admin/post');
		}
	}
}

Pada method ini kita mengambil artikel dari article_model dengan dua cara. Pertama dengan method get(), kedua dengan method search(). Method search() akan dipakai jika kita memberikan sebuah keyword. Jika tidak ada keyword maka method get() yang akan dipakai.

Berikutnya kita harus mengubah view untuk menampilkan artikel.

2. Update View list_post.php

Buka file views/admin/post_list.php, kemudian tambahkan form pencarian di bagian toolbar menjadi seperti ini:

<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 tampilannya menjadi rapi, ubah CSS untuk class .toolbar menjadi seperti ini:

File: assets/css/admin.css

.toolbar {
	display: flex;
	margin: 1rem 0;
	justify-content: space-between;
	align-items: center;
}

Sekarang mari kita coba lihat hasilnya.

3. Percobaan

Masuk ke halaman admin->post.

halaman admin post

Kemudian cobalah melakukan pencarian pada form search.

Maka hasilnya:

admin search

Mantap 👍

Dengan begini, fitur pencarian di halaman admin sudah jadi.

Apa Selanjutnya?

Kerja bagus!

Kamu sudah selesai membuat fitur pencarian.

Tentu ini masih belum cukup.

Karena itu, silakan lanjutkan ke:

Selamat belajar!