Ambil data dari mysql menjadi file json dengan javascript

Gan mau nanya klo cara ambil data dari db mysql terus dikonversi jadi file json sama javascript gimana yah?
Nanti file jsonnya bakal di request gitu buat di tampilin sama reactjs
Minta bantuan nya gan saya masih newbie hehe
avatar nogi

Ditanyakan oleh @nogi

19 Kontribusi 2 Poin

Login untuk menanggapi


Jawaban Terpilih

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 http://localhost/user.php sehingga sumber code nya akan terlihat seperti ini
<?php 

$con = mysqli_connect('localhost', 'root', '', 'db_name');
$sql = mysqli_query($con, "SELECT * FROM user");
$data = [];
while($res = mysqli_fetch_object($sql)){
        // memasukan data ke variable $data
        array_push($data, ["username" => $res->username, "password" => $res->password]);
}
// mengubah array menjadi json
echo json_encode($data);

?>
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', 'http://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('http://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 ๐Ÿ™Œ ๐Ÿ˜Ž
avatar rizki4106

Dijawab oleh @rizki4106

37 Kontribusi 22 Poin

Jawaban

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 http://localhost/user.php sehingga sumber code nya akan terlihat seperti ini
<?php 

$con = mysqli_connect('localhost', 'root', '', 'db_name');
$sql = mysqli_query($con, "SELECT * FROM user");
$data = [];
while($res = mysqli_fetch_object($sql)){
        // memasukan data ke variable $data
        array_push($data, ["username" => $res->username, "password" => $res->password]);
}
// mengubah array menjadi json
echo json_encode($data);

?>
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', 'http://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('http://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 ๐Ÿ™Œ ๐Ÿ˜Ž
avatar rizki4106

Dijawab oleh @rizki4106

37 Kontribusi 22 Poin

  • mantep gan thanks yah hehe - @nogi

Login untuk menanggapi


Login untuk gabung berdiskusi