Cara Membuat Virtual Host di XAMPP

Assalamu'alaikum Warahmatullahi Wabaraktuh.
     Pada beberapa artikel artikel sebelumnya, SkripKu Dotkom pernah membahas tentang Cara Mengubah Nama Domain Localhost (kalau belum baca silahkan baca dulu). Jadi intinya pada tutorial tersebut kita hanya ingin mengubah domain localhost kita dengan nama lain misal: http://azishapiddin, http://azishapidin.com, dll. Sehingga kalau kita punya folder namaproject di direktori xampp/htdocs, maka untuk mengaksesnya kita perlu mengetikan namadomain/namaproject. Nah dengan Virtual Host,  untuk mengakses folder namaproject tadi, kita bisa masuk lewat namaproject.com, atau misalkan namapro.ject, atau apa aja sesuai keinginan. Pada contoh dibawah, kita punya sebuah folder dalam htdocs yang bernama azishapiddin. Normalnya, untuk mengakses folder tersebut kita harus membuka localhost/azishapiddin dan kita akan membuat Virtual Host sehingga untuk mengakses folder tersebut kita cukup membuka azishapiddin.com . Oke, siap? Silahkan baca kemudian ikuti langkah-langkah dibawah ini:

Mendaftarkan Domain dengan Meng-edit File Hosts

  • 1. Pertama, nyalakan Apache terlebih dahulu pada XAMPP yang akan kita gunakan.
  • 2. Kemudian buka teks editor (apa aja yang penting teks editor, boleh Notepad, Sublime Text, dll.). Tapi ingat, anda harus membuka-nya dengan mode Administrator dengan cara klik kanan pada teks editor yang akan dibuka kemudian pilih Run as administrator.
  • 3. Tekan CTRL+O kemudian buka fle C:\Windows\System32\drivers\etc\hosts
  • Pada baris paling akhir, silahkan tambahkan perintah berikut:
  • 
    127.0.0.1 azishapiddin.com
    
  • 4. Untuk mengecek saja, kita buka Command Prompt kemudian ketikan perintah ping azishapiddin.com . Jika hasilnya menunjukan bahwa domain tersebut mengarah ke 127.0.0.1 seperti pada gambar dibawah, maka kita bisa langsung melaju ke tahap Semi-Final selanjutnya.

