I-BEGO

ozby · by **ozby** » 19 Jul 2011, 23:33

artikel saya selanjutnya masih berkaitan dengan ajax. namun kali ini saya akan menerapkan penggunaan JSON. apakah itu JSON. Lumayan asing bagi kita. Bahasa ini sudah ada lama.(ga lama2 bgt) Tapi baru2 ini muncul dan melejit ketika jquery memakainya dalam fungsi ajax. Apa itu json?? Secara sederhana json sama penggunaannya seperti XML. NAmun bahasa JSON lebih mudah dan lebih irit ngetiknya =))

hahaha.
jika di xml data berbentuk sperti ini:

Code: Select all: <data> <nama>Alfred Crozby</nama> <umur>18 tahun</umur> </data>

Nah, sedangkan jika di JSON data manjadi seperti ini:

Code: Select all: { "nama": "Alfred Crozby", "umur": "18 tahun" }

nah, lebih mudah kan? tergantung om skrang suka yg mana. Untuk lebih lengkap tentang JSON kalian bisa lihat di sini http://id.wikipedia.org/wiki/JSON
Sekarang Kita mulai cara post komentar seperti di facebook tanpa menunggu ajax selesai mengirim ke database di server. Hanya tutorial yg saya buat ini pakai tombol submit. karena saya masih belum ngerti cara submit text area dengan tombol Enter
Kode untuk index.php nya seperti ini:

Code: Select all: <?php // KONEKSI ke DB $koneksi = mysql_connect('localhost','root',''); mysql_select_db('komentar',$koneksi) or die("Koneksi ke DB pedot"); ?> <html> <head> <style> /* pesan error disembunyikan terlebih dahulu*/ #error {display:none; color:red;} ul#list_komentar {width:500px; list-style:none; margin:0; padding:0; border:1px solid #999;} ul#list_komentar li {border-bottom:1px solid #999; background:#eee;} </style>  <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <script type="text/javascript"> $(function(){ //MEMBUAT BUTTON DENGAN CLICK FUNCTION $("#submit").click(function(){ $.ajax({ //URL PROSES DATA DARI FORM url:"proses.php", //DARA DIAMBIL DARI FORM KOMENTAR data:$("#form_komentar").serialize(), //TYPE PENGIRIMAN YG DIGUNAKAN ADALAH POST type:"POST", //TYPE DATA MENGGUNAKAN JSON dataType:"json", //JIKA SUKSES DATA LANGSUNG DI TAMBAHKAN TANPA MENUNGGU PROSES AJAX success:function(data){ if(data.result){ //DATA LANGSUNG DITAMBAHKAN DI ELEMEN LI DENGAN ID JSON $("#list_komentar").prepend('<li id="json">'+'<b>'+data.nama+'</b>'+' : '+data.comment+'</li>'); }else{ $('#error').fadeIn(); } }, error:function(){ $('#error').fadeIn(); } }); }); }); </script> <title>Post Komentar agak mirip Facebook</title> </head> <body> <?php //PANGGIL DATA DARI DB $q = mysql_query("SELECT * FROM komentar ORDER BY komentar_id"); $total = mysql_num_rows($q); ?> <span id="error">Maaf, terjadi kesalahan.</span> Jumlah komentar : <?php echo $total; ?> <ul id="list_komentar"> <?php while($print_q = mysql_fetch_array($q)){ //ini untuk menampilkan komentar sebelumnya yg diambil lgsung dari DB ?> <li><?php echo "<b>$print_q[komentar_nama]</b>".' '.$print_q['komentar_isi']; ?></li> <?php } ?>  <li id="json"></li> </ul> <form id="form_komentar" onsubmit="return false;"> <input id="name" name="nama" type="text" autocomplete="off" /><br /> <textarea name="comment" id="comment" cols="22" rows="2" autocomplete="off"></textarea><br /> <input type="button" id="submit" value="Komentar" /> </form> </body> </html>

Nah, itu untuk kode index.php nya
sekarang kita buat untuk halaman prosesnya.

Code: Select all: <?php // KONEKSI ke DB $koneksi = mysql_connect('localhost','root',''); mysql_select_db('komentar',$koneksi) or die("Koneksi ke DB pedot"); //DATA yg diambil dari form $nama_komentar = $_POST['nama']; $isi_komentar = str_replace(array("\r\n","\n","\r"), array(' ',' ',' '), htmlspecialchars($_POST['comment'])); //MASUKAN KE DB $hasil = mysql_query("insert into komentar (komentar_nama,komentar_isi)values('$nama_komentar','$isi_komentar')"); if($hasil){ //JIKA BERHASIL DATA AKAN DIKIRIM KEMBALI DALAM BENTUK JSON echo '{"result":true,'; //INI MERUPAKAN PESAN YG MENUNJUKAN BAHWA DATA BERHASIL DIMASUKKAN DAN INI DIKIRIM KE success function echo '"nama":"'.($nama_komentar).'",'; //NAMA KOMENTAR DI AMBIL DARI FORM echo '"comment":"'.($isi_komentar).'"'; //KOMENTAR JUGA DEMIKIAN echo '}'; }else{ echo '{"result":false}'; //JIKA TERJADI ERROR, RESULT DIKIRIM FALSE SEHINGGA AJAX AKAN MEMBUAT PESAN ERROR } ?>

