P. 1
json

json

|Views: 10|Likes:
Published by Tian_Micro_6436

More info:

Published by: Tian_Micro_6436 on May 30, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/23/2013

pdf

text

original

www.desrizal.

com

3a
JSON

1

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

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

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

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

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

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

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

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

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

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

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

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

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->