💡 ULASAN & REFERENSI • DIPERBARUI: 20 October 2026 • REDAKSI AZWINN

Tutorial Server Side Includes (SSI): Cara & Sintaks HTML

Server Side Includes (SSI) adalah bahasa scripting sisi server sederhana yang digunakan terutama untuk menyertakan file eksternal ke dalam halaman web dan menampilkan informasi dinamis tanpa memerlukan bahasa pemrograman yang kompleks seperti PHP atau Python. Dengan menyisipkan arahan khusus (directives) berbasis komentar HTML langsung ke dalam file beresktensi .shtml atau melalui konfigurasi server web, pengembang dapat dengan mudah mengelola komponen berulang seperti header, footer, dan navigasi situs web dari satu file pusat.

Prasyarat dan Pengaktifan SSI di Web Server

Sebelum menggunakan SSI, web server yang Anda gunakan (seperti Apache HTTP Server atau Nginx) harus dikonfigurasi untuk mengizinkan dan memproses perintah SSI. Secara default, server sering kali menonaktifkan fitur ini demi alasan performa dan keamanan.

1. Konfigurasi pada Apache Web Server

Untuk mengaktifkan SSI di server Apache, pastikan modul include_module aktif. Anda perlu menambahkan direktif berikut ke dalam berkas konfigurasi virtual host atau berkas .htaccess Anda:

AddType text/html .shtml
AddHandler server-parsed .shtml
Options +Includes

2. Konfigurasi pada Nginx Web Server

Nginx memerlukan pengaktifan modul SSI secara eksplisit di dalam blok server atau blok lokasi konfigurasi nginx.conf:

location / {
    ssi on;
    ssi_types text/html text/plain;
}

Sintaks Dasar Server Side Includes

Arahan SSI ditulis menggunakan sintaks komentar HTML khusus yang diawali dengan <!--# dan diakhiri dengan -->. Parameter yang umum digunakan adalah virtual (untuk jalur relatif terhadap root web) atau file (untuk jalur relatif terhadap direktori file saat ini).

Tabel Perintah Utama SSI

Perintah SSI Sintaks Contoh Fungsi Utama
Include <!--#include virtual="/header.html" --> Menyisipkan isi file lain ke dalam dokumen saat ini.
Echo <!--#echo var="DATE_LOCAL" --> Menampilkan nilai variabel server (misalnya tanggal atau alamat IP).
Fsize <!--#fsize file="download.zip" --> Menampilkan ukuran file tertentu secara otomatis.
Flastmod <!--#flastmod file="index.html" --> Menampilkan tanggal modifikasi terakhir dari suatu file.
Set <!--#set var="title" value="Beranda" --> Menetapkan nilai variabel baru untuk digunakan di halaman.

Contoh Implementasi Praktis

Berikut adalah contoh implementasi file halaman utama berformat index.shtml yang memanggil komponen header dan footer secara terpusat:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title><!--#echo var="title" --></title>
</head>
<body>
    <!--#include virtual="/partials/header.html" -->
    
    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        <p>Halaman ini menggunakan Server Side Includes untuk manajemen layout.</p>
        <p>Terakhir diperbarui pada: <!--#flastmod virtual="index.shtml" --></p>
    </main>

    <!--#include virtual="/partials/footer.html" -->
</body>
</html>

Troubleshooting dan Tips Lapangan

Jika arahan SSI tidak berfungsi dan kode komentar muncul begitu saja di browser, periksa beberapa hal berikut:

  • Ekstensi File: Pastikan file Anda menggunakan ekstensi .shtml (bukan standar .html), kecuali Anda telah mengonfigurasi server untuk mem-parsing file .html biasa (yang dapat membebani kinerja server).
  • Izin File (Permissions): Pastikan file yang akan di-include memiliki izin baca yang valid oleh proses web server (www-data, apache, atau nginx).
  • Log Error: Periksa berkas error.log pada server Apache atau Nginx untuk mendeteksi pesan kesalahan spesifik seperti child process failed to exec atau file does not exist.

🔍 Orang Lain Juga Mencari Ini