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 Datagrid berbasis Ajax

Salah satu fitur utama dalam aplikasi pengolahan berbasis web adalah melakukan operasi tampil,tambah,edit dan hapus data. Banyak tutorial yang mengajarkan cara melakukan operasi tersebut dengan metode biasa. Kali ini, saya akan menjelaskan teknik melakukan operasi pengolahan data menggunakan PHP, MySQL, jQuery dan library JeasyUI yang akan membuat halaman pengolahan data anda lebih menarik sekaligus responsive karena teknik ini sudah mengunakan ajax.

Tampilan Pengolahan data web dengan datagrid php dan ajax
Tampilan Pengolahan data web dengan datagrid php dan ajax

Langkah pembuatannya
1. Buat tabel
2. Buat file koneksi
3. Buat halaman Front end (Tabel dan Form )
4. Buat fungsi new_user(), save_user(), edit_user(), save_user().
5. Buat file php untuk melakukan operasi data tambah,edit,hapus dan tampil data.

buat tabel

Contoh kali ini, kita akan membuat pengolahan data mahasiswa, berikut ini struktur tabelnya

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(5) NOT NULL,
  `nama` varchar(40) NOT NULL,
  `ipk` double NOT NULL,
  `jurusan` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

File koneksi database

Sesuaikan konfigurasi ini dengan database yang anda pakai. Namai file ini dengan nama config.php.

mysql_connect('localhost','usermysql','password');
	mysql_select_db('namadatabase');

Halaman Front end

Halaman ini berisi form dan tabel untuk menampilkan data.

	<table id="dg" title="My mahasiswa" class="easyui-datagrid" 
style="width:700px;height:250px"
		url="mahasiswa_crud.php?aksi=show"
		toolbar="#toolbar" pagination="true"
		rownumbers="true" fitColumns="true" singleSelect="true">
			<thead>
				<tr>
					<th field="nim" width="50">Nim</th>
					<th field="nama" width="50">nama </th>
					<th field="ipk" width="50">ipk</th>
					<th field="jurusan" width="50">jurusan</th>
				</tr>
			</thead>
		</table>
		<div id="toolbar">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" 
plain="true" onclick="newUser()">New User</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" 
plain="true" onclick="editUser()">Edit User</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" 
plain="true" onclick="removeUser()">Remove User</a>
		</div>

		<div id="dlg" class="easyui-dialog" 
style="width:400px;height:280px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons">
			<div class="ftitle">
				Info Mahasiswa
			</div>
			<form id="fm" method="post" novalidate>
				<div class="fitem">
					<label>Nim:</label>
					<input name="nim" class="easyui-validatebox" required="true">
				</div>
				<div class="fitem">
					<label>Nama:</label>
					<input name="nama" class="easyui-validatebox" required="true">
				</div>
				<div class="fitem">
					<label>ipk:</label>
					<input name="ipk">
				</div>
				<div class="fitem">
					<label>jurusan:</label>
					<input name="jurusan" class="easyui-validatebox" >
				</div>
			</form>
		</div>
		<div id="dlg-buttons">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" 
onclick="saveUser()">Save</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" 
onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
		</div>

fungsi javascript crud ajax

	var url;
			function newUser() {
				$('#dlg').dialog('open').dialog('setTitle', 'Tambah User');
				$('#fm').form('clear');
				url = 'mahasiswa_crud.php?aksi=add';
			}

			function editUser() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$('#dlg').dialog('open').dialog('setTitle', 'Ubah User');
					$('#fm').form('load', row);
					url = 'mahasiswa_crud.php?aksi=edit&id=' + row.nim;
				}
				console.log(url);
			}

			function saveUser() {
				$('#fm').form('submit', {
					url : url,
					onSubmit : function() {
						return $(this).form('validate');
					},
					success : function(result) {
						var result = eval('(' + result + ')');
						if (result.success) {
							$('#dlg').dialog('close');
							// close the dialog
							$('#dg').datagrid('reload');
							// reload the user data
						} else {
							$.messager.show({
								title : 'Error',
								msg : result.msg
							});
						}
					}
				});
			}

			function removeUser() {
				var row = $('#dg').datagrid('getSelected');
				console.log(row);
				
				if (row) {
					$.messager.confirm('Confirm', 
'Yakin Mau menghapus data user?', function(r) {
						if (r) {
							$.post('mahasiswa_crud.php?aksi=hapus', {
								id : row.nim
							}, function(result) {
								if (result.success) {
									$('#dg').datagrid('reload');
									// reload the user data
								} else {
									$.messager.show({// show error message
										title : 'Error',
										msg : result.msg
									});
								}
							}, 'json');
						}
					});
				}
			}

php untuk melakukan operasi crud

namai file ini dengan nama mahasiswa_crud.php


include 'config.php';

$id = $_REQUEST['id'];
$nim = $_REQUEST['nim'];
$nama = $_REQUEST['nama'];
$ipk = $_REQUEST['ipk'];
$jurusan = $_REQUEST['jurusan'];
$aksi = $_REQUEST['aksi'];

switch($aksi) {

	case 'show' :
		{

			//get user
			$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
			$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
			$offset = ($page - 1) * $rows;
			$result = array();

			$rs = mysql_query("select count(*) from mahasiswa");
			$row = mysql_fetch_row($rs);
			$result["total"] = $row[0];
			$rs = mysql_query("select * from mahasiswa limit $offset,$rows");

			$items = array();
			while ($row = mysql_fetch_object($rs)) {
				array_push($items, $row);
			}
			$result["rows"] = $items;

			echo json_encode($result);

		}
		break;
	case 'add' :
		{
			//save user

			$sql = "insert into mahasiswa(nim,nama,ipk,jurusan) 
			values('$nim','$nama','$ipk','$jurusan')";
			$result = @mysql_query($sql);
			if ($result) {
				echo json_encode(array('success' => true));
			} else {
				echo json_encode(array('msg' => 'Terjadi kesalahan .'));
			}
		}//end of save
		break;
		
	case 'edit' :
		{
			//update user

			$sql = "update mahasiswa set nim='$nim',nama='$nama',
			ipk='$ipk',jurusan='$jurusan' where nim='$id'";
			$result = @mysql_query($sql);
			if ($result) {
				echo json_encode(array('success' => true));
			} else {
				echo json_encode(array('msg' => 'Terjadi kesalahan .'));
			}
		}
		break;

	case 'hapus' : {
		//remove user ;

		$sql = "delete from mahasiswa where nim='$id'";
		$result = @mysql_query($sql);
		if ($result) {
			echo json_encode(array('success' => true));
		} else {
			echo json_encode(array('msg' => 'Terjadi kesalahan .'));
		}
	}
}//end of switch

Demo dan source code

Mau mencobanya langsung? klik disini, mau mendapatkan source codenya? klik disini.