Contoh Penggunaan Server Side Includes (SSI) Lengkap

Server Side Includes (SSI) adalah mekanisme pengarah (directive) berbasis teks yang disisipkan ke dalam dokumen HTML dan dieksekusi langsung oleh server web sebelum halaman dikirimkan ke peramban pengguna. SSI ditulis dalam format komentar HTML khusus: <!--#perintah parameter="nilai" -->, sehingga jika server tidak mengaktifkan modul SSI, kode tersebut tidak akan merusak tampilan visual web (hanya dianggap komentar biasa).

Fungsi paling umum dari SSI adalah merakit elemen web modular seperti bilah navigasi, header, dan footer sekali buat untuk ribuan halaman statis tanpa memerlukan runtime berat seperti PHP atau Node.js.

Sintaks Dasar dan Contoh Implementasi Nyata SSI

Berikut adalah ragam contoh implementasi SSI yang paling sering dipakai dalam proyek web produksi, mulai dari pemisahan template hingga pencetakan variabel lingkungan.

1. Memecah Komponen Halaman (Header, Navigasi, Footer)

Daripada menuliskan kode navigasi yang sama di setiap file HTML, buat satu file komponen lalu panggil menggunakan perintah #include.

File: index.shtml

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Portal Dokumentasi Teknis</title>
</head>
<body>
    <!-- Memanggil Header Global -->
    <!--#include virtual="/includes/header.html" -->

    <main>
        <h1>Selamat Datang di Portal Utama</h1>
        <p>Halaman ini dirakit secara dinamis di tingkat web server.</p>
    </main>

    <!-- Memanggil Footer Global -->
    <!--#include virtual="/includes/footer.html" -->
</body>
</html>

Catatan Perbedaan Parameter:

• virtual="...": Jalur relatif terhadap document root web server (disarankan).
• file="...": Jalur relatif terhadap direktori file tempat SSI dieksekusi (tidak bisa mengakses direktori induk tingkat atas jika proteksi server aktif).

2. Menampilkan Tanggal dan Waktu Terkini Otomatis

SSI dapat memformat dan mencetak waktu server secara real-time. Anda bisa mengatur format tanggal menggunakan direktif #config dengan standar penanggalan C/POSIX strftime.

<!-- Konfigurasi format: Hari, Tanggal Bulan Tahun - Jam:Menit WIB -->
<!--#config timefmt="%A, %d %B %Y - %H:%M:%S" -->
<p>Waktu akses server: <!--#echo var="DATE_LOCAL" --></p>
<p>Zona waktu UTC: <!--#echo var="DATE_GMT" --></p>

3. Menampilkan Metadata Berkas (Ukuran dan Waktu Modifikasi)

Saat membuat halaman unduhan (download page), Anda tidak perlu menghitung ukuran file atau tanggal rilis secara manual.

<!-- Mengatur satuan ukuran file menjadi KB/MB (abbrev) atau byte langsung (bytes) -->
<!--#config sizefmt="abbrev" -->
<ul>
    <li>
        Unduh Patch Pembaruan v2.4 (ZIP): 
        Ukuran: <!--#fsize virtual="/downloads/patch-v2.4.zip" --> | 
        Diperbarui pada: <!--#flastmod virtual="/downloads/patch-v2.4.zip" -->
    </li>
</ul>

4. Membaca Variabel Lingkungan Klien dan Server

SSI dapat membaca data koneksi HTTP seperti alamat IP pengunjung, browser (User-Agent), hingga URL dokumen yang diakses.

<div class="network-info">
    <p>IP Pengunjung: <!--#echo var="REMOTE_ADDR" --></p>
    <p>Browser: <!--#echo var="HTTP_USER_AGENT" --></p>
    <p>File yang diakses: <!--#echo var="DOCUMENT_NAME" --> (<!--#echo var="DOCUMENT_URI" -->)</p>
</div>

5. Percabangan Logika (Kondisional If-Else)

Anda bisa mengatur tampilan elemen berdasarkan kondisi variabel sistem.

<!--#if expr="%{HTTPS} = 'on'" -->
    <p class="badge-secure">Koneksi Anda Terenkripsi Aman (SSL/TLS).</p>
<!--#elif expr="%{HTTP_USER_AGENT} =~ /Mobile/" -->
    <p class="badge-mobile">Anda Mengakses Melalui Perangkat Mobile.</p>
<!--#else -->
    <p class="badge-warning">Koneksi Standar Non-Mobile.</p>
<!--#endif -->

Daftar Perintah (Directives) SSI dan Fungsinya

Cara Mengaktifkan SSI di Web Server

Secara bawaan, server web modern menonaktifkan parsing SSI demi alasan performa. Untuk menggunakannya, konfigurasi server harus disesuaikan terlebih dahulu.

1. Konfigurasi pada Apache (via httpd.conf atau .htaccess)

Pastikan modul mod_include aktif di server Apache. Tambahkan instruksi berikut pada direktori yang dituju:

Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

# Jika ingin memproses file ekstensi .html standar:
AddOutputFilter INCLUDES .html

2. Konfigurasi pada Nginx

Pada blok server atau location di konfigurasi Nginx (nginx.conf atau virtual host file), aktifkan direktif SSI:

location / {
    ssi on;
    ssi_silent_errors off; # Tampilkan teks error jika include gagal saat debug
    ssi_types text/html;   # MIME types yang akan dipindai oleh parser SSI
}

Aturan Keamanan dan Performa Penggunaan SSI

• Hindari #exec cmd: Direktif ini membuka eksekusi shell server langsung dari file web. Jika pengguna luar bisa mengunggah file yang mengandung tag ini, sistem rentan terhadap Remote Code Execution (RCE). Gunakan Options +IncludesNOEXEC pada Apache untuk memblokirnya.
• Beban CPU: Setiap file yang diproses SSI mewajibkan server membaca dan memindai (parsing) seluruh isi teks HTML sebelum data dikirim. Jangan aktifkan INCLUDES secara global di seluruh ekstensi .html jika lalu lintas situs sangat padat; gunakan ekstensi khusus seperti .shtml agar server hanya memindai berkas yang benar-benar membutuhkan SSI.