Tutorial Express.js MariaDB dan EJS: Panduan Lengkap Membuat Aplikasi Web

2 February 2025 | Tags: , , , ,


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 via Facebook tentang Tutorial Express.js MariaDB dan EJS: Panduan Lengkap Membuat Aplikasi Web

Komentar tentang Tutorial Express.js MariaDB dan EJS: Panduan Lengkap Membuat Aplikasi Web

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *