reactjs

Menampilkan data dari database

Tujuan Akhir:

Ketika menu List ditekan maka akan tampil tabel yang berisi List Donasi seperti gambar yang terlihat dibawah ini:

 

1. Membuat File di Back-End

Buatlah sebuah file apiAmbilDataDonasi.php dengan isi seperti berikut ini:

<?php

header(‘Access-Control-Allow-Origin: http://localhost:3000’);

$servername = “localhost”;
$username = “userMySQLmu”;
$password = “passwordMySQLmu”;
$dbname = “namaDatabasemu”;
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die(“Connection failed: “. $conn->connect_error);
}
$sql = “select * from wp_donasi”;
$hasil  = $conn->query($sql);
if ($hasil->num_rows > 0) {
echo json_encode(mysqli_fetch_all($hasil,MYSQLI_ASSOC));
}
$conn->close();
?>

Keterangan:

  • mysqli_fetch_all adalah fungsi yang digunakan untuk mengambil semua baris
  • MYSQLI_ASSOC berarti hasilnya berbentuk array assosiatif

 

2. Membuat File di Front-End

Buatlah file src/pages/listDonasi.js dengan kode berikut ini:

import { useState,useEffect } from “react”;
import axios from ‘axios’;
function ListDonasi(){
const [dataDonasi, setDataDonasi] = useState([])
let ambil = async () =>{
try{
let respon = await axios.get(“http://urlWebsitemu/apiAmbilDataDonasi.php”)
setDataDonasi(respon.data)
}catch(er){
console.log(er)
}
}
 useEffect(() => {
   ambil()
  }, []);
  return (
    <div>
<center><h3>List Donasi</h3></center>
<table className=”table table-striped”>
<thead>
<tr>
<th>No.</th>
<th>Judul</th>
<th>Foto</th>
<th>Jumlah target</th>
<th>Expired</th>
</tr>
</thead>
<tbody>
{dataDonasi.map((item) => (
<tr>
<td>{item.id}</td><td>{item.judul}</td><td>{item.foto}</td><td>{item.jumlah_target}</td><td>{item.tgl_expired}</td>
</tr>
))}
</tbody>
</table>
</div>
 )
}
export default ListDonasi;

Keterangan:

  • useState adalah fungsi react yang digunakan untuk membuat variabel yang datanya tersimpan ketika aplikasi masih berjalan.
  • useEffect adalah fungsi react yang disini digunakan sebagai tempat untuk pengambilan data dari Back-End
  • [dataDonasi, setDataDonasi], dataDonasi adalah nama variabel sedangkan setDataDonasi adalah fungsi yang akan memberikan nilai ke dataDonasi
  • setDataDonasi(respon.data) kode ini berarti kita memberikan nilai dari respon.data kepada variabel dataDonasi
  • {item.judul} kode ini digunakan untuk menampilkan isi dari variabel item.judul

 

3. Perubahan di App.js

Tambahkan kode import berikut ini:

import ListDonasi from ‘./pages/listDonasi.js’;

Tambahkan ke dalam Routes kode berikut ini:

<Route path=”listDonasi” element={<ListDonasi />} />

 

4. Perubahan di layout.js

Rubahlah file src/pages/layout.js lalu masukkan kode berikut ini:

<li><Link to=”listDonasi”>List</Link></li>

Keterangan:

  • <Link to> digunakan untuk pergi ke path internal

 

5. Jalankan Aplikasi

Buka terminal lalu ketik perintah ini:

yarn start