Contoh Script SSI Shtml: Cara Praktis Modular Web

Server Side Includes (SSI) adalah bahasa scripting sisi server sederhana yang digunakan terutama pada World Wide Web. Perintah SSI memungkinkan Anda menyisipkan isi suatu file ke dalam file HTML atau SHTML lain tanpa harus menggunakan bahasa pemrograman berat seperti PHP atau ASP. Dengan menggunakan file beresolusi .shtml, server web akan memproses perintah SSI sebelum mengirimkan halaman tersebut ke browser pengguna.

Penggunaan SSI sangat ideal untuk menyatukan komponen situs web yang sering berulang—seperti header, footer, navigasi menu, atau informasi tanggal hak cipta—ke dalam banyak halaman sekaligus. Jika terjadi perubahan pada file header, Anda cukup mengubah satu file tersebut tanpa harus mengedit ratusan halaman web satu persatu.

Contoh Script SSI Dasar untuk Menyisipkan File (Include)

Perintah paling sering digunakan dalam SSI adalah #include. Perintah ini memungkinkan penyisipan file eksternal (baik berupa file teks, HTML, maupun script lain) ke dalam dokumen SHTML utama.

<!--#include virtual="/includes/header.html" -->
<h1>Selamat Datang di Situs Kami</h1>
<p>Ini adalah konten utama halaman web yang menggunakan format SHTML.</p>
<!--#include virtual="/includes/footer.html" -->

Penjelasan atribut pada script di atas:

• virtual: Menentukan jalur relatif berdasarkan direktori root server web Anda (diawali dengan garis miring/slash).
• file: Alternatif dari virtual, menggunakan jalur relatif berdasarkan lokasi file saat ini (misalnya file="header.html" atau file="../common/footer.html").

Contoh Script SSI untuk Menampilkan Variabel dan Tanggal

Selain menyisipkan file, SSI mampu menampilkan variabel lingkungan server dan tanggal modifikasi file secara dinamis menggunakan perintah #echo dan #flastmod.

<p>Alamat IP pengunjung: <!--#echo var="REMOTE_ADDR" --></p>
<p>Nama server web: <!--#echo var="SERVER_NAME" --></p>
<p>Halaman ini terakhir diperbarui pada: <!--#flastmod file="index.shtml" --></p>
<p>Tanggal hari ini: <!--#config timefmt="A, %d %B %Y" --><!--#echo var="DATE_LOCAL" --></p>

Tabel Referensi Perintah SSI Utama

Langkah Teknis Mengaktifkan SSI di Server Web

Agar script SSI dapat berjalan dengan sempurna, server web yang Anda gunakan harus dikonfigurasi untuk mengizinkan parsing SSI pada ekstensi file tertentu (biasanya .shtml, .html, atau .htm).

1. Konfigurasi pada Apache Web Server

Pastikan modul include_module aktif. Tambahkan baris berikut ke dalam file konfigurasi Apache (httpd.conf) atau melalui berkas .htaccess di direktori root situs Anda:

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

2. Konfigurasi pada Nginx Web Server

Nginx tidak mendukung SSI secara otomatis pada setiap blok lokasi kecuali diaktifkan secara eksplisit. Tambahkan baris ini di dalam blok server atau location pada file nginx.conf:

ssi on;
ssi_types text/html text/shtml;

Troubleshooting Masalah SSI yang Sering Terjadi

Jika script SSI Anda tidak tampil dan hanya menghasilkan halaman kosong atau error 500, periksa beberapa hal berikut:

• Ekstensi File Salah: Pastikan file utama Anda menggunakan ekstensi .shtml, bukan .html (kecuali server dikonfigurasi untuk mem-parsing file .html).
• Izin Akses File (Permissions): Pastikan file yang disisipkan (seperti header.html) memiliki izin baca (chmod 644) yang dapat diakses oleh proses web server.
• Jalur File (Path): Periksa kembali apakah penggunaan atribut virtual sudah diawali dengan garis miring atau apakah jalur file sudah sesuai dengan posisi direktori file penyerta.
• Log Error Server: Selalu cek file error_log pada Apache atau Nginx untuk melihat pesan spesifik mengapa perintah SSI gagal dieksekusi.