Tutorial database kemahasiswaan menggunakan teknologi AJAX, PHP, & MySQL

Muhammad Syarifuddin
lord_arief@yahoo.com http://arief.aeroven.com

Lisensi Dokumen:
Copyright 2003-2007 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Pendahuluan
AJAX merupakan kepanjangan dari Asynchronous Javascript And XML, pertama kali diperkenalkan oleh Jesse James Garret dari perusahaan konsultan adaptive path pada tahun 2005. Pada aplikasi web tradisional, sebuah aplikasi web berjalan secara sinkron (synchronously) antara client dan server. Dimana setiap client mengklik suatu link, maka server akan merespon dengan mengirimkan / merefresh seluruh halaman. Dalam aplikasi server dengan jumlah client yang sedikit, tentunya tidak jadi masalah menggunakan metode tradisional ini, namun dalam aplikasi berskala besar yang memproses ribuan permintaan dalam sekali waktunya, tentu ini menjadi suatu masalah besar, dimana akan menghabiskan bandwidth dan proses di sisi server.

Gambar 1. metode tradisional Aplikasi yang berbasis ajax, bekerja secara asinkron (asynchronously). Dimana proses dilakukan secara background / dilaksanakan di belakang layar, sehingga proses pengiriman & penerimaan data antara server & client dapat berjalan tanpa harus merefresh / memperbaharui halaman, hanya satu atau lebih elemen <tag> yang diganti dengan data yang baru hasil pemrosesan dari server. Dalam prosesnya, AJAX menggunakan metode XMLHttpRequest untuk

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

tukar menukar data antara client & server.

Gambar 2. metode AJAX Dengan semakin luas & berkembangnya dunia internet, tentunya metode ini dapat sangat membantu dalam optimasi suatu aplikasi web. Dan dalam kasus ini akan diberikan contoh bagaimana membuat aplikasi data mahasiswa berbasis ajax

Isi
Pertama kali sebelum kita memulai, harus dipahami dulu konsep & struktur dari 1. Hyper Text Markup Language (mohon dicatat bahwa HTML bukanlah bahasa pemrograman, namun hanya cara / tag untuk menampilkan dokumen melalui media browser) 2. Bagaimana mempercantik tampilan website dengan Cascading Style Sheet 3. Scripting language PHP (Hypertext Preprocessor) 4. Sistem basis data MySQL 5. Dan Javascript yang nantinya akan digunakan sebagai AJAX user interface. Karena bab-bab tersebut tidak dijelaskan lagi secara detail pada tutorial ini. Sebagai referensi, anda dapat mendownload materi-materi antara lain : 1. Tutorial HTML 2. Tutorial CSS 3. Pemrograman PHP 4. Pemrograman Javascript Catatan : semua source code & isi database dapat didownload secara gratis di alamat : http://arief.aeroven.com/download/ajax_untag.zip Selanjutnya pada materi inti, mari kita membuat database bernama web pada mesin MySQL kita. Buat tabel bernama mahasiswa dengan field sebagai berikut : nbi integer (10) , primary key nama varchar (50) kelamin enum(L,P) alamat varchar (50) telp varchar (15) buat lagi tabel dengan nama user, tabel ini digunakan untuk menyimpan username & password yang berhak mengakses aplikasi kita nantinya. Field-fieldnya antara lain : username varchar (50), primary key password varchar (100) Setelah selesai, isikan dengan beberapa data. Atau apabila anda tidak mau repot, setelah anda membuat database bernama web, anda dapat mengimport perintah sql lengkap berikut ini ke dalam phpmyadmin :

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

-- phpMyAdmin SQL Dump -- version 2.11.1 -- http://www.phpmyadmin.net --- Host: localhost -- Generation Time: Sep 03, 2008 at 12:37 AM -- Server version: 5.0.45 -- PHP Version: 5.2.4 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; --- Database: `web` --- ---------------------------------------------------------- Table structure for table `mahasiswa` -CREATE TABLE `mahasiswa` ( `nbi` int(10) NOT NULL, `nama` varchar(50) collate latin1_general_ci NOT NULL, `kelamin` enum('L','P') collate latin1_general_ci NOT NULL, `alamat` varchar(50) collate latin1_general_ci NOT NULL, `telp` varchar(15) collate latin1_general_ci NOT NULL, PRIMARY KEY (`nbi`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci; --- Dumping data for table `mahasiswa` -INSERT INTO `mahasiswa` (`nbi`, `nama`, `kelamin`, `alamat`, `telp`) VALUES (460602685, 'Muhammad Syarifuddin', 'L', 'Jl Nginden Jaya gg 1 no 37 Surabaya', '0816512355'), (460602662, 'Panji Wahyu Conger', 'L', 'Jl Nginden Jaya gg 2 no 17 Surabaya', '08527823457891'), (460602590, 'Amaruddin', 'L', 'Jl Burine Carrefour Surabaya', '08580293457'), (460602469, 'Anggoro', 'L', 'Jl.Nginden ', '7777666654'), (460602980, 'Afif Mukhlison', 'L', 'Jl Pacarkeling 78 Surabaya', '093283123'), (460602566, 'Andong Kuseno', 'L', 'Lidahwetan', '031290380992'), (460602567, 'Novie Novandriati', 'P', 'Nginden', '08234909878'), (460602467, 'Windy', 'P', 'Wiyung', '904759321'), (460602591, 'Dany Ashary', 'P', 'Driyorejo(Gresik)', '031-70716115'), (460602637, 'Ardiansyah', 'L', 'Jl Pucang Adi 20 Surabaya', '082318934'), (460602638, 'Muhaimin', 'L', 'Jl Mergoyoso 33 Surabaya', '082318934'), (460602639, 'Wilfridus kopong iduk', 'L', 'Jl Tubagus 87 Surabaya', '08133082374'), (460602640, 'Eko Imam Yulianto', 'L', 'Tanggulangin no 23 Sidoarjo', '0317782391'), (460602645, 'Galih Yudi Ari', 'L', 'Jl Nginden gg 4 no20 Surabaya', '08562387479'), (460602628, 'Zainal Abidin', 'L', 'Jl Kalidami gg 7 no 24 Surabaya', '0852678321'), (460602631, 'Khoiruddin Azhar', 'L', 'Jl Nginden 7 no 45 Surabaya', '085728312442'), (460602635, 'Kadar Haryadi', 'L', 'Jl Adisono RT 03/04 Sidoarjo', '082318934'), (460602676, 'Aryo Agung Wicaksono', 'L', 'Jl Sooko Rt 7/2 Sidoarjo', '08133240943'), (460602681, 'Sigit Ardianto', 'L', 'Jl Keputih gg 1 no 19 Surabaya', '08123411232'), (460602577, 'Arizal Juhantoro', 'L', 'Jl Pucang Sewu 81 Surabaya', '08155220094'), (460602678, 'Arifin', 'L', 'Jl Demak gg 9 no 192', '081553008223'), (460602463, 'Citra Amelia', 'P', 'Jl Gresik 78 Surabaya', '08564356211'), (460602569, 'Jeffry Wiratmojo', 'L', 'Jl Asia Afrika no 57 Surabaya', '081553000093'), (460602521, 'Andung Hermanto', 'L', 'Jl Kertajaya gg 5 no 73 Surabaya', '08315000018'), (460602610, 'Devi Awaluddin Zuhdi', 'L', 'Jl Kertajaya gg 5 no 73 Surabaya', '08315000019'), (460602609, 'Ahmad Yuqo Madazzaman', 'L', 'Jl Kertajaya gg 3 no 15', '08165432775'), (460602434, 'Tommy Willianto', 'L', 'Jl Pacar kembang no 6 Surabaya', '031 90924521'), (460602473, 'Aulia Ibnu Romadhona', 'L', 'Jl Krembangan 182 Surabaya', '08553004525'), (460602438, 'Ardianto', 'L', 'Jl Keputih gg 7 no 20 Surabaya', '08155180046'), (460602595, 'Indria Wahyu Putri', 'P', 'Jl Kertajaya 17 C Surabaya', '08155183231'), (460602602, 'Putri Aulia Syakieb', 'P', 'Jl Keputran gg 2 no 75', '031 70234673'), (460602598, 'Ribut Jayadi', 'L', 'Jl Pacarkeling 78 Surabaya', '08528753213'), (460602941, 'Muh Aris Setyawan', 'L', 'Jl Kalidami 79 Surabaya', '084212312'), (460602616, 'Moh Makhrus', 'L', 'Jl Aloha gg 7 Sidoarjo', '031 70928774'), (460602597, 'Hadi Wijaya', 'L', 'Jl Kuningan no 873 Surabaya', '081553002355'), (460602568, 'Wahyu Dwi Priyono', 'L', 'Kedungdoro 7 no 18 Surabaya', '0816511223'), (460602925, 'Yulia Arisanti', 'P', 'Kedoro Kidul RT 07/06 Surabaya', '0816654235'),

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

