Tutorial CRUD dengan Node JS, Express, React JS, dan MySQL (Full-Stack)

Tutorial CRUD dengan Node JS, Express, React JS, dan MySQL (Full-Stack)

Pada tutorial ini Anda akan belajar bagaimana membuat full stack CRUD aplikasi menggunakan backend node.js, express, MySQL, dan frontend React JS.

Tidak hanya itu,

Pada tutorial ini Anda juga akan belajar menggunakan Bulma CSS untuk style pada frontend.

Dengan demikian, aplikasi yang dibangun menjadi lebih user friendly dengan user interface (UI) yang elegan dan responsif.

Ini bukan tutorial untuk pemula,

Jika Anda seorang pemula di node.js express, saya sarankan Anda terlebih dahulu mempelajari “Tutorial Express Js Untuk Pemula”.

Dan jika Anda pemula di React JS, saya sarankan Anda terlebih dahulu mempelajari “Tutorial React Js Untuk Pemula”.

Mari kita mulai.

Tonton video tutorial web berkualitas GRATIS di channel youtube saya:

Klik Disini.!

 

#1. Install Express, MySQL2, Nodemon, dan Cors

Buat sebuah folder di komputer Anda, di sini saya beri nama “fullstack”.

Jika Anda membuat folder dengan nama yang sama, itu lebih baik.

Anda bebas membuatnya di manapun, baik di C, D, ataupun di Desktop.

Kemudian buka folder “fullstack” tersebut menggunakan code editor, disini saya menggunakan Visual Studio Code.

Saya juga menyarankan Anda untuk menggunakan Visual Studio Code.

Anda dapat mendownload Visual Studio Code pada link berikut, kemudian instal di komputer Anda:

https://code.visualstudio.com/

Setelah folder “fullstack” ter-open menggunakan Visual Studio Code, buat sebuah sub folder bernama “backend” di dalam folder “fullstack”.

Selanjutnya, buka terminal pada Visual Studio Code pada menu bar terminal => new terminal.

Kemudian, masuk ke folder “backend” dengan mengetikan perintah berikut pada terminal:

cd backend

Setelah itu, ketikkan perintah berikut pada terminal untuk membuat file “package.json”:

npm init -y

Selanjutnya, install express, mysql2, sequelize dan cors dengan mengetikan perintah berikut pada terminal:

npm install express mysql2 sequelize cors

Selanjutnya, install nodemon sebagai development dependensi dengan mengetikan perintah berikut pada terminal:

npm install --save-dev nodemon

Selanjutnya, tambahkan kode berikut pada file “package.json”:

"type": "module",

Sehingga file “package.json” terlihat menjadi seperti berikut:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mysql2": "^2.3.0",
    "sequelize": "^6.6.5"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

Hal ini bertujuan agar kita dapat menggunakan ES6 Module Syntax untuk export dan import module.

 

#2. Buat database dan table

Untuk dapat menggunakan MySQL, Anda perlu menginstall XAMPP, WAMP, MAMP, atau software sejenisnya.

Pada tutorial ini, saya menggunakan XAMPP.

Kemudian buat database baru pada MySQL, Anda dapat menggunakan tools seperti SQLyog, PHPMyAdmin atau sejenisnya.

Disini saya membuat database dengan nama “mern_db”.

Jika Anda membuat database dengan nama yang sama, itu lebih baik.

Untuk  membuat database pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE mern_db;

Perintah SQL diatas akan membuat sebuah database dengan nama “mern_db”.

Selanjutnya, buat sebuah table di dalam database “mern_db”.

Disini saya membuat sebuah table dengan nama “products”.

Jika Anda membuat table dengan nama yang sama, itu lebih baik. 

Untuk membuat table “products”, dapat dilakukan dengan mengeksekusi perintah SQL berikut:

CREATE TABLE products(
id INT(11) PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(200),
price DOUBLE,
createdAt DATE,
updatedAt DATE 
)ENGINE=INNODB;

Perintah SQL diatas akan membuat sebuah table bernama “products” dengan field: id, title, price, createdAt, dan updatedAt.

Sequelize mewajibkan Anda untuk memiliki field: id, createdAt, dan updatedAt.

Jika Anda tidak memiliki field tersebut, maka akan terdapat error.

 

#3. Struktur Aplikasi

Agar aplikasi lebih terstruktur rapi, kita akan menerapkan pola MVC (Model-View-Controllers).

Buat folder “config”, “controllers”, “models”, dan “routes” di dalam folder “backend”.

Kemudian buat file “database.js” di dalam folder “config”, buat file “Products.js” di dalam folder “controllers”, buat file “productModel.js” di dalam folder “models”, buat file “index.js” di dalam folder “routes”, dan buat file “index.js” di dalam folder “backend”.

Perhatikan gambar berikut untuk lebih jelasnya:

folder

 

#4. Connect ke Database

Buka file “database.js” yang terdapat pada folder “config”, kemudian ketikan kode berikut:

import { Sequelize } from "sequelize";

const db = new Sequelize('mern_db', 'root', '', {
    host: "localhost",
    dialect: "mysql"
});

export default db;

 

#5. Models

Buka file model “productModel.js” yang terdapat pada folder “models”, kemudian ketikan kode berikut:

import { Sequelize } from "sequelize";
import db from "../config/database.js";

const { DataTypes } = Sequelize;

const Product = db.define('products',{
    title:{
        type: DataTypes.STRING
    },
    price:{
        type: DataTypes.DOUBLE
    }
},{
    freezeTableName: true
});

export default Product;

 

#6. Controllers

Buka file controller “Products.js” yang terdapat pada folder “controllers”, kemudian ketikan kode berikut:

import Product from "../models/productModel.js";

export const getAllProducts = async (req, res) => {
    try {
        const products = await Product.findAll();
        res.json(products);
    } catch (error) {
        res.json({ message: error.message });
    }  
}

export const getProductById = async (req, res) => {
    try {
        const product = await Product.findAll({
            where: {
                id: req.params.id
            }
        });
        res.json(product[0]);
    } catch (error) {
        res.json({ message: error.message });
    }  
}

export const createProduct = async (req, res) => {
    try {
        await Product.create(req.body);
        res.json({
            "message": "Product Created"
        });
    } catch (error) {
        res.json({ message: error.message });
    }  
}

export const updateProduct = async (req, res) => {
    try {
        await Product.update(req.body, {
            where: {
                id: req.params.id
            }
        });
        res.json({
            "message": "Product Updated"
        });
    } catch (error) {
        res.json({ message: error.message });
    }  
}

export const deleteProduct = async (req, res) => {
    try {
        await Product.destroy({
            where: {
                id: req.params.id
            }
        });
        res.json({
            "message": "Product Deleted"
        });
    } catch (error) {
        res.json({ message: error.message });
    }  
}

 

#7. Routes

Buka file “index.js” yang terdapat pada folder “routes”, kemudian ketikan kode berikut:

import express from "express";

import { 
    getAllProducts,
    createProduct,
    getProductById,
    updateProduct,
    deleteProduct
} from "../controllers/Products.js";

const router = express.Router();

router.get('/', getAllProducts);
router.get('/:id', getProductById);
router.post('/', createProduct);
router.patch('/:id', updateProduct);
router.delete('/:id', deleteProduct);

export default router;

 

#8. Entry Point

Buka file “index.js” yang terdapat pada folder “backend”, kemudian ketikan kode berikut:

import express from "express";
import db from "./config/database.js";
import productRoutes from "./routes/index.js";
import cors from "cors";

const app = express();

try {
    await db.authenticate();
    console.log('Database connected...');
} catch (error) {
    console.error('Connection error:', error);
}

app.use(cors());
app.use(express.json());
app.use('/products', productRoutes);

app.listen(5000, () => console.log('Server running at port 5000'));

Untuk memastikan aplikasi berjalan dengan baik, jalankan aplikasi dengan mengetikan perintah berikut pada terminal:

nodemon index

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

nodemon

Sampai disini Anda telah berhasil membuat “backend”.

Untuk memastikan backend berjalan dengan baik, Anda dapat menggunakan POSTMAN atau extensions REST Client pada VS Code untuk melakukan pengujian.

 

#9. Front-End

Untuk front-end, saya akan menggunakan React JS.

