Tutorial CRUD React-Js API #3 : ( UPDATE ) Edit data Dengan DataBase Json-Server
Tutorial CRUD React-Js #3 : ( UPDATE) Edit data Dengan DataBase Json-Server
Materi tutorial ini merupakan lanjutan materi dari tutorial sebelumnya tentang , Tutorial CRUD React-Js #2 : ( CREATE ) Simpan data Dengan DataBase Json-Server. pada materi sebelumnya kita telah berhasil menambahkan atau menyimpan data ke database JSON-Server kita.
Pada materi Tutorial CRUD React-Js #3 : ( UPDATE) Edit data Dengan DataBase Json-Server ini, kita akan membuat fungsi untuk update data yang telah kita simpan ke database JSON-Server. agar lebih meudah dalam mengikuti tutorial pada materi ini sebaiknya bisa baca terlebih dahulu materi part2 sebelumnya, untuk link part 2 tentang Simpan data react js ke database JSON-Server Bisa Dilihat pada link berikut ini.
Link : Tutorial CRUD React-Js #2 : ( CREATE ) Simpan data Dengan DataBase Json-Server
Kita masih menggunakan project yang sama, langsung saja ikuti Titorial Berikut ini.
1. Buka Project Sebelumnya
pastikan project sebelumnya berjalan dengan normal tanpa ada Kendala Error dari program, untuk mempermudah kita melanjutkan tutorial part #3 ini. dan pastikan juga Json Server nya sudah di jalakan bersaamaan dengan program.
|
| Running Program |
2. Membuat Hendle Update
selanjutnya kita perlu membuat sebuah fungsi Hendle update untuk menampilkan
data yang akan kita update ke dalam form input, melalui fungsi onclick dari
button edit yang terdapat pada tabel data.
Buka file Crud,js ,tulis kan koding berikut dan letakan dibawah hendle
Simpan.
Hendle Update
HendelUpdate = (data) => {
console.log('Update id', data.id);
console.log('Update arry', data);
this.setState({
DataUserNew: data,
isUpdate: true
})
}
Penjelasan Koding:
- line 1 : pada fungsi Hendel Update kita menerima Sebuah parameter
data, data ini merupakan, sebuah parameter yang berisi data (Id,nama,alamar,
telpon) yang kita ambil dari component tabel sesuai dari index atau baris data
yang kita klik button edit nya.
- line 2-3 : untuk menampilakn log data pada concole , hanya untuk
memastikan data yang kita kirim sudah sesuai dengan data yang kita pilih atau
belum.
- line 6 : Set State isUpdate Jadi true, untuk mengaktifkan filter
actioan Button Simpan
- line 4-7 : melakukan setstae, kita telah memiliki sebuah state
DataUserNew yang masih kosong, kemudian state ini kita isi dengan data yang
akan kita update.
kemudain perlu di perhatikan pada component Tabel.js kita telah
menyiapkan sebuah button Edit dan props Update data. lalu pada pada component
tabel nya kita perlu memparsing dan mengisi props Update ini dengan memanggil
fungsi dari hendle Uodate diats.
Component Tabel.Js
import React, { Component } from 'react';
class table extends Component {
render() {
const prmData = this.props.data;
return (
<tr >
<td>{prmData.id}</td>
<td>{prmData.nama}</td>
<td>{prmData.telpon}</td>
<td>{prmData.alamat}</td>
<td>
<button className="my-button btn-yellow" onClick={() => this.props.update(prmData)} >Edit</button>
<button className="my-button btn-red" onClick={() => this.props.remove(prmData.id)} >Delete</button>
</td>
</tr>
);
}
}
export default table;Penjelasan Koding
-Line 14 : deklarasi props untuk menerima fungsi Hendle update
-Line 15 : deklarasi props untuk menerima fungsi Hendel delete
Kemudian kita isi props tersebut dengan cara menambahkan koding seperti
berikut ini, pada pemanggilan component tabel di file Crud.js sperti
gambar berikut
|
| isi prop update, component tabel |
3. Membuat Fungsi Update Data
setelah kita membuat fungsi hendle data di langkah No.2, selanjut nya kita
membuat fungsi untuk mengirim data yang akan di ubah atau di Update ke Api
JSON-Servernya. untuk fungsi tuliskan koding seperti berikut ini. letakan di
bawah fungsi savesata.
Fungsi Update data
UpdateDataUser = () => {
const dataUpdate = this.state.DataUserNew;
const id = dataUpdate.id;
fetch(apiURL + id, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(dataUpdate)
}).then((res) => {
console.log(res)
console.log("Status Update", res.status)
// Untuk Tampung respon Dari Server
this.setState({
Notif: {
alertShow: true,
actionType: 'updated',
responCode: res.status,
}
})
this.GetdataUsers()
this.ClearForm()
});
}Penjelasan Koding:
- line 2 : deklarasi variabel state Data User Untuk mempendek penulisan
koding. varialbel ini akan di isi dengan data user yang telahkita kirim pada
hendel update.
- line 3 : deklarasi variabel state , untuk mengambil ( id
) yang akan di ubah atau di update
- line 5-28 : fungsi mengirim data yang akan di update
- line 6 : metods yang dikirim ke API Json-Server karna kita
melakukan update data maka Methods yang dikirim adalah 'PUT'
- line 12-23 : untuk menerima respon dari
API JSON-Server, apakah berhasil atau gagal
- line 17-27 : Set State Notif , untuk menampilkan Notif nya dan data
yang kita terima dari respon API JSON-Server nya,
- line 25 : Memanggil fungsi get data User untuk menampilkan data
terbaru jika data telah ter update
-line 26 : membersihkan form input .
setelah kita selesai membuat semua fungsi di atas maka secara keselurahan isi
koding dari file Crud.js menjadi seperti berikut ini.
Koding Keselurahan 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()
});
}
UpdateDataUser = () => {
const dataUpdate = this.state.DataUserNew;
const id = dataUpdate.id;
fetch(apiURL + id, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(dataUpdate)
}).then((res) => {
console.log(res)
console.log("Status Update", res.status)
// Untuk Tampung respon Dari Server
this.setState({
Notif: {
alertShow: true,
actionType: 'updated',
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();
}
}
HendelUpdate = (data) => {
console.log('Update id', data.id);
console.log('Update arry', data);
this.setState({
DataUserNew: data,
isUpdate: true
})
}
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}
update={this.HendelUpdate} // Pemanggilan Hendel Update
/>
)
})
}
</tbody>
</table>
</div>
</div>
</div>
)
}
}
export default Crud;
lalu simpan dan jalakan program nya. jika tidak terjadi error atau kesalahan
maka hasil running dari program pada tutorial part#3 ini menjadi sperti
berikut ini.
 |
| Demo Program |
sampai Disini kita telah berhasil membuat fungsi Update data ke database JSON-Server
Tutorial CRUD React-Js #3 : ( UPDATE) Edit data Dengan DataBase Json-Server. untuk tutorial berikutnya kita akan membuat fungsi (Delete) Hapus 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 Bahas Indonesia
- 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
- Update data React JS to API
- Notifikasi Berhasil React js
0 Response to "Tutorial CRUD React-Js API #3 : ( UPDATE ) Edit data Dengan DataBase Json-Server"
Posting Komentar