(460602658, 'Alea Kalila', 'P', 'Jl Rungkut Industri III no 46 Surabaya', '081332101625'), (460602461, 'Joko Supriyanto', 'L', 'Kedurus', '0812341242'), (460602460, 'Nur Aida', 'P', 'Keputih', '082312341'), (460602442, 'Ainur rohman', 'L', 'Kejawan', '0389781232'), (460602570, 'Stefanus Clandy Dedy', 'L', 'Jl Nginden gg2 Surabaya', '031 70928412'); -- ---------------------------------------------------------- Table structure for table `user` -CREATE TABLE `user` ( `username` varchar(50) collate latin1_general_ci NOT NULL, `password` varchar(100) collate latin1_general_ci NOT NULL, PRIMARY KEY (`username`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci; --- Dumping data for table `user` -INSERT INTO `user` (`username`, `password`) VALUES ('460602685', '0ff6c3ace16359e41e37d40b8301d67f');

Selanjutnya skrip pemrograman kita, dasar aplikasi AJAX kita dibagi menjadi 4 file yaitu : 1. index.php - berisi fungsi php untuk memulai session (session_start) dan tampilan HTML biasa, digunakan sebagai user interface kita 2. ajaxlib.js - library / kumpulan fungsi javascript yang digunakan untuk mengeksekusi program PHP dan menampilkan hasilnya secara background menggunakan fungsi XMLHttpRequest 3. fetcher.php - merupakan file program yang berfungsi untuk mengakses data yang ada pada mesin MySQL 4. style.css - file yang berfungsi untuk mempercantik elemen-elemen tampilan website kita. Seperti tag <a>, <table>, <input> dll berikut source code dari index.php :
<? session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Universitas 17 Agustus 1945 Surabaya</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> <script language="JavaScript" src="ajaxlib.js"></script> </head> <body> <table width="900" cellpadding="0" cellspacing="0" align="center" style="border:1px solid #cccccc"> <tr> <td colspan="2" style="border-bottom:1px solid #cccccc;"><img src="images/header_untag.jpg" width="900" height="180" /></td> </tr> <tr> <td width="200" valign="top" bgcolor="#F1F4F6" style="border-bottom:1px solid #cccccc;"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F4F6"> <tr> <td valign="top" bgcolor="#F1F4F6"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="20" background="images/menu-bg.gif">&nbsp;</td> <td background="images/menu-bg.gif"><b><font color="#FFFFFF">Admin</font></b></td>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

<?

<td width="2" background="images/menu-bg.gif">&nbsp;</td> </tr> </table> <div id="admin">

if (isset($_SESSION['460602685_Ajax_UAS_web'])) { $username =$_SESSION['460602685_Ajax_UAS_web']; echo "<div id='txtLogin'><table width='100%' border='0' cellpadding='1' cellspacing='1' bgcolor='#F1F4F6' style='border-top:1px solid #cccccc'> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'>&raquo;&nbsp;hello <u>$username</u></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='addMhs(0)'>Add Mahasiswa</a></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='editMhs(0)'>Edit Mahasiswa</a></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='delMhs(0)'>Delete Mahasiswa</a></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='Logout(0)'>Logout !!</a></td> <td width='5'>&nbsp;</td> </tr> </table></div>"; } else { echo "<div id='txtLogin'><form style='margin-top:0px;margin-left:0px;marginright:0px;margin-right:0px' method='get'><table width='100%' align='center' style='border-top:1px solid #cccccc'> <tr> <td><div align='left'>Username</div></td> <td>:</td> <td><input type='text' size='12' name='username' class='inputbok3'> </td> </tr> <tr> <td><div align='left'>Password</div></td> <td>:</td> <td><input type='password' size='12' name='password' class='inputbok3'> </td> </tr> <tr align='center'> <td height='22' colspan='3'><input type='button' name='submit' value='Login' class='inputbok3' onClick='Login(username.value,password.value)'> <input type='reset' value='Reset' name='reset' class='inputbok3'> </td> </tr> </table> </form>"; } ?> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="20" background="images/menu-bg.gif">&nbsp;</td>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

<td background="images/menu-bg.gif"><b><font color="#FFFFFF">Menu</font></b></td> <td width="2" background="images/menu-bg.gif">&nbsp;</td> </tr> </table> <table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#F1F4F6" style="border-top:1px solid #cccccc;border-bottom:1px solid #cccccc"> <tr align="left"> <td width="1" height="16" valign="middle">&nbsp;</td> <td width="144" class="tdlink"><img src="images/kotak.jpg" width="5" height="5"> <a href="#" class="ular" onclick="Home(0)">Home</a></td> <td width="5">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td class="tdlink"><img src="images/kotak.jpg" width="5" height="5" /> <a href="#" class="ular" onclick="showMhs(0)">Data Mahasiswa</a></td> <td>&nbsp;</td> </tr> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="20" background="images/menu-bg.gif">&nbsp;</td> <td background="images/menu-bg.gif">&nbsp;</td> <td width="2" background="images/menu-bg.gif">&nbsp;</td> </tr> </table> </td> </tr> </table> </td> <td valign="top" width="800" bgcolor="#F1F4F6" style="border-bottom:1px solid #cccccc;border-left:1px solid #cccccc"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="borderbottom:1px solid #cccccc;"> <tr> <td width="10" height="20" background="images/menu-bg.gif">&nbsp;</td> <td background="images/menu-bg.gif"><b><font color="#FFFFFF">Homepage</font></b></td> <td width="2" background="images/menu-bg.gif">&nbsp;</td> </tr> </table> <table width="100%"> <tr> <td> <div id="txtHint"> Welcome to Universitas 17 Agustus 1945 Surabaya website, <br /><br /> Thank you for your time to visiting our site, click the link on left side to access the menu<br />Regards<br /><br />Muhammad Syarifuddin<br />460602685<br /> Informatics 2006 Untag Surabaya </div> </td> </tr> </table> </td> </tr> <tr> <td bgcolor="#F1F4F6">&nbsp;</td> <td bgcolor="#F1F4F6" align="center" style="border-left:1px solid #cccccc"> <br> &copy; Copyright Muhammad Syarifuddin / 460602685 - <a href="http://arief.aeroven.com" class="ular5">http://arief.aeroven.com</a> &reg; 2008<br> <br><br><br> </td> </tr> </table> </body> </html> </table>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

Source code dari ajaxlib.js :

// JavaScript Document var xmlHttp function Login(user,pass) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=Login&user="+user url=url+"&pass="+pass url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChangedLogin xmlHttp.open("GET",url,true) xmlHttp.send(null) } function Logout() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=Logout" xmlHttp.onreadystatechange=stateChangedLogin xmlHttp.open("GET",url,true) xmlHttp.send(null) } function Home() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=Home" //url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function addMhs() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=addMhs" url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function addMhsGo(nbi,nama,kelamin,alamat,telp) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=addMhsGo&nbi="+nbi url=url+"&nama="+nama url=url+"&kelamin="+kelamin url=url+"&alamat="+alamat

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

url=url+"&telp="+telp url=url+"&sid="+Math.random() //window.alert('url') xmlHttp.onreadystatechange=stateChangedCenter xmlHttp.open("GET",url,true) xmlHttp.send(null) } function editMhs(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=editMhs&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function editMhsGo(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=editMhsGo&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function editMhsSave(nbi,nama,kelamin,alamat,telp,old_nbi) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=editMhsSave&nbi="+nbi url=url+"&nama="+nama url=url+"&kelamin="+kelamin url=url+"&alamat="+alamat url=url+"&telp="+telp url=url+"&old_nbi="+old_nbi url=url+"&sid="+Math.random() //window.alert('url') xmlHttp.onreadystatechange=stateChangedEditSave xmlHttp.open("GET",url,true) xmlHttp.send(null) } function showNameEdit(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=showNameEdit&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChangedCenter xmlHttp.open("GET",url,true) xmlHttp.send(null) } function delMhs(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) {

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=delMhs&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function showNameDel(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=showNameDel&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChangedCenter xmlHttp.open("GET",url,true) xmlHttp.send(null) } function delMhsGo(nbi) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=delMhsGo&q="+nbi url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function showMhs(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=showMhs&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function showName(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser tidak support HTTP Request") } var url="fetcher.php" url=url+"?cmd=showName&q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChangedCenter xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function stateChangedLogin() {

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtLogin").innerHTML=xmlHttp.responseText } } function stateChangedCenter() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtCenter").innerHTML=xmlHttp.responseText } if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") //if AJAX state is loading (loading) { document.getElementById("txtCenter").innerHTML="<img src=\"images/loading1.gif\"/><br/>Fetching the data, please wait" //get element where the id is "Result", in this case it goes to the <div> tag //send the loading image (loading.gif) that show us the data is being prepared } } function stateChangedEdit() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtEdit").innerHTML=xmlHttp.responseText } } function stateChangedEditSave() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtEditSave").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xamlHttp=null; try { // ngecek buat browser firefox, opera 8.0+, safari xmlHttp=new XMLHttpRequest(); } catch (e) { // browser Internet Explorer try { // IE 6.0+ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // IE 5.0 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

