Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara installasi framework CSS Bootstrap dan konfigurasi router di dalam project React.js. Dan di artikel kali ini kita semua akan belajar bagaimana cara membuat proses register di dalam React.js, dimana kita akan mengirimkan sebuah data ke dalam server (backend) menggunakan Rest API yang sebelumnya sudah kita buat di Laravel.
Langkah 1 - Installasi Library Axios
Axios merupakan salah satu library yang sangat populer untuk melakukan HTTP request ke dalam sebuah server, ini bisa kita gunakan untuk mendapatkan data, mengirim data dan yang lain ke sebuah server dengan Rest API. Kemudian jalankan perintah di bawah ini untuk menginstall Axios di dalam project React.js.
npm i axios@0.21.4
Dan silahkan tunggu proses installasinya sampai selesai, dan pastikan harus terhubung dengan internet karena Axios akan di unduh secara online.
Langkah 2 - Edit Component / View Register
Sekarang, kita akan melakukan perubahan kode yang ada di dalam component / view register. Silahkan buka file src/page/Register.js kemudian ubah semua kode-nya menjadi seperti berikut ini :
//import hook react
import React, { useState } from 'react';
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
//import axios
import axios from 'axios';
function Register() {
//define state
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [passwordConfirmation, setPasswordConfirmation] = useState("");
//define state validation
const [validation, setValidation] = useState([]);
//define history
const history = useHistory();
//function "registerHanlder"
const registerHandler = async (e) => {
e.preventDefault();
//initialize formData
const formData = new FormData();
//append data to formData
formData.append('name', name);
formData.append('email', email);
formData.append('password', password);
formData.append('password_confirmation', passwordConfirmation);
//send data to server
await axios.post('http://localhost:8000/api/register', formData)
.then(() => {
//redirect to logi page
history.push('/');
})
.catch((error) => {
//assign error to state "validation"
setValidation(error.response.data);
})
};
return (
<div className="container" style={{ marginTop: "120px" }}>
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<h4 className="fw-bold">HALAMAN REGISTER</h4>
<hr/>
<form onSubmit={registerHandler}>
<div className="row">
<div className="col-md-6">
<div className="mb-3">
<label className="form-label">NAMA LENGKAP</label>
<input type="text" className="form-control" value={name} onChange={(e) => setName(e.target.value)} placeholder="Masukkan Nama Lengkap"/>
</div>
{
validation.name && (
<div className="alert alert-danger">
{validation.name[0]}
</div>
)
}
</div>
<div className="col-md-6">
<div className="mb-3">
<label className="form-label">ALAMAT EMAIL</label>
<input type="email" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Masukkan Alamat Email"/>
</div>
{
validation.email && (
<div className="alert alert-danger">
{validation.email[0]}
</div>
)
}
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="mb-3">
<label className="form-label">PASSWORD</label>
<input type="password" className="form-control" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Masukkan Password"/>
</div>
{
validation.password && (
<div className="alert alert-danger">
{validation.password[0]}
</div>
)
}
</div>
<div className="col-md-6">
<div className="mb-3">
<label className="form-label">KONFIRMASI PASSWORD</label>
<input type="password" className="form-control" value={passwordConfirmation} onChange={(e) => setPasswordConfirmation(e.target.value)} placeholder="Masukkan Konfirmasi Password"/>
</div>
</div>
</div>
<button type="submit" className="btn btn-primary">REGISTER</button>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
export default Register;
Dari perubahan kode di atas, pertama kita import hook useState dari React.js, hook ini akan kita gunakan untuk menyimpan data yang di dapatkan dari form.
//import hook react
import React, { useState } from 'react';
Setelah itu, kita import hook useHistory dari React Router Dom, kita akan gunakan hook ini untuk navigasi ke URL / halaman tertentu.
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
Karena kita akan mengirim data ke dalam server menggunakan Rest API, maka kita butuh Axios. Dan kita juga import di halaman ini.
//import axios
import axios from 'axios';
Di dalam function component Register, pertama-tama kita membuat definisi state baru, dimana state ini yang nanti akan digunakan untuk menampung data yang di inputkan di dalam form.
//define state
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [passwordConfirmation, setPasswordConfirmation] = useState("");
Kemudian, kita juga membuat 1 state lagi yang nanti akan digunakan untuk menyimpan error response validasi dari Rest API.
//define state validation
const [validation, setValidation] = useState([]);
Untuk menggunakan hook useHistory kita perlu menginitialize-nya terlebih dahulu ke dalam variable. Tujuannya agar lebih mudah digunakan dan cara pemanggilan dari hook tersebut
//define history
const history = useHistory();
Dan kita membuat 1 function dengan nama registerHandler, function ini yang nanti akan djalankan ketika form dilakukan proses submit.
//function "registerHanlder"
const registerHandler = async (e) => {
//...
}
Di dalam function registerHanlder, pertama kita melakukan initialize FormData, tujuannya agar mempermudah kita dalam mengelompokan data sebelum dikirimkan ke dalam server.
//initialize formData
const formData = new FormData();
Setelah itu, kita akan append atau assign data ke dalam formData, dimana data tersebut akan kita ambil dari state-state yang sudah kita buat di atas.
//append data to formData
formData.append('name', name);
formData.append('email', email);
formData.append('password', password);
formData.append('password_confirmation', passwordConfirmation);
INFORMASI : pada append formData, kita mempunyai 2 parameter. Parameter pertama berupa key dan parameter kedua berupa data value.
formData.append('key', 'value');
Setelah data berhasil di letakkan di dalam formData, maka langkah selanjutnya adalah mengirimkan data tersebut ke dalam server. Disini kita akan menggunakan Axios dengan method POST ke dalam endpoint http://localhost:8000/api/register.
//send data to server
await axios.post('http://localhost:8000/api/register', formData)
Jika proses register berhasil dilakukan, maka akan masuk ke dalam promise then. Dan disini kita akan di redirect / arahkan ke halaman login setelah berhasil melakukan proses register.
//redirect to logi page
history.push('/');
Tapi, jika proses register gagal, maka akan masuk di dalam promise catch. Dan disini kita akan lakukan assign response error validasi ke dalam state validation.
//assign error to state "validation"
setValidation(error.response.data);
Dan di dalam form, untuk action-nya kita arahkan ke dalam function yang sudah kita buat di atas.
<form onSubmit={registerHandler}>
//...
</form>
Untuk mendapatkan value yang diinputkan di dalam form dan di simpan ke state, kurang lebih contohnya seperti berikut ini.
<input type="text" className="form-control" value={name} onChange={(e) => setName(e.target.value)} placeholder="Masukkan Nama Lengkap"/>
Di atas, kita menggunakan onChange dan kita assign value dari input ke dalam state, yaitu setName(e.target.value).
Dan untuk menampilkan validasi, kita bisa menggunakan kode seperti berkut ini :
{
validation.name && (
<div className="alert alert-danger">
{validation.name[0]}
</div>
)
}
Di atas, kita buat kondisi, jika ada validation.name, maka kita akan menampilkan alert yang isinya adalah response dari Rest API.
Langkah 3 - Uji Coba Proses Register
Sekarang, kita akan lakukan uji coba untuk proses register, silahkan buka project React.js di http://localhost:3000/register jika berhasil kurang lebih tampilannya seperti berikut ini :
Silahkan klik REGISTER tanpa memasukkan data apapun, maka kita akan mendapatkan error validation yang dikirim melalui server / REST API.
Sekarang, silahkan isi formnya dan klik REGISTER, jika berhasil, maka kita akan di arahkan ke halaman login atau ke URL /. Dan jika teman-teman cek di dalam database, maka data juga berhasil masuk.
Sampai disini pembahasan bagaimana cara membuat proses register di dalam React.js. Di artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses login di dalam React.js
Terima Kasih