Hallo Teman-teman semuanya, Kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas mengenai cara insert data json menggunakan php & javascript, yang dimana sebelumnya kita sudah membahas mengenai apa itu json dan bagaimana cara menampilkannya, baca pembahasan sebelumnya.
Oke tanpa berlama-lama mari kita langsung masuk ke dalam langkah-langkahnya :
1. Menggunakan Bahasa Pemrograman PHP
langkah 1. Buatkan file dengan nama index.php
copy source code dibawah ini :
<?php
// insert data JSON menggunakan php
// 1. Siapkan array associative untuk nantinya dirubah menjadi data json
$array = [
"nama" => "Nofrosdan Sitopu",
"Pekerjaan" => "blogger",
"Motive" => "Jangan lupa follow BLog kita bersama"
];
// 2. Parsingg array associative menjadi data json
$jsonFile = json_encode($array, JSON_PRETTY_PRINT);
// TAMPILKAN FILE JSON NYA, LIHAT DI DALAM TAQ P DI BAWAH
?>
<!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>Menggunakan PHP</title>
</head>
<body>
<h1>Memasukkan data ke dalam json menggunakan php</h1>
<hr>
<h1 style="font-style: italic;">INi hasilnya dan bisa juga
lihat di file data.json</h1>
<strong style="font-style: italic;">
<?= $jsonFile; ?>
</strong>
</body>
</html>
Keterangan Source Code :
json_encode() => Berfungsi untuk Mengubah array associative php menjadi Data Json
Langkah 2. Jalankan source code
jika anda sudah menjalankan source code diatas maka hasilny akan seperti ini
Bisa kita lihat bahwa tampilan diatas sudah menghasilkan data json, dan untuk memnpermudah lagi mari kita tambahkan source code untuk membuat file data.json nya
langkah 3. membuat file.json
untuk membuat file json bisa tambahkan source code dibawah ini :
// buatkan file json nya dengan cara ini :
if (file_put_contents('data.json', $jsonFile)) {
echo "<script>alert('Data Json Berhasil dibuatkan')</script>";
} else {
echo "<script>alert('Data Json Tidak Berhasil dibuatkan')</script>";
}
Keterangan Source Code :
file_put_contents() => berfungsi untuk membuat file data.json dan di isikan dengan data yang sudah kita ubah menjadi json
Dan jika dijalankan filenya kembali dan anda akan mendapatkan alert seperti ini :
Nah jika ditampilan anda data json nya sudah berhasil maka selanjutnya coba buka side bar editor anda dan lihat data.json maka isinya ialah data json yang sudah kita encode tadi...
2. Insert Data json menggunakan Javascript
Jika menggunakan javascript sangat mudah sekali cukup buatkan file index.html dan copy source code dibawah 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>CARA MEMBUAT JSON MENGGUNAKAN jAVASCRIPT</title>
</head>
<body>
<h1>CARA INSERT DATA KE DALAM JSON MENGGUNAKAN JAvascript</h1>
<hr>
<div class="json">
<h3 style="font-style: italic;">Ini Hail Json nya</h3>
</div>
<script>
const wadah = document.querySelector('.json');
// 1. Buatkan objek array terlebih dahulu yang nantinya akan dirubah menjadi data json
const objek = {
'nama' : "cakdunme.blogspot.com",
"pekerjaan" : "blogger",
"Motive" : "Jangan lupa follow blog kita bersama"
}
// 2. Parsing objek diatas menjadi data json
const dataJson = JSON.stringify(objek);
// 3. TAmpilkan json Ke layar
wadah.append(dataJson);
</script>
</body>
</html>
Keterangan Source code :
JSON.stringify() => berfungsi untuk mengubah objek JS menjadi Data json
Dan selanjutnya anda jalankan source codenya, dan tampilanya akan menjadi seperti gambar dibawah ini
Nahh mudah bukan cara menginsert data json menggunakan php dan javascript, jika ada yang belum dipahami silahkan tinggalkan pesan di kolom komentar....
sekian dan terimakasih ...
0 Komentar