Panduan lengkap berdasarkan pengalaman membangun lalu.pro — dengan Invision Community 5.0.18.
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:
Tipe | Kapan Dipakai | Tutorial Ini Pakai? |
|---|---|---|
Page Builder | Visual drag-and-drop dengan widget | Tidak |
Manual | HTML/template tag custom penuh | Ya |
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:
Tipe | Fungsi | Contoh Penggunaan |
|---|---|---|
Plugin | Feed otomatis dari aplikasi IPS | Topic Feed, Record Feed, File Feed |
Manual HTML | HTML + expression tag + PHP inline | Counter, custom widget |
Editor | Konten statis pakai WYSIWYG editor | Welcome message, announcement |
Template | Reusable dengan input fields | Multi-purpose container |
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:
Field | Isi dengan | Catatan |
|---|---|---|
Page Name | Homepage | Display name internal |
Page Filename | home | URL slug (tanpa ekstensi), jika dikosongkan otomatis namanya mengikuti isian Page Name |
Page Folder | Select | Biarkan kosong untuk root, centang No Parent |
Use suite HTML wrapper | ON (centang) | Critical setting |
Page Title | Komunitas Blogger Indonesia | Untuk SEO |
Content | Kode HTML | Lihat step 1.3 |
Meta Description | (deskripsi singkat) | Untuk SEO |
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.
Klik tab Content, secara default terpilih editor Invision HTML Template.
Salin kerangka HTML pada langkah 1.3 di atas.
Paste di kolom yang tersedia.
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.
Urutan | Section | Tipe Block | Tingkat Kesulitan |
|---|---|---|---|
1 | Stats counter (member, topic, artikel) | Manual HTML | Mudah |
2 | Latest articles | Plugin (Record Feed) | Sedang |
3 | Hot topics | Plugin (Topic Feed) | Sedang |
4 | Latest files (Download) | Plugin (File Feed) | Sedang |
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 IPSselect('COUNT(*)', 'core_members'...)— hitung jumlah member'completed=?', 1— hanya yang sudah verifikasi emailnumber_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.
Bagaimana pendapat Anda mengenai topik ini? Mari bagikan perspektif Anda di bawah!
Recommended Comments