Untuk mengembangkan web secara lokal, Anda diharuskan untuk menginstal webserver + database yang ingin digunakan di komputer lokal. Bagi Anda yang menggunakan sistem operasi Windows, umumnya akan menggunakan XAMPP ataupun AppServ.
Biasanya untuk mengakses web secara lokal, Anda akan mengetikkan URL http://localhost/folder_web di web browser. Lantas bagaimana jika folder public web terletak pada subfolder, misal http://localhost/proyek_web/public. Tentu tidak efisien bukan ?
Untuk mengatasi hal tersebut, sebenarnya Anda bisa mengubah URL web lokal menjadi nama domain tertentu layaknya web yang sudah di onlinekan (Virtual Host). Misal domain http://project.com atau eplusgo.wp. Tujuannya tentu untuk memudahkan kita dalam mengakses sebuah project web.
Membuat Virtual Host pada XAMPP
Pada tutorial ini, kita akan membuat virtual host pada XAMMP. XAMPP yang digunakan adalah versi 1.8.2 dengan sistem operasi Windows 7 32-bit.
Langkah 1
Buka file hosts yang terletak di dalam direktori C:\Windows\System32\drivers\etc. Pastikan Anda membuka file tersebut sebagai Administrator. Di bagian paling akhir, Anda akan menemukan baris sebagai berikut :
127.0.0.1 localhost
Tambahkan domain yang ingin Anda buat ke dalam file hosts tersebut. Misal domain projectweb.wp, kemudian simpan file hosts tersebut.
127.0.0.1 localhost 127.0.0.1 projectweb.wp
Langkah 2
Buka file httpd-vhosts.conf di dalam direktori C:\xampp\apache\conf\extra (sesuaikan dengan lokasi folder XAMMP Anda). Kemudian tambahkan baris seperti berikut dibagian paling bawah.
NameVirtualHost *:80
<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
ServerAlias localhost
<Directory "C:/xampp/htdocs">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "C:/xampp/htdocs/projectweb"
ServerName projectweb.wp
ServerAlias projectweb.wp
ErrorLog logs/projectweb.wp.log
CustomLog logs/projectweb.wp.log combined
<Directory "C:/xampp/htdocs/projectweb">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
Langkah 3
Restart XAMMP Anda, kemudian cobalah akses domain projectweb.wp di browser Anda. Jika konfigurasi benar, maka domain tersebut akan menampilkan web dari direktori C:/xampp/htdocs/projectweb yang sudah Anda tuliskan pada konfigurasi diatas.
Nantinya jika Anda ingin menambahkan virtual host lainnya. Cukup lakukan penambahan sesuai panduan diatas pada file hosts.
127.0.0.1 localhost 127.0.0.1 projectweb.wp 127.0.0.1 webnews.dev
Dan file httpd-vhosts.conf.
NameVirtualHost *:80
<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
ServerAlias localhost
<Directory "C:/xampp/htdocs">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "C:/xampp/htdocs/projectweb"
ServerName projectweb.wp
ServerAlias projectweb.wp
ErrorLog logs/projectweb.wp.log
CustomLog logs/projectweb.wp.log combined
<Directory "C:/xampp/htdocs/projectweb">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "C:/xampp/htdocs/webnews"
ServerName webnews.dev
ServerAlias webnews.dev
ErrorLog logs/webnews.dev.log
CustomLog logs/webnews.dev.log combined
<Directory "C:/xampp/htdocs/webnews">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
Selamat mencoba.
