Pendahuluan: Mengapa Artikel Ini Penting Dibaca

Vibe coding—praktik menggunakan AI untuk menghasilkan kode tanpa pemahaman mendalam—telah menjadi tren signifikan di kalangan developer dan entrepreneur. Namun, realitas di lapangan menunjukkan bahwa mayoritas proyek yang dihasilkan melalui metode ini tidak pernah mencapai tahap produksi. Bahkan jika berhasil dirilis, banyak yang gagal mendapatkan adopsi pasar. Artikel ini menguraikan mengapa fenomena ini terjadi dan berapa biaya sebenarnya yang harus dibayar oleh para praktisinya.

Poin Utama: Vibe Coding Bukan Solusi, Melainkan Hobi Mahal

Kesalahpahaman terbesar seputar vibe coding adalah persepsi bahwa AI telah mengeliminasi semua hambatan untuk membangun sebuah produk. Kenyataannya, AI hanya menghilangkan hambatan teknis—bukan hambatan pasar.

Meskipun seseorang kini bisa menghasilkan kode dengan jauh lebih cepat, mereka rata-rata menghabiskan $1.200 hingga $4.000 per tahun untuk menghasilkan produk yang berakhir dengan tiga nasib tragis:

• Mangkrak di tengah jalan (terjebak di tahap pengembangan).

• Tidak pernah dirilis sama sekali.

• Dirilis, tetapi tidak ada permintaan pasar.

Ini bukan masalah ketidakmampuan teknis. Ini tentang jebakan psikologis yang menganggap kesibukan (motion) sebagai sebuah kemajuan (progress).

Bagian 1: Dua Nasib yang Menunggu Produk Hasil Vibe-Coding

Nasib Pertama: Ditinggalkan di Tengah Jalan

Mayoritas proyek vibe-coded tidak pernah selesai. Pola umum yang sering teramati adalah:

• Fase Awal: Antusiasme tinggi, produksi kode berjalan sangat cepat.

• Fase Tengah: Momentum mulai menurun setelah mencapai target (milestone) tertentu dan mulai menemui eror yang rumit.

• Fase Akhir: Proyek ditinggalkan begitu saja demi mengejar ide baru yang terasa lebih "segar".

Fenomena ini menciptakan apa yang disebut “vibe cemetery”—kumpulan proyek yang hampir selesai tetapi tidak pernah diluncurkan. Dampaknya bukan hanya pemborosan finansial, melainkan juga memicu siklus kegagalan berulang yang mengikis kesehatan mental pelakunya.

Nasib Kedua: Peluncuran Tanpa Pengguna

Skenario alternatifnya—di mana produk benar-benar dirilis—justru bisa terasa lebih menyakitkan. Setelah menginvestasikan waktu dan sumber daya yang besar, sang pencipta produk harus menghadapi kenyataan bahwa:

• Pasar tidak membutuhkan solusi yang mereka tawarkan.

• Kompetitor yang sudah mapan telah mendominasi ceruk (niche) tersebut.

• Pengguna dapat merasakan pendekatan instan (low-effort approach) dalam desain dan fungsionalitas produk.

Tren terbaru menunjukkan bahwa pengguna mulai mengalami “vibe fatigue”—kelelahan menghadapi banjiran produk baru yang terasa seperti cetakan template AI, alih-alih sebuah solusi yang dipikirkan matang-matang.

Bagian 2: Analisis Biaya Tersembunyi yang Jarang Diperhitungkan

Biaya Finansial

Seorang praktisi vibe coding yang serius biasanya mengalokasikan anggaran yang tidak sedikit:

• Kelas Pemula: ~$100/bulan untuk langganan berbagai alat AI (sekitar $1.200 setahun).

• Kelas Menengah: Langganan beberapa lisensi sekaligus yang bisa mencapai $2.400 setahun.

• Kelas Ekstrem: Menggunakan agentic loops terparalel dengan pengeluaran token mencapai $2.000–$4.000 per bulan.

Itu perkiraan untuk wilayah Eropa dan Amerika yang menggunakan mata uang dolar. Sementara wilayah lain yang tidak menggunakan mata uang dolar menurut saya menghabiskan lebih sedikit.

Sering kali pengeluaran ini menghasilkan nol konversi yang berhasil dikomersialkan.

Biaya Waktu dan Kesehatan Mental

Vibe coding memiliki karakteristik yang adiktif. Sensasi produktivitas semu (false productivity) yang dihasilkan—melihat baris kode terbangkitkan secara otomatis dengan cepat—memberikan letupan dopamin yang mirip seperti bermain video game, bukan seperti bekerja nyata. Konsekuensinya:

• Waktu berharga teralihkan dari interaksi sosial, aktivitas fisik, dan relaksasi.

• Siklus proyek mangkrak yang berulang menciptakan beban psikologis negatif.

• Munculnya rasa pencapaian semu (false sense of accomplishment) yang tidak pernah diterjemahkan menjadi keberhasilan nyata.

Biaya Peluang (Opportunity Cost)

Sumber daya yang dihabiskan untuk proyek vibe-coded—baik waktu, fokus, maupun uang—seharusnya bisa dialokasikan untuk aktivitas lain yang jauh lebih produktif, bernilai, atau menghasilkan keuntungan nyata.

Bagian 3: Mengapa Pasar Menolak Produk Vibe-Coded?

Kejenuhan Pasar dan Hilangnya Keunikan

Premis fundamental vibe coding adalah bahwa AI menghilangkan hambatan untuk membangun (building). Namun, premis ini mengabaikan hukum ekonomi dasar: jika semua orang bisa membuat suatu produk dengan mudah, maka produk tersebut tidak lagi memiliki keunikan.

Ketika perusahaan AI mendorong adopsi massal, dampaknya adalah:

• Ribuan produk serupa muncul secara bersamaan dengan tawaran nilai (value proposition) yang identik.

• Pengguna akhir mengalami kelumpuhan pilihan (choice paralysis), yang membuat mereka cenderung tetap memilih produk lama yang sudah tepercaya.

• Startup dengan modal besar dan tim berpengalaman tetap mendominasi setiap kategori.

Pentingnya Momentum dan Konteks Pasar

Kesuksesan produk digital sering kali tidak terletak pada kecanggihan teknis atau keaslian ide, melainkan pada momentum (timing) masuk ke pasar.

Sebagai gambaran, seorang pengembang aplikasi untuk iOS bisa dengan mudah mendatangkan ratusan ribu unduhan, dulu ketika pasar masih baru dan sepi. Namun, mencoba hal yang sama hari ini akan menghasilkan angka yang mendekati nol karena saturasi pasar yang luar biasa padat. Secepat apa pun AI menghasilkan kode Anda, teknologi tersebut tidak bisa mempercepat kesiapan pasar (market readiness).

Bagian 4: Satu-Satunya Model yang Viable: Bangun untuk Diri Sendiri

Kriteria Produk yang Layak Dipertahankan

Analisis mendalam terhadap produk-produk independen yang bertahan lama menunjukkan satu pola universal: produk yang terus berkembang adalah produk yang menyelesaikan masalah nyata dari si pembuatnya sendiri.

Tanda bahwa proyek Anda layak dilanjutkan:

• Kebutuhan Nyata: Anda menggunakan produk tersebut setiap hari untuk produktivitas pribadi.

• Didorong Gairah (Passion-Driven): Anda rela melakukan pemeliharaan (maintenance) dan perbaikan bug tanpa kompensasi finansial instan.

• Pengembangan Iteratif: Pembaruan fitur didorong oleh pengalaman penggunaan personal, bukan sekadar menebak-nebak keinginan pasar.

Jebakan Pola Pikir Optimalisasi

Banyak orang terjebak dalam logika bahwa peningkatan efisiensi kecil (misalnya membuat alur kerja 15% lebih cepat) adalah alasan kuat untuk terus mengembangkan sebuah produk komersial.

Kenyataannya, antusiasme awal akan selalu menurun seiring berjalannya waktu, sementara tingkat kesulitan teknis yang muncul belakangan justru semakin meningkat. Produk yang hanya menawarkan nilai tambah kecil (incremental value) lambat laun akan ditinggalkan oleh pembuatnya sendiri karena kelelahan emosional.

Bagian 5: Konteks Industri dan Langkah ke Depan

Komoditisasi AI dan Dampak Jangka Panjang

Model AI saat ini bukan lagi benteng pertahanan bisnis (competitive moat). Kehadiran model-model sumber terbuka (open-source) yang semakin kuat dan efisien dari berbagai negara membuat kemampuan dasar menghasilkan kode menjadi komoditas murah.

Bagi para vibe coders, ini berarti:

• Kualitas keluaran (output) dari model gratisan/lokal akan segera menyamai model komersial terkemuka dalam waktu dekat.

• Saturasi pasar akan semakin parah, memperburuk masalah diferensiasi produk yang dialami oleh produk vibe-coded.

Jalan Keluar yang Berkelanjutan (Sustainable Path Forward)

Bagi Anda yang tetap ingin berkreasi menggunakan bantuan AI, ubah strateginya:

1. Turunkan Ekspektasi: Fokuslah membangun alat (tools) yang nyata-nyata Anda gunakan sendiri, bukan alat yang "Anda pikir" akan dibeli orang lain.

2. Terima Realitas Pasar: Probabilitas membangun perusahaan bernilai miliaran dolar secara instan lewat vibe coding sangatlah kecil. Alihkan fokus pada utilitas personal yang konkret.

3. Diversifikasi Penggunaan AI: Gunakan AI untuk pemecahan masalah yang memiliki dampak nyata pada efisiensi kerja harian Anda, alih-alih terus-menerus memproduksi aplikasi konsumen (consumer apps) baru yang generik.

Kesimpulan: Mengevaluasi Ulang Nilai Vibe Coding

Vibe coding tidak gagal karena teknologi AI-nya buruk. Sebaliknya, fenomena ini gagal karena memberikan ilusi bahwa menyingkirkan hambatan teknis sama dengan menyingkirkan hambatan pasar.

Kenyataan pahit yang harus diterima:

• Hambatan pasar jauh lebih besar dan kejam daripada hambatan menulis kode.

• Sibuk menghasilkan baris kode (motion) tidak sama dengan membuat kemajuan produk (progress).

• Tingkat penyelesaian (completion rate) hingga produk sukses dari metode vibe-coding murni mendekati nol persen.

Sebelum Anda memulai proyek koding berbasis AI berikutnya, jawablah pertanyaan ini dengan jujur:

"Apakah saya membangun ini karena saya benar-benar membutuhkannya, atau saya hanya ingin merasa menjadi seorang entrepreneur yang terlihat produktif di media sosial?"

Jika jawabannya adalah yang kedua, artikel ini adalah pengingat untuk menata ulang prioritas Anda. Namun, jika jawabannya adalah yang pertama, silakan lanjutkan—tetapi dengan ekspektasi yang realistis dan fokus pada kebermanfaatan bagi diri sendiri.

Apakah Anda sedang terjebak atau justru berkembang dalam tren vibe coding ini? Mari refleksikan strategi Anda. Bagikan pengalaman, insights, atau sudut pandang Anda di kolom komentar!

Saya juga menulis di Blog tentang topik ini.

Prasyarat

• Akun Google & blog Blogger yang sudah dibuat

• Akses ke Tema → Edit HTML di dashboard Blogger

• Browser (disarankan Chrome/Firefox)

• Semangat belajar

Cara Mengganti Template di Blogger

1. Login ke blogger.com

2. Pilih blog Anda → klik Tema di menu kiri

3. Klik tombol Edit HTML (ikon pensil)

4. Hapus semua kode yang ada

5. Tempel kode baru dari tutorial ini

6. Klik Simpan tema

7. Buka blog Anda di tab baru untuk melihat hasilnya

💡 Tips: Buka blog Anda di tab terpisah, lalu setiap selesai menyimpan, refresh tab tersebut untuk melihat perubahannya langsung.

Tahap 1 — Kerangka Dasar (Hanya Tulang)

Kita mulai dari kerangka paling sederhana: hanya struktur HTML tanpa konten apapun. Ini untuk memastikan template terbaca oleh Blogger tanpa error.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>
    <p>Blog saya sedang dibangun...</p>
  </div>
</body>

</html>

Apa yang terjadi?

Simpan dan refresh blog Anda. Anda akan melihat halaman putih dengan tulisan "Blog saya sedang dibangun..."

Ini artinya:

• Blogger menerima template Anda

• Judul tab browser sudah menggunakan nama blog Anda (lihat <data:view.title.escape/>)

• CSS dasar sudah aktif

Penjelasan Kode Penting

Tahap 2 — Menambahkan Header

Sekarang kita tambahkan header — bagian paling atas blog yang biasanya berisi nama blog dan deskripsi.

Ganti seluruh kode dengan yang berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

  </div>
</body>

</html>

Cara Menambahkan Widget Header

Setelah menyimpan dan refresh blog, Anda akan melihat area gelap di atas (header). Tapi masih kosong! Sekarang:

1. Kembali ke dashboard Blogger → Tata Letak

2. Anda akan melihat kotak bertuliskan "header-section"

3. Klik tombol Tambah Widget di kotak header

4. Pilih widget Header → Simpan

5. Refresh blog Anda

Hasilnya: Nama blog dan deskripsi muncul di header dengan latar belakang gelap.

Penjelasan <b:section>

<b:section id='header-section' maxwidgets='1' showaddelement='yes'/>

Tahap 3 — Menambahkan Footer

Footer adalah bagian paling bawah blog. Mari kita tambahkan sekarang.

Ganti seluruh kode dengan:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      margin-top: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <!-- Area tengah (isi & sidebar) akan ditambahkan nanti -->
    <div style='background:#fff; padding:20px; border-radius:6px; min-height:200px; margin-bottom:20px;'>
      <p style='color:#999; text-align:center;'>[ Area Postingan &amp; Sidebar — segera hadir ]</p>
    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Menambahkan Widget Footer

1. Kembali ke Tata Letak

2. Di area footer-section, klik Tambah Widget

3. Pilih Teks → ketik "© 2025 Blog Saya. Hak cipta dilindungi." → Simpan

4. Refresh blog

Hasilnya: Sekarang blog Anda sudah punya header di atas, area kosong di tengah (placeholder), dan footer di bawah.

Tahap 4 — Menambahkan Sidebar

Sekarang kita bentuk layout dua kolom: konten utama di kiri dan sidebar di kanan.

Ganti seluruh kode dengan:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === LAYOUT TENGAH === */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (min-width: 768px) {
      .main-container {
        flex-direction: row;
      }
    }

    /* === AREA KONTEN UTAMA === */
    main {
      flex: 3;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      min-height: 300px;
    }

    /* === SIDEBAR === */
    aside {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }
    aside h2, aside h3 {
      font-size: 1em;
      border-bottom: 2px solid #2c3e50;
      padding-bottom: 6px;
      margin-top: 0;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <div class='main-container'>

      <main id='main-content' role='main'>
        <!-- Postingan akan ditambahkan di tahap berikutnya -->
        <p style='color:#999; text-align:center;'>[ Area Postingan — segera hadir ]</p>
      </main>

      <aside id='sidebar' role='complementary'>
        <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
      </aside>

    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Mengisi Sidebar

1. Buka Tata Letak di dashboard

2. Di kotak sidebar-section, klik Tambah Widget

3. Coba tambahkan:

   • Arsip Blog — menampilkan arsip postingan per bulan

   • Label — menampilkan semua label/kategori

   • Tentang Saya — profil singkat Anda

4. Simpan dan refresh blog

Hasilnya: Blog Anda sekarang punya dua kolom — kiri untuk konten, kanan untuk sidebar. Di layar HP (< 768px), keduanya akan tampil berurutan ke bawah secara otomatis berkat CSS flexbox + @media.

Memahami Flexbox yang Digunakan

.main-container {
  display: flex;        /* aktifkan flexbox */
  flex-direction: column; /* default: kolom (untuk HP) */
  gap: 20px;
}
@media (min-width: 768px) {
  .main-container {
    flex-direction: row; /* di layar lebar: jadi baris (kolom-kolom berdampingan) */
  }
}

main  { flex: 3; } /* ambil 3 bagian dari ruang tersedia */
aside { flex: 1; } /* ambil 1 bagian dari ruang tersedia */

Artinya: main mendapat 75% lebar, sidebar mendapat 25% lebar.

Tahap 5 — Menambahkan Area Postingan (Blog1)

Ini tahap terakhir dan paling penting. Kita akan mengganti placeholder dengan <b:widget id='Blog1'> yang menampilkan postingan sungguhan.

⚠️ Perhatian: Widget Blog1 memang menghasilkan kode yang panjang. Tapi di tahap ini Anda sudah paham strukturnya, jadi tidak perlu khawatir.

Ganti seluruh kode dengan versi final berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === LAYOUT TENGAH === */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (min-width: 768px) {
      .main-container {
        flex-direction: row;
      }
    }

    /* === AREA KONTEN UTAMA === */
    main {
      flex: 3;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }

    /* === POSTINGAN === */
    .post {
      margin-bottom: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid #eee;
    }
    .post:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    .post-title {
      font-size: 1.5em;
      margin: 0 0 8px 0;
    }
    .post-title a {
      color: #2c3e50;
      text-decoration: none;
    }
    .post-title a:hover {
      color: #e74c3c;
    }
    .post-meta {
      font-size: 0.85em;
      color: #888;
      margin-bottom: 14px;
    }
    .post-body {
      line-height: 1.7;
    }
    .post-labels {
      margin-top: 12px;
      font-size: 0.85em;
    }
    .post-labels a {
      background: #eaf2ff;
      color: #2980b9;
      padding: 2px 8px;
      border-radius: 12px;
      text-decoration: none;
      margin-right: 4px;
    }

    /* === NAVIGASI HALAMAN === */
    .blog-pager {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 0.9em;
    }
    .blog-pager a {
      background: #2c3e50;
      color: #fff;
      padding: 8px 16px;
      border-radius: 4px;
      text-decoration: none;
    }
    .blog-pager a:hover {
      background: #e74c3c;
    }

    /* === SIDEBAR === */
    aside {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }
    aside h2, aside h3 {
      font-size: 1em;
      border-bottom: 2px solid #2c3e50;
      padding-bottom: 6px;
      margin-top: 0;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <div class='main-container'>

      <main id='main-content' role='main'>
        <b:section class='main-section' id='main-section' showaddelement='yes'>

          <b:widget id='Blog1' locked='false' title='Postingan Blog' type='Blog' version='2'>
            <b:widget-settings>
              <b:widget-setting name='showDateHeader'>false</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='top'>

              <!-- Loop semua postingan -->
              <b:loop values='data:posts' var='post'>
                <article class='post' expr:id='"post-" + data:post.id'>

                  <!-- Judul postingan -->
                  <h2 class='post-title'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  </h2>

                  <!-- Meta: tanggal & penulis -->
                  <div class='post-meta'>
                    <data:post.dateHeader/> &#8226; oleh <data:post.author/>
                  </div>

                  <!-- Isi postingan -->
                  <div class='post-body'>
                    <b:if cond='data:view.isPost'>
                      <!-- Di halaman postingan tunggal: tampilkan semua isi -->
                      <data:post.body/>
                    <b:else/>
                      <!-- Di halaman beranda: tampilkan ringkasan / snippet -->
                      <data:post.snippets/>
                      <a expr:href='data:post.url'>Baca selengkapnya &#8594;</a>
                    </b:if>
                  </div>

                  <!-- Label / kategori -->
                  <b:if cond='data:post.labels'>
                    <div class='post-labels'>
                      Label:
                      <b:loop values='data:post.labels' var='label'>
                        <a expr:href='data:label.url'><data:label.name/></a>
                      </b:loop>
                    </div>
                  </b:if>

                </article>
              </b:loop>

              <!-- Navigasi halaman (Lebih Baru / Lebih Lama) -->
              <div class='blog-pager'>
                <b:if cond='data:newerPageUrl'>
                  <a expr:href='data:newerPageUrl'>&#8592; Postingan lebih baru</a>
                </b:if>
                <b:if cond='data:olderPageUrl'>
                  <a expr:href='data:olderPageUrl'>Postingan lebih lama &#8594;</a>
                </b:if>
              </div>

            </b:includable>
          </b:widget>

        </b:section>
      </main>

      <aside id='sidebar' role='complementary'>
        <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
      </aside>

    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Kerja Widget Blog1

Widget ini berisi tag-tag Blogger untuk menampilkan data dari database blog Anda:

Ringkasan

Langkah Selanjutnya

Setelah template berjalan, Anda bisa mengembangkannya lebih lanjut:

• Ubah warna — ganti nilai #2c3e50 dan #e74c3c dengan warna pilihan Anda

• Ganti font — tambahkan Google Fonts di dalam <head>

• Sempurnakan responsif — uji di berbagai ukuran layar

• Tambah SEO — tambahkan meta description dan Open Graph tags

• Dark mode — tambahkan CSS @media (prefers-color-scheme: dark)

• Komentar — tambahkan widget komentar di bawah <data:post.body/>

Tutorial ini dibuat untuk pemula yang ingin memahami template Blogger dari dalam. Selamat bereksperimen!

Panduan lengkap membangun tampilan cover forum dengan layout 2 kolom (gambar + info di kiri, daftar thread terbaru di kanan) — mirip gaya Invision Community / IPS, tapi natif di XenForo. Tanpa beli style komersial.

Estimasi waktu: 30–45 menit Tingkat: Menengah (perlu nyaman edit file PHP via FTP dan template XenForo)

Konsep tampilan akhir: cover di kiri, daftar thread terbaru di kanan, border atas warna berbeda per kategori.

Lihat demo: https://forum.intutekno.com/

1. Yang Akan Dibuat

Setiap forum di halaman utama akan menampilkan:

Kolom kiri (30% lebar):

• Cover image 3:2 (SVG/WebP/JPG)

• Judul forum (link ke forum)

• Deskripsi forum

• Statistik (jumlah threads & messages)

Kolom kanan (70% lebar):

• 5 thread terbaru dengan avatar, judul, username, tanggal, jumlah replies

• Atau ikon + pesan "Belum ada thread" kalau forum masih kosong

Bonus: Border-top tiap card forum bisa diwarnai berbeda berdasarkan kategori induk-nya.

2. Prasyarat

• XenForo 2.3.x (panduan ini diuji di 2.3.10)

• Akses AdminCP

• Akses FTP/File Manager ke server (untuk upload PHP files)

• Akses cPanel atau setara untuk backup database (opsional tapi disarankan)

• Pemahaman dasar HTML/CSS akan membantu

3. Backup Dulu

Sebelum apa pun, lakukan dua backup:

Backup database:

• cPanel → phpMyAdmin → pilih database forum → Export → Quick → Go

Backup file:

• File Manager cPanel → kompres folder forum jadi .zip → download

Kalau ada yang salah saat ngoprek, kita bisa balik ke kondisi awal.

4. Aktifkan Development Mode

Buka /src/config.php lewat File Manager atau FTP. Tambahkan dua baris ini di paling bawah:

$config['development']['enabled'] = true;
$config['development']['defaultAddOn'] = 'Intutekno/CoverForum';

Ganti Intutekno/CoverForum sesuai nama yang Anda inginkan (format: VendorName/AddOnName). Setelah save, refresh AdminCP — menu Development dan Add-ons akan muncul di sidebar.

5. Bikin Add-on PHP

Add-on ini bertugas menjalankan satu fungsi: mengambil 5 thread terbaru dari sebuah forum dan menyediakannya untuk dipakai di template.

5.1. Buat folder add-on

Via FTP, buat struktur folder:

/src/addons/Intutekno/CoverForum/

5.2. Buat file addon.json

Isi:

{
    "title": "Intutekno Cover Forum",
    "version_string": "1.0.0",
    "version_id": 1000070,
    "dev": "Intutekno",
    "supported": true
}

5.3. Buat file Listener.php

<?php
namespace Intutekno\CoverForum;

class Listener
{
    public static function templaterSetup(\XF\Container $container, \XF\Template\Templater &$templater)
    {
        $templater->addFunction('latest_forum_threads',
            ['Intutekno\CoverForum\TemplateHelper', 'templaterFunction']
        );
    }
}

5.4. Buat file TemplateHelper.php

<?php
namespace Intutekno\CoverForum;

class TemplateHelper
{
    public static function templaterFunction($templater, &$escape, $nodeId, $limit = 5)
    {
        $escape = false;
        return self::getLatestThreads($nodeId, $limit);
    }

    public static function getLatestThreads($nodeId, $limit = 5)
    {
        $finder = \XF::finder('XF:Thread')
            ->where('node_id', $nodeId)
            ->where('discussion_state', 'visible')
            ->where('discussion_type', '<>', 'redirect')
            ->with('User')
            ->with('Prefix')
            ->order('last_post_date', 'DESC')
            ->limit($limit);

        return $finder->fetch();
    }
}

Struktur akhir folder:

/src/addons/Intutekno/CoverForum/
├── addon.json
├── Listener.php
└── TemplateHelper.php

6. Install Add-on

Di AdminCP:

1. Klik menu Add-ons di sidebar

2. Cari "Intutekno Cover Forum" di list

3. Klik tombol Install di sampingnya

4. Confirm

Status add-on harus jadi Active (toggle hijau).

7. Register Code Event Listener

Ini langkah yang menghubungkan add-on PHP kita ke template engine XenForo.

1. AdminCP → Development → Code event listeners

2. Klik + Add code event listener di pojok kanan atas

3. Isi form:

4. Klik Save

8. Edit Template node_list_forum

AdminCP → Appearance → Templates → cari template node_list_forum → Edit.

Ganti seluruh isi template dengan kode berikut:

<xf:macro id="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<div class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:macro id="forum"
					arg-node="{$node}"
					arg-extras="{$extras}"
					arg-children="{$children}"
					arg-childExtras="{$childExtras}"
					arg-depth="{$depth}" />
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro id="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<xf:macro id="forum"
		arg-node="{$node}"
		arg-extras="{$extras}"
		arg-children="{$children}"
		arg-childExtras="{$childExtras}"
		arg-depth="{$depth}" />
</xf:macro>

<xf:macro id="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<li>
		<a href="{{ link('forums', $node) }}" class="subNodeLink subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">
			<xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" class="subNodeLink-icon" />{$node.title}
		</a>
		<xf:macro id="forum_list::sub_node_list"
			arg-children="{$children}"
			arg-childExtras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</li>
</xf:macro>

<xf:macro id="forum"
	arg-node="!"
	arg-extras="!"
	arg-children="!"
	arg-childExtras="!"
	arg-depth="!"
	arg-chooseName=""
	arg-bonusInfo="">

	<xf:if is="$depth == 1 OR $depth == 2">

		<!-- ===== COVER STYLE (forum utama) ===== -->
		<div class="node node--id{$node.node_id} node--depth{$depth} node--forum intuteknoCover intuteknoCover--cat{$node.parent_node_id} {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
			<div class="intuteknoCover-body">

				<div class="intuteknoCover-side">
					<a href="{{ link('forums', $node) }}" class="intuteknoCover-img">
						<img src="/data/forum_covers/{$node.node_id}.svg"
							 onerror="this.src='/data/forum_covers/default.svg'"
							 alt="{$node.title}" loading="lazy" />
					</a>
					<h3 class="intuteknoCover-title">
						<a href="{{ link('forums', $node) }}">{$node.title}</a>
					</h3>
					<xf:if is="$node.description">
						<div class="intuteknoCover-desc">{$node.description|raw}</div>
					</xf:if>
					<div class="intuteknoCover-stats">
						<span><b>{{ phrase('threads') }}:</b> {$extras.discussion_count|number_short(1)}</span>
						<span><b>{{ phrase('messages') }}:</b> {$extras.message_count|number_short(1)}</span>
					</div>
				</div>

				<div class="intuteknoCover-threads">
					<xf:set var="$latest" value="{{ latest_forum_threads($node.node_id, 5) }}" />
					<xf:if is="$latest is not empty">
						<ul class="intuteknoThread-list">
							<xf:foreach loop="$latest" value="$thread">
								<li class="intuteknoThread-item">
									<xf:avatar user="{$thread.User}" size="xxs" defaultname="{$thread.username}" class="intuteknoThread-avatar" />
									<div class="intuteknoThread-main">
										<div class="intuteknoThread-title">
											<xf:if is="$thread.prefix_id">{{ prefix('thread', $thread) }}</xf:if>
											<a href="{{ link('threads', $thread) }}">{$thread.title}</a>
										</div>
										<div class="intuteknoThread-meta">
											<a href="{{ link('members', $thread.User) }}" class="username">{$thread.username}</a>
											<span>·</span>
											<xf:date time="{$thread.last_post_date}" />
											<span>·</span>
											<span><xf:fa icon="fa-comment-alt" /> {$thread.reply_count|number_short(1)}</span>
										</div>
									</div>
								</li>
							</xf:foreach>
						</ul>
					<xf:else />
						<div class="intuteknoThread-empty">
							<xf:fa icon="fa-comments" />
							<span>Belum ada thread di forum ini</span>
						</div>
					</xf:if>
				</div>

			</div>
		</div>

	<xf:else />

		<!-- ===== ORIGINAL STYLE (sub-forum, depth >= 3) ===== -->
		<div class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
			<div class="node-body">
				<span class="node-icon" aria-hidden="true">
					<xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" />
				</span>
				<div class="node-main js-nodeMain">
					<xf:if is="$chooseName">
						<xf:checkbox standalone="true">
							<xf:option labelclass="u-pullRight" class="js-chooseItem" name="{$chooseName}[]" value="{$node.node_id}" />
						</xf:checkbox>
					</xf:if>

					<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
					<h3 class="node-title">
						<a href="{{ link('forums', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
					</h3>
					<xf:if is="$descriptionDisplay != 'none' && $node.description">
						<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
					</xf:if>

					<div class="node-meta">
						<xf:if is="!{$extras.privateInfo}">
							<div class="node-statsMeta">
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('threads') }}</dt>
									<dd>{$extras.discussion_count|number_short(1)}</dd>
								</dl>
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('messages') }}</dt>
									<dd>{$extras.message_count|number_short(1)}</dd>
								</dl>
							</div>
						</xf:if>

						<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
							<xf:macro id="forum_list::sub_nodes_menu"
								arg-children="{$children}"
								arg-childExtras="{$childExtras}"
								arg-depth="{{ $depth + 1 }}" />
						</xf:if>
					</div>

					<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
						<xf:macro id="forum_list::sub_nodes_flat"
							arg-children="{$children}"
							arg-childExtras="{$childExtras}"
							arg-depth="{{ $depth + 1 }}" />
					</xf:if>

					<xf:if is="$bonusInfo is not empty">
						<div class="node-bonus">{$bonusInfo}</div>
					</xf:if>
				</div>

				<xf:if is="!{$extras.privateInfo}">
					<div class="node-stats">
						<dl class="pairs pairs--rows">
							<dt>{{ phrase('threads') }}</dt>
							<dd>{$extras.discussion_count|number_short(1)}</dd>
						</dl>
						<dl class="pairs pairs--rows">
							<dt>{{ phrase('messages') }}</dt>
							<dd>{$extras.message_count|number_short(1)}</dd>
						</dl>
					</div>
				</xf:if>

				<div class="node-extra">
					<xf:if is="{$extras.privateInfo}">
						<span class="node-extra-placeholder">{{ phrase('private') }}</span>
					<xf:elseif is="{$extras.LastThread}" />
						<div class="node-extra-icon">
							<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
								<xf:avatar user="{{ null }}" size="xs" />
							<xf:else />
								<xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
							</xf:if>
						</div>
						<div class="node-extra-row">
							<xf:if is="$extras.LastThread.isUnread()">
								<a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
							<xf:else />
								<a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
							</xf:if>
						</div>
						<div class="node-extra-row">
							<ul class="listInline listInline--bullet">
								<li><xf:date time="{$extras.last_post_date}" class="node-extra-date" /></li>
								<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
									<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
								<xf:else />
									<li class="node-extra-user"><xf:username user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
								</xf:if>
							</ul>
						</div>
					<xf:else />
						<span class="node-extra-placeholder">{{ phrase('none') }}</span>
					</xf:if>
				</div>
			</div>
		</div>

	</xf:if>

	<xf:if is="{$depth} == 1">
		<xf:macro id="forum_list::node_list"
			arg-children="{$children}"
			arg-extras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</xf:if>
</xf:macro>

Save.

Penjelasan: Conditional $depth == 1 OR $depth == 2 membuat cover style berlaku untuk forum di root maupun di dalam kategori. Sub-forum (depth ≥ 3) tetap pakai layout original supaya rapi.

9. Tambahkan CSS

AdminCP → Appearance → Style properties → Extra LESS template → tambahkan blok ini:

/* ============================================
   Intutekno Cover Forum Style
   ============================================ */

.intuteknoCover {
    background: @xf-contentBg;
    border: 1px solid @xf-borderColor;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    border-top: 5px solid #06b6d4; /* default fallback */
}

.intuteknoCover-body {
    display: flex;
    gap: 0;
}

/* === LEFT: Cover + Info === */
.intuteknoCover-side {
    flex: 0 0 30%;
    max-width: 30%;
    padding: 14px;
    border-right: 1px solid @xf-borderColor;
    background: rgba(0,0,0,0.02);
}

.intuteknoCover-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 12px;
}

.intuteknoCover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.intuteknoCover-img:hover img {
    transform: scale(1.05);
}

.intuteknoCover-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.intuteknoCover-title a {
    color: @xf-linkColor;
}

.intuteknoCover-desc {
    font-size: 13px;
    color: @xf-textColorMuted;
    line-height: 1.5;
    margin-bottom: 12px;
}

.intuteknoCover-stats {
    display: flex;
    gap: 14px;
    padding-top: 10px;
    border-top: 2px solid #e74c3c;
    font-size: 13px;
}

.intuteknoCover-stats b {
    color: @xf-textColor;
}

/* === RIGHT: Daftar Thread === */
.intuteknoCover-threads {
    flex: 1;
    padding: 8px 14px;
}

.intuteknoThread-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.intuteknoThread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid @xf-borderColorLight;
}

.intuteknoThread-item:last-child {
    border-bottom: 0;
}

.intuteknoThread-item .intuteknoThread-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0;
}

.intuteknoThread-item .intuteknoThread-avatar.avatar img,
.intuteknoThread-item .intuteknoThread-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}

.intuteknoThread-item .intuteknoThread-avatar.avatar {
    font-size: 14px !important;
    line-height: 32px !important;
}

.intuteknoThread-main {
    flex: 1;
    min-width: 0;
}

