Nata "Rak Kue" di Dapur Supabase: Bikin Tabel Buat Produk Enak Kita!

Udah berhasil nyambungin aplikasi Next.js kita ke Supabase pake Supabase Client? Keren! "Saluran telepon"-nya udah ada. Sekarang, kita perlu nyiapin "rak-rak" di "gudang" (database PostgreSQL) Supabase kita buat nyimpen data produk kue dan nantinya data pesanan.

Di Supabase, kamu bisa bikin dan ngatur tabel database-mu dengan beberapa cara:

1. Pake Table Editor: Antarmuka visual di dashboard Supabase, gampang banget buat pemula.
2. Pake SQL Editor: Kalau kamu udah familiar sama SQL, kamu bisa nulis perintah CREATE TABLE langsung.
3. (Alternatif/Lanjutan) Pake Prisma Migrate: Kalau kamu mau Prisma yang jadi "single source of truth" buat skema database Supabase-mu (seperti yang akan kita bahas di chapter khusus nanti).

Untuk panduan ini, kita akan fokus pake Table Editor dan sedikit menyinggung SQL Editor di Supabase Dashboard. Ini cara yang paling Supabase-banget buat mulai ngelola database-mu.

Mengingat Lagi Struktur Data yang Kita Butuhkan (untuk Toko Kue)

Sebelum bikin tabel, kita inget lagi yuk "KTP" atau interface yang udah kita rencanain buat data-data di Toko Kue kita:

• Untuk Produk Kue (kue):

  • id: ID unik (mungkin uuid)
  • nama: Nama kue (text)
  • deskripsi_singkat: Deskripsi pendek (text, opsional)
  • deskripsi_lengkap: Deskripsi panjang (text, opsional)
  • harga: Harga kue (integer atau numeric)
  • gambar_url: URL gambar produk (text, opsional)
  • kategori: Kategori kue (text, opsional)
  • rating: Rating produk (real atau numeric, opsional)
  • bahan_utama: Daftar bahan utama (text[] - array of text, opsional)
  • created_at: Tanggal dibuat (timestamptz, otomatis)
  • updated_at: Tanggal diupdate (timestamptz, otomatis)

• Untuk Pesanan (pesanan):

  • id: ID unik pesanan (uuid)
  • user_id: ID pengguna yang pesan (foreign key ke auth.users.id, uuid)
  • nama_pemesan: Nama pemesan (text)
  • email_pemesan: Email pemesan (text)
  • alamat_pengiriman: Alamat kirim (text)
  • telepon_pemesan: Nomor telepon (text, opsional)
  • catatan_pesanan: Catatan tambahan (text, opsional)
  • total_harga: Total harga pesanan (integer atau numeric)
  • status_pesanan: Status pesanan (text, default 'PENDING')
  • created_at: Tanggal pesan (timestamptz, otomatis)

• Untuk Detail Pesanan (detail_pesanan):

  • id: ID unik detail (uuid)
  • pesananId: ID pesanan (foreign key ke pesanan.id, uuid)
  • kue_id: ID kue yang dipesan (foreign key ke kue.id, uuid atau tipe ID Kue-mu)
  • nama_kue: Nama kue saat dipesan (text)
  • jumlah: Jumlah kue yang dipesan (integer)
  • harga_satuan: Harga satuan kue saat itu (integer atau numeric)
  • subtotal: Total harga item ini (integer atau numeric)
  • created_at: Tanggal item ditambah (timestamptz, otomatis)

Kita bakal mulai dengan bikin tabel kue dulu.

Langkah 1: Buka Table Editor

1. Login ke supabase.com dan buka proyek Toko Kue-mu.
2. Di sidebar kiri, klik ikon Table Editor (ikon tabel 📊).

Langkah 2: Membuat Tabel kue dengan Table Editor

1. Klik tombol + New table.

2. Isi Detail Tabel:

   • Name: kue (Supabase akan otomatis membuatnya menjadi public.kue).
   • Description (Opsional): "Tabel untuk menyimpan data produk kue."
   • Enable Row Level Security (RLS):
     • Untuk sekarang, biar gampang pas development dan testing API, kamu bisa tidak mencentangnya dulu. Ini berarti anon key akan bisa baca data dari tabel ini.
     • TAPI INGAT: Di aplikasi produksi, kamu WAJIB mengaktifkan RLS dan membuat policies yang sesuai untuk mengatur siapa saja yang boleh membaca atau menulis data. Misalnya, semua orang boleh baca produk, tapi cuma admin yang boleh nambah/ubah/hapus produk.

3. Menambahkan Kolom untuk Tabel kue: Klik + Add column dan definisikan kolom-kolom berikut. Perhatikan pilihan tipe data PostgreSQL yang disediakan Supabase.

   Name	Type	Default Value	Is Nullable	Is Unique	Is Primary Key	Catatan Tambahan
   id	uuid	gen_random_uuid()	Tidak	Ya	Ya	Primary Key unik global.
   nama	text		Tidak	Tidak	Tidak	Nama produk kue.
   deskripsi_singkat	text		Ya	Tidak	Tidak
   deskripsi_lengkap	text		Ya	Tidak	Tidak
   harga	integer		Tidak	Tidak	Tidak	Harga dalam satuan terkecil (misal, Rupiah).
   gambar_url	text		Ya	Tidak	Tidak	URL ke gambar produk (bisa dari Supabase Storage).
   kategori	text		Ya	Tidak	Tidak	Misal: "Cake", "Roti", "Cookies".
   rating	real		Ya	Tidak	Tidak	Angka desimal untuk rating.
   bahan_utama	text[] (array of text)		Ya	Tidak	Tidak	Fitur array PostgreSQL.
   created_at	timestamp with time zone (timestamptz)	now()	Tidak	Tidak	Tidak	Otomatis terisi.
   updated_at	timestamp with time zone (timestamptz)	now()	Tidak	Tidak	Tidak	(Perlu trigger untuk update otomatis, lihat bawah)

   

4. Klik Save di bagian bawah untuk membuat tabel kue.

Catatan Penting untuk updated_at Otomatis: Supabase/PostgreSQL tidak otomatis mengupdate kolom updated_at setiap kali baris diubah seperti beberapa ORM. Kamu perlu membuat trigger function sederhana di PostgreSQL.

1. Buka SQL Editor.
2. Jalankan skrip berikut (cukup sekali per proyek atau per skema jika ingin dipakai banyak tabel):

   create or replace function handle_updated_at() 
   returns trigger as $$
   begin
     new.updated_at = now();
     return new;
   end;
   $$ language plpgsql;

3. Lalu, untuk setiap tabel yang punya kolom updated_at dan ingin diupdate otomatis, jalankan:

   create trigger on_kue_update
     before update on public.kue -- Ganti 'public.kue' dengan nama tabelmu
     for each row execute procedure handle_updated_at();

   Sekarang, setiap kali ada UPDATE di tabel kue, kolom updated_at akan otomatis terisi waktu saat itu.

Langkah 3: (Latihan) Membuat Tabel pesanan dan detail_pesanan

Dengan cara yang sama (pake Table Editor atau SQL Editor), coba kamu bikin sendiri tabel pesanan dan detail_pesanan berdasarkan struktur data yang udah kita rencanain.

Tabel pesanan (Contoh Kolom Kunci):

• id (uuid, PK, default gen_random_uuid())
• user_id (uuid, Foreign Key ke auth.users.id, bisa nullable jika mau guest checkout)
• nama_pemesan (text, NOT NULL)
• email_pemesan (text, NOT NULL)
• alamat_pengiriman (text, NOT NULL)
• total_harga (integer, NOT NULL)
• status_pesanan (text, default 'PENDING', NOT NULL)
• created_at (timestamptz, default now(), NOT NULL)
• updated_at (timestamptz, default now(), NOT NULL, pasang trigger juga)

Tabel detail_pesanan (Contoh Kolom Kunci):

• id (uuid, PK, default gen_random_uuid())
• pesanan_id (uuid, Foreign Key ke pesanan.id, NOT NULL)
• kue_id (uuid, Foreign Key ke kue.id, NOT NULL) - Pastikan tipe datanya sama dengan kue.id!
• nama_kue (text, NOT NULL)
• jumlah (integer, NOT NULL)
• harga_satuan (integer, NOT NULL)
• subtotal (integer, NOT NULL)
• created_at (timestamptz, default now(), NOT NULL)

Mendefinisikan Foreign Key (Relasi) di Table Editor: Pas kamu nambahin kolom user_id di tabel pesanan, kamu bisa klik ikon rantai (atau bagian "Foreign Key Relation") buat ngeset relasinya ke tabel auth.users kolom id. Begitu juga buat pesanan_id dan kue_id di detail_pesanan. Ini penting buat integritas data.

(Catatan: Placeholder gambar).

Langkah 4: Memasukkan Beberapa Data Dummy Awal

Biar nanti pas kita fetch data dari Next.js ada yang bisa ditampilin, masukin dulu beberapa data contoh ke tabel kue (dan mungkin kategori kalau kamu bikin tabel terpisah).

• Gunakan tombol + Insert row di Table Editor.
• Isi data minimal 2-3 produk kue. Untuk gambar_url, kamu bisa pake URL placeholder dulu (misal dari https://picsum.photos/400/300?random=[nomor]) atau kalau udah punya gambar, upload ke Supabase Storage (materi berikutnya) dan pake URL dari situ.

Contoh Data untuk kue:

Sip! "Rak-rak" dan "daftar menu" di "dapur" Supabase kita udah siap! Kita udah punya tabel kue (dan idealnya pesanan serta detail_pesanan) dengan struktur yang jelas dan bahkan mungkin udah diisi beberapa data awal.

Ini adalah fondasi database yang bakal dipake sama aplikasi Toko Kue kita. Kalau kamu lebih milih ngelola skema pake Prisma, kamu bisa npx prisma db pull sekarang buat ngupdate schema.prisma-mu biar cocok sama tabel-tabel yang baru aja kita bikin di Supabase ini (ini akan kita bahas lebih detail di chapter khusus Prisma + Supabase).

Di bagian selanjutnya, kita bakal fokus ngambil dan nampilin data produk kue ini di halaman Next.js kita pake Supabase JS Client!