www.desrizal.

com

3a
JSON

1

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful