www.desrizal.

com

3a
JSON

1

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful