Modul Pelajar — Fasa 6: Database & Backend dengan Supabase

🗺️ Perjalanan Anda dalam Fasa Ini

Database mungkin bunyi menakutkan. "SQL? Postgres? API?" — jangan risau.

Selepas fasa ini, anda akan faham konsep asas dan — lebih penting — boleh SURUH AI uruskan database untuk anda. Anda tak perlu jadi DBA (Database Administrator). Anda cuma perlu tahu apa yang nak disimpan.

Anggap fasa ini seperti belajar memandu kereta automatik — anda tak perlu tahu cara enjin berfungsi untuk pandu dari A ke B. Sama juga dengan database — anda tak perlu hafal SQL syntax; AI akan tuliskan untuk anda. Tugas anda cuma: tahu data apa yang penting, dan tahu soalan apa yang nak ditanya pada database.

Pada akhir fasa ini, anda akan boleh:
• Bina app yang simpan data di cloud — bukan dalam Excel atau fail tempatan
• Tambah login supaya setiap pengguna ada data sendiri
• Guna AI (Claude Code / Codex) untuk hasilkan kod database dengan pantas
• Faham cukup untuk berbincang dengan pasukan developer tentang backend

0 Pengenalan: Apa Itu Backend?

Apa Itu Backend?

Setiap website ada dua bahagian:

Frontend — apa yang pengguna nampak (HTML, CSS, JavaScript). Macam bahagian hadapan sebuah kedai.
Backend — yang berjalan di belakang tabir (server, database, API). Macam stor belakang dan dapur kedai.

Bayangkan aplikasi Todo list. Frontend tunjuk senarai tugasan. Tapi di mana tugasan itu disimpan? Kalau hanya dalam browser, data akan hilang bila refresh. Backend menyimpan data di database — server yang sentiasa online.

Kenapa Kita Perlukan Backend?

Data kekal — tak hilang bila refresh atau tutup browser
Kongsi data — ramai pengguna boleh akses data yang sama
Keselamatan — kawal siapa boleh akses dan ubah data
Skalabiliti — boleh handle berjuta pengguna
Automasi — server boleh buat tugas tanpa pengguna online

Apa Itu Supabase?

Supabase adalah platform "backend dalam kotak" — ia menyediakan database, API, authentication, dan storage, semuanya dalam satu platform. Tak perlu setup server sendiri, tak perlu konfigurasi rumit. Dan ada free tier yang sangat generous (500MB database, 2GB storage, 50,000 monthly active users — percuma!).

Supabase vs Firebase

Firebase (Google) popular tapi guna database NoSQL. Supabase guna PostgreSQL — database SQL standard industri. Kalau anda sudah belajar SQL, anda sudah boleh guna Supabase. Kalau tak pernah belajar SQL, Supabase ada Table Editor yang macam Excel/spreadsheet — tak perlu tahu SQL pun boleh mula!

1 Buat Akaun & Project Supabase

Langkah 1.1: Buka supabase.com

Pergi ke supabase.com dan klik "Start your project" atau "Sign In".

Langkah 1.2: Login dengan GitHub

Guna akaun GitHub untuk login. Ini adalah cara paling mudah:

Klik "Sign in with GitHub"
Authorize Supabase (benarkan akses)
Selepas login, anda akan dibawa ke dashboard Supabase

Tip: Tiada akaun GitHub? Boleh daftar guna email biasa. Tapi GitHub disyorkan — nanti akan guna GitHub untuk hosting website percuma.

Langkah 1.3: Cipta Project Baru

Klik butang "New project" (di kanan atas)
Isi Name: contohnya "todo-app-saya" atau "blog-saya"
Set Database Password — simpan password ini! (Guna password manager)
Pilih Region — pilih yang paling dekat (contoh: Singapore)
Pilih Pricing Plan — pilih Free
Klik "Create new project"

Peringatan: Project mengambil masa 1-3 minit untuk disediakan. Ini masa yang baik untuk minum air!

Langkah 1.4: Dapatkan API Keys

Selepas project siap, pergi ke Project Settings > API. Anda akan nampak:

Project URL — macam: https://abcdefghijkl.supabase.co
anon public key — ini yang akan kita guna di frontend (selamat)
service_role key — ini RAHSIA, jangan dedah! (hanya untuk backend / admin)

Checkpoint: Anda sepatutnya sudah ada Project URL dan anon key. Simpan di Notepad atau file .env. Anda akan guna dua benda ni sepanjang modul ini.

Prompt untuk AI

Claude Code (Skill)

Skill: supabase:supabase
"Saya baru buat project Supabase. Bagi saya panduan setup project dan cara dapatkan API keys."

Codex (VS Code)

"I just created a new Supabase project. Guide me through getting the API keys and setting up my first connection."

2 Reka Table Pertama dengan AI

Apa Itu Table?

Table (atau jadual) adalah tempat data disimpan. Macam sheet dalam Excel. Setiap table ada lajur (columns) dan baris (rows). Contoh: table "todos" mungkin ada lajur: id, task, is_complete, created_at, user_id.

Guna AI Supabase untuk Reka Table

Supabase ada ciri AI dalam Table Editor. Boleh terus minta AI reka table untuk anda:

Di dashboard Supabase, pergi ke Table Editor
Klik Create table
Anda akan nampak pilihan "Use AI to design your table" atau ikon sihir (sparkle)
Taip: "Create a table to store todo items with task, completion status, and timestamps"
AI akan cadangkan struktur table — semak dan klik Save

-- Atau guna SQL terus dalam SQL Editor:
CREATE TABLE todos (
  id BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  task TEXT NOT NULL,
  is_complete BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  user_id UUID DEFAULT auth.uid()
);

-- Enable Row Level Security
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

Prompt untuk AI

Claude Code (Skill)

"Buat table todos dalam Supabase dengan kolum: id (auto-increment), task (text), is_complete (boolean), created_at (timestamp), user_id (uuid). Generate SQL sekali."

Codex (VS Code)

"Generate SQL to create a todos table in Supabase with columns: id, task, is_complete, created_at, user_id. Include RLS."

3 Sambung dari Website (API Keys)

3.1: Buat Fail HTML Ringkas

Buat fail baru index.html dan salin kod berikut:

<!-- index.html -->
<!DOCTYPE html>
<html lang="ms">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App Saya + Supabase</title>
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
  <h1>App Todo Saya</h1>
  <div id="todos"></div>

  <script>
    // Init Supabase client
    const supabaseUrl = 'https://YOUR_PROJECT_URL.supabase.co';
    const supabaseKey = 'YOUR_ANON_KEY';
    const supabase = supabase.createClient(supabaseUrl, supabaseKey);

    // Ambil semua todos
    async function loadTodos() {
      const { data, error } = await supabase
        .from('todos')
        .select('*')
        .order('created_at', { ascending: false });

      if (error) {
        console.error('Error:', error);
        return;
      }

      const container = document.getElementById('todos');
      container.innerHTML = data.map(todo =>
        `<div>${todo.task} — ${todo.is_complete ? '✅' : '⬜'}</div>`
      ).join('');
    }

    loadTodos();
  </script>
</body>
</html>

3.2: Ganti API Keys

Tukar YOUR_PROJECT_URL dan YOUR_ANON_KEY dengan nilai dari langkah 1.4.

3.3: Buka dengan Live Server

Buka VS Code
Install extension Live Server (jika belum ada)
Klik kanan index.html > Open with Live Server
Website akan buka dan data dari Supabase akan dipaparkan!

Tip: Kalau buka terus dari file system (double click HTML), CORS error akan muncul. Sentiasa guna Live Server.

4 CRUD: Create, Read, Update, Delete

CRUD adalah 4 operasi asas database. Bila anda boleh buat CRUD, anda sudah boleh bina app database.

CREATE — Tambah Data Baru

// Tambah todo baru
async function addTodo(task) {
  const { data, error } = await supabase
    .from('todos')
    .insert({ task: task, is_complete: false });

  if (error) console.error('Error:', error);
  else console.log('Todo ditambah:', data);
}

READ — Baca Data

// Ambil semua todos
const { data, error } = await supabase
  .from('todos')
  .select('*');

// Ambil hanya yang belum selesai
const { data, error } = await supabase
  .from('todos')
  .select('*')
  .eq('is_complete', false);

UPDATE — Kemaskini Data

// Tanda todo sebagai selesai
async function toggleTodo(id, isComplete) {
  const { data, error } = await supabase
    .from('todos')
    .update({ is_complete: isComplete })
    .eq('id', id);
}

DELETE — Padam Data

// Padam todo
async function deleteTodo(id) {
  const { data, error } = await supabase
    .from('todos')
    .delete()
    .eq('id', id);
}

Prompt untuk AI

Claude Code

"Generate HTML + JavaScript lengkap untuk Todo App dengan CRUD menggunakan Supabase. Ada form tambah todo, button toggle selesai, dan button delete. Guna CSS yang cantik."

Codex

"Create a complete Todo app HTML file with Supabase. Features: add task, mark complete, delete task. Use supabase-js CDN."

Hasil: Anda sekarang boleh tambah, baca, ubah, dan padam data dalam database dari website anda. Datanya kekal di cloud!

5 Auth: Login & Sign Up

Kenapa Perlu Auth?

Setakat ini, semua orang boleh baca dan tulis data. Dengan auth, kita boleh pastikan setiap pengguna hanya nampak data mereka sendiri. Auth juga membolehkan ciri seperti "simpan preferences pengguna" dan "komen sebagai pengguna tertentu."

5.1: Enable Auth dalam Dashboard

Pergi ke Authentication > Providers dalam dashboard Supabase
Pastikan Email di-enabled (ini default)
Kalau nak guna Google/GitHub login, enable provider tersebut
Optional: pergi ke Authentication > Settings dan tambah redirect URL:
http://localhost:5500, http://127.0.0.1:5500 (untuk Live Server)

5.2: Sign Up Pengguna Baru

// Sign up dengan email & password
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password,
  });

  if (error) console.error('Error:', error);
  else console.log('User created:', data);
}

// Sign in
async function signIn(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password,
  });
}

5.3: Dapatkan User Sebenar

// Dapatkan user semasa
const { data: { user } } = await supabase.auth.getUser();

// Dengar perubahan auth state
supabase.auth.onAuthStateChange((event, session) => {
  console.log('Auth event:', event);
  if (session?.user) {
    console.log('User:', session.user.email);
  }
});

5.4: Logout

await supabase.auth.signOut();

Prompt untuk AI

Claude Code

"Generate HTML untuk login/signup page dengan Supabase auth. Ada form sign up, form sign in, dan button logout. Guna email/password authentication."

Codex

"Create Supabase auth pages with signup, login, and logout. Use email/password. Generate HTML + JS."

6 RLS: Row Level Security

Apa Itu RLS?

RLS adalah peraturan keselamatan peringkat baris. Ianya menentukan siapa boleh baca/tulis data apa. Analogi: macam guard di pintu bilik — hanya orang yang ada kunci (user ID yang betul) boleh masuk.

6.1: Enable RLS

Bila anda buat table, enable Row Level Security. Kalau RLS enabled tanpa policy, semua data akan disekat — ini lebih selamat.

-- Pastikan RLS di-enabled
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

6.2: Policy "Semua Orang Boleh Baca"

-- SQL Editor: policy untuk membaca
CREATE POLICY "Semua boleh baca todos"
ON todos FOR SELECT
USING (true);

6.3: Policy "Hanya Pemilik Boleh Edit Data Sendiri"

-- SQL Editor: policy untuk insert/update/delete
CREATE POLICY "Hanya pemilik boleh tambah"
ON todos FOR INSERT
WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Hanya pemilik boleh edit"
ON todos FOR UPDATE
USING (auth.uid() = user_id);

CREATE POLICY "Hanya pemilik boleh padam"
ON todos FOR DELETE
USING (auth.uid() = user_id);

Ingat: auth.uid() adalah ID pengguna yang sedang login. Kalau pengguna tak login, auth.uid() adalah NULL.

Prompt untuk AI

Claude Code

"Generate RLS policies untuk table todos: public read, only owner can insert/update/delete. Generate SQL."

Codex

"Create SQL RLS policies for Supabase todos table: anyone can read, only owner can manage their own data."

7 Storage: Upload Gambar/Fail

7.1: Setup Storage Bucket

Pergi ke Storage dalam dashboard Supabase
Klik New bucket
Nama bucket: avatars (atau apa-apa nama)
Pilih Public (untuk gambar profile yang semua orang boleh nampak)
Klik Create bucket

7.2: Upload Fail dari Website

// Upload fail
async function uploadFile(file) {
  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(`public/${Date.now()}_${file.name}`, file);

  if (error) console.error('Error:', error);
  else console.log('File uploaded:', data.path);
}

// Upload dari HTML file input
// <input type="file" id="fileInput" accept="image/*">
document.getElementById('fileInput').onchange = async (e) => {
  const file = e.target.files[0];
  await uploadFile(file);
};

7.3: Dapatkan URL Fail

// Dapatkan public URL
function getFileUrl(path) {
  const { data } = supabase.storage
    .from('avatars')
    .getPublicUrl(path);

  return data.publicUrl;
}

// Papar gambar
// <img id="avatar">
const avatarUrl = getFileUrl('public/1712345678_profile.jpg');
document.getElementById('avatar').src = avatarUrl;

Prompt untuk AI

Claude Code

"Generate HTML + JS untuk upload gambar ke Supabase Storage bucket 'avatars'. Ada preview gambar selepas upload."

Codex

"Generate Supabase storage upload code with HTML file input and image preview."

8 Projek Mini: Todo App atau Blog System

Sekarang, anda akan bina satu projek lengkap yang menggabungkan semua yang dipelajari: database + auth + RLS + storage.

Pilih Projek Anda:

Todo App

App senarai tugasan dengan login pengguna. Setiap pengguna nampak tugasan mereka sendiri. Boleh tambah gambar pada tugasan.

Features: Sign up/login, CRUD todos, RLS, upload gambar tugasan

Blog System

