SHTML (Server Side Includes HTML) adalah ekstensi file untuk halaman web yang berisi arahan khusus yang diproses oleh web server sebelum dikirimkan ke peramban (browser) pengunjung. Fungsi utama SHTML adalah memungkinkan pengembang web menyisipkan konten dari satu file ke dalam file HTML lainnya secara dinamis, seperti menyertakan elemen navigasi, header, footer, atau tanggal pembaruan terakhir, tanpa harus menulis ulang kode yang sama di setiap halaman.
Meskipun saat ini peran SHTML banyak digantikan oleh bahasa pemrograman sisi server yang lebih canggih seperti PHP, Python, atau Node.js, teknologi ini masih diandalkan karena kesederhanaannya pada server web seperti Apache dan Nginx tanpa memerlukan konfigurasi database yang rumit.
Bagaimana SHTML Bekerja?
Ketika seorang pengguna meminta halaman berformat .shtml, web server tidak langsung mengirimkan file mentah tersebut ke browser. Server akan memindai isi file tersebut untukmencari direktif khusus yang ditulis dalam format HTML comment, yang dikenal sebagai Server Side Includes (SSI). Setelah server mengeksekusi perintah SSI tersebut—misalnya menggabungkan file footer.html—hasil akhirnya digabungkan menjadi satu dokumen HTML standar baru kemudian dikirim ke browser.
| Fitur | HTML Biasa (.html) | SHTML (.shtml) |
|---|---|---|
| Pemrosesan Server | Tidak ada, langsung dikirim ke browser. | Dipindai dan diproses oleh server melalui SSI. |
| Penggunaan Ulang Kode | Harus salin-tempel kode (Manual). | Otomatis menggunakan perintah #include. |
| Dukungan Database | Tidak ada. | Terbatas (biasanya hanya variabel server dan file lokal). |
| Kompleksitas | Sangat rendah. | Rendah (membutuhkan modul SSI aktif di server). |
Perintah Dasar Server Side Includes (SSI)
Dalam file SHTML, Anda menggunakan sintaks khusus berbasis komentar HTML untuk menjalankan fungsi tertentu. Berikut adalah beberapa perintah SSI yang paling sering digunakan:
1. Menyisipkan File Lain (#include)
Perintah ini digunakan untuk memasukkan konten dari file eksternal ke dalam halaman SHTML:
<!--#include virtual="/includes/header.html" -->2. Menampilkan Tanggal dan Waktu (#echo var="DATE_LOCAL")
Digunakan untuk menampilkan informasi waktu saat halaman dimuat oleh server:
Hari ini tanggal: <!--#echo var="DATE_LOCAL" -->3. Menampilkan Variabel Lingkungan Server (#printenv)
Digunakan untuk menampilkan informasi mengenai environment server atau data request dari browser pengunjung.
<!--#printenv -->Kelebihan dan Kekurangan Penggunaan SHTML
Sebelum memutuskan menggunakan ekstensi .shtml pada situs web Anda, penting untuk memahami batasan serta keunggulannya:
- Kelebihan: Efisiensi pemeliharaan kode website statis, tidak memerlukan parser yang berat seperti PHP, sangat cepat untuk situs web berukuran kecil hingga menengah yang tidak membutuhkan database relasional.
- Kekurangan: Meningkatkan sedikit beban CPU server karena setiap file harus dipindai terlebih dahulu, kurang fleksibel dibandingkan bahasa pemrograman modern, dan sulit menangani logika kompleks (seperti perulangan atau validasi form tingkat lanjut).
Cara Mengaktifkan SSI di Web Server Apache
Secara default, beberapa web server mungkin belum mengaktifkan modul SSI untuk file .shtml. Jika Anda menggunakan web server Apache, pastikan modul include_module sudah aktif, lalu tambahkan konfigurasi berikut pada file httpd.conf atau .htaccess Anda:
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
Options +IncludesDengan konfigurasi di atas, web server akan mengenali file dengan ekstensi .shtml dan memproses perintah SSI di dalamnya sebelum merendernya ke pengguna.