www.desrizal.

com

3a
JSON

1

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful