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

Contoh Script SHTML: SSI dan Cara Penerapannya

SHTML adalah ekstensi file untuk halaman web yang menggunakan teknologi SSI (Server Side Includes). Teknologi ini memungkinkan pengembang web untuk menyisipkan konten dari satu file ke file HTML lainnya secara dinamis di sisi server, tanpa memerlukan bahasa pemrograman yang kompleks seperti PHP atau ASP.

Penggunaan utama SHTML adalah untuk menjaga konsistensi elemen global seperti navigasi menu atas (header), bagian kaki halaman (footer), dan sidebar di seluruh halaman situs web statis. Jika Anda perlu mengubah nomor telepon di footer, Anda hanya perlu mengubah satu file sumber saja.

Contoh Script SHTML untuk Header dan Footer

Berikut adalah contoh implementasi dasar menggunakan perintah #include untuk menyertakan file luar ke dalam dokumen SHTML utama.

1. File Utama: index.shtml

<!--#config timefmt="A, d F Y" -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Utama SHTML</title>
</head>
<body>
    <!-- Menyisipkan Header -->
    <!--#include virtual="/includes/header.html" -->

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

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

2. File Komponen: /includes/header.html

<header style="background: #333; color: #fff; padding: 10px;">
    <nav>
        <a href="/index.shtml" style="color: #fff; margin-right: 15px;">Beranda</a>
        <a href="/about.shtml" style="color: #fff; margin-right: 15px;">Tentang Kami</a>
        <a href="/contact.shtml" style="color: #fff;">Kontak</a>
    </nav>
</header>

3. File Komponen: /includes/footer.html

<footer style="background: #f1f1f1; padding: 10px; margin-top: 20px;">
    <p>&copy; 2026 Perusahaan Anda. Hak cipta dilindungi undang-undang.</p>
    <p>Waktu server saat ini: <!--#echo var="DATE_LOCAL" --></p>
</footer>

Tabel Perintah SSI (Server Side Includes) Populer

Berikut adalah ringkasan direktif atau perintah SSI yang sering digunakan dalam script SHTML beserta fungsinya:

Perintah SSI Atribut Fungsi Utama
#include virtual / file Menyisipkan isi file lain (seperti header, footer, atau banner) ke dalam dokumen.
#echo var Menampilkan nilai variabel lingkungan server (misal: IP pengunjung, nama file).
#flastmod file / virtual Menampilkan tanggal dan waktu terakhir kali file tersebut dimodifikasi.
#fsize file / virtual Menampilkan ukuran file tertentu dalam format byte, kilobyte, atau megabyte.
#config timefmt / sizefmt Mengatur format tampilan tanggal, waktu, atau ukuran file pada halaman.

Cara Mengaktifkan SHTML di Server Web

Agar script SHTML dapat berjalan dengan baik, server web Anda harus dikonfigurasi untuk memproses modul SSI. Pada server Apache, pastikan modul include_module aktif dan tambahkan konfigurasi berikut pada file .htaccess atau konfigurasi virtual host:

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

Jika menggunakan Nginx, SSI tidak aktif secara default dan harus diaktifkan pada blok server atau lokasi dengan perintah ssi on;.

Troubleshooting SHTML yang Sering Terjadi

Jika script SHTML Anda tidak menampilkan hasil sisipan atau justru menghasilkan pesan kesalahan server (Internal Server Error), periksa beberapa hal berikut:

  • Ekstensi File: Pastikan file Anda berformat .shtml, bukan .html biasa. Sebagian besar server tidak memproses SSI pada file berformat .html demi efisiensi kinerja.
  • Izin File (Permission): Pastikan file yang disisipkan (seperti header.html) memiliki izin baca yang benar di server (umumnya 644).
  • Path File SSI: Gunakan atribut virtual dengan path absolut dari root web (misal: /includes/header.html) untuk menghindari kesalahan direktori relatif.

🔍 Orang Lain Juga Mencari Ini