Tutorial CRUD menggunakan Node JS, React JS, Express, dan MySQL

Sesuai dengan judul dari tutorial saya ini, saya akan mencoba membahas tentang pembuatan sistem CRUD (Create, Read, Update, Delete) menggunakan Node JS, React JS, Express, dan MySQL, disini saya menggunakan beberapa tool seperti Node JS versi v16.13.0, React JS, NPM versi 8.1.0, Express versi 4.17.3 dan MySQL2 versi 2.3.3 sebagai databasenya. Disini saya asumsikan anda sudah menginstal Node JS jika belum anda bisa ikuti tutorialnya disini. Saya menggunakan text editor Visual Studio Code untuk menulis codingnya, kalu belum silahkan download ya…

Ok kita mulai aja yuk..tutorialnya :

Daftar Isi :

Pembuatan folder project dan file package.json
Instalasi Express, MySQL, Sequelize, Cors dan nodemon
Membuat database dan table di MySQL
Struktur file
Membuat koneksi database, Controllers, Routes, Models
Membuat tampilan depan atau frontend
Membuat component
Testing
Penutup

1. PEMBUATAN FOLDER PROJECT DAN FILE PACKAGE.JSON

Pertama-tama kita akan membuat folder untuk project kita, bisa di D atau C atau direktori yang lainnya, disini saya membuatnya di direktori D, foldernya saya beri nama “crud_react_js”, anda bisa memberi nama yang lain tapi saya sarankan untuk memakai nama yang sama agar memudahkan dalam mengikutinya lalu didalam folder crud_react_js buat folder baru dengan nama “backend” setelah itu buka command prompt dengan mengetikan CMD lalu pindah ke direktori project kita dengan perintah “D:” lalu masuk ke direktori rcud_react_js dengan perintah “cd rcud_react_js” kemudian ketikan perintah “npm init -y” untuk membuat file “package.json” seperti gambar dibawah ini

2. INSTALASI EXPRESS, MySQL2, SEQUELIZE, CORS DAN NODEMON

Express.js adalah sebuah framework berbasis JavaScript yang di peruntukan untuk Node.js dimana arsitekturnya menggunakan MVC (Model View Controller) dengan alur data yang diolah pada Model, lalu dihubungkan melalui Controller, dan ditampilkan menjadi informasi melalui View. Express.js ini bersifat open source atau gratis yang lahir sekitar tahun 2010 lalu.

setelah kita membuat file package.json, selanjutnya kita akan instal “express, mysql2, sequelize cors” dengan mengetikan perintah “npm install express mysql2 sequelize cors” seperti gambar dibawah ini

Selamat kita sudah berhasil melakukan instalasi Express, MySQL2, Sequelize dan Cors, selanjutnya kita akan melakukan instalasi Nodemon dengan mengetikan perintah “D:\crud_react_js>npm install –global nodemon”, jika berhasil akan kelihatan seperti gambar dibawah ini

Selamat kita sudah berhasil instal nodemon, selanjutnya kita akan melakukan perubahan di file “package.json” file ini terletak di “D:\crud_react_js\backend” sesuaikan dengan folder dimana anda bekerja.

buka file “package.json” di editor seperti notepad atau Visual studio code atau yang lainnya lalu tambahkan code “type”: “module”, Ini agar kita dapat menggunakan Sintaks Modul ES6 untuk mengekspor dan mengimpor modul. jadinya seperti gambar dibawah ini

3. Membuat database dan table di MySQL

Saatnya kita membuat database dan table untuk tempat menampung data kita nanti, disini saya asumsikan anda sudah menginstal XAMPP, WAMP, MAMP, atau software sejenis lainnya, jika belum anda bisa membaca tutorial menginstal XAMPP disini

pertama kita akan membuat database dengan nama “db_crud” dengan perintah query seperti ini “CREATE DATABASE mern_db;” seperti gambar dibawah ini

lalu klik GO yang ada dibagian kanan bawah agar query yang kita buat segera diproses. setelah database sukses kita buat kita akan membuat tablenya, kita akan membuat table “products”, Untuk membuat tabel “products” anda dapat lakukan dengan menjalankan perintah SQLberikut :

CREATE TABLE products(
id_produk INT(11) PRIMARY KEY AUTO_INCREMENT,
nama VARCHAR(200),
harga DOUBLE,
tgl_buat DATE,
tgl_update DATE
)ENGINE=INNODB;

seperti gambar dibawah ini :

lalu klik GO yang ada dibagian kanan bawah agar query yang kita buat segera diproses.

4. Struktur File

Disini kita akan menerapkan pola MVC (Model, View, Controllers).

Kita akan membuat folder “config”, “controllers”, “models”, dan “routes” di dalam folder “backend”.

Kita juga membuat file “database.js” di folder “config”, lalu buat file “Products.js” di folder “controllers”, buat file “productModel.js” di folder “models”, buat file “index .js” di folder “routes”, dan yang terakhir kita akan membuat file “index.js” di folder “backend”.

Perhatikan gambar berikut untuk lebih jelasnya :

4. Membuat koneksi database, Controllers, Routes, Models.

PERTAMA kita akan membuat file untuk koneksi ke database, tadi kita sudah membuat file database.js yang ada didalam folder config, buka file database.js dan tambahkan code berikut :

import { Sequelize } from “sequelize”;
const db = new Sequelize(‘db_crud’, ‘root’, ”, {
host: “localhost”,
dialect: “mysql”
});
export default db;

