Server Side Includes Directives: Panduan & Contoh Sintaks

Pengertian Server Side Includes (SSI) Directives

Server Side Includes (SSI) adalah bahasa scripting sisi server yang sederhana dan digunakan terutama untuk web statis. Dengan menggunakan SSI directives, pengembang web dapat menyisipkan isi suatu file ke dalam file HTML lainnya sebelum halaman tersebut dikirim ke browser pengunjung. Directive SSI ditulis langsung di dalam dokumen HTML menggunakan format komentar SGML khusus, sehingga server web akan memprosesnya secara langsung saat ada permintaan HTTP.

Penggunaan utama SSI meliputi penggabungan elemen tata letak yang berulang (seperti header dan footer), menampilkan tanggal atau waktu modifikasi file secara dinamis, serta menjalankan skrip eksternal atau variabel lingkungan server tanpa harus menggunakan bahasa pemrograman yang lebih berat seperti PHP.

Daftar Utama SSI Directives dan Fungsinya

SSI menggunakan format dasar <!--#directive parameter="value" -->. Berikut adalah tabel komparasi direktif SSI yang paling sering digunakan dalam konfigurasi web server:

Directive Parameter Umum Fungsi Utama
#include file, virtual Menyisipkan konten file lain (seperti header, footer, atau navigasi) ke dalam dokumen saat ini.
#echo var Menampilkan nilai dari variabel lingkungan server atau variabel SSI yang telah didefinisikan.
#set var, value Membuat atau menetapkan nilai baru pada variabel SSI kustom.
#config timefmt, sizefmt Mengatur format tampilan tanggal/waktu atau format ukuran file (bytes, kilobytes).
#flastmod file, virtual Menampilkan tanggal dan waktu terakhir kali file yang ditentukan dimodifikasi.
#fsize file, virtual Menampilkan ukuran file dari dokumen yang ditentukan sesuai format ukuran yang aktif.
#if / #elif / #else / #endif expr Membuat struktur kendali bersyarat (kondisional) untuk menampilkan konten secara dinamis.
#exec cgi, cmd Menjalankan skrip CGI atau perintah sistem operasi eksternal (sering dinonaktifkan demi keamanan).

Contoh Penerapan Sintaks SSI dalam Kode HTML

Berikut adalah contoh implementasi nyata dari beberapa direktif SSI yang disematkan di dalam dokumen HTML standar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Penggunaan SSI</title>
</head>
<body>
    <!-- Menyisipkan file header eksternal -->
    <!--#include virtual="/includes/header.html" -->

    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        
        <!-- Mengatur format tanggal dan menampilkannya -->
        <!--#config timefmt="A, %d %B %Y" -->
        <p>Hari ini adalah: <!--#echo var="DATE_LOCAL" --></p>

        <!-- Menampilkan tanggal modifikasi halaman ini -->
        <p>Halaman ini terakhir diperbarui pada: <!--#flastmod file="index.shtml" --></p>

        <!-- Kondisional sederhana berdasarkan variabel lingkungan -->
        <!--#if expr="$HTTP_USER_AGENT = /Mobile/" -->
            <p>Anda mengakses situs ini menggunakan perangkat seluler.</p>
        <!--#else -->
            <p>Anda mengakses situs ini menggunakan komputer desktop.</p>
        <!--#endif -->
    </main>

    <!-- Menyisipkan file footer eksternal -->
    <!--#include virtual="/includes/footer.html" -->
</body>
< /html>

Mengaktifkan SSI pada Web Server Apache

Secara default, beberapa konfigurasi web server tidak langsung memproses direktif SSI demi alasan performa. Pada server Apache, modul mod_include harus aktif dan direktif konfigurasi harus ditambahkan ke dalam berkas konfigurasi virtual host atau file .htaccess.

Langkah-langkah teknis untuk mengaktifkannya:

  1. Pastikan modul include aktif dengan menjalankan perintah terminal: sudo a2enmod include.
  2. Tambahkan baris konfigurasi berikut ke dalam blok direktori server Apache atau file .htaccess Anda:
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
    Options +Includes
    
  3. Simpan perubahan dan lakukan restart pada layanan web server Apache: sudo systemctl restart apache2.
  4. Ubah ekstensi file HTML Anda dari .html menjadi .shtml agar server mengenali dan memproses direktif SSI di dalamnya.

Troubleshooting Masalah Umum SSI

Jika direktif SSI tidak berjalan atau hanya memunculkan teks mentah di browser, periksa beberapa hal berikut:

  • Ekstensi File: Sebagian besar server dikonfigurasi untuk hanya memproses SSI pada file beresktensi .shtml, .shtm, atau .stm, bukan file standar .html kecuali diatur secara manual.
  • Izin Akses File (Permissions): Pastikan file yang dipanggil melalui parameter #include memiliki izin baca yang valid oleh pengguna web server (misalnya www-data).
  • Log Kesalahan Server: Periksa berkas error.log pada Apache atau Nginx untuk mendeteksi apakah ada kegagalan jalur file (file path) atau kesalahan sintaks dalam penulisan direktif.