Frontend HTML, CSS, JavaScript dan Backend Node.js + Express

1. Pendahuluan

Dalam pengembangan aplikasi web modern, sistem biasanya dibagi menjadi dua bagian utama yaitu frontend dan backend.

Pembagian ini bertujuan agar aplikasi lebih mudah dikembangkan, dirawat, dan diperluas di masa depan.

Secara sederhana:

Frontend adalah bagian yang dilihat dan digunakan oleh pengguna.
Backend adalah bagian yang bekerja di server untuk memproses data, menyimpan data, dan mengatur logika aplikasi.

Pada artikel ini kita akan membahas arsitektur aplikasi menggunakan teknologi berikut:

Frontend

HTML
CSS
JavaScript

Backend

Node.js
Express.js

Database (opsional dalam contoh)

MySQL / PostgreSQL / MongoDB

Arsitektur ini sangat cocok untuk membangun berbagai sistem seperti:

sistem audit
sistem pengawasan
dashboard laporan
sistem manajemen dokumen
aplikasi internal organisasi atau rumah sakit

2. Apa itu Frontend

Frontend adalah bagian aplikasi yang berinteraksi langsung dengan pengguna melalui browser.

Frontend bertugas menampilkan:

halaman website
form input data
tabel data
dashboard
tombol dan navigasi

Frontend biasanya dibangun menggunakan tiga teknologi dasar web.

HTML (HyperText Markup Language)

HTML digunakan untuk membuat struktur halaman web.

Contoh sederhana:

<h1>Dashboard Pengawasan</h1>
<p>Selamat datang di sistem pengawasan.</p>

HTML menentukan elemen seperti:

judul
paragraf
tabel
form
gambar
tombol

CSS (Cascading Style Sheets)

CSS digunakan untuk mengatur tampilan halaman web.

Dengan CSS kita dapat mengatur:

warna
ukuran teks
layout halaman
posisi elemen
desain dashboard

Contoh:

body{
    font-family: Arial;
    background-color:#f4f6f9;
}

JavaScript

JavaScript digunakan untuk membuat interaksi pada halaman web.

Contoh fungsi JavaScript:

mengambil data dari server
memproses form
menampilkan popup
memperbarui tabel tanpa reload halaman

Contoh sederhana:

fetch("/api/audit")
.then(res => res.json())
.then(data => console.log(data));

JavaScript memungkinkan halaman web menjadi dinamis dan interaktif.

3. Apa itu Backend

Backend adalah bagian aplikasi yang berjalan di server.

Backend bertugas untuk:

menerima request dari frontend
memproses data
menyimpan data ke database
mengambil data dari database
mengatur autentikasi pengguna

Backend tidak terlihat oleh pengguna.

Dalam artikel ini kita menggunakan teknologi:

Node.js
Express.js

Node.js

Node.js adalah runtime environment yang memungkinkan JavaScript dijalankan di server.

Sebelumnya JavaScript hanya bisa berjalan di browser, tetapi dengan Node.js kita bisa membuat:

server web
API
aplikasi backend

Contoh server sederhana Node.js:

const http = require("http");

const server = http.createServer((req,res)=>{
    res.end("Server berjalan");
});

server.listen(3000);

Express.js

Express.js adalah framework yang digunakan untuk membuat server Node.js lebih mudah.

Express membantu membuat:

routing
API
middleware
pengelolaan request

Contoh server Express sederhana:

const express = require("express");
const app = express();

app.get("/", (req,res)=>{
    res.send("Server Express berjalan");
});

app.listen(3000);

4. Cara Frontend dan Backend Bekerja Bersama

Alur kerja aplikasi web biasanya seperti berikut:

Pengguna membuka halaman website.
Browser memuat HTML, CSS, dan JavaScript.
JavaScript mengirim request ke server.
Server memproses request tersebut.
Server mengambil data dari database.
Server mengirimkan respon ke frontend.
Frontend menampilkan data kepada pengguna.

Diagram sederhana:

Browser
(HTML CSS JS)
      │
      │ Request API
      ▼
Backend
(Node.js + Express)
      │
      ▼
Database

5. Struktur Folder Aplikasi

Agar aplikasi mudah dikelola, developer biasanya membuat struktur folder yang rapi.

Berikut contoh struktur aplikasi lengkap.

app-pengawasan/
│
├── public
│   │
│   ├── css
│   │     main.css
│   │     dashboard.css
│   │     form.css
│   │
│   ├── js
│   │     app.js
│   │     api.js
│   │     utils.js
│   │
│   ├── images
│   │     logo.png
│   │
│   ├── layout
│   │     header.html
│   │     sidebar.html
│   │     footer.html
│   │
│   ├── dashboard
│   │     index.html
│   │
│   ├── audit
│   │     index.html
│   │     tambah.html
│   │     edit.html
│   │
│   ├── regulasi
│   │     index.html
│   │
│   ├── program
│   │     index.html
│   │
│   ├── diklat
│   │     index.html
│   │
│   └── login
│         index.html
│
├── src
│
│   ├── config
│   │     database.js
│   │
│   ├── routes
│   │     auditRoutes.js
│   │     programRoutes.js
│   │     regulasiRoutes.js
│   │     diklatRoutes.js
│   │     userRoutes.js
│   │
│   ├── controllers
│   │     auditController.js
│   │     programController.js
│   │     regulasiController.js
│   │     diklatController.js
│   │
│   ├── services
│   │     auditService.js
│   │
│   ├── models
│   │     auditModel.js
│   │     userModel.js
│   │
│   ├── middleware
│   │     authMiddleware.js
│   │     errorMiddleware.js
│   │
│   └── utils
│         helper.js
│
├── uploads
│
├── logs
│
├── package.json
│
└── server.js

6. Penjelasan Struktur Folder

Folder Public

Folder ini berisi frontend aplikasi.

Browser hanya dapat mengakses folder ini.

Isinya:

HTML
CSS
JavaScript
gambar

Folder src

Folder ini berisi kode backend aplikasi.

Isinya antara lain:

config

konfigurasi sistem seperti database.

routes

alamat endpoint API.

controllers

mengatur logika request dan response.

services

logika bisnis aplikasi.

models

query database.

middleware

fungsi tambahan seperti autentikasi.

7. Contoh Alur Request

Misalnya pengguna membuka halaman audit.

Langkah yang terjadi:

Browser membuka /audit/index.html
JavaScript mengambil data dari /api/audit
Server menerima request
Route memanggil controller
Controller memanggil service
Service mengambil data dari model
Model mengambil data dari database
Data dikirim kembali ke frontend

Alur:

Frontend
   │
   ▼
Routes
   │
   ▼
Controller
   │
   ▼
Service
   │
   ▼
Model
   │
   ▼
Database

8. Keuntungan Arsitektur Ini

Keuntungan menggunakan arsitektur ini antara lain:

kode lebih rapi
mudah dikembangkan
mudah diperbaiki
cocok untuk aplikasi besar
dapat digunakan jangka panjang

Struktur ini juga memungkinkan aplikasi berkembang menjadi sistem yang lebih kompleks seperti:

dashboard manajemen
sistem audit organisasi
sistem pengawasan
sistem manajemen rumah sakit

9. Kesimpulan

Frontend dan backend merupakan dua komponen penting dalam pengembangan aplikasi web.

Frontend dibangun menggunakan:

HTML
CSS
JavaScript

Backend dibangun menggunakan:

Node.js
Express.js

Dengan struktur folder yang rapi dan arsitektur yang jelas, aplikasi web dapat dikembangkan secara profesional, mudah dirawat, dan dapat berkembang menjadi sistem yang lebih besar di masa depan.

Arsitektur Aplikasi Web Modern dengan Frontend HTML, CSS, JavaScript dan Backend Node.js + Express