Cara Kerja Server Side Includes SHTML & Contoh Penggunaannya

Server Side Includes (SSI) adalah bahasa skrip sisi server sederhana yang digunakan untuk menyisipkan isi suatu file ke dalam file HTML lain sebelum disajikan ke peramban pengguna. File yang menggunakan mekanisme ini umumnya memiliki ekstensi .shtml atau .shtm. Ketika permintaan masuk, web server seperti Apache atau NGINX memindai direktif khusus di dalam file tersebut, menggabungkan konten yang dimaksud (seperti header, footer, atau tanggal), lalu mengirimkan hasilnya yang sudah utuh ke klien.

Mekanisme ini sangat efisien untuk situs web statis berukuran menengah yang memerlukan modularitas tanpa harus mengimplementasikan bahasa pemrograman sisi server yang kompleks seperti PHP, Python, atau Node.js. Dengan SSI, pengembang cukup mengubah satu file penampung (misalnya footer.html), dan perubahan tersebut akan otomatis memengaruhi seluruh halaman .shtml yang memuatnya.

Sintaks Dasar Direktif SSI

SSI bekerja dengan membaca instruksi khusus yang ditulis di dalam komentar HTML standar. Format dasar direktif SSI adalah:

<!--#command parameter="value" -->

Spasi setelah tanda seru dan sebelum tanda penutup sangat krusial agar web server mengenali kode tersebut sebagai perintah SSI, bukan sekadar komentar HTML biasa.

Tabel Perintah Utama Server Side Includes (SSI)

Langkah-Langkah Implementasi SSI di Web Server

Agar file .shtml dapat diproses dengan benar oleh server, beberapa konfigurasi dasar harus dipastikan aktif pada lingkungan server web Anda.

1. Mengaktifkan Modul SSI di Apache

Pada peladen web Apache, modul include harus dimuat. Anda dapat mengaktifkannya melalui terminal Linux dengan perintah:

sudo a2enmod include
sudo systemctl restart apache2

2. Konfigurasi Handler untuk Ekstensi .SHTML

Tambahkan baris konfigurasi berikut ke dalam berkas httpd.conf atau berkas .htaccess di direktori akar web Anda agar peladen mengenali dan memproses direktif SSI pada file dengan ekstensi .shtml:

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

3. Menulis File SHTML Pertama

Buat sebuah file bernama index.shtml dan masukkan kode berikut untuk menguji penyisipan komponen luar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Halaman SHTML<скус/title>
</head>
<body>
    <!--#include virtual="header.html" -->
    
    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        <p>Halaman ini diperbarui terakhir pada: <!--#flastmod virtual="index.shtml" --></p>
    </main>

    <!--#include virtual="footer.html" -->
</body>
</html>

Kelebihan dan Kekurangan Penggunaan SSI

Meskipun kalah populer dibandingkan kerangka kerja modern atau sistem manajemen konten (CMS), SSI tetap memiliki tempat khusus karena karakteristik kinerjanya yang unik.

• Kecepatan Eksekusi: Karena tidak melibatkan penguraian basis data (database query) atau bahasa pemrosesan yang berat, beban CPU server sangat rendah.
• Kesederhanaan: Tidak membutuhkan instalasi dependensi atau pustaka tambahan yang rumit.
• Keterbatasan Fungsionalitas: Tidak mendukung logika percabangan yang rumit, manajemen sesi pengguna, atau pengelolaan basis data relasional.
• Keamanan: Penggunaan perintah #exec untuk menjalankan skrip sistem eksternal dapat menimbulkan celah keamanan jika tidak dibatasi dengan ketat oleh administrator server.

Penyelesaian Masalah (Troubleshooting) Umum

Jika file .shtml Anda menampilkan teks direktif secara mentah (artinya kode <!--#include ... --> muncul di peramban tanpa diproses), periksa dua hal utama berikut: pastikan direktif Options +Includes sudah diaktifkan di konfigurasi peladen, dan pastikan peladen web Anda memang membaca ekstensi file tersebut melalui handler yang tepat.