Blog ringkas di mana pengguna boleh tulis post dan komen. Hanya pemilik post boleh edit/padam.

Features: Sign up/login, CRUD posts, komen, RLS, upload gambar

Prompt untuk Generate App Lengkap

// Prompt untuk Claude Code / Codex:
"Generate a complete single HTML file for a Todo App with:
  - Supabase connection (use CDN supabase-js)
  - Email/password authentication (signup, login, logout)
  - CRUD operations for todos
  - RLS-ready code (user_id field)
  - File upload for task attachments
  - Clean modern dark theme CSS
  Use these Supabase credentials:
  URL: https://xxxxx.supabase.co
  ANON_KEY: yyyyy"

Cabaran Tambahan: Dah siap? Cuba tambah ciri real-time — guna supabase.channel() supaya todo baru muncul tanpa perlu refresh page. Atau deploy app ke GitHub Pages supaya orang lain boleh guna.

9 Rumusan & Langkah Seterusnya

Tahniah! Anda sekarang sudah boleh:

Setup project Supabase dan dapatkan API keys
Reka table database dengan AI
Sambung website ke database
Buat CRUD — Create, Read, Update, Delete data
Setup authentication (login/signup)
Tulis RLS policies untuk keselamatan data
Upload dan papar fail/storage
Guna AI (Claude Code / Codex) untuk hasilkan kod dengan cepat

Apa Lagi Boleh Dipelajari?

Supabase Realtime — data update secara langsung (macam Google Docs)
Edge Functions — serverless functions dalam Supabase
Supabase + Next.js — bina full-stack app dengan React
Database Migrations — cara professional urus perubahan database
Joins & Relations — sambung table (contoh: users dengan posts)

A Case Studies: Dari Pembelajaran ke Aplikasi Sebenar

Dua kisah berikut menunjukkan bagaimana konsep yang dipelajari dalam fasa ini digunakan dalam projek sebenar. Setiap case study bermula dari projek ringkas dan berkembang menjadi aplikasi production.

Case 1: "Todo App Jadi Production"

Tahap: Pemula → Mahir | Masa: 2-3 jam

Ali, seorang pelajar universiti, bermula dengan Todo App ringkas seperti yang diajar dalam fasa ini. Tetapi dia terus mengembangkannya:

Fasa 1 — Basic CRUD: Todo app dengan database Supabase. Boleh tambah, tanda selesai, padam tugasan. Data kekal di cloud.
Fasa 2 — Auth: Tambah login email/password. Setiap ahli keluarga ada akaun sendiri.
Fasa 3 — RLS: Setiap orang hanya nampak tugasan mereka sendiri. Ibu Ali tak nampak tugasan Ali, dan sebaliknya.
Fasa 4 — Real-time: Guna Supabase Realtime — bila satu orang tambah tugasan, semua ahli keluarga nampak serta-merta tanpa refresh.
Fasa 5 — Deploy: Hosting di Vercel (percuma). Sekarang, mereka guna app ni setiap hari untuk urus tugasan rumah — senarai membeli-belah, jadual basuh kereta, tugasan anak-anak.

Key Takeaway: App yang anda bina dalam fasa ini adalah asas yang sama untuk app production sebenar. Bezanya cuma: lebih banyak ciri, lebih selamat, dan di-deploy. Konsep teras — CRUD, Auth, RLS — tetap sama.

Case 2: "Sistem Tempahan untuk Bisnes Keluarga"

Tahap: Sederhana | Masa: 4-5 jam

Sarah membantu ibu bapanya yang mengusahakan salon rambut. Mereka masih guna buku rekod untuk catat tempahan. Sarah bina sistem tempahan online:

Database: Table bookings — nama pelanggan, tarikh, masa, jenis servis (potong/color/rebond), status (pending/confirmed/completed). Table services — senarai servis dengan harga.
Auth: Dua peranan — admin (pemilik salon) boleh nampak semua tempahan, urus jadual. Customer boleh nampak tempahan sendiri sahaja.
RLS: Policy berbeza untuk admin vs customer. Admin boleh update status tempahan, customer hanya boleh baca dan batalkan tempahan sendiri.
Storage: Upload gambar hasil kerja (gambar rambut sebelum/selepas) ke Supabase Storage. Admin boleh tambah portfolio.
Relasi: bookings.service_id merujuk kepada services.id — foreign key. Bila papar tempahan, join kedua-dua table untuk tunjuk nama servis dan harga.

Inspirasi: Ini bukan projek rekaan. Sistem tempahan sebegini sebenarnya boleh dijadikan bisnis — banyak kedai kecil (salon, servis kereta, tutor) masih guna buku atau WhatsApp untuk urus tempahan. App ringkas dengan database boleh membantu mereka. Cuba fikir: bisnes apa dalam keluarga anda yang boleh dibantu dengan app database?