lalu simpan.

KEDUA kita akan membuat controller, tadi kita sudah membuat file Products.js yang ada didalam folder Controllers, buka Products.js dan tambahkan code 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 });
    }  
}

KETIGA Kita akan membuat Routes, tadi kita telah membuat file index.js yang ada di dalam folder routes, buka index.js dan tuliskan code 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;

KEEMPAT Kita akan membuat Models, tadi kita sudah membuat file productModel.js yang ada dalam folder model, buka produkModel.js lalu tambahkan code 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;

SELANJUTNYA kita akan menambahkan kode pada file index.js yang ada di dalam folder backend seperti gambar dibawah ini (bukan index.js yang ada difolder routers ya)

kemudian tambahkan code 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 benar kita cek dengan perintah “nodemon index” tapi sebelum menjalankannya anda harus mengaktifkan “MySQL” dan server “Localhost” seperti gambar dibawah ini

kemudian baru di visual studio code kita buka new terminal lalu ketikan “nodemon index” dan jika berhasil akan terlihat seperti gambar dibawah ini

5. Membuat tampilan depan atau frontend

Untuk tampilan depannya atau front-end, kita akan menggunakan React JS.

Buka terminal baru di Visual Studio Code dan ketikkan perintah berikut di terminal: “npx create-react-app frontend“

seperti gambar dibawah ini

Disini kita akan menggunakan bulma css, Bulma merupakan salah satu responsive css framework.

Setelah berhasil membuat folder frontend dan menginstal reactjs, silahkan masuk kefolder frontend dengan perintah “cd frontend” dan instal bulma css dengan mengetikan peritah “npm install react-router-dom axios bulma” seperti gambar dibawah ini

setelah berhasil kita akan menjalankan project kita dengan mengetikan “npm start” seperti gambar dibawah ini

jika tidak muncul anda bisa buka browser dan ketikan “http://localhost:3000” tapi anda harus mengaktifkan server localhost dan MySQLnya dahulu.

6. Membuat Components

kita akan membuat folder baru di “frontend/src” dengan nama “components” setelah itu kita akan membuat 3 file baru dengan nama “ProductList.js”, “AddProduct.js”, dan “EditProduct.js” seperti gambar dibawah ini

setelah itu kita akan mengisi coding 3 file tersebut satu persatu, kita mulai dengan “ProductList.js” buka dan ketikan code berikut dan simpan

import React from "react";
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

setelah itu edit “AddProduct.js” buka dan ketikan code berikut dan simpan

import { useState } from 'react'
import axios from "axios";
import { useNavigate } from 'react-router-dom';
 
const AddProduct = () => {
    const [title, setTitle] = useState('');
    const [price, setPrice] = useState('');
    const navigate = useNavigate();
 
    const saveProduct = async (e) => {
        e.preventDefault();
        await axios.post('http://localhost:5000/products',{
            title: title,
            price: price
        });
        //redirect setelah save;
        navigate('/');
    }
 
    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

setelah itu edit “EditProduct.js” buka dan ketikan code berikut dan simpan

import { useState, useEffect } from 'react'
import axios from "axios";
import { useNavigate, useParams } from 'react-router-dom';
 
const EditProduct = () => {
    const [title, setTitle] = useState('');
    const [price, setPrice] = useState('');
    const navigate = useNavigate();
    const { id } = useParams();
 
    const updateProduct = async (e) => {
        e.preventDefault();
        await axios.patch(`http://localhost:5000/products/${id}`,{
            title: title,
            price: price
        });
        //redirect setelah save;
        navigate('/');
    }
 
    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

Setelah kita mengisi coding ke 3 file “ProductList.js”, “AddProduct.js”, dan “EditProduct.js” kita akan mengedit file App.js dan ketikan code berikut lalu simpan

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

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


export default App;

7. Testing

setelah kita membuat semuanya, saatnya sekarang kita akan testing terhadap aplikasi yang telah kita buat.

Pertama kita akan mengaktifkan nodemon dengan cara :

di Visual Studio Code klik Terminal > New Terminal
masuk ke direktori backend
ketikan nodemon index, jika berhasil akan muncul gambar dibawah ini

Kedua kita akan mengaktifkan npm dengan cara :

di Visual Studio Code klik Terminal > Split Terminal ( akan muncul terminal baru di samping terminal yang telah kita buat tadi )
Masuk ke direktori frontend
Ketikan npm start, jika berhasil akan muncul seperti gambar dibawah ini

Buka browser lalu ketikan “http://localhost:3000” jika semuanya berjalan dengan benar akan muncul seperti gambar dibawah ini

saatnya untuk test tombol edit jika semuanya berjalan dengan baik akan muncul gambar seperti gambar dibawah ini

silahkan di edit title dan pricenya lalu klik tombol update untuk menyimpan datanya, untuk proses delete anda bisa langsung menekan tombol deletenya, jika data yang dipilih terhapus itu berarti function deletenya sdh benar

8. Penutup

Demikian tutorial ini saya buat semoga dapat memberikan manfaat bagi programer pemula yang baru belajar react js seperti saya, terima kasih.

Tutorial CRUD menggunakan Node JS, React JS, Express, dan MySQL

Cara upload wordpress dari localhost ke hosting

Cara setting ftp simple di visual studio code

Membuat pencarian/search ListView di Flutter

Membuat Chart dengan PHP, MySql dan chart.js