Pada tutorial ini Anda akan belajar bagaimana membuat full stack CRUD aplikasi menggunakan node.js, express, MongoDB, dan 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.
#1. Install Express, Mongoose, 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://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. 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, mongoose, dan cors dengan mengetikan perintah berikut pada terminal:
npm i express mongoose cors
Selanjutnya, install nodemon secara global dengan mengetikan perintah berikut pada terminal:
npm i -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",
"mongoose": "^6.2.2"
}
}
Hal ini bertujuan agar kita dapat menggunakan ES6 Module Syntax untuk export dan import module.
#2. Buat file index.js
Buat file bernama “index.js” pada folder “backend”, kemudian ketikan kode berikut:
import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import UserRoute from "./routes/UserRoute.js";
const app = express();
mongoose.connect('mongodb://localhost:27017/fullstack_db',{
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', (error) => console.log(error));
db.once('open', () => console.log('Database Connected...'));
app.use(cors());
app.use(express.json());
app.use(UserRoute);
app.listen(5000, ()=> console.log('Server up and running...'));
Pada kode diatas, saya connect ke database “fullstack_db”.
Anda tidak perlu membuat database “fullstack_db”, mongoose akan membuatnya secara otomatis untuk Anda.
Jika Anda belum menginstall mongoDB di komputer Anda, silahkan pergi ke situs resminya: https://mongodb.com, kemudian download mongoDB versi Community Server atau kunjungi link berikut:
https://www.mongodb.com/try/download/community
#3. Routing
Buat sebuah folder bernama “routes”, kemudian buat file bernama “UserRoute.js” di dalam folder tersebut.
Seperti gambar berikut:
Kemudian ketikan kode berikut pada file “UserRoute.js” yang terdapat pada folder “routes” tersebut:
import express from "express";
import {
getUsers,
getUserById,
saveUser,
updateUser,
deleteUser
} from "../controllers/UserController.js";
const router = express.Router();
router.get('/users', getUsers);
router.get('/users/:id', getUserById);
router.post('/users', saveUser);
router.patch('/users/:id', updateUser);
router.delete('/users/:id', deleteUser);
export default router;
#4. Models
Buat sebuah folder bernama “models”, kemudian buat file bernama “UserModel.js” di dalam folder tersebut.
Seperti gambar berikut:
Kemudian ketikan kode berikut pada file “UserRoute.js” yang terdapat pada folder “models” tersebut:
import mongoose from "mongoose";
const User = mongoose.Schema({
name:{
type: String,
required: true
},
email:{
type: String,
required: true
},
gender:{
type: String,
required: true
}
});
export default mongoose.model('Users', User);
#5. Controllers
Buat sebuah folder bernama “controllers”, kemudian buat file bernama “UserController.js” di dalam folder tersebut.
Seperti gambar berikut:
Kemudian ketikan kode berikut pada file “UserController.js” yang terdapat pada folder “controllers” tersebut:
import User from "../models/UserModel.js";
export const getUsers = async (req, res) => {
try {
const users = await User.find();
res.json(users);
} catch (error) {
res.status(500).json({message: error.message});
}
}
export const getUserById = async (req, res) => {
try {
const user = await User.findById(req.params.id);
res.json(user);
} catch (error) {
res.status(404).json({message: error.message});
}
}
export const saveUser = async (req, res) => {
const user = new User(req.body);
try {
const inserteduser = await user.save();
res.status(201).json(inserteduser);
} catch (error) {
res.status(400).json({message: error.message});
}
}
export const updateUser = async (req, res) => {
try {
const updateduser = await User.updateOne({_id:req.params.id}, {$set: req.body});
res.status(200).json(updateduser);
} catch (error) {
res.status(400).json({message: error.message});
}
}
export const deleteUser = async (req, res) => {
try {
const deleteduser = await User.deleteOne({_id:req.params.id});
res.status(200).json(deleteduser);
} catch (error) {
res.status(400).json({message: error.message});
}
}
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:
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.
#6. Front-End
Untuk front-end, saya akan menggunakan React JS.
Untuk membuat project react js, dapat dilakukan dengan banyak cara. Akan tetapi cara yang paling mudah adalah “create react app”.
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:
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 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 i 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:
#7. Components
Buat sebuah folder bernama “components” di dalam folder “frontend/src”.
Kemudian, buat file components “UserList.js”, “AddUser.js”, dan “EditUser.js” pada folder “frontend/src/components”.
Seperti gambar berikut:
Kemudian buka file “UserList.js”, kemudian ketikan kode berikut:
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
const UserList = () => {
const [users, setUser] = useState([]);
useEffect(() => {
getUsers();
}, []);
const getUsers = async () => {
const response = await axios.get("http://localhost:5000/users");
setUser(response.data);
};
const deleteUser = async (id) => {
try {
await axios.delete(`http://localhost:5000/users/${id}`);
getUsers();
} catch (error) {
console.log(error);
}
};
return (
<div className="columns mt-5">
<div className="column is-half">
<Link to="add" className="button is-success">
Add New
</Link>
<table className="table is-striped is-fullwidth mt-2">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
<th>Gender</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{users.map((user, index) => (
<tr key={user._id}>
<td>{index + 1}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.gender}</td>
<td>
<Link
to={`edit/${user._id}`}
className="button is-info is-small mr-1"
>
Edit
</Link>
<button
onClick={() => deleteUser(user._id)}
className="button is-danger is-small"
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default UserList;
Selanjutnya, buka file “AddUser.js”, kemudian ketikan kode berikut:
import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
const AddUser = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [gender, setGender] = useState("Male");
const navigate = useNavigate();
const saveUser = async (e) => {
e.preventDefault();
try {
await axios.post("http://localhost:5000/users", {
name,
email,
gender,
});
navigate("/");
} catch (error) {
console.log(error);
}
};
return (
<div className="columns mt-5">
<div className="column is-half">
<form onSubmit={saveUser}>
<div className="field">
<label className="label">Name</label>
<div className="control">
<input
type="text"
className="input"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
/>
</div>
</div>
<div className="field">
<label className="label">Email</label>
<div className="control">
<input
type="text"
className="input"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
</div>
</div>
<div className="field">
<label className="label">Gender</label>
<div className="control">
<div className="select is-fullwidth">
<select
value={gender}
onChange={(e) => setGender(e.target.value)}
>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div className="field">
<div className="control">
<button type="submit" className="button is-success">
Save
</button>
</div>
</div>
</form>
</div>
</div>
);
};
export default AddUser;
Selanjutnya, buka file “EditUser.js”, kemudian ketikan kode berikut:
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
const EditUser = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [gender, setGender] = useState("Male");
const navigate = useNavigate();
const { id } = useParams();
useEffect(() => {
getUserById();
}, []);
const getUserById = async () => {
const response = await axios.get(`http://localhost:5000/users/${id}`);
setName(response.data.name);
setEmail(response.data.email);
setGender(response.data.gender);
};
const updateUser = async (e) => {
e.preventDefault();
try {
await axios.patch(`http://localhost:5000/users/${id}`, {
name,
email,
gender,
});
navigate("/");
} catch (error) {
console.log(error);
}
};
return (
<div className="columns mt-5">
<div className="column is-half">
<form onSubmit={updateUser}>
<div className="field">
<label className="label">Name</label>
<div className="control">
<input
type="text"
className="input"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
/>
</div>
</div>
<div className="field">
<label className="label">Email</label>
<div className="control">
<input
type="text"
className="input"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
</div>
</div>
<div className="field">
<label className="label">Gender</label>
<div className="control">
<div className="select is-fullwidth">
<select
value={gender}
onChange={(e) => setGender(e.target.value)}
>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div className="field">
<div className="control">
<button type="submit" className="button is-success">
Update
</button>
</div>
</div>
</form>
</div>
</div>
);
};
export default EditUser;
#8. App.js
Buka file “App.js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import UserList from "./components/UserList";
import AddUser from "./components/AddUser";
import EditUser from "./components/EditUser";
function App() {
return (
<BrowserRouter>
<div className="container">
<Routes>
<Route path="/" element={<UserList />} />
<Route path="add" element={<AddUser />} />
<Route path="edit/:id" element={<EditUser />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
#9. index.js
Buka file “index.js” pada folder “frontend/src”, kemudian ubah menjadi seperti berikut:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "bulma/css/bulma.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
#10. Testing
#READ
Kembali ke browser dan kunjungi URL berikut:
http://localhost:3000
Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:
#CREATE
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:
#UPDATE
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:
#DELETE
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 full-stack aplikasi dengan backend node.js express, mongoDB 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!
Komentar (0)