10

Sourcecode dari fetcher.php :

<? session_start(); $q=$_GET["q"]; $cmd=$_GET["cmd"]; $adm_cmd=$_GET["adm_cmd"]; $con = mysql_connect("localhost","root","indosat"); /////////////////////////////////////////////////// //jangan lupa untuk mengganti username & password koneksi mysql diatas /////////////////////////////////////////////////// if (!con) { die('koneksi ke MySQL server gagal: ' . mysql_error()); } mysql_select_db("web",$con); if ($cmd=="Home") { echo "Welcome to Universitas 17 Agustus 1945 Surabaya website, <br /><br /> Thank you for your time to visiting our site, click the link on left side to access the menu<br /> Regards<br /><br /> Muhammad Syarifuddin<br /> 460602685<br /> Informatics 2006 Untag Surabaya "; } if ($cmd=="addMhs") { if (isset($_SESSION['460602685_Ajax_UAS_web'])) { ?> <div id="txtAdd"><form method="GET"> <table> <tr> <td>Nbi </td> <td> : </td> <td><input type="text" name="nbi" size="30" class="inputbok3"></td> </tr> <tr><td>Nama </td> <td> : </td> <td><input type="text" name="nama" size="30" class="inputbok3"></td> </tr> <tr> <td>Kelamin </td> <td> : </td> <td> <select name="kelamin"> <option value="L">Laki laki</option> <option value="P">Perempuan</option> </select> </td> </tr> <tr> <td>Alamat </td> <td> : </td> <td><input type="text" name="alamat" size="30" class="inputbok3"></td> </tr> <tr> <td>Telp </td> <td> : </td> <td><input type="text" name="telp" size="30" class="inputbok3"></td> </tr> <tr> <td colspan="3"><input type="button" name="submit" value="Tambah" onClick="addMhsGo(nbi.value,nama.value,kelamin.value,alamat.value,telp.value)" class="inputbok3"></td> </tr> </table></form></div><div id="txtCenter"> </div> <? } else {

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

