Konfigurasi Virtual Host di XAMPP

Seperti janji im di post sebelumnya tentang XAMPP, im akan tunjukin gimana caranya mengkonfigurasi virtual host di XAMPP. Buat kamu yang belum sepat baca artikel itu, sebaiknya baca dulu (baca post sebelumnya).

Virtual host adalah salah satu feature di Apache, salah satu komponen XAMPP, yang memungkinkan kita punya beberapa hosting website di satu web server di mana masing-masing punya nama domain sendiri, misalnya http://www.imam.com/ dan http://www.adiwibowo.com/. Apache punya dua jenis virtual host, yaitu NameVirtualHost dan IP-Based Virtual Host. Dalam artikel ini cuma kan dibahas NameVirtualHost.

Proses Membuka Halaman Website

Sebelum kita bahan bagaimana caranya mengkonfigurasi NameVirtualHost, ada baiknya kita pahami dulu proses yang terjadi ketika kita membuka suatu halaman website.

Pada saat kita mengetikan alamat suatu website (URL, Universal Resource Locator) di web browser kita, misalnya http://www.adiwibowo.com/folder/index.htm, maka web browser memecah URL tersebut jadi komponen-komponenya. Komponen dari URL di atas adalah:

• Protokol (http), bagian ini menentukan cara komputer kita berkomunikasi dengan server, dalam hal ini menggunakan protokol HTTP

• Nama host (www.adiwibowo.com) , bagian ini digunakan untuk mencari lokasi web servernya ada di mana

• Lokasi relatif dokumen (/folder/index.htm), bagian ini menentukan lokasi dokumen di web server yang akan kita buka

Selanjutnya komputer kita akan menterjemahkan nama host menjadi IP address. Hal ini dilakukan karena komputer berkomunikasi dengan menggunakan IP address, bukan nama host. Proses penerjemahan ini disebut name resolution process. Proses ini dilakukan dengan cara:

• Melihat local cache, mungkin saja nama host tersebut pernah diterjemahkan jadi IP address dalam proses sebelumnya

• Melihat hosts file, file ini berisi pemetaan nama host dengan IP address

• Bertanya ke DNS, DNS memiliki database yang berisi pemetaan nama host dengan IP address

Setelah IP address diketahui, komputer akan mengontak web server dan meminta dokumen yang kita minta dengan menggunakan lokasi relatif dokumen dari URL. Jika dokumen yang kita minta berhasil ditemukan oleh web server, maka web server akan memberikan dokumen tersebut, dan komputer kita akan menampilkannya di web browser.

Kalau digambarkan, proses yang terjadi kurang-lebih adalah seperti ini:

Modifikasi Name Resolution Process

Agar kita bisa menggunakan NameVirtualHost, kita harus mengkonfigurasi name resolution process terlebih dahulu. Untuk melakukannya, kita bisa mengedit hosts file atau mengkonfigurasi DNS. Dalam artikel kali, modifikasi name resolution process hanya akan dilakukan dengan mengedit hosts file.

Hosts file adalah file teks yang berisi pemetaan nama host dengan IP address. Kita bisa mengedit file ini dengan menggunakan notepad. Lokasi hosts file adalah “X:WINDOWSsystem32driversetchosts” (X adalah drive tempat kita menginstall Windows) atau bisa juga pake ShortPath “%windir%system32driversetchosts”.

Di dalam hosts file (yang belum diubah) seharusnya sudah ada satu record, yaitu:

127.0.0.1 localhost

Bagian kiri adalah IP address dan bagian kanan adalah nama host-nya. Arti dari record di atas adalah kalau komputer mau melakukan koneksi dengan komputer yang nama hostnya localhost, komputer akan mencari komputer dengan IP address 127.0.0.1.

Catatan: 127.0.0.1 adalah IP address komputer kita sendiri, disebut loopback. Semua komputer memiliki IP address ini untuk keperluan berkomunikasi dengan dirinya sendiri.

Coba tambahkan baris berikut:

127.0.0.1 http://www.imam.com/

127.0..0.1 http://www.adiwibowo.com/

Setelah itu start XAMPP lalu buka web browser, browse ke http://www.imam.com/ dan http://www.adiwibowo.com/. Apa yang terjadi? Seharusnya kita akan melihat halaman website yang kita simpan di XAMPP. Kalau sudah berhasil, kita bisa lanjutkan ke pembahasan berikutnya.

Konfigurasi NameVirtualHost

Untuk mengkonfigurasi NameVirtualHost kita harus edit file httpd-vhost.conf di dalam folder “X:XAMPPapacheconfextra” (X adalah folder tempat instalasi XAMPP). Kita bisa edit file ini dengan menggunakan notepad. Di dalam file itu sudah ada contoh konfigurasi, tapi masih berupa comment (diabaikan oleh apache, karena masih ada tanda pagar (#) didepan teks).

Untuk bisa menggunakan NameVirtualHost, langkah pertama yang harus kita lakukan adalah menghapus tanda pagar (#) di depan tulisan ##NameVirtualHost *:80. Setelah itu tambahkan definisi NameVirtualHost untuk setiap nama host (domain) yang kita buat. Contoh untuk membuat NameVirtualHost http://www.imam.com/ dan http://www.adiwibowo.com/, tambahkan baris berikut:

<VirtualHost *:80>

ServerAdmin admin@imam.com

DocumentRoot /xampp/htdocs/imam

ServerName www.imam.com

ServerAlias www.imam.com

</VirtualHost>

<VirtualHost *:80>

ServerAdmin admin@adiwibowo.com

DocumentRoot /xampp/htdocs/adiwibowo

ServerName www.adiwibowo.com

ServerAlias *.adiwibowo.com

</VirtualHost>

Modifikasi teks di atas sesuai dengan keperluan. Ada beberapa hal yang haru diperhatikan, yaitu:

• DocumetRoot hanya bisa diisi dengan link relatif ke folder di bawah folder XAMPP. Biasanya dokumen website disimpan di folder htdocs.

• ServerAlias bisa menggunakan asterix (*), contoh: *.adiwibowo.com. Artinya setiap nama host yang diakhiri adiwibowo.com akan di-redirect ke folder /xampp/htdocs/adiwibowo.

• Restart apache setiap kali melakukan perubahan konfigursi VirtualHost.