Membuat Virtual Host dengan XAMPP pada Windows 7 untuk Web Development Lebih Mudah

Membuat Virtual Host dengan XAMPP pada Windows 7 untuk Web Development Lebih Mudah

Tutorial Information

ProgramXAMPP, Windows 7
Version1.7.4+
DifficultyStandar
Estimated Time20 menit

XAMPP adalah salah satu paket webserver + database server yang umumnya memudahkan pengembangan web secara lokal. Dengan XAMPP, biasanya programmer akan mengakses http://localhost/folder_proyek di…

XAMPP adalah salah satu paket webserver + database server yang umumnya memudahkan pengembangan web secara lokal. Dengan XAMPP, biasanya programmer akan mengakses http://localhost/folder_proyek di browsernya. Lokasi folder web tersebut secara default ada di dalam folder xampp/htdocs. Apabila ingin menambah proyek, dimasukkan ke folder lain, folder lain, dan folder lainnya lagi. Bayangkan apabila sudah ada banyak sekali proyek, tentu akan lebih rumit mengatur file-nya.

Belum lagi, apabila folder yang akan diakses public nantinya terletak dalam subfolder proyek tersebut. Sebagai contoh, seperti dalam penggunaan framework FuelPHP dan Laravel yang file program utamanya sebaiknya tidak diletakkan dalam folder publik. Bisa jadi si programmer perlu mengaksesnya secara lokal dengan URL yang cukup panjang seperti http://localhost/proyek_sistem_informasi/modul_satu/public. Sungguh melelahkan, bukan?

Bagaimana bila URL project diubah menjadi domain tertentu, selayaknya sebuah server live? Misalkan, untuk project bernama “mimi”, bisa diakses melalui http://mimi.dev, kemudian untuk project “tomatech” bisa diakses melalui http://tomatech.dev. Tentunya cara ini akan lebih baik dan memudahkan proses pengembangan web Anda, karena selain URL jadi lebih mudah dibaca dan berada di root domain (bukan folder), folder proyek juga bisa dipisahkan (tidak harus ada dalam satu parent folder).

Cara ini dapat dilakukan secara mudah pada XAMPP. Berikut ini saya jelaskan secara singkat tutorial membuat Virtual Host dengan XAMPP pada Windows 7. XAMPP yang saya gunakan ada versi 1.7.4 dengan Windows 7 Professional 64-bit. Beberapa penjelasan tentang jaringan mungkin kurang tepat, karena saya bukan ahlinya. Namun saya coba jelaskan secara logika saja.

Target
Membuat Virtual Host untuk 3 proyek, namun tetap memungkinkan akses ke localhost biasa:

  • http://localhost/ (akses seperti biasa)
  • http://bisakomputer.wp/
  • http://mimi.dev/
  • http://tomatech.dev/

Langkah-Langkah Pembuatan Virtual Host

  1. Di Windows, sebelum komputer mencari alamat IP dari sebuah domain ke DNS Server, pencarian akan melalui sebuah file yang bernama hosts. Dalam proses pemetaan domain, apabila dalam file tersebut ditemukan pertama kali pemetaan yang pas sesuai domain yang dicari, maka informasi dari file tersebutlah yang digunakan. File ini terletak di dalam direktori c:\Windows\System32\drivers\etc\ (bisa berbeda tergantung versi Windows Anda). Buka file tersebut dengan Notepad (tidak disarankan) atau text editor lain. Pastikan bahwa Anda membuka file tersebut sebagai Administrator.
  2. Dalam file hosts, Anda akan menemukan baris seperti berikut.
    127.0.0.1 localhost

    Sekarang coba dulu untuk menambahkan domain bisakomputer.wp ke dalam file hosts. Di bawah baris localhost, tambahkan entry sehingga seperti kode di bawah ini.

    # baris localhost dibiarkan agar tetap bisa diakses
    127.0.0.1 localhost
    127.0.0.1 bisakomputer.wp

    Kode di atas memberitahu bahwa apabila ada pengaksesan alamat domain bisakomputer.wp, maka akan diarahkan ke IP 127.0.0.1, yang mana IP tersebut adalah IP lokal komputer pengguna.

  3. Langkah berikutnya adalah membuat konfigurasi Virtual Host pada XAMPP. Bukalah folder c:\xampp\apache\conf\extra\ (drive tergantung lokasi folder xampp Anda), setelah itu cari file httpd-vhosts.conf dan buka dengan text editor. Di bagian bawah, tambahkan baris seperti berikut.
    # baris ini penting untuk memerintahkan XAMPP menggunakan Name untuk virtual host
    NameVirtualHost *:80
    
    <VirtualHost *:80>
        ServerAdmin admin@localhost.com
        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
        </Directory>
    </VirtualHost>
    
    <VirtualHost *:80>
        ServerAdmin admin@bisakomputer.wp
        DocumentRoot "d:\web-dir\bisakomputer.wp"
        ServerName bisakomputer.wp
        ServerAlias bisakomputer.wp
        ErrorLog logs/bisakomputer.wp.log
        CustomLog logs/bisakomputer.wp.log combined
        <Directory "d:\web-dir\bisakomputer.wp">
            Options Indexes FollowSymLinks Includes ExecCGI
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
    </VirtualHost>

    Setelah itu, restart XAMPP Anda melalui control panel ataupun command line.

  4. Anda bisa menambahkan sebuah file index.html sederhana di dalam DocumentRoot yang baru untuk pengujian. Apabila Apache telah berjalan kembali, cobalah akses http://bisakomputer.wp di browser kesayangan Anda untuk memastikan bahwa konfigurasi telah berhasil.

