Virtual Host pada Localhost XAMPP

Secara default, kita biasanya meletakan aplikasi web kita dalam membangun suatu web pada htdocs/nama folder. Biasanya juga nama folder tersebut merupakan nama project yang sedang kita kerjakan. Kemudian ketika kita mengakses pada web browser, alamat default URL tersebut adalah http://localhost/nama_project. Terlihat sangat biasa sekali dan tidak keren bukan? Lalu bagaimana caranya agar URL project kita terlihat tidak biasa? Misalkan kita mengakses dengan nama procject kita yakni http://nama_project yang terdapat pada localhost. Ok, berikut caranya.

Dalam kasus ini, Kita menerapkannya pada server local di PC atau laptop kita. Contoh kali ini kita menggunakan web server XAMPP dan OS Windows 10. Project kita yang terdapat dalam htdocs, anggaplah kita beri nama folder project_satu. Di dalam folder tersebut, Saya membuat 1 file index.html hanya untuk menampilkan aplikasi tersebut berjalan atau tidak. Dan jika kita akses menggunakan URL http://localhost/project_satu maka akan menampilkan gambar seperti di bawah ini.

Gambar 1. Tampilan URL default

Nah, sekarang kita akan mengganti nama URL terebut menjadi http://project.satu tanpa ada penulisan localhost didepannya. Pertama tama kita buka dahulu file httpd-vhosts.conf biasanya terletak pada C:\xampp\apache\conf\extra (tergantung di mana Anda menginstall xampp). Setelah di buka, pada baris paling bawah tuliskan script berikut.

 
<VirtualHost project.satu>

 ServerName project.satu

 DocumentRoot "C:/xampp/htdocs/project_satu/"

</VirtualHost>
 

Keterangan dari script di atas adalah :

1. project.satu adalah nama yang nantinya akan digunakan untuk mengakses URL.
2. DocumentRoot adalah path lokasi aplikasi berada.

Setelah selesai, simpan file httpd-vhosts.conf tersebut. Kemudian, kita sekarang mengubah file hosts biasanya terdapat pada C:\Windows\System32\drivers. Setelah terbuka, tambahkan pada bagian bawah tuisan berikut :

 
127.0.0.1 project.satu
 

Setelah itu simpan file hosts tersebut dan restart apache Anda. Apabila telah sukses, maka Anda akan berhasil mengakses http://localhost/project_satu menjadi http://project.satu. Sebagai contoh, Anda dapat melihat gambar di bagian akhir tulisan ini dan perhatikan URL nya. Mudah bukan? Silahkan mencoba.

Gambar2. Tampilan URL virtual host.

Sangat mudah bukan bagaimana cara pembuatannya? Demikianlah penjelasan singkat dan sederhana mengenai Virtual Host pada Localhost XAMPP semoga dapat bermanfaat buat Anda. Terima Kasih.