LATIHAN PRAKTIKUM PEMROGRAMAN WEB

BAB : PENGANTAR PRAKTIKUM

INSTALASI SOFTWARE
HTML, CSS, DAN JAVASCRIPT
NAMA : MUHAMMAD FARDAN FAUZAN
NIM :195150407111028

ASISTEN : 1. QONITA NUR FARHANA

2. MUHAJIR
TGL PRAKTIKUM: 03 MARET 2021

1. PERCOBAAN WEB SERVER

LATIHAN 1
A. Soal

Jalankan (start) web server yang telah terinstal.

B. Screenshoot

C. Syntax

D. Penjelasan
Web server berhasil dijalankan dengan menggunakan Apache dan MySQL dari software
XAMPP.
LATIHAN 2
A. Soal

Buka browser lalu buka URL “http://localhost”. Pastikan muncul tampilan default dari
web server.

B. Screenshoot

C. Syntax

D. Penjelasan
Hasil dari site yang dituju oleh h ttp://localhost berhasil ditampilkan secara default dari
web server.

LATIHAN 3
A. Soal

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
B. Screenshoot
 C. Syntax

D. Penjelasan
Pada file hosts sudah ditambahkan text berisi “127.0.01 fardan.id” pada bagian akhir
file tersebut.

LATIHAN 4
A. Soal

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

B. Screenshoot
 C. Syntax

D. Penjelasan
Ketika membuka site dengan URL “http://fardan.id” akan muncul halaman default seperti
ketika mengakses localhost melalui browser. Ini membuktikan bahwa text berbentuk IP
dan address yang disimpan pada file hosts bekerja dengan baik. Hosts berfungsi untuk
memetakan suatu IP, dan IP tersebut dijadikan nama server.

LATIHAN 5
A. Soal

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

B. Screenshoot

C. Syntax

D. Penjelasan
Terjadi error dikarenakan halaman tersebut tidak dapat diakses. Hal ini disebabkan oleh
port 81 berbeda dengan port localhost yang berisi 80 yang mana sudah tercatat pada file
hosts.

LATIHAN 6
A. Soal

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.
 B. Screenshoot

C. Syntax

D. Penjelasan
Text berisi “Listen 81” ditambahkan pada file httpd.conf untuk menggantikan text
sebelumnya yang berisi “Listen 80”

LATIHAN 7
A. Soal

Restart (stop lalu start) web server lalu buka URL “http://fardan.id:81". Apa yang terjadi?
Buka kembali URL “http://fardan.id". Apa yang terjadi? Apakah sebenarnya angka 80
dan 81 tersebut? Beri penjelasan.
B. Screenshoot

C. Syntax

D. Penjelasan
Terjadi pergantian port dari 80 menjadi 81, sehingga ketika membuka
“http://fardan.id:81” akan ditampilkan halaman default web server. Namun ketika
membuka “http://fardan.id:80”, halaman tersebut tidak dapat diakses karena portnya
berbeda. Kedua angka tersebut merupakan port untuk memberikan akses dalam membuka
halaman web yang kita tuju.
LATIHAN 8
A. Soal

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

B. Screenshoot

C. Syntax

D. Penjelasan
Port telah diubah menjadi 80 atau default dengan menuliskan “Listen 80” pada file
httpd.conf. Jadi setelah web server direstart, “http://fardan.id” dapat dibuka dan
menampilkan halaman default.
2. PERCOBAAN DATABASE SERVER

LATIHAN 1
A. Soal

Buka XAMPP Control Panel lalu klik tombol Shell untuk membuka XAMPP Console.

B. Screenshoot

C. Syntax

D. Penjelasan
XAMPP Console berhasil dibuka dengan mengklik tombol Shell pada XAMPP Control
Panel.

LATIHAN 2
A. Soal

Ketik “mysqladmin –u root password <password_baru>”

B. Screenshoot
 C. Syntax

1 mysqladmin –u root password

D. Penjelasan

Terjadi error pada saat mengganti password, tertulis disitu saya tidak bisa connect ke localhost.

LATIHAN 3
A. Soal

Buka database tool yang telah terinstal. Lakukan login menggunakan default credentials
yaitu username “root” dan password yang baru dibuat.

B. Screenshoot
 C. Syntax

D. Penjelasan

Terjadi error pada saat masuk ke database tool tertulis disitu tidak bisa connect karena pengaturan
salah

LATIHAN 4
A. Soal

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

B. Screenshoot
 C. Syntax

D. Penjelasan

3. HTML, CSS, JAVASCRIPT

