1. Ambil data dari database dan jadikan array
2, gunakan fungsi json_encode yang ada di php, contoh saya ingin mengambil data user yang berada di file user.php dan filenya saya akses melalui url //localhost/user.php sehingga sumber code nya akan terlihat seperti ini
3. untuk menggunakannya dengan vanila javascript pakai ajax aja contohnya seperti ini
const xhr = new XMLHttpRequest[]
xhr.onreadystateChange = function[]{
if[xhr.readyState === 4 && xhr.status === 200]{
console.log[xhr.responseText]
}
}
xhr.open['GET', '//localhost/user.php', true]
xhr.send[]dan jika ingin menggunakannya di reactjs sumber codenya seperti ini
import React, {Component} from 'react'
export default class Home extends Component{
state = {
data : []
}
async componentDidMount[]{
const req = await fetch['//localhost/user.php']
const res = await req.json[]
this.setstate[{data: res}]
console.log[this.state.data]
}
return[
render[]{..}
]
}4. liat di console
browser [ google chrome ] ctrl + shift + i, nanti data jsonnya bakalan keliatan
5. biasanya browser akan ngeblock request yang seperti ini dan akan muncul error CORS [cross origin resource sharing ] karena meminta data dari sumber yang berbeda misal untuk front end aksesnya dari url www.test.com dan data json tadi ada di url www.data.com hal ini secara default tidak dizinkan oleh browser, solusinya kita tambahkan header ini di file untuk ambil data tadi, simpan di paling atas
header["Access-Control-Allow-Origin: *"];
jika cara tersebut tidak berhasil saya sarankan install extension cors
hanya itu saja yang perlu dilakukan 🙌 😎
Saya juga sebenarnya baru belajar , waktu saya download sebuah contoh source code untuk upload/download kemudian melihat Saya coba melihat isi scriptnya. Dalam script Saya melihat cara menampilkan datanya yang sedikit aneh, maksudnya Saya tidak melihat baris – baris script yang tertulis secara panjang, namun anehnya data ditampilkan dalam tabel yang sangat rapih, dan ternyata setelah dicek
memang scriptnya seperti melakukan pemanggilan kesebuah file css, bootstrap dan jquery/javascript, dimana salah satunya file yang dipanggil tersebut adalah file jquery.dataTables.js dan DT_bootstrap.js, disini Saya jadi mengerti bahwa ternyata file – file yang dipanggil tersebut merupakan file yang bertugas dari sisi tampilan tabelnya sementara untuk teknis menampilkan datanya tetap menggunakan script PHP.
Sebelum mempelajari tentang bagaiman menampilkan sebuah
data yang tersimpan dalam database MySQL menggunakan Data Tables, sebaiknya Anda pelajari terlebih dahulu tentang Contoh Script PHP Untuk Menampilkan Data Dalam Database, jadi Saya asumsikan bahwa bila Anda mempelajari ini berarti Anda sudah mengerti tentang proses menampilkan data dalam database MySQL menggunakan script PHP.
Menampilkan Data Dalam Database Menggunakan Data Tables bisa dengan menggunakan langkah - langkah berikut :
- Buatlah dulu sebuah database baru. Bila belum mengerti cara membuat database menggunakn PhpMyAdmin, lihat artikel Cara Membuat Database di PhpMyAdmin XAMPP
- Masukan data secara manual kedalam databse yang sudah Anda buat misal dengan data – data berikut, id, nama, nisn, alamat, asal_sekolah, telepon
- Bila ingin memasukan data ke database yang telah dibuat menggunakan script PHP, silahkan pelajari artikel Contoh Script PHP Untuk Memasukan Data ke Dalam Database
- Selanjutnya siapkan file untuk koneksi ke database. Contoh membuat file koneksi ke database bisa Anda lihat pada artikel Cara Membuat Koneksi ke Databse Mysql Menggunakan Script PHP
- Kemudian buatlah sebuah script PHP untuk menampilkan data dalam database. Contoh
penulisan scriptnya bisa dilihat dibawah ini
.table tr th{ border:#eee 1px solid; position:relative; #font-family:"Times New Roman", Times, serif; font-size:12px; text-transform:uppercase; } table tr td{ border:#eee 1px solid; color:#000; position:relative; #font-family:"Times New Roman", Times, serif; font-size:12px; text-transform:uppercase; }DATA SISWAID NAMA SISWA NISN ALAMAT ASAL SEKOLAH NO HP DELETE Chủ Đề