React JS - List

Setelah kita belajar membuat Single Page Application (SPA) menggunkaan React Router,
selanjutnya kita akan belajar membuat sebuah list menggunakan React JS. List merupakan
sebuah daftar kumpulan data yang biasanya berasal dari sebuah array. Pada modul ini kita
belajar cara untuk generate array ke bentuk elemen pada halaman web.

Langkah Praktikum:

1. Masih dalam project react router sebelumnya, silahkan buat file baru dengan nama
Gallery.js pada folder pages.
2. Pada file Main.js, tambahkan script import elemen List dengan kode seperti berikut ini.
import Gallery from './pages/Gallery;
3. Tambahkan route path di dalam tag <Switch> seperti berikut ini.
<Route path="/gallery" component={Gallery} />
4. Tambahkan satu elemen menu pada file App.js sebagai link ke halaman List seperti berikut
ini.
<Link to="/gallery" className="nav-link">Gallery</Link> 
5. Pada file Gallery.js, buatlah struktur seperti membuat elemen pada umumnya seperti
berikut ini.
1. import React, {Component} from "react";  
2. import $ from "jquery";
3. class Gallery extends Component {  
4.   constructor(){  
5.   
6.   }  
7.   render(){  
8.     return (  
9.   
10.     );  
11.   }  
12. }  
13. export default Gallery;  

6. Pada fungsi constructor(), kita akan membuat state yang berisi array object seperti
berikut ini.

constructor(){
        super()
        this.state = {
            buku: [
                {
                    isbn:"12345", judul:"Bulan", penulis:"Tere Liye",
                    penerbit:"CV Harapan Kita", harga: 90000,
                    cover:"https://drive.google.com/uc?id=1ui-jyKgu3DqFyo7VKJu-
FFXkaNQN3aSg"
                },
                {
                     isbn:"12346", judul:"Anak Badai", penulis:"Tere Liye",
                    penerbit:"CV Nusa Bangsa", harga: 80000,
                    cover:"https://drive.google.com/uc?
id=1rJDcCOmsd14NL6DG3Wps_kewZomGcLU-"
                },
                {
                    isbn:"54321", judul:"Bumi", penulis:"Tere Liye",
                    penerbit:"CV Nusa Bangsa", harga: 70000,
                    cover:"https://drive.google.com/uc?id=1e-
thvq7lkG1_gw0FqHzRoiAhfhdgpOUj"
                },
            ],

            action: "",
            isbn: "",
            judul: "",
            penulis: "",
            penerbit: "",
            harga: 0,
            cover: "",
            selectedItem: null,
        }
}

7. Untuk menampilkan setiap elemen pada List yang telah dibuat, kita akan membuat satu
komponen baru dengan nama “Card”. Silakan buat file baru dengan nama Card.js pada
folder components.

import React from "react"

class Card extends React.Component{
    render(){
        return (
            <div className="col-lg-6 col-sm-12 p-2">
                <div className="card">
                    <div className="card-body row">
                        {/* menampilkan Gambar / cover */}
                        <div className="col-5">
                            <img src={this.props.cover} className="img"
                            height="200" />
                        </div>

                        {/* menampilkan deskripsi */}
                        <div className="col-7">
                            <h5 className="text-info">
                                 { this.props.judul }
                            </h5>
                            <h6 className="text-dark">
                                Penulis: { this.props.penulis}
                            </h6>
                            <h6 className="text-dark">
                                Penerbit: { this.props.penerbit}
                            </h6>
                            <h6 className="text-danger">
                                Harga: Rp { this.props.harga}
                            </h6>

                            {/* button untuk mengedit */}
                            <button className="btn btn-sm btn-primary m-1"
                            onClick={this.props.onEdit}>
                                Edit
                            </button>

                            {/* button untuk menghapus */}
                            <button className="btn btn-sm btn-danger m-1"
                            onClick={this.props.onDrop}>
                                Hapus
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Card;

8. Tambahkan perintah import komponen Card di Gallery.js

import Card from "../components/Card"
9. Pada fungsi render(), tambahkan script di bawah ini untuk menampilkan data buku yang
tersimpan pada array.

render(){
        return(
            <div className="container">
                <div className="row">
                    { this.state.buku.map( (item, index) => (
                        <Card
                        judul={item.judul}
                        penulis={item.penulis}
                        penerbit={item.penerbit}
                        harga={item.harga}
                        cover={item.cover}
                        onEdit={ () => this.Edit(item)}
                        onDrop={ () => this.Drop(item)}
                        />
                    )) }
                </div>

                <button className="btn btn-success" onClick={() => thi
s.Add()}>
                    Tambah Data
                </button>

                {/* component modal sbg control manipulasi data */}
                <div className="modal" id="modal_buku">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            {/* modal header */}
                            <div className="modal-header">
                                Form Buku
                            </div>

                            {/* modal body */}
                            <div className="modal-body">
                                <form onSubmit={ev => this.Save(ev)}>
                                    Judul Buku
                                    <input type="text" className="form-
control mb-2"
                                    value={this.state.judul}
                                    onChange={ ev => this.setState({judul: 
ev.target.value}) }
                                    required />
                                    
                                    Penulis Buku
                                    <input type="text" className="form-
control mb-2"
                                    value={this.state.penulis}
                                    onChange={ ev => this.setState({penuli
s: ev.target.value}) }
                                    required />
                                    
                                    Penerbit Buku
                                    <input type="text" className="form-
 control mb-2"
                                    value={this.state.penerbit}
                                    onChange={ ev => this.setState({penerb
it: ev.target.value}) }
                                    required />
                                    
                                    Harga Buku
                                    <input type="number" className="form-
control mb-2"
                                    value={this.state.harga}
                                    onChange={ ev => this.setState({harga: 
ev.target.value}) }
                                    required />
                                    
                                    Cover Buku
                                    <input type="url" className="form-
control mb-2"
                                    value={this.state.cover}
                                    onChange={ ev => this.setState({cover: 
ev.target.value}) }
                                    required />

                                    <button className="btn btn-info btn-
block" type="submit">
                                        Simpan
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

10. Selanjutnya kita akan membuat fungsi untuk manipulasi atau mengubah data buku yang
sedah ada. Buat fungsi Add() untuk membuka komponen Modal dan reset semua isi dari
komponen di dalam Modal tersebut.

Add = () => {
        // menampilkan komponen modal
        $("#modal_buku").modal("show")
        this.setState({
            isbn: Math.random(1,10000000),
            judul: "",
             penulis: "",
            penerbit: "",
            cover: "",
            harga: 0,
            action: "insert"
        })
    }

11. Buat fungsi Edit() untuk membuka komponen Modal dan menentukan value dari setiap
komponen di dalam Modal sesuai dengan data buku yang dipilih oleh user.

Edit = (item) => {
        // menampilkan komponen modal
        $("#modal_buku").modal("show")
        this.setState({
            isbn: item.isbn,
            judul: item.judul,
            penulis: item.penulis,
            penerbit: item.penerbit,
            cover: item.cover,
            harga: item.harga,
            action: "update",
            selectedItem: item
        })
    }

12. Buat fungsi Save() untuk menyimpan perubahan atau penambahan data baru pada array
buku.

Save = (event) => {
        event.preventDefault();
        // menampung data state buku
        let tempBuku = this.state.buku

        if (this.state.action === "insert") {
            // menambah data baru
            tempBuku.push({
                isbn: this.state.isbn,
                judul: this.state.judul,
                penulis: this.state.penulis,
                penerbit: this.state.penerbit,
                cover: this.state.cover,
                harga: this.state.harga,
            })
        }else if(this.state.action === "update"){
             // menyimpan perubahan data
            let index = tempBuku.indexOf(this.state.selectedItem)
            tempBuku[index].isbn = this.state.isbn
            tempBuku[index].judul = this.state.judul
            tempBuku[index].penulis = this.state.penulis
            tempBuku[index].penerbit = this.state.penerbit
            tempBuku[index].cover = this.state.cover
            tempBuku[index].harga = this.state.harga
        }

        this.setState({buku : tempBuku})
        
        // menutup komponen modal_buku
        $("#modal_buku").modal("hide")
 }

13. Buat fungsi Drop() untuk menghapus data pada array buku sesuai dengan yang dipilih oleh
user.

Drop = (item) => {
        // beri konfirmasi untuk menghapus data
        if(window.confirm("Apakah anda yakin ingin menghapus data ini?")){
            // menghapus data
            let tempBuku = this.state.buku
            // posisi index data yg akan dihapus
            let index = tempBuku.indexOf(item)

            // hapus data
            tempBuku.splice(index, 1)

            this.setState({buku: tempBuku})
        }
  }

14. Dari hasil tampilan di bawah ini sudah terlihat bagaimana hasil dari rendering list dari array
dan manipulasi atau mengubah isi dari array.
 Tampilan List Buku

Tampilan Modal Form Buku

Referensi URL Image yang dapat digunakan:

 https://drive.google.com/uc?id=1DIW8qvYb9AvK7g8WiqLjSgupnP418ZN0
 https://drive.google.com/uc?id=1BH9hsP0yEDYMliPWbUe2dVm2Zj0DIlAT
 https://drive.google.com/uc?id=1UXa5oJm5SWNX9p2JrPRjdwOcxaqmP3Xs
 https://drive.google.com/uc?id=1fgW1LFZqqKUD33UygCv1GUwNgsvkCANh
 https://drive.google.com/uc?id=1jrZdvKKzi_3DfrJHXmy-t-2NqQL8MVba
 https://drive.google.com/uc?id=1lMmA8aIAebIpkGwqOoqYM7jeQOF_Q2f3
  https://drive.google.com/uc?id=1VPEh3h15NP7HO6i42HbgBA2DZON5bYax

Setelah kita membuat script untuk menampilkan dan manipulasi array buku, selanjutnya kita
akan membuat fitur pencarian data buku.

15. Tambahkan dua state baru yaitu “keyoword” berupa string dan “filterBuku” berupa
array kosong.
16. Buat fungsi searching() untuk melakukan proses pencarian data buku berdasarkan keyword
yang diisikan oleh user.

searching = event => {
        if(event.keyCode === 13){
            // 13 adalah kode untuk tombol enter

            let keyword = this.state.keyword.toLowerCase()
            let tempBuku = this.state.buku
            let result = tempBuku.filter(item => {
                return item.judul.toLowerCase().includes(keyword) ||
                item.penulis.toLowerCase().includes(keyword) || 
                item.penerbit.toLowerCase().includes(keyword)
            })

            this.setState({filterBuku: result})
        }
    }

17. Tambahkan komponen input pada fungsi render sebagai control pencarian dari user.

<input type="text" className="form-control my-2" placeholder="Pencarian"
                value={this.state.keyword}
                onChange={ev => this.setState({keyword: ev.target.value})}
                onKeyUp={ev => this.searching(ev)}
                 />

18. Tambahkan perintah berikut di dalam fungsi constructor() setelah pendefinisian

state.
this.state.filterBuku = this.state.buku
19. Ubah state buku menjadi filterBuku pada perintah mapping elemen array di dalam fungsi
render.

{ this.state.filterBuku.map( (item, index) => (
                        <Card
                        judul={item.judul}
                        penulis={item.penulis}
                        penerbit={item.penerbit}
                        harga={item.harga}
                         cover={item.cover}
                        onEdit={ () => this.Edit(item)}
                        onDrop={ () => this.Drop(item)}
                         />
                    )) }

20. Berikut adalah tampilan final dari praktikum modul ini.

Tampilan Pencarian
(ketik keyword pencarian dan tekan enter untuk proses pencarian)