LATIHAN 1
A. Soal

Tulis kode di bawah ini.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 </head>
7 <body>
8 <h1>Hello World</h1>
9 <p>Belajar HTML</p>
10 </body>
11 </html>

Jalankan kode di atas tanpa menggunakan server. Apa yang terjadi? Kemudian hapus tag
<body>. Amati apa yang terjadi lalu simpulkan.
B. Screenshoot

a. Hasil dari kode dengan tag <body>

b. Hasil dari kode tanpa tag <body>

C. Syntax

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 </head>
7 <h1>Hello World</h1>
8 <p>Belajar HTML</p>
9 </html>

D. Penjelasan
LATIHAN 2
A. Soal

Tulis kode di bawah ini.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 <style type="text/css">
7 h1 {
8 color:orange;
9 text-align:center;
10 }
11 p {
12 font-family:"Times New Roman";
13 font-size:40px;
14 }
15 </style>
16 </head>
17 <body>
18 <h1>Hello World</h1>
19 <p>Belajar HTML<p>
20 </body>
21 </html>

a. Jalankan kode tersebut kemudian amati yang terjadi. Apakah ada perbedaan daripada
sebelumnya? Beri penjelasan.
b. Termasuk cara apakah penulisan CSS pada kode di atas?
c. Ubah cara penulisan CSS ini dalam tipe linked (external) style sheet.

B. Screenshoot

C. Syntax

index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 <link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <h1>Hello World</h1>
 10 <p>Belajar HTML<p>
11 </body>
12 </html>

style.css
1 h1 {
2 color:orange;
3 text-align:center;
4 }
5 p {
6 font-family:"Times New Roman";
7 font-size:40px;
8 }

D. Penjelasan

LATIHAN 3
A. Soal

Tulis kode di bawah ini.

1 <!DOCTYPE html>
2 <html lang=”en”>
3 <body>
4 <h1>Operasi JS</h1>
5 <p id="demo"></p>
6 <script>
7 var x = 5; var y = 2;
8 var z = x + y; document.getElementById("demo").innerHTML = z;
9 </script>
10 </body>
11 </html>
12
13

Jalankan kode tersebut dan amati apa yang terjadi. Apa fungsi dari baris ke-10?

B. Screenshoot
 C. Syntax

1 <!DOCTYPE html>
2 <html lang=”en”>
3 <body>
4 <h1>Operasi JS</h1>
5 <p id="demo"></p>
6 <script>
7 var x = 5;
8 var y = 2;
9 var z = x + y;
10 document.getElementById("demo").innerHTML = z;
11 </script>
12 </body>
13 </html>

D. Penjelasan

LATIHAN 4
A. Soal

Tulis kode berikut ini.

1 <!DOCTYPE html>
2 <html lang=”en”>
3 <head>
4 <script>
5 function convert(degree) { if (degree == ‘C’) {
6 F = document.getElementById(‘c’).value * 9 / 5 + 32;
7 document.getElementById(‘f’).value = Math.round(F);
8 } else {
9 C = (document.getElementById(‘f’).value -32) * 5 / 9;
10 document.getElementById(‘c’).value = Math.round(C);
11 }
12 }
13
 14 </script>
15 </head>
16 <body>
17 <p>Masukkan angka pada masukan berikut:</p>
18 <input id="c" onkeyup="convert('C')"> derajat Celcius <br> equals<br>
19 <input id="f" onkeyup="convert('F')"> derajat Fahrenheit
20 </body>
21 </html>

B. Screenshoot
a. Dengan server

b. Tanpa server

C. Syntax

1
 D. Penjelasan

LATIHAN 5
A. Soal

Buat program untuk menghitung luas persegi panjang. Bisa input panjang dan lebar, ada
tombol yang jika di klik akan menampilkan output luas.

B. Screenshoot

C. Syntax

1 <!DOCTYPE html>
2 <html>
3 <body>
4 <h2>Program Menghitung Luas Persegi Panjang</h2>
5
6 <p>Input atau masukan angka yang diinginkan (dalam
7 cm):</p>
8 Panjang = <input id="pjg">
9 <br>
10 Lebar = <input id="lbr">
11 <br>
12 <br>
13 <input type="button" onclick="hitung()"
 14 value="Hitung">
15 <p id="demo"></p>
16 <script>
17 function hitung() {
18 var luas = document.getElementById("pjg").value *
19 document.getElementById("lbr").value;
20 document.getElementById("demo").innerHTML = "Luas = "
21 + luas + " cm";
22 }
23 </script>
24 </body>
25 </html>

D. Penjelasan