www.desrizal.

com

3a
JSON

1

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful