Cara Include File SHTML di Web dengan SSI (Server Side Includes)

Cara paling efisien untuk menyertakan (include) file berulang seperti header, footer, atau navigasi pada situs web statis adalah dengan memanfaatkan teknologi Server Side Includes (SSI) dan mengubah ekstensi file dari .html menjadi .shtml. Dengan metode ini, pemeliharaan situs web menjadi jauh lebih mudah karena perubahan pada satu file modular akan otomatis diterapkan ke seluruh halaman yang mengarah kepadanya.

Untuk mengimplementasikan fungsi include file SHTML pada server web, Anda memerlukan dukungan modul server aktif (seperti mod_include pada Apache) serta pemahaman mengenai sintaks direktif SSI yang benar. Berikut adalah panduan teknis lengkap beserta contoh kode implementasinya.

Sintaks Dasar SSI untuk Include File

Direktif utama yang digunakan untuk menyertakan file eksternal ke dalam dokumen SHTML adalah #include. Terdapat dua jenis metode pemanggilan utama dalam SSI, yaitu menggunakan parameter virtual (berdasarkan jalur URL relatif server) dan file (berdasarkan direktori sistem file fisik).

Contoh Implementasi Kode SHTML

Berikut adalah contoh struktur file halaman utama berformat index.shtml yang menyertakan file navigasi atas (header) dan bawah (footer) secara modular:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Beranda - Situs Resmi</title>
</head>
<body>

    <!-- Menyertakan file header modular -->
    <!--#include virtual="/templates/header.shtml" -->

    <main>
        <h1>Selamat Datang di Website Kami</h1>
        <p>Ini adalah konten utama halaman beranda yang dinamis namun tetap berbasis statis.</p>
    </main>

    <!-- Menyertakan file footer modular -->
    <!--#include virtual="/templates/footer.shtml" -->

</body>
</html>

Konfigurasi Server untuk Mengaktifkan SHTML

Agar server web membaca dan mengeksekusi direktif SSI di dalam file ber-ekstensi .shtml, pastikan konfigurasi server Anda telah diatur dengan benar:

1. Konfigurasi pada Apache Web Server

Tambahkan baris berikut ke dalam file .htaccess di direktori root situs Anda atau di dalam blok konfigurasi VirtualHost:

AddType text/html .shtml
AddOutputFilterByType INCLUDES text/html
Options +Includes

2. Konfigurasi pada Nginx Web Server

Nginx tidak mengaktifkan SSI secara otomatis. Anda perlu menambahkan direktif berikut di dalam blok server atau location pada file konfigurasi Nginx (nginx.conf):

ssi on;
ssi_types text/html text/shtml;

location ~ \.shtml$ {
    ssi on;
}

Troubleshooting Masalah Umum SHTML

Jika file yang di-include tidak muncul atau menampilkan pesan error di browser, periksa beberapa titik krusial berikut:

• Ekstensi File: Pastikan file utama yang memanggil direktif memiliki ekstensi .shtml, bukan .html (kecuali server telah dikonfigurasi agar memproses SSI pada file .html).
• Izin Akses File (Permissions): Pastikan file yang dipanggil (misalnya header.shtml) memiliki hak akses baca (read permission) yang valid oleh proses web server.
• Path File Salah: Jika menggunakan parameter virtual, pastikan path diawali dengan garis miring (/) yang merujuk langsung pada root direktori web Anda. Jika menggunakan file, pastikan path relatif terhadap lokasi file pemanggil.
• Log Error Server: Periksa log error Apache (error.log) atau Nginx untuk melihat detail kegagalan pemanggilan file SSI.