Arief Ajaxkemahasiswaan

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

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 :

-- 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,
àlamat` 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`, àlamat`, `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'),

(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 ùser`
-CREATE TABLE ùser` (
ùsername` varchar(50) collate latin1_general_ci NOT NULL,
`password` varchar(100) collate latin1_general_ci NOT NULL,
PRIMARY KEY (ùsername`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
--- Dumping data for table ùser`
-INSERT INTO ùser` (ùsername`, `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"> </td>
<td background="images/menu-bg.gif"><b><font
color="#FFFFFF">Admin</font></b></td>

<td width="2" background="images/menu-bg.gif"> </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'> </td>
<td width='144' class='tdlink'>» hello
<u>$username</u></td>
<td width='5'> </td>
</tr>
<tr align='left'>
<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>
</tr>
<tr align='left'>
height='5'> <a href='#' class='ular' onClick='editMhs(0)'>Edit Mahasiswa</a></td>
</tr>
<tr align='left'>
height='5'> <a href='#' class='ular' onClick='delMhs(0)'>Delete Mahasiswa</a></td>
</tr>
<tr align='left'>
height='5'> <a href='#' class='ular' onClick='Logout(0)'>Logout !!</a></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>
<tr>


color="#FFFFFF">Menu</font></b></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"> </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"> </td>
</tr>
<tr>
<td> </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> </td>
</tr>
</table>
<tr>
<td background="images/menu-bg.gif"> </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>
color="#FFFFFF">Homepage</font></b></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"> </td>
<td bgcolor="#F1F4F6" align="center" style="border-left:1px solid #cccccc">
<br>
© Copyright Muhammad Syarifuddin / 460602685 - <a
href="http://arief.aeroven.com" class="ular5">http://arief.aeroven.com</a> ®
2008<br>
<br><br><br>
</td>
</tr>
</table>
</body>
</html>

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()
{
if (xmlHttp==null)
{
}
url=url+"?cmd=Logout"
xmlHttp.onreadystatechange=stateChangedLogin
xmlHttp.send(null)
}
function Home()
{
if (xmlHttp==null)
{
}
url=url+"?cmd=Home"
//url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.send(null)
}
function addMhs()
{
if (xmlHttp==null)
{
}
url=url+"?cmd=addMhs"
xmlHttp.send(null)
}
function addMhsGo(nbi,nama,kelamin,alamat,telp)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=addMhsGo&nbi="+nbi
url=url+"&nama="+nama

url=url+"&kelamin="+kelamin
url=url+"&alamat="+alamat
url=url+"&telp="+telp
//window.alert('url')
xmlHttp.onreadystatechange=stateChangedCenter
xmlHttp.send(null)
}
function editMhs(str)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=editMhs&q="+str
xmlHttp.send(null)
}
function editMhsGo(str)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=editMhsGo&q="+str
xmlHttp.send(null)
}
function editMhsSave(nbi,nama,kelamin,alamat,telp,old_nbi)
{
if (xmlHttp==null)
{
}
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
//window.alert('url')
xmlHttp.onreadystatechange=stateChangedEditSave
xmlHttp.send(null)
}
function showNameEdit(str)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=showNameEdit&q="+str
xmlHttp.send(null)
}
function delMhs(str)
{

if (xmlHttp==null)
{
}
url=url+"?cmd=delMhs&q="+str
xmlHttp.send(null)
}
function showNameDel(str)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=showNameDel&q="+str
xmlHttp.send(null)
}
function delMhsGo(nbi)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=delMhsGo&q="+nbi
xmlHttp.send(null)
}
function showMhs(str)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=showMhs&q="+str
xmlHttp.send(null)
}
function showName(str)
{
if (xmlHttp==null)
{
}
url=url+"?cmd=showName&q="+str
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}
}
function stateChangedLogin()
{
{
document.getElementById("txtLogin").innerHTML=xmlHttp.responseText
}
}
function stateChangedCenter()
{
{
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()
{
{
document.getElementById("txtEdit").innerHTML=xmlHttp.responseText
}
}
function stateChangedEditSave()
{
{
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;
}

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")
{
{
?>
<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>

11
</table></form></div><div id="txtCenter"> </div>

<?
}
else
{
echo "login first please";
}
}
if ($cmd=="addMhsGo")
{
{
$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
{
}
}
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))

12
{
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>";
}
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";
$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";
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 ";
{
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>";
{
echo "<tr>
</tr>";
}
echo "</table></div>";

13
}
if ($cmd=="showNameEdit")
{
echo "<a href='#' onClick='showMhs(0)'>Tampilkan semua<a/><table border='1'
width='100%'>
<tr>
<th>Edit</th>
<th>Kelamin</th>
<th>Alamat</th>
<th>Telp</th>
</tr>";
{
}
{
echo "<tr>
<td><a href='#' onclick='editMhsGo(".$row['nbi'].")'>Edit</a>
</tr>";
}
echo "</table>";
}
if ($cmd=="editMhs")
{
{
if ($q>0)
{
$page = $q+1;
}
else
{
$limit_front = 0;
$limit_last = 8;
}
onKeyUp='showNameEdit(this.value)' class='inputbok3'></form>
$page = $q+1;
$prev = $page-2;
$next = $page;
if ($page>1)
{
echo "<a href='#' onClick='editMhs($prev)'><- Prev</a>";
}
else
{
echo "<- Prev";
}
{
echo "<a href='#' onClick='editMhs($next)'>Next -></a>";

14
}
else
{
echo "Next ->";
}
<tr>
<th>Edit</th>
<th>NBI</th>
<th>Nama</th>
<th>Kelamin</th>
<th>Alamat</th>
<th>Telp</th>
</tr>";
{
echo "<tr>
<td><a href='#' onclick=editMhsGo(".$row['nbi'].")>Edit</a></td>
</tr>";
}
echo "</table></div><div id='txtEdit'></div>";
}
else
{
echo "Please login first";
}
}
if ($cmd=="editMhsGo")
{
{
$sql="select * from mahasiswa where nbi=$q";
?>
<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>
<?
}

15
?>
</select>
</td>
</tr>
<tr>
<td>Alamat </td>
<td> : </td>
<td><input type="text" name="alamat" size="30" class="inputbok3"
value="<? echo $data['alamat']; ?>"></td>
</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
{
}
}
if ($cmd=="editMhsSave")
{
{
$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
{

16
}
}
if ($cmd=="showNameDel")
{
echo "<a href='#' onClick='delMhs(0)'>Tampilkan semua<a/><table border='1'
width='100%'>
<tr>
<th width='10'>Delete</th>
<th>Kelamin</th>
<th>Alamat</th>
<th>Telp</th>
</tr>";
{
}
{
echo "<tr>
<td><a href='#' onclick='delMhsGo(".$row['nbi'].")'>Delete</a></td>
</tr>";
}
echo "</table>";
}
if ($cmd=="delMhs")
{
{
if ($q>0)
{
$page = $q+1;
}
else
{
$limit_front = 0;
$limit_last = 8;
}
onKeyUp='showNameDel(this.value)' class='inputbok3'></form>
$page = $q+1;
$prev = $page-2;
$next = $page;
if ($page>1)
{
echo "<a href='#' onClick='delMhs($prev)'><- Prev</a>";
}
else
{
echo "<- Prev";
}
{

17
echo "<a href='#' onClick='delMhs($next)'>Next -></a>";

}
else
{
echo "Next ->";
}
<tr>
<th>Delete</th>
<th>NBI</th>
<th>Nama</th>
<th>Kelamin</th>
<th>Alamat</th>
<th>Telp</th>
</tr>";
{
echo "<tr>
<td><a href='#' onclick=delMhsGo(".$row['nbi'].")>Delete</a></td>
</tr>";
}
echo "</table></div>";
}
else
{
}
}
if ($cmd=="delMhsGo")
{
session_start();
{
$sql="delete from mahasiswa where mahasiswa.nbi=$q";
echo "data NBI \"$q\" berhasil dihapus";
}
else
{
}
}
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='144' class='tdlink'>» hello
<u>$username</u></td>
</tr>
<tr align='left'>

18

height='5'> <a href='#' class='ular' onClick='addMhs()'>Add Mahasiswa</a></td>
</tr>
<tr align='left'>
height='5'> <a href='#' class='ular' onClick='editMhs()'>Edit Mahasiswa</a></td>
</tr>
<tr align='left'>
height='5'> <a href='#' class='ular' onClick='delMhs(0)'>Delete Mahasiswa</a></td>
</tr>
<tr align='left'>
height='5'> <a href='#' class='ular' onClick='Logout()'>Logout !!</a></td>
</tr>
</table></div>";
}
else
{
echo "<div align='center'>username / password salah</div>";
<tr>
<td>:</td>
</td>
</tr>
<tr>
<td>:</td>
</td>
</tr>
<tr align='center'>
</td>
</tr>
</table>
</form>";
}
}
if ($cmd=="Logout")
{
session_start();
session_destroy();
echo "<div align='center'>anda telah logout</div>";
<tr>
<td>:</td>
</td>
</tr>
<tr>
<td>:</td>
</td>
</tr>

19
<tr align='center'>
</td>
</tr>
</table>
</form>";
}
mysql_close($con);
?>
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,
serif; TEXT-DECORATION: none;
}
A:visited {
}
A:hover {
serif; TEXT-DECORATION: underline;
}
A:active {
FONT-SIZE: 10px; COLOR: #CF4B3D; FONT-FAMILY: Verdana,
}
A.ular:link {;
FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana,
}
A.ular:visited {
FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana,
}
A.ular:hover {

Arial, Helvetica, sans-
20
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 {
}
A.ular2:hover {
}
A.ular2:active {
}
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,
}
A.ular4:visited {
FONT-WEIGHT: none; FONT-SIZE: 10px; COLOR: #CCCCCC; FONT-FAMILY: Verdana,
}
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,
}
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 {

21
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;
}
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

