Contoh Sintaks SSI (Server Side Includes) Lengkap dan Praktis

Server Side Includes atau yang biasa disingkat SSI adalah bahasa direktif sederhana yang dieksekusi oleh server web sebelum halaman dikirimkan ke peramban pengguna. Sintaks SSI sangat berguna untuk menyisipkan konten yang sering berulang seperti header, footer, atau navigasi ke dalam banyak dokumen HTML tanpa harus melakukan penyuntingan manual pada setiap halaman. Penggunaan utama SSI melibatkan direktif dasar seperti #include, #echo, dan #flastmod yang dipanggil melalui komentar khusus HTML agar dikenali oleh modul server Apache atau Nginx.

Agar modul SSI dapat berjalan dengan baik di server web seperti Apache, ekstensi file yang digunakan biasanya harus diubah dari .html menjadi .shtml, atau server dikonfigurasi agar memparsing file HTML biasa untuk direktif SSI. Walaupun teknik ini sudah cukup senior jika dibandingkan dengan kerangka kerja modern berbasis Node.js atau PHP, SSI tetap menjadi solusi paling ringan, cepat, dan minim sumber daya untuk situs web statis skala kecil hingga menengah yang membutuhkan modularitas tinggi tanpa kompleksitas basis data.

Sintaks Dasar Server Side Includes

Struktur dasar penulisan sintaks SSI menggunakan format komentar HTML standar yang diawali dengan tanda pagar dan nama direktif, diikuti oleh parameter atribut. Format umumnya adalah <!--#direktif atribut="nilai" -->. Spasi di dalam tanda kurung siku sangat krusial agar server dapat mengenali perintah tersebut sebagai instruksi SSI dan bukan sekadar komentar biasa yang diabaikan oleh mesin rendering.

Direktif yang paling sering digunakan dalam pengembangan web harian adalah #include untuk memuat file eksternal. Terdapat dua jenis metode pemanggilan file dalam parameter direktif ini, yaitu menggunakan atribut virtual untuk jalur relatif terhadap direktori web root, atau atribut file untuk jalur relatif terhadap direktori file yang sedang aktif saat ini. Pemilihan metode ini sangat menentukan keberhasilan pemuatan file agar terhindar dari galat berkas tidak ditemukan di dalam sistem direktori server.

Contoh Implementasi Menyisipkan Header dan Footer

Penerapan paling klasik dari SSI adalah pemisahan komponen navigasi situs web menjadi file terpisah seperti header.shtml dan footer.shtml. Dengan memisahkan komponen ini, pengembang web cukup mengubah satu file pusat apabila ingin memperbarui tautan menu navigasi atau mengubah hak cipta di bagian bawah situs tanpa perlu membuka ratusan halaman dokumen satu per satu secara manual.

Berikut adalah contoh implementasi nyata pada file utama dokumen web:

<!--#include virtual="/templates/header.shtml" -->
<main>
    <h1>Selamat Datang di Situs Kami<h1>
    <p>Halaman ini menggunakan modul Server Side Includes untuk modularitas.<p>
</main>
<!--#include virtual="/templates/footer.shtml" -->

Pastikan server web lokal atau server produksi Anda telah mengaktifkan modul terkait, seperti mod_include pada Apache, agar baris kode di atas diterjemahkan dengan sempurna sebelum dikirimkan ke perangkat pengunjung.

Menampilkan Variabel Lingkungan dan Tanggal Dinamis

Selain menyisipkan file, SSI sangat handal dalam menampilkan informasi dinamis ringan seperti waktu saat ini, alamat IP pengunjung, nama file yang sedang diakses, hingga versi perangkat lunak server yang digunakan. Direktif #echo dipasangkan dengan variabel bawaan server untuk mencetak informasi tersebut secara instan tanpa memerlukan bahasa pemrograman sisi server yang berat.

Variabel yang sering dipakai antara lain DATE_LOCAL untuk menampilkan tanggal dan waktu lokal, LAST_MODIFIED untuk menunjukkan kapan terakhir kali dokumen tersebut disunting, serta DOCUMENT_URI untuk melacak jalur URL halaman yang sedang dibuka oleh pengguna saat itu.

Contoh penulisan untuk menampilkan tanggal modifikasi terakhir pada halaman:

<p>Halaman ini terakhir diperbarui pada: <!--#flastmod virtual="index.shtml" --><p>
<p>Alamat IP Anda adalah: <!--#echo var="REMOTE_ADDR" --><p>

Penggunaan variabel ini memberikan kesan dinamis pada situs web statis murni tanpa membebani kinerja peladen dengan eksekusi kode interpreter yang kompleks.

Konfigurasi Server untuk Mengaktifkan SSI

Sintaks SSI tidak akan berfungsi jika peladen web belum dikonfigurasi untuk memproses direktif tersebut. Pada peladen Apache, Anda perlu memastikan bahwa konfigurasi virtual host atau berkas .htaccess Anda mengizinkan eksekusi SSI melalui perintah Options +Includes serta mendefinisikan penangan handler untuk ekstensi file tertentu.

Contoh baris konfigurasi yang harus ditambahkan ke dalam berkas .htaccess agar peladen mengenali file dengan ekstensi .shtml adalah sebagai berikut:

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

Apabila Anda ingin peladen memproses SSI langsung di dalam berkas standar berformat .html tanpa harus mengganti ekstensi file, gunakan perintah AddHandler server-parsed .html, meskipun cara ini dapat sedikit memengaruhi kecepatan pemrosesan peladen karena setiap file HTML wajib diurai terlebih dahulu oleh modul peladen.