Tutorial CRUD React-Js API #1 : ( READ ) Menampilkan Data React-js Dengan DataBase Json-Server

Tutorial CRUD React-Js #1 : CRUD React-js Dengan Json-Server

Materi pada tutorial kali ini merupakan materi lanjutan dari tutorial sebelumnya tentang, Tutorial Belajar Reactjs #9: Get data API menggunakan Fecth dan Axios Pada React js,

pada materi sebelumnya kita telah membahas dan mempelajari bagai mana cara interaksi antara react js dengan API menggunakan fungsi Fecth dan Axios. untuk artikel sebelumnya tentang penggunaan fecth dan Axios dapat di lihat pada link berikut ini.

Tutorial Belajar Reactjs #9: Get data API menggunakan Fecth dan Axios Pada React js,

1. Buka Project Sebelumnya

kita masih menggunkan project yang sama dengan tutorial sebelumnya, langsung saja buka project nya.

lalu jalankan project untuk memastikan tidak terjadi kesalahan.

lalu buat folder baru dengan nama CRUD dan file baru untuk menulis kodingnya.

    

            

pada tutorial CRUD react js ini kita menggunkan libbrary tambahan berupa JSON-Server dari JSON placeHolder Sebagai API server untuk menampung data yang akan kita olah.

JSON-Server ini akan di runing pada localhost kita, kenapa kita memnggunakan JSON-Sever ini, 

karna semua fungsi nya Sama aja dengan API yang sering kita pakai untuk pengolahan data, dan configurasi untuk menjalankan nya pun tidak sulit, untuk kita pemula.

langkah selanjutnya kita perlu menginsal dulu library tersebut.

atau bisa lihat dari situs resmi nya di link berikut ini

https://jsonplaceholder.typicode.com/

https://github.com/typicode/json-server

2. Instalasi JSON-Server

pastikan komputer atau laptop terhubung dengan koneksi internet, lalu buka CMD dan arahkan pada root project kita lalu ketikan langkah berikut

With CMD (arahkan Pada root Directory project)

- npm install -g json-server    (untuk Install JSON-Server) tunggu samapi proses intalasi selesai.

- json-server --watch namafiledb.json

- json-server --watch namafiledb.json --port (msisal 3005) , untuk menjalakan json server

  pastikan port yang digunakan untuk json server berdeba dengan port yang di gunakan untuk menjalakan project react nya

lalu buat sebuah files json pada root project kita, dan dalam file ini akan menampung data yang akan kita simpan dan oleh nanti.

dengan struktur JSON seperti berikiut ini

struktur JSON database

database.json

  {
    "users": [
      {
        "id": 1,
        "nama": "maulana",
        "alamat": "Cianjur",
        "telpon": "1234"
      }
    ]
  }

simpan dan jalankan JSON-server nya dengan perinta di atas * buka CMD yang berdeda arahkan ke root project lalu jalan kan.

Running JSON-Server

buka pada browser dan tuliskan http://localhost:3005/users/

 jika berhasil maka hasil nya seperti gambar berikut ini. di sini kita menggunakan port 3005

JSON-Server Runing

3. Membuat Tabel Untuk Display Data

    

    setelah Json-server berhasil di intsal dan running selanjut nya kita membuat from untuk input, dan menampilkan data yang telag kita buat pada JSON-Server nya.

buka file baru yang sudah di buat lalu tuliskan koding berikut

Crud,js

import React, { Component } from 'react';
import Mytable from '../../../component/table/table'

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          
        }
    }

    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
            })
        })
    }

    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">
                    <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;

Penjelasan Coding :

- line 19-33: merupakan fungsi Getdata Ke JSON-Server

- line 75: menghitung jumlah record data pada databse JSON-Server

- line 60-65: merupakan fungsi Maps untuk menampilkan data

untuk menampilkan data nya kita menggunakan tabel, yang mana tabel ini kita pisah dan kit buat sebagai component. lalu buat file tabel.js pada folder component dan tuliskan koding berikut ini.

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 6 , merupakan convert props yang di kirim pada component tabel agar tidak terlalu panjang saat         penulisan koding

- line 9 -12 , menampilkan detail data dari props yang di kirim

- line 14 , props untuk memberikan action pada button Update

- line 15 , props untuk memberikan action delete pada button Delete

Style Css Tabel Dan Button nya

mystyle.css ,untuk Style Button

/*============= Button STYLE ===========*/

.my-button {
    /* Green */
    float: left;
    border: none;
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

.btn-blue {
    background-color: #008CBA;
}


/* Blue */

.btn-red {
    background-color: #f44336;
}


/* Red */

.btn-black {
    background-color: #e7e7e7;
    color: black;
}


/* Gray */

.btn-yellow {
    background-color: #ff9b04fa;
}


/*=======================*/

tabel.css 

  .my-table {
      overflow-x: auto;
  }

  table {
      border-collapse: collapse;
      width: 100%;
  }

  th,
  td {
      text-align: left;
      padding: 8px;
  }

  tr:nth-child(even) {
      background-color: #f2f2f2;
  }

PENTING...!!!

Pada Project ini Kita telah mendeklarasikan pemanggilan Style dari css pada file App.js dan file css untuk style nya kita kelompokan pada folder  assets/css. agar project kita lebih rapi, Untuk Styale dari halaman Crud nya, disini kita kelompokan dalam file mystyle.css, 

 jadi ketika akan menambahkan style untuk halaman Crud nya bisa di tambahkan pada file mystyle.css

 bisa lihat penjelan pada gambar berikut ini.

Penjelasan gambar 

Notes:

1. pada Kota Merah No1, kita membuat folder untuk mengelompokan Style css

2. pada Kota Merah No2. pemanggilan Style pada File App.js. di panngil pada App.js. agar setiap halaman baru kita tidak perlu memanggil file css style nya.

dan buat route baru untuk menapilkan halaman crud nya, dan tambahkan menu untuk link menuju halaman crud nya.

selanjutnya save dan jalankan project nya jika berhasil maka akan seperti gambar berikut, dan pastikan mengikuti langkah di atas dengan benar

hasil running program

sampai di sini kita telah berhasil mengintegrasikan react js dengan JSON-Server, sampai disini Tutorial CRUD React-Js #1 : CRUD React-js Dengan Json-Server,  untuk tutorial berikut nya kita akan membuat fungsi Create data pada JSON-Server.

Part#2 Tutorial CRUD React-Js #2 : Simpan data Dengan DataBase Json-Server

Jika ada masukan dan saran mengenai postingan 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

Share this post