Berikut adalah JavaScript pada klien, menggunakan panggilan AJAX untuk meminta file PHP dari contoh di atas.
Contoh:
Gunakan JSON.parse() untuk mengonversi hasil menjadi objek JavaScript.
<!DOCTYPE html> <html> <body> <h2>Get data as JSON from a PHP file on the server.</h2> <p id="demo"></p> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "demo_file.php", true); xmlhttp.send(); </script> </body> </html>
Array PHP
Array di PHP juga akan diubah menjadi JSON saat menggunakan fungsi PHP json_encode():
File PHP
<?php $myArr = array("John", "Mary", "Peter", "Sally"); $myJSON = json_encode($myArr); echo $myJSON; ?>
JavaScript Klien
Berikut adalah JavaScript pada klien, menggunakan panggilan AJAX untuk meminta file PHP dari contoh array di atas:
Contoh
Gunakan JSON.parse () untuk mengonversi hasil menjadi array JavaScript.
<!DOCTYPE html> <html> <body> <h2>Dapatkan data sebagai JSON dari file PHP, dan konversikan menjadi array JavaScript.</h2> <p id="demo"></p> <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj[2]; } }; xmlhttp.open("GET", "demo_file_array.php", true); xmlhttp.send(); </script> </body> </html>
Database PHP
PHP adalah bahasa pemrograman sisi server, dan dapat digunakan untuk mengakses database.
Anggaplah Anda memiliki database di server , dan ingin mengirim permintaan dari klien di mana meminta 10 baris pertama dalam tabel yang disebut “customers”.
Di klien, buat objek JSON yang mendeskripsikan jumlah baris yang ingin dikembalikan.
Sebelum mengirim permintaan ke server, ubah objek JSON menjadi string dan kirimkan sebagai parameter ke url halaman PHP.
Contoh:
Gunakan JSON.stringify () untuk mengubah objek JavaScript menjadi JSON
<!DOCTYPE html> <html> <body> <h2> Dapatkan data sebagai JSON dari file PHP di server. </h2> <p> JSON yang diterima dari file PHP:</p> <p id="demo"></p> <script> var obj, dbParam, xmlhttp; obj = { "limit":10 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true); xmlhttp.send(); </script> </body> </html>
Penjelasan Contoh:
- Tentukan objek yang berisi properti dan nilai “limit”.
- Ubah objek menjadi string JSON.
- Kirim permintaan ke file PHP, dengan string JSON sebagai parameter.
- Tunggu hingga permintaan kembali dengan hasil (sebagai JSON)
- Menampilkan hasil yang diterima dari file PHP.
Lihatlah pada file PHP.
File PHP:
<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?"); $stmt->bind_param("s", $obj->limit); $stmt->execute(); $result = $stmt->get_result(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo json_encode($outp); ?>
File PHP menjelaskan:
- Ubah permintaan menjadi objek, menggunakan fungsi PHP json_decode().
- Akses database, dan isi array dengan data yang diminta.
- Tambahkan array ke sebuah objek, dan kembalikan objek tersebut sebagai JSON menggunakan fungsi json_encode().
Ulangi Hasil
Ubah hasil yang diterima dari file PHP menjadi objek JavaScript, atau dalam kasus ini, array JavaScript:
Contohnya nih misalnya kita membuat aplikasi toko online, nah untuk mengetahui jarak penjual dan consumen kita biasanya menggunakan web jne untuk mengetahui biayanya kan, nah jne kebetulan membuatkan sebuah api yang dapat kita gunakan di website kita, sehingga kita ga perlu lagi untuk membuka web jne, kita hanya memparsing data jne ke website kita, sehingga kita langsung otomatis mengetahui berapa biaya pengiriman si penjual dan si konsumen, ya mungkin kalau kalian sering menggunakan tokopedia atau bukalapak pasti tahu, nah kira-kira seperti itu cara kerjanya.Oke kali ini yang kita ambil data json nya punya data.jakarta.go.id, mungkin kamu pernah mencoba - coba atau tugas kuliah gitu untuk mengambil data (json) lalu di tampilkan menggunakan php, ga perlu berlama - lama lagi mari kita mulai.
Seperti biasa xampp kamu aktifkan terlebih dahulu selanjutkan kita membuat folder dengan nama json dan yang terakhir kita membuat file dengan
nama tampilkan_json.php di C:xampp/htdocs/json/tampilkan_json.php
Oh iya data json yang kita ambil dari
//ppid.jakarta.go.id/json?url=//data.jakarta.go.id/dataset/06f19910-82c3-428f-9e13-14d848486f69/resource/a7cc5803-9993-427b-a3df-9745a233b38d/download/Lomba-bercerita-anak-TerbaikEdited.csv
Kalau kamu ingin mengambil data jakarta yang lain bisa cek di sini //data.jakarta.go.id/ oh iya ini resmi kok dan boleh digunakan.
Oh iya yang kita lakukan ini online ya, jadi pastikan koneksi internet kamu berjalan dengan baik, sebenarnya bisa juga kok kalau offline, tapi kamu perlu men-download terlebih dahulu.
kita rekap dulu ya apa saja yang sudah kita kerjakan
- Xampp aktifkan yaitu apache dan mysql.
- Buat folder di htdocs dengan nama json dan di dalam json buat file dengan nama tampilkan_json.php
- Buka data json di
- //ppid.jakarta.go.id/json?url=//data.jakarta.go.id/dataset/06f19910-82c3-428f-9e13-14d848486f69/resource/a7cc5803-9993-427b-a3df-9745a233b38d/download/Lomba-bercerita-anak-TerbaikEdited.csv
Selanjutnya mari kita buka file tampilkan_json.php di text editor yang sering kamu gunakan bisa notepad++, sublime text, atom.io, bracket dan masih banyak lagi, gunakan yang membuat kamu nyaman.
Codinganya seperti dibawah ini ya
Tampilanya akan seperti dibawah ini ya
Oke biar ga bingung om bewok bakal jelasin satu persatu.
$sumber = '//ppid.jakarta.go.id/json?url=//data.jakarta.go.id/dataset/06f19910-82c3-428f-9e13-14d848486f69/resource/a7cc5803-9993-427b-a3df-9745a233b38d/download/Lomba-bercerita-anak-TerbaikEdited.csv'; $konten = file_get_contents($sumber); $data = json_decode($konten, true);Oke $sumber ini adalah data json nya berada dimana ? nah ada di link yang sudah di berikan oleh om bewok.
$konten kita mengambil file di $sumber
Lalu kita membuat table dan di dalamnya membuat looping
<?php for($a=0; $a < count($data); $a++) { print "<tr>"; // penomeran otomatis print "<td>".$a."</td>"; // menayangkan print "<td>".$data[$a]['tahun']."</td>"; print "<td>".$data[$a]['jenis']."</td>"; print "<td>".$data[$a]['juara']."</td>"; print "<td>".$data[$a]['nama']."</td>"; print "<td>".$data[$a]['sekolah']."</td>"; print "<td>".$data[$a]['id']."</td>"; print "</tr>"; } ?>
Ini mirip banget ketika kamu menampilkan data mysql menggunakan php, mungkin kalau kalian sudah biasa menggunakan php dan mysql pasti sudah paham dengan ini
Itu saja tutorial ini semoga berguna buat teman - teman yang masih belajar, jika masih ada yang kebingungan kalian bisa bertanya di kolom komentar.