a) Instalasi Software

a.1 Waktu Pelaksanaan Praktikum

Durasi kegiatan praktikum adalah 170 menit, dengan rincian sebagai berikut.

a. 15 menit untuk pengerjaan tes awal atau wawancara tugas pendahuluan.

b. 60 menit untuk penyampaian materi.
c. 45 menit untuk pengerjaan jurnal, tes akhir, atau tugas.
d. 50 menit pengayaan

a.2 Tujuan

Setelah mengikuti praktikum ini, mahasiswa diharapkan dapat:

1. Melakukan instalasi web server.

2. Melakukan konfigurasi sederhana terhadap web server.
3. Mengoperasikan database tool untuk membuat database dan tabel.

a.3 Dasar Teori

a) Web Server, PHP Interpreter, dan Database Server

Teknologi web menggunakan arsitektur client-server. Karena itu, untuk dapat mulai membangun sebuah
aplikasi web, kita harus memfungsikan komputer kita sebagai web server. Untuk itu, kita harus
menginstal software khusus web server. Setelah software tersebut terinstal, komputer kita dapat
berfungsi sebagai web server yang dapat melayani request yang dikirim oleh client. Web server software
yang akan kita gunakan adalah salah satu web server software yang paling populer yaitu Apache Web
Server.

Selain itu, karena pada mata kuliah ini kita akan menggunakan bahasa pemrograman PHP, maka kita
juga harus menginstal software yang dapat mengeksekusi kode PHP yang biasa disebut dengan PHP
interpreter. PHP interpreter yang akan kita gunakan adalah PHP interpreter standar. Kemudian kita juga
perlu menginstal sebuah database management system (DBMS) karena sebuah website berfungsi untuk
mengolah yang disimpan di database. DBMS software yang akan kita gunakan adalah MariaDB yang
merupakan alternatif dari MySQL.

Kita dapat men-download dan menginstal ketiga software tersebut secara terpisah. Namun karena
ketiga software tersebut seringkali digunakan bersamaan oleh pengembang website, ada beberapa
software pihak ketiga yang menggabungkan ketiga software tersebut menjadi satu software. Tujuannya
adalah agar pengembang dapat melakukan instalasi dan konfigurasi ketiga software tersebut dengan

Modul Praktikum Pemrograman Web 1

lebih cepat. Beberapa software pihak ketiga tersebut yang dapat kita gunakan adalah XAMPP, WinNMP,
WampServer, MAMP, dan lain-lain. Pada praktikum ini, kita akan menggunakan XAMPP.

b) Web Browser

Setelah kita menginstal web server, kita membutuhkan web browser untuk menampilkan aplikasi web
yang kita buat. Disarankan untuk menggunakan web browser modern seperti Google Chrome, Mozilla
Firefox, atau Opera.

c) Text Editor

Untuk menulis kode PHP, kita dapat menggunakan text editor apapun, mulai dari yang paling sederhana
seperti Notepad sampai IDE yang kompleks seperti NetBeans IDE. Tidak ada keharusan terhadap
pemilihan text editor ini. Beberapa text editor yang sering digunakan adalah Notepad++, Sublime Text,
Atom, dan Visual Studio Code.

d) Database Tool

Secara default, umumnya software DBMS hanya menyediakan antarmuka berupa console. Untuk
mengolah data, antarmuka ini seringkali kurang nyaman dalam penggunaannya. Untuk itu, ada
beberapa software yang berfungsi sebagai tool untuk mengolah data yang tersimpan di DBMS. Beberapa
tool yang sering digunakan adalah PHPMyAdmin, HeidiSQL, DBVisualizer, Adminer, dan DBeaver.
Beberapa dari tool-tool tersebut seperti PHPMyAdmin dan Adminer berbasis web sehingga
membutuhkan web server sedangkan yang lainnya berbasis desktop.

a.4 Prosedur Praktikum

a) Download dan Instalasi

Download satu software dari masing-masing kategori berikut lalu lakukan instalasi.

Web Server, PHP Interpreter, dan Database Server

Software Website
XAMPP (disarankan) https://www.apachefriends.org/download.html
WinNMP https://winnmp.wtriple.com/
WampServer http://www.wampserver.com
MAMP https://www.mamp.info

Web Browser
Software Website
Google Chrome (disarankan) https://www.google.com/chrome/browser/desktop/
Mozilla Firefox https://www.mozilla.org/firefox/
Opera http://www.opera.com/download

Modul Praktikum Pemrograman Web 2

 Text Editor
Software Website
Notepad++ https://notepad-plus-plus.org/
Sublime Text https://www.sublimetext.com/
Atom https://atom.io/
Visual Studio Code https://code.visualstudio.com/

Database Tool
Software Website
PHPMyAdmin https://www.phpmyadmin.net/, sudah tercakup di XAMPP
HeidiSQL (disarankan) https://www.heidisql.com/
DBVisualizer http://www.dbvis.com/
Adminer https://www.adminer.org/, sudah tercakup di WinNMP
DBeaver https://dbeaver.jkiss.org/

b) Percobaan Web Server

1. Jalankan (start) web server yang telah terinstal.

2. Buka browser lalu buka URL “http://localhost”. Pastikan muncul tampilan default dari web server.
3. Buka Notepad menggunakan akun administrator lalu buka file “C:\Windows\System32\drivers\
etc\hosts”. Tambahkan baris berikut di akhir file tersebut kemudian simpan.

# ganti “mywebsite.id” dengan string apapun

127.0.0.1 mywebsite.id
4. Buka browser dengan URL “http://mywebsite.id". Apakah yang terjadi? Apakah fungsi dari file
“hosts”? Beri penjelasan.

-------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------

5. Buka browser dengan URL “http://mywebsite.id:81". Apakah yang terjadi?

6. Buka Notepad lalu buka direktori web server yang telah terinstal (misal: “D:\xampp”) kemudian
buka file “apache\conf\httpd.conf”. Cari baris “Listen 80” dan ubah menjadi “Listen 81” kemudian
simpan.
7. Restart (stop lalu start) web server lalu buka URL “http://mywebsite.id:81". Apa yang terjadi?
Buka kembali URL “http://mywebsite.id". Apa yang terjadi? Apakah sebenarnya angka 80 dan 81
tersebut? Beri penjelasan.

Modul Praktikum Pemrograman Web 3

-------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------

8. Kembalikan konfigurasi ke “Listen 80” lalu restart kembali web server.

c) Percobaan Database Server

a. Buka XAMPP Control Panel lalu klik tombol Shell untuk membuka XAMPP Console.
b. Ketik “mysqladmin –u root password <password_baru>”
c. Buka database tool yang telah terinstal. Lakukan login menggunakan default credentials yaitu
username “root” dan password yang baru dibuat.
d. Buat database baru dengan nama “pemweb” lalu buat tabel berikut dengan nama “user”.

Field Tipe Data

id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY
username VARCHAR (50) NOT NULL UNIQUE
password VARCHAR (255) NOT NULL
name VARCHAR (255) NULL DEFAULT NULL

Modul Praktikum Pemrograman Web 4