Cara membuat Virtual Host pada XAMPP di Windows

Cara membuat virtual host pada XAMPP di Windows – Pada kesempatan kali ini saya mau berbagi tentang cara membuat virtual host untuk pengembangan sebuah website pada local server atau local komputer.

Sebenarnya sudah banyak sekali sih yang membahas topik ini. Tetapi ada segelintir kasus yang membuat saya ingin membahasnya kembali.

Okay, Sebelum membuat virtual host, kita wajib tau dulu apa itu virtual host?

Virtual host adalah sebuah metode untuk hosting beberapa nama domain (dengan penanganan yang terpisah dari masing-masing nama) pada satu server.

Pada local server, kita akan menggunakan Apache untuk memanage virtual host. Apache sendiri sudah akan terinstall pada saat kita menginstall XAMPP. 😉

# Contoh penggunaan virtual host:

Sebelum http://localhost/pixelbali -> Sesudah http://pixelbali.dev

Pada kasus di atas, jika anda membuka url http://pixelbali.dev pada browser, itu akan sama saja seperti anda membuka url di http://localhost/pixelbali.

# Tujuan dari penggunaan virtual host:

Tujuan dari penggunaan virtual host ini pada saat pengembangan website menurut saya sendiri adalah untuk menghindari kesalahan path pada saat redirect ataupun pembuatan link ke halaman lain pada webiste.

# Cara membuat Virtual Host:

1. Menambah Domain Baru

Buka Aplikasi Notepad dan jalankan sebagai Administrator, caranya klik kanan pada aplikasi Notepad dan pilih “Run as administrator“
Dari aplikasi Notepad, bukalah file host yang berada di direktori C:\Windows\System32\drivers\etc\
Tambahkan nama domain baru dengan IP local, misalnya 127.0.0.1 pixelbali.dev
Kemudian simpan kembali file host tersebut.

2. Membuat Virtual Host

Buka file httpd.conf di direktori (C:\xampp\htdocs\apache\conf\)
Carilah module Include conf/extra/httpd-vhosts.conf , Jika ada hilangkan tanda # didepan nya, jika tidak silahkan ditutup kembali file ini tanpa disimpan.

Buka file httpd-vhost.conf di direktori (C:\xampp\htdocs\apache\conf\extra\) dengan menggunakan Notepad

Kemudian tambahkan code seperti dibawah ini dan sesuaikan path direktori project anda sesuai nama folder yang dimiliki. Letakan code pada baris terakhir.

<VirtualHost *:80>
ServerAdmin admin@pixelbali.dev
DocumentRoot "C:\xampp\htdocs\pixelbali"
ServerName pixelbali.dev
ServerAlias pixelbali.dev
ErrorLog logs/pixelbali.dev.log
CustomLog logs/pixelbali.dev.log combined
<Directory "C:\xampp\htdocs\pixelbali">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all

    Require all granted
</Directory>
</VirtualHost>

ServerAdmin admin@pixelbali.dev

DocumentRoot "C:\xampp\htdocs\pixelbali"

ServerName pixelbali.dev

ServerAlias pixelbali.dev

ErrorLog logs/pixelbali.dev.log

CustomLog logs/pixelbali.dev.log combined

Options Indexes FollowSymLinks Includes ExecCGI

AllowOverride All

Order allow,deny

Allow from all

Require all granted

</Directory>

</VirtualHost>

Simpan kembali file tersebut. Dan RESTART apache dengan cara membuka XAMPP control panel kemudian stop apache dan start kembali.
Dan pada kasus saya ini, jika saya buka http://pixelbali.dev dan http://localhost/pixelbali maka hasilnya akan sama.