Tutorial CRUD React-Js API #2 : ( CREATE ) Simpan data Dengan DataBase Json-Server
Tutorial CRUD React-Js #2 : Simpan data Dengan DataBase Json-Server
materi tutorial ini merupakan lanjutan dari materi tutorial sebelumnya
tentang Tutorial CRUD React-Js #1 : CRUD React-js Dengan DataBase
Json-Server, pada Materi sebelumnya kita telah berhasil mengkoneksikan
database JSON-Server dengan project react js kita, selanjutnya pada materi ini
kita akan menambahkan fungsi save data pada project sebelumnya . untuk
totorial sebelumnya dapat di lihat pada link berikut ini
langsung saja untuk metarinya ikuti langkah berikut ini.
1. Buka project Sebelumnya
kita masih menggunakan project yang sama dengan materi part #1 seblumnya,
langsung saja buka project nya dan jalankan project nya untuk memastikan tidak
ada kesalahan atau error program untuk memperudah kita melanjutkan tutorial
pada materi ini. pastikan jika Json- Server sudah berjalan atau running .
|
| Hasil Runing Program |
2. Menambahkan variabel State
selanjut nya kita perlu membuat dua state untuk menampung data yang akan di
simpan dan, state untuk menerima response dari server apakah data berhasil di
simpan atau tidak.
maka kita perlu melakukan perubahan pada file Crud.js nya, dan pada
baris dekalrasi state tambahkan koding berikut
|
| Tambahkan State |
Sehingga decalrasi state pada file Crud.js nya sperti berikut ini
Deklarasi Variabel state
constructor(props) {
super(props);
this.state = {
dataUser: [], // Untuk tampung Get all data
totalData: 0, // Untuk Hitung All Data
isUpdate: false, // Untuk Fileter Fungsi simpan / Update data
Notif: { // Untuk Tampung respon Dari Server
alertShow: false,
actionType: '',
responCode: 0,
},
DataUserNew: { // untuk Tampung data Update / New data
id: 1,
nama: '',
alamat: '',
telpon: ''
}
}
}
3. Fungsi SetSate, ClearData, dan Notifikasi
Setelah kita mendeklarasikan state , selnjutnya perlu membuat sebuah
fungsi untuk mengubah nilai dari sate tersebut. yang mana fungsi untuk merubah
state ini nantinya akan kita gunakan pada form inputnya. untuk fungsi merubah
state DataUSerNew seperti berikut ini.
letakan fungsi berikut ini dibawah fungsi GetdataUSers().
Fungsi Clear From
untuk membersihkan from input dan mengembalikan nilai awal dari State yang
telah kita rubah. fungsi ini akan di panggil pada fungsi save date,
ClearForm = () => {
this.setState({
isUpdate: false,
DataUserNew: {
id: 1,
nama: '',
alamat: '',
telpon: ''
}
})
// Mengembalikan Nilai Awal Notif
setInterval(() => {
this.setState({
Notif: {
alertShow: false,
actionType: '',
responCode: 0,
}
})
}, 4500);
}Penjelsan Koding :
- line 3-11 : Mengembalikan State DataUserNew ke Nilai State awal
- line 14 -22 : Untuk Set delay menampilkan Notifikasi. jiak
waktu habis maka notifikasi akan hilang dengan sendirinya
- line 15-21 : mengembalikan nilai State Notif Ke Nilai State awal.
Fungsi Simpandata()
SaveNewDataUSer = () => {
const Newdata = this.state.DataUserNew;
fetch(apiURL, {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(Newdata)
}).then((res) => {
console.log(res)
console.log("Status Create", res.status)
// Untuk Tampung respon Dari Server
this.setState({
Notif: {
alertShow: true,
actionType: 'created',
responCode: res.status,
}
})
this.GetdataUsers()
this.ClearForm()
});
}
Penjelasan Koding :
- line 2 : Decalresi state yang akan di kirim
- line 16-22 : fungsi untuk mendapatkan respon dari JSON-Server, apakah
data berhasil di simpan atau tidak, dan kita rubah state dari notif , untuk
menampilkan notifikasi, gagal atau sukses pda from input
- line 24 : Memanggil Fungsi GetdataUser() untuk menampilkan data
terbaru
- line 25 : Memanggil fungsi Clearfrom() untuk Mengeamblikan nilai
state ke nilai awal, dan membersihkan from input data
Fungsi HendelOnchange()
HendelOnchange = (event) => {
// console.log('Form Change')
const NumberingId = this.state.totalData + 1; // Untuk ID New Data
let prmInputUser = { ...this.state.DataUserNew }; // Copy State
if (!this.state.isUpdate) { //Cek Jika Update Data Idnya Tidak Di Ubah
prmInputUser['id'] = NumberingId;
}
prmInputUser[event.target.name] = event.target.value;
this.setState({
DataUserNew: prmInputUser
})
}
Penjelasan Koding :
- line 3: untuk Membuat Id baru dari setiap data yang akan di Simpan
- line 4 : Copy State untuk menampung semua perubahan pada State
- line 5-7 : filter fungsi Di cek jika fungsi nya update data makan id
tidak dirubah, mengikuti id data yg akan di ubah
- line 8 : menampung perubahan setiap inputan yang di isi pada from
input.
- line 9-11 : merubah state ke nilai atau value yang akan di kirim.
Fungsi Hendle Simpan
HendelSimpan = () => {
if (this.state.isUpdate) {
this.UpdateDataUser();
} else {
this.SaveNewDataUSer();
}
}
Penjelasan Koding:
- Line 2 : filter jika stateIsUpdate bernilai True menjalakan fungsi
Update data, dan jika false menjalakan save data
4. Membuat Component Notifikasi
slanjutnya untuk menampilkan notifikasi kita perlu membuat sebuah component
baru berupa compnent Alert , buat sebuah component baru pada folder
component/alert. dan nantinya komponent alert ini kita akan import ke
file Crud.js. Buatl file Baru bernama Alert.js.untuk Koding
component Alert nya
seperti berikut ini.
Alert.js
import React, { Component } from 'react'
class Alert extends Component {
HideNotif = () => {
document.getElementById("notif").style.display = "none";
}
render() {
const showing = this.props.data.alertShow;
const actionType = this.props.data.actionType;
const resCode = this.props.data.responCode;
var style = ""
var pesan = ""
if (resCode === 201 && actionType === 'created') {
style = "alert alert-success"
pesan = " Data Berhasil Di Simpan ..."
} else {
if (resCode === 200 && actionType === 'updated') {
style = "alert alert-info"
pesan = " Data Berhasil Di Update ..."
} else {
if (resCode === 200 && actionType === 'deleted') {
style = "alert alert-warning"
pesan = " Data Berhasil Di Hapus ..."
} else {
style = "alert alert-error"
pesan = " Error Terjadi Kesalahan..."
}
}
}
return (
<div>
{showing
?
<div id="notif" className={style}>
<span className="closebtn" onClick={this.HideNotif}>×</span>
{pesan}
</div>
: null
}
</div>
)
}
}
export default Alert;
Penjelasan Koding :
- line 5-7 : fungsi Untuk Close pada Alert
- line 10-13 : dekalrasi untuk mempersingkat penulisan props .
- line 17 -33 : filter Jenis type alert yang di kirim melalui prop.
- Notes untuk Respon Code JSON-Server
201 : Create data
200 : Updat Dan Delete
400 : Error
dan tambahkan style untuk Alert Notifikasinya seprti berikut ini.
Style Alert css
/* =========== Alert Satyle CSS ============== */
.alert {
padding: 20px;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
.alert-success {
background-color: #04993d;
}
.alert-info {
background-color: #008CBA;
}
/* Blue */
.alert-Error {
background-color: #f44336;
}
/* Gray */
.alert-warning {
background-color: #ff9b04fa;
}
5. Membuat From Input Data
selanjutnya kita perlu membuat form input, untuk proses input data, dan fungsi
untuk merubah state DataUserNew yang telah kita dekalrasikan akan kita
panggil pada form input ini, buka file Crud.js, dan tambahkan fungsi
berikut ini
letakan koding berikut diatas view tabel yang berguna untuk menampilkan data,
tepat di bawah titel nya
View From input
<div className="container">
<Alert data={this.state.Notif} />
<div className="conten">
<div className="form-inline" >
<label htmlFor="nama">Nama:</label>
<input type="text" id="nama" placeholder="Nama.." name="nama" onChange={this.HendelOnchange} value={this.state.DataUserNew.nama} />
<label htmlFor="telpon">Telpon:</label>
<input type="text" id="telpon" placeholder="No.Telpon..." name="telpon" onChange={this.HendelOnchange} value={this.state.DataUserNew.telpon} />
<label htmlFor="alamat">Alamat:</label>
<input type="text" id="alamat" placeholder="Alamat..." name="alamat" onChange={this.HendelOnchange} value={this.state.DataUserNew.alamat} />
<button className="my-button btn-blue" onClick={this.HendelSimpan} >Simpan</button>
</div>
</div>
</div>
Penjelasan Koding :
- line 6, 8, 10 : Pemanggilan HendelOnchange() untuk merubah State
DataUSerNew sesuai dengan value nya
HendelCahnge : onChange={this.HendelOnchange}
SetDefault Value form input: value={this.state.DataUserNew.nama}
nanti akan digunakan untuk fungsi Update data ,sesuai dengan nilai state yang
di tentukan
selanjutnya kita perlu menambahkan satyle untuk form input nya, pada file
mystle.css tambahkan style berikut ini
Style form input
/*============= form STYLE ===========*/
.form-inline {
padding: 5px;
display: flex;
flex-flow: row wrap;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
margin: 5px 5px 5px 0;
padding: 8px;
background-color: #fff;
border: 1px solid #ddd;
}
.form-inline button {
padding: 10px 10px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
cursor: pointer;
}
.form-inline button:hover {
background-color: royalblue;
}
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
/*========================*/
Setelah kita membuat semua fungis diatas tadi, sengingga koding Keseluruhan
dari file Crud.js kita seperti berikut ini.
Crud.js
import React, { Component } from 'react';
import Mytable from '../../../component/table/table'
import Alert from '../../../component/alert/Alert'
const apiURL = "http://localhost:3005/users/"
class Crud extends Component {
constructor(props) {
super(props);
this.state = {
dataUser: [], // Untuk tampung Get all data
totalData: 0, // Untuk Hitung All Data
isUpdate: false, // Untuk Fileter Fungsi
Notif: { // Untuk Tampung respon Dari Server
alertShow: false,
actionType: '',
responCode: 0,
},
DataUserNew: { // untuk Tampung data Update / New data
id: 1,
nama: '',
alamat: '',
telpon: ''
}
}
}
componentDidMount() {
this.GetdataUsers()
}
GetdataUsers() {
fetch(apiURL).then(res => {
if (res.status === 200)
return res.json()
else
return <p>No data Found</p>
}).then(resdata => {
console.log(resdata)
// console.log('Numrow', resdata.length)
this.setState({
dataUser: resdata,
totalData: resdata.length
})
})
}
SaveNewDataUSer = () => {
const Newdata = this.state.DataUserNew;
fetch(apiURL, {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(Newdata)
}).then((res) => {
console.log(res)
console.log("Status Create", res.status)
// Untuk Tampung respon Dari Server
this.setState({
Notif: {
alertShow: true,
actionType: 'created',
responCode: res.status,
}
})
this.GetdataUsers()
this.ClearForm()
});
}
HendelOnchange = (event) => {
// console.log('Form Change')
const NumberingId = this.state.totalData + 1; // Untuk ID New Data
let prmInputUser = { ...this.state.DataUserNew }; // Copy State
if (!this.state.isUpdate) { //Cek Jika Update Data Idnya Tidak Di Ubah
prmInputUser['id'] = NumberingId;
}
prmInputUser[event.target.name] = event.target.value;
this.setState({
DataUserNew: prmInputUser
})
}
ClearForm = () => {
this.setState({
isUpdate: false,
DataUserNew: {
id: 1,
nama: '',
alamat: '',
telpon: ''
}
})
// Mengembalikan Nilai Awal Notif
setInterval(() => {
this.setState({
Notif: {
alertShow: false,
actionType: '',
responCode: 0,
}
})
}, 4500);
}
HendelSimpan = () => {
if (this.state.isUpdate) {
this.UpdateDataUser();
} else {
this.SaveNewDataUSer();
}
}
render() {
return (
<div className="card">
<div className="Titel">
CRUD FAKE API
</div>
<div className="conten">
Belajar Crud React js dengan Fake API JSON Server <b>https://www.akscoding.com/</b>
</div>
<div className="container">
<Alert data={this.state.Notif} />
<div className="conten">
<div className="form-inline" >
<label htmlFor="nama">Nama:</label>
<input type="text" id="nama" placeholder="Nama.." name="nama" onChange={this.HendelOnchange} value={this.state.DataUserNew.nama} />
<label htmlFor="telpon">Telpon:</label>
<input type="text" id="telpon" placeholder="No.Telpon..." name="telpon" onChange={this.HendelOnchange} value={this.state.DataUserNew.telpon} />
<label htmlFor="alamat">Alamat:</label>
<input type="text" id="alamat" placeholder="Alamat..." name="alamat" onChange={this.HendelOnchange} value={this.state.DataUserNew.alamat} />
<button className="my-button btn-blue" onClick={this.HendelSimpan} >Simpan</button>
</div>
</div>
</div>
<div className="container">
<div className="my-table" >
<div>Total data {this.state.totalData} record</div>
<table>
<thead>
<tr>
<th>#ID</th>
<th>Nama</th>
<th>Telpon</th>
<th>Alamat</th>
<th>Options</th>
</tr>
</thead>
<tbody>
{
this.state.dataUser.map(dataUser => {
return <Mytable key={dataUser.id}
data={dataUser} />
})
}
</tbody>
</table>
</div>
</div>
</div>
)
}
}
export default Crud;
selanjutnya save dan jalakan ulang program, jika tidak terjadi kesalahan makan
hasil runing programnya akan seprti gambar berikut ini.
|
| hasil runing Program |
 |
| Demo Program |
maka secara otomastis pada file database.json kita akan membuar sebuah array data baru sesuai yang telah kita inputkan pada program.
 |
| database.json |
sampai Disini kita telah berhasil membuat fungsi simpan data ke database JSON-Server, sampai disini
Tutorial CRUD React-Js #2 : Simpan data Dengan DataBase Json-Server. untuk tutorial berikutnya kita akan membuat fungsi Update data. dengan react js dan database JSON-Server.
Jika ada masukan saran, atau pertanyaan mengenai postingan pada Tutorial ini bisa berikan di kolom Komentar..
Sekian Dan Terima kasih...
#Happy Coding
#Keyword Penelusuran
- Belajar ReactJs
- Tutorial ReactJs
- Menampilkan data pada react js
- map dan filter json pada react js
- Get data API dengan fetch di react js
- CRUD React-Js To API
- CRUD React-Js dengan API
- Crud React -Js dengan Database
- Crud React-js Dengan database JSON-Server
- Simpan data ke Database React js
- Notifikasi Berhasil React js
0 Response to "Tutorial CRUD React-Js API #2 : ( CREATE ) Simpan data Dengan DataBase Json-Server"
Posting Komentar