Back to blog
Backend

Mendesain Database Tabel Notifikasi: Trik Menyimpan Teks Dinamis

Membuat tabel 'notifications' di SQL itu gampang. Tapi bagaimana jika struktur teks notifikasinya sangat dinamis: 'Budi dan 5 orang lainnya menyukai foto liburanmu'?

super admin·10 Juli 2026·2 min read
Mendesain Database Tabel Notifikasi: Trik Menyimpan Teks Dinamis
Article Content

Jangan Simpan Teks Mentah (Hardcode Text)!

Tugas pertama membuat fitur Notifikasi adalah membuat tabel notifications di MySQL/PostgreSQL. Pemula biasanya mendesain tabelnya dengan 4 kolom sederhana: id, user_id (penerima), is_read (status dibaca), dan kolom message yang berisi teks murni: "Budi baru saja mengomentari artikel Anda".

Mengapa cara ini fatal?
Apa yang terjadi jika bulan depan perusahaanmu mengganti bahasa aplikasi menjadi Bahasa Inggris? Atau apa yang terjadi jika Budi (si pemberi komentar) mengganti nama akunnya menjadi "Joko"? Tabel notifikasimu akan tetap berisi teks mati berbahasa Indonesia dengan nama "Budi". Ini adalah desain arsitektur yang sangat buruk!

Arsitektur Actor-Action-Entity (Standar Industri)

Teks notifikasi tidak boleh disimpan secara statis. Yang harus disimpan adalah Metadata (Data Mentahnya). Biarkan *Frontend* yang merangkainya menjadi teks bahasa manusia yang hidup.

Struktur Tabel yang Benar:

Table: notifications
-
 id: UUID (Primary Key)
 recipient_id: INT (Siapa yang menerima notif ini?)
 actor_id: INT (Siapa pelakunya? Misal ID Budi)
 type: VARCHAR (Kategorinya apa? Misal: 'COMMENT_CREATED', 'ORDER_SHIPPED')
 entity_id: INT (Terkait ID objek apa? Misal: ID Artikel 99)
 data: JSON (Data ekstra, misal: { "comment_text": "Halo!" })
 is_read: BOOLEAN (Default: False)
 created_at: TIMESTAMP

Bagaimana Frontend Mengolahnya?

Saat *Backend* mengirimkan API GET /notifications, *Backend* juga akan melakukan JOIN kecil untuk mengambil Nama Pelaku (Actor).

Payload JSON yang sampai ke React (Frontend) akan terlihat seperti ini:

{
  "type": "COMMENT_CREATED",
  "actor_name": "Joko", // Nama sudah terbaru dari Database
  "is_read": false
}

Di dalam kode React (Frontend), kamu tinggal membuat Fungsi Switch (Pencabang) terjemahan:

function renderNotifText(notif) {
  switch(notif.type) {
    case 'COMMENT_CREATED':
      // Bisa dengan mudah diterjemahkan ke fitur Multi-bahasa (i18n)
      return <b>{notif.actor_name}</b> mengomentari artikelmu.;
    case 'ORDER_SHIPPED':
      return Pesananmu sedang dalam perjalanan!;
  }
}

Dengan desain modular ini, *database*-mu bersih dari beban penerjemahan teks (Internationalization/i18n), dan aplikasimu siap berskala global!

Mau langsung pakai template?

Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.

Browse Templates