Berikut adalah cara membuat CRUD dengan MySql pada React pada Front-End :
untuk membuat Font-End dengan React, tentunya sudah harus terinstall Node.js yang didalamnya ada npm atau yarm, dimana yang digunakan ada npm pada artikel ini
untuk cara install Node.js bisa dibaca sesuai dengan OS yang digunakan pada link bawah ini :
Setelah Node.js sudah diinstall dan berjalan maka selanjutnya akan membuat project React sebagai berikut :
1. Buat project, lalu buka new terminal, masuk pada folder fullproject, kemudian ketik perintah :
npx create-react-app frontend
maka akan terdapat folder backend dan fontend didalam folder fullproject
Pada terminal, lalukan langkah dibawah :
Setelah itu masuk ke dalam folder frontend, ketikan perintah :
cd frontend
Kemudian install react-router-dom, axios, dan bulma dengan perintah :
npm install react-router-dom axios bulma
Setelah instalasi selesai, ketikan perintah berikut untuk menjalankan project:
npm start
Lalu buka browser ketikan http : //localhost:3000
2. Components
Buat folder “components” di dalam folder “frontend/src”. dan buat file didalam folder components terdiri dari :
“ProductList.js”
“AddProduct.js”
“EditProduct.js”
sehingga terlihat gambar berikut:
Kemudian buka file dan isikan sintak masing-masing file tersebut :
“AddProduct.js”
import { useState } from 'react'
import axios from "axios";
import { useHistory } from 'react-router-dom';
const AddProduct = () => {
const [nama, setNama] = useState('');
const [harga, setHarga] = useState('');
const history = useHistory();
const saveProduct = async (e) => {
e.preventDefault();
await axios.post('http://localhost:5000/products',{
nama: nama,
harga: harga
});
history.push("/");
}
return (
<div>
<form onSubmit={ saveProduct }>
<div className="field">
<label className="label">Nama</label>
<input
className="input"
type="text"
placeholder="Nama"
value={ nama }
onChange={ (e) => setNama(e.target.value) }
/>
</div>
<div className="field">
<label className="label">Harga</label>
<input
className="input"
type="text"
placeholder="Harga"
value={ harga }
onChange={ (e) => setHarga(e.target.value) }
/>
</div>
<div className="field">
<button className="button is-primary">Save</button>
</div>
</form>
</div>
)
}
export default AddProduct
“EditProduct.js”
/* eslint-disable react-hooks/exhaustive-deps */
import { useState, useEffect } from 'react'
import axios from "axios";
import { useHistory, useParams } from 'react-router-dom';
const EditProduct = () => {
const [nama, setNama] = useState('');
const [harga, setHarga] = useState('');
const history = useHistory();
const { id } = useParams();
const updateProduct = async (e) => {
e.preventDefault();
await axios.patch(`http://localhost:5000/products/${id}`,{
nama: nama,
harga: harga
});
history.push("/");
}
useEffect(() => {
getProductById();
}, []);
const getProductById = async () => {
const response = await axios.get(`http://localhost:5000/products/${id}`);
setNama(response.data.nama);
setHarga(response.data.harga);
}
return (
<div>
<form onSubmit={ updateProduct }>
<div className="field">
<label className="label">Nama</label>
<input
className="input"
type="text"
placeholder="Nama"
value={ nama }
onChange={ (e) => setNama(e.target.value) }
/>
</div>
<div className="field">
<label className="label">Harga</label>
<input
className="input"
type="text"
placeholder="Harga"
value={ harga }
onChange={ (e) => setHarga(e.target.value) }
/>
</div>
<div className="field">
<button className="button is-primary">Update</button>
</div>
</form>
</div>
)
}
export default EditProduct
“ProductList.js”
import { useState, useEffect } from 'react'
import axios from "axios";
import { Link } from "react-router-dom";
const ProductList = () => {
const [products, setProduct] = useState([]);
useEffect(() => {
getProducts();
}, []);
const getProducts = async () => {
const response = await axios.get('http://localhost:5000/products');
setProduct(response.data);
}
const deleteProduct = async (id) => {
await axios.delete(`http://localhost:5000/products/${id}`);
getProducts();
}
return (
<div>
<Link to="/add" className="button is-primary mt-2">Add New</Link>
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Harga</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{ products.map((product, index) => (
<tr key={ product.id }>
<td>{ index + 1 }</td>
<td>{ product.nama }</td>
<td>{ product.harga }</td>
<td>
<Link to={`/edit/${product.id}`} className="button is-small is-info">Edit</Link>
<button onClick={ () => deleteProduct(product.id) } className="button is-small is-danger">Delete</button>
</td>
</tr>
)) }
</tbody>
</table>
</div>
)
}
export default ProductList
Catatan :
pada artikel ini merupakan lanjutan dari pembuatan Back-End, yang bisa dibaca : CRUD MySQL dengan ReactJS - I [ Back - End ] dan untuk lanjutan pembuatan Front-End, yang bisa dibaca : CRUD MySQL dengan ReactJS - III [ Finish ]
