Implementasi Server Side Includes (SSI) di VS Code
Visual Studio Code secara bawaan tidak mendukung eksekusi Server Side Includes (SSI) karena merupakan editor teks, bukan server web. Untuk menjalankan file dengan direktif <!--#include virtual="file.html" -->, Anda memerlukan server lokal yang mendukung modul SSI (seperti Apache atau Nginx) atau menggunakan ekstensi pihak ketiga yang mensimulasikan perilaku tersebut.
Langkah Teknis Mengaktifkan SSI
Cara paling efisien untuk pengembang adalah menggunakan ekstensi Live Server yang dikombinasikan dengan konfigurasi server lokal. Berikut adalah langkah-langkahnya:
- Buka Visual Studio Code dan masuk ke menu Extensions (Ctrl+Shift+X).
- Cari dan instal ekstensi bernama "Live Server" oleh Ritwick Dey.
- Untuk dukungan SSI yang lebih spesifik, Anda dapat menggunakan "PHP Server" atau menjalankan Apache melalui XAMPP/WAMP jika proyek Anda memerlukan integrasi server yang kompleks.
- Buat file dengan ekstensi
.shtmlatau.html. - Masukkan sintaks SSI pada bagian yang diinginkan:
<!--#include virtual="header.html" -->Tabel Perbandingan Metode SSI di VS Code
| Metode | Kelebihan | Kekurangan |
|---|---|---|
| Live Server (Extension) | Cepat, ringan, instan | Tidak mendukung semua direktif SSI |
| XAMPP/Apache | Sesuai standar produksi | Konfigurasi lebih rumit |
| Node.js (ssi-stream) | Fleksibel untuk workflow modern | Memerlukan setup npm |
Troubleshooting Umum
Jika direktif SSI tidak muncul (hanya menampilkan teks mentah), pastikan hal berikut:
- Ekstensi File: Beberapa server web hanya memproses SSI pada file dengan ekstensi
.shtml. Ubah.htmlmenjadi.shtmljika diperlukan. - Konfigurasi Server: Jika menggunakan Apache, pastikan modul
include_moduletelah diaktifkan di filehttpd.confdengan perintahLoadModule include_module modules/mod_include.so. - Izin Akses: Pastikan file yang di-include berada dalam direktori yang sama atau memiliki path yang benar relatif terhadap root server.
Untuk pengujian cepat tanpa instalasi server berat, gunakan ekstensi "Live Server" dan pastikan Anda membuka folder root proyek, bukan hanya file tunggal, agar path relatif SSI dapat terbaca dengan benar oleh server lokal.