Oke pada tutorial in ada beberapa file yang dibutuhkan untuk membangun script seperti judul diatas.
1. jQuery kita bisa download di websitenya langsung atau bisa juga download di sini
2. file insert.php untuk file menambah data
3. file demo.php sebagai file untuk menampung kedua file diatas dan menjadi file utama
4. Database menggunakan mysql
Baiklah kita mulai aja ya…
Pertama yang kita lakukan adalah membuat struktruk database terlebih dahulu
CREATE TABLE IF NOT EXISTS `messages` ( `msg_id` int(11) NOT NULL AUTO_INCREMENT, `message` varchar(200) DEFAULT NULL, `uid_fk` int(11) DEFAULT NULL, `ip` varchar(30) DEFAULT NULL, `created` int(11) DEFAULT '1269249260', PRIMARY KEY (`msg_id`), KEY `uid_fk` (`uid_fk`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=94 ;
Kemudian kita buat file untuk insert postnya, silakan dilihat skrip berikut
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script><script type="text/javascript">
$(function() {
$(".comment_button").click(function() {
var boxval = $("#content").val();
var dataString = 'content='+ boxval;
if(boxval=='')
{
alert("Please Enter Some Text");
}else{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
$("#flash").hide();
}
});
}
return false;
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="background:#FFFFFF; height:90px; border-bottom:#006699 solid 2px; padding-left:10px; ">
<h2>
Tutorial Insert Post Load jQuery dan PHP</h2>
<h3>
<span style="float:left; "><a href="">Tutorial Link</a> Follow me on <a href="http://twitter.com/4ber" target="_blank">Twitter</a></span></h3>
</div>
<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tbody>
<tr>
<td><div align="left">
<form action="" method="post" name="form">
<table cellpadding="0" cellspacing="0" width="500px">
<tbody>
<tr>
<td align="left">
<div align="left">
<h3>Apa yang ingin kamu tulis?</h3>
</div>
</td>
</tr>
<tr>
<td class="comment_box" style="padding:4px; padding-left:10px;">
<textarea cols="30" id="content" maxlength="145" name="content" rows="2" style="width:480px;font-size:14px; font-weight:bold"></textarea><input class="comment_button" id="v" name="submit" type="submit" value="Update" /></td>
</tr>
</tbody>
</table>
</form>
</div>
<div style="height:7px">
</div>
<div align="left" id="flash">
</div>
<ol class="timeline" id="update">
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Simpan nama file diatas dengan nama insert.php Berikutnya kita buat file untuk menampilkan hasil dan mengeksekusi dari file insert tadi...
<?php
//koneksi kedatabase
$dbHost = 'localhost'; // nama hostnya
$dbUsername = 'user'; //username host
$dbPassword = 'pass'; //password host
$dbDatabase = 'databasename'; //database
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$sql_check = mysql_query("SELECT * FROM messages order by msg_id desc");//query menampilkan
if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
$msg=$r['msg'];
$msg_id=$r['msg_id'];
}
?>
<li class="bar<?php echo $msg_id; ?>">
<div align="left">
<?php echo $msg; ?><span style=" padding:10px"> </span>
<span style="float:right; margin-right:10px; width:20px; height:20px"><a class="delete_update" href="#" id="<?php echo $msg_id; ?>;"><b>X</b></a></span>
</div>
</li>
file yang ini simpan dengan nama demo.php dan agar tampilan insertnya lebih rapi kita buat style cssnya, seperti berikut
body{font-family:Arial, Helvetica, sans-serif; font-size:14px;}
.comment_box{background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px}
a { text-decoration:none; color:#d02b55; }
a:hover {text-decoration:underline; color:#d02b55;}
*{margin:0;padding:0;}
ol.timeline {list-style:none;font-size:1.2em;}
ol.timeline li{ display:none;position:relative;padding:.7em 0 .6em 0;border-bottom:1px dashed #000;line-height:1.1em; background-color:#D3E7F5; height:45px}
ol.timeline li:first-child{border-top:1px dashed #000;}
simpan file diatas dengan nama style.css Baiklah sekarang kita eksekusi skrip yang kita. Panggil di host browser
Sekian, semoga bermanfaat.
Jika ada pertanyaan bisa ditanyakan pada kolom komentar
0 comments: