Membuat script multiple searching dengan PHP dan Ajax

Selamat bertemu kembali dengan kami tim media kreatif, Guna mengisi kepenatan tim media kreatif yang sehari-hari berkuta dengan PHP, Pada sesi kali ini kami akan membahas tentang metode simple pencarian data dengan menggunakan ajax request object untuk kemudian akan dilakukan multiple posting pada database MySQL dengan menggunakan PHP.

Ilustrasi yang akan di buat adalah seperti pada gambar di atas, dimana dalam satu buah Form terdapat beberapa elemen form untuk pencarian data siswa, hasil dari semua elemen form pencarian tersebut selanjutnya akan kita posting secara bersamaan dengan menggunakan fungsi FOREACH dengan menggunakan PHP.

 

Langkah - langkah yang harus di buat terlebih dahulu adalah sebagai berikut :

1. Buat script ajavascript Ajax seperti yang pada contoh di bawah kemudian simpan dengan nama prmajax.js:

function CariData(strdom,pid,urut) {
    document.getElementById(strdom).innerHTML="Loading ...";
    var xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }
    var date=new Date();
    var timestamp=date.getTime();
    var url="cari.php";
	var noinduk  = document.getElementById(pid).value;
    var param="pid="+noinduk+"&urut="+urut;
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            var res=xmlhttp.responseText;
            document.getElementById(strdom).innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", param.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
}

function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}

2. membuat form pencarian seperti pada contoh dibawah:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="prmajax.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="main">
<h1>Multiple Search & Posting</h1>
<form method="post" name="frm" action="proses.php">
	<span id="clear"> </span>
	No Induk : <input type="text" name="pid[0]" id="pid[0]" value="" /> 
	<input type="button" name="btn" value="Cari" onclick="CariData('data[0]','pid[0]',0);" />
	<span id="data[0]" class="datadom">
	
	</span>
	<span id="clear"> </span>
	No Induk : <input type="text" name="pid[1]" id="pid[1]" value="" /> 
	<input type="button" name="btn" value="Cari" onclick="CariData('data[1]','pid[1]',1);" />
	<span id="data[1]" class="datadom">
	
	</span>
	<span id="clear"> </span>
	No Induk :  <input type="text" name="pid[2]" id="pid[2]" value="" /> 
	<input type="button" name="btn" value="Cari" onclick="CariData('data[2]','pid[2]',2);" />
	<span id="data[2]" class="datadom">
	
	</span>
	<span id="clear"> </span>
	<input type="submit" name="btnPost" value="Simpan" />
</form>
</div>
</body>
</html>

3. membuat script pencarian data yang akan kita load dengan ajax, yaitu script cari.php

<?php
include('config.php');
if(isset($_POST['pid']) AND trim($_POST['pid'])!=''):
$urut = $_POST['urut'];
$query = mysql_query("SELECT * FROM siswa WHERE noinduk='".$_POST['pid']."'");
	if(mysql_num_rows($query)>0):
		$data = mysql_fetch_array($query);
		$nama = $data['nama'];
		$alamat = $data['alamat'];
		
		echo '<table>'.
			   '<tr><td>Nama</td><td><input type="text" name="nama['.$urut.']" value="'.$nama.'" /></td></tr>'.
			   '<tr><td>Alamat</td><td><textarea name="alamat['.$urut.']">'.$alamat.'</textarea></td></tr>'.
			 '</table>';
	else:
		echo '<span class="eror">Data siswa dengan No Induk '.$_POST['pid'].' tidak ditemukan</span>';
	endif;
else:
echo '<span class="eror">Eror : No induk siswa kosong</span>';
endif
?>

4. Jangan lupa membuat database dan juga script koneksinya config.php

<?php
$conn = mysql_connect('localhost','root','kutukupret');
if($conn){
	$sel=mysql_select_db('tutorial',$conn);
}

5. Buat script proses.php untuk memproses semua data yang akan di posting

<?php
if(isset($_POST['btnPost'])){
	$count = count($_POST['nama']);
	if($count>0){
		$nama = $_POST['nama'];
		$alamat = $_POST['alamat'];
		foreach($nama as $key => $val){
			echo 'Data yang  akan disimpan antara lain : Nama =>'.$nama[$key].' 
			      Alamat => '.$alamat[$key].'<br />';
		}
	}
}
?>

Untuk databasenya, silahkan buat dengan dilengkapi tabel siswa dengan perintah seperti berikut :

CREATE TABLE `siswa` (
  `noinduk` varchar(10) NOT NULL,
  `nama` varchar(100) default NULL,
  `alamat` varchar(200) default NULL,
  `tanggallahir` varchar(20) default NULL,
  `tempatlahir` varchar(50) default NULL,
  `kelas` varchar(10) default NULL,
  `nis` varchar(10) default NULL,
  PRIMARY KEY  (`noinduk`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Silahkan ikuti langkah - langkah di atas dengan benar, jika ada pertanyaan yang ingin disampaikan seputar contoh script diatas, silahkan tuliskan komentar atau pertanyaan anda pada form dibawah. Untuk mencoba contoh script yang sudah kami uji coba, silahkan download contoh scriptnya pada link download di bawah.

 

Sekian dulu tutorial kali ini, selamat mencoba dan Salam Kreatif.

Download script multiple searching ajax


Komentar pembaca

handiMantaaaappp, Nice Articel :Dposting pada :2011-12-15 20:25:45
ekaapa maksud script [pid]??posting pada :2012-01-12 16:39:41
AdminKata pid sebenarnya hanya berupa nama dari sebuah variabel. Pada kata $_POST['pid'] maksudnya adalah : Ambil isi dari variabel pid yang dikirim dengan method POST. Sedangkan pada form inputan kita melihat name="pid[0]" id="pid[0]", disini kata pid hanya digunakan sebagai pengenal form - form html, cuman kita menggunakan array sehingga pemrosesannya menjadi lebih mudah. Kira - kira itu yang bisa kami sampaikan, semoga bsa membantu ;)posting pada :2012-01-13 09:49:52
RevtThanks min, ini yg saya cari. Dicoba dulu deh :)posting pada :2012-12-26 16:47:18
tunggulitu yang no.2 disimpen dengan nama file apa? thxposting pada :2013-03-01 10:58:10
AdminTunggul, Untuk file no 2 bisa disimpan dengan extensi php atau juga bisa disimpan dengan extensi php. Contoh search.html atau search.phpposting pada :2013-03-01 17:08:29