konsep dasar JSON dan penggunaanya

hello sobat kali ini saya akan share konsep dasar JSON dan penggunaanya mohon disimak baik baik sobat :D langsung cermati ya sobat

Apa itu JSON ? Bagaimana menggunakannya dalam code-code kita ? Mungkin teman pernah mendengar istilah JSON ini saat membaca tutorial-tutorial mengenai implementasi dari AJAX. Ya memang saat ini JSON sangat diperlukan sekali guna implementasi AJAX. Saya sendiri pertama kali dengar istilah ini sekitar 2 tahun lalu saat dosen saya mengajarkan AJAX dengan PHP. Tapi gak mudeng

…

Sekarang sudah mengerti dikit, jadi saya coba share agar nanti tidak lupa dan dapat digunakan untuk teman-teman yang sedang belajar JSON juga.

Sama seperti XML, JSON berfungsi untuk merepresentasikan data. Ingat hanya data saja focus utamanya. Yang tentunya antara XML dan JSON memiliki kelebihan dan kelemahannya serta cara merepresentasikan data juga berbeda sintaxnya. Teman bisa perjelas hal itu di artikel ini.

JSON sendiri singkatan dari JavaScript Object Notation. Ada hubungannya dengan Javascript ya..

Lalu bagaimana menggunakannya ? Berikut adalah contoh codenya.

<html>
<head>
<title>JSON testing - adiputra</title>
<script type='text/javascript'>
 var JSON_adi = {nama:’adiputra’};
 document.write (JSON_adi.nama);
</script>
</head>
<body>
</body>
</html>

JSON_adi adalah nama variable pada javascript yang menunjukan bahwa variable tersebut berbentuk Object JSON karena terdapat kurung kurawal *{} *. Di dalam kurung kurawal terdapat atribut * nama * dengan value * adiputra *. Ingat * nama * adalah atribut, sedangkan * adiputra * adalah value dari atribut * nama * dan keduanya dipisahkan dengan titik dua * : *. Lalu untuk memanggil valuenya kita dapat panggil dengan code

document.write (JSON_adi.nama);

Begitu kurang lebihnya, jadi variable JSON_adi merepresentasikan data dimana data tersebut memiliki atribut * nama * dengan value * adiputra *. Datanya kalau integer bagaimana ? lalu bisa data array tidak ?

Berikut contoh tambahan code lagi

<html>
<head>
<title>JSON testing - adiputra</title>
<script type='text/javascript'>
 var JSON_adi = {
      nama:'adiputra',
      umur:21,
      status_nikah:false,
      hobi:['coding','main game','ngetik']
       };
       
 var nikah;
 
 if(JSON_adi.status_nikah){
  nikah = "sudah nikah";
 }else{
  nikah = "belum nikah";
 }
 
 document.write (JSON_adi.nama +" berumur "+JSON_adi.umur+" suka "+JSON_adi.hobi[0]+ " dan "+nikah);
 
</script>
</head>
<body>
 
</body>
</html>

Pada code diatas, kita dapat membuat data tipe integer, Boolean dan juga array. Cara pemanggilannya pun sederhana bukan…Didalam array kita juga dapat membuat data object lagi berikut contohnya :

<html>
<head>
<title>JSON testing - adiputra</title>
<script type='text/javascript'>
 var JSON_adi = {
      nama:'adiputra',
      umur:21,
      status_nikah:false,
      hobi:['coding','main game','ngetik'],
      teman:[
        {nama:'anas', universitas:'UGM'},
        {nama:'wahyu', universitas:'UNIKOM'},
        {nama:'adesetio', universitas:'UGM'},
        {nama:'nano', universitas:'UNIKOM'}
      ]
       };
       
 var nikah;
 
 if(JSON_adi.status_nikah){
  nikah = "sudah nikah";
 }else{
  nikah = "belum nikah";
 }
 
 document.write(JSON_adi.nama +" berumur "+JSON_adi.umur+" suka "+JSON_adi.hobi[0]+ " dan "+nikah+ "<br />");
 document.write("List teman : <br />");
 document.write("<ol>")
 for(var i=0; i<JSON_adi.teman.length; i++){
  document.write("<li>" + JSON_adi.teman[i].nama + " kuliah di " + JSON_adi.teman[i].universitas + "</li>");
 }
 document.write("</ol>")
 
