ðŸ’Ą ULASAN & REFERENSI â€Ē DIPERBARUI: 23 October 2026 â€Ē REDAKSI AZWINN

Server Side Includes (SSI) Syntax & Panduan Lengkap

Server Side Includes (SSI) adalah bahasa arahan (directive) sisi server yang sederhana yang digunakan untuk menyisipkan isi suatu file ke dalam file HTML lain di web server sebelum halaman tersebut dikirimkan ke browser. Sintaks dasar SSI menggunakan format HTML comment khusus yang diawali dengan tag <!--# dan diakhiri dengan -->. Penggunaan SSI sangat efektif untuk mengelola elemen berulang seperti header, footer, atau menu navigasi tanpa harus menggunakan bahasa pemrograman backend yang kompleks seperti PHP atau Node.js.

Dalam praktiknya, server web seperti Apache harus dikonfigurasi agar mengenali file dengan ekstensi tertentu (biasanya .shtml) untuk memproses arahan SSI, atau diaktifkan melalui konfigurasi AddType dan Includes pada file .htaccess. Gagal mengaktifkan modul SSI di tingkat server akan menyebabkan instruksi tampil sebagai komentar HTML biasa atau diabaikan sepenuhnya oleh browser.

Sintaks Dasar Server Side Includes (SSI)

Format umum dari sebuah arahan SSI mengikuti struktur direktif dan atribut yang mendefinisikan aksi apa yang harus dilakukan oleh server. Berikut adalah format penulisan dasar:

<!--#direktif atribut="nilai" -->

Spasi di dalam tanda kurung siku sangat krusial. Tag pembuka harus persis <!--# tanpa spasi antara tanda seru dan tanda pagar, serta wajib diakhiri dengan spasi sebelum -->.

Tabel Referensi Direktif Utama SSI

Direktif Atribut Utama Fungsi Utama Contoh Penggunaan
include file atau virtual Menyisipkan isi file eksternal ke dalam dokumen saat ini. <!--#include virtual="/footer.html" -->
echo var Menampilkan nilai dari variabel server atau lingkungan (environment). <!--#echo var="DATE_LOCAL" -->
set var, value Membuat atau mendefinisikan nilai variabel baru. <!--#set var="title" value="Beranda" -->
flastmod file atau virtual Menampilkan tanggal dan waktu modifikasi terakhir dari suatu file. <!--#flastmod file="index.html" -->
fsize file atau virtual Menampilkan ukuran file dalam byte, kilobyte, atau megabyte. <!--#fsize file="download.zip" -->
exec cmd atau cgi Menjalankan perintah cgi atau perintah shell sistem operasi (butuh izin khusus). <!--#exec cgi="/cgi-bin/counter.cgi" -->

Contoh Penerapan Kode SSI

Berikut adalah contoh implementasi nyata penggunaan SSI untuk menyisipkan komponen header dan menampilkan tanggal modifikasi halaman secara otomatis:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title><!--#echo var="document_title" --></title>
</head>
<body>
    
    <!-- Menyisipkan file header navigasi -->
    <!--#include virtual="/includes/header.html" -->
    
    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        <p>Halaman ini menggunakan teknologi Server Side Includes.</p>
    </main>

    <footer>
        <p>Terakhir diperbarui: <!--#flastmod virtual="$DOCUMENT_URI" --></p>
        <!-- Menyisipkan file footer -->
        <!--#include virtual="/includes/footer.html" -->
    </footer>

<åĪš/body>
</html>

Konfigurasi Server untuk SSI

Agar sintaks di atas dapat dieksekusi dengan benar oleh web server Apache, pastikan modul include aktif. Pada file konfigurasi Apache (seperti httpd.conf atau blok direktori virtual host), tambahkan opsi Includes pada direktif Options:

<Directory "/var/www/html">
    Options +Includes
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
</Directory>

Jika Anda menggunakan file .htaccess di direktori root web, Anda dapat menuliskan baris berikut agar server memproses file berformat .html dengan SSI (meskipun ini dapat berdampak pada performa karena server harus memindai setiap file HTML):

AddType text/html .html
AddOutputFilter INCLUDES .html

Troubleshooting Masalah SSI

Jika sintaks SSI yang Anda tuliskan muncul mentah-mentah di browser (misalnya teks <!--#include ... --> tetap terlihat saat fungsi View Source dibuka), periksa beberapa hal berikut:

  • Ekstensi File: Pastikan server dikonfigurasi untuk memproses file berformat .shtml atau pastikan filter INCLUDES aktif untuk ekstensi .html.
  • Izin File (Permission): Pastikan file yang disisipkan (misalnya header.html) memiliki izin baca (readable) yang dapat diakses oleh proses web server.
  • Kesalahan Jalur (Path): Perhatikan perbedaan atribut file dan virtual. Atribut file menggunakan path relatif terhadap direktori saat ini, sedangkan virtual menggunakan path absolut yang dimulai dari root dokumen server.

🔍 Orang Lain Juga Mencari Ini