www.desrizal.

com

3a
JSON

1

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

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

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

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

bisa berupa JSON_HEX_QUOT. JSON_FORCE_OBJECT. kita juga bisa membuat JSON secara manual menggunakan PHP.'d'=>4. `user_name` VARCHAR(64) DEFAULT NULL. `message` TEXT. Dan kita ingin membuat JSON dari tabel di atas dengan bentuk seperti ini : {"messages": {"pesan":[ {"id": "1". Syntax-nya adalah sebagai berikut string json_encode ( mixed $value [."b":2. echo json_encode($arr)."c":3. `chat_id` INT(11) NOT NULL DEFAULT '0'. Misal. `post_time` DATETIME DEFAULT NULL. `user_id` INT(11) NOT NULL DEFAULT '0'.www.'e'=>5). Dari sisi server kita akan membuat JSON menggunakan PHP. adalah nilai yang akan di encode menjadi string JSON $option.'b'=>2. JSON_HEX_APOS. int $options= 0 ] ) $value. pada PHP versi 5.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. 6 . 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. JSON_HEX_TAG. yaitu fungsi json_encode() json_encode().desrizal. defaultnya adalah 0.'c'=>3."e":5} Selain menggunakan json_encode(). kita memiliki tabel di MySQL dengan struktrur sebagai berikut : CREATE TABLE `message` ( `message_id` INT(11) NOT NULL AUTO_INCREMENT. ?> Kode di atas akan menghasilkan : {"a":1.2 telah terdapat fungsi untuk membuat JSON."d":4. Contoh : <?php $arr = array ('a'=>1.

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

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

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

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

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

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

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

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