Tutorial Laravel 9 dan Next.js #5 : Insert Data di Next.js


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel 9 dan Next.js #5 : Insert Data di Next.js

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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami