Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Web2 Json

    Hochgeladen von

    Moh Nur Alifani
    18 Ansichten13 Seiten
    json

    Originaltitel

    WEB2_JSON

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    json

    Copyright:

    © All Rights Reserved
    Als PDF herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    18 Ansichten13 Seiten

    Web2 Json

    Hochgeladen von

    Moh Nur Alifani
    json

    Copyright:

    © All Rights Reserved
    Als PDF herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 13
    nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia Ketika Ajax mengirim request ke server, maka akan ada balasan dari server berupa data. Nah, data yang dikirim dari server ke ajax ini ada macam-macam. Pada contoh-contoh sebelumnya, anda telah melihat data yang dikirim berupa text atau HTML. Seperti contoh di bawah ini, program PHP memberikan data berupa HTML while (Sk-mysql_fetch_array (Squery)) ( echo '<1i onClick="isi(\'!.$k[0].'\");" atyle="cursor:pointer">' $k [0].''; , Pada contoh tersebut, program PHP memberikan output berupa HTML dengan tag
  • . Ada beberapa format data yang populer yang biasa digunakan untuk untuk mengirim data dari server ke client, yaitu JSON, Text, AHAH, XML dan lainnya. JSON JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditutis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 Desember 1999. 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++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data. Beberapa orang lebih suka JSON, karena paling mudah untuk mem-parse-nya, hanya menempatkan sebuah eval dan selesai sudah. JSON terbuat dari dua struktur: = Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array. + Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence). Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa Pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan, Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini. JSON menggunakan bentuk sebagai berikut: ‘Object adalah sepasang nama/nilai yang tidak terurutkan. Objek dimulai dengan { (kurung kurawal buka) dan diakhiri dengan } (kurung kurawal tutup). Setiap nama diikuti dengan : (titik dua) dan setiap pasangan nama/nilai dipisahkan oleh , (koma). Sumber : www. son.org 21 hrap:lblog.codingweav.com PHP Ajax Javascript jQuery Tutorial Indonesia Array adalah kumpulan nilai yang terurutkan, Larik dimulai dengan [ (kurung kotak buka) dan diakhiri dengan J (kurung kotak tutup). Setiap nilai dipisahkan oleh , (koma). Sumber : www. json.org Nilai (value) dapat berupa sebuah string dalam tanda kutip ganda, atau angka, atau true atau false atau null, atau sebuah objek atau sebuah larik. Struktur-struktur tersebut dapat disusun bertingkat. wales Sumber : www. json.org String adalah kumpulan dari nol atau lebih karakter Unicode, yang dibungkus dengan tanda kutip ganda. Di dalam string dapat digunakan backslash escapes “\° untuk membentuk karakter khusus. Sebuah karakter mewakili karakter tunggal pada string. String sangat mirip dengan string C atau Java. 28 hrap:lblog.codingweav.com PHP Ajax Javascript jQuery Tutorial Indonesia shiny Any OWiGUDE cnaracter except "er \ orcontrol character Sumber : www Json.org ‘Angka adalah sangat mirip dengan angka di C atau Java, kecuali format oktal dan heksadesimal tidak digunakan. Sumber : www json.org 29 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia Contoh JSON Sekarang mari kita lthat contoh-contoh bentuk JSON yang saya ambil dari json.org. Berikut bentuk XML, yang telah familiar dengan kita. File"> New" onclick="CreateNewboc()" /> Open" onclick="Opendoc()" /> Close" onclick="Closeboc()" /> Jika kita ubah ke bentuk JSON adalah : (menu: ( wid": "Eile", value": "File", "popup": { wnmenuiten": [ ("value": "New", "onclick": "CreateNewDoc()"), ("value": "open", "onclick": "OpenDoc(}"), ("value": "Close", "onclick": "Closeboc()") 1 ) » Bentuk XML. cwidget> on cname>main_window 500 cheight>500 250 250 center ctext data="Click Here” size="26" style="hold"> text1 250 100 center sunl.opacity = (sunl.opacity / 100) * 90; 30 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia Bentuk JSON : (Mwidgee": { "debug": "on", mwindow": ( ntitle": "Sample Konfabulator Widget", "name": "main_window", nwidth": 500, "height": 500 "image" “Images /Sun.png", name": "sunl", shoffset": 250 nvoffset": 250, alignment": "center" » Meext™: ( Ndata": "Click Here", wsize": 36, nstyle": "bold", "name": "text", shoffset": 250, svoffset": 100, "alignment": "center", “onMouseUp": “sunl.opacity = (sunl.opacity / 100) * 90;" ) » XML, JSON < xx yystnnt>< /xx> Comet: (yy Membuat JSON di sisi server Sekarang mari kita lihat bagaimana cara membuat bentuk bentuk JSON. Dar sisi server kita akan membuat JSON menggunakan PHP, pada PHP versi 5.2 telah terdapat fungsi untuk membuat JSON, yaitu fungsi json_encode() . Syntax-nya adalah sebagai berikut, string jsonencode ( mixed Svalue [, int Soptions= 0} ) Svalue, adalah nilai yang akan di encode menjadi string JSON Soption, bisa berupa JSON_HEX_QUOT, © JSON_HEX_TAG, | JSON_HEX_AMP, JSON_HEX_APOS, JSON_FORCE_OBJECT, defaultnya adalah 0 Contoh : i, 'b'=92,'c'=>3,! wd, Fete>5); echo json_encode (Sarr); 31 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia Kode di atas akan menghasilkan : (ane *BYE2y"e" ES y "a" Fae 75) Selain menggunakan json_encode(), kita juga bisa membuat JSON secara manual dengan menggunakan PHP. Misal, kita memiliki tabel di MySQL dengan struktrur sebagai berikut CREATE TABLE “message” ( message_id” INT(11) NOT NULL AUZO_INCREMENT, chat_id™ INT(11) NOT NULL DEFAULT '0', userid’ INT(11) NOT NULL DEFAULT '0', username’ VARCHAR(64) DEFAULT NULL, ‘message’ TEXT, *post_time’ DATETIME DEFAULT NULL, PRIMARY KEY (*message_id’) ) Isi dari tabel tersebut adalah sebagai berikut message id chat id _user_id user_name message post_time 1 1 1 Nurmi Halo apa kabar ‘4/28/2010 17:30 2 1 2 Desrizal —_Kabar Baik 4/28/2010 17:30 3 1 1 Nurmi Lagi di mana 4/28/2010 17:30 4 1 2 Desrizal _Belitung 4/28/2010 17:30 Dan kita ingin membuat JSON dari tabel di atas dengan bentuk seperti int : (*messages™ (pesan®:[ (tidt: 9a", wuser": "Nurmi", "text": “Halo apa kabar", "time": "4/28/2020 17:30" Pera wuser": "Desrizal", "text": "Kabar Baik", "time": "4/28/2020 17:30" ye(tians 83", wuser": "Nurmi", "text": “Lagi di mana", "time": "4/28/2020 17:30" yeetians am, wuser": “Desrizai", ntext": "Belitung", "time": "4/28/2010 17:30" ) Berikut kode PHP untuk membuat JSON tersebut. Kode 5. Membuat JSON dengan PHP secara manual (phpjson.php) <2pap mysql_connect ("localhost™, "root", "*); mysqlaselect_do("test"}; 32 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia $json = "("messages": ("7 $query = mysql_query ("select * fron message"); $json .= "pesan":[ ' while($x -mysql_fetch_array (Squery)) ( Sjson = 10; $json .= Tid": "' . $xi'message_id'] . '* vuser": "' . htmlspecialchars($x['user_name']) . '™, "text": "' . htmlspecialchars($x['message']} . '", "time": "' | $x["post_time'] .'™ 05 ) (/pitangkan koma (,) di akhiz $json = substr($json,0,strlen($json)-1); (/engkapi penatup format JS0N Sjeon = 14; $json .= ')) echo $json; 2 Pada contoh di atas, kita membuat JSON secara manual, yang penting adalah kita harus tahu penempatan setiap elemen. Jika kita lihat outputnya di browser akan seperti berikut : 2 mipecato/B'/an hp Window er aro pros Yao! Gor Bie iteaoa #8) 41/xl (or as fete [Bl-[igman. mei |Be. «Bao. | M- OO tho eee Sew Teer "| (messages. (pesan"{ (i I’ "esr. Num "eat Halo apa kaka’ ine’ "2010-04-28 17.3026"). “user: Desa, tex: "Kabar Baie’, Sime's"2010-04-28 17:30:34) (i:"3, user: "Nurm, ten’ "Lag diana’. “me's "2010-08-28 178042" } (8 user “Desrza "ext “Being, “Sme 2010-04-28 173041" })}) Gambar 4. Tampilan phpjson.php Mem-parse JSON di sisi client Oke, setelah kita mengetahui bagaimana cara membuat output dengan format JSON, sekarang mari kita hat bagaimana cara menguraikan format JSON tersebut menggunakan javascript. Untuk menguraikan /mem-parse JSON adalah dengan menggunakan fungsi eval("(" + jsonteks + ")") Selain menggunakan eval(), kita juga bisa menggunakan fungsi-fungsi yang telah dibuat orang lain, seperti yang ada di www.json.org. Para ahli, menyarankan untuk menghindari penggunaan eval (), karena kurang aman, sebaiknya ‘gunakan fungsi-fungsi yang dibuat oleh orang lain (seperti : http: //www.JSON.org/json_parse.js) . Tetapi sebagai contoh pelajaran, saya akan mempertihatkan cara mem-parse menggunakan eval (). Untuk menyederhanakan contoh berikut, saya tidak membuat kode yang berbau ajax, saya anggap kita sudah memiliki teks yang berformat JSON. 33 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia Kode 6, Mem-parse JSON (parsejson.html)
    | be: focabest/bukufB0b3foorzeison.nint ‘Numi ssesea2 racas Halo apa kabar Desrizal soinsest 3034 Koaber Baik ‘Numi seas race Lagi dimana Desrizal xioeeat 1720s) Beltung Gambar 5. Tampilan parsejson.html 34 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia JSON Object kita telah mempelajari cara mem-parse JSON menggunakan eval (). Kelemahan menggunakan eval () adalah kurang aman. Untuk itu, maka pada FF3.5+, IE8+, dan Opera 10.5+ diperkenalkan Javascript built in JSON Object. JSON Object menyediakan metode untuk mengubah objek JSON menjadi string dan JSON string menjadi objek javascript. Berikut adalah metode-metode dari JSON Object. stringify(obj, [replacer], [space]) Berguna untuk mengubah javascript object menjadi JSON String. Contoh : var jsonobjei "Albert "]} var jsonstr=JSON. string: fy (jsonobjek) alert (typeof jsonstr) //string parse(string, [reviver]) Berguna untuk mengubah JSON String menjadi Javascript Object Contoh : jama":"Desrizal", "umur":28, "teman*:(*Nurmi", "Sarah", var jeonstr="{"nama":"Desrizal", Yumur":28, "teman":["Nurmi", "Sarah", "Albert"}}* var george=JSON.parse(jsonstr) //convert JSON string into object alert (george.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, Pertama-tama mari kita buat tabel di database, sengan struktur tabel sebagai berikut : CREATE TARLE “drzchat* ( ~nomor” int (3) NOT NULL auto_increment, *nama’ varchar (20) NOT NULL, *pesan” varchar (200) NOT NULL, *waktu® varchar (10) NOT NULL, PRIMARY KEY (“nomor”) is Kemudian mari kita buat tampilan layout HTML nya dan program Ajax di sisi client. Kode 6, drzchat.htm! DRZ Chat 1.0 Nama :

    pesan siz Pada program chat sisi client di atas, pertama-tama user harus memasukkan nama mereka di suatu. teks input. Setelah kita menekan tombol login, maka segera dijalankan fungsi ambi 1Pesan(). Di mana fungsi ini berfungsi untuk melakukan request ke server untuk mengambil data dari server, ambilchat.php. Data yang diambil dari server berupa teks dengan format JSON sebagai berikut : (messages™ (pesan": [ (tiat 2935", "nama": "Batman", "teks": "halo Nurmi", swaktu":"16:31" }, ("iar 2936", "nama": "Nurmi", "teks": "halo juga", swaktu":"16:31" ), (ia"s937", "nama": "desrizal", "teks": "hai apa kabar", swaktu":"16:47" } 37 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia ) Format JSON tersebut diambil dari server, yang di masukkan ke dalam variable data, kemudian kita gunakan eval untuk mengubah JSON string menjadi objek javascript var data eval (*("+ajaxku.responseText#") "); Kemudian Objek JSON yang telah di-parse di atas kita masukkan ke dalam
    for (i=0; icdata.messages pesan.length; i++) { _div.inneriTML, |= ""|data.messages.pesan(i).namai" "; \atldiv-innerHIMs += "("+data,messages.posan [i] .wakeur"} "7 hat_div.innerHIML +=" : "4data.messages.pesan[i).ceks+"
    "; chat_div.scroliTop = chat_div.scroliHeight; pesanakhir = data.messages.pesan([i).id; ) Supaya ajax hanya megambil data dari pesan yang terakhir maka kita juga mengirimkan nomor pesan id terakhir pesanakhir = data.messages.pesan[i).id; Supaya ajax mengambil data tiap satu detik maka kita gunakan fungsi setTimeout() 100) 5 Biasanya kalau kita chat, kita ketik pesannya di input teks lalu kita tekan ENTER, biasanya kalau form di tekan ENTER akan otomatis ter-submit dan halaman akan bertukar. Untuk mencegah halaman ter-submit ketika tekan enter, maka kita blok menggunakan fungsi berikut : timer = setTimeout ("anbilPesan()" function aturkirimPesan() ( clearInterval (timer) ; ambilPesan(); ) Fungsi di atas dipanggil ketika ada event onSubmit.
    Sekarang mari kita lihat kode PHP di sisi server, di mana di program PHP ini kita membuat output data berformat JSON Kode 7. ambilchat.php <2pap mysql_connect ("localhost", "root", ""); mysql_select_dai"test"); $nama = $_GET[*nama'] $pesan = $_GET("pesan']; Swaktu = date("H:i"); Sakhir = $_GBT(‘akhir']; $json = '("messages": ("; if (Sakhir==0) { $nomor = mysdl_query("select nomor from drzchat order by nomor dese Limit 1"); $n = mysql_fetch_array($nomor) ; $no = $n{"nomor'] + 1; 38 nip: /blog.codingwear.com PHP Ajax Javascript jQuery Tutorial Indonesia $json = pesan"?( (7 Sjson v= 'id":"!.gno.'", snama": "Admin", "teks": "Selamat datang di chatting room", mwaktut:"",Swaktu.*" a5 §masuk = mysal_query("insert into drzchat values (null, ‘Admin’, "nama bergabung dalam chat', 'Swaktu')"); pelse( if ($pesan) ( Smasuk = mysql_query ("insert into dezchat values (null, "$nama", 'Spesan’, 'Swaktu')"); ) Squery = mysal_query("select * from drzchat where nomor > Sakhir"); $3son .- "pesan":[ "5 while($x = mysqi_fetch_array ($query) ) { Sjson = "(7 $json .= '"id":"".$x['nomor']."", "nama": "* -htmlspecialchars(Sx{'nama']).'", "teks": "" -htmlspecialchars(Sx["pesan"]).'", mwaktu":"".$x["waktu']. 1” V7 ) $json = substr($json,0,strlen($json)-1); $json w= ']'; ) json = 1: echo $json; Logika dari program di atas adalah : 1. Lakukan koneksi ke server MySQL 2. Ambil nilai-nilai parameter yang di berikan oleh client dengan metode GET 3. Cek apakah user pertama kali login dengan melihat nilai variable Sakhir, jika bernilai 0 artinya adalah user chat pertama kali, lalu kita kirim data berupa string berformat JSON, tucapan selamat data dari admin, lalu kita masukkan ke dalam database untuk supaya user lain mengetahui ada user lain yang login 4. Apabila nilai Sakhir besar dari 0, artinya user bukan masuk untuk pertama kalinya, berikan data-data dari database setelah yang terakhir dia dapat, yang kita dapat dari variable Sakhir Squery = mysql_query ("select * from drachat where nomor > Sakhir"); 5. Ouput yang kita buat dengan format json, untuk mengirim data ke client cukup melakukan echo $3son;. Berikut adalah tampilan dari aplikasi chat kita. 39

    Das könnte Ihnen auch gefallen