BAB 1

WEB SERVER XAMPP

Ada berbagai web server yang bisa ditemui. Masalahnya tidak semua web
server cocok dengan kebutuhan ketika kita akan membuat website sendiri. Anda
bisa saja menginstall lebih dari satu web server kedalam satu perangkat komputer,
karena mungkin Anda tidak tahu web server mana yang terbaik dan cocok untuk
proyek website Anda. Bahkan mungkin dari Anda akan menemukan error ketikan
satu web server dijalankan, karena port yang digunakan ternyata sudah digunakan
oleh web server yang lainnya. Untuk itu, disarankan agar melakukan install satu
web server saja pada perangkat komputer Anda.
Buku ini sengaja membahas tetang instalasi dan peggunaan XAMPP sebagai
web server. XAMPP memang terkenal karena kemudahan dalam penggunaannya.
Selain itu, banyak sekali tutorial XAMPP jika kita masih kesulitan dalam
menggunakannya dan cara mengintsallnya pun tidak terlalu susah.
XAMPP adalah aplikasi yang memungkinkan kita untuk membuat web server
lokal untuk melakukan pengetesan website. XAMPP itu singkatan, dimana masing-
masing hurufnya memiliki kepanjangan sendiri. X (Cross) berarti fleksibel,
maksudnya aplikasi ini dapat dipasang di lintas platform (Sistem Operasi). A untuk
Apache, yang merupakan web server dari modul ini. M untuk MySQL merupakan
aplikasi untuk mengelola database.  P untuk PHP, modul untuk menjalankan script
PHP dan P untuk Perl, juga untuk menjalankan bahasa Perl.
Untuk mendapatkan file installer XAMPP, kita dapat menelusurinya melalui
alat penelusuran seperti Google Chrome seperti ini:

Gambar 1.1

WEB SERVER XAMPP | 1

Atau mengetikan langsung apachefriends.org pada browser seperti ini :

Gambar 1.2

Kemudian kita akan menemukan dashboar dari apachefrends.org :

Gambar 1.3

Karena dalam pembahasan berikutnya, kita akan mengupas tentang

framework e-commerce dari Prestashop yang sampai buku ini ditulis masih
menggunakan PHP 7, untuk itu unduhlah XAMPP dengan PHP varsi 7.4.29.

1.1 Install XAMPP

Setelah pengunduhan selesai, masuklah ke direktori atau folder dimana hasil

unduhan tersimpan. Di sana Anda akan menemukan file installer berikut ini :

Untuk melakukan instalasi, selanjutnya dapat mengikuti langkah-langkah

berikut ini.

2 | WEB SERVER XAMPP

1. Dobel klik file xampp-windows-x64-7.4.29-1-VC15-installer dan jendela
selamat datang segera ditampilkan.

Gambar 1.4

2. Tekan tombol Next, selanjutnya Anda diminta untuk memilih komponen yang
akan diinstall. Beberapa pilihan seperti Apache dan PHP adalah bagian penting
untuk menjalankan website dan akan otomatis diinstal. Silakan centang MySQL
dan phpMyAdmin, untuk pilihan lainnya biarkan saja, kemudian klik tombol
Next.

Gambar 1.5

WEB SERVER XAMPP | 3

3. Selanjutnya tentukan dimana hasil instalasi akan disimpan. Sebaiknya hasil
instalasi tidak disimpan di drive C, atau drive dimana operating sistem
disimpan dan beroperasi. Pada tampilan ini, hasil instalasi diarahkan ke drive D
dengan dengan folder XAMPP. Selanjutnya tekan tombol Next.

Gambar 1.6

4. Pada jendela pemilihan bahasa, pilih bahasa Inggris (English), dan klik tombol
Next.

Gambar 1.7

5. Pada halaman selanjutnya, akan ada pilihan apakah kita ingin menginstal
Bitnami untuk XAMPP, dimana nantinya dapat Anda gunakan untuk install
WordPress, Drupal, dan Joomla secara otomatis. Tekan tombol Next untuk
melanjutkan.

Gambar 1.8

4 | WEB SERVER XAMPP

6. Jendela berikutnya memperlihatkan instalasi XAMPP akan segera dilakukan.
Klik tombol Next.

Gambar 1.9

7. Proses intalasi XAMPP sedang berlangsung.