Ohya, sebelumnya kalian buat dulu DB dengan nama seperti diatas. Hehe maap ga ngasi tau dari awal :hammer

$\m/$ $\m/$ Jika sudah silakan ditest

Selamat mencoba dan semoga bermanfaat yah. [-O<

Jika ada pertanyaan silakan di post atau via YM : alfredcrozby $\m/$
Nb : Kode diatas belum ditest. Silakan ditest sendiri. Tolong dikoreksi jika ada kesalahan dan mari kita belajar dan berbagi bersama. Thx

vberror13 · by **vberror13** » 20 Jul 2011, 00:56

Minta ijin, oom . Saya ubah dikit-dikit.

proses.php

Code: Select all: if($hasil){ $arr=array("result"=>true,"nama"=>$nama_komentar,"comment"=>$isi_komentar); }else{ $arr=array("result"=>false,"message"=>mysql_errno($koneksi) . ": " . mysql_error($koneksi)); } echo json_encode($arr);

kebetulan php diservernya udah versi 5+ , jadi saya ganti kodingnya dengan json_encode(array). Terus, kalo user memberikan komentar yang ada tanda petik satu, terjadi error. Supaya si user nggak bingung mengenai error tersebut, saya munculin error messagenya:

Code: Select all: ..... //JIKA SUKSES DATA LANGSUNG DI TAMBAHKAN TANPA MENUNGGU PROSES AJAX success:function(data){ if(data.result){ //DATA LANGSUNG DITAMBAHKAN DI ELEMEN LI DENGAN ID JSON $("#list_komentar").prepend('<li id="json">'+'<b>'+data.nama+'</b>'+' : '+data.comment+'</li>'); }else{ $('#error').html(data.message);//show the error $('#error').fadeIn(); } }, error:function(){ $('#error').fadeIn(); } ...........

http://vberror13.kodingen.com/vbbego/jq ... /index.php

pujanggabageur · by **pujanggabageur** » 20 Jul 2011, 07:57

Kalau ane biasanya nambahin addslashes buat menghindari hal-hal yang tidak diinginkan

Code: Select all: $nama_komentar = addslashes($_POST['nama']); $isi_komentar = addslashes($_POST['comment']);

vberror13 · by **vberror13** » 20 Jul 2011, 08:22

pujanggabageur wrote:Kalau ane biasanya nambahin addslashes buat menghindari hal-hal yang tidak diinginkan

Kayaknya php.INI di server yang saya pake udah disetting supaya nggak kemasukan roh jahat itu.

. Makanya saya biarin.

ozby · by **ozby** » 20 Jul 2011, 09:44

Minta ijin, oom . Saya ubah dikit-dikit.

proses.php

Code: Select all
if($hasil){
$arr=array("result"=>true,"nama"=>$nama_komentar,"comment"=>$isi_komentar);
}else{
$arr=array("result"=>false,"message"=>mysql_errno($koneksi) . ": " . mysql_error($koneksi));
}
echo json_encode($arr);

kebetulan php diservernya udah versi 5+ , jadi saya ganti kodingnya dengan json_encode(array). Terus, kalo user memberikan komentar yang ada tanda petik satu, terjadi error. Supaya si user nggak bingung mengenai error tersebut, saya munculin error messagenya:

Code: Select all
.....
//JIKA SUKSES DATA LANGSUNG DI TAMBAHKAN TANPA MENUNGGU PROSES AJAX
success:function(data){
if(data.result){
//DATA LANGSUNG DITAMBAHKAN DI ELEMEN LI DENGAN ID JSON
$("#list_komentar").prepend('<li id="json">'+'<b>'+data.nama+'</b>'+' : '+data.comment+'</li>');
}else{
$('#error').html(data.message);//show the error
$('#error').fadeIn();
}
},
error:function(){
$('#error').fadeIn();
}
...........

http://vberror13.kodingen.com/vbbego/jq ... /index.php

thx om. saya sangat terbantu. ternyata lebih baik kalo hasil json di proses.php di pakein array ya?

bagus bgt om. thx bgt ya
oh ya om, di demo nya ada yg salah. pesanya ga kebaca. kyk ny lupa dipanggil tuh =))

hehehe

Kalau ane biasanya nambahin addslashes buat menghindari hal-hal yang tidak diinginkan

Code: Select all
$nama_komentar = addslashes($_POST['nama']);
$isi_komentar = addslashes($_POST['comment']);

hehe, wktu tu saya pake di web ga cuma adslashes tpi pake strip_tags,htmlspecialchars juga : $\m/$ $\m/$
hehehe. kalian ada yg tau cara post komentar dengan tombol enter??
kalo saya dapetnya seperti ini, tapi belum nangkep smpe ke otak :-$

Code: Select all: <script type="text/javascript"></script>

ni dapet di inet. coba dikoreksi ya om