Jika Anda belum familiar dengan React JS, saya sarankan untuk mempelajari “Tutorial React JS Untuk Pemula” terlebih dahulu.

Untuk membuat project react js, dapat dilakukan dengan banyak cara. Akan tetapi cara yang paling mudah adalah “create react app”.

Untuk dapat menjalankan perintah “create-react-app”, Anda hanya perlu menginstall node.js di komputer Anda.

Anda mendownload node.js pada link berikut dan install di komputer Anda:

https://nodejs.org/en/

Setelah node.js terinstall di komputer Anda, buka Command Prompt atau terminal kemudian ketikkan perintah berikut untuk memastikan node.js terinstall dengan baik di komputer Anda:

node -v

Kemudian ketikan perintah berikut untuk memastikan NPM (Node Package Manager) juga terinstall dengan baik:

npm -v

Perhatikan gambar berikut untuk lebih jelasnya:

node npm

Setelah node.js dan npm terinstall dengan baik di komputer Anda, kemudian buka new terminal dan buat project react baru dengan mengetikan perintah berikut pada terminal:

npx create-react-app frontend

Dan pastikan Anda berada di folder “fullstack”, seperti gambar berikut:

create-react-app

Jika instalasi selesai, maka akan terdapat folder “frontend” di dalam folder “fullstack”.

Sehingga di dalam folder “fullstack” terdapat dua folder yaitu: “backend” dan “frontend” seperti gambar berikut:

img

Folder “backend” merupakan folder aplikasi yang dibangun sebelumnya menggunakan node.js express, sedangkan “frontend” merupakan folder aplikasi yang dibuat menggunakan React JS.

Selanjutnya, masuk kedalam folder “frontend” dengan mengetikan perintah berikut pada terminal:

cd frontend

Setelah itu, install react-router-dom, axios, dan bulma dengan mengetikan perintah berikut pada terminal:

npm install react-router-dom axios bulma

Setelah instalasi selesai, dan untuk memastikan semuanya berjalan dengan baik, ketikan perintah berikut untuk menjalankan project:

npm start

Jika berjalan dengan baik, maka akan tampil seperti gambar berikut:

img

Kemudian, buka browser Anda dan kunjungi URL berikut:

http://localhost:3000

Maka akan tampil seperti berikut:

react

 

#10. Components

Buat sebuah folder bernama “components” di dalam folder “frontend/src”.

Kemudian, buat file components “ProductList.js”, “AddProduct.js”, dan “EditProduct.js” pada folder “frontend/src/components”.

Seperti gambar berikut:

img

Kemudian buka file “ProductList.js”, kemudian ketikan kode berikut:

import { useState, useEffect } from 'react'
import axios from "axios";
import { Link } from "react-router-dom";

const ProductList = () => {
    const [products, setProduct] = useState([]);

    useEffect(() => {
        getProducts();
    }, []);

    const getProducts = async () => {
        const response = await axios.get('http://localhost:5000/products');
        setProduct(response.data);
    }

    const deleteProduct = async (id) => {
        await axios.delete(`http://localhost:5000/products/${id}`);
        getProducts();
    }

    return (
        <div>
            <Link to="/add" className="button is-primary mt-2">Add New</Link>
            <table className="table is-striped is-fullwidth">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Title</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    { products.map((product, index) => (
                        <tr key={ product.id }>
                            <td>{ index + 1 }</td>
                            <td>{ product.title }</td>
                            <td>{ product.price }</td>
                            <td>
                                <Link to={`/edit/${product.id}`} className="button is-small is-info">Edit</Link>
                                <button onClick={ () => deleteProduct(product.id) } className="button is-small is-danger">Delete</button>
                            </td>
                        </tr>
                    )) }
                    
                </tbody>
            </table>
        </div>
    )
}

export default ProductList

Selanjutnya, buka file “AddProduct.js”, kemudian ketikan kode berikut:

import { useState } from 'react'
import axios from "axios";
import { useHistory } from 'react-router-dom';

