CARA MEMBUAT SHUTBOX DENGAN AJAX-JQUERY PHP MYSQL
Hallo pembaca, kita akan belajar membuat shutbox menggunakan PHP dan
MySQL, untuk mempermudah dalam pemahaman langsung saja, pertama kita buat dulu
databasenya
CREATE
DATABASE `dbshutbox`;
CREATE TABLE `dbshutbox`.`tblpesan` (
`idpesan` INT NOT NULL AUTO_INCREMENT
PRIMARY KEY ,
`nama` VARCHAR( 50 ) NOT NULL ,
`pesan` TEXT NOT NULL ,
`tanggal` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
`nama` VARCHAR( 50 ) NOT NULL ,
`pesan` TEXT NOT NULL ,
`tanggal` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE = InnoDB;
Gambar struktur tabelnya
Yang pertama kita buat skrip "shutbox.php"
---------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<link rel="stylesheet" href="main.css"
type="text/css" />
<script src="jquery-1.4.js"></script>
<script>
$(document).ready(function(){
var loading =
$("#loading");
var viewer =
$("#viewer");
function viewdata(){
viewer.hide();
loading.fadeIn();
$.ajax({
type:"POST",
url:"proses.php",
data:
"act=view",
success:
function(data){
loading.fadeOut();
viewer.html(data);
viewer.fadeIn(2000);
}
});
}
viewdata();
$("#simpan").click(function(){
var
nama = $("#nama").val();
var
pesan = $("#pesan").val();
$.ajax({
type:"POST",
url:"proses.php",
data: "act=add&nama=" + nama +
"&pesan=" + pesan,
success:
function(data){
$("#info").html(data);
viewdata();
}
});
});
});
</script>
</head>
<body>
<left>
<div
class="demo" style="width: 350px;">
<div><label>Nama
</label><input type="text"
id="nama"></div><br />
<div><label>Pesan
</label><textarea type="text"
id="pesan"></textarea></div><br />
<div><input
type="submit" value="Simpan"
id="simpan"></div>
</div>
<div
id="info"></div>
</left>
<div
id="container">
<span
class="clear"></span>
<div
class="content">
<h2>PESAN
TERKINI </h2>
<div
id="loading"><img src="loading.gif" /></div>
<ul id="viewer"></ul>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
Yang kedua kita buat skrip proses.php
---------------------------------------------------------------------------------------------------------------------------------
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbshutbox");
if
($_POST['act']=='view'){
$view=mysql_query("SELECT
* FROM tblpesan ORDER BY idpesan DESC");
while($data=mysql_fetch_array($view)){
echo
"<li><b>$data[nama]</b> : $data[pesan]
(<i>$data[tanggal]</i>)</li>";
}
}elseif
($_POST['act']=='add'){
$nama = $_POST['nama'];
$pesan
= $_POST['pesan'];
$input=mysql_query("INSERT
INTO tblpesan(nama,pesan) VALUES('$nama','$pesan')");
if
($input){
echo
"Data berhasil disimpan";
}else{
echo
"Data gagal disimpan";
}
}
?>
----------------------------------------------------------------------------------------------------------------------------------
Hasil tampilannya seperti dibawah ini :
Pada file shutbox.php kita menambahkan fungsi yaitu viewdata() yang
berfungsi untuk menampilkan data lebih dari satu kali yaitu pada saat program
pertama kali dijalankan data yang ada langsung ditampilkan, lalu setelah selesai
proses input data, datanya juga langsung ditampilkan hasilnya.
Kalau kita perhatikan ada 2 aksi yang dikirimkan pada file proses.php, yaitu act=view dan act=add, hal tersebut dimaksudkan agar file proses.php bisa dibuat sua query yang berbeda dengan perintah IF, yaitu untuk query input data ke database yaitu act=add dan menampilkan data dari database yaitu act=view
Pada file shutbox.php juga sudah dilengkapi dengan animasi jquery pada
saat loading, anda bisa lihat di skrip loading.fadeIn(); dan loading.fadeOut();
Jika kalian ingin mencoba skrip sudah sudah jadi bisa diambil disini,
Selamat belajar