💡 ULASAN & REFERENSI • DIPERBARUI: 24 October 2026 • REDAKSI AZWINN

Tutorial SHTML: Cara Menggunakan Server Side Includes

SHTML adalah ekstensi file untuk dokumen HTML yang menyertakan perintah tambahan bernama Server Side Includes (SSI). Melalui SHTML, pengembang web dapat menyisipkan elemen yang sama secara berulang—seperti menu navigasi, header, atau footer—ke dalam banyak halaman tanpa harus menulis ulang kode yang sama di setiap file.

Meskipun teknologi ini tergolong klasik dibandingkan kerangka kerja modern berbasis Node.js atau PHP, SHTML tetap sangat efisien dan ringan untuk mengelola situs web statis berskala kecil hingga menengah yang berjalan di peladen web seperti Apache atau Nginx.

Dasar-Dasar Sintaks SHTML dan SSI

Perintah SSI ditulis di dalam komentar HTML khusus yang akan diproses oleh peladen web sebelum dikirim ke peramban pengguna. Format dasar penulisan perintah SSI adalah:

<!--#perintah parameter="nilai" -->

Peramban pengguna tidak akan melihat kode asli SSI ini karena peladen web telah mengeksekusinya dan menggantinya dengan hasil keluaran (output) yang sesuai.

Tabel Perintah Utama Server Side Includes (SSI)

Perintah SSI Fungsi Utama Contoh Penggunaan
include Menyisipkan isi file eksternal (header, footer, teks) ke dalam halaman. <!--#include virtual="/header.html" -->
echo Menampilkan variabel peladen, seperti tanggal atau alamat IP. <!--#echo var="DATE_LOCAL" -->
fsize Menampilkan ukuran file tertentu. <!--#fsize virtual="/downloads/file.zip" -->
flastmod Menampilkan tanggal modifikasi terakhir dari suatu file. <!--#flastmod virtual="index.html" -->
set Membuat atau menetapkan nilai pada variabel kustom. <!--#set var="judul" value="Beranda" -->

Langkah-Langkah Implementasi SHTML

Untuk mulai menggunakan SHTML di peladen web Anda, ikuti langkah-langkah teknis berikut:

  1. Aktifkan Modul SSI di Peladen: Jika menggunakan Apache, pastikan modul include_module aktif. Tambahkan baris konfigurasi AddType text/html .shtml dan AddOutputFilter INCLUDES .shtml pada file httpd.conf atau .htaccess.
  2. Ubah Ekstensi File: Ubah file web Anda dari .html menjadi .shtml (contoh: index.shtml, about.shtml).
  3. Buat File Komponen: Buat file terpisah untuk bagian yang berulang, misalnya footer.html yang berisi informasi hak cipta.
  4. Sisipkan Kode Include: Panggil file komponen tersebut di dalam halaman SHTML menggunakan perintah include.

Contoh Kode Implementasi Nyata

Berikut adalah contoh struktur file index.shtml yang menggunakan SSI untuk menyertakan navigasi atas dan footer bawah:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Utama SHTML</title>
</head>
<body>

    <!-- Menyisipkan menu navigasi atas -->
    <!--#include virtual="/includes/navigasi.html" -->

    <main>
        <h1>Selamat Datang di Situs Kami</h1>
        <p>Halaman ini menggunakan teknologi Server Side Includes.</p>
        <p>Terakhir diperbarui pada: <!--#flastmod virtual="index.shtml" --></p>
    </main>

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

</body>
</html>

Troubleshooting dan Tips Lapangan

Jika perintah SHTML Anda tidak berfungsi dan teks komentar tetap muncul di peramban, periksa beberapa hal berikut:

  • Ekstensi File Salah: Pastikan file Anda menggunakan ekstensi .shtml, bukan .html. Peladen biasanya mengabaikan perintah SSI pada file berformat .html standar demi performa.
  • Konfigurasi Peladen: Pastikan direktori tempat file berada memiliki izin akses SSI yang diaktifkan melalui arahan Options +Includes di Apache.
  • Jalur File (Path): Gunakan parameter virtual untuk jalur relatif terhadap direktori web root (dimulai dengan garis miring /) atau parameter file untuk jalur relatif terhadap direktori file saat ini.

🔍 Orang Lain Juga Mencari Ini