Tutorial Pencarian berbasis jQuery Ajax

Sebelum kita mulai tutorial kali ini, saya ingin menekankan bahwa tutorial seperti ini sebenarnya sangat banyak di internet. Namun karena perkembangan web serta terus berevolusinya teknik ajax ini, maka saya buatkan tutorial pencarian berbasis ajax ini. Catatan penting disini, pencarian ini bukanlah menekankan pada autocomplete, namun teknik menampilkan data ajax dari server ke Form HTML. Teknik ini banyak di pakai dalam database yang mempunyai ribuan bahkan jutaan data. Teknik ini juga dipakai di website PUPNS untuk mengecek NIM seorang PNS.

Cara kerja awal dari form di PUPNS  user memasukan kode NIP  dan saat kode dimasukan kita klik tombol cari maka jika user itu sudah terdaftar maka akan muncul dan nama dan informasi lain yang relevan di formnya. Jika data tidak ada maka muncul pesan bahwa data di database tidak ditemukan. Tutorial ini mengacu pada konsep yang sama hanya saja contohnya menggunakan data mahasiswa dan yang dimasukan adalah NIM.

Panduan ini sudah ditest berkali kali di XAMPP 1.8.3 dengan PHP5.5 di Windows 8.1. Selain itu kode ini sudah ditest di VPS dengan server ubuntu 14.04. Berikut ini adalah tampilan hasil akhirnya:

Masukan nim ,lalu klik cari
Masukan nim ,lalu klik cari jika data ada maka informasi lain akan muncul !

