Di artikel terdahulu, telah diulas bagaimana membuat popup bantuan mencari data pegawai. Di artikel kali ini, akan dibahas bantuan pencarian data menggunakan PHP-AJAX (Asynchronous JavaScript And XML). Adapun kasus yang digunakan sama dengan terdahulu.
Misal ada sebuah aplikasi evaluasi pegawai, dimana atasan akan menilai/memberi komentar atas kualitas kerja anak buahnya.
- Nopeg berbentuk combo box, sehingga tidak perlu ditulis, cukup klik combo box yang ada. Sayangnya, model ini akan memberatkan sistem bila data pegawai sangat banyak.
- Nopeg berbentuk text box, namun ada tombol ellipsis (…) untuk menampilkan data pegawai bila dibutuhkan. Bisa juga berbentuk short cut, misalnya penekanan tombol F9. Data pegawai yang ditampilkan pun tidak semuanya, jadi ada proses pencarian dulu sehingga lebih efisien. Teknik ini telah dibahas.
1. Script create database dan table di MySQL
create database hrd;
use hrd;
CREATE TABLE pegawai(
nopeg int unsigned auto_increment NOT NULL,
nama varchar(24) NOT NULL,
jk enum('L','P'),
alamat varchar(24),
kota varchar(16),
PRIMARY KEY (nopeg));
CREATE TABLE evaluasi_pegawai(
nopeg int NOT NULL,
hasil_evaluasi varchar(100),
tgl_evaluasi datetime);
INSERT INTO pegawai VALUES (1, 'ani', 'P', 'Jl. Apel 15', 'BANDUNG');
INSERT INTO pegawai VALUES (2, 'ali', 'L', 'Jl. Duren 2', 'JAKARTA');
INSERT INTO pegawai VALUES (3, 'adi', 'L', 'Jl. Jambu 20', 'JAKARTA');
INSERT INTO pegawai VALUES (4, 'bobi', 'L', 'Jl. Padjajaran 12', 'BOGOR');
INSERT INTO pegawai VALUES (5, 'budi', 'L', 'Jl. Semut 12', 'JAKARTA');
2. File form_evaluasi_ajax.php
File ini untuk mengisi evaluasi pegawai oleh atasan. Di sini juga pencarian data dilakukan.
2.1 Source code form_evaluasi_ajax.php
<html>
<script type="text/javascript" src="cariNama.js">
</script>
Silakan Isi Hasil Evaluasi Pegawai PT XYZ:
<pre>
<form method=post name=frmEvaluasi action=evaluasi.php>
Bila lupa Nopeg, ketik sebagian nama pegawai di sini:
<input type=text name=txtNama size=20 onKeyUp="showUser(this.value)">
<div id="txtHint">daftar pegawai yang dicari ditampilkan di sini(menggantikan tulisan ini).</div>
<b>Data yang wajib diisi :</b>
Nopeg : <input type=text name=txtNopeg size=5>
Hasil Evaluasi : <textarea name=txtEvaluasi rows=4 cols=20></textarea>
<input type=submit value=kirim> <input type=reset value=batal>
</form>
</pre>
</html>
2.2 tes di browser "http://10.1.1.2/evaluasi_ajax/form_evaluasi_ajax.php"
IP PC 10.1.1.2 boleh diganti dengan localhost atau sesuai IP Web Server yang digunakan.
3. File cariNama.js
3.1 Source code cariNama.js
//sumber : www.w3schools.com/php/php_ajax_database.asp
var xmlhttp;
function keParent(no_peg){
//alert(no_peg);
//menulis ke text box Nopeg di form_evaluasi_ajax.php
document.frmEvaluasi.txtNopeg.value = no_peg;
}// keParent(no_peg)
function showUser(str){
//alert (str);
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Browser does not support HTTP Request");
return;
}//if
var url="cari.php?nama="+str;
//alert (url);
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send();
//xmlhttp.send(null);
}//showUser(str)
function stateChanged(){
if (xmlhttp.readyState==4){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}//if
}//stateChanged()
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject){
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}//GetXmlHttpObject()
4. File dbconnect.php
File ini untuk koneksi ke database MySQL. Di contoh ini, Web Server Apache dan MySQL ada di 1 PC dengan IP Address 10.1.1.2
4.1 Source code dbconnect.php
<?php
$connected=mysql_connect('10.1.1.2','root','inix2010');
if ( ! $connected ) {
print ("Koneksi ke MySQL Server Gagal !!! <BR>");
}
else {
//print ("Koneksi ke MySQL Server Sukses !!!<BR>");
}
$retval=mysql_select_db("hrd",$connected);
if ( $retval ) {
//print ("Koneksi ke database hrd OK<BR>");
}
else {
print ("Database hrd tidak dapat diakses<BR>");
}?>
5. File cari.php
File ini merupakan program bantuan yang digunakan untuk menampilkan data pegawai yang tidak diketahui nomer pegawainya, tampil di bawah text box Nama Pegawai dan dilakukan secara background karena menggunakan AJAX.
5.1 Source code cari.php
<?php
include("dbconnect.php");
$nama=$_GET["nama"];
$kueri= "select nopeg,nama from pegawai " .
"where nama like '%" . $nama . "%' order by nopeg";
$rs=mysql_query($kueri);
$row=mysql_fetch_object($rs);
if ($row){ //jika data yang dicari ada
print "<TABLE BORDER=1>";
print "<TR bgcolor=lightblue> <TH>No Pegawai <TH>Nama </TR>";
//menampilkan record
do{
print "<TR>";
print "<TD> $row->nopeg <TD>";
print "<TD> <a href=javascript:void(0) onClick=keParent($row->nopeg)>$row->nama </a></TD>";
print "</TR>";
}while ($row=mysql_fetch_object($rs));
print "</TABLE>";
}//if ($row)
else {
print "<h4> Data Tidak Ada...</h4>";
}//data tidak ada
?>
5.2 Tampilan program ketika di form_evaluasi_ajax.php nama dicari.
Misal akan dicari pegawai yang namanya mengandung “b”. Di text box Nama Pegawai, ketik huruf “b”. Secara otomatis di bawah text box Nama Pegawai, tampil semua pegawai yang namanya mengandung huruf “b”. Hal ini berjalan secara background (karena menggunakan AJAX) sehingga tidak me-refresh halaman.
Di kolom Nama, ada hyperlink di tiap-tiap record. Jika salah satu hyperlink nama diklik, misalnya bobi, maka di form_evaluasi, text box Nopeg otomatis terisi Nomer Pegawai Bobi. Begitu juga bila diklik nama lain.
6. File evaluasi.php
File ini memproses input evaluasi dari program PHP untuk dimasukkan ke table “evaluasi_pegawai” di database MySQL .
6.1 Source code evaluasi.php
<?php
include "dbconnect.php";
$nopeg=$_POST['txtNopeg'];
$evaluasi=$_POST['txtEvaluasi'];
$qry="INSERT INTO evaluasi_pegawai VALUES ('$nopeg','$evaluasi',now())";
$rs=mysql_query($qry);
mysql_close();
//echo $qry;
?>
<SCRIPT LANGUAGE=JAVASCRIPT>
alert ("pengisian evaluasi sukses");
window.location='form_evaluasi_ajax.php';
</SCRIPT>
6.2 Tampilan program evaluasi.php
mas, udah saya coba tapi kok yg onclick javascriptnya buat nampilin data nopeg nya ga jalan ya?
ReplyDeletekeren buanget mas dab... ini yang selama ini saya cari hehehehe, sekali lagi makasih mas...:D
ReplyDeletebagus sekali,,heehee ada contoh lain mengenai pencarian dengan banyak kateogri pencarian ga mas??makasih.hehee
ReplyDeletetidak sesuai..
ReplyDeleteketika saya ketikkan satu huruf..list namanya tidak keluar??
mas mau naya ni apa bisa gak kita cari data yang tidak da webserver menggunaka php
ReplyDeletewaaah, trimakasih tutornya. sangat membantu, di edit sedikit sudah jadi istimewa :D tnx.
ReplyDeletehttp://www.intipanponorogo.com/
http://www.griyareog.com/
terimakasih sgt bermanfaat
ReplyDelete