www.desrizal.

com

3a
JSON

1

org 2 . JavaScript.Desember 1999. daftar (list). Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini. Sumber : www. Setiap nama diikuti dengan : (titik dua) dan setiap pasangan nama/nilai dipisahkan oleh . Perl. karena paling mudah untuk mem-parse-nya. hal ini dinyatakan sebagai objek (object). Pada dasarnya. Pada kebanyakan bahasa.org Array adalah kumpulan nilai yang terurutkan. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C. hal ini dinyatakan sebagai larik (array). • Struktur-struktur data ini disebut sebagai struktur data universal. JSON menggunakan bentuk sebagai berikut: Object adalah sepasang nama/nilai yang tidak terurutkan. semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Pada beberapa bahasa. tabel hash (hash table).com JSON JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan. Setiap nilai dipisahkan oleh . hanya menempatkan sebuah eval dan selesai sudah.json. atau associative array. struktur (struct). JSON terbuat dari dua struktur: • Kumpulan pasangan nama/nilai. Sumber : www. C++. menjadikan JSON ideal sebagai bahasa pertukaran-data. Beberapa orang lebih suka JSON. Objek dimulai dengan { (kurung kurawal buka) dan diakhiri dengan } (kurung kurawal tutup). (koma). Larik dimulai dengan [ (kurung kotak buka) dan diakhiri dengan ] (kurung kotak tutup). atau urutan (sequence). C#. serta mudah diterjemahkan dan dibuat (generate) oleh komputer.json. Standar ECMA-262 Edisi ke-3 . Python dll. kamus (dictionary). Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript.www. daftar berkunci (keyed list).desrizal. vektor (vector). Daftar nilai terurutkan (an ordered list of values). Oleh karena sifat-sifat tersebut. (koma). mudah dibaca dan ditulis oleh manusia. Java. rekaman (record).

www.org String adalah kumpulan dari nol atau lebih karakter Unicode. atau true atau false atau null. Sumber : www. atau angka. 3 . Di dalam string dapat digunakan backslash escapes "\" untuk membentuk karakter khusus. atau sebuah objek atau sebuah larik. Struktur-struktur tersebut dapat disusun bertingkat.com Nilai (value) dapat berupa sebuah string dalam tanda kutip ganda. yang dibungkus dengan tanda kutip ganda. Sebuah karakter mewakili karakter tunggal pada string.json. String sangat mirip dengan string C atau Java.desrizal.

<menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu> Jika kita ubah ke bentuk JSON adalah : {"menu": { "id": "file". "onclick": "OpenDoc()"}.desrizal. "value": "File". "onclick": "CloseDoc()"} ] } }} 4 .com Sumber : www.json. "popup": { "menuitem": [ {"value": "New". Sumber : www.org Contoh JSON Sekarang mari kita lihat contoh-contoh bentuk JSON yang saya ambil dari json. Berikut bentuk XML.org. kecuali format oktal dan heksadesimal tidak digunakan. {"value": "Open". yang telah familiar dengan kita. "onclick": "CreateNewDoc()"}.org Angka adalah sangat mirip dengan angka di C atau Java.www.json. {"value": "Close".

com Bentuk XML : <widget> <debug>on</debug> <window title="Sample Konfabulator Widget"> <name>main_window</name> <width>500</width> <height>500</height> </window> <image src="Images/Sun. "onMouseUp": "sun1.opacity / 100) * 90. "height": 500 }. "width": 500. "image": { "src": "Images/Sun. "alignment": "center"." } }} 5 . "alignment": "center" }.opacity = (sun1. "style": "bold".opacity / 100) * 90.png" name="sun1"> <hOffset>250</hOffset> <vOffset>250</vOffset> <alignment>center</alignment> </image> <text data="Click Here" size="36" style="bold"> <name>text1</name> <hOffset>250</hOffset> <vOffset>100</vOffset> <alignment>center</alignment> <onMouseUp> sun1.png". "name": "text1". "name": "sun1". "window": { "title": "Sample Konfabulator Widget". "hOffset": 250. "vOffset": 100.desrizal. </onMouseUp> </text> </widget> Bentuk JSON : {"widget": { "debug": "on". "vOffset": 250.www. "name": "main_window". "text": { "data": "Click Here". "size": 36. "hOffset": 250.opacity = (sun1.

pada PHP versi 5. yaitu fungsi json_encode() json_encode(). PRIMARY KEY (`message_id`) ) Isi dari tabel tersebut adalah sebagai berikut message_id chat_id user_id user_name 1 1 1 Nurmi 2 3 4 1 1 1 2 1 2 Desrizal Nurmi Desrizal message Halo apa kabar Kabar Baik Lagi di mana Belitung post_time 4/28/2010 17:30 4/28/2010 17:30 4/28/2010 17:30 4/28/2010 17:30 dengan JSON_HEX_AMP. Misal. kita juga bisa membuat JSON secara manual menggunakan PHP. defaultnya adalah 0.2 telah terdapat fungsi untuk membuat JSON. JSON_HEX_TAG."d":4. JSON_HEX_APOS.'e'=>5). Dan kita ingin membuat JSON dari tabel di atas dengan bentuk seperti ini : {"messages": {"pesan":[ {"id": "1". adalah nilai yang akan di encode menjadi string JSON $option. Dari sisi server kita akan membuat JSON menggunakan PHP.'b'=>2. 6 .desrizal.com XML JSON < xx yy='nn'>< /xx> { "xx": {"yy":"nn"} } Membuat JSON di sisi server Sekarang mari kita lihat bagaimana cara membuat bentuk bentuk JSON. kita memiliki tabel di MySQL dengan struktrur sebagai berikut : CREATE TABLE `message` ( `message_id` INT(11) NOT NULL AUTO_INCREMENT. `chat_id` INT(11) NOT NULL DEFAULT '0'. `post_time` DATETIME DEFAULT NULL. Contoh : <?php $arr = array ('a'=>1. `user_id` INT(11) NOT NULL DEFAULT '0'. ?> Kode di atas akan menghasilkan : {"a":1. Syntax-nya adalah sebagai berikut string json_encode ( mixed $value [."c":3. echo json_encode($arr). int $options= 0 ] ) $value. `message` TEXT."e":5} Selain menggunakan json_encode(). bisa berupa JSON_HEX_QUOT.www.'c'=>3.'d'=>4. JSON_FORCE_OBJECT."b":2. `user_name` VARCHAR(64) DEFAULT NULL.

"user": "Desrizal". "user": "' . "time": "4/28/2010 17:30" }. echo $json. "user": "Desrizal".= ']'.) di akhir $json = substr($json. "time": "4/28/2010 17:30" }.= '"id": "' . mysql_select_db("test"). $json = '{"messages": {'. '".com "user": "Nurmi". "user": "Nurmi". "time": "' . kita membuat JSON secara manual. "text": "Kabar Baik". } //hilangkan koma (.{"id": "2". "time": "4/28/2010 17:30" }. $x['post_time'] .{"id": "3".= '}}'.php) <?php mysql_connect("localhost". $query = mysql_query("select * from message"). '".= '"pesan":[ '.0. //lengkapi penutup format JSON $json . "text": "Halo apa kabar".{"id": "4". Jika kita lihat outputnya di browser akan seperti berikut : 7 . '".'.strlen($json)-1).desrizal. "text": "' . '" }."root". while($x =mysql_fetch_array($query)){ $json . yang penting adalah kita harus tahu penempatan setiap elemen. $json . $json . ?> Pada contoh di atas.www. Kode 5. htmlspecialchars($x['message']) . "text": "Belitung". $json .= '{'. htmlspecialchars($x['user_name']) . "time": "4/28/2010 17:30" } ] } } Berikut kode PHP untuk membuat JSON tersebut. $x['message_id'] . Membuat JSON dengan PHP secara manual (phpjson. "text": "Lagi di mana"."").

Untuk menguraikan /mem-parse JSON adalah dengan menggunakan fungsi eval("(" + jsonteks + ")"). "text": "Halo apa kabar". Kode 6.{"id": "4". teks_div.pesan[i]. "time": "2010-04-28 17:30:42" }. "text": "Kabar Baik".php Mem-parse JSON di sisi client Oke.org.i < response.innerHTML += response.js). sebaiknya gunakan fungsi-fungsi yang dibuat oleh orang lain (seperti : http://www.getElementById('divteks').json. for(i=0.com Gambar 4. "text": "Lagi di mana".innerHTML += '&nbsp.pesan[i]. "time": "2010-04-28 17:30:34" }.time + '</font><br />'. "time": "2010-04-28 17:30:26" }. "user": "Nurmi". } } </script> </head> <body onload=tes()> 8 . var response = eval("(" + json + ")").text + '<br />'.innerHTML += response.<font size=1>' + response.desrizal. "user": "Desrizal". kita juga bisa menggunakan fungsi-fungsi yang telah dibuat orang lain.&nbsp.org/json_parse. Para ahli.pesan. Mem-parse JSON (parsejson. "user": "Nurmi".messages. menyarankan untuk menghindari penggunaan eval().messages. Tetapi sebagai contoh pelajaran. "user": "Desrizal".messages. saya tidak membuat kode yang berbau ajax.messages.{"id": "3". saya anggap kita sudah memiliki teks yang berformat JSON. "time": "2010-04-28 17:30:51" }]}}' var teks_div = document.JSON. seperti yang ada di www.pesan[i].{"id": "2". "text": "Belitung".user. Selain menggunakan eval(). Untuk menyederhanakan contoh berikut. saya akan memperlihatkan cara mem-parse menggunakan eval().html) <html> <head> <script> function tes(){ json = '{"messages": {"pesan":[ {"id": "1".www. teks_div. sekarang mari kita lihat bagaimana cara menguraikan format JSON tersebut menggunakan javascript.length. setelah kita mengetahui bagaimana cara membuat output dengan format JSON. karena kurang aman. Tampilan phpjson. i++) { teks_div.

"Sarah". "umur":28. "teman":["Nurmi".5+ diperkenalkan javascript built in JSON Object. "Sarah".com <div id=divteks> </div> </body> Gambar 5.stringify(jsonobjek) alert(typeof jsonstr) //string parse(string. "Albert"]}' 9 . Tampilan parsejson.www. Contoh : var jsonobjek={"nama":"Desrizal". "umur":28. Untuk itu. "teman":["Nurmi". dan Opera 10.desrizal. JSON Object menyediakan metode untuk mengubah objek JSON menjadi string dan JSON string menjadi objek javascript. [reviver]) Berguna untuk mengubah JSON String menjadi Javascript Object Contoh : var jsonstr='{"nama":"Desrizal". Berikut adalah metode-metode dari JSON Object. [space]) Berguna untuk mengubah javascript object menjadi JSON String. "Albert"]} var jsonstr=JSON. maka pada FF3. stringify(obj. IE8+.html JSON Object Kita telah mempelajari cara mem-parse JSON menggunakan eval(). [replacer].5+. Kelemahan menggunakan eval() adalah kurang aman.

XMLHTTP"). drzchat. var timer.getElementById("nama").php?akhir="+pesanakhir+"&nama="+namaku+"&sid ="+Math. `pesan` varchar(200) NOT NULL.disabled = "". tnama = 0. Kode 6. Pertama-tama mari kita buat tabel di database. tnama = 1. }else{ document.com var george=JSON.parse(jsonstr) //convert JSON string into object alert(george.desrizal.onreadystatechange = aturAmbilPesan. } ambilPesan(). PRIMARY KEY (`nomor`) ). `waktu` varchar(10) NOT NULL.open("GET".ActiveXObject){ return new ActiveXObject("Microsoft.age) //alerts 28 JSON Ajax Web Chat Oke sekarag kita lihat contoh aplikasi ajax yang menggunakan JSON sebagai format ouput yang di berikan oleh server ke client.XMLHttpRequest){ return new XMLHttpRequest().www."ambilchat.0 </title> <script> var ajaxku = buatAjax().readyState == 0){ ajaxku. function taruhNama(){ if(tnama==0){ document. }else if(window. } function buatAjax(){ if(window. } } function ambilPesan(){ namaku = document. ajaxku. 10 .getElementById("nama").random(). var pesanakhir = 0.html <html> <head> <title> DRZ Chat 1. sengan struktur tabel sebagai berikut : CREATE TABLE `drzchat` ( `nomor` int(3) NOT NULL auto_increment. Kemudian mari kita buat tampilan layout HTML nya dan program Ajax di sisi client.readyState == 4 || ajaxku.true). `nama` varchar(20) NOT NULL.getElementById("nama").disabled = "true". var tnama = 0.value if(ajaxku.

} function blockSubmit() { kirimPesan().send(null). for(i=0. pesanakhir = data.pesan[i].waktu+")</font> ".www.scrollTop = chat_div.value namaku = document. chat_div. border: 1px solid #555555.open("GET".true).innerHTML += "<font color=red>"+data.onreadystatechange = aturAmbilPesan.getElementById("div_chat").innerHTML += " : "+data.i++){ chat_div."> 11 .getElementById("nama"). ajaxku. } } function aturKirimPesan(){ clearInterval(timer).readyState == 4){ var chat_div = document. }else{ alert("Nama atau pesan masih kosong"). } } function aturAmbilPesan(){ if(ajaxku.value !=""){ ajaxku.value if(pesannya != "" && document. } </script> </head> <body> Nama : <input type=text name=nama id=nama> <input type=button value=login id=tmbl_login onclick=taruhNama()><p> <div id="div_chat" style="height: 300px.scrollHeight.getElementById("nama"). ambilPesan()."ambilchat."> </div> <form onSubmit="return blockSubmit(). return false. } } timer = setTimeout("ambilPesan()".desrizal. document.pesan[i].length. chat_div.pesan[i].1000).teks+"<br>". ajaxku.pesan.send(null). background-color: lightyellow. } function kirimPesan(){ pesannya = document.messages.com ajaxku.id.messages.value = "".random(). overflow: auto.innerHTML += "<font size=1>("+data.i<data.pesan[i].getElementById("pesan").nama+"</font> ".messages.php?akhir="+pesanakhir+"&nama="+namaku+"&pes an="+pesannya+"&sid="+Math. width: 500px. var data = eval("("+ajaxku.responseText+")").messages.getElementById("pesan"). chat_div.messages.

length.pesan[i]. "teks":"halo juga".teks+"<br>".messages.messages.desrizal. kemudian kita gunakan eval untuk mengubah JSON string menjadi objek javascript var data = eval("("+ajaxku.id. "waktu":"16:31" }.id. = chat_div. "teks":"halo Nurmi". += "<font size=1>("+data. ambilchat. Data yang diambil dari server berupa teks dengan format JSON sebagai berikut : {"messages": {"pesan":[ {"id":"35".www. {"id":"37". += " : "+data.pesan[i]. ambilPesan() Di mana fungsi ini berfungsi untuk melakukan request ke server untuk mengambil data dari server. maka kita blok menggunakan fungsi berikut : function aturKirimPesan(){ 12 .com Pesan : <input type=text name=pesan id=pesan size=50> <input type=button value="kirim" onclick="kirimPesan()"> </form> </body> </html> Pada program chat sisi client di atas. "nama":"desrizal". Untuk mencegah halaman ter-submit ketika tekan enter. {"id":"36". kita ketik pesannya di input teks lalu kita tekan ENTER. "waktu":"16:47" } ] } } Format JSON tersebut diambil dari server. maka segera dijalankan fungsi ambilPesan().innerHTML chat_div. Supaya ajax mengambil data tiap satu detik maka kita gunakan fungsi setTimeout() timer = setTimeout("ambilPesan()".messages.innerHTML chat_div.i++){ chat_div. pesanakhir = data.nama+"</font> ".messages. "nama":"Batman". Setelah kita menekan tombol login. "teks":"hai apa kabar".waktu+")</font> ".php. "waktu":"16:31" }. pertama-tama user harus memasukkan nama mereka di suatu teks input.pesan[i]. Kemudian Objek JSON yang telah di-parse di atas kita masukkan ke dalam <div> for(i=0.responseText+")").scrollTop += "<font color=red>"+data.1000). "nama":"Nurmi".i<data. } Supaya ajax hanya megambil data dari pesan yang terakhir maka kita juga mengirimkan nomor pesan id terakhir pesanakhir = data.pesan[i].messages.scrollHeight.messages. biasanya kalau form di tekan ENTER akan otomatis ter-submit dan halaman akan bertukar.pesan[i]. yang di masukkan ke dalam variable data.innerHTML chat_div. Biasanya kalau kita chat.pesan.

$akhir = $_GET['akhir'].'". 13 .php <?php mysql_connect("localhost". "nama":"Admin".com clearInterval(timer). "teks":"Selamat datang di chatting room". mysql_select_db("test"). }else{ if($pesan){ $masuk = mysql_query("insert into drzchat values(null."> Sekarang mari kita lihat kode PHP di sisi server. $json .www.htmlspecialchars($x['nama']).$x['waktu']. if($akhir==0){ $nomor = mysql_query("select nomor from drzchat order by nomor desc limit 1").= '"pesan":[ {'.'".= '"pesan":[ '. "waktu":"'. "teks":"'.'. $n = mysql_fetch_array($nomor).= '"id":"'.'".= '{'. "waktu":"'.'$nama bergabung dalam chat'.0. $waktu = date("H:i"). $masuk = mysql_query("insert into drzchat values(null.$x['nomor']. $json . $no = $n['nomor'] + 1. ambilchat.'Admin'.'$nama'.'$waktu')"). } $json . di mana di program PHP ini kita membuat output data berformat JSON Kode 7.desrizal."").'". <form onSubmit="return blockSubmit().'" }. while($x = mysql_fetch_array($query)){ $json . $pesan = $_GET['pesan'].= '}}'."root". } $json = substr($json.$waktu.'$waktu')"). $json . } $query = mysql_query("select * from drzchat where nomor > $akhir").htmlspecialchars($x['pesan']).= '"id":"'. } Fungsi di atas dipanggil ketika ada event onSubmit. $json = '{"messages": {'. $json . $json .strlen($json)-1). "nama":"'.= ']'. ambilPesan().$no.'" }]'.'$pesan'. $nama = $_GET['nama'].

Ouput yang kita buat dengan format json.www. Cek apakah user pertama kali login dengan melihat nilai variable $akhir. Lakukan koneksi ke server MySQL 2.desrizal. berikan data-data dari database setelah yang terakhir dia dapat. Ambil nilai-nilai parameter yang di berikan oleh client dengan metode GET 3. ucapan selamat data dari admin. Apabila nilai $akhir besar dari 0..com echo $json. ?> Logika dari program di atas adalah : 1. Tampilan Aplikasi Chat 14 . untuk mengirim data ke client cukup melakukan echo $json. lalu kita masukkan ke dalam database untuk supaya user lain mengetahui ada user lain yang login 4. 5. jika bernilai 0 artinya adalah user chat pertama kali. Gambar 7. lalu kita kirim data berupa string berformat JSON. artinya user bukan masuk untuk pertama kalinya. Berikut adalah tampilan dari aplikasi chat kita. yang kita dapat dari variable $akhir $query = mysql_query("select * from drzchat where nomor > $akhir").

Sign up to vote on this title
UsefulNot useful