Insert Record menggunakan jQuery, Ajax dan PHP

Posted on Updated on

bePebe – Salam tutorial dari saya. Kali ini saya akan membagi cara membuat komentar dengan menggunakan jQuery, Ajax dan PHP seperti yang ada di facebook. Jika kita sering membuka dan mengomentari di facebook pasti kita tidak asing dengan tutorial ini, betul sebab teknologi yang digunakan facebook adalah teknologi framework jQuery ketika kita udah selesai dan langsung akan muncul di tampilannya tanpa harus refresh browser. Oke tanpa berlama-lama lagi kita langsung mulai saja.

Oke pada tutorial in ada beberapa file yang nantinya membentuk seperti judul diatas.

1. Jquerynya 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. Data base

Baiklah kita mulai aja ya… cikeszrot
Pertama yang kita lakukan adalah membuat File 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>Insert Record Menggunakan jQuery and Ajax+PHP</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">&nbsp;<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<br />
  <span style="float:right; padding-right:70px"></span></h2><span style="float:right; padding-right:70px"></span> <span style="float:left; "><h3><a href="">Tutorial Link</a>&nbsp;&nbsp;&nbsp;Follow me on <a href="http://twitter.com/4ber" target="_blank">Twitter</a></h3></span>     </div>

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>
<div align="left">
<form  method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">
<tr><td align="left"><div align="left"><h3>Apa yang ingin kamu tulis?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="comment_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="submit"  value="Update"  id="v" name="submit" class="comment_button"/>
</td>
</tr>
</table>
</form>
</div>
<div style="height:7px"></div>
<div id="flash" align="left"  ></div>
<ol  id="update" class="timeline"></ol>
</td>
</tr>
</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 cekiszrot…

 <?php
 //koneksi kedatabase
$dbHost = 'localhost'; // nama hostnya
$dbUsername = 'user'; //
$dbPassword = 'pass';
$dbDatabase = 'databasename';
$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">
 <span style=" padding:10px"><?php echo $msg; ?> </span>
 <span style="float:right; margin-right:10px; width:20px; height:20px"><a href="#" class="delete_update" 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, mari kita buat

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 sekrang kita eksekusi skrip yang kita. Panggil di host browser

Download Filenya

Sekian.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s