 |
| Gambar contoh |
Assalamu’alaikum wr. wb, para pembaca yang budiman. Pada artikel kali
ini kita akan mempelajari bagaimana cara membuat fitur pencarian data
mahasiswa menggunakan AJAX dan framework CodeIgniter. Tujuan artikel
tutorial ini adalah agar pembaca paham bagaimana cara membuat fitur
pencarian (search) yang dapat menampilkan hasilnya secara instan tanpa
membuka laman baru.
Fitur search di artikel ini berdasarkan keyword yang diketik, lalu
muncul daftar NIM yang sesuai keyword. Begitu salah satu NIM di-klik,
data mahasiswa langsung ditampilkan di laman yang sama. Secara garis
besar, tahap-tahapnya adalah sebagai berikut:
1. Tampilkan daftar NIM di form
2. Buat fungsi AJAX di view (form.php) untuk request ke server
3. Buat fungsi di controller (mahasiswa.php) untuk menyajikan data
4. Tampilkan data di view yang lain (view_mhs.php)
Pertama-tama yang dilakukan tentunya adalah menampilkan form untuk
mencari data mahasiswa. Dimulai dari controller mahasiswa.php di fungsi
index() seperti berikut ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/* controllers/mahasiswa.php */
class Mahasiswa extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('model_mahasiswa');
$this->load->model('model_prodi');
}
public function index()
{
$cek = $this->session->userdata('logged_in');
$level = $this->session->userdata('level');
if(!empty($cek) && $level=='admin'){
$d['judul'] = "Mahasiswa";
$d['class'] = "master";
$sess_data['sesi_kd_prodi'] = '';
$sess_data['sesi_singkat_prodi'] = '';
$this->session->set_userdata($sess_data);
$d['all_mhs'] = $this->model_mahasiswa->data_all_mhs()->result();
$d['content'] = 'mahasiswa/form';
$this->load->view('home',$d);
}else{
redirect('login','refresh');
}
}
}
?>
|
Yang perlu diperhatikan adalah fungsi untuk mengambil daftar NIM
mahasiswa yaitu data_all_mhs() yang ada di models/model_mahasiswa.php.
Fungsi ini menghasilkan daftar semua mahasiswa, termasuk NIM tentunya.
Berikut adalah implementasi fungsinya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php
/* models/model_mahasiswa.php */
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Model_mahasiswa extends CI_Model {
public function data_all_mhs(){
$this->db->where('status','Aktif');
$this->db->order_by('nim');
$q = $this->db->get('mahasiswa');
return $q;
}
}
?>
|
Fungsi data_all_mhs() ini sederhana, hanya mengambil data dari tabel
mahasiswa, dimana statusnya adalah ‘Aktif’ dan diurutkan berdasarkan NIM secara ascending (membesar).
Jika data sudah didapatkan, maka selanjutnya tinggal menampilkannya di views/form.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!-- views/mahasiswa/form.php -->
<div>
<div class="widget-box">
<div class="widget-header">
<h4><i class="icon-user"></i> <?php echo $judul;?></h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row-fluid">
<label for="form-field-select-1">Pencarian Mahasiswa [Masukan NIM]</label>
<select class="chzn-select" data-placeholder="Cari NIM ...." name="cari_nim" id="cari_nim" >
<option value="">Cari NIM ....</option>
<?php
foreach($all_mhs as $dt){
?>
<option value="<?php echo $dt->nim;?>"><?php echo $dt->nim;?></option>
<?php
}
?>
</select>
</div>
</div>
<div id="info_mhs"></div>
</div>
</div>
</div>
|
Bisa dilihat pada bagian select (dropdown) ada class “chzn-select,”
class tersebut adalah bawaan template yang bisa menampikan daftar teks
lalu jika di-klik akan menampikan data mahasiswa. Berikut tampilannya:
Sedangkan data yang ditampilkan di dropdown berasal dari variabel $all_mhs yang dioper (passed) dari controller.
Sekarang kita akan buat event di Javascript yang akan melakukan
request ke server ketika salah satu dari NIM di-klik. Tambahkan script
berikut di atas tag
yang pertama di file form.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<script type="text/javascript">
$(document).ready(function(){
$(".chzn-select").chosen();
$("#cari_nim").change(function(){
var nim = $("#cari_nim").val();
$.ajax({
type : 'GET',
url : "<?php echo site_url(); ?>/mahasiswa/cari_mhs",
data : "nim="+nim,
cache : false,
success : function(data){
$("#info_mhs").html(data);
}
});
});
});
</script>
|
Fungsi chosen() di element ber-class “chzn-select” berguna untuk
menampilkan dropdown, jika fungsi chosen() tidak dipanggil, dropdown
tidak akan ditampilkan. Kemudian callback yang dipanggi pada dropdown
“cari_nim” ini adalah “change()” yang akan berjalan ketika ada perubahan
di pemilihan dropdown atau dengan lain, ketika NIM di-klik (dipilih).
Di dalam callback change() ada AJAX request yang me-request data dari
controller “mahasiswa”, tepatnya di fungsi cari_mhs(). Parameter yang
dioper ke cari_mhs() adalah “nim” yang diambil dari element dengan
id=”cari_nim”. Jika request sukses, maka data berupa HTML (bukan JSON)
akan dimasukkan ke div dengan id=”info_mhs” yang ada di paling bawah.
Sekarang kita lihat isi dari fungsi cari_mhs() yang ada di controller “mahasiswa”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/* controllers/mahasiswa.php */
public function cari_mhs()
{
$cek = $this->session->userdata('logged_in');
$level = $this->session->userdata('level');
if(!empty($cek) && $level=='admin'){
$id['nim'] = $this->input->get('nim');
$qmhs = $this->db->get_where("mahasiswa",$id);
$mhs = $qmhs->result()[0];
$dt['data'] = $this->db->get_where("mahasiswa",$id);
$dt['nama_prodi'] = $this->model_prodi->namaJurusan($mhs->kd_prodi);
echo $this->load->view('mahasiswa/view_mhs',$dt);
}else{
redirect('login','refresh');
}
}
|
Inti dari fungsi cari_mhs() di atas adalah mengambil data mahasiswa
berdasarkan NIM lalu ditampilkan di view bernama “view_mhs.php. Berikut
adalah isi template view_mhs.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!-- views/mahasiswa/view_mhs.php -->
<table class="table fpTable lcnp table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center" width="10">No</th>
<th class="center span2">Th. Akademik</th>
<th class="center span2">NIM</th>
<th class="center">Nama Mahasiswa</th>
<th class="center" width="10">L/P</th>
<th class="center">Program Studi</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($data->result() as $dt){
?>
<tr>
<td class="center"><?php echo $i++?></td>
<td class="center"><?php echo $dt->th_akademik;?></td>
<td class="center">
<a href="<?php echo base_url();?>index.php/mahasiswa/edit/<?php echo $dt->nim;?>">
<?php echo $dt->nim;?></a>
</td>
<td ><?php echo $dt->nama_mhs;?></td>
<td class="center" ><?php echo $dt->sex;?></td>
<td ><?php echo $dt->kd_prodi.'-'.$nama_prodi;?></td>
</tr>
<?php
}
?>
</tbody>
</table>
|
Seperti bisa dilihat, data yang akan ditampilkan adalah nomor, tahun
akademik, NIM, nama, jenis kelamin, dan prodi. Jika semua sudah benar,
maka tampilannya adalah sebagai berikut:
Bagaimana dengan struktur data tabel mahasiswa dan prodi ? Ini dia query untuk membuat tabelnya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* tabel mahasiswa */
CREATE TABLE IF NOT EXISTS `mahasiswa` (
`th_akademik` varchar(15) NOT NULL,
`nim` varchar(15) NOT NULL,
`kd_prodi` varchar(15) NOT NULL,
`nama_mhs` varchar(150) NOT NULL,
`sex` varchar(2) NOT NULL,
`tempat_lahir` varchar(100) NOT NULL,
`tanggal_lahir` date NOT NULL,
`alamat` varchar(150) NOT NULL,
`kota` varchar(50) NOT NULL,
`hp` varchar(30) NOT NULL,
`email` varchar(50) NOT NULL,
`nama_ayah` varchar(100) NOT NULL,
`nama_ibu` varchar(100) NOT NULL,
`alamat_ortu` varchar(150) NOT NULL,
`hp_ortu` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`file_foto` varchar(100) NOT NULL,
`status` enum('Aktif','Cuti','DO','Meninggal','Lulus') NOT NULL,
`tgl_insert` datetime NOT NULL,
`tgl_update` datetime NOT NULL,
PRIMARY KEY (`nim`),
KEY `Kd_prodi` (`kd_prodi`)
) ENGINE=InnoDB;
/* tabel prodi */
CREATE TABLE IF NOT EXISTS `prodi` (
`kd_prodi` varchar(10) NOT NULL,
`prodi` varchar(50) NOT NULL,
`singkat` varchar(10) NOT NULL,
`ketua_prodi` varchar(100) NOT NULL,
`nik` varchar(30) NOT NULL,
`akreditasi` varchar(2) NOT NULL,
`tgl_insert` datetime NOT NULL,
`tgl_update` datetime NOT NULL,
PRIMARY KEY (`kd_prodi`)
) ENGINE=InnoDB;
|
Bagaimana, mudah bukan membuatnya? Sekian untuk tutorial Inoout kali ini, sampai bertemu di lain kesempatan!
Wassalamu’alaikum wr. wb.
0 comments:
Post a Comment