DEV LEVEL UP: DATABASE

🚀 DEV LEVEL UP: DATABASE

Selama ini kita sudah banyak belajar dan challenge tentang:

• Design & tampilan website
• Responsive layout
• Fitur dan interaksi
• Simulasi checkout
• Dashboard
• Website bisnis
• E-Commerce
• dan berbagai project lainnya

Sekarang kita akan naik satu level lagi.

DATABASE 🗄️

Kalau sebelumnya data di website kalian masih ditulis manual di code atau hanya simulasi, sekarang kita mulai belajar bagaimana membuat aplikasi yang menyimpan data sungguhan.

Apa Itu Database?

Sederhananya:

Database adalah tempat aplikasi menyimpan data.

Contohnya ketika kita membuat website rental mobil.

Tanpa database:

Avanza
Harga: Rp350.000
Status: Tersedia

Semua data tersebut ditulis langsung di source code.

Kalau owner mau mengganti harga?

Developer harus edit code lagi.

Tapi kalau menggunakan database:

Nama Mobil
Harga
Foto
Status
Kategori
Deskripsi

Semua data disimpan di database.

Nantinya data tersebut bisa diubah melalui:

ADMIN DASHBOARD

Owner cukup login → ubah harga → klik simpan.

Website otomatis ikut berubah.

Tidak perlu developer edit source code setiap kali ada perubahan.

DATABASE BISA MENYIMPAN APA?

Hampir semua data aplikasi.

Contohnya:

Website Rental

• Armada
• Harga
• Booking
• Customer
• Jadwal rental

E-Commerce

• Produk
• Kategori
• Stok
• Customer
• Keranjang
• Order
• Transaksi

Website Sekolah

• Siswa
• Guru
• Kelas
• Absensi
• Nilai

Travel

• Paket wisata
• Jadwal keberangkatan
• Customer
• Booking
• Pembayaran

POS / Kasir

• Produk
• Stok
• Penjualan
• Customer
• Laporan transaksi

Dan masih banyak lagi.

JENIS DATABASE

Database sendiri ada banyak jenis.

Beberapa yang mungkin sering kalian dengar:

• PostgreSQL
• MySQL
• SQLite
• MongoDB
• Firebase
• Redis
• dan lainnya.

Masing-masing punya fungsi, kelebihan, dan use case yang berbeda.

Kalian nggak harus langsung menghafal semuanya.

Kalau mau belajar lebih dalam:

👉 Cari di YouTube
👉 Baca dokumentasi
👉 Tanya ChatGPT / Gemini
👉 Coba bikin project kecil sendiri

Untuk sekarang kita akan fokus ke satu jenis database yang sangat umum digunakan:

PostgreSQL

Dan kita akan menggunakan platform:

🟢 Supabase

atau

⚡ Neon

Keduanya punya paket gratis dan relatif mudah digunakan untuk pemula.

Bahkan bukan cuma buat latihan.

Untuk project kecil sampai menengah, kalian juga sudah bisa menggunakan database tersebut untuk project client sungguhan.

NEON VS SUPABASE

Secara sederhana:

Neon

Fokus sebagai PostgreSQL Database Cloud.

Cocok kalau kalian ingin database yang simpel dan kemudian backend-nya kalian bangun sendiri.

Contoh stack:

Next.js
↓
Drizzle / Prisma
↓
Neon PostgreSQL

Supabase

Supabase lebih seperti Backend Platform.

Selain PostgreSQL Database, Supabase juga menyediakan:

• Authentication
• Storage
• Realtime
• API
• Database Dashboard

Jadi untuk pemula Supabase juga sangat menarik karena banyak fitur backend sudah tersedia.

FLOW APLIKASI KITA

Contohnya kita membuat website rental.

User membuka:

website.com

Website mengambil data:

Database
↓
Daftar Armada
↓
Website

Misalnya di database ada:

Data tersebut otomatis ditampilkan ke website.

LALU ADMIN DASHBOARD BUAT APA?

Nah, ini bagian yang mulai menarik.

Kalian bisa membuat:

/admin

Di dalamnya ada:

Dashboard

• Total Produk
• Total Booking
• Total Customer
• Total Transaksi

Kelola Armada

Admin bisa:

• Tambah mobil
• Edit mobil
• Hapus mobil
• Ubah harga
• Ubah status

Semua perubahan langsung masuk ke database.

CRUD

Dalam dunia database kalian akan sering mendengar istilah:

CRUD

CRUD adalah:

CREATE

Membuat data.

Contoh:

Tambah produk baru.

READ

Membaca data.

Contoh:

Menampilkan daftar produk.

UPDATE

Mengubah data.

Contoh:

Mengubah harga produk.

DELETE

Menghapus data.

Contoh:

Menghapus produk.

Hampir semua admin dashboard yang kalian lihat sebenarnya berisi operasi:

CREATE · READ · UPDATE · DELETE

CONTOH SEDERHANA

Misalnya kita punya tabel:

products

Isinya:

id
name
price
stock
image
created_at

