Tutorial SHTML Localhost: Cara Menjalankan Server SSI

Menjalankan file berformat .shtml (Server Side Includes) di komputer lokal atau localhost memerlukan konfigurasi web server khusus agar perintah SSI seperti <!--#include virtual="header.html" --> dapat diproses dengan benar. Berbeda dengan file HTML biasa yang dapat langsung dirender oleh browser, file SHTML membutuhkan server yang aktif untuk mengeksekusi direktif sebelum dikirim ke klien.

Panduan teknis ini menguraikan langkah-langkah praktis untuk mengaktifkan modul SSI dan menjalankan SHTML di lingkungan localhost menggunakan Apache (XAMPP) atau Nginx.

Persiapan Lingkungan Localhost

Sebelum memulai konfigurasi, pastikan Anda telah memasang server lokal di komputer. Paket server lokal paling populer yang menyertakan Apache adalah XAMPP. Pastikan modul Apache dalam keadaan aktif melalui kontrol panel XAMPP.

Tabel Perbandingan Server untuk SHTML

Langkah 1: Konfigurasi Apache untuk SSI (.shtml)

Secara default, beberapa instalasi Apache belum mengaktifkan modul SSI atau belum mengizinkan eksekusi file ber-ekstensi .shtml. Ikuti langkah teknis berikut untuk mengaktifkannya:

1. Buka file konfigurasi utama Apache, yaitu httpd.conf (pada XAMPP biasanya terletak di C:\xampp\apache\conf\httpd.conf).
2. Cari baris kode modul include dengan menekan Ctrl + F dan cari teks berikut:

   #LoadModule include_module modules/mod_include.so

3. Hapus tanda pagar (#) di awal baris tersebut menjadi:

   LoadModule include_module modules/mod_include.so

4. Cari blok konfigurasi direktori proyek Anda (biasanya <Directory "C:/xampp/htdocs">) dan ubah opsi Options serta tambahkan AddHandler dan AddOutputFilter:

   <Directory "C:/xampp/htdocs">
       Options Indexes FollowSymLinks Includes
       AllowOverride All
       Require all granted
   </Directory>
   
   AddType text/html .shtml
   AddOutputFilter INCLUDES .shtml

5. Simpan file httpd.conf dan lakukan Restart pada layanan Apache melalui XAMPP Control Panel.

Langkah 2: Membuat File SHTML Uji Coba

Untuk memastikan konfigurasi localhost Anda berhasil membaca file SHTML, buatlah struktur direktori dan file uji coba di dalam folder root server lokal (C:/xampp/htdocs/).

1. Buat file bernama header.html dengan isi sederhana:

   <header>
       <h1>Ini adalah Header dari File Eksternal</h1>
   </header>

2. Buat file utama bernama index.shtml di direktori yang sama:

   <!DOCTYPE html>
   <html lang="id">
   <head>
       <meta charset="UTF-8">
       <title>Tes SHTML Localhost</title>
   </head>
   <body>
       <!--#include virtual="header.html" -->
       <p>Konten utama halaman SHTML berjalan dengan sukses.</p>
   </body>
   </html>

Langkah 3: Mengakses di Browser

Buka peramban web (browser) favorit Anda dan ketikkan alamat berikut pada bilah URL:

http://localhost/index.shtml

Jika konfigurasi benar, teks dari header.html akan tergabung dan tampil sempurna bersama teks dari index.shtml tanpa error.

Troubleshooting Masalah Umum

Jika halaman menampilkan teks mentah <!--#include...--> atau galat 500 Internal Server Error, periksa poin-poin berikut:

• Modul Belum Aktif: Pastikan mod_include.so tidak memiliki tanda komentar (#) di httpd.conf.
• Ekstensi File Salah: Pastikan file disimpan dengan ekstensi .shtml, bukan .html biasa. Server umumnya tidak memproses SSI pada file .html kecuali dikonfigurasi secara spesifik.
• Log Error Apache: Periksa berkas error.log di direktori C:/xampp/apache/logs/ untuk melihat detail kendala sintaks secara spesifik.