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 backendSetelah itu, ketikkan perintah berikut pada terminal untuk membuat file “package. json”
________satu_______Selanjutnya, instal express, mysql2, sequelize dan cors dengan mengetikan perintah berikut pada terminal
npm install express mysql2 sequelize corsSelanjutnya, instal nodemon secara global dengan mengetikan perintah berikut pada terminal
npm install -g nodemonSelanjutnya, 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_0
#8. Titik masuk
Buka file “index. js” yang terdapat pada folder “backend”, kemudian ketikan kode berikut
npm init -y_1Untuk memastikan aplikasi berjalan dengan baik, jalankan aplikasi dengan mengetikan perintah berikut pada terminal
npm init -y_2Jika 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_3Dan 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_4Setelah itu, instal react-router-dom, axios, dan bulma dengan mengetikan perintah berikut pada terminal
npm init -y_5Setelah penginstalan selesai, dan untuk memastikan semuanya berjalan dengan baik, ketikan perintah berikut untuk menjalankan proyek
npm init -y_6Jika 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_7Selanjutnya, buka file “AddUser. js”, kemudian ketikan kode berikut
npm init -y_8Selanjutnya, buka file “EditUser. js”, kemudian ketikan kode berikut
#sebelas. aplikasi. js
Buka file “App. js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut
npm install express mysql2 sequelize cors0
#12. indeks. js
Buka file “index. js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut
npm install express mysql2 sequelize cors1
#13. pengujian
#BACA
Kembali ke browser dan kunjungi URL berikut
npm install express mysql2 sequelize cors2Jika 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