nah.....kali ini kita bakalan buat aplikasi kecil-kecilan dengan menggunakan AJAX. sebelum masuk ke aplikasi, kita bahas dulu ya mengenai apa itu AJAX.
AJAX adalah singkatan dari Asynchronous Javascript and XmlHTTP,yaitu suatu teknik pemrogramman web untunk menciptakan web yang interaktif. Tujuannya adalah memindahkan sebagian interaksi pada computer web surfer, melakukan pertukaran data di belakang layar sehingga halaman web tidak harus membaca ulang halaman setiap ada perubahan dari pengguna. Hal ini membuat web kita lebih interaktif, cepat dan usability.
masuk ke aplikasi pertama kita definisikan dulu tools yang kita gunakan :
- xampp sebagai apache server dan mysqlnya
- editor terserah mana yang menurut anda bagus dalam hal ini saya pakai eclipse
- pastikan xampp anda sudah ter-Install dalam PC/laptop dan apache, mySql sudah runnning
<?php
$local="localhost";
$user="root";
$pass="";
$db="testing";
$connect=mysql_connect($local,$user,$pass);
if($connect){
mysql_select_db($db);
}
else {
die("Koneksi Database Error !");
}
?>2. buat lah file dengan nama index.php berikut coding nya :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>AJAX </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var nocache = Math.random();
$('#loading').ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
});
$('#form-satu').submit(function() {
nocache = Math.random();
$.ajax({
type: 'GET',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
$('#content').load('lihat-data.php?nocache='+nocache);
document.form_satu.reset();
}
})
return false;
});
$('#content').load('lihat-data.php?nocache='+nocache); return false;
});
/* script jquery untuk delete data*/
// untuk menghapus baris atau data pada table pegawai
function deleteRow(ID){ // ID dari record pegawai dikirimkan sebagai parameter
$.post(
'delete.php',
{nim: ID},
function(response){
if(response == 'ok') // jika respon dari delete.php adalah 'ok'
$('#tr'+ID).remove(); // hapus 1 baris
else
alert('Delete gagal');
}
);
}
</script>
<style type="text/css">
body{
background:#B1D000;
color:#09008e;
font-family:"Lucida Grande", "Lucida Sans Unicode",Verdana, Arial, Helvetica,
sans-serif;
font-size:11px;
}
a:hover {
text-decoration:underline;
color:#cc0000;
}
label{display:block; margin-bottom:2px;}
.box, #content {
width: 300px;
padding: 10px;
background-color: #DDEEF6;
border: 1px solid #DDEEF6;
margin-bottom:20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.input {
margin: 2px auto;
color: #333;
width: 150px;
background-color: #FFF;
border: 1px solid #AACCEE;
padding:6px;
margin-bottom:10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
button{
border:0; margin:0; padding:0;
background:#33B9F3;
border:solid 1px #3399DD;
color:#FFFFFF;
font-weight:bold;
padding:4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#loading {
position:absolute;
left:0;
top:0;
background-color: #F72811;
padding: 5px 10px;
font: 12px Arial;
color:#FFF;
}
</style>
</head>
<body><center>
<div id="loading">Loading...</div>
<div class="box" >
<label><font size="3" face="arial" color="red">Aplikasi Input Data Mahasiswa
</font><br></br></label>
<hr/>
<p align="left">
<a href="cari.html" >
<input type="button" class="button" value="Pencarian"></a></p>
</div>
<div class="box"><p align="left">
<div id="result"></div>
<form name="form_satu" id="form-satu" action="input-data.php" method="get">
<label>Nim</label><input type="text" class="input" name="nim"/>
<label>Nama</label><input type="text" class="input" name="nama"/>
<label>Alamat</label><input type="text" class="input" name="alamat"/>
<br/>
<button type="submit">Simpan</button>
</form>
</div>
<div id="content"></div></center>
</body>
</html>
3. file input-data.php
<?php4. file lihat lihat-data.php
include 'connect.php';
// mengecek apakah field nama diisi atau tidak
if (empty($_GET['nim'])){ mysql_close($connect);
die('Nim Tidak Boleh Kosong !'); }
$nim = $_GET['nim'];
$nama = $_GET['nama'];
$alamat = $_GET['alamat'];
$sql = "INSERT INTO biodata VALUES ('$nim','$nama','$alamat')";
$result = mysql_query($sql) or die(mysql_error());
$num_rows = mysql_affected_rows();
if ($num_rows > 0){
echo '<blink>Berhasil Ditambahkan</blink>';
} else {
echo 'Gagal Ditambahkan';
}
mysql_close($connect);
?>
<style type="text/css">
table{
width:280px;
border-collapse:collapse;
}
table, td, th {
border:1px solid #98bf21;
}
th{
background-color:#A7C942;
color:#ffffff;
}
td{
padding:5px 7px 5px 5px;
}
tr:hover{
background-color:#ccff99;
}
</style>
<?php
include 'connect.php';
$sql = "SELECT * FROM biodata";
$result = mysql_query($sql);
$row_count = mysql_num_rows($result);
if ($row_count > 0){
$html = '<table>';
$html .= "<tr><th>NIM</th><th>Nama</th
><th>Alamat</th><th>Action</th></tr>";
while ($row = mysql_fetch_array($result)){
$html .= "<tr class='alt'>";
$html .= "<td>".$row['nim']."</td>";
$html .= "<td>".$row['nama']."</td>";
$html .= "<td>".$row['alamat']."</td>";
$html .= "<td align='center'>
<a href='delete.php?id=".$row["nim"]."'>".X."</a></td>";
$html .= "</tr>";
}
$html .= "</table>";
echo 'Terdapat '.$row_count.' Data';
echo ''.$html;
} else {
echo 'Tidak Ada Data !';
}
mysql_free_result($result);
mysql_close($connect);
?>
5. file cari.html<html>6. file delete.php
<head>
<title>Pencarian Data Mahasiswa</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="css/custom_search.css" />
<script language="javascript">
$(function(){
/* id inputan yang akan melakukan proses autocomplete adalah "suggest"
request data autocomplete menuju ke "search.php" */
$('#suggest').autocomplete('search.php',
{
/* parameter "parse" pada script ini sebenarnya adalah deklarasi ulang
dari event parse di library jquery-autocomplete.
fungsinya adalah untukmenghandle data yang diterima, karena data yang
diterima adalah Ajax maka penanganannya adalah sebagai berikut: */
parse: function(data){
var parsed = [];
for (var i=0; i < data.length; i++) {
parsed[i] = {
data: data[i],
value: data[i].nama // nama field yang dicari
};
}
return parsed;
},
/* pada parameter formatItem, kita dapat mengcustom tampilan yang
akan muncul ketika ada result dari hasil pencarian autocomplete,
kalau formatItem ini tidak di deklarasikan maka hanya akan muncul
berupa daftar nama yang terkesan kaku */
formatItem: function(data,i,max){
var str = '<div class="search_content">';
/* tampilkan foto, apabila foto kosong, maka tampilkan default unknown image
berapapun lebar foto ini, tingginya disesuaikan menjadi 50px
agar tidak menghabiskan tempat */
/*str += '<img src="'+(data.foto ? data.foto : 'cari/foto/unknown.jpeg')+'"
height="50" align="left" />';*/
/* variable "data" merupakan variable dengan tipe json atau array assosiatif
javascript 1 dimensi oleh karena itu dalam mengambil setiap pada "data" hanya
dengan "data.nama_property" */
str += '<u>Nim :'+data.nim+'</u><br />Nama :'+data.nama+
'<br />Alamat: '+data.alamat;;
str += '</div>';
return str;
},
width: 270,
/* panjang tampilan pencarian autocomplete yang akan muncul
di bawah textbox pencarian dataType: 'json' */
// tipe data yang diterima oleh library ini disetup sebagai JSON
}
).result(
/* fungsi diatas akan dipanggil setelah user memilih salah satu result
pencarian autocomplete */
function(event,data,formated){
/* variable "data" merupakan variable dengan tipe json atau array
assosiatif javascript 1 dimensi oleh karena itu dalam mengambil
setiap pada "data" hanya dengan "data.nama_property" */
$('#detail').show(); // tampilan table detail yang di hide sebelumnya
$('#nim').text(data.nim);
$('#nama').text(data.nama);
$('#alamat').text(data.alamat);
/*$('#dataFoto').attr('src',data.foto ? data.foto :
'cari/foto/unknown.jpeg');*/
}
);
});
</script>
<style type="text/css">
body{
background:#B1D000;
color:#09008e;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica,
sans-serif;
font-size:11px;
}
.box, #content {
width: 300px;
padding: 10px;
background-color: #DDEEF6;
border: 1px solid #DDEEF6;
margin-bottom:20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
</style>
</head>
<body><center>
<div class="box">Cari Nama Mahasiswa: <input type="text" id="suggest" /></div>
<div class="box">HASIL PENCARIAN<hr/>
<table id="detail" style="display:none">
<tr>
<td colspan="4"><div class="detail_title">Detail mahasiswa</div></td>
</tr>
<tr valign="top">
<!--td rowspan="5"><img src="" id="dataFoto" />
</td>-->
<td>NIM</td>
<td>:</td>
<td id="nim"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td id="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td id="alamat"></td>
</tr>
</table></div>
<div class="box" ><a href=index.html>Back to Home
</a></div></center>
</body>
</html>
<?php
isset($_GET['id']) or die('Kurang Parameter');
include 'connect.php';
$nim = $_GET['id'];
$query = mysql_query("DELETE FROM biodata WHERE nim = '$nim'");
if(mysql_affected_rows() == 1){
header('location:index.html');
}else
header('location:index.html');
?>
7. untuk jquery dan css silahkan didownload aja ya disini......8. pastikan semua file tersebut berada dalam 1 folder yang diletakkan didalam aplikasi xampp "C:\xampp\htdocs\'namafolder_anda'"
9. cara jalankan (running) nya akses melalui browser anda apakah mozilla atau IE dengan cara "localhost/namafolder_anda" pada URL browser.
10. dan jangan lupa DATABASE di IMPORT dulu ya.......dan sesuaikan nama database dengan yang ada pada coding program.
sementara tampilan coding nya panjang.......ntar kalau dapat ide dirubah lagi biar g terlalu panjang......
sekian dulu ya......semoga bermanfaat......dan ingat jangan jadi Plagiat kalau mau diposting juga........
wkwkwkwkw.....
==> download file lengkap nya disini
Selengkapnya...
