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.

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.