Tutorial CRUD React-Js API #4 : ( Delete ) Hapus data Dengan DataBase Json-Server
Tutorial CRUD React-Js #4 : ( Delete ) Hapus data Dengan DataBase Json-Server
Materi pada tutorial kali ini merupakan materi lanjutan dari tutorial kita sebelumnya tentang , Tutorial CRUD React-Js API #3 : ( UPDATE ) Edit data Dengan DataBase Json-Server, pada materi sebelumnya kita berhasil membuat fungsi Update data ke Database JSON-Server nya, selanjutnya pada tutorial kali ini kita akan mencoba membuat fungsi hapus data.
untuk mempermudah memahami materi pada tutorial Tutorial CRUD React-Js
API #4 : ( Delete ) Hapus data Dengan DataBase Json-Server ini, ada baik nya
bisa baca tutorial sebelumnya tentang fungsi update data pada link berikut
ini.
link : Tutorial CRUD React-Js API #3 : ( UPDATE ) Edit data Dengan
DataBase Json-Server
Langsung saja Kita masuk ke materi tentang Tutorial CRUD React-Js API #4
: ( Delete ) Hapus data Dengan DataBase Json-Server.
1. Buka Project Sebelumnya
pastikan project sebelumnya berjalan dengan normal tanpa ada Kendala Error
dari program, untuk mempermudah kita melanjutkan tutorial part #4 ini. dan
pastikan juga Json Server nya sudah di jalakan bersaamaan dengan program.
2. Membuat Fungsi Delete Data
selanjutnya kita perlu membuat fungsi untuk menghapus data, dan menerima
parameter id dari data apa yang akan di hapus fungsi hapus data
ini akan di panggil pada Hendel Update nantinya, buka file
Crud.js . lalu tulisakan koding berikut dan letakan dibawah
fungsi Update Data.
Fungsi Delete Data
DeleteDataUser = (data) => {
const id = data;
fetch(apiURL + id, {
method: 'DELETE',
}).then((res) => {
console.log(res)
console.log("Status Delete", res.status)
// Untuk Tampung respon Dari Server
this.setState({
Notif: {
alertShow: true,
actionType: 'deleted',
responCode: res.status,
}
})
this.GetdataUsers()
this.ClearForm()
});
}
Penjelasan Koding :
- line 2 : menerima parameter id dari hendel delete data
- line 4-21 : fungis delete data ke Database Json-server
- line 5 : mendeklarasikan Methods yang akan di lakukan ke JSON-Server,
karna kita akan melakukan delete data maka methos yang di kirim adalah
'Delete'
- line 6-21 : memrima respons dari API JSON-Server nya , saat action
delete telah kita lakukan
- line 11-17 : menerima respons dari API dan Melkukan setState Notif ,
untuk Menampilkan Notifikasi jika data berhasi di Hapus.
- line 19 : memanggil fungsi GetDataUser() untuk menampilkan data
terbaru
- line 20 : memanggil funsi ClearFrom
3. Membuat Hendle Delete
seletelah selesai membuat fungsi untuk hapus data ke
JSON-Server nya, selanjutnya kita membuat hendle dalete yang
berfungsi untuk mendapatkan id data, dari data yang akan kita hapus, dan
funusgi hendle delete ini kita panggil pada, action click di button delete
pada component tabel. buka file Crud.js lalu tulis koding di
bawah ini letakan di bawah fungsi hendle Update
Hendle Delete
HendelDelete = (data) => {
console.log('Id delete =', data)
const id = data;
if (window.confirm('Apakah data ' + id + ' ?')) {
this.DeleteDataUser(id)
}
}
Penjelasan Koding:
- line 2 : menampilkan Log untuk memastikan id dari data yang akan
dihapus sesuai dengan yang dipilih
- line 3 : deklarasi variabel id , menerima id dari hendle update
- line 5-7 : fungsi untuk menampilkan alert confirmasi
untuk hapus data, jika kita memilih yes maka fungsi hapus data akan di
jalankan
- line 6 : memanggil fungsi Hapus Data dan mengirim id yang akan di
hapus
selanjutnya pada component tabel, pada tutorial sebelumnya kita telah
menyediakan props remove. dan prop remove ini, akan kita isi di, pada
pemanggilan component tabel yaitu pada fungsi looping data pada file
Crud.js
|
| isi props remove, Component Table |
setelah kita membuat semua fungsi diatas dan. secara keseluran isi koding dari file crud.js kita sekarang menjadi seprti berikut ini.
koding full 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 No data Found
}).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()
});
}
DeleteDataUser = (data) => {
const id = data;
fetch(apiURL + id, {
method: 'DELETE',
}).then((res) => {
console.log(res)
console.log("Status Delete", res.status)
// Untuk Tampung respon Dari Server
this.setState({
Notif: {
alertShow: true,
actionType: 'deleted',
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
})
}
HendelDelete = (data) => {
console.log('Id delete =', data)
const id = data;
if (window.confirm('Apakah data ' + id + ' ?')) {
this.DeleteDataUser(id)
}
}
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
remove={this.HendelDelete} // Pemanggilan hendel Delete
/>
)
})
}
</tbody>
</table>
</div>
</div>
</div>
)
}
}
export default Crud;
selanjutnya simpan dan jalakan program nya. jika tidak terjadi kesalahan maka hasil akhir dari program hapus data yang telah kita buat seperti berikut ini.
demo hasil akhir Tutorial CRUD React-Js API #4 : ( Delete ) Hapus data Dengan DataBase Json-Server
 |
| Demo Aplikasi |
Sampai disini Kita Telah Berhasil membuat fungsi Hapus data dengan react-js API JSON-Server. sampai disini kita telah berhasil membuat Fungsi CRUD full Dengan React-js dengan menggunakan API Json-Server.
Serial CRUD React-Js API JSON-Server
- Tutorial CRUD React-Js API #1 : ( READ ) Menampilkan Data React-js Dengan DataBase Json-Server
- Tutorial CRUD React-Js #2 : ( CREATE ) Simpan data Dengan DataBase Json-Server
- Tutorial CRUD React-Js API #3 : ( UPDATE ) Edit data Dengan DataBase Json-Server
- Tutorial CRUD React-Js API #4 : ( Delete ) Hapus data Dengan DataBase Json-Server
mungkin untuk kedepan nya teman-teman bisa mengembangkan lebih jauh lagi project yang telah kita buat dan pelajari pada blog ini.
Jika ada masukan. saran dan pertanyaan pada tutorial ini atau pun tentang tutorial pada blog ini dapat di berikan pada 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
- Hapus Data React JS to API
- Menampilkan Data React-JS API
- Notifikasi Berhasil React js
0 Response to "Tutorial CRUD React-Js API #4 : ( Delete ) Hapus data Dengan DataBase Json-Server"
Posting Komentar