Kategori Random

Insert Data menggunakan jQuery, Ajax dan PHP

Posted : 22 April 2014 | 09:03:31 , Dibaca 5790 kali

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></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</h2>
<h3>
 <span style="float:left; "><a href="">Tutorial Link</a>&nbsp;&nbsp;&nbsp;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">
              &nbsp;</div>
          <div align="left" id="flash">
              &nbsp;</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'; //
$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">
    <?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.

Postingan Terkait
» Membuat Paging Otomatis tabel menggunakan jquery datatables ( 22 Agu 2016 | 17:53:57 , 3548 hits )
» IDE Editor PHP yang Powerfull dan lisensi free ( 15 Jul 2015 | 03:04:38 , 3751 hits )
» Membuat fungsi konversi mata uang Rupiah pada PHP ( 28 Apr 2014 | 07:05:47 , 7065 hits )
» Mengatasi Fatal error: Call to undefined function curl_init() in D: pada WAMP Server ( 10 Mar 2014 | 06:20:36 , 3167 hits )
» Fungsi PHP mengubah format tanggal Mysql menjadi format tanggal Indonesia ( 17 Jan 2014 | 07:50:24 , 13191 hits )