Cara Edit File SHTML di Komputer Lokal (Offline)

File berformat .shtml (Server Side Includes) tidak dapat dirender secara sempurna jika hanya dibuka langsung melalui browser (klik dua kali) karena membutuhkan lingkungan server web untuk memproses perintah SSI seperti #include. Untuk mengedit file SHTML secara lokal di komputer, Anda memerlukan editor teks dan server lokal seperti XAMPP atau MAMP agar sintaks SSI terbaca dengan benar.

Alat yang Dibutuhkan untuk Edit SHTML Lokal

Sebelum memulai proses penyuntingan, siapkan perangkat lunak esensial berikut agar file SHTML Anda dapat diedit dan diuji coba secara offline tanpa error.

Kategori Nama Software Fungsi Utama
Code Editor Visual Studio Code / Sublime Text Menulis dan menyunting kode HTML/SSI dengan fitur syntax highlighting.
Local Server XAMPP / Laragon / Apache Menjalankan modul server Apache yang mendukung eksekusi Server Side Includes (.shtml).
Browser Google Chrome / Firefox Melihat hasil render halaman SHTML secara langsung.

Langkah-Langkah Menjalankan dan Mengedit SHTML Lokal

Ikuti tahapan teknis di bawah ini untuk mengatur server lokal dan melakukan penyuntingan file SHTML dengan benar:

  1. Instal Server Lokal: Unduh dan pasang XAMPP atau Laragon di komputer Anda. Pastikan modul Apache menyala (Start).
  2. Letakkan File di Direktori Server: Pindahkan folder proyek website Anda ke dalam direktori root server lokal (misalnya di C:\xampp\htdocs\nama-proyek\).
  3. Aktifkan Modul SSI di Apache: Agar file .shtml terbaca oleh Apache, pastikan konfigurasi httpd.conf Anda mengizinkan handler SSI. Cari baris berikut dan pastikan tidak ada tanda pagar (#) di depannya:
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
  4. Buka File dengan Editor: Buka Visual Studio Code, pilih menu File > Open Folder, lalu arahkan ke folder proyek Anda di dalam htdocs.
  5. Lakukan Penyuntingan: Edit file SHTML Anda. Contoh penggunaan SSI untuk menyisipkan file navigasi:
    <!--#include virtual="header.html" -->
    <h1>Halaman Utama Lokal</h1>
    <!--#include virtual="footer.html" -->
  6. Uji Coba di Browser: Buka browser Anda dan ketikkan URL lokal, contohnya: http://localhost/nama-proyek/index.shtml. Jangan membuka file langsung lewat protokol file:/// karena perintah SSI tidak akan tereksekusi.

Troubleshooting Masalah Umum SHTML Lokal

Jika file SHTML Anda menampilkan teks mentah SSI atau error saat diakses secara lokal, periksa beberapa kendala umum berikut:

  • Muncul Error 500 Internal Server Error: Biasanya disebabkan oleh kesalahan penulisan sintaks pada tag <!--#include ... --> atau konfigurasi handler di Apache belum aktif.
  • File Include Tidak Muncul: Pastikan path atau jalur file yang dipanggil pada atribut virtual atau file sudah sesuai dengan struktur direktori server lokal Anda.
  • Akses via file:///: Ingat bahwa server Apache wajib aktif. Membuka file SHTML langsung dari Windows Explorer akan membuat perintah SSI gagal total.