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.
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_
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); } |
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?
thx banget ya.... bermanfaat banget niy
mas, klo dalam bentuk codeigniternya gmana?
sy bingung klo pke php biasa nih..makasi mas..
saya udah berulang kali belajar ajax tapi masih bingung...
tapi makasih ya buat tutorialnya..
untuk delete tampilan bisa !!! namun pada tabel databse message_text tidak mau hilang ???? bagaimana solusinya ????
nah loh,itu ad yg nyisipin gambar bokep
@qwerty : mungkin itu ada cracker iseng yang nyoba.. objective dari tutorial sederhana ini bukan untuk melindungi hal tersebut.. tetapi lebih kearah penggunaan jquerynya
@rootdiesomec : Cek apakah script delete kepanggil? outpurnya apa?
@mahendra; ganti aja server side scriptnya
mas, waktu diupdate comment yg muncul pertama kali undefined tp setelah direfresh baru muncul comment sebenarnya.
sy tes di localhost.
btw, thx codenya berguna banget di project sy :)
trims mas, tutorialnya mudah diikuti
btw kalau sy mau tambahkan input satu lagi misalnya "nama", lalu yang harus sy lakukan sm kode jquerynya apa ya?
terutama di bagian sini:
---
data: $.param({content:input_content}),
---
trims mas ibnu
@adam: iya benar.. tinggal tambahin aja field namanya
thx a lot, very usefull, very apreciate it :D
how awesome!! keep sharing especially to indonesian novice programmer.. :D
demonya gak jalan?...
Mas sy mau tanya bagaimana menampilkan pesan * input data lagi? * setelah proses simpan selesai??dan jika saya memilih ya maka akan di tampilkan form input data baru..
*** Mohon bantuanya mas***
a