.intuteknoThread-title {
    font-size: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.intuteknoThread-meta {
    font-size: 12px;
    color: @xf-textColorMuted;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.intuteknoThread-meta .username {
    font-weight: 600;
    color: @xf-linkColor;
}

.intuteknoThread-empty {
    padding: 50px 20px;
    text-align: center;
    color: @xf-textColorMuted;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    justify-content: center;
}

.intuteknoThread-empty .fa {
    font-size: 36px;
    opacity: 0.25;
}

/* === Responsive Mobile === */
@media (max-width: 768px) {
    .intuteknoCover-body {
        flex-direction: column;
    }
    .intuteknoCover-side,
    .intuteknoCover-threads {
        flex: 1 1 100%;
        max-width: 100%;
        border-right: 0;
        border-bottom: 1px solid @xf-borderColor;
    }
}

Save.

10. Setup Cover Image

10.1. Buat folder cover

Via File Manager cPanel atau FTP, buat folder:

/data/forum_covers/

Set permission 755.

10.2. Cari node_id setiap forum

AdminCP → Forums → klik nama forum → lihat URL:

.../admin.php?nodes/nama-forum.5/edit
                              ↑
                          node_id = 5

10.3. Upload cover image

Upload file SVG/WebP/JPG ke /data/forum_covers/ dengan nama sesuai node_id:

/data/forum_covers/
├── default.svg     ← fallback wajib
├── 5.svg           ← forum dengan node_id 5
├── 6.svg
├── 7.svg
└── ...

Spesifikasi cover ideal:

• Aspect ratio 3:2

• Ukuran 600×400 px

• Format SVG (paling ringan dan scalable) atau WebP

Catatan: Template di langkah 8 sudah pakai ekstensi .svg. Kalau Anda pakai .webp atau .jpg, ubah dua tempat di template dari .svg menjadi ekstensi yang Anda pakai.

11. Customize Border per Kategori

Border-top tiap card forum bisa diwarnai berbeda berdasarkan kategori induk-nya. Berkat class intuteknoCover--cat{X} yang otomatis disisipkan di langkah 8, kita tinggal target via CSS.

11.1. Cari node_id kategori

Sama seperti forum: AdminCP → Forums → klik kategori → lihat node_id di URL.

11.2. Tambahkan rules CSS

Tambahkan ke Extra LESS:

/* === Border Color per Kategori === */
.intuteknoCover--cat3 { border-top-color: #3b82f6; } /* Tutorial - biru */
.intuteknoCover--cat4 { border-top-color: #f59e0b; } /* Info - amber */
.intuteknoCover--cat5 { border-top-color: #10b981; } /* hijau */
.intuteknoCover--cat6 { border-top-color: #ec4899; } /* pink */
/* tambahkan sesuai kategori yang dimiliki */

Sesuaikan angka di --cat{X} dengan node_id kategori, dan warna sesuai branding masing-masing.

Save dan refresh

Setelah semua perubahan CSS:

1. Save Extra LESS

2. Tools → Rebuild caches → centang semua → Rebuild

3. Buka homepage forum → Ctrl+F5

12. Troubleshooting

Error Function "latest_forum_threads" is not callable

Listener belum aktif atau salah class path. Cek:

1. Add-ons — add-on Status harus Active

2. Code event listeners — entry untuk templater_setup harus enabled, Class dan Method harus persis sama dengan file PHP

3. Tools → Rebuild caches → centang semua

Cover tidak muncul, ada celah putih di kiri

Berarti gambar gagal dimuat. Cek:

1. File ada di /data/forum_covers/?

2. Permission folder 755, file 644?

3. Nama file sesuai node_id?

4. Path di template sesuai ekstensi file?

5. Ada file default.svg sebagai fallback?

Layout tidak berubah, masih style asli

1. Pastikan template node_list_forum ter-save dengan kode lengkap di langkah 8

2. Rebuild templates wajib

3. Ctrl+F5 untuk bypass cache browser

4. Cek dengan inspect element — class intuteknoCover harus muncul di div

Sub-forum jadi style cover juga (tidak diinginkan)

Cek conditional di template:

<xf:if is="$depth == 1 OR $depth == 2">

Sub-forum biasanya depth ≥ 3, jadi seharusnya tidak ter-cover. Kalau forum Anda strukturnya berbeda, sesuaikan condition.

Avatar ada celah ke kiri

Pastikan template pakai sintaks ini (avatar inline, bukan dibungkus <a>):

<xf:avatar user="{$thread.User}" size="xxs" defaultname="{$thread.username}" class="intuteknoThread-avatar" />

Class intuteknoCover--cat{id} tidak muncul di HTML

Berarti template belum ter-update. Edit ulang, save, dan rebuild templates.

13. Penutup

Setelah semua langkah di atas, halaman utama forum akan menampilkan card cover untuk setiap forum dengan layout 2 kolom dan border atas warna per kategori.

Pengembangan Selanjutnya

Beberapa peningkatan yang bisa dilakukan kapan-kapan:

• Caching thread terbaru lewat XF registry supaya tidak query 5 thread per forum setiap homepage di-load

• Custom field untuk upload cover via AdminCP (tanpa FTP)

• Hover effect halus di card dan row thread

• Lazy load cover image dengan blur placeholder

Struktur File Akhir

/src/addons/Intutekno/CoverForum/
├── addon.json
├── Listener.php
└── TemplateHelper.php

/data/forum_covers/
├── default.svg
├── 5.svg
├── 6.svg
└── ... (sesuai jumlah forum)

AdminCP → Templates: node_list_forum (modified)
AdminCP → Style properties → Extra LESS (modified)
AdminCP → Code event listeners: templater_setup → Listener::templaterSetup

Tutorial dibuat berdasarkan implementasi nyata di forum.intutekno.com

Lisensi: silakan adaptasi dan bagikan ulang. Kalau bermanfaat, sebutkan sumber sebagai amal jariah — pengetahuan yang terus bermanfaat.

Panduan ini menjelaskan cara saya membuat Kamus Istilah di lalu.pro memakai fitur Database di Invision Community (sering disingkat IPS): membuat database dan kolomnya, kategori, tiga template tampilan, sampai memasukkan istilah. Hasil akhirnya bisa dilihat di Kamus Istilah.

"Database" di sini bukan database MySQL tempat IPS menyimpan seluruh datanya. Di aplikasi Pages, database adalah kumpulan isi yang bentuknya kamu tentukan sendiri: kamu memilih kolom apa saja yang ada (misalnya Sinonim dan Definisi Singkat), mengelompokkannya dalam kategori, lalu mengatur tampilannya. Kamus istilah cocok jadi contoh karena bentuknya sederhana dan seragam.

Yang akan kamu dapatkan

• Halaman depan (/kamus-istilah/): kotak-kotak kategori beserta jumlah istilahnya.

• Daftar per kategori: istilah terurut abjad, lengkap dengan sinonim dan definisi singkatnya.

• Halaman istilah: judul, sinonim, definisi singkat yang menonjol, penjelasan lengkap, dan istilah terkait.

Sebelum mulai

• Versi. Invision Community 5 dengan aplikasi Pages. Panduan ini mengikuti tampilan versi 5.0.19. Nama tab, sintaks template, dan nama property di versi 5 berbeda dari versi 4. Kalau versimu lain, sebagian langkah bisa bergeser, jadi cek dulu sebelum menyalin kode mentah-mentah.

• Akses. Kamu perlu masuk ke AdminCP (panel admin situs).

• Pengetahuan dasar. HTML dan CSS dasar. Kode di panduan ini tinggal disalin, tetapi kamu perlu bisa membacanya kalau ada yang ingin disesuaikan.

• Cadangan. Sebelum mengubah template, salin isi lamanya ke berkas teks. Kalau ada yang rusak, kamu bisa mengembalikannya.

Istilah yang dipakai di panduan ini

• AdminCP: panel admin Invision Community.

• Record: satu isi di dalam database. Di sini, satu record adalah satu istilah.

• Kategori: pengelompokan record di dalam database.

• Template: kerangka HTML yang menentukan tampilan satu jenis halaman.

• Slug (FURL): bagian alamat URL yang berupa kata, seperti seo-analytics.

• Template group: kumpulan template milik satu database.

Isi panduan

• Gambaran: bagaimana semuanya tersambung

• Fase 1: Menyiapkan database (termasuk izin akses)

• Fase 2: Kolom tambahan

• Fase 3: Kategori

• Fase 4: Template tampilan

• Fase 5: Mengisi istilah

• Fase 6: Menyambungkan ke situs

• Fase 7: Pengujian

• Fase 8: Perawatan

• Pemecahan masalah

Gambaran: bagaimana semuanya tersambung

Kamus ini punya tiga jenis halaman, dan masing-masing memakai satu template:

/kamus-istilah/                          → Landing (grid kategori)
/kamus-istilah/seo-analytics/            → Listing kategori (daftar istilah)
/kamus-istilah/seo-analytics/backlink-rN/ → Detail istilah

• Halaman depan memakai template Category List.

• Daftar per kategori memakai template Record Listing.

• Halaman istilah memakai template Record.

Penting: URL memakai kamus-istilah, mengikuti Page Filename yang dibuat otomatis dari nama database, bukan glossary. Jangan menulis /glossary/ di mana pun. Halaman itu tidak ada dan akan menghasilkan error 404 (1S160/2).

Susunan data

Database: Kamus Istilah (key: glossary)
├── Kategori (5)
│   ├── SEO & Analytics
│   ├── Monetisasi
│   ├── Content & Copywriting
│   ├── Technical & Performance
│   └── Platform & Tools
└── Records (Istilah)
    ├── Title      (field bawaan, dipakai sebagai judul + URL)
    ├── Content    (field bawaan, penjelasan lengkap)
    ├── Aliases    (custom, key: aliases)
    └── Definisi Singkat (custom, key: definisi-singkat)

Fase 1: Menyiapkan database

1.1 Membuat database

AdminCP → Pages → Databases → Create New.

Tab yang ada di IPS 5.0.19: Details, Display, Language, Options, Forums, dan SEO. Tidak ada tab "Page" atau "Permissions" terpisah seperti di IPS 4. Pengaturan halaman menyatu di bawah tab Details.

Tab Details:

Di bagian bawah tab Details (bagian Page yang menyatu):

IPS otomatis membuat Page bernama kamus-istilah dan menetapkan database ini ke halaman tersebut. Inilah sumber URL final /kamus-istilah/.

1.2 Tab Language

Sesuaikan kata benda konten supaya berbahasa Indonesia. IPS memakai kata-kata ini untuk membentuk label dan tombol, misalnya "Add new istilah".

1.3 Tab Options

Rating dan polls tidak punya tombol sendiri di sini. Rating diatur per kategori, dan polls adalah fitur forum, jadi keduanya otomatis tidak aktif.

1.4 Tab Forums

1.5 Tab SEO

1.6 Tab Display

Catatan: Layout harus diatur ke "Custom" dulu. Baru setelah itu muncul menu pilihan "Template Group" untuk memilih template buatan kita. Kalau Layout dibiarkan "Grid" atau "Rows", template custom tidak akan pernah terpakai dan IPS tetap memakai tampilan bawaan. Template Group diisi di Fase 4, setelah template-nya dibuat.

1.7 Izin akses

Kamus sebaiknya bisa dibaca semua orang, tetapi hanya pengurus yang boleh menambah atau mengubah istilah. Izin diatur di tiga tingkat, dari yang paling atas:

• Halaman (Page). Kalau sebuah grup tidak boleh melihat halamannya, database di dalamnya ikut tidak terlihat.

• Database. Izin bawaan untuk semua kategori di dalamnya.

• Kategori. Bisa menimpa izin database lewat Set Custom Permissions. Di panduan ini opsi itu dimatikan (Fase 3), jadi semua kategori mengikuti izin database.

Menurut dokumentasi Invision, IPS menawarkan pengaturan izin database setelah database disimpan. Atur supaya grup Tamu dan Member biasa hanya bisa melihat dan membaca, sedangkan menambah dan mengubah istilah hanya untuk grup Admin atau staf. Nama dan letak opsinya bisa berbeda antarversi, jadi pastikan hasilnya lewat pengujian di Fase 7.

Fase 2: Kolom tambahan

AdminCP → Pages → Databases → Kamus Istilah → Fields.

Ada dua kolom bawaan yang terkunci: Title dan Content (lencana hijau dengan ikon gembok).

Bug yang ditemukan: mencoba mengedit kolom bawaan Title atau Content yang terkunci memicu error PHP:

Attempt to assign property "options" on null

Solusinya, jangan edit kolom bawaan. Mengganti label hanya kosmetik dan tidak penting, jadi biarkan Title dan Content apa adanya. Kolom baru (Create New) tidak terkena bug ini.

2.1 Kolom Aliases

Create New:

Setelah dibuat, catat Template Key dari tab Display options. Hasilnya: aliases.

2.2 Kolom Definisi Singkat

Create New:

Template Key: definisi-singkat.

Catatan: jangan mengandalkan kolom ini sebagai meta description. Template di panduan ini tidak membuat meta tag, dan saya belum menemukan opsi resmi untuk memakai kolom kustom sebagai meta description. Kalau itu penting buatmu, buka sumber halaman sebuah istilah (view-source) dan cari <meta name="description" untuk melihat isinya.

2.3 Matikan lencana bawaan kedua kolom

Aliases dan Definisi Singkat nanti ditampilkan dengan tata letak custom di template. Matikan tampilan lencana otomatisnya supaya tidak muncul dua kali.

Pada kedua kolom, buka tab Display options:

• Show in display template: OFF.

• Show in listing template: biarkan ON. Kolom ini masih dipakai di recordRow custom, tetapi boleh dimatikan kalau kamu tidak mau.

• Supaya lolos validasi "Display View Format REQUIRED", pilih Value saja. Pilihan ini tidak akan terpakai karena tampilan display sudah OFF.

Fase 3: Kategori

AdminCP → Pages → Databases → Kamus Istilah → Categories.

Saat "Use categories" diaktifkan, IPS otomatis membuat satu kategori bawaan bernama "Records". Ganti nama kategori ini jadi kategori pertama, lalu buat sisanya.

Buat lima kategori. FURL Slug wajib diisi manual; jangan biarkan terisi otomatis seperti N_records:

Pengaturan tiap kategori (tab Configuration):

Tab Meta Tags & Title boleh dikosongkan; IPS memakai Name dan Description kategori. Di tab Forum, Override OFF. Di tab Form Fields, centang "All".

Fase 4: Template tampilan

Cara kerja template di IPS 5

Di IPS 5, template database dibuat lewat Templates → Add... → Add database template, dengan isian "Assign to database". Kalau kamu memilih database di situ, IPS otomatis membuat template group khusus untuk database itu. Ini mirip folder "Hosting Review" yang mungkin sudah ada di situsmu. Jangan mengedit template record generik yang dipakai bersama oleh banyak database.

Jenis template yang dipakai:

Catatan teknis yang menghemat waktu

Hal-hal ini ditemukan lewat coba-coba. Pakai versi yang benar dari awal:

• Komentar {{* ... *}} tidak valid di IPS 5 dan memicu pesan "syntax of tags or HTML logic is badly formatted". Pakai <!-- --> atau hapus komentarnya.

• content adalah method, bukan property. Tulis {$record->content()|raw}, bukan {$record->content}.

• Jumlah tayangan bernama record_views, bukan views. Tulis {$record->record_views}.

• Tautan breadcrumb ke halaman depan sebaiknya ditulis sebagai teks polos /kamus-istilah/. Pemanggilan dinamis seperti {\IPS\cms\Databases::load(...)->url()} tidak dieksekusi (muncul sebagai teks mentah di URL), sedangkan {$record::database()->url()} dan {expression=...} memicu error fatal ("widgetArea is throwing an error"). Teks statis paling aman.

• Berkas CSS terpisah tidak dimuat otomatis. Berkas CSS yang dibuat lewat Add CSS file masuk ke grup "Page CSS" dan tidak ikut di halaman record. Solusinya, taruh CSS langsung di blok <style> di dalam template HTML. Cara ini terbukti bekerja.

• Nama variabel loop berbeda per template: template record memakai $record, recordRow memakai $rows dan $row, categoryRow memakai $category.

• Tanda |raw berarti HTML ditampilkan apa adanya, tidak diubah jadi teks. Pakai hanya untuk isi yang ditulis pengurus, seperti isi istilah.

• Pada var(--theme-..., #warna), nilai setelah koma adalah warna cadangan yang dipakai kalau temamu tidak punya variabel itu.

• CSS di bawah memakai font Geist, Instrument Serif, dan Geist Mono. Kalau situsmu tidak memuatnya, browser memakai huruf cadangan (Georgia dan sejenisnya) sehingga tampilan tetap terbaca. Ganti nama font di CSS kalau kamu ingin font lain.

4.1 Template Record (halaman istilah): glossarydisplay

Add database template → Name glossarydisplay, Type Record, Assign to Kamus Istilah. Buka sub-template record, lalu ganti seluruh isinya dengan:

<style>
.lalu-glossary-detail {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 24px;
	font-family: 'Geist', -apple-system, sans-serif;
}
.lalu-glossary-breadcrumb {
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--theme-accent, #a07855);
	margin-bottom: 24px;
}
.lalu-glossary-breadcrumb a { color: var(--theme-accent, #a07855); text-decoration: none; }
.lalu-glossary-breadcrumb a:hover { color: var(--theme-text_dark, #5c3a21); }
.lalu-glossary-breadcrumb .sep { margin: 0 8px; opacity: 0.5; }
.lalu-glossary-breadcrumb .current { color: var(--theme-text_dark, #5c3a21); }
.lalu-glossary-detail-header { margin-bottom: 32px; }
.lalu-glossary-detail-title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: clamp(40px, 7vw, 64px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-weight: 400;
	color: var(--theme-text_color, #181818);
	margin: 0 0 12px;
}
.lalu-glossary-detail-aliases {
	font-family: 'Geist Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--theme-accent, #a07855);
	margin: 0;
}
.lalu-glossary-detail-aliases .label { font-weight: 500; margin-right: 8px; text-transform: uppercase; }
.lalu-glossary-pullquote {
	background: var(--theme-area_background, #f5efea);
	border-left: 3px solid var(--theme-accent, #a07855);
	padding: 20px 24px;
	margin: 24px 0 32px;
	border-radius: 0 6px 6px 0;
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: 20px;
	line-height: 1.4;
	color: var(--theme-text_dark, #5c3a21);
	font-style: italic;
}
.lalu-glossary-detail-content { font-size: 16px; line-height: 1.7; color: var(--theme-text_color, #181818); }
.lalu-glossary-detail-content p { margin: 0 0 16px; }
.lalu-glossary-related {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px dashed var(--theme-border_color, #e2dcd5);
}
.lalu-glossary-related .label {
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-accent, #a07855);
	margin: 0 0 12px;
}
.lalu-glossary-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lalu-glossary-tag {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-size: 14px;
	padding: 6px 14px;
	background: var(--theme-area_background, #f5efea);
	color: var(--theme-text_dark, #5c3a21);
	border-radius: 20px;
	border: 1px solid var(--theme-border_color, #d4c9be);
}
.lalu-glossary-detail-meta {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--theme-border_color, #e2dcd5);
}
.lalu-glossary-detail-meta p {
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--theme-accent, #a07855);
	margin: 0;
}
</style>

{{$container = $record->container();}}
{{$aliases = $record->customFieldDisplayByKey('aliases', 'raw');}}
{{$shortDef = $record->customFieldDisplayByKey('definisi-singkat', 'raw');}}
{{$tags = $record->tags();}}

<div class="lalu-glossary-detail">

	<div class="lalu-glossary-breadcrumb">
		<a href="/kamus-istilah/">Kamus Istilah</a>
		<span class="sep">/</span>
		{{if $container}}
			<a href="{$container->url()}">{$container->_title}</a>
			<span class="sep">/</span>
		{{endif}}
		<span class="current">{$record->_title}</span>
	</div>

	<header class="lalu-glossary-detail-header">
		<h1 class="lalu-glossary-detail-title">{$record->_title}</h1>
		{{if $aliases}}
			<p class="lalu-glossary-detail-aliases">
				<span class="label">Sinonim:</span>
				{$aliases}
			</p>
		{{endif}}
	</header>

	{{if $shortDef}}
		<blockquote class="lalu-glossary-pullquote">
			{$shortDef}
		</blockquote>
	{{endif}}

	<div class="lalu-glossary-detail-content ipsType_richText">
		{$record->content()|raw}
	</div>

	{{if $tags and \count($tags)}}
		<div class="lalu-glossary-related">
			<p class="label">Istilah Terkait</p>
			<div class="lalu-glossary-tags">
				{{foreach $tags as $tag}}
					<span class="lalu-glossary-tag">{$tag}</span>
				{{endforeach}}
			</div>
		</div>
	{{endif}}

	<footer class="lalu-glossary-detail-meta">
		<p>{lang="num_views_with_number" pluralize="$record->record_views"}</p>
	</footer>

</div>

Cara membacanya: blok <style> berisi tampilan; empat baris {{$...}} mengambil data (kategori, sinonim, definisi singkat, tag); sisanya HTML halaman: breadcrumb, judul dan sinonim, definisi singkat dalam kutipan, isi lengkap, istilah terkait, lalu jumlah tayangan. Tag tampil sebagai label biasa dan belum bisa diklik.

4.2 Template Record Listing (daftar per kategori): glossarylisting

Add database template → Name glossarylisting, Type Record Listing, Assign to Kamus Istilah.

Keputusan desain: navigasi huruf A–Z yang menempel di layar (sticky) sengaja tidak dibuat. Alasannya: template pembungkus categoryTable di IPS 5 memakai abstraksi class $table penuh (sorting, filtering, pagination, moderasi) dan menyerahkan render baris ke recordRow secara dinamis. Tidak ada akses mudah ke array records untuk dikelompokkan per huruf tanpa risiko merusak fitur bawaan. Karena Sort sudah Title (Fase 1.6), daftar tetap terurut abjad, dan itu cukup untuk sebuah kamus.

Edit sub-template recordRow, lalu ganti seluruh isinya dengan:

<style>
.lalu-glossary-list {
	display: flex;
	flex-direction: column;
}
.lalu-glossary-record {
	display: block;
	padding: 20px 0;
	border-top: 1px solid var(--theme-border_color, #e2dcd5);
	text-decoration: none !important;
	color: inherit;
	transition: background 0.2s;
}
.lalu-glossary-record:hover {
	background: rgba(160, 120, 85, 0.04);
}
.lalu-glossary-record-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.lalu-glossary-record-title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--theme-text_color, #181818);
	margin: 0;
}
.lalu-glossary-record:hover .lalu-glossary-record-title {
	color: var(--theme-accent, #a07855);
}
.lalu-glossary-record-alias {
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	color: var(--theme-accent, #a07855);
	background: rgba(160, 120, 85, 0.1);
	padding: 2px 8px;
	border-radius: 10px;
}
.lalu-glossary-record-def {
	font-size: 14px;
	line-height: 1.5;
	color: var(--theme-text_dark, #5c3a21);
	margin: 0;
}
</style>
<div class="lalu-glossary-list">
	{{foreach $rows as $row}}
		{{$rowAlias = $row->customFieldDisplayByKey('aliases', 'raw');}}
		{{$rowDef = $row->customFieldDisplayByKey('definisi-singkat', 'raw');}}
		<a href="{$row->url()}" class="lalu-glossary-record">
			<div class="lalu-glossary-record-head">
				<h3 class="lalu-glossary-record-title">{$row->_title}</h3>
				{{if $rowAlias}}
					<span class="lalu-glossary-record-alias">{$rowAlias}</span>
				{{endif}}
			</div>
			{{if $rowDef}}
				<p class="lalu-glossary-record-def">{$rowDef}</p>
			{{endif}}
		</a>
	{{endforeach}}
</div>

4.3 Template Category List (halaman depan): glossarycategorylist

Add database template → Name glossarycategorylist, Type Category List, Assign to Kamus Istilah. Template group ini punya dua sub-template: index dan categoryRow.

Sub-template index:

<style>
.lalu-glossary-hero {
	text-align: center;
	padding: 60px 0 40px;
	border-bottom: 1px solid var(--theme-border_color, #e2dcd5);
	margin-bottom: 40px;
}
.lalu-glossary-title {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: clamp(48px, 8vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-weight: 400;
	color: var(--theme-text_color, #181818);
	margin: 0 0 16px;
}
.lalu-glossary-desc {
	font-size: 16px;
	line-height: 1.5;
	color: var(--theme-text_dark, #5c3a21);
	max-width: 480px;
	margin: 0 auto;
}
.lalu-glossary-categories {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	max-width: 900px;
	margin: 0 auto;
}
@media (max-width: 700px) {
	.lalu-glossary-categories { grid-template-columns: 1fr; }
}
</style>

<div class="lalu-glossary-hero">
	<h1 class="lalu-glossary-title">{$database->_title}</h1>
	{{if $database->_description}}
		<p class="lalu-glossary-desc">{$database->_description}</p>
	{{endif}}
</div>

<div class="lalu-glossary-categories">
	{{foreach $categories as $category}}
		{template="categoryRow" app="cms" location="database" group="glossarycategorylist" params="$category"}
	{{endforeach}}
</div>

Sub-template categoryRow:

<style>
.lalu-glossary-cat-card {
	background: var(--theme-area_background, #fdfbfa);
	border: 1px solid var(--theme-border_color, #d4c9be);
	border-radius: 6px;
	padding: 24px;
	text-decoration: none !important;
	color: inherit;
	transition: all 0.3s;
	display: block;
}
.lalu-glossary-cat-card:hover {
	background: var(--theme-area_background_alt, #f5efea);
	border-color: var(--theme-accent, #a07855);
}
.lalu-glossary-cat-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.lalu-glossary-cat-name {
	font-family: 'Instrument Serif', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--theme-text_color, #181818);
	margin: 0;
}
.lalu-glossary-cat-count {
	font-family: 'Geist Mono', monospace;
	font-size: 12px;
	color: var(--theme-accent, #a07855);
}
.lalu-glossary-cat-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--theme-text_dark, #5c3a21);
	margin: 0;
}
</style>

{{$RecordsClass = $category::$contentItemClass;}}
{{$count = $RecordsClass::contentCount( $category, FALSE );}}

<a href="{$category->url()}" class="lalu-glossary-cat-card">
	<div class="lalu-glossary-cat-header">
		<h2 class="lalu-glossary-cat-name">{$category->_title}</h2>
		<span class="lalu-glossary-cat-count">{$count}</span>
	</div>
	{{if $category->_description}}
		<p class="lalu-glossary-cat-desc">{$category->_description|raw}</p>
	{{endif}}
</a>

4.4 Pasang template group ke database

Kembali ke Databases → Kamus Istilah → Display. Sekarang template sudah ada, jadi pilih di menu:

Simpan. Halaman depan /kamus-istilah/ sekarang menampilkan kotak kategori custom, klik kategori menampilkan daftar istilah custom, dan klik istilah menampilkan halaman detail custom.

Fase 5: Mengisi istilah

5.1 Saran pembagian awal: 40 istilah

Ini target, bukan syarat. Kamu boleh mulai dari 10 sampai 15 istilah yang paling sering kamu pakai, lalu menambah sambil jalan. Kamus yang rapi dengan 15 istilah lebih berguna daripada 40 istilah yang setengah jadi.

5.2 Cara menambah istilah

Lewat halaman situs: buka /kamus-istilah/, klik kategori, lalu klik "Add new istilah". Tombol ini hanya muncul untuk akun yang punya izin menambah (lihat 1.7). Lewat AdminCP: Pages → Databases → Kamus Istilah → Records → Create New.

Isi per record:

5.3 Susunan isi per istilah

<p>{Definisi pembuka — 2-3 kalimat jelas}</p>

<h3>Jenis / Variasi</h3>
<ul>
  <li><strong>Tipe 1</strong> — penjelasan</li>
  <li><strong>Tipe 2</strong> — penjelasan</li>
</ul>

<h3>Contoh Praktis</h3>
<p>{Contoh dari konteks Indonesia}</p>

<h3>Mengapa Penting</h3>
<p>{Relevansi untuk blogger}</p>

Lewati bagian "Jenis / Variasi" kalau istilahnya memang tidak punya variasi. Lebih baik pendek dan jelas daripada panjang karena memaksakan bagian.

5.4 Bantuan AI untuk draf awal

Prompt yang bisa dipakai (Claude, ChatGPT, atau yang lain):

Tulis definisi istilah blogging berikut dalam bahasa Indonesia untuk
komunitas blogger. Format:
- Definisi singkat (max 160 karakter)
- Penjelasan lengkap (3-5 paragraf)
- Sertakan: jenis/variasi, contoh praktis, mengapa penting
- Bahasa: informal-profesional, pemula s/d menengah
- Hindari jargon yang tidak dijelaskan

Istilah: {ISTILAH}
Kategori: {KATEGORI}

Selalu periksa dulu sebelum menerbitkan:

• Akurasi teknis.

• Relevansi untuk pembaca Indonesia.

• Tidak ada angka atau fakta karangan.

• Nada tulisan sama dengan bagian lain di situsmu.

5.5 Hapus record percobaan

Sebelum kamus dibuka untuk umum, hapus record percobaan (misalnya yang isinya teks acak) atau ganti dengan konten asli.

Fase 6: Menyambungkan ke situs

6.1 Tambahkan ke menu utama

AdminCP → System → Settings → Menu Manager. Nama dan letak menu pengaturan ini bisa berbeda di versi lain; carilah pengelola navigasi di versimu. Tambahkan item:

6.2 Blok "Istilah Acak" di beranda (opsional)

Bagian ini opsional dan belum disertai kode contoh. AdminCP → Pages → Blocks → Add → Plugin → Record Feed:

Untuk mengatur tampilannya, buat template blok custom yang me-loop $records dan menampilkan Title serta customFieldDisplayByKey('definisi-singkat', 'raw') untuk tiap item. Pasang bloknya di beranda lewat editor Page.

6.3 Tautan dari artikel

Saat menulis artikel, tautkan manual ke istilah di kamus:

Gunakan <a href="/kamus-istilah/seo-analytics/backlink-r1/">backlink</a>
berkualitas untuk meningkatkan authority.

Angka di ujung alamat (r1) adalah nomor record. Salin alamat lengkap dari browser, jangan mengetiknya sendiri.

Fase 7: Pengujian

Sebelum menganggap kamus selesai, periksa satu per satu:

• Halaman depan (/kamus-istilah/): kategori tampil sebagai kotak dan jumlah istilahnya benar.

• Daftar kategori: istilah terurut abjad, sinonim dan definisi singkat tampil.

• Halaman istilah: judul, sinonim, definisi singkat, isi, istilah terkait, dan jumlah tayangan tampil. Tautan breadcrumb bisa diklik.

• Sebagai tamu: buka di jendela privat tanpa masuk akun. Semua halaman terbuka, dan tidak ada tombol untuk menambah atau mengubah istilah.

• Di ponsel: buka di ponsel atau perkecil jendela browser sampai di bawah 700 piksel. Kotak kategori harus menjadi satu kolom.

• Pencarian: cari satu istilah lewat kolom pencarian situs. Istilah itu harus muncul di hasil.

• Menu: item Kamus Istilah mengarah ke /kamus-istilah/.

• Alamat salah: /glossary/ menghasilkan 404. Itu normal; pastikan tidak ada tautan yang mengarah ke sana.

• Record percobaan: tidak ada lagi record dengan teks acak.

Fase 8: Perawatan

• Menambah istilah. Ikuti 5.2. Kalau kategori hampir penuh atau terasa campur aduk, tambahkan kategori baru lewat Fase 3 dan isi slug-nya manual.

• Mengubah template. Salin dulu isi lama ke berkas teks. Setelah menyimpan, kalau tampilan tidak berubah, kosongkan cache situs (misalnya Redis, kalau dipakai) dan muat ulang halaman tanpa cache (Ctrl+F5).

• Jangan mengubah Page Filename atau slug kategori setelah ada tautan yang masuk, termasuk tautan dari artikelmu sendiri. Alamat lama akan menghasilkan 404.

• Setelah memperbarui IPS. Buka kembali tiga jenis halaman dan ulangi Fase 7. Template custom bisa terpengaruh perubahan di versi baru.

• Cadangan. Simpan salinan ketiga template (glossarydisplay, glossarylisting, glossarycategorylist) di tempat yang aman.

Pemecahan masalah

Bacaan lanjutan

• Invision Community: Databases, Part II. Membahas izin di tingkat halaman, database, dan kategori. Ditulis untuk versi 4, jadi sebagian langkah bisa berbeda di versi 5.

• Invision Community: Case study, building a recipe section. Contoh lain membuat database dengan kolom dan kategori.

Catatan teknis

Kode template di Fase 4 sudah dijalankan di Invision Community 5.0.19 pada situs ini. Langkah di Fase 6 bisa berbeda di versi lain, dan bagian izin (1.7) mengikuti dokumentasi Invision, jadi pastikan lewat Fase 7. Dibuat untuk lalu.pro.

Tutorial lengkap membuat tool PageSpeed Tester yang aman dan gratis untuk blog Blogger Anda. Tool ini menggunakan Google PageSpeed Insights API dengan Cloudflare Worker sebagai proxy untuk menyembunyikan API key.

Apa yang Akan Anda Buat

Tool yang bisa:

• Cek skor Performance, Accessibility, Best Practices, dan SEO halaman manapun

• Tampilkan Core Web Vitals (FCP, LCP, TBT, CLS, dll)

• Berikan rekomendasi perbaikan diurutkan berdasarkan impact

• Cache hasil 1 jam untuk hemat quota

• 100% gratis (Google API quota gratis cukup untuk blog normal)

Mengapa Butuh Cloudflare Worker?

API Google butuh API key untuk akses unlimited. Kalau key disimpan langsung di JavaScript blog Anda:

• Key terlihat di view-source dan Network tab browser

• Siapa saja bisa copy key Anda

• Pakai untuk panggil API mereka sendiri

• Quota Anda habis, atau worse — kena billing kalau key Anda attach ke service berbayar

Solusi: Simpan key di Cloudflare Worker (server). Tool browser hanya panggil Worker, Worker yang panggil Google API.

Browser (tool Anda) → Cloudflare Worker (key di sini) → Google PageSpeed API

Key tidak pernah keluar dari server. Aman.

Prasyarat

Sebelum mulai, siapkan:

1. Akun Google (untuk Google Cloud Console)

2. Akun Cloudflare (gratis, daftar di cloudflare.com)

3. Blog Blogger Anda

Tidak perlu credit card untuk setup ini.

STEP 1: Dapatkan Google API Key

1.1 Aktifkan PageSpeed Insights API

1. Buka Google Cloud Console

2. Buat project baru (atau pilih yang sudah ada)

3. Di sidebar kiri: APIs & Services → Library

4. Search: "PageSpeed Insights API"

5. Klik hasil, lalu Enable

1.2 Buat API Key

1. APIs & Services → Credentials

2. Create Credentials → API key

3. Key baru muncul. Copy key tersebut dan simpan sementara di Notepad/text editor

4. Klik Edit API key untuk setup restriction

1.3 Set Restriction (Sangat Penting!)

Tanpa restriction, key bisa dipakai siapa saja yang punya key tersebut.

Application restrictions:

• Pilih Websites

• Klik Add an item

• Isi domain Anda:

  • *.laluabdrahman.com* (ganti dengan domain Anda)

  • https://laluabdrahman.com/*

  • https://www.laluabdrahman.com/*

API restrictions:

• Pilih Restrict key

• Centang hanya "PageSpeed Insights API"

• Klik Save

Tips keamanan: Restriction ini berarti key Anda tidak bisa dipakai dari domain lain ATAU untuk API Google lain (Maps, Translate, dll yang berbayar).

STEP 2: Deploy Cloudflare Worker

2.1 Buat Worker Baru

1. Login ke Cloudflare dashboard

2. Sidebar kiri: Workers & Pages

3. Klik Create application → Create Worker

4. Beri nama, misal: pagespeed-proxy

5. Klik Deploy (dengan default code)

6. Setelah deploy, klik Edit code

2.2 Paste Kode Worker

Hapus semua default code, paste kode berikut:

export default {
  async fetch(request, env, ctx) {
    // CORS preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, { status: 204, headers: corsHeaders() });
    }
    if (request.method !== 'GET') {
      return errorResponse('Only GET allowed', 405);
    }

    const url = new URL(request.url);
    const targetUrl = url.searchParams.get('url');
    const strategy = (url.searchParams.get('strategy') || 'mobile').toLowerCase();

    if (!targetUrl) {
      return errorResponse('Missing url parameter', 400);
    }
    if (!['mobile', 'desktop'].includes(strategy)) {
      return errorResponse('strategy must be mobile or desktop', 400);
    }

    // Validate target URL
    let target;
    try {
      target = new URL(targetUrl);
    } catch (e) {
      return errorResponse('Invalid URL format', 400);
    }
    if (!['http:', 'https:'].includes(target.protocol)) {
      return errorResponse('Only http(s) protocol allowed', 403);
    }

    // SSRF prevention
    const hostname = target.hostname.toLowerCase();
    if (['localhost', '127.0.0.1', '0.0.0.0', '::1'].includes(hostname) ||
        /^10\./.test(hostname) ||
        /^172\.(1[6-9]|2\d|3[01])\./.test(hostname) ||
        /^192\.168\./.test(hostname) ||
        /^169\.254\./.test(hostname)) {
      return errorResponse('Hostname not allowed', 403);
    }

    if (!env.GOOGLE_API_KEY) {
      return errorResponse('Worker not configured: missing GOOGLE_API_KEY secret', 500);
    }

    // Cache check
    const cacheKey = new Request(
      `https://psi-cache.internal/${strategy}/${encodeURIComponent(target.href)}`,
      { method: 'GET' }
    );
    const cache = caches.default;
    let cached = await cache.match(cacheKey);
    if (cached) {
      const newHeaders = new Headers(cached.headers);
      newHeaders.set('X-PSI-Cache', 'HIT');
      return new Response(cached.body, { status: cached.status, headers: newHeaders });
    }

    // Call Google PageSpeed API
    const apiUrl = new URL('https://www.googleapis.com/pagespeedonline/v5/runPagespeed');
    apiUrl.searchParams.set('url', target.href);
    apiUrl.searchParams.set('strategy', strategy);
    ['performance', 'accessibility', 'best-practices', 'seo'].forEach(cat => {
      apiUrl.searchParams.append('category', cat);
    });
    apiUrl.searchParams.set('key', env.GOOGLE_API_KEY);

    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 60000);

      // GANTI Referer di bawah dengan domain blog Anda
      const apiRes = await fetch(apiUrl.toString(), {
        headers: { 'Referer': 'https://www.laluabdrahman.com/' },
        signal: controller.signal
      });
      clearTimeout(timeoutId);

      if (!apiRes.ok) {
        let errMsg = `Google API returned HTTP ${apiRes.status}`;
        try {
          const errBody = await apiRes.json();
          if (errBody.error?.message) errMsg = errBody.error.message;
        } catch (e) {}
        return errorResponse(errMsg, apiRes.status === 429 ? 429 : 502);
      }

      const data = await apiRes.json();
      const response = new Response(JSON.stringify(data), {
        status: 200,
        headers: {
          ...corsHeaders(),
          'Content-Type': 'application/json',
          'Cache-Control': 'public, max-age=3600',
          'X-PSI-Cache': 'MISS'
        }
      });

      ctx.waitUntil(cache.put(cacheKey, response.clone()));
      return response;
    } catch (err) {
      if (err.name === 'AbortError') {
        return errorResponse('PageSpeed API timeout (>60s)', 504);
      }
      return errorResponse('Fetch failed: ' + err.message, 502);
    }
  }
};

function corsHeaders() {
  return {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type'
  };
}

function errorResponse(message, status) {
  return new Response(JSON.stringify({ error: message }), {
    status,
    headers: { ...corsHeaders(), 'Content-Type': 'application/json' }
  });
}

PENTING: Cari baris 'Referer': 'https://www.laluabdrahman.com/' dan ganti dengan domain Anda. Ini harus match dengan restriction key di Google Cloud Console.

Klik Save and deploy.

2.3 Tambah API Key sebagai Secret

Sekarang masukkan API key Anda ke Worker sebagai secret (encrypted):

1. Di Worker → tab Settings

2. Scroll ke section Variables and Secrets

3. Klik + Add

4. Isi:

   • Type: Secret (penting! bukan Text)

   • Variable name: GOOGLE_API_KEY (case-sensitive, persis seperti ini)

   • Value: paste API key dari Step 1.2

5. Klik Save

Catatan: Setelah secret ditambahkan, Worker mungkin perlu di-redeploy. Buka tab Deployments, kalau tidak ada deployment baru otomatis, edit kode dan save lagi (tambah satu spasi lalu hapus juga cukup).

2.4 Test Worker

Buka di browser:

https://pagespeed-proxy.YOUR-NAME.workers.dev/?url=https://example.com&strategy=mobile

Ganti YOUR-NAME dengan subdomain Worker Anda.

Expected:

• Tunggu 15-40 detik

• Lihat JSON besar muncul dengan field lighthouseResult

• Jika ada error, baca pesan dan cek troubleshooting di bawah

Catat URL Worker Anda — akan dipakai di Step 3.

STEP 3: Setup Tool HTML di Blogger

3.1 Edit Konfigurasi Tool

Buka file pagespeed-tester.html Anda. Cari baris ini (sekitar baris 510):

const WORKER_URL = '';

Ganti dengan URL Worker Anda:

const WORKER_URL = 'https://pagespeed-proxy.YOUR-NAME.workers.dev/';

3.2 Paste ke Blogger

1. Blogger dashboard → Pages → New Page

2. Klik mode HTML view (bukan Compose)

3. Paste seluruh isi file pagespeed-tester.html

4. Beri title halaman: "PageSpeed Tester"

5. Publish

3.3 Test Tool

Buka halaman yang baru dipublish, lalu:

1. Input URL, contoh: https://example.com

2. Pilih Mobile atau Desktop

3. Klik Mulai Tes

4. Tunggu 15-40 detik

5. Hasil muncul dengan score rings, Core Web Vitals, dan rekomendasi

Cache test:

• Klik Mulai Tes lagi dengan URL dan strategy sama

• Harusnya muncul <1 detik dari cache

• Footer berubah jadi: "✓ dari cache"

Troubleshooting

Error: "Worker not configured: missing GOOGLE_API_KEY secret"

Secret belum tersimpan atau Worker belum redeploy. Solusi:

1. Cek di Settings → Variables and Secrets, pastikan ada GOOGLE_API_KEY (case-sensitive)

2. Pastikan Type-nya Secret, bukan Text

3. Edit kode Worker, save lagi untuk trigger redeploy

Error: "Requests from referer <empty> are blocked"

API key Anda di-restrict ke domain, tapi Worker tidak kirim Referer header.

Solusi: Pastikan di kode Worker ada baris ini di dalam fetch() ke Google API:

headers: { 'Referer': 'https://www.YOUR-DOMAIN.com/' }

Domain di sini harus match dengan salah satu restriction di Google Cloud Console.

Tombol "Mulai Tes" tidak respon

Buka Developer Console (F12 → Console), lihat error apa yang muncul.

Cek juga:

• WORKER_URL sudah diisi dengan URL Worker Anda

• URL Worker bisa diakses langsung di browser

Error: "HTTP 429" (Too Many Requests)

Rate limit dari Google. Tunggu 1-2 menit, lalu coba lagi. Atau:

• Pastikan API key sudah terkonfigurasi dengan benar

• Caching seharusnya mengurangi request rate

Hasil PageSpeed berbeda dari pagespeed.web.dev

Normal. Score PageSpeed bisa fluktuasi 5-10 point antar test karena:

• Variasi network condition di server Google

• Random sampling dari data CrUX (Chrome User Experience Report)

• Cache TTL yang berbeda

Untuk benchmark akurat, jalankan test 3-5 kali dan ambil median.

Quota dan Biaya

Google PageSpeed Insights API

• 25,000 query per hari gratis

• Cukup untuk blog normal — bahkan dengan caching off

• Tidak perlu billing setup

Cloudflare Workers

• 100,000 request per hari gratis (free tier)

• 10ms CPU time per request (kita pakai jauh lebih sedikit)

• Cache pakai Cloudflare Cache API (built-in, gratis)

Estimasi penggunaan blog dengan 1,000 visitor/hari

Asumsi: 1% visitor pakai tool = 10 test/hari

Penggunaan masih jauh di bawah free tier. Aman untuk blog dengan trafik wajar.

Cara Kerja Detail

Arsitektur Defense in Depth

Tool ini punya 5 layer keamanan:

1. Key disembunyikan di Worker secret — encrypted di Cloudflare, tidak visible di dashboard setelah disimpan

2. API restriction di Google — key hanya bisa pakai PageSpeed Insights API, bukan Maps/Translate yang berbayar

3. Website restriction di Google — referer harus match domain Anda

4. Worker forward referer — memungkinkan website restriction bekerja meski request datang dari Cloudflare IP

5. SSRF prevention di Worker — block private IP dan localhost di parameter URL

Kalau salah satu layer compromised, layer lain masih protect:

• Key bocor → masih di-restrict ke PageSpeed Insights API only

• Restriction lemah → key tetap tidak visible di browser

Cache Strategy

Worker pakai Cloudflare Cache API (built-in, no setup):

• Cache key: URL + strategy

• TTL: 1 jam (3600 detik)

• Storage: Cloudflare edge, automatic eviction

Mobile dan Desktop terhitung cache terpisah. Cache di-share antar visitor — jadi kalau 100 orang test URL sama, hanya 1 yang fresh fetch, sisanya dari cache.

Kenapa Hasil Pertama Lambat?

Google PageSpeed API actually menjalankan Lighthouse audit di server mereka — load page, render, simulate user interaction, analyze. Itu butuh 15-40 detik. Tidak bisa diakselerasi.

Setelah cache, hasil instan karena tidak perlu re-audit.

Kesimpulan

Anda sekarang punya tool PageSpeed Tester sendiri yang:

• Gratis sampai 25k test/hari (jauh di atas kebutuhan blog normal)

• Aman — API key tidak pernah terlihat publik

• Cepat untuk repeat test (cache 1 jam)

• Customizable — bisa modify UI, tambah fitur, dll

Tool ini juga jadi foundation pattern untuk tool lain yang butuh API key. Misalnya kalau Anda mau buat:

• Image Alt Text Generator (pakai OpenAI/Claude API)

• SERP Checker (pakai SerpApi)

• Backlink Checker (pakai Ahrefs API)

Polanya sama: Worker proxy + secret env variable.

Selamat mencoba!

Target: Pengguna IPS 5 yang ingin membangun homepage editorial dengan data live dari berbagai aplikasi IPS (Forum, Pages, Downloads).  

Tingkat: Menengah (butuh dasar HTML/CSS, tidak butuh PHP advance).

Prasyarat

Sebelum mulai, pastikan Anda punya:

Sebelum mulai, pastikan Anda punya:

Teknis

• Invision Community 5.0.x ter-install (panduan ini di-test di 5.0.18)

• Aplikasi Pages aktif (wajib — ini yang memungkinkan custom homepage)

• AdminCP access sebagai administrator

• Akses cPanel atau file manager (untuk backup tema, opsional tapi sangat direkomendasikan)

Pengetahuan

• HTML dasar (tag, attribute, nested element)

• CSS dasar (selector, properties, flexbox, grid)

• Konsep template tag (mirip Twig, Liquid, atau Blade — tidak perlu PHP)

• Mengerti perbedaan client-side (HTML/CSS) vs server-side (PHP) rendering

Aplikasi IPS yang Direkomendasikan untuk Live Data

• Forum (untuk fetch topik diskusi)

• Pages dengan custom database (untuk artikel)

• Downloads (untuk file/resources)

• Calendar (untuk events — opsional)

Persiapan Konten

• Minimal 3-5 topik forum sudah dipost

• Minimal 3-5 artikel sudah di-publish di Pages database

• Minimal 2-3 file sudah di-upload di Downloads

Tanpa konten ini, section live data akan tampak kosong saat testing.

Konsep IPS 5 yang Wajib Dipahami

Sebelum nyentuh kode, pahami dulu konsep-konsep ini. Banyak frustrasi muncul karena pengguna tidak tahu vocabulary IPS 5.

1. Pages — Aplikasi Pembuat Halaman

Pages adalah aplikasi IPS yang memungkinkan Anda membuat halaman custom di luar struktur forum standar. Homepage custom Anda akan jadi sebuah Page.

Path: AdminCP → Pages

2. Page Types

Saat membuat Page baru, ada dua tipe utama:

Manual memberi Anda kontrol penuh atas HTML, sementara Page Builder cocok untuk yang tidak mau repot ngoding.

3. Use Suite HTML Wrapper — Setting Paling Krusial

Ini setting yang sering bikin bingung. Ada dua mode:

Mode A: Suite Wrapper ON (Direkomendasikan untuk Production)

✅ Konten Anda di-wrap dalam template global IPS (header, footer, sidebar, scripts)
✅ Security IPS aktif (CSRF, session, auth)
✅ JavaScript dan PHP IPS jalan native
✅ Konsisten dengan halaman lain (forum, artikel detail)
❌ Tidak bisa custom <head>, <body>, atau full HTML

Kapan pakai: Saat Anda mau pakai header & footer bawaan IPS, dan hanya custom area konten tengah.

Mode B: Suite Wrapper OFF (Full Custom)

✅ Full kontrol dari <!DOCTYPE html> sampai </html>
✅ Bisa pakai font, CSS, JS dari mana saja
❌ Harus handle security sendiri
❌ Tidak otomatis dapat update template IPS
❌ Header/footer/user dropdown IPS hilang
❌ Login/logout/notifications bawaan IPS tidak otomatis ada

Kapan pakai: Saat homepage benar-benar berbeda total dari sisa situs (misal, landing page marketing).

Rekomendasi panduan ini: Pakai Suite Wrapper ON. Lebih aman, maintenance-friendly, dan transisi antar halaman seamless.

4. Blocks — Mesin Live Data

Blocks adalah komponen reusable yang bisa menampilkan data dari aplikasi IPS. Ada 4 tipe block di IPS 5:

Tutorial ini akan beberapa pakai Plugin (untuk feed) dan Manual HTML (untuk stats counter).

5. Block Templates

Tampilan default block IPS sering tidak match dengan desain Anda. Solusinya: Block Template — custom template yang bisa Anda terapkan ke block tertentu.

Path: AdminCP → Pages → Templates → Add → block template

Block Template menggunakan template tag IPS ({{foreach}}, {$variable}, dll) — bukan PHP murni.

6. Template Tags vs Expression

Dua jenis sintaks yang akan sering Anda lihat:

Template Tag (logic flow):

{{if $count > 1000}}
{{foreach $items as $item}}
...
{{endforeach}}
{{endif}}

Expression (eksekusi PHP):

{expression="number_format($count)"}
{expression="$record->_title"}

Aturan: gunakan {{...}} untuk logic, {expression="..."} untuk output PHP.

7. Default Page Setting

Setelah membuat homepage, Anda harus set sebagai default agar muncul saat user buka root domain (https://situs.com/).

Path: AdminCP → System → Settings → Site Features → Default Page

Fase 1 — Setup Halaman Homepage

Step 1.1: Backup Tema Anda (Wajib!)

Sebelum modifikasi apapun, backup tema aktif:

AdminCP → Customization → Appearance → Themes
└─ Hover icon download di samping tema → Save .xml file

Simpan file .xml ini di komputer lokal. Kalau ada yang rusak, Anda bisa restore.

Step 1.2: Buat Page Baru

Path: AdminCP → Pages → Add Page

Pilih Content Editor-nya Manual HTML

Lengkapi Page Details dengan isian seperti dalam tabel di bawah.

Isian mencakup:

Klik Save & Edit.

Step 1.3: Struktur HTML Dasar

Karena Suite Wrapper ON, TIDAK butuh <!DOCTYPE>, <html>, <head>, atau <body>. IPS akan menambahkannya otomatis. Anda cukup tulis konten yang ada di dalam <body> saja.

Template dasar yang bisa Anda pakai sebagai starting point:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<style>
/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
--bg: #ebe7e0;
--ink: #181818;
--accent: #ff5c2b;
/* ... variabel lainnya ... */
}

/* Style section di sini */
</style>

<!-- HERO SECTION -->
<section class="hero">
<h1>Selamat datang di komunitas kami</h1>
<p>Deskripsi singkat tentang komunitas Anda.</p>
</section>

<!-- SECTION LAIN -->
<section class="features">
<!-- ... -->
</section>

Itu saja kerangka dasarnya.

Step 1.4: Penting — Cara Paste Kode di Editor IPS

Editor IPS Pages punya mode Invision HTML Template dan Plain Text.

1. Klik tab Content, secara default terpilih editor Invision HTML Template.

2. Salin kerangka HTML pada langkah 1.3 di atas.

3. Paste di kolom yang tersedia.

4. Save.

Setelah Save tentukan View Page, centang saja semua agar homepage dapat dilihat oleh semua pengunjung.

Step 1.5: Set Homepage Sebagai Default

Setelah halaman terbuat, jadikan default, langsung saja klik ikon bintang, lalu geser tombol Set as default page ke kanan (ON). Klik Save. Sekarang akses https://situs-anda.com/ — homepage Anda muncul.

Catatan: Jangan lupa atur aplikasi Pages menjadi default juga.

Step 1.6: Verifikasi

Buka homepage di browser baru (incognito) untuk pastikan tampil benar:

• Tampil tanpa error

• Header & footer IPS muncul (karena Suite Wrapper ON)

• Konten custom Anda di tengah

• Font Google Fonts loaded (cek dengan Inspector → Network)

Sampai di sini Anda sudah berhasil membuat homepage. Tapi masih sangat sederhana, hanya berisi teks selamat datang. Selanjutnya kita akan menambahkan beberapa block live.

Fase 2 — Live Data Integration

Bagian ini yang membuat homepage Anda hidup — menampilkan data real dari forum, artikel, dan files.

2.1 Strategi Konversi Bertahap

Urutan pekerjaan saya saat membuat homepage lalu.pro adalah per section.

Tapi saya hanya akan memandu Anda membuat stat counter dulu agar Anda melihat tampilannya dan memahmi alur kerjanya.

2.2 Stats Counter — Member Count

Kita perlu membuat sebuah block.

Path: AdminCP → Pages → Blocks → Create New Block → pilih "Manual HTML

Setelah klik tombol Next, isi form Details dan Content.

Title: Stat Members Count
Template Key: lalu_stat_members, (tanpa spasi)
Description: (boleh kosong)
Content (paste persis):

{expression="number_format( \IPS\Db::i()->select( 'COUNT(*)', 'core_members', array( 'completed=?', 1 ) )->first() )"}

Penjelasan kode:

• \IPS\Db::i() — akses database IPS

• select('COUNT(*)', 'core_members'...) — hitung jumlah member

• 'completed=?', 1 — hanya yang sudah verifikasi email

• number_format(...) — format dengan koma (2,847)

Klik Save. Klik Save sekali lagi (set view page).

2.3 Stats Counter — Topic Count

Sekarang buat block baru lagi, langkah-langkahnya seperti block member counter.

Isiannya:

Title: Stat Topics Count
Template Key: lalu_stat_topics
Content:

{{$count = \IPS\Db::i()->select( 'COUNT(*)', 'forums_topics', array( 'approved=?', 1 ) )->first();}}
{{if $count >= 1000}}
{expression="round( $count / 1000, 1 )"}<em>k</em>
{{else}}
{expression="number_format( $count )"}
{{endif}}

Penjelasan:

• Hitung topic yang approved (approved=1)

• Kalau ≥1000, tampilkan format 14k, 1.5k

• Kalau <1000, tampilkan angka penuh

2.4 Stats Counter — Article Count

Cek dulu Database ID Articles:

AdminCP → Pages → Databases
└─ Cari "Articles" → catat angka ID di kolom paling kiri

Misal ID = 1, maka tabel-nya adalah cms_custom_database_1.

Buat block dengan isian berikut:

Title: Stat Articles Count
Template Key: lalu_stat_articles
Content (ganti angka 1 dengan ID Anda):

{expression="number_format( \IPS\Db::i()->select( 'COUNT(*)', 'cms_custom_database_1', array( 'record_approved=?', 1 ) )->first() )"}

2.5 Pasang Stats Block di Homepage

Di Page Content homepage, di tempat yang sesuai:

<div class="hero-stats">
<div class="stat">
<div class="stat-num">{block="lalu_stat_members"}</div>
<div class="stat-label">Member aktif</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_topics"}</div>
<div class="stat-label">Diskusi</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_articles"}</div>
<div class="stat-label">Tutorial</div>
</div>
</div>

Anda bisa mencoba kode yang siap pakai berikut:

<style>
/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
--bg: #ebe7e0;
--ink: #181818;
--accent: #ff5c2b;
--muted: #6b6b6b;
--card: #ffffff;
--radius: 12px;
--gap: 1.5rem;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.6;
padding: 2rem 1rem;
}

/* HERO */
.hero {
max-width: 960px;
margin: 0 auto 3rem;
text-align: center;
padding: 3rem 1.5rem;
}

.hero h1 {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}

.hero h1::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: var(--accent);
margin: 1rem auto 0;
border-radius: 2px;
}

.hero p {
font-size: 1.1rem;
color: var(--muted);
max-width: 600px;
margin: 0 auto 2.5rem;
}

/* Hero stats */
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
max-width: 700px;
margin: 0 auto;
}

.stat {
background: var(--card);
padding: 1.5rem 1rem;
border-radius: var(--radius);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}

.stat:hover {
transform: translateY(-3px);
}

.stat-num {
font-size: 2rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
margin-bottom: 0.5rem;
}

.stat-label {
font-size: 0.9rem;
color: var(--muted);
}

/* Features section */
.features {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1rem;
}

/* Responsive */
@media (max-width: 600px) {
.hero-stats {
grid-template-columns: 1fr;
}

.hero {
padding: 2rem 1rem;
}
}
</style>

<!-- HERO SECTION -->
<section class="hero">
<h1>Selamat datang di komunitas kami</h1>
<p>Deskripsi singkat tentang komunitas Anda.</p>

<div class="hero-stats">
<div class="stat">
<div class="stat-num">{block="lalu_stat_members"}</div>
<div class="stat-label">Member aktif</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_topics"}</div>
<div class="stat-label">Diskusi</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_articles"}</div>
<div class="stat-label">Tutorial</div>
</div>
</div>
</section>

Save → Clear cache → Refresh.

Lihat hasilnya, harusnya seperti berikut:

Saya harap Anda memahami kerjanya dan bisa berkreasi.