const AddProduct = () => {
    const [title, setTitle] = useState('');
    const [price, setPrice] = useState('');
    const history = useHistory();

    const saveProduct = async (e) => {
        e.preventDefault();
        await axios.post('http://localhost:5000/products',{
            title: title,
            price: price
        });
        history.push("/");
    }

    return (
        <div>
            <form onSubmit={ saveProduct }>
                <div className="field">
                    <label className="label">Title</label>
                    <input 
                        className="input" 
                        type="text" 
                        placeholder="Title" 
                        value={ title }
                        onChange={ (e) => setTitle(e.target.value) }
                    />
                </div>

                <div className="field">
                    <label className="label">Price</label>
                    <input 
                        className="input" 
                        type="text" 
                        placeholder="Price" 
                        value={ price }
                        onChange={ (e) => setPrice(e.target.value) }
                    />
                </div>

                <div className="field">
                    <button className="button is-primary">Save</button>
                </div>
            </form>
        </div>
    )
}

export default AddProduct

Selanjutnya, buka file “EditProduct.js”, kemudian ketikan kode berikut:

/* eslint-disable react-hooks/exhaustive-deps */
import { useState, useEffect } from 'react'
import axios from "axios";
import { useHistory, useParams } from 'react-router-dom';

const EditProduct = () => {
    const [title, setTitle] = useState('');
    const [price, setPrice] = useState('');
    const history = useHistory();
    const { id } = useParams();

    const updateProduct = async (e) => {
        e.preventDefault();
        await axios.patch(`http://localhost:5000/products/${id}`,{
            title: title,
            price: price
        });
        history.push("/");
    }

    useEffect(() => {
        getProductById();
    }, []);

    const getProductById = async () => {
        const response = await axios.get(`http://localhost:5000/products/${id}`);
        setTitle(response.data.title);
        setPrice(response.data.price);
    }

    return (
        <div>
            <form onSubmit={ updateProduct }>
                <div className="field">
                    <label className="label">Title</label>
                    <input 
                        className="input" 
                        type="text" 
                        placeholder="Title" 
                        value={ title }
                        onChange={ (e) => setTitle(e.target.value) }
                    />
                </div>

                <div className="field">
                    <label className="label">Price</label>
                    <input 
                        className="input" 
                        type="text" 
                        placeholder="Price" 
                        value={ price }
                        onChange={ (e) => setPrice(e.target.value) }
                    />
                </div>

                <div className="field">
                    <button className="button is-primary">Update</button>
                </div>
            </form>
        </div>
    )
}

export default EditProduct

 

#11. App.js

Buka file “App.js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProductList from "./components/ProductList";
import AddProduct from "./components/AddProduct";
import EditProduct from "./components/EditProduct";

function App() {
  return (
    <Router>
    <div className="container">
      <div className="columns">
        <div className="column is-half is-offset-one-quarter">
          <Switch>
            <Route exact path="/">
              <ProductList />
            </Route>
            <Route path="/add">
              <AddProduct />
            </Route>
            <Route path="/edit/:id">
              <EditProduct />
            </Route>
          </Switch>
        </div>
      </div>
    </div>
    </Router>
  );
}

export default App;

 

#12. Testing

Kembali ke browser dan kunjungi URL berikut:

http://localhost:3000

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

img

Klik tombol “Add New”, maka akan tampil form seperti berikut:

img

Masukkan “Title” dan “Price”, kemudian klik tombol “SAVE”.

Jika insert berhasil, maka akan terlihat penambahan data pada list product seperti gambar berikut:

img

Untuk mengupdate data klik salah satu dari tombol “Edit”, maka akan tampil form seperti berikut:

img

Ubah “Title” atau “Price”, kemudian klik tombol “UPDATE”.

Jika update berhasil, maka akan terlihat perubahan data pada list product seperti gambar berikut:

img

Untuk menghapus data klik salah satu dari tombol “Delete”.

Jika delete berhasil, maka data akan hilang dari list product.

Related: Tutorial React JS Untuk Pemula

Kesimpulan:

Pembahasan kali ini adalah bagaimana membuat full stack aplikasi dengan backend node.js express dan frontend menggunakan React JS.

Dengan demikian, Anda telah memiliki gambaran bagaimana membuat aplikasi web modern yang memisahkan antara backend dan frontend.

Jadi tunggu apalagi, Let’s Coding!

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!
Download Source Code

Share:




LAINNYA UNTUK ANDA


Komentar (0)

Leave a Comment