Menambahkan Virtual Host Lain

Untuk menambahkan virtual host mimi.dev dan tomatech.dev pun tentu tidaklah susah. Ulangi langkah satu dengan menambahkan entry di file hosts, kemudian tambahkan sebuah VirtualHost di file httpd-vhosts.conf.

Perlu diketahui bahwa file hosts milik Windows tidak memungkinkan menggunakan wildcard asterik “*”, sehingga untuk membuat banyak local domain mengarah ke komputer lokal, harus dideklarasikan satu-persatu. Hasil akhir dari artikel ini akan sebagai berikut:

File hosts

127.0.0.1 localhost
127.0.0.1 bisakomputer.wp
127.0.0.1 mimi.dev
127.0.0.1 tomatech.dev

File httpd-vhosts.conf

# baris ini penting untuk memerintahkan XAMPP menggunakan Name untuk virtual host
NameVirtualHost *:80

<VirtualHost *:80>
    ServerAdmin admin@localhost.com
    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
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin admin@bisakomputer.wp
    DocumentRoot "d:\web-dir\bisakomputer.wp"
    ServerName bisakomputer.wp
    ServerAlias bisakomputer.wp
    ErrorLog logs/bisakomputer.wp.log
    CustomLog logs/bisakomputer.wp.log combined
    <Directory "d:\web-dir\bisakomputer.wp">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

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

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

Penutup

Selain memudahkan dalam pengembangan, cara ini akan lebih mengamankan data aplikasi web Anda, alih-alih memasukkan ke folder XAMPP yang secara default ada di C. Hal terburuk bisa jadi Anda harus install ulang namun lupa membackup data Anda di drive C tersebut. Dengan menggunakan VirtualHost ini, Anda bisa mengatur lokasi DocumentRoot sesuka Anda, sehingga data bisa Anda letakkan di tempat yang lebih aman. Untuk default htdocs, cara lain Anda bisa menggunakan symbolic link seperti pada artikel saya di blog pribadi. Selamat mencoba!

Update:

Untuk XAMPP versi 1.8.1, Anda perlu menambahkan baris “Require all granted” menjadi seperti berikut:

    <Directory "d:\web-dir\mimi.dev">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
Tag: , , , , , , ,

28 Comments

Leave Comment
  1. wah saya baru tau ada cara beginian, makasih sharingnya bang.

  2. Hanggar PS says:

    Tempat postingnya abang itu kan ada batasnya kan (margin) la postingan abang itu melebihi margin gtu

  3. agus says:

    Saya sudah bikin vhosts.
    Trus ternyata yg localhost-nya jadi gak bisa jalan. Kecuali harus saya hapus (jadikan koment) untuk tag vhost di file httpd-vhosts.conf.

    Gimana caranya agar localhost (htdocs) tetap jalan meski vhosts diaktifkan?

  4. dhenycahyoe says:

    Mantab mas, kalau untuk linux konfigurasinya tetep sama kan?

  5. Arfi Asta says:

    ikut nyimak .. kapan2 saya coba cara ini. thanks ya tut-nya

  6. lion says:

    bang
    klo akses dari comp lain caranya bijimana yak……

  7. lion says:

    #bedanya apa klo
    File httpd-vhosts.conf:

    ServerAdmin admin@tomatech.dev
    DocumentRoot “d:\web-dir\tomatech.dev”
    ServerName tomatech.dev
    ServerAlias tomatech.dev
    ErrorLog logs/tomatech.dev.log
    CustomLog logs/tomatech.dev.log combined

    ————————————————————————–

    file httpd.conf:

    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted

    mohon pencerahan

  8. trie says:

    Saya ada problem , tolong dibantu.
    Saya coba bikin aplikasi web. terus aplikasi ini kalo dibuka dengan http://localhost/aplikasi/menu.php bisa cepet. tapi kalaudengan http://komp1/aplikasi/menu.php kok lodingnya lama banget. padahal masih local. kalo via komputer lain juga lama.
    dimana kira-kira permasalahannya ….

  9. Panerang says:

    q nggak ngerti sama sekali Bang. Ni ada tugas dari dosen disuruh buat Pemetaan Jaringan (IP + Host) ntar disuruh presentasi.
    tp nggak modeng blas Bang ..

  10. lion says:

    bang Cara Mengakses Localhost Dari Internet komputer Lain
    selain ketik alamat ip comp localhost di bar browser???

  11. Danny says:

    mantab sharingnya, mau tanya gan, kalo buat virtual host menggunakan APPSERV g’mna gan..???

  12. Ridwan says:

    Gan saya pake win 7 saya rubah yang file host tapi ko ga bisa di save ya ,,, permissionnya ,,, itu solusinya gimana gan . mohon penerangannya

  13. Ermawan says:

    Mas, cara membuka file “hosts” secara administrator gimana ya?
    Ane dari kemarin salahnya disitu mulu, abis diedit filenya gak mau disimpen gara2 gak dibuka by Administrator

  14. yanuar says:

    Min klo aku bisa menmbah urlny misal biasanya kan localhost/,localhost.local/,127.0.0.1/, saya tambahin menjadi ‘ yanuar.local/ ‘ tapi tdk sma sprti tutorial d blog ini, melainkan langsung lewat pengaturan di phpMyAdmin,,,

Write Comment

Your email will not be published. The marked label is required.