11

} if ($cmd=="addMhsGo") { if (isset($_SESSION['460602685_Ajax_UAS_web'])) { $nbi = $_GET["nbi"]; $nama = $_GET["nama"]; $kelamin = $_GET["kelamin"]; $alamat = $_GET["alamat"]; $telp = $_GET["telp"]; $sql = mysql_query("insert into mahasiswa (nbi, nama, kelamin, alamat, telp) values ('$nbi','$nama','$kelamin','$alamat','$telp')",$con); echo "Your data below succesfully added<table> <tr> <td>Nbi </td> <td> : </td> <td>$nbi</td> </tr> <tr><td>Nama </td> <td> : </td> <td>$nama</td> </tr> <tr> <td>Kelamin </td> <td> : </td> <td>$kelamin</td> </tr> <tr> <td>Alamat </td> <td> : </td> <td>$alamat</td> </tr> <tr> <td>Telp </td> <td> : </td> <td>$telp</td> </tr> </table>"; } else { echo "login first please"; }

echo "login first please"; }

} if ($cmd=="showName") { sleep(1); //memberikan delay 1 detik agar gambar loading imagenya kelihatan echo "<a href='#' onClick='showMhs(0)'>Tampilkan semua<a/><table border='1' width='100%'> <tr> <th width='10'>NBI</th> <th width='200'>Nama</th> <th>Kelamin</th> <th>Alamat</th> <th>Telp</th> </tr>"; $sql="select * from mahasiswa where nama like '%".$q."%' order by nbi limit 8"; $result = mysql_query($sql); if (mysql_num_rows($result)==0) { echo "<td colspan='5'>Data yang dimaksud tidak ada</td>"; } while ($row = mysql_fetch_array($result)) { echo "<tr> <td>".$row['nbi']."</td> <td>".$row['nama']."</td> <td>".$row['kelamin']."</td> <td>".$row['alamat']."</td>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

12

<td>".$row['telp']."</td> </tr>"; } echo "</table>"; } if ($cmd=="showMhs") { if ($q>0) { $page = $q+1; $limit_front = ($page*8)-8; $limit_last = ($page*8); } else { $limit_front = 0; $limit_last = 8; } $sql="select count(*) as jumlah from mahasiswa"; $result = mysql_query($sql); $data=mysql_fetch_array($result); $total = $data['jumlah']; $jml_hal = bcdiv($total,8,0)+1; $sql="select * from mahasiswa order by nbi asc limit $limit_front,8"; $result = mysql_query($sql); echo "<form>Cari berdasar nama : <input type='type' name='name' onKeyUp='showName(this.value)' class='inputbok3'></form> <div id='txtCenter'>"; $page = $q+1; $prev = $page-2; $next = $page; if ($page>1) { echo "<a href='#' onClick='showMhs($prev)'><- Prev</a>"; } else { echo "<- Prev"; } echo " page $page of $jml_hal "; if (mysql_num_rows($result)==8) { echo "<a href='#' onClick='showMhs($next)'>Next -></a>"; } else { echo "Next ->"; } echo "<table border='1' width='100%'> <tr> <th>NBI</th> <th>Nama</th> <th>Kelamin</th> <th>Alamat</th> <th>Telp</th> </tr>"; while ($row = mysql_fetch_array($result)) { echo "<tr> <td>".$row['nbi']."</td> <td>".$row['nama']."</td> <td>".$row['kelamin']."</td> <td>".$row['alamat']."</td> <td>".$row['telp']."</td> </tr>"; } echo "</table></div>"; } if ($cmd=="showNameEdit") { echo "<a href='#' onClick='showMhs(0)'>Tampilkan semua<a/><table border='1' width='100%'> <tr> <th>Edit</th>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

13

<th width='10'>NBI</th> <th width='200'>Nama</th> <th>Kelamin</th> <th>Alamat</th> <th>Telp</th> </tr>"; $sql="select * from mahasiswa where nama like '%".$q."%' order by nbi limit 8"; $result = mysql_query($sql); if (mysql_num_rows($result)==0) { echo "<td colspan='5'>Data yang dimaksud tidak ada</td>"; } while ($row = mysql_fetch_array($result)) { echo "<tr> <td><a href='#' onclick='editMhsGo(".$row['nbi'].")'>Edit</a> <td>".$row['nbi']."</td> <td>".$row['nama']."</td> <td>".$row['kelamin']."</td> <td>".$row['alamat']."</td> <td>".$row['telp']."</td> </tr>"; } echo "</table>"; } if ($cmd=="editMhs") { if (isset($_SESSION['460602685_Ajax_UAS_web'])) { if ($q>0) { $page = $q+1; $limit_front = ($page*8)-8; $limit_last = ($page*8); } else { $limit_front = 0; $limit_last = 8; } $sql="select count(*) as jumlah from mahasiswa"; $result = mysql_query($sql); $data=mysql_fetch_array($result); $total = $data['jumlah']; $jml_hal = bcdiv($total,8,0)+1; $sql="select * from mahasiswa order by nbi asc limit $limit_front,8"; $result = mysql_query($sql); echo "<form>Cari berdasar nama : <input type='type' name='name' onKeyUp='showNameEdit(this.value)' class='inputbok3'></form> <div id='txtCenter'>"; $page = $q+1; $prev = $page-2; $next = $page; if ($page>1) { echo "<a href='#' onClick='editMhs($prev)'><- Prev</a>"; } else { echo "<- Prev"; } echo " page $page of $jml_hal "; if (mysql_num_rows($result)==8) { echo "<a href='#' onClick='editMhs($next)'>Next -></a>"; } else { echo "Next ->"; } echo "<table border='1' width='100%'> <tr> <th>Edit</th>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

14

<th>NBI</th> <th>Nama</th> <th>Kelamin</th> <th>Alamat</th> <th>Telp</th> </tr>"; while ($row = mysql_fetch_array($result)) { echo "<tr> <td><a href='#' onclick=editMhsGo(".$row['nbi'].")>Edit</a></td> <td>".$row['nbi']."</td> <td>".$row['nama']."</td> <td>".$row['kelamin']."</td> <td>".$row['alamat']."</td> <td>".$row['telp']."</td> </tr>"; } echo "</table></div><div id='txtEdit'></div>"; } else { echo "Please login first"; } } if ($cmd=="editMhsGo") { if (isset($_SESSION['460602685_Ajax_UAS_web'])) { $sql="select * from mahasiswa where nbi=$q"; $result = mysql_query($sql); $data=mysql_fetch_array($result); ?> <div id="txtAdd"><form method="GET"> <table> <tr> <td>Nbi </td> <td> : </td> <td><input type="text" name="nbi" size="30" class="inputbok3" value="<? echo $data['nbi']; ?>"></td> </tr> <tr><td>Nama </td> <td> : </td> <td><input type="text" name="nama" size="30" class="inputbok3" value="<? echo $data['nama']; ?>"></td> </tr> <tr> <td>Kelamin </td> <td> : </td> <td> <select name="kelamin"> <? if ($data['kelamin']=="L") { ?> <option value="L" <? echo "selected" ?>>Laki laki</option> <option value="P">Perempuan</option> <? } if ($data['kelamin']=="P") { ?> <option value="L">Laki laki</option> <option value="P" <? echo "selected" ?>>Perempuan</option> <? } ?> </select> </td> </tr> <tr> <td>Alamat </td> <td> : </td> <td><input type="text" name="alamat" size="30" class="inputbok3" value="<? echo $data['alamat']; ?>"></td>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

15

</tr> <tr> <td>Telp </td> <td> : </td> <td><input type="text" name="telp" size="30" class="inputbok3" value="<? echo $data['telp']; ?>"></td> </tr> <tr> <td colspan="3"><input type="hidden" name="old_nbi" value="<? echo $data['nbi']; ?>"><input type="button" name="submit" value="Update" onClick="editMhsSave(nbi.value,nama.value,kelamin.value,alamat.value,telp.value,old_nbi. value)" class="inputbok3"></td> </tr> </table></form></div><div id="txtEditSave"> </div> <? } else { echo "Please login first"; }

} if ($cmd=="editMhsSave") { if (isset($_SESSION['460602685_Ajax_UAS_web'])) { $old_nbi = $_GET["old_nbi"]; $nbi = $_GET["nbi"]; $nama = $_GET["nama"]; $kelamin = $_GET["kelamin"]; $alamat = $_GET["alamat"]; $telp = $_GET["telp"]; $sql = mysql_query("update mahasiswa set nbi='$nbi', nama='$nama', kelamin='$kelamin', alamat='$alamat', telp='$telp' where nbi='$old_nbi'",$con); echo "Your data below succesfully updated<table> <tr> <td>Nbi </td> <td> : </td> <td>$nbi</td> </tr> <tr><td>Nama </td> <td> : </td> <td>$nama</td> </tr> <tr> <td>Kelamin </td> <td> : </td> <td>$kelamin</td> </tr> <tr> <td>Alamat </td> <td> : </td> <td>$alamat</td> </tr> <tr> <td>Telp </td> <td> : </td> <td>$telp</td> </tr> </table>"; } else { echo "login first please"; } } if ($cmd=="showNameDel") { echo "<a href='#' onClick='delMhs(0)'>Tampilkan semua<a/><table border='1' width='100%'> <tr> <th width='10'>Delete</th> <th width='10'>NBI</th> <th width='200'>Nama</th>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

16

<th>Kelamin</th> <th>Alamat</th> <th>Telp</th> </tr>"; $sql="select * from mahasiswa where nama like '%".$q."%' order by nbi limit 8"; $result = mysql_query($sql); if (mysql_num_rows($result)==0) { echo "<td colspan='6'>Data yang dimaksud tidak ada</td>"; } while ($row = mysql_fetch_array($result)) { echo "<tr> <td><a href='#' onclick='delMhsGo(".$row['nbi'].")'>Delete</a></td> <td>".$row['nbi']."</td> <td>".$row['nama']."</td> <td>".$row['kelamin']."</td> <td>".$row['alamat']."</td> <td>".$row['telp']."</td> </tr>"; } echo "</table>"; } if ($cmd=="delMhs") { if (isset($_SESSION['460602685_Ajax_UAS_web'])) { if ($q>0) { $page = $q+1; $limit_front = ($page*8)-8; $limit_last = ($page*8); } else { $limit_front = 0; $limit_last = 8; } $sql="select count(*) as jumlah from mahasiswa"; $result = mysql_query($sql); $data=mysql_fetch_array($result); $total = $data['jumlah']; $jml_hal = bcdiv($total,8,0)+1; $sql="select * from mahasiswa order by nbi asc limit $limit_front,8"; $result = mysql_query($sql); echo "<form>Cari berdasar nama : <input type='type' name='name' onKeyUp='showNameDel(this.value)' class='inputbok3'></form> <div id='txtCenter'>"; $page = $q+1; $prev = $page-2; $next = $page; if ($page>1) { echo "<a href='#' onClick='delMhs($prev)'><- Prev</a>"; } else { echo "<- Prev"; } echo " page $page of $jml_hal "; if (mysql_num_rows($result)==8) { echo "<a href='#' onClick='delMhs($next)'>Next -></a>"; } else { echo "Next ->"; } echo "<table border='1' width='100%'> <tr> <th>Delete</th> <th>NBI</th> <th>Nama</th>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

17

<th>Kelamin</th> <th>Alamat</th> <th>Telp</th> </tr>"; while ($row = mysql_fetch_array($result)) { echo "<tr> <td><a href='#' onclick=delMhsGo(".$row['nbi'].")>Delete</a></td> <td>".$row['nbi']."</td> <td>".$row['nama']."</td> <td>".$row['kelamin']."</td> <td>".$row['alamat']."</td> <td>".$row['telp']."</td> </tr>"; } echo "</table></div>"; } else { echo "Please login first"; } } if ($cmd=="delMhsGo") { session_start(); if (isset($_SESSION['460602685_Ajax_UAS_web'])) { $sql="delete from mahasiswa where mahasiswa.nbi=$q"; $result = mysql_query($sql); echo "data NBI \"$q\" berhasil dihapus"; } else { echo "login first please"; } } if ($cmd=="Login") { $user = $_GET["user"]; $pass = $_GET["pass"]; $pass = md5($pass); session_start(); $sql = mysql_query("select count(*) as login from user where username='$user' and password='$pass'",$con); $row = mysql_fetch_array($sql); if ($row[login]=="1") { $_SESSION['460602685_Ajax_UAS_web']=$user; $username =$_SESSION['460602685_Ajax_UAS_web']; echo "<div id='txtLogin'><table width='100%' border='0' cellpadding='1' cellspacing='1' bgcolor='#F1F4F6' style='border-top:1px solid #cccccc'> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'>&raquo;&nbsp;hello <u>$username</u></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='addMhs()'>Add Mahasiswa</a></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='editMhs()'>Edit Mahasiswa</a></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

18

<td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='delMhs(0)'>Delete Mahasiswa</a></td> <td width='5'>&nbsp;</td> </tr> <tr align='left'> <td width='1' height='16' valign='middle'>&nbsp;</td> <td width='144' class='tdlink'><img src='images/kotak.jpg' width='5' height='5'> <a href='#' class='ular' onClick='Logout()'>Logout !!</a></td> <td width='5'>&nbsp;</td> </tr> </table></div>"; } else { echo "<div align='center'>username / password salah</div>"; echo "<div id='txtLogin'><form style='margin-top:0px;margin-left:0px;marginright:0px;margin-right:0px' method='get'><table width='100%' align='center' style='border-top:1px solid #cccccc'> <tr> <td><div align='left'>Username</div></td> <td>:</td> <td><input type='text' size='12' name='username' class='inputbok3'> </td> </tr> <tr> <td><div align='left'>Password</div></td> <td>:</td> <td><input type='password' size='12' name='password' class='inputbok3'> </td> </tr> <tr align='center'> <td height='22' colspan='3'><input type='button' name='submit' value='Login' class='inputbok3' onClick='Login(username.value,password.value)'> <input type='reset' value='Reset' name='reset' class='inputbok3'> </td> </tr> </table> </form>"; } } if ($cmd=="Logout") { session_start(); session_destroy(); echo "<div align='center'>anda telah logout</div>"; echo "<div id='txtLogin'><form style='margin-top:0px;margin-left:0px;marginright:0px;margin-right:0px' method='get'><table width='100%' align='center' style='border-top:1px solid #cccccc'> <tr> <td><div align='left'>Username</div></td> <td>:</td> <td><input type='text' size='12' name='username' class='inputbok3'> </td> </tr> <tr> <td><div align='left'>Password</div></td> <td>:</td> <td><input type='password' size='12' name='password' class='inputbok3'> </td> </tr> <tr align='center'> <td height='22' colspan='3'><input type='button' name='submit' value='Login' class='inputbok3' onClick='Login(username.value,password.value)'> <input type='reset' value='Reset' name='reset' class='inputbok3'> </td> </tr> </table> </form>"; } mysql_close($con); ?>

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

19

Isi dari style.css :

body { SCROLLBAR-FACE-COLOR:#F9FEFF; SCROLLBAR-HIGHLIGHT-COLOR:#000000; SCROLLBAR-SHADOW-COLOR:#87BDE9; SCROLLBAR-ARROW-COLOR:#F8A298; SCROLLBAR-TRACK-COLOR:#F9CECC; background-repeat: no-repeat; background-position: right bottom;

} .tdlink { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; BORDER-TOP: #D1D5D9 1px solid; } td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #030303; } .inputbok3 { margin-top : 1px; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; FONT-SIZE: 11px; BACKGROUND: #FCFCFC; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; } A:link { FONT-SIZE: 10px; COLOR: #152FE3; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A:visited { FONT-SIZE: 10px; COLOR: #152FE3; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A:hover { FONT-SIZE: 10px; COLOR: #152FE3; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: underline; } A:active { FONT-SIZE: 10px; COLOR: #CF4B3D; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A.ular:link {; FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A.ular:visited { FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A.ular:hover { FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION:underline; } A.ular:active { FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A.ular2:link { FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #343740; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular2:visited {

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

20

FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #343740; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular2:hover { FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #343740; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular2:active { FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #343740; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular3:link { FONT-SIZE: 10px; COLOR: #fd7e21; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; } A.ular3:visited { FONT-SIZE: 10px; COLOR: #fd7e21; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; } A.ular3:hover { FONT-SIZE: 10px; COLOR: #0066ff; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: underline; } A.ular3:active { FONT-SIZE: 10px; COLOR: #0066ff; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; } A.ular4:link { FONT-WEIGHT: none; FONT-SIZE: 10px; COLOR: #0000AA; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular4:visited { FONT-WEIGHT: none; FONT-SIZE: 10px; COLOR: #CCCCCC; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular4:hover { FONT-WEIGHT: none; FONT-SIZE: 10px; COLOR: #0000AA; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline; } A.ular4:active { FONT-WEIGHT: none; FONT-SIZE: 10px; COLOR: #0066ff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } A.ular5:link { FONT-SIZE: 10px; COLOR: #152FE3; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A.ular5:visited { FONT-SIZE: 10px; COLOR: #152FE3; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } A.ular5:hover { FONT-SIZE: 10px; COLOR: #152FE3; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: underline; } A.ular5:active { FONT-SIZE: 10px; COLOR: #CF4B3D; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; TEXT-DECORATION: none; } .button { BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; BORDER-LEFT: #999999 1px solid; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #a2a2a2 } select { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; }

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

21

Desain web kita akan berbentuk seperti gambar dibawah :

Gambar 3. tampilan website Dari gambar 3, aplikasi kita terdiri dari 6 layer interface antara lain : 1. Home / halaman utama, berisi ucapan selamat datang kepada pengakses situs, ditampilkan pertama kali 2. Tampilkan data, yaitu ketika user mengklik link Data Mahasiswa pada menu kiri, penampilan data inipun masih dibagi menjadi 2 sub yaitu a. menampilkan semua data, pada menu ini juga terdapat link yang bekerja pada layer ajax yaitu <- Prev & Next ->. bertujuan untuk berpindah antar halaman.

Gambar 4. tampilkan semua data b. menampilkan data sesuai dengan pencarian dari search box

Gambar 5a. cari data dengan animasi loading

Gambar 5b. proses pencarian selesai, tampilkan data sesuai kriteria

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

22

3. Proses otentikasi (baik login maupun logout). Yaitu proses memasukkan username & password pada form login yang diinputkan oleh client, yang kemudian dilanjutkan dengan membandingkan isi dari tabel hak akses oleh komputer server. Output dari proses ini ada 3 yaitu a. Login gagal, terjadi apabila username & password yang dimasukkan salah / tidak sesuai dengan isi tabel hak akses.

Gambar 6. login gagal b. Login berhasil, apabila data yang diinputkan pada form sesuai dengan isi tabel hak akses, maka ajax akan mengirimkan menu admin. *notes : gunakan username 460602685, password arif karena apabila anda melihat pada tabel user yang dibuat, password akan muncul sebagai 0ff6c3ace16359e41e37d40b8301d67f dikarenakan password arif tersebut dienkripsi menggunakan fungsi MD5.

Gambar 7. login berhasil c. Logout, yaitu proses yang mengidentifikasikan bahwa user ingin keluar dari sistem aplikasi.

Gambar 8. logout 4. Menu tambah data (insert query), yaitu setelah otentikasi user berhasil, maka menu tambah data dapat diakses, begitu juga sebaliknya, apabila user belum login, maka tidak dapat mengakses halaman ini. Tampilannya antara lain : a. Form input data

Gambar 9. tambah data

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

23

b. Setelah selesai input, user klik tombol tambah

Gambar 10. tambah data sukses 5. Menu edit data (update query), yaitu dimana user ingin mengganti data yang lama dengan data yang baru pada suatu record. Pada menu ini juga terdapat fasilitas search untuk mempermudah proses pencarian terhadap record tertentu. Prosesnya dibagi menjadi 3 yaitu : a. Pilih data yang ingin diedit

Gambar 11. pilih data yang ingin diedit b. Menampilkan form edit data sesuai dengan record yang dipilih. Pada contoh diatas kita coba ganti data dengan merubah nama dari Imam Musafir menjadi Imam Musafir Al Baihaqi.

Gambar 12. form update data

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

24

c. Menampilkan output / hasil dari penggantian yang telah kita lakukan

Gambar 13. data selesai diganti 6. Hapus data (delete query), yaitu proses menghapus suatu record. Pada menu ini juga terdapat fasilitas search untuk mempermudah proses pencarian terhadap record tertentu. Tampilannya : a. Pilih data yang ingin dihapus :

Gambar 14. pilih data yang ingin dihapus b. Menampilkan pesan bahwa data berhasil dihapus Gambar 15. data berhasil dihapus

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

25

Penutup
Akhir kata tiada gading yang tak retak, begitu pula dengan kreasi manusia. Besar harapan, ilmu yang disampaikan dapat berguna bagi kita semua. Apabila ada kesalahan program / bug, saran, kritik, pujian, masukan (kecuali cacian :P) silahkan dikirim ke alamat email lord_arief@yahoo.com, atau melalui blog di : http://arief.aeroven.com Semua program diatas dapat didownload secara gratis di alamat : http://arief.aeroven.com/download/ajax_untag.zip

Referensi
http://arief.aeroven.com/2008/07/21/an-introduction-tutorial-to-ajax-asynchronousjavascript-and-xml/ Andi Sunyoto, M.Kom, AJAX, membangun web dengan teknologi Asynchronous Javascript And XML, Penerbit Andi, Jogjakarta, Agustus 2007. http://www.adaptivepath.com/ideas/essays/archives/000385.php http://en.wikipedia.org/wiki/Ajax_(programming) http://webdesign.about.com/od/ajax/a/aa101705.htm

Biografi Penulis
Muhammad Syarifuddin. Putra daerah asli kota Ngawi kelahiran tahun 1987, Menyelesaikan sekolah di SMK Telkom Malang jurusan teknik informatika tahun 2005. Saat ini bekerja sebagai Network Engineer di Indosat Surabaya, sedangkan pada sore harinya melanjutkan kuliah dengan jurusan yang sama di Universitas 17 Agustus 1945 Surabaya angkatan 2006. Sangat mencintai pemrograman PHP dan database MySQL termasuk teknologi yang terus berkembang didalamnya, suka menulis & berbagi ilmu pengetahuan. Tulisan-tulisannya mengenai AJAX, PHP, Delphi, MySQL, MSSQL server, Linux, dll dapat didownload secara gratis di http://arief.aeroven.com YM & email : lord_arief@yahoo.com :)

Komunitas eLearning IlmuKomputer.Com Copyright 2003-2007 IlmuKomputer.Com

26