SQL database

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(4) NOT NULL,
  `nama` varchar(15) NOT NULL,
  `jurusan` varchar(20) NOT NULL,
  `ipk` double NOT NULL,
  PRIMARY KEY (`nim`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `mahasiswa` (`nim`, `nama`, `jurusan`, `ipk`) VALUES
('1111', 'Candra', 'Teknik Informatika', 3.5),
('2222', 'Rahma', 'Manajemen', 3.2),
('3333', 'Adi Nur Wibowo', 'Teknik Mesin', 3.1);

Form Cari


<form id='form-mhs' method='GET' action='get_info.php'>   
   <label for="nim">NIM</label>
  <input id='nim' class="u-full-width" name='nim' type="text" placeholder="masukan nim Ex:1111" >
	   <label for="Nama">Nama</label>
  <input id='nama' type="text" class="u-full-width" name='nama' >
	   <label for="email">Jurusan</label>
  <input id='jurusan' type="text" class="u-full-width" name='jurusan' >
	   <label for="ipk">IPK</label>
  <input id='ipk' type="text" class="u-full-width" name='ipk' >
  <label></label>
  <input class="button-primary" type="submit" value="cari">
</form>

Untuk form agar cantik, saya menggunakan CSS framework skeleton. Namun CSS ini sifatnya opsional.

Kode Ajax

<script type='text/javascript'>
$(document).ready(function(){
    // hook the submit action on the form
  
  $("#form-mhs").submit(function(){
			$("#ipk").val("");
			$("#jurusan").val("");
			$("#nama").val("");
        // stop the form submitting
        event.preventDefault();
        // grab the nim and send AJAX request if not (empty / only whitespace)
        var nim = $("#nim").val();
		console.log(nim);
 //Kirimkan data ke server jika panjang digit >3 
        if (nim.length>3) {
            // using the ajax() method directly
			
            $.ajax({
                type : "GET",
                url : "get_info.php",
                cache : false,
                dataType : "json",
                data :"nim="+nim,
                success : process_response
              //  error: function(xhr) { alert("AJAX request failed: " + xhr.status); }
            });
			
            // there is a shortcut method to GET JSON:
            // $.getJSON(url, data, process_response);
        }
        else {
            $("#status").html("silahkan isi nim (minimal 4 digit)");
			
        }
  });
    /**
    * process the response, setelah sukses mengambil daa
    * tampilkan data di form yang susai data nama di letakan di input nama
    * data ipk di letakan di input ipk dst. 
    * @param {Object} response the JSON data parsed into an object
    */
    function process_response(response) {
        var frm = $("#form-mhs");
        var i;
        console.dir(response);      // for debug
		if(response!=false){
        for (i in response) {
            frm.find('[name="' + i + '"]').val(response[i]);
        }
		}else{
		$("#status").html("data tidak ditemukan!");
		}
	}
    
	});

Kode backend get_data.php

Perhatikan kode ajax diatas. kode tersebut mengirim data ke get_data.php. Berikut ini adalah kode get_data.php

        header('Content-type: application/json');
        // open database connection
        $db = new PDO('mysql:dbname=demodb;host:localhost;', 'usernamedb', 'passworddb');
 
        // use prepared statements!
        $query = $db->prepare('select * from mahasiswa where nim = ?');
        $query->execute(array($_GET['nim']));
        $row = $query->fetch(PDO::FETCH_OBJ);
 
        // send the data encoded as JSON
        echo json_encode($row);
        exit;
 

Kode diatas intinya mengambil data dari tabel mahasiswa jika ada maka outputnya di konversi ke JSON. Jika ada maka kembalikan nilai false.

Demo & Download

Silahkan coba demonya disini dan download kode lengkapnya disini.

Tutorial ORM dan PHP Active Record

Tutorial ini adalah bagian 3 tutorial sebelumnya yang membahas teknik koneksi database dan Operasi CRUD dasar. Mengingat ORM ini adalah teknik baru dan agar tutorial ini bisa digunakan secara independen tanpa membaca 3 artikel selanjutnya maka saya akan menampilkan kembali struktur tabel, struktur project dan tampilan UInya. Perbedaan mendasar antara teknik ORM denga teknik sebelumnya, disini anda tidak perlu melakukan query secara manual.

Sebelum lebih jauh, silahkan anda baca konsep Active Record dan ORM di website Wikipedia untuk melihat gambaran ORM dan website phpactiverecord.org untuk mengetahui cara kerja Active Record. Konsep ORM pertama kali dipopulerkan oleh hibernate dan Active record diadopsi dari RUby on Rail.

Catatan lain disini, PHP active record (ORM) ini memanfaatkan driver PDO, artinya teknik ini bisa dipakai disembarang database DENGAN SYARAT databasenya didukung oleh PHP. Selain librari ini, sebenarnya library ORM di PHP sangat banyak seperti contohnya Propel, doctrine dan redbeanPHP. Saya memilih menggunakan Active record karena librarinya kecil, mudah dipahami dan powerful.

Rancangan Tabel kampus

CREATE TABLE IF NOT EXISTS `kampus` (
  `idkampus` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) NOT NULL,
  `alamat` varchar(100) NOT NULL,
  PRIMARY KEY (`idkampus`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 ;

Struktur File project

|   index.php
|
+---assets
|   +---css
|   +---fonts
|   +---js        
+---inc
|       config.php
+--- ORM Lib
    +--ActiveRecord.php
+---model
    +----kampus.php
|
+---kampus
        kampus_action.php
        kampus_form.php
        kampus_view.php

Jika dibandingkan dengan Tutorial sebelumnya, tampak perbedaannya ada pada file ActiveRecord.php dan folder ORMlib yang berisi file library PHP untuk mendukung operasi database menggunakan teknik ORM. Perbedaan selanjutnya ada folder baru dengan nama model dengan isinya file kampus.php. Catatan disini, karena tabel kita cuma satu, maka modelnya cuma satu, namun jika kita punya banyak tabel maka isi model ini juga akan sebanyak tabelnya.

Tampilan Web

tampilancrud

Code Program

model data

ORM memetakan struktur database relasional menjadi Object. Tujuannya agar database bisa dengan mudah dimanipulasi dengan style OOP. PHP active record sendiri adalah library yang menekankan pada kemudahan dan konvensi penulisan kode. Salah satu konvensinya adalah setiap primary key harus diberi nama id dengan tipe integer auto increment. Namun klo kia analisa tabel kita tidak mengikuti konvensi yang ditetapkan oleh librari ini. Solusinya? buat konfigurasi didalam kelas kampus.php

class Kampus extends ActiveRecord\Model {
	 static $table_name = 'kampus';
 
    # explicit pk since our pk is not "id" 
    static $primary_key = 'idkampus';
  
}

Koneksi database

ActiveRecord\Config::initialize(function($cfg)
{
    $cfg->set_model_directory('model');
    $cfg->set_connections(array('development' => 'mysql://root:@127.0.0.1/candralab'));
});

Tampil data

  $kampus=new Kampus();
 $data=$kampus->find('all');
foreach ($data as $kampus) { 
echo $kampus->nama;
echo $kampus->alamat;
}

Kode diatas sama fungsinya dengan query select * from kampus . Fungsi $kampus->find('all') adalah fungsi bawaan dari ORM untuk menampilkan seluruh data di tabel. Fungsi lain bisa anda baca di http://www.phpactiverecord.org/projects/main/wiki/Finders

Insert data

	$kampus = new Kampus();
	$kampus -> nama = $_POST['nama'];
	$kampus -> alamat = $_POST['alamat'];
	$kampus -> save();

update data

$kampus = Kampus::find($id);
	$kampus -> nama = $_POST['nama'];
	$kampus -> alamat = $_POST['alamat'];
	$kampus -> save();

delete data

    $kampus = Kampus::find($id);
    $result = $kampus -> delete();

Perhatikan sekali lagi, ORM merevolusi cara kita berinteraksi dengan database, dengan ORM tidak perlu lagi query manual. Ingat! tutorial ini hanya pengantar singkat (quick star) dari PHP ORM. Jika anda ingin mempelajari lebih lanjut silahkan berkunjung ke websitenya di http://www.phpactiverecord.org.

Download source code

DOWNLOAD DISINI. Source code ini mencakup 3 tutorial sebelumnya. Untuk cara instalasi dan setingnya di komputer lokal, silahkan baca file README.txt.