Mau bagi2 tutorial nih bro untuk bikin guestbook dengan animasi slideDown.. Jd ntar mirip kaya kita update status facebook gitu..
Jadi kita akan menggunakan HTML, CSS, PHP, MySQL, dan jQuery.
Untuk demonya bisa diliat di situs http://ditatompel.crayoncreative.net/ pada bagian "feedback"
Kita bahas dulu apa yang diperlukan untuk guide mengikuti ini.
1. kesabaran
2. Paling tidak mengerti HTML dan CSS, apa itu element id, dan class.
3. Mengerti basic PHP dan MySQL
Untuk file jadinya, bisa didownload di http://ls-la.ditatompel.crayoncreative.n...stbook.zip
Saya coba berikan komentar pada beberapa baris yang mungkin berguna pada saat mengembangkan program ini.
Oke, langsung saja... Pertama kita buat dulu databasenya.
Di guide ini saya pakai database dengan nama JQguestbook dan table guestbook didalamnya.
Pertama buat dulu database JQguestbook nya, kemudian eksekusi perintah SQL berikut :
Code:
CREATE TABLE IF NOT EXISTS `guestbook` (
`message_ID` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(70) CHARACTER SET utf8 NOT NULL DEFAULT '',
`email` varchar(150) CHARACTER SET utf8 NOT NULL DEFAULT '',
`message` text CHARACTER SET utf8 NOT NULL,
`date_submit` datetime NOT NULL,
PRIMARY KEY (`message_ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;Nah klo udah, kita buat konfigurasinya untuk koneksi ke database dan beberapa seting dan fungsi2 lainnya.
File : config.php
PHP Code:
<?php
$config = array();/**
* Konfigurasi database
*/$config['db_host'] = 'localhost'; // host database anda$config['db_user'] = 'ditatompel'; // nama user database$config['db_pass'] = 'rahasia'; // password user database$config['db_name'] = 'JQguestbook'; // nama database yang digunakan$config['debug'] = TRUE; // untuk mode debug.
/**
* Stop edit jika anda tidak tahu apa yang sedang anda lakukan.
*/if ( function_exists('date_default_timezone_set') )
date_default_timezone_set('Asia/Jakarta'); // lokasi server IIXini_set('display_errors', $config['debug']);error_reporting(E_ALL | E_STRICT);// koneksi ke mysql server$konek = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
if (!$konek)
die('gagal konek ke database<br />');$database = mysql_select_db($config['db_name']);
if (!$database)
exit('gagal pilih database');// fungsi mengambil gambar dari gravatar emailfunction gambarGravatar($email) {
$gravatar = md5(strtolower(trim($email)));
$gravatar = '<img src="http://www.gravatar.com/avatar/' . $gravatar . '?s=80" alt="user-image" class="comment_image" />';
return $gravatar;
}// fungsi sanitasi
// masih sangat basic, silahkan dikembangkan sendiri :Dfunction htmlChar($text) {
$text = htmlspecialchars($text, ENT_QUOTES);
return $text;
}?>
Oke, kalau sudah, kita buat halaman untuk menampilkan guestbooknya.
File : index.php
File : index.php
PHP Code:
<?phprequire_once('config.php');?><!DOCTYPE HTML>
<head>
<meta charset="UTF-8" />
<title>jQuery slideDown Guestbook tutorial</title>
<meta name="description" content="jQuery slideDown Guestbook tutorial" />
<meta name="keywords" content="html,css,jquery,javascript,guestbook,ajax" />
<meta name="author" content="ditatompel" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/guestbook.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="main_konten">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>
<form id="guestbook" name="form">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td class="comment_box">
<h1>jQuery slideDown Guestbook tutorial</h1>
<div id="notif"></div>
<div>
<input name="name" type="text" id="name" maxlength="20" />
<span id="nameInfo">What's your name?</span>
</div>
<div>
<input name="email" type="text" id="email" maxlength="50" />
<span id="emailInfo">Valid E-mail please...</span>
</div>
<div>
<span class="keterangan">* </span>
<textarea id="message" name="message"></textarea>
</div>
<input id="send" name="send" type="submit" value="Send" />
</td>
</tr>
</table>
</form>
<div id="loading" align="left" ></div>
<ol id="update" class="timeline">
<?php
$query = mysql_query("SELECT * FROM guestbook ORDER by ID DESC");
while ( $hasil = mysql_fetch_array($query) ) {
?> <li>
<div class="old_comment">
<?php echo gambarGravatar($hasil['email']); ?> <div class="data_comment">
<h3><strong><?php echo $hasil['name']; ?></strong> <span class="date">on <?php echo $hasil['date_submit']; ?></span></h3>
<p class="message"><?php echo $hasil['message']; ?></p>
<div>
</div>
<div class="clear"></div>
</li>
<?php
}
?> </ol>
</td>
</tr>
</table>
</div>
</body>
</html>
Seperti yang temen2 liat, pada tag <head> kita panggil file style.css yang berada pada folder css/
File : css/style.css
File : css/style.css
Code:
*{margin:0;padding:0;}
body {
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
}
.clear {
clear:both;
}
.comment_box {
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding:3px 10px;
}
.error{
color: #e46c6e;
}
a {
text-decoration:none;
color:#d02b55;
}
a:hover {
text-decoration:underline;
color:#d02b55;
}
#main_konten {
width: 450px;
margin:0 auto;
}
#guestbook{
padding: 0px;
}
#guestbook input{
width: 200px;
height:20px;
padding: 6px;
color: #949494;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #cecece;
}
#guestbook textarea{
width: 450px;
height: 40px;
padding: 6px;
color: #adaeae;
font-size: 10px;
border: 1px solid #cecece;
}
#guestbook div{
margin-bottom: 10px;
}
#guestbook div span{
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
#guestbook #send{
background: #6f9ff1;
color: #fff;
font-weight: 700;
font-style: normal;
border: 0;
cursor: pointer;
height:40px;
}
#guestbook #send:hover{
background: #79a7f1;
}
ol.timeline {
list-style:none;
}
ol.timeline li.bar{
position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
display:none;
}
ol.timeline li{
position:relative;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
}
ol.timeline li:first-child{
border-top:1px dashed #000;
}
img.avatar{
border:3px solid #FFF;
float:left;
margin:5px;
}
div.data_comment {
padding-top:5px;
}
span.date {
font-size:10px;
font-style:italic;
}
p.message {
padding-top:5px;
font-size:10px;
}
Kemudian kita buat file action.php yang nantinya digunakan untuk proses
validasi dan query ke database, kemudian menampilkan data form yang
disubmit dengan format JSON.
File :action.php
File :action.php
PHP Code:
<?phprequire_once('config.php');
if ( isset($_POST['message']) ) {
$pesan = NULL;
$error = FALSE;
// silahkan tambahkan sanitasi dan filterisasi anda disini.
if ( empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message']) ) {
$pesan .= '<p class="error"><strong>[!] Semua field wajib diisi!</strong></p>';
$error = TRUE;
$loveme = 0;
}
if ( !$error ) {
// jika lolos sanitasi, proses hasil submit ke database
mysql_query("INSERT INTO guestbook (
name,
email,
message,
date_submit)
VALUES (
'" . htmlChar($_POST['name']) . "',
'" . htmlChar($_POST['email']) . "',
'" . htmlChar($_POST['message']) . "',
'" . date("Y-m-d H:i:s") . "')
");
// siapkan list yang akan ditampilkan melalui AJAX
$pesan .= '<li class="bar"><div class="old_comment">' . gambarGravatar($_POST['email']) . '<div class="data_comment">';
$pesan .= '<h3><strong>' . htmlChar($_POST['name']) . '</strong> <span class="date">on ' . date("Y-m-d H:i:s") . '</span></h3>';
$pesan .= '<p class="message">' . htmlChar($_POST['message']) . '</p>';
$pesan .= '</div></div><div class="clear"></div></li>';
$loveme = 1;
}
// tampilkan respon dan pesan dengan format json untuk AJAX request
$json = array(
"loveme" => $loveme,
"message" => $pesan
);
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
}?>
terakhir, kita buat file guestbook.js pada folder js/ untuk proses form dan animasinya.
File : js/guestbook.js
File : js/guestbook.js
Code:
$(function() {
$("#send").click(function() {
// tampilkan elemen id 'loading' begitu tombol send diklik
$('#loading').show();
$('#loading').fadeIn(400).html('<img src="ajax-loader.gif"
align="absmiddle"> <span class="loading">Loading
Comment...</span>');
// ajax request
$.ajax({
type: 'POST',
url: 'action.php',
data: $('form#guestbook').serialize(), // ambil semua data form dari id guestbook
cache: false,
success: function(data) {
var dc = eval('(' + data + ')');
if ( dc.respond ) {
// tampilkan isi JSON message pada ordered list id update
$('ol#update').prepend(dc.message);
$('#loading').hide();
$('ol#update li:first').slideDown('slow');
// reset nilai 2 pada form id guestbook
$(':input','#guestbook').not(':button, :submit').val('');
$('div#notif').slideUp();
}
else {
// tampilkan pesan error bila gagal
$('div#notif').addClass('error').html(dc.message).slideDown();
$('#loading').hide();
}
}
});
return false;
});
});Oke sekian dulu ya. Silahkan dikembangkan sendiri terutama untuk bagian validasi dan sanitasi.
