fungsi create
import React, { useState } from 'react'
import Admin from '../layouts/admin'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
export default function CreateProduct() {
const navigated =useNavigate();
const [data, setData,error =[]]:any = useState({
image: '',
name: '',
description: '',
price: '',
stock: ''
})
const handleSubmit = (e: any) => {
e.preventDefault()
console.log(data);
axios.post('http://127.0.0.1:8000/api/products', data, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
setData({
image: '',
name: '',
description: '',
price: '',
stock: ''
})
navigated('/product')
alert('Berhasil di tambahkan')
})
.catch(error => {
console.log(error.response.data)
})
}
const handleChange = (e: any) => {
setData({
...data,
[e.target.name]: e.target.value
})
}
const handleFileChange = (e: any) => {
setData({
...data,
image: e.target.files[0]
})
}
return (
<Admin>
<form action="" onSubmit={handleSubmit} >
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>thumnail Product</label>
<input type="file" name='image' onChange={handleFileChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
<img src={data.image} />
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>Nama Product</label>
<input type="text" name='name' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
{error.name && <small className='text-red-500'>{error.name}</small>}
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>description</label>
<input type="text" name='description' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Description Product' />
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>Price</label>
<input type="text" name='price' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Harga Product' />
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>stock</label>
<input type="text" name='stock' onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Stock Product' />
</div>
<button type='submit' className='bg-zinc-800 rounded-md px-5 py-2 text-white cursor-pointer'> Simpan</button>
</form>
</Admin>
)
}
Fungsi edit
import React, { useEffect, useState } from 'react'
import Admin from '../layouts/admin'
import axios from 'axios'
import { useParams } from 'react-router-dom'
export default function CreateProduct() {
const { id } = useParams()
const [data,setData]: any = useState({
image:'',
name: '',
description: '',
price: '',
stock: ''
})
useEffect(() => {
axios.get('http://127.0.0.1:8000/api/products/' + id)
.then((res) => {
setData(res.data.data)
})
}, [])
const handleSubmit = (e: any) => {
e.preventDefault()
console.log(data);
axios.put('http://127.0.0.1:8000/api/products/'+ id,data,{
headers:{
'Content-Type' :'multipart/form-data'
}
})
.then(res => {
setData({
image:data.image,
name: data.name,
description: data.description,
price: data.price,
stock: data.stock
})
alert('Data Product berhasil di update')
})
.catch(error => {
alert(error.response.data)
})
}
const handleChange = (e:any) => {
setData({
...data,
[e.target.name]: e.target.value
});
}
const handleFileChange = (e: any) => {
setData({
...data,
image: e.target.files[0]
})
}
return (
<Admin>
<form action="" onSubmit={handleSubmit} >
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>thumnail Product</label>
<input type="file" name='image' onChange={handleFileChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
{/* <img src={products.image} /> */}
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>Nama Product</label>
<input type="text" name='name' value={data.name} onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='nama Product' />
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>description</label>
<input type="text" name='description' value={data.description} onChange={handleChange} className='border border-gray-400 p-1 rounded-md' placeholder='Description Product' />
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>Price</label>
<input type="text" name='price' onChange={handleChange} value={data.price} className='border border-gray-400 p-1 rounded-md' placeholder='Harga Product' />
</div>
<div className='mb-4'>
<label htmlFor="" className='block mb-1'>stock</label>
<input type="text" name='stock' onChange={handleChange} value={data.stock} className='border border-gray-400 p-1 rounded-md' placeholder='Stock Product' />
</div>
<button type='submit' className='bg-zinc-800 rounded-md px-5 py-2 text-white cursor-pointer'> Simpan</button>
</form>
</Admin>
)
}