Tutorial Express.js MariaDB dan EJS: Panduan Lengkap Membuat Aplikasi Web
2 February 2025 | Tags: EJS, Express.js, MariaDB, Sequelize, tutorial Express.js
Dalam tutorial ini, kita akan membuat aplikasi Express.js yang terhubung dengan MariaDB menggunakan Sequelize, serta menampilkan data menggunakan EJS sebagai templating engine. Aplikasi ini terkait akuntansi akan memiliki fitur untuk menampilkan daftar akun dan menambahkan akun baru melalui antarmuka web.
1. Persiapan Proyek
a. Instalasi Dependensi
Pertama, Instalasi Dependensi yang diperlukan dalam proyek ini.
npm init -y npm install express sequelize mariadb dotenv body-parser cors ejs npm install --save-dev nodemon
Perintah di atas akan menginisialisasi proyek Node.js dan menginstal semua dependensi yang diperlukan, termasuk Express.js sebagai framework backend, Sequelize sebagai ORM untuk MariaDB, dan EJS untuk tampilan.
b. Struktur proyek
Struktur proyek yang akan kita gunakan adalah sebagai berikut:
/expressJS-MariaDB │── /node_modules │── /config │ └── database.js │── /models │ └── index.js │ └── Account.js │── /routes │ └── accounts.js │── /controllers │ └── accountController.js │── /views │ └── accounts.ejs │ └── addAccount.ejs │── /public │ └── style.css (opsional) │── server.js │── package.json │── .env
Struktur ini membantu kita dalam mengorganisir file agar lebih mudah dikelola.
2. Konfigurasi Database
Buat file config/database.js untuk mengatur koneksi ke MariaDB:
const { Sequelize } = require("sequelize"); require("dotenv").config(); const sequelize = new Sequelize(process.env.DB_NAME, process.env.DB_USER, process.env.DB_PASS, { host: process.env.DB_HOST, dialect: "mariadb", port: process.env.DB_PORT, logging: false, }); module.exports = sequelize;
Tambahkan kredensial database di file .env:
DB_HOST=localhost DB_NAME=your_database_name DB_USER=your_database_user DB_PASS=your_database_password
File ini akan memastikan bahwa aplikasi dapat berkomunikasi dengan database MariaDB menggunakan Sequelize.
3. Membuat Model Sequelize
Buat file models/Account.js untuk mendefinisikan tabel accounts:
const sequelize = require("../config/database"); const Account = sequelize.define("Account", { account_id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true }, account_code: { type: DataTypes.CHAR(3), allowNull: false }, account_name: { type: DataTypes.STRING, allowNull: false } }, { tableName: "accounts", timestamps: false }); module.exports = Account;
Kode ini mendefinisikan model untuk tabel accounts di database, dengan kolom account_id, account_code, dan account_name.
4. Konfigurasi Server
Buat file server.js:
const express = require("express"); const path = require("path"); const bodyParser = require("body-parser"); const cors = require("cors"); require("dotenv").config(); const sequelize = require("./config/database"); const accountRoutes = require("./routes/accounts"); const app = express(); // Middleware app.use(cors()); app.use(bodyParser.urlencoded({ extended: true })); // Untuk parsing form data app.use(express.static(path.join(__dirname, "public"))); // Untuk file statis seperti CSS // Set EJS sebagai view engine app.set("view engine", "ejs"); app.set("views", path.join(__dirname, "views")); // Gunakan routes app.use("/accounts", accountRoutes); // Tes koneksi database sequelize.authenticate() .then(() => console.log("Connected to MariaDB")) .catch((err) => console.error("Connection error:", err)); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });
Kode ini menginisialisasi server Express, menghubungkan ke database, dan mengatur middleware serta routing.
5. Membuat Routes dan Controller
a. Routes (routes/accounts.js)
const express = require("express"); const { getAccounts, showAddAccountForm, createAccount } = require("../controllers/accountController"); const router = express.Router(); router.get("/", getAccounts); router.get("/add", showAddAccountForm); router.post("/save", createAccount); module.exports = router;
b. Controller (controllers/accountController.js)
const { Account } = require("../models"); // Mendapatkan semua data Account const getAccounts = async (req, res) => { try { const accounts = await Account.findAll(); res.render("accounts", { accounts }); } catch (error) { res.status(500).json({ message: "Error retrieving accounts", error }); } }; /// Menampilkan form tambah akun const showAddAccountForm = (req, res) => { res.render("addAccount"); // Mengarahkan ke form tambah akun }; // Menyimpan akun baru ke database const createAccount = async (req, res) => { try { const { account_code, account_name } = req.body; await Account.create({ account_code, account_name }); res.redirect("/accounts"); // Redirect ke halaman daftar akun setelah sukses } catch (error) { res.status(500).json({ message: "Error creating account", error }); } }; module.exports = { getAccounts, showAddAccountForm, createAccount };
Kode ini menangani pengambilan data akun dari database, menampilkan form tambah akun, dan menyimpan data baru ke dalam database.
6. Membuat Halaman EJS
a. Menampilkan Daftar Akun (views/accounts.ejs)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Daftar Akun</title> <link rel="stylesheet" href="/style.css"> <!-- Opsional --> </head> <body> <h1>Daftar Akun</h1> <a href="/accounts/add">Tambah Account</a> <table border="1"> <thead> <tr> <th>ID</th> <th>Kode Akun</th> <th>Nama Akun</th> </tr> </thead> <tbody> <% accounts.forEach(account => { %> <tr> <td><%= account.account_id %></td> <td><%= account.account_code %></td> <td><%= account.account_name %></td> </tr> <% }) %> </tbody> </table> </body> </html>
b. Form Tambah Akun (views/addAccount.ejs)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tambah Akun Baru</title> <link rel="stylesheet" href="/style.css"> <!-- Opsional --> </head> <body> <h1>Tambah Akun Baru</h1> <form action="/accounts/save" method="POST"> <label for="account_code">Kode Akun:</label> <input type="text" id="account_code" name="account_code" required><br><br> <label for="account_name">Nama Akun:</label> <input type="text" id="account_name" name="account_name" required><br><br> <button type="submit">Tambah Akun</button> </form> <br> <a href="/accounts">Kembali ke Daftar Akun</a> </body> </html>
7. Menjalankan Aplikasi
Jalankan server dengan:
nodemon server.js atau node server.js
Buka browser: http://localhost:3000/accounts
Kesimpulan
Tutorial ini menunjukkan cara menghubungkan Express.js dengan MariaDB menggunakan Sequelize, serta menampilkan data dengan EJS. Dengan pendekatan ini, aplikasi menjadi modular dan mudah dikembangkan lebih lanjut.
Source Code
https://github.com/xuexibianma/expressjs-mariadb
Komentar tentang Tutorial Express.js MariaDB dan EJS: Panduan Lengkap Membuat Aplikasi Web