Halo teman-teman semuanya kembali lagi dengan saya di blog kita bersama, pada kali ini kita akan membahas mengenai Data json, disini mungkin teman-teman belum tahu Apa itu data JSON ?
Data JSON (Javascript Object Notation) adalah Sebuah format data yang digunakan untuk pertukaran dan penyimpanan data.
Sesuai dengan namanya, JSON dibuat dengan Bahasa pemrograman Javascrit, dan dapat dibaca oleh banyak bahasa pemrograman seperti Python, c#, c++, php, dan banyak bahasa permogaraman lainya.
Cara menulis data JSON
Untuk cara penulisan json diawali dengan buka kurung dan tutup kurung kurawal {}, dan untuk penulisan key dan value ditulis dengan tanda tanda petik dua ( "" ), dan untuk penulisan properti gunakan titik dua ( : )
Cara Penulisan Lainya :
cara 1. menggunakan 1 objek biasa
{
"name" : "cakdunme.blogpot",
"Pekerjaan" : "Blogger"
}
cara 2. memasukan value Array kedalam 1 key
{
"name" : [
"cakdun", "ryan","nando"
],
"Pekerjaan" : [
"blogger","Mahasiswa","dosen"
]
}
cara 3. menambahkan 1 objek ke dalam satu key
{
"menu": [
{
"kategori": "pizza",
"nama": "Meat Lover",
"deskripsi": "Irisan sosis sapi",
"harga": 49500,
"gambar": "meat-lover.jpg"
},
{
"kategori": "pizza",
"nama": "Super Supreme",
"deskripsi": "Daging ayam dan sapi asap, paprika hijau.",
"harga": 49500,
"gambar": "supreme.jpg"
}
]
}
Cara Menampilkan Data Json :
Cara 1. Menggunakan PHP
buatkan file dengan nama data.json copykan cara 1 penulisan json dan save ( ctrl + s )
selanjutnya buatkan file index.php dan ikuti source code di bawah ini :
<?php
// Follow My blog cakdunme.blogspot.com
//Ambil file json yang sudah dibuat
$file = "data.json";
$getJson = file_get_contents($file);
// Decode Json atau ubah json menjadi array
$dataJson = json_decode($getJson, true);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cakdun blog</title>
</head>
<body>
<div class="coba">
<h1>Nama : <?= $dataJson['name']; ?></h1>
<h2>Pekerjaan : <?= $dataJson['Pekerjaan']; ?> </h2>
</div>
</body>
</html>
Selanjutnya coba jalankan browser anda dan lihat hasilnya seperti dibawah ini :
Keterangan Source Code PHP :
file_get_contents( ) : berfungsi untuk mengambil file / data json pada php
json_decode('data.json',true) :berfungsi untuk mengubah data json menjadi array associative
Cara 2. menggunakan Javascript
buatkan file dengan index.html dan copy source code di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parsing data Json</title>
</head>
<body>
<div class="coba">
<strong>Menggunakan JAvascript</strong>
<h1></h1>
<h2></h2>
</div>
<script>
//ambil elemen html untuk di isi data json
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');
// Parsing data menggunakan AJAX
const ajax = new XMLHttpRequest();
//ambil data json nya
const dataJson = "data.json";
//cek ajax apakah sudah siap jika sudah siap tampilakn datanya
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
const hasilJson = JSON.parse(ajax.responseText,true);
h1.innerHTML = "Nama : " + hasilJson.name;
h2.innerHTML = "Pekerjaan : "+hasilJson.Pekerjaan;
}
}
//Tentukan Method datanya
ajax.open('GET',dataJson,true);
//kirim ajaxnya
ajax.send();
</script>
</body>
</html>
Selanjutnya jalankan dan hasilnya akan sama seperti ini :
Keterangan Source code Javascript :
JSON.parse() : berfungsi untuk mengubah data json menjadi objek
untuk penggunaan ajax bisa kunjungi halaman CARA MENGGUNAKAN AJAX JAVASCRIPT
atau install source code dengan KLIK DISINI
Nahhh mudah bukan bagaimana cara bekerja menggunakan ajax, selanjutnya kita akan belajar mengenai cara memasukkan data ke dalam JSON, dengan kunjungi halaman Bekerja dengan Json #insert
Sekian dan terimakasih ....
0 Komentar