Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara menampilkan data di Next.js secara SSR (server side rendering). Dan kali ini kita semua akan belajar bagaimana cara melakukan proses insert data dan sekaligus upload gambar.
Langkah 1 - Membuat Page Create Post
Sekarang kita akan membuat halaman yang nanti kita gunakan untuk menampilkan form input data dan sekaligus membuat proses insert-nya ke dalam database melalui Rest API.
Silahkan buat folder baru dengan nama create di dalam folder pages/posts dan di dalam folder create silahkan buat file baru dengan nama index.js, kemudian masukkan kode berikut ini di dalamnya.
//import hook useState
import { useState } from 'react';
//import router
import Router from 'next/router';
//import layout
import Layout from '../../../components/layout';
//import axios
import axios from "axios";
function PostCreate() {
//state
const [image, setImage] = useState('');
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
//state validation
const [validation, setValidation] = useState({});
//function "handleFileChange"
const handleFileChange = (e) => {
//define variable for get value image data
const imageData = e.target.files[0]
//check validation file
if (!imageData.type.match('image.*')) {
//set state "image" to null
setImage('');
return
}
//assign file to state "image"
setImage(imageData);
}
//method "storePost"
const storePost = async (e) => {
e.preventDefault();
//define formData
const formData = new FormData();
//append data to "formData"
formData.append('image', image);
formData.append('title', title);
formData.append('content', content);
//send data to server
await axios.post(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts`, formData)
.then(() => {
//redirect
Router.push('/posts')
})
.catch((error) => {
//assign validation on state
setValidation(error.response.data);
})
};
return (
<Layout>
<div className="container" style={{ marginTop: '80px' }}>
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<form onSubmit={ storePost }>
<div className="form-group mb-3">
<label className="form-label fw-bold">Image</label>
<input type="file" className="form-control" onChange={handleFileChange}/>
</div>
{validation.image && (
<div className="alert alert-danger">
{validation.image}
</div>
)}
<div className="form-group mb-3">
<label className="form-label fw-bold">TITLE</label>
<input className="form-control" type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Masukkan Title" />
</div>
{
validation.title &&
<div className="alert alert-danger">
{validation.title}
</div>
}
<div className="form-group mb-3">
<label className="form-label fw-bold">CONTENT</label>
<textarea className="form-control" rows={3} value={content} onChange={(e) => setContent(e.target.value)} placeholder="Masukkan Content" />
</div>
{
validation.content &&
<div className="alert alert-danger">
{validation.content}
</div>
}
<button className="btn btn-primary border-0 shadow-sm" type="submit">
SIMPAN
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
}
export default PostCreate
Dari penambahan kode di atas, pertama kita import useState dari React.js. Ini akan kita gunakan untuk membuat sebuah state.
//import hook useState
import { useState } from 'react';
Setelah itu, kita import Router dari Next.js. Ini akan kita gunakan untuk redirect setelah kita berhasil melakukan proses insert data nantinya.
//import router
import Router from 'next/router';
Kemudian kita import Layout.
//import layout
import Layout from '../../../components/layout';
Dan terakhir kita import Axios. Yang mana akan kita gunakan untuk melakukan HTTP request ke dalam server / API.
//import axios
import axios from "axios";
Di dalam function component PostCreate, kita membuat 3 state baru. Dimana state tersebut yang akan kita gunakan untuk menyimpan data yang diinputkan di dalam form.
//state
const [image, setImage] = useState('');
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
Kemudian kita buat 1 state lagi dengan nama validation. State ini akan berisi data response error validasi, ketika kondisi tidak terpenuhi dan state ini menggunakan tipe object.
//state validation
const [validation, setValidation] = useState({});
Dan kita buat sebuah method dengan nama handleFileChange. Method ini akan digunakan untuk meng-handle image yang akan diupload dan di dalamnya kita memeriksa, apakah file yang akan diupload sudah sesuai formatnya.
//function "handleFileChange"
const handleFileChange = (e) => {
//define variable for get value image data
const imageData = e.target.files[0]
//check validation file
if (!imageData.type.match('image.*')) {
//set state "image" to null
setImage('');
return
}
//assign file to state "image"
setImage(imageData);
}
Kemudian kita buat method lagi dengan nama storePost. Method tersebut akan dijalankan ketika form di submit.
<form onSubmit={ storePost }>
//...
</form>
//method "storePost"
const storePost = async (e) => {
//...
}
Di dalam method storePost, pertama kita meng-inisialisasi formData terlebih dahulu. Ini akan kita gunakan untuk menampung data sebelum data tersebut kita kirimkan ke dalam server.
//define formData
const formData = new FormData();
Setelah melakukan inisialisasi, sekarang kita lanjutkan untuk melakukan append atau memasukkan data yang ada di dalam state ke dalam formData.
//append data to "formData"
formData.append('image', image);
formData.append('title', title);
formData.append('content', content);
Nah, setelah data berhasil dimasukkan ke dalam formData, selanjutnya kita tinggal mengirimkannya ke dalam server menggunakan Axios dengan method POST.
//send data to server
await axios.post(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts`, formData)
Jika proses insert data berhasil dilakukan di dalam server, maka kita akan redirect ke dalam URL /posts menggunakan Router dari Next.js.
//redirect
Router.push('/posts')
Tapi, jika data gagal disimpan, maka kita akan assign error validasi-nya ke dalam state validation.
//assign validation on state
setValidation(error.response.data);
Langkah 2 - Uji Coba Insert Data
Sekarang silahkan klik button TAMBAH yang ada pada halaman posts index, atau bisa ke URL berikut ini http://localhost:3000/posts/create, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.
Silahkan klik button SIMPAN tanpa mengisi data apapun, maka kita akan mendapatkan validasi yang dikirimkan oleh controller, kurang lebih seperti berikut ini.
Dan sekarang, silahkan masukkan data gambar, title dan content, kemudian klik button SIMPAN. Jika berhasil maka kita akan di arahkan ke dalam halaman posts index dengan data yang baru saja kita inputkan.
Kurang lebih seperti itu bagaimana caranya melakukan proses insert data di dalam Next.js melalui API yang ada di dalam Laravel. Di artikel selanjutnya kita akan belajar bagaiaman cara membuat proses edit dan update data di dalam Next.js.
Terima Kasih