Skip to main content

Mengatur Struktur Folder Model, Controller, Routes dan Menambahkan Data dengan Baik di Express.js

 

illustrasi seseorang depan komputer

Struktur folder yang terorganisir merupakan kunci penting dalam pengembangan aplikasi web kompleks.Banyak developer yang mengalami kesulitan dalam mengelola kode aplikasi web mereka, terutama ketika projeknya semakin besar dan kompleks. Artikel ini akan mengupas tuntas tentang struktur folder yang rapi dan terorganisir untuk aplikasi Express.js Anda. Dengan struktur folder yang tepat, kode Anda akan menjadi lebih mudah dipahami, dipelihara, dan dikembangkan oleh Anda maupun tim Anda.

Dalam konteks aplikasi Express.js, struktur folder yang umum digunakan adalah dengan memisahkan model, route, dan controller ke dalam folder terpisah. Hmm lalu apa model, route, dan controller itu? berikut penjelasan singkatnya.

  • Model
    Model dalam konteks aplikasi Express.js adalah representasi dari entitas atau data dalam aplikasi. Ini biasanya berhubungan langsung dengan database atau sumber daya eksternal lainnya. Model bertanggung jawab untuk berinteraksi dengan basis data, melakukan operasi seperti pengambilan, penyimpanan, pembaruan, dan penghapusan data. Dalam struktur MVC, model mengimplementasikan logika bisnis dan aturan validasi untuk data aplikasi. Contohnya, jika Anda memiliki entitas "User" dalam aplikasi Anda, Anda akan memiliki model "User" yang berisi metode untuk berinteraksi dengan data pengguna seperti membuat pengguna baru, mengambil daftar pengguna, atau memperbarui detail pengguna.
  • Route
    Route menangani permintaan HTTP dari klien dan menentukan cara menanggapi permintaan tersebut. Ini adalah bagian dari aplikasi yang menentukan bagaimana aplikasi Anda berinteraksi dengan permintaan pengguna dan menentukan apa yang harus dilakukan ketika permintaan tertentu diterima. Route biasanya bertanggung jawab untuk memanggil fungsi kontrol yang sesuai dan kemudian merespons dengan hasilnya. Misalnya, ketika pengguna mengakses URL tertentu di aplikasi Anda, route akan menentukan fungsi kontrol mana yang harus dipanggil untuk menangani permintaan tersebut dan merespons dengan data yang sesuai.
  • Controller
    Controller adalah bagian dari aplikasi yang berisi logika untuk menangani permintaan dan merespons dengan data yang sesuai. Kontroller biasanya dipanggil oleh route setelah permintaan diterima. Ini adalah tempat di mana operasi bisnis sebenarnya dilakukan. Kontroller bertanggung jawab untuk memproses input, berinteraksi dengan model untuk mengambil atau menyimpan data, dan kemudian merespons dengan hasilnya. Misalnya, jika Anda memiliki permintaan untuk menampilkan halaman profil pengguna, kontroler akan mengambil data profil dari model, memformatnya sesuai kebutuhan, dan kemudian merespons dengan halaman profil yang sesuai.
Okee, jika teman-teman sudah paham ketiga nya, maka sekarang saatnya kita membuat struktur foldernya serta menampilkan data dari database Mysql.

Langkah 1 - Silahkan Buat Struktur Folder Seperti Dibawah

gambar vscode

Langkah 2 - Membuat File User dan Post di Folder Models

gambar vscode user model

Kemudian selanjutnya adalah melakukan instalasi package uuid, moment, dan bcrypt. UUID adalah identifier unik yang digunakan dalam pengembangan perangkat lunak untuk mengidentifikasi entitas tanpa harus bergantung pada penyimpanan sentral atau koordinasi antara entitas yang mengeluarkan identifikasi. Moment.js adalah sebuah library JavaScript yang digunakan untuk memanipulasi, menampilkan, dan memformat tanggal dan waktu dalam JavaScript. Ini membuatnya lebih mudah untuk bekerja dengan tanggal dan waktu dalam berbagai format dan zona waktu. Sedangkan Bcrypt adalah sebuah library kriptografi yang digunakan untuk hashing password dalam aplikasi web dan mobile.

Gunakan perintah dibawah untuk menginstall ketiga package diatas.
  • Package UUID
gambar perintah install uuid
  • Package Moment
gambar perintah install moment
  • Package Bcrypt

    gambar perintah install bcrypt


Selanjutnya adalah pada file UserModel.js kita akan membuat fungsi yang nantinya akan digunakan untuk melakukan register user. Pada fungsi register terdapat parameter userData yang nantinya akan menerima data dari controller user serta terdapat query SQL untuk memasukkan data ke dalam database MySQL. Atribut dan Value harus sesuai dengan yang terdapat didalam tabel Users MySQL, jika teman-teman lupa bisa mengunjungi artikel berikut Konfigurasi Mysql dalam 3 Langkah mudah ke dalam Aplikasi Express js. Berikut merupakan kode lengkapnya.
const connection = require("../db.js");

