-->

AK Studio

Tutorial Programming Bahasa Indonesia

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}>&times;</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

Iklan Atas Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel