Membuat Tampilan Halaman Client

Product.js

1. Siapkan gambar slider berukuran 900x350, letakkan di folder src/image

2. Buat folder Buat file dengan nama product.js, import library berikut

import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Slide1 from '../image/Slide1.jpg';
import Slide2 from '../image/Slide2.png';
import ProductItem from './ProductItem';

export default class Product extends React.Component
{
render() {

return (
<div className=" container">
</div>
);
}
}

3. Tambahkan method constructor

constructor(props){
        super(props);
        this.state = {
            products: [],
            find: "",
            filter:""
        }
    }

4. Tambahkan method bind

bind = (e) => {
        this.setState({[e.target.name]: e.target.value})
}

5. Tambahkan method GetProducts

GetProducts = () => {
        let url = "http://localhost/toko_online/public/products"
        axios.get(url)
        .then(res => {
            this.setState({products: res.data.products})
        })
        .catch(error => {
             console.log(error)
        })
    }
6. Tambahkan method Search

Search = (e) => {
        if (e.keyCode === 13) {
            let url = "http://localhost/toko_online/public/products"
            
            let form = new FormData()
            form.append("find", this.state.find)
            axios.post(url, form)
                .then(res => {
                    this.setState({products: res.data.products})
                })
                .catch(error => {
                    console.log(error);
                })
        }
    }

7. Tambahkan component did mount

componentDidMount() {
        this.GetProducts()
    }

8. Pada method render, di dalam return tambahkan code berikut setelah div container

<div className="row">
                <div className="col-lg-3">
                    <h1 className="my-4">React Shopping</h1>
                        <input type="text" className="form-control" nam
e="find" value={this.state.find} onChange={this.bind} onKeyUp={this.Search
} required placeholder="Pencarian.." />
                        <hr></hr>
                        <h4>Kategori</h4>
                        <form onSubmit={this.Filter}>
                            <div className="form-group">
                                <select className="form-control" nam
e="filter" value={this.state.value} onChange={this.bind} >
                                    <option value="">Choose...</option>
                                    <option value="sepatu">Sepatu</option>
                                    <option value="topi">Topi</option>
                                    <option value="kaos">Kaos</option>
                                </select>
                            </div> 
                            <button type="submit" className="btn btn-info 
pull-right m-2">
                                Filter
                            </button>
                        </form>
                </div>
                <div className="col-lg-9">
                    <div id="slideshow" className="carousel slide my-4" da
ta-ride="carousel">
                        <ol className="carousel-indicators">
                            <li data-target="#slideshow" data-slide-to="0" 
className="active"></li>
                            <li data-target="#slideshow" data-slide-
to="1"></li>
                        </ol>
                        <div className="carousel-inner" role="listbox">
                            <div className="carousel-item active">
                                <img className="d-block img-fluid" sr
c={Slide1} alt="First slide" />
                            </div>
                            <div className="carousel-item">
                                <img className="d-block img-fluid" sr
c={Slide2} alt="Second slide" />
                            </div>
                        </div>
                        <a className="carousel-control-prev" hre
f="#slideshow" role="button" data-slide="prev">
                            <span className="carousel-control-prev-icon" a
ria-hidden="true"></span>
                            <span className="sr-only">Previous</span>
                        </a>
                        <a className="carousel-control-next" hre
f="#slideshow" role="button" data-slide="next">
                            <span className="carousel-control-next-icon" a
ria-hidden="true"></span>
                            <span className="sr-only">Next</span>
                        </a>
                    </div>

                    <div className="row">
                        {renderData}
                        <hr></hr>
                        <Link to="/checkout">
                            <button className="btn btn-success float-
right">
                                <span className="fa fa-check"></span> Chec
kout
                            </button>
                        </Link>
                        <Link to="/cart">
                             <button className="btn btn-primary float-
right" style={{  marginRight: "10px" }}>
                                <span className="fa fa-cart-plus"></span> 
View Cart
                            </button>
                        </Link><br/><br/><br/>
                    </div>
                </div>
            </div>

ProductItem.js

1. Buat file ProductItem.js dengan isian default sebagai berikut

import React from 'react';

export default class ProductItem extends React.Component {

2. Tambahkan constructor

constructor(props) {
        super(props);
        this.state = {
            quantity: 1,
            total: 0
        }
    }

3. Tambahkan bind

bind = (e) => {
        this.setState({[e.target.name]: e.target.value})
    }

4. Tambahkan method addToCart

addToCart = (item) => {
        let oldItems = JSON.parse(localStorage.getItem('cart')) || []
        let newid = item.id
        let match = oldItems.find(({ id }) => id === newid);
        if (match)
        {
                match['qty'] += parseInt(this.state.quantity);
                match['total'] = match['total'] + (item.price * parseIn
t(this.state.quantity));
        }
        else
         {
            let newItem = {
                'id': item.id,
                'name': item.name,
                'price': item.price,
                'qty': parseInt(this.state.quantity),
                'total': item.price * parseInt(this.state.quantity)
            };
            oldItems.push(newItem);
        }
        localStorage.setItem('cart', JSON.stringify(oldItems));
      }

5. Tambahkan tampilan product seperti berikut

render(){
        const { item } = this.props;
        return (
            <div className="col-lg-4 col-md-6 mb-4">
            <div className="card h-100" style={{ marginBottom: "10px
"}}>
                <a href="#"><img className="card-img-top" sr
c={'http://localhost/toko_online/public/images/' + item.image} alt="" /
></a>
                    <div className="card-body">
                        <h4 className="card-title">
                            <a href="#">{item.name}</a>
                        </h4>
                        <h5>Rp. {item.price}</h5>
                        <p className="card-text">{item.description}</p>
                        <span className="card-text">
                            <small>Available Quantity: </small>{item.av
ailable_quantity}
                        </span>
                        { item.available_quantity > 0 ?
                        <div>
                        <button className="btn btn-sm btn-warning" 
                            onClick={() =>this.addToCart(item)}>Add to 
cart</button>
                        <input type="number" value={this.state.quantity
} name="quantity" 
                            onChange={this.bind} className="float-
right" 
                            style={{ width: "60px", marginRight: "10px"
, borderRadius: "3px"}}/>
                        </div> : 
                            <p className="text-danger"> product is out 
of stock </p>
                        }
                </div>
            </div>
            </div>
       )
    }