const register = async (userData) => {
  try {
    const query = `INSERT INTO users (id_user,name,
username,email,password,created_at,updated_at) VALUES (?,?,?,
?,?,?,?)`;
    const [result] = await connection.execute(query, [
      userData.id,
      userData.name,
      userData.username,
      userData.email,
      userData.password,
      userData.createdAt,
      userData.createdAt,
    ]);

    return result;
  } catch (error) {
    console.log(error);
  }
};

module.exports = { register };

Langkah 3 - Membuat File User dan Post Controller

gambar vscode user controller


Pada file UserController.js, kita akan menangani permintaan dari sisi pengguna. Langkah pertama adalah mengimpor model userModel, library moment, bcrypt, dan juga uuid untuk mendukung fungsionalitas yang diperlukan. Berikut adalah contoh implementasinya.

const userModel = require("../models/UserModel.js");
const { v4: uuidv4 } = require("uuid");
const bcrypt = require("bcrypt");
const moment = require("moment");

const regsiter = async (req, res) => {
  try {
    const data = req.body;
    const salt = await bcrypt.genSalt();
    const hashPawword = await bcrypt.hash(data.password, salt);
    const createdAt = await moment().format("YYYY-MM-DD HH:mm:
ss");

    const userData = {
      id: uuidv4(),
      name: data.name,
      username: data.username,
      email: data.email,
      password: hashPawword,
      createdAt,
    };

    const result = await userModel.register(userData);
    console.log(result);
    res.json({ message: "success" });
  } catch (error) {
    console.log(error);
  }
};

module.exports = { regsiter };

Langkah 4 - Membuat File UserRoutes

Pada file route ini kita akan membuat rute ataupun endpoint dari url dan juga menggunakan fungsi yang sudah dibuat pada folder controller. Berikut implementasi lengkapnya.

const userController = require("../controllers/UserController.js");
const router = require("express").Router();

router.post("/register", userController.regsiter);

module.exports = router;


Langkah 5 - Memperbarui kode pada file index.js

Silahkan teman-teman ubah kode file index.js menjadi seperti berikut ini.
const express = require("express");
const app = express();
const userRoutes = require("./routes/UserRoutes.js");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use("/api", userRoutes);

app.listen(8000, () => {
  console.log("success running");
});

Langkah 6 - Melakukan API Testing dengan Postman

Langkah terakhir adalah melakukan testing dengan Postman, Postman adalah alat pengembangan yang populer digunakan oleh para pengembang perangkat lunak untuk menguji, mengelola, dan menguji API (Antarmuka Pemrograman Aplikasi).



Semoga artikel ini memberikan wawasan yang berguna dalam memahami konsep dasar penggunaan Express.js dalam menangani routing dalam aplikasi Node.js Anda. Teruslah belajar dan eksplorasi, dan semangat terus.

Comments

Popular posts from this blog

Front End Developer: Pengertian serta Alur Belajarnya

  Pada artikel sebelumnya, kita telah membahas perbedaan antara  Front End dan Back End dalam pengembangan web. Kini, saatnya kita mendalami lebih jauh tentang peran Front End Developer, siapa mereka, apa yang mereka lakukan, dan bagaimana alur belajar yang tepat untuk menjadi seorang ahli di bidang ini. Pengertian Frond End Developer Front End Developer adalah seorang pengembang perangkat lunak yang bertanggung jawab untuk menciptakan tampilan dan interaksi pengguna pada sebuah website atau aplikasi web. Mereka fokus pada bagian depan (front end) dari sebuah aplikasi, yaitu bagian yang langsung berinteraksi dengan pengguna. Tugas utama seorang Front End Developer adalah memastikan bahwa situs web atau aplikasi web mudah digunakan, responsif, dan memiliki tampilan yang menarik. Front End Developer bekerja dengan berbagai teknologi dan alat untuk menciptakan antarmuka pengguna yang intuitif dan fungsional. Beberapa teknologi utama yang digunakan oleh Front End Developer antara...

Membangun API dengan Express js Untuk Pemula

  Perkenalan Pertama kita kenalan terlebih dahulu apa itu Express js dan Restfull Api. Express  adalah sebuah framework dari node js yang digunakan untuk membangun aplikasi di sisi server (backend) yang memiliki keunggulan minimalis dan fleksibel, sedangkan RESTfull API adalah sebuah gaya arsitektur perangkat lunak yang biasanya digunakan dalam pengembangan aplikasi web. RESTfull API dirancang berdasarkan prinsip-prinsi REST, yang dimana membuatnya menjadi layanan web yang ringan, fleksibel, dan mudah diakses. RESTful API menggunakan metode HTTP seperti GET, POST, PUT, DELETE untuk berinteraksi dengan resource. Setiap metode HTTP memiliki makna dan tujuan yang spesifik: GET : Untuk mengambil data dari server POST : Untuk mengirim atau membuat resource baru ke server PUT : Untuk mengubah resource atau memperbarui data DELET : Untuk menghapus data Persiapan Untuk membangun RESTfull API dengan Express js kita perlu mempersiapkan hal-hal berikut: Menginstall Node js Menginstall E...