Mengedit File httpd-vhosts.conf

  • 1. Langkah selanjutnya adalah mengedit file konfigurasi Apache menggunakan Text Editor. File ini terletak di D:\xampp\apache\conf\extra\httpd-vhosts.conf (Saya biasanya nyimpen file XAMPP di di partisi D:, silahkan sesuaikan dengan partisi tempat menyimpan program file xampp Anda). Jika kita buka file tersebut, kurang lebih kita akan menemukan code seperti dibawah:
  • 
    # Virtual Hosts
    #
    # Required modules: mod_log_config
    
    # If you want to maintain multiple domains/hostnames on your
    # machine you can setup VirtualHost containers for them. Most configurations
    # use only name-based virtual hosts so the server doesn't need to worry about
    # IP addresses. This is indicated by the asterisks in the directives below.
    #
    # Please see the documentation at 
    # <URL:http://httpd.apache.org/docs/2.4/vhosts/>
    # for further details before you try to setup virtual hosts.
    #
    # You may use the command line option '-S' to verify your virtual host
    # configuration.
    
    #
    # Use name-based virtual hosting.
    #
    ##NameVirtualHost *:80
    #
    # VirtualHost example:
    # Almost any Apache directive may go into a VirtualHost container.
    # The first VirtualHost section is used for all requests that do not
    # match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
    #
    ##<VirtualHost *:80>
        ##ServerAdmin webmaster@dummy-host.example.com
        ##DocumentRoot "D:/xampp/htdocs/dummy-host.example.com"
        ##ServerName dummy-host.example.com
        ##ServerAlias www.dummy-host.example.com
        ##ErrorLog "logs/dummy-host.example.com-error.log"
        ##CustomLog "logs/dummy-host.example.com-access.log" common
    ##</VirtualHost>
    
    ##<VirtualHost *:80>
        ##ServerAdmin webmaster@dummy-host2.example.com
        ##DocumentRoot "D:/xampp/htdocs/dummy-host2.example.com"
        ##ServerName dummy-host2.example.com
        ##ErrorLog "logs/dummy-host2.example.com-error.log"
        ##CustomLog "logs/dummy-host2.example.com-access.log" common
    ##</VirtualHost>
    
  • 2. Kode diatas merupakan contoh konfigurasi untuk membuat virtual host. Karena kita akan membuat Virtual Host baru, silahkan tambahkan kode berikut di baris paling bawah:
  • 
    <VirtualHost *:80>
        ServerAdmin webmaster@azishapiddin.com
        DocumentRoot "D:/xampp/htdocs/azishapiddin"
        ServerName azishapiddin.com
        ErrorLog "logs/azishapiddin.coms-error.log"
        CustomLog "logs/azishapiddin.com-access.log" common
    </VirtualHost>
    
    Note: Silahkan sesuaikan nama folder (DocumentRoot) dengan folder Anda. Saya biasa nyimpen file XAMPP-nya di partisi D:, jadi sesuain aja sama partisi tempat menyimpan XAMPP punya Anda. Kemudian sesuaikan juga nama domain (ServerName) sesuai keinginan Anda, disitu saya mengisinya dengan azishapiddin.com
  • 3. Setelah ditambahkan, kurang lebih file konfigurasi-nya jadi seperti ini:
  • 
    # Virtual Hosts
    #
    # Required modules: mod_log_config
    
    # If you want to maintain multiple domains/hostnames on your
    # machine you can setup VirtualHost containers for them. Most configurations
    # use only name-based virtual hosts so the server doesn't need to worry about
    # IP addresses. This is indicated by the asterisks in the directives below.
    #
    # Please see the documentation at 
    # <URL:http://httpd.apache.org/docs/2.4/vhosts/>
    # for further details before you try to setup virtual hosts.
    #
    # You may use the command line option '-S' to verify your virtual host
    # configuration.
    
    #
    # Use name-based virtual hosting.
    #
    ##NameVirtualHost *:80
    #
    # VirtualHost example:
    # Almost any Apache directive may go into a VirtualHost container.
    # The first VirtualHost section is used for all requests that do not
    # match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
    #
    ##<VirtualHost *:80>
        ##ServerAdmin webmaster@dummy-host.example.com
        ##DocumentRoot "D:/xampp/htdocs/dummy-host.example.com"
        ##ServerName dummy-host.example.com
        ##ServerAlias www.dummy-host.example.com
        ##ErrorLog "logs/dummy-host.example.com-error.log"
        ##CustomLog "logs/dummy-host.example.com-access.log" common
    ##</VirtualHost>
    
    ##<VirtualHost *:80>
        ##ServerAdmin webmaster@dummy-host2.example.com
        ##DocumentRoot "D:/xampp/htdocs/dummy-host2.example.com"
        ##ServerName dummy-host2.example.com
        ##ErrorLog "logs/dummy-host2.example.com-error.log"
        ##CustomLog "logs/dummy-host2.example.com-access.log" common
    ##</VirtualHost>
    
    <VirtualHost *:80>
        ServerAdmin webmaster@azishapiddin.com
        DocumentRoot "D:/xampp/htdocs/azishapiddin"
        ServerName azishapiddin.com
        ErrorLog "logs/azishapiddin.coms-error.log"
        CustomLog "logs/azishapiddin.com-access.log" common
    </VirtualHost>
    
  • 4. Silahkan Save file httpd-vhosts.conf tersebut.

Pengetesan

  • 1. Sekarang kita restart Apache pada XAMPP yang kita gunakan dengan cara klik Stop pada Apache sampai warna hijau-nya menghilang, kemudian klik Start pada Apache-nya sampai kembali berwarna hijau.
  • 2. Sekarang buka browser, kemudian buka azishapiddin.com
  • 3. Jika muncul tampilan seperti diatas, berarti kita sudah berhasil membuat Virtual Host sendiri.
Mudah kan? Sekarang web yang kita simpan di direktori D:/xampp/htdocs/azishapiddin bisa diakses melalui azishapiddin.com.

Oke, sekian tutorial kali ini, jika masih ada pertanyaan silahkan tanyakan di kolom komentar.
Terima kasih atas kunjungannya, mohon maaf bila masih banyak kekurangan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..


EmoticonEmoticon