Cara Membuat Pencarian Tanpa Refresh Halaman dengan Codeigniter
Rizaldi Maulidia Achmad
Di sela-sela kesibukan saya. Saya coba sempatkan buat update catatan/tutorial pada blog saya ini. Pembahasan kali ini adalah mengenai pencarian. Pencarian merupakan fitur paling penting dan hampir di semua aplikasi berbasis web atau desktop pasti memiliki fitur ini. Maka dari itu, saya akan bahas soal ini. Pencarian yang kita buat bukan pencarian sederhana yang ketika klik tombol cari halaman web tersebut akan memuat ulang (refresh/reload). Tapi pencarian yang kita buat adalah pencarian yang ketika proses tidak akan me-refresh/me-reload halaman web tersebut. Jadi kelihatan lebih dinamis. Tentunya bisa seperti itu karena bantuan Jquery Ajax. Ajax ini lah yang membuat kita bisa melakukan pengiriman data ke file php tanpa harus reload/refresh halaman. Pada catatan ini kita akan membuatnya dengan Framework Codeigniter 3 (versi 3) dan Database MySQL.
DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.
STEP 1 – PERSIAPAN
- Buat sebuah folder dengan nama search_ajax_ci lalu simpan pada folder xampp/htdocs/
- Buat sebuah folder dengan nama js, lalu simpan pada folder xampp/htdocs/search_ajax_ci/.
- Download plugin JQUERY, klik link berikut : Download.
- Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/search_ajax_ci/js/.
- Download Framework Codeigniter, klik link berikut : download.
- Copy and paste file codeigniter_v3.7z yang telah di download tadi ke folder xampp/htdocs/search_ajax_ci/.
- Ekstrak file codeigniter_v3.7z nya.
STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
- Buat sebuah database dengan nama mynotescode
- Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
CREATE TABLE IF NOT EXISTS `siswa` ( `nis` varchar(11) NOT NULL, `nama` varchar(50) NOT NULL, `jenis_kelamin` varchar(10) NOT NULL, `telp` varchar(15) NOT NULL, `alamat` text NOT NULL, PRIMARY KEY (`nis`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1
STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.
- Buka folder xampp/htdocs/search_ajax_ci/application/config/
- Buka file config.php
Cari kode berikut$config['base_url'] = '';Ubah kode tersebut jadi seperti ini :$config['base_url'] = 'http://localhost/search_ajax_ci/';
Kode diatas digunakan untuk menset baseurlnya.
Lalu simpan file tersebut. - Buka file autoload.php
Cari kode berikut ini :$autoload['libraries'] = array(); $autoload['helper'] = array();
Ubah jadi seperti ini :
$autoload['libraries'] = array('database'); $autoload['helper'] = array('url');Kode diatas digunakan untuk memuat (menload) class database dan url.
Lalu simpan file tersebut. - Buka file routes.php
Cari kode berikut ini :$route['default_controller'] = 'welcome';
Ubah jadi seperti ini :
$route['default_controller'] = 'siswa';
Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi siswa.
Lalu simpan file tersebut. - Buka file database.php
Cari kode berikut ini :'hostname' => 'localhost', 'username' => '', 'password' => '', 'database' => '',
Ubah jadi seperti ini :
'hostname' => 'localhost', // Nama host 'username' => 'root', // Username 'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja 'database' => 'mynotescode', // Nama databasenya
Kode diatas digunakan untuk koneksi ke database.
Lalu simpan file tersebut.
STEP 4 – BUAT MODEL
Langkah selanjutnya adalah membuat modelnya. Buat sebuah file dengan nama SiswaModel.php, Lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/models/. Berikut kodenya :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class SiswaModel extends CI_Model {
public function view(){
return $this->db->get('siswa')->result(); // Tampilkan semua data yang ada di tabel siswa
}
public function search($keyword){
$this->db->like('nis', $keyword);
$this->db->or_like('nama', $keyword);
$this->db->or_like('jenis_kelamin', $keyword);
$this->db->or_like('telp', $keyword);
$this->db->or_like('alamat', $keyword);
$result = $this->db->get('siswa')->result(); // Tampilkan data siswa berdasarkan keyword
return $result;
}
}
Pada kode diatas, kita membuat sebuah fungsi view(). dimana didalamnya terdapat kode return $this->db->get(‘siswa’)->result(). Kode tersebut berfungsi untuk menampilkan semua data pada tabel siswa. Struktur dasar penulisannya seperti ini : return $this->db->get(‘nama_tabel‘)->result(). Lalu pada kode diatas juga ada kode return, kode tersebut digunakan untuk mengeluarkan hasil dari sebuah fungsi. Pada kasus diatas, hasil yang dikeluarkan oleh return yaitu data-data siswa.
Fungsi search() ini berfungsi untuk melakukan query menampilkan data siswa berdasarkan keyword yang di ketik oleh user pada textbox pencarian. Pada fungsi ini terdapat kode $this->db->like(), $this->db->or_like(). Jika kita buat query sql nya langsung, kurang lebih fungsi tersebut akan mengeksekusi query seperti berikut :
SELECT * FROM siswa WHERE nis LIKE '$keyword' OR nama LIKE '$keyword' OR jenis_kelamin LIKE '$keyword' OR telp LIKE '$keyword' OR alamat LIKE '$keyword'
STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Siswa.php, lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/controllers/. Berikut ini kodenya :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Siswa extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('SiswaModel');
}
public function index(){
$data['siswa'] = $this->SiswaModel->view();
$this->load->view('index', $data);
}
public function search(){
// Ambil data NIS yang dikirim via ajax post
$keyword = $this->input->post('keyword');
$siswa = $this->SiswaModel->search($keyword);
// Kita load file view.php sambil mengirim data siswa hasil query function search di SiswaModel
$hasil = $this->load->view('view', array('siswa'=>$siswa), true);
// Buat sebuah array
$callback = array(
'hasil' => $hasil, // Set array hasil dengan isi dari view.php yang diload tadi
);
echo json_encode($callback); // konversi varibael $callback menjadi JSON
}
}
public function __construct(){, fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘SiswaModel’);, kode tersebut berfungsi untuk memuat (meload) model siswa (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.
public function index(). Dalam fungsi ini ada kode $data[‘siswa’] = $this->SiswaModel->view();, kode tersebut digunakan untuk mengambil hasil query sql dari fungsi view() yang ada pada model siswa (SiswaModel.php) lalu memasukannya ke dalam array data dengan index siswa ($data[‘siswa’]). Pada fungsi index() ini juga, terdapat kode $this->load->view(‘view’, $data);. Kode tersebut berfungsi untuk memuat (meload) file view.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan array data ($data) tadi ke file tersebut.
public function search() berfungsi untuk memanggil fungsi search() yang ada di SiswaModel. Fungsi search() tersebut untuk melakukan query ke database untuk mencari data siswa berdasarkan nis / nama / jennis kelamin / telelpon / alamat (sesuai yang diinput oleh user di textbox pencarian).
STEP 6 – VIEW
Langkah selanjutnya adalah membuat file view untuk menampilkan interface / antarmukanya. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/views/. Berikut tampilan dan kodenya :
<html>
<head>
<title>Search with Ajax CI</title>
<script>
var baseurl = "<?php echo base_url("index.php/"); ?>"; // Buat variabel baseurl untuk nanti di akses pada file config.js
</script>
<script src="<?php echo base_url("js/jquery.min.js"); ?>"></script> <!-- Load library jquery -->
<script src="<?php echo base_url("js/config.js"); ?>"></script> <!-- Load file process.js -->
</head>
<body>
<h1>Data SISWA</h1><hr>
<input type="text" id="keyword">
<button type="button" id="btn-search">Search</button>
<a href="<?php echo base_url(); ?>">Reset</a>
<br>
<div id="view">
<?php $this->load->view('view', array('siswa'=>$siswa)); // Load file view.php dan kirim data siswanya ?>
</div>
</body>
</html>
Pada kode diatas, kita menyisipkan kode $this->load->view(‘view’, array(‘siswa’=>$siswa));, kode tersebut berguna untuk me-load file view.php sebagai kondisi awal saat kita membuka web ini. Kita tampilkan dulu semua data siswanya.
Lalu kita buat file view nya, buat sebuah file dengan nama view.php, lalu simpan pada folder xampp/htdocs/search_ajax_ci/application/views/. Berikut ini kodenya :
<table border="1" cellpadding="8">
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Telepon</th>
<th>Alamat</th>
</tr>
<?php
if( ! empty($siswa)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
foreach($siswa as $data){ // Lakukan looping pada variabel siswa dari controller
echo "<tr>";
echo "<td>".$data->nis."</td>";
echo "<td>".$data->nama."</td>";
echo "<td>".$data->jenis_kelamin."</td>";
echo "<td>".$data->telp."</td>";
echo "<td>".$data->alamat."</td>";
echo "</tr>";
}
}else{ // Jika data tidak ada
echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</table>
Pada kode diatas terdapat kode foreach($siswa as $data){, kode tersebut akan manampilkan satu per satu data siswa sampai data siswa yang terakhir.
echo “<td>”.$data->nis.”</td>”;
echo “<td>”.$data->nama.”</td>”;
echo “<td>”.$data->jenis_kelamin.” </td>”;
echo “<td>”.$data->telp.” </td>”;
echo “<td>”.$data->alamat.”</td>”;
Pada kode diatas, yang saya beri tanda merah. Itu harus sama dengan nama kolom / field yang ada di database tabel siswa.
STEP 7 – AJAX
Langkah terakhir adalah membuat kode ajax nya. Buat sebuah file dengan nama config.js, lalu simpan pada folder xampp/htdocs/search_ajax_ci/js/. Berikut ini kodenya :
$(document).ready(function(){
$("#btn-search").click(function(){ // Ketika tombol simpan di klik
// Ubah text tombol search menjadi SEARCHING...
// Dan tambahkan atribut disable pada tombol nya agar tidak bisa diklik lagi
$(this).html("SEARCHING...").attr("disabled", "disabled");
$.ajax({
url: baseurl + 'siswa/search', // File tujuan
type: 'POST', // Tentukan type nya POST atau GET
data: {keyword: $("#keyword").val()}, // Set data yang akan dikirim
dataType: "json",
beforeSend: function(e) {
if(e && e.overrideMimeType) {
e.overrideMimeType("application/json;charset=UTF-8");
}
},
success: function(response){ // Ketika proses pengiriman berhasil
// Ubah kembali text button search menjadi SEARCH
// Dan hapus atribut disabled untuk meng-enable kembali button search nya
$("#btn-search").html("SEARCH").removeAttr("disabled");
// Ganti isi dari div view dengan view yang diambil dari controller siswa function search
$("#view").html(response.hasil);
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
});
});
Untuk kode ini sebagian besar sudah saya jelaskan dengan komentar di masing-masing kode.
Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.
Happy Coding ^_^
SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Tutorial membuat pencarian tanpa refresh halaman dengan codeigniter dan jquery ajax, Tutoria membuat pencarian tanpa reload halaman dengan codeigniter dan jquery ajax, cara mudah membuat pencarian tanpa harus refresh halaman dengan codeigniter mysql dan jquery ajax.
POST YOUR COMMENTS