Ajax jQuery – Insert dan Delete

Ajax jQuery – Insert dan Delete

Setelah memahami konsep mengenai ajax di tutorial sebelumnya maka sekarang kita akan mencoba menggunakan ajax di aplikasi real. Untuk studi kasusnya kita akan membuat sebuah Twitter sederhana dengan feature Insert, Display dan delete data kedalam database. Untuk dapat memahami script ini setidaknya anda harus sudah pernah mencoba jQuery. Pada tutorial ini akan di bahas bagai mana menggunakan JSON di jQuery.

DEMO APPDOWNLOAD

1. Membuat Struktur Database & File Koneksi

Langkah paling awal yang lakukan adalah membuat sebuah database untuk menyimpan data pesan. dalam database ini hanya terdapat sebuah tabel yang berisi dua field yaitu message_id dan message_text. Adapun schema table adalah

CREATE TABLE `messages` (
  `message_id` int(11) NOT NULL AUTO_INCREMENT,
  `message_text` text NOT NULL,
  PRIMARY KEY  (`message_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Lalu buat file db.php yang menconnectkan aplikasi (*kita tidak akan fokus kepada pemograman PHP tetapi lebih kearah jQuery dan ajaxnya)

1
2
3
4
5
6
7
8

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "root";
$mysql_database = "lab1";
 
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Cannot Connect To database");
mysql_select_db($mysql_database, $bd) or die("Cannot Select Database");

2. Membuat Struktur HTML

Adapun struktur html yang akan kita buat adalah sebuah form dengan 1 textarea dan sebuah button yang digunakan untuk mengirim data. Sedangkan untuk menampilkan kita menggunakan OL yang di gunakan untuk menampilkan data. Pada baris 25 sampai 36 kita akan menampilkan kembali semua data yang telah berada didalam database.

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<div id="container">
	<div style="overflow:hidden">
		<p>What do you think?</p>
		<textarea cols="40" rows="2" name="content" id="content" maxlength="145" ></textarea><br />
		<input type="submit"  value="Update"  id="v" name="submit" class="comment_button" style="float:right"/>
	</div>
	<ol  id="update" class="timeline">
	<?php
		include('db.php');
		$sql_in= mysql_query("SELECT * FROM messages order by message_id desc");
		while($r=mysql_fetch_array($sql_in)){
		//var_dump($r);
		?>
		<li id="row_<?php echo $r['message_id']; ?>">
		<div align="left">
		<span style=" padding:10px"><?php echo $r['message_text']; ?> </span>
		<span class="delete_button"><a href="#" del_id="<?php echo $r['message_id']; ?>" class="delete_update">X</a></span>
		</div>
		</li>
		<?php } ?>
	</ol>
 
</div>

Sebuah row data akan diletak kan didalam sebuah li yang mempunyai id ROW_. Id ini akan di gunakan untuk mendelete row ini nantinya. sedangkan pada bagian tombol X, di beri sebuah attribut del_id yang berisi informasi id keberapa yang akan di delete. id ini akan di cocokkan dengan ROW_ID.

3. Membuat Script Javascipt

Pada script ini kita akan memanggil server sebanyak 2x. yaitu untuk insert dan delete. Semua XMLHttprequest yang dilakukan menggunakan method POST dan mengembalikan data dalam bentuk JSON. Untuk dapat menggunakan format data JSON secara langsung maka harus di definisikan dataType dari sebuah request (baris 17)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(function() {
	$(".comment_button").click(function() 
	{
		var element = $(this);
	        var input_content = $("#content").val();
 
		if(input_content == '')
		{
			alert("Please Enter Some Text");
		}
		else
		{
			$.ajax({
					type: "POST",
			  		url: "update_data.php",
			   		data: $.param({content:input_content}),
			   		dataType:'json',
			  		cache: false,
			  		success: function(out){
			  			$("ol#update").prepend('<li style="display:none" id="row_'+out.id+'">'+
			  										'<div align="left">'+
													'<span style=" padding:10px">'+out.message+'</span>'+
													'<span class="delete_button">'+
														'<a href="#" del_id="'+out.id+'" class="delete_update">X</a></span>'+
													'</div></li>');
			  			$("ol#update li:first").fadeIn(2000);
					}
			 });
		}
		return false;
	});
 
 
	$('.delete_update').live("click",function() 
	{
		var item = $(this);
		if(confirm("Are You Sure?"))
		{
			$.ajax({
				type: "POST",
			 	url: "delete_data.php",
			  	data: $.param({message_id:item.attr("del_id")}),
			 	cache: false,
			 	success: function(html){
			 		$("#row_"+item.attr("del_id")).slideUp('slow', function() {$(this).remove();});
			 	}
			});
 
		}
		return false;
	});
});

4. Membuat server side script

Pada file ini hanya berisi script bagain mana data diterima dan dikembalikan dalam bentuk JSON

1
2
3
4
5
6
7
8
9
10
11

<?php
include('db.php');
if(isset($_POST['content']))
{
	$content	=	$_POST['content'];
	mysql_query("INSERT INTO messages(message_text) VALUES ('$content')");
	$output	= array(
					'id' 		=> mysql_insert_id(),
					'message'	=> $_POST['content']);
	echo json_encode($output);
}

Artikel yang berhubungan

About ibnoe
Hi, my name is Ibnu Daqiqil Id and I’m an indonesian Web Developer. I love creating simple, unique and easy-to-use web application and what most counts for me is to work with people who are passionate about what they do.

2 Responses to “Ajax jQuery – Insert dan Delete”

  1. Techie Talks says:
    May 20, 2010 at 9:22 am

    Thank you btw, you gave me a lot of ideas on inserting method in ajax. I have a question for you, what do you think is the bottleneck of using ajax in the scripts that we develop?

  2. framehilang says:
    June 26, 2010 at 2:32 am

    thx banget ya…. bermanfaat banget niy


Leave a Reply

Posted on April 14th, 2010

Archived in jQuery

Written by ibnoe

Leave a comment

Tags

, , , ,

Postingan Terbaru

Copyright © 2010 Tutorial PHP Jquery Codeigniter Ajax javascript