Wajah menggunakan pembaruan nodejs mysql

Pada tutorial ini Anda akan belajar bagaimana membuat aplikasi CRUD full stack menggunakan node. js, express, MySQL, berikan 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

#satu. Instal 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 install di komputer Anda

https. //kode. Studio visual. 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. 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”

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

npm install express mysql2 sequelize cors

Selanjutnya, instal nodemon secara global dengan mengetikan perintah berikut pada terminal

npm install -g 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.3",
    "mysql2": "^2.3.3",
    "sequelize": "^6.17.0"
  }
}

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

#2. Buat basis data

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

Pada tutorial ini, saya menggunakan XAMPP

Kemudian buat database baru di MySQL, Anda bisa menggunakan tools seperti SQLyog, PHPMyAdmin atau sejenisnya

Disini saya membuat database dengan nama “crud_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 crud_db;

Perintah SQL diatas akan membuat sebuah database dengan nama “crud_db”

#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 “UserController. js” di dalam folder “controllers”, buat file “UserModel. js” di dalam folder “models”, buat file “UserRoute. js” di dalam folder “routes”, dan buat file “index. js" di dalam folder "backend"

Perhatikan gambar berikut untuk lebih jelasnya

#4. Hubungkan Basis Data

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

import {Sequelize} from "sequelize";

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

export default db;

#5. model

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

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

const {DataTypes} = Sequelize;

const User = db.define('users',{
    name: DataTypes.STRING,
    email: DataTypes.STRING,
    gender: DataTypes.STRING
},{
    freezeTableName:true
});

export default User;

(async()=>{
    await db.sync();
})();

#6. Pengontrol

Buka pengontrol file “UserController. js” yang terdapat pada folder “controllers”, kemudian ketikan kode berikut

import User from "../models/UserModel.js";

export const getUsers = async(req, res) =>{
    try {
        const response = await User.findAll();
        res.status(200).json(response);
    } catch (error) {
        console.log(error.message);
    }
}

export const getUserById = async(req, res) =>{
    try {
        const response = await User.findOne({
            where:{
                id: req.params.id
            }
        });
        res.status(200).json(response);
    } catch (error) {
        console.log(error.message);
    }
}

export const createUser = async(req, res) =>{
    try {
        await User.create(req.body);
        res.status(201).json({msg: "User Created"});
    } catch (error) {
        console.log(error.message);
    }
}

export const updateUser = async(req, res) =>{
    try {
        await User.update(req.body,{
            where:{
                id: req.params.id
            }
        });
        res.status(200).json({msg: "User Updated"});
    } catch (error) {
        console.log(error.message);
    }
}

export const deleteUser = async(req, res) =>{
    try {
        await User.destroy({
            where:{
                id: req.params.id
            }
        });
        res.status(200).json({msg: "User Deleted"});
    } catch (error) {
        console.log(error.message);
    }
}

#7. rute

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

npm init -y

#8. Titik masuk

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

npm init -y

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

npm init -y

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut

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. Paling depan

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 face. Akan tetapi wajah yang paling mudah adalah “buat aplikasi reaksi”

Buka terminal baru dan buat project react baru dengan mengetikan perintah berikut pada terminal

npm init -y

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

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

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

Selanjutnya, masuk ke dalam folder “frontend” dengan mengetikan perintah berikut pada terminal

npm init -y

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

npm init -y

Setelah penginstalan selesai, dan untuk memastikan semuanya berjalan dengan baik, ketikan perintah berikut untuk menjalankan proyek

npm init -y

Jika berjalan dengan baik, maka akan tampil seperti gambar berikut

#10. komponen

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

Kemudian, tetapi komponen file “UserList. js”, “AddUser. js", mereka memberi "EditUser. js” pada folder “frontend/src/components”

Seperti gambar berikut

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

npm init -y

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

npm init -y

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

npm init -y

#sebelas. aplikasi. js

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

npm install express mysql2 sequelize cors

#12. indeks. js

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

npm install express mysql2 sequelize cors

#13. pengujian

#BACA

Kembali ke browser dan kunjungi URL berikut

npm install express mysql2 sequelize cors

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut

#MEMBUAT

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

Masukkan “Name, Email” dan “Gender”, kemudian klik tombol “SAVE”

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

#MEMPERBARUI

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

Ubah “Name, Email” atau “Gender”, kemudian klik tombol “UPDATE”

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

#MENGHAPUS

Untuk menghapus data klik salah satu dari tombol “Delete”

Jika delete berhasil, maka data akan hilang dari list user

Kesimpulan

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

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