Gambar 1.10

8. Apabila waktu instalasi menampilkan jendela, seperti di bawah ini, klik saja
tombol Allow access.

Gambar 1.11

WEB SERVER XAMPP | 5

9. Proses instalasi XAMPP telah selesai.

Gambar 1.12

Pada tampilan ini, sebelum menekan tombol Finish, kita diberikan pilihan
apakah ingin langsung menjalankan XAMPP atau melewatkannya. Apabila ingin
langsung menjalankan aplikasi XAMPP maka memberikan cetang pada bagian
Atau menghilangkan centangnya apabila
ingin menjalakannya dilain kali melalui menu Windwos.

1.2 Menjalankan XAMPP

Jalankan XAMPP Control Panel melalui menu Start Windows, sebagaimana

terlihat pada gambar di bawah ini.

Gambar 1.13

6 | WEB SERVER XAMPP

Kemudian aktifkan Apache dan MySQL dengan menekan tombol Start pada posisi
barisnya masing-masing. Apabila ada seperti ini, klik saja tombol Allow access.

Gambar 1.15

Sekarang perhatikan tampilan XAMPP dimana Apache menempati port 80

dan 433 dan MySQL yang menempati port 3306 sudah dalam keadaan aktif.

Gambar 1.16

1.3 Pengujian Server Apaceh dan Model Database MySQL

Untuk memeriksa atau menguji apakah Apache sudah berjalan dengan baik,
kita cukup menekan tombol Admin Apache pada XAMPP Control Panel.

WEB SERVER XAMPP | 7

Dengan menekan tombol tersebut, dashboard dari Apache Friends akan
tampil.

Gambar 1.17

Untuk melihat versi PHP yang digunakan, klik saja menu PHPInfo.
Gambar di bawah ini memperlihatkan spesifikasi interpreter dari PHP Versi
7.4.29 yang terinstal.

Gambar 1.18

8 | WEB SERVER XAMPP

 Kembali ke dashboard Apache Friends untuk melihat MySQL sudah bisa
berjalan atau belum. Sekarang klik menu phpMyAdmin. Apabila sudah berjalan,
akan terlihat tampilan seperti di bawah ini.

Gambar 1.19

Dengan demikian PHP dan MySQL, keduanya sudah bisa bejalan pada server
Apache melalui pengoperasian XAMPP. PhpMyAdmin bisa juga dibuka melalui
tombol Admin pada XAMPP Control Panel.

1.4 Menggganti Port Apache dan MySQL di XAMPP

Apabila telah selesai instalasi ternyata port yang digunakan Apache dan
MySQL tidak dapat diaktifkan, karena port tersebut salah satu atau keduanya
ternyata telah digunakan oleh aplikasi lain, sebagaimana terlihat pada gambar
berikut ini:

Gambar 1.20

WEB SERVER XAMPP | 9

 Sebagai mana disebutkan sebelumnya, developer bisa saja melakukan
instalasi lebih dari satu web server. Misalnya satu komputer bisa saja diinstall web
server seperti XAMPP, juga didalamnya diinstall AMPPS, WAMPServer, atau
Laragon. Setiap web server akan menempatkan komponennya dalam port masing-
masing. Hal ini sangat memungkinkan terjadi bentrokan, sehingga satu web server
tidak dapat dijalankan karena port sudah digunakan oleh web server lainnya. Agar
tidak terjadi penggunaan port yang sama, maka salah satu dari web server harus
diperbaiki atau diganti kode portnya.
Istilah port sendiri dalam komputer banyak macam tipe dan bentuk atau
jenisnya. Yang dimaksud dengan port pada bahasan ini adalah logical port yaitu
port yang digunakan untuk operasi layanan sistem file. Lebih mudahnya, port logic
ini berarti tidak terlihat secara fisik namun tetap diakui keberadaannya layaknya
sebuah software pada komputer.
Port 3306 adalah port default untuk protokol MySQL, yang digunakan oleh
klien mysql, MySQL Connector, dan utility seperti mysqldump dan mysqlpump.

1.4.1 Menggganti Port Apache di XAMPP

Server Apache dalam XAMPP menggunakan port 80. Fungsinya adalah untuk
melakukan peramban/browser yang terhubung ke halaman web di internet. Port
80 pada dasarnya menunggu klien web untuk meminta koneksi. Setelah koneksi
berhasil dibuat, user akan terhubung ke World Wide Web (WWW) dan
mendapatkan akses ke berbagai halaman web di internet. Alternatif dari port 80,
bisa digunakan port 81 atau 8080.
Server Apache dalam XAMPP juga menggunakan Port 443 yang berfungsi
untuk menghubungkan user ke internet dengan membuat koneksi antara halaman
web dan browser yang terhubung ke World Wide Web (WWW). Port 443 ini jauh
lebih aman daripada protokol HTTP yang masih menggunakan port 80. Port 443
mampu melindungi berbagai informasi yang ada di dalam server. Port Ini pada
dasarnya mengenkripsi dan mengotentikasi paket jaringan sebelum
mentransfernya melalui jaringan untuk meningkatkan keamanan. Agar port 433
bisa digunakan, maka kedalam server harus sudah terinstal SSL yaitu  metode yang
memastikan setiap informasi data akan dienkripsi sehingga tidak mudah dibaca
oleh pihak lain.

10 | WEB SERVER XAMPP

 Gambar 1.21

1. Untuk merubah port 80, lakukan langkah berikut ini :

a. Klik tombol config dan pilih menu Apache (httpd.conf)

Gambar 1.22

b. Selanjutnya akan tampil isi dari file httpd.conf seperti ini :

Gambar 1.23

c. Dari layar editor tersebut, cari port 80

WEB SERVER XAMPP | 11

 Gambar 1.24

d. Perhatikan data yang dicari sudah ditemukan. Terlihat di sini pada baris ke-
60, terulis Listen 80. Kita bisa menonkatifkan baris tersebut dengan
memberikan tanda # didepannya, atau mengganti angka tersebut.

Gambar 1.25

e. Pada tulisan ini, teks Listen 80 tersebut hanya dinonaktifkan dengan

merubahnya menjadi # Listen 80. Kemudian ditambahkan pada baris
berikutnya dengan teks Listen 8080.

12 | WEB SERVER XAMPP

 Gambar 1.26
f. Rekam hasil perubahan dari file httpd.conf tersebut.

Gambar 1.27

2. Untuk merubah port 443, lakukan langkah berikut ini :

a. Kembali ke XAMPP Controller. Kemudian klik kembali tombol Config dan
pilih menu Apache (httpd-ssl.conf).

WEB SERVER XAMPP | 13

 Gambar 1.28

b. Selanjutnya akan tampil isi dari file httpd-ssl.conf seperti ini :

Gambar 1.1

c. Dari layar editor tersebut, cari port 443

Gambar 1.29

d. Perhatikan data yang dicari sudah ditemukan. Terlihat di sini pada baris ke-
36, terulis Listen 443. Kita bisa menonkatifkan baris tersebut dengan
memberikan tanda # didepannya, atau mengganti angka tersebut.

14 | WEB SERVER XAMPP

 Gambar 1.30

g. Pada tulisan ini, teks Listen 443 tersebut hanya dinonaktifkan dengan
merubahnya menjadi # Listen 433. Kemudian ditambahkan pada baris
berikutnya dengan teks Listen 4433.

Gambar 1.31

h. Rekam hasil perubahan dari file httpd-ssl.conf tersebut.

Gambar 1.32

3. Mengaktfkan port Apache dengan kode port yang baru

a. Sekarang kembali ke XAMPP Controller. Dari sana tekan tombol Config
sehingga tampilnya seperti ini :

WEB SERVER XAMPP | 15

 Gambar 1.33

b. Pada tampilan tersebut, klik tombol Service and Port Settings. Apabila
pada bagian Main Port dan SSL Port masih terisi dengan port yang lama,
maka ganti port tersebut dengan port baru masing-masing dengan kode
8080 dan 4433. Kemudian tekan tombol Save.

Gambar 1.34
c. Apabila ditemukan masalah seperti ini :

 Untuk mengatasinya, kita harus masuk ke folder D:\xampp kemudian

cari file xampp-controler ini :

 Klik menu Properties, sehingga tampil seperti ini :

16 | WEB SERVER XAMPP

 Gambar 1.35

Gambar 1.36

 Perhatikan pada tampilan ini, untuk Administrator bagian Permissions

for Administrators seluruhnya diberik centang. Coba sekarang pada
Group or user names pilih atau klik Everyone.

WEB SERVER XAMPP | 17

 Gambar 1.37
 Terlihat untuk user ini yang dicetang hanya bagian Read saja. Ini
artinya, user tersebut tidak dapat melakukan perubahan pada file
xampp-controler.ini. Agar user selain administrator juga dapat
melakukan perubahan terhadap file xampp-controler.ini, maka klik
saja tombol edit, selanjutnya pada bagian Permissions or Everyone,
klik Full Control. Perhatikan sekarang, user selain administrator dapat
melakukan manipulasi terhadap file xampp-controler.ini.

Gambar 1.34

18 | WEB SERVER XAMPP

  Sekarang klik tombol Ok.

e. Kembali tampilan XAMPP Controller. Kemudian lakukan ulang langkah a

dan b di atas.

Gambar 1.38

f. Tekan tombol Save pada jendela Service Setting dan jendela

Configuration of Control Panel.
g. Untuk melihat perubahan port pada Apache, aktifkan Apache dengan
mengklik tombol Start. Perubahan port berhasil apabila tidak terjadi error
dan pada bagian Port (s), seperti terlihat pada gambar di bawah ini.

Gambar 1.35

WEB SERVER XAMPP | 19

 d. Untuk melihat apakah kita sudah dapat melakukan perubahan port, coba
dari broser ketikan localhost:8080

Gambar 1.35

e. Apabila berhasil, maka dashboard dari Apache Friends akan ditampilkan

seperti di bawah ini.

Gambar 1.36
Sampai di sini kita sudah dapat melakukan perubahan port untuk
server Apache di XAMPP. Port lama untuk server Apache adalah 80 dan
443, port ini bisa diganti tidak hanya dengan kode 8080 dan 4433 sebagai
mana pemaparan di atas. Tetapi bisa diganti dengan 81 dan 445 atau 8081
dan 445, atau kombinasi kode lainnya, asalkan port yang baru belum
digunakan oleh aplikasi yang lain.

1.4.2 Menggganti Port MySQL

Nonaktifkan MySQL dan Apace, seperti terlihat pada gambar di bawah ini.

Klik tombol Config yang sebaris dengan MySQL dan klik menu my.ini

20 | WEB SERVER XAMPP

Sekarang ditampilan isi dari file my.ini

Nonaktifikan baris teks port=3306 dengan menambahkan tanda # didepan teks

tersebut
Aktif Nonaktif
port=3306 #port=3306
Kemudian tambahkan baris seperti ini :

WEB SERVER XAMPP | 21

Rekam ulang file my.ini dan tutup editor tersebut.

Sekarang kembali ke XAMPP Control Panel.

22 | WEB SERVER XAMPP

Klik tombol Config, kemudian pada jendela Configuration of Control Panel, klik
tombol Service and Port Settings, dan pada jendela Service Settings, pilih tab
MySQL, kemudian isikan port 3308 untuk menggantikan kode port yang lama.
Rekam perubahan port.
Untuk melihat hasil perubahan port, pada XAMPP Control Panel, aktifkan server
Apache dan MySQL. Hasilnya adalah port yang digunakan telah berubah.
PORT LAMA PORT BARU

Sekarang! Kembalikan port baru menjadi port lama untuk Apache dan MySQL.

EVALUASI
1. Berikan makna dari setiap huruf dari XAMPP!
2. Selain dari XAMPP sebagai web server yang bisa dijalankan pada
komputer lokal, sebutkan tiga web serve lokal lainnya, kemudian
berikan penjelasan/uraian kelebihan dan kekurangannya!
3. Buat langkah-langkah dalam melakukan instalasi XAMPP!
4. Apabila port yang digunakan untuk server Apache pada XAMPP
ternyata sudah digunakan oleh aplikasi lain, bagaimana cara
menanggulanginya?
5. Apabila port yang digunakan untuk MySQL pada XAMPP ternyata sudah
digunakan oleh aplikasi lain, bagaiman cara menanggulanginya?

WEB SERVER XAMPP | 23

6. Apa yang harus dilakukan jika penggantian port ternyata tidak bisa
dilakukan perekaman malah muncul informasi error seperti berikut ini?

24 | WEB SERVER XAMPP

WEB SERVER XAMPP | 25