Admin klik:

Tambah Produk

Data dikirim ke database.

POST
↓
Database
↓
Produk tersimpan

Kemudian halaman website mengambil data tersebut.

Database
↓
GET Products
↓
Website

Sekarang website kalian sudah bukan sekadar website statis.

Tapi mulai menjadi:

WEB APPLICATION

CARA MULAI

Untuk tahap belajar kalian bisa pilih salah satu:

OPTION 1 — SUPABASE

Masuk ke Supabase.

Buat:

New Project

Kemudian buat database.

Kalian bisa membuat tabel langsung melalui dashboard Supabase.

Contoh:

products

Kolom:

id
name
price
stock
image
created_at

OPTION 2 — NEON

Masuk ke Neon.

Buat project PostgreSQL baru.

Nantinya Neon akan memberikan:

DATABASE_URL

Kurang lebih bentuknya seperti:

postgresql://username:password@host/database

⚠️ Jangan pernah share database URL kalian ke publik.

Karena di dalamnya terdapat credential untuk mengakses database.

ENVIRONMENT VARIABLE

Credential database biasanya kita simpan di:

.env

Contoh:

DATABASE_URL=postgresql://....

Kenapa?

Supaya credential tidak ditulis langsung di source code.

Dan pastikan:

.env

tidak ikut ter-upload ke GitHub.

Biasanya sudah masuk:

.gitignore

KALAU DEPLOY KE VERCEL?

Kalau aplikasi kalian menggunakan Vercel:

Masuk:

Vercel
→ Project
→ Settings
→ Environment Variables

Tambahkan:

DATABASE_URL

Kemudian isi value database kalian.

Setelah itu lakukan redeploy jika diperlukan.

Sekarang aplikasi yang online di Vercel bisa terkoneksi ke database.

ORM

Nanti kalian juga mungkin menemukan istilah:

ORM

Contohnya:

• Prisma
• Drizzle ORM

ORM membantu kita berinteraksi dengan database menggunakan code yang lebih nyaman.

Contohnya dibanding menulis SQL panjang, kita bisa menggunakan syntax dari ORM.

Untuk sekarang kalian nggak perlu pusing dengan istilahnya dulu.

Yang penting pahami alurnya:

FRONTEND
↓
BACKEND / SERVER
↓
ORM
↓
DATABASE

DATABASE BIKIN PROJECT KALIAN NAIK LEVEL

Begitu kalian memahami database, kalian sudah bisa mulai membuat:

✅ Admin Dashboard
✅ Sistem Login
✅ CRUD Produk
✅ Inventory
✅ Booking System
✅ CMS
✅ POS Kasir
✅ Sistem Absensi
✅ LMS
✅ E-Commerce
✅ CRM
✅ ERP sederhana

Dan di sinilah development mulai jauh lebih menarik.

Karena kalian tidak hanya membuat:

"Website yang bagus."

Tapi mulai membuat:

SISTEM YANG BISA DIGUNAKAN BISNIS.

TAPI INGAT

Database juga berarti kalian mulai menangani:

DATA.

Jadi mulai biasakan beberapa hal:

❌ Jangan taruh password di source code.

❌ Jangan upload .env ke GitHub.

❌ Jangan expose DATABASE_URL.

❌ Jangan memberikan akses database langsung ke user.

❌ Jangan menyimpan password user dalam bentuk plain text.

Untuk aplikasi production, security harus mulai diperhatikan.

Nanti kita akan belajar bagian tersebut secara bertahap.

🎯 TARGET LEVEL INI

Kalian belum harus menjadi Database Engineer.

Target kita sederhana:

Paham bagaimana sebuah website menyimpan, membaca, mengubah, dan menghapus data menggunakan database.

Kalau kalian sudah bisa membuat:

Website
+
Database
+
Admin Dashboard
+
CRUD

Kalian sudah melewati salah satu milestone besar sebagai web developer.

🔥 MINI CHALLENGE

Untuk latihan pertama:

Buat sebuah website yang mempunyai:

Public Website

Menampilkan data dari database.

Minimal:

• Nama
• Foto
• Harga
• Deskripsi / informasi
• Status

Admin Dashboard

Admin bisa:

✅ Tambah data
✅ Melihat data
✅ Edit data
✅ Hapus data

Database boleh menggunakan:

Neon atau Supabase.

Tema bebas.

Contohnya:

• Rental Mobil
• Katalog Produk
• Travel
• Restaurant
• Property
• Course
• Inventory
• Booking
• Portfolio CMS

NEXT LEVEL

Setelah Database, kita akan mulai masuk ke:

Authentication

Bagaimana membuat:

Login
Register
Session
Role
Admin
User

Kemudian setelah itu kita bisa masuk ke:

Real Fullstack Application.

Jadi pelan-pelan kita bergerak dari:

UI
↓
Interactive Website
↓
Database
↓
Authentication
↓
Admin Dashboard
↓
Fullstack Application
↓
Real Business System

Welcome to the next level. 🚀