22
Gambar 5a. cari data dengan animasi loading
Gambar 5b. proses pencarian selesai, tampilkan data sesuai kriteria
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

23
Gambar 9. tambah data
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.

24
Gambar 12. form update data
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

25
b. Menampilkan pesan bahwa data berhasil dihapus

Gambar 15. data berhasil dihapus
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

26
YM & email : lord_arief@yahoo.com :)

27

Arief Ajaxkemahasiswaan

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Arief Ajaxkemahasiswaan

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial database kemahasiswaan

menggunakan teknologi AJAX, PHP,

Gambar 1. metode tradisional

Komunitas eLearning IlmuKomputer.Com

tukar menukar data antara client & server.

Gambar 2. metode AJAX

Komunitas eLearning IlmuKomputer.Com

-- phpMyAdmin SQL Dump

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

<td width="2" background="images/menu-bg.gif">&nbsp;</td>

Komunitas eLearning IlmuKomputer.Com

<td width="10" height="20" background="images/menu-bg.gif">&nbsp;</td>

Komunitas eLearning IlmuKomputer.Com

Source code dari ajaxlib.js :

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Sourcecode dari fetcher.php :

Komunitas eLearning IlmuKomputer.Com

</table></form></div><div id="txtCenter"> </div>

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

echo "<a href='#' onClick='delMhs($next)'>Next -></a>";

Komunitas eLearning IlmuKomputer.Com

<td width='144' class='tdlink'><img src='images/kotak.jpg' width='5'

Komunitas eLearning IlmuKomputer.Com

Isi dari style.css :

Komunitas eLearning IlmuKomputer.Com

Arial, Helvetica, sans-

Arial, Helvetica, sans-

Arial, Helvetica, sans-

Arial, Helvetica, sans-

Arial, Helvetica, sans-

Arial, Helvetica, sans-

Komunitas eLearning IlmuKomputer.Com

BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #999999 1px

Desain web kita akan berbentuk seperti gambar dibawah :

Gambar 3. tampilan website

Gambar 4. tampilkan semua data

Komunitas eLearning IlmuKomputer.Com

Gambar 5a. cari data dengan animasi loading

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

Gambar 6. login gagal

Gambar 7. login berhasil

Komunitas eLearning IlmuKomputer.Com

Gambar 9. tambah data

b. Setelah selesai input, user klik tombol tambah

Gambar 10. tambah data sukses

Gambar 11. pilih data yang ingin diedit

Komunitas eLearning IlmuKomputer.Com

Gambar 12. form update data

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

Gambar 13. data selesai diganti

Gambar 14. pilih data yang ingin dihapus

b. Menampilkan pesan bahwa data berhasil dihapus

Komunitas eLearning IlmuKomputer.Com

YM & email : lord_arief@yahoo.com :)

<td width="2" background="images/menu-bg.gif"> </td>

<td width="10" height="20" background="images/menu-bg.gif"> </td>