Apache Server Side Includes Example: Panduan & Kode SSI

Server Side Includes (SSI) adalah direktif sederhana yang ditempatkan di dalam halaman web untuk menginstruksikan server web (seperti Apache HTTP Server) agar mengeksekusi konten dinamis secara langsung saat halaman dimuat. SSI sangat ideal untuk situs web statis yang memerlukan komponen berulang—seperti header, footer, atau menu navigasi—tanpa harus menggunakan bahasa pemrograman backend yang kompleks seperti PHP atau Python.

Untuk mengaktifkan SSI di server Apache, pastikan modul mod_include sudah aktif dan konfigurasi direktori Anda mengizinkan eksekusi SSI menggunakan opsi Includes. Berikut adalah konfigurasi dasar pada berkas httpd.conf atau .htaccess:

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

Contoh Penggunaan Dasar Apache SSI

Setelah konfigurasi aktif, Anda dapat menggunakan berbagai direktif SSI dengan sintaks tag khusus yang diawali dengan <!--# dan diakhiri dengan -->. Berikut adalah tabel direktif utama SSI yang paling sering digunakan dalam pengembangan web.

Direktif SSI Fungsi Utama Contoh Penggunaan
include Menyisipkan isi berkas eksternal (header/footer). <!--#include virtual="/header.html" -->
echo Menampilkan variabel server atau lingkungan. <!--#echo var="DATE_LOCAL" -->
flastmod Menampilkan waktu modifikasi terakhir suatu berkas. <!--#flastmod file="index.shtml" -->
set Menetapkan nilai ke variabel yang ditentukan pengguna. <!--#set var="judul" value="Beranda" -->

Implementasi Nyata pada Berkas SHTML

Berikut adalah contoh kode lengkap dalam berkas berformat .shtml yang menggabungkan penyisipan header, penampilan variabel waktu, dan penyisipan footer secara modular.

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

    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        <p>Halaman ini diperbarui terakhir pada: <!--#flastmod virtual="index.shtml" --></p>
        <p>Alamat IP pengunjung: <!--#echo var="REMOTE_ADDR" --></p>
    </main>

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

Langkah-Langkah Troubleshooting SSI di Apache

Jika direktif SSI tidak berfungsi dan teks tag muncul mentah di browser, lakukan pemeriksaan berikut secara berurutan:

  1. Periksa Ekstensi Berkas: Secara default, Apache hanya memproses SSI pada berkas dengan ekstensi .shtml. Jika ingin menggunakan ekstensi .html, tambahkan baris AddOutputFilter INCLUDES .html ke dalam konfigurasi server.
  2. Verifikasi Modul Aktif: Pastikan modul include_module (mod_include.so) tidak berada dalam kondisi non-aktif (comment) pada berkas konfigurasi utama Apache.
  3. Periksa Log Error: Periksa berkas error.log Apache untuk mendeteksi masalah izin akses berkas (permissions) yang disisipkan melalui direktif include.