</script>
</head>
<body>
 
</body>
</html>

Dari code diatas, moga teman mengerti ya. Silahkan komentar / kritik bila kurang mengerti.

Lalu bagaimana implementasi ke PHP-nya ? Berikut ini saya coba membuat code untuk menjelaskannya :

<?php
 $array_adi = Array(
  "nama" => "adiputra",
  "nim" => "10107633",
  "jurusan" => "TI",
  "kelas" => "IF-13"
 );
 echo "Array dalam PHP : ";
 print_r($array_adi);
 echo "<br />";
 echo "-------------------------------------------<br />";
 
 echo "Array yang sudah convert ke JSON : ";
 $json_adi = json_encode($array_adi);
 print_r($json_adi);
 
 
 echo "<br /><br />"
?>

<html>
<head>
 <script language='javascript'>
  function ubah_json(){
   var text_json = document.getElementById("json_id").value;
   
   var json_obj = eval('('+text_json+')');
   
   alert(json_obj.nama+ " kelas " +json_obj.kelas+ " jurusan " +json_obj.jurusan+ " NIM "+json_obj.nim);
  }
 </script>
</head>
<body>
<form action="tes_json.php" method='POST'>
 <input type='hidden' name='json_text' id='json_id' value='<?php echo $json_adi; ?>' />
 <input type='submit' name='tbl' value="Convert ke Array lagi" />
 <input type='button' name='button1' value='Ubah ke Object JSON' onclick='ubah_json()'/>
</form>
</body>
</html>

<?php 
 if($_POST[tbl]=="Convert ke Array lagi"){
  // ubah bentuk string menjadi bentuk array
  echo "<b>Sebelum Slash dihapus : </b>".$_POST[json_text]."<br /><br />";
  
  $hilang_slash = stripslashes($_POST[json_text]);
  echo "<b>Sesudah Slash dihapus : </b>".$hilang_slash."<br /><br />";
  
  $array_back = json_decode($hilang_slash);
  echo "<b>Hasil convert menjadi array kembali : </b>";
  print_r($array_back);
 }
?>

Awalnya saya membuat array seperti ini.

$array_adi = Array(
  "nama" => "adiputra",
  "nim" => "10107633",
  "jurusan" => "TI",
  "kelas" => "IF-13"
 );

Lalu setelah itu saya ubah menjadi bentuk sementara JSON sehingga nanti bisa dimanipulasi di javascript. Untuk mengubanya PHP tinggal menggunakan code json_encode(). Sebenarnya hasil dari json_encode() berbentuk string.

Disini, saya coba dahulu melakukan convert bentuk string yang baru saja di encode dengan code json_encode() menjadi sebuah array kembali dengan perinta json_decode().

Perintah stripslashes() berfungsi untuk menghapus tanda slash * / * karena bentuk dari array yang sudah diconvert menjadi String .

Hasilnya bisa dilihat pada gambar dibawah ini.

Lihat, kita telah berhasil mengubah kembali menjadi array bukan…
Sekarang kita ubah menjadi object dalam Javascript. Klik saja tombol Ubah ke Object JSON, lalu lihat alert yang muncul ? taadaaa….kita sudah membuatnya dalam bentuk object javascript

Kok bisa ? lihat codenya ya..Yang paling penting adalah code

var json_obj = eval('('+text_json+')');

dimana text_json didapat dari id element text input yang valuenya dari encode_json() pada coding PHP.

demonya bisa diliat di bawah ini : [ demo ]

Sampai sini, moga ada sedikit pemahaman mengenai apa itu JSON dan hubungannya dengan PHP. Nanti saya coba buat artikel bagaimana menggunakan json untuk aplikasi Ajax.

Mohon koreksi juga kalau ada yang salah ya

Title : konsep dasar JSON dan penggunaanya
Description : hello sobat kali ini saya akan share konsep dasar JSON dan penggunaanya mohon disimak baik baik sobat :D langsung cermati ya sobat Apa itu ...

konsep dasar JSON dan penggunaanya

0 Response to "konsep dasar JSON dan penggunaanya"

Posting Komentar