OPTIMIZED TITLE

LATIHAN PRAKTIKUM PEMROGRAMAN APLIKASI BERBASIS WEB
BAB : PENGANTAR PRAKTIKUM

INSTALASI SOFTWARE
HTML, CSS DAN JAVASCRIPT
NAMA : FATHAN MUBINA
NIM : 185150400111055
ASISTEN : 1. HANIF NAUFAL ASHARI
2. KATRINA PUSPITA
TGL PRAKTIKUM: 4 FEBRUARI 2020
1. PERCOBAAN WEB SERVER
LATIHAN
A. Soal
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.
8. Kembalikan konfigurasi ke “Listen 80” lalu restart kembali web server.
B. Screenshoot
1.
2.
3.
4.
5.
6.
7.
8.
C. Penjelasan
Ketika kita menambahkan baris IP address beserta dengan alamat web yaitu
127.0.0.1 my.website.id pada notepad, maka yang awalnya halaman default yang
ditampilkan pada localhost akan dialihkan pada alamat IP address yang baru. Kemudian
untuk pengubahan yang dilakukan pada httpd.conf yang mengubah line listen yang awalnya
80 menjadi 81 adalah langkah mengubah port server. Pada mulanya port server adalah 80,
dimana kita tidak perlu memasukkan ID tersebut pada pengetikan alamat web biasa. Hal
ini juga menjelaskan mengapa pada awalnya kita tidak dapat membuka mywebsite.id:81
karena port awal server berupa 80. Ketika kita mengubah line listen menjadi 81 otomatis
ketika kita mengetikan alamat website dengan id:81, halaman default dapat diakses
sedangkan tanpa id, halaman tidak dapat diakses. Sehingga fungsi listen dapat disimpulkan
adalah mengubah port pada sebuah IP address yang diinginkan.
2. PERCOBAAN DATABASE SERVER
Latihan
A. Soal
1. Buka XAMPP Control Panel lalu klik tombol Shell untuk membuka XAMPP
Console.
2. Ketik “mysqladmin –u root password <password_baru>”
3. Buka database tool yang telah terinstal. Lakukan login menggunakan default
credentials yaitu username “root” dan password yang baru dibuat.
4. 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
1.
2.
3.
4.
C. Penjelasan
Pertama ketika kita membuka shell pada control xampp yang kita lakukan adalah
mengganti password default yang ada dalam mySQL, sehingga yang tadinya tidak ada
password, maka ditambahkan password berupa akusukapraktikum untuk user root.
Masalah sempat terjadi dikarenakan pada file config.inc.php yang merupakan file default
untuk login php memiliki kondisi untuk tidak boleh mengganti password sehingga field
password harus selalu kosong. Hal ini diperbaiki dengan mengganti nilai true pada line
AllowNoPassword menjadi false, sehingga jika kita mengganti password pada user root
bisa dilakukan. Setelah itu login dapat dilakukan, kemudian langkah selanjutnya adalah
memasukkan tabel sesuai dengan kriteria dan hasilnya kita akan mendapatkan id dengan
username root yang memiliki password akusukupraktikum.
3. HTML, CSS, JAVASCRIPT
LATIHAN 1
A. Soal
1. Jalankan kode pada syntax tanpa menggunakan server. Apa yang terjadi? Kemudian hapus
tag <body>. Amati apa yang terjadi lalu simpulkan.
B. Screenshoot
2.
C. Syntax
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>
D. Penjelasan
Akan keluar tulisan hello world yang besar diikuti dengan tulisan belajar HTML dalam
ukuran biasa. Ketika tag body dihapus maka tidak terjadi apa-apa, hal ini dikarenakan tag body
tidak diisi.
LATIHAN 2
A. Soal
1. Jalankan kode tersebut kemudian amati yang terjadi. Apakah ada perbedaan daripada
sebelumnya? Beri penjelasan.
2. Termasuk cara apakah penulisan CSS pada kode di atas?
3. Ubah cara penulisan CSS ini dalam tipe linked (external) style sheet.
B. Screenshoot
1.
C. Syntax
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
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>
19 <p>Belajar HTML<p>
20 </body>
21 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <link rel="stylesheet" type="text/css" href="a.css">
7 </head>
8 <body>
10 <p>Belajar HTML<p>
11 </body>
12 </html>
13 Eksternal css
14 h1 {
15 color:orange;
16 text-align:center;
17 }
18 p {
20 font-size:40px;
21 }
D. Penjelasan
Perbedaan yang terlihat adalah tulisan hello world yang berubah menjadi warna
orange dengan ukuran yang lebih kecil dan berada di tengah. Hal ini terjadi karena kode
yang telah ada diberikan style berupa CSS, dimana kita dapat mengubah suatu ukuran,
warna, dan posisi dari sebuah teks.
Gaya penulisan CSS pada sintaks awal adalah Embedded Style Sheet, dimana tag
style dimasukkan dalam tag head. Gaya penulisan yang lain adalah linked external sheet
yang dapat dilihat di tabel sintaks yang kedua.
LATIHAN 3
A. Soal
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
Fungsi getElementById pada baris ke-10 adalah mengambil value yang memiliki
inputan dengan syarat id yang akan dipanggil telah dinyatakan sebelumnya. Pada kasus ini
id yang dipanggil adalah “z”, pada pernyataan sebelumnya z adalah hasil pertambahan x
dan y dimana x bernilai 5 dan y bernilai 2 sehingga dihasilkan nilai z berupa 7.
LATIHAN 4
A. Soal
1. Jalankan kode di atas dengan server dan amati apa hasil dari kode di atas.
2. Kemudian jalankan kembali kode diatas tanpa menggunakan server. Amati apakah
ada perbedaan dengan sebelumnya?
3. Simpulkan bagaimana sebenarnya prinsip kerja dari JavaScript.
B. Screenshoot
C. Syntax
1 <!DOCTYPE html>
2 <html lang=”en”>
3 <head>
4 <script>
5 function convert(degree) {
6 if (degree == ‘C’) {
7 F = document.getElementById(‘c’).value * 9 / 5 + 32;
8 document.getElementById(‘f’).value = Math.round(F);
9 } else {
10 C = (document.getElementById(‘f’).value -32) * 5 / 9;
11 document.getElementById(‘c’).value = Math.round(C);
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>
D. Penjelasan
Sintaks dapat berjalan dengan baik pada kedua skema. Hal ini membuktikan
bahwasanya file JavaScript dieksekusi melalui pihak client atau user.
LATIHAN 5
A. Soal
Buatlah fungsi kalkulator sederhana dengan menggunakan JavaScript.
B. Screenshoot
C. Syntax
1 <html>
2 <head>
3 <title>Kalkulator Sederhana</title>
4 <style type="text/css">
5 p {
7 font-size:20px;
8 }
9 </style>
10 </head>
11 <body>
12 <script language="JavaScript" type="text/javascript">
13 function hitung(){
14 var myForm = document.form1;
15 var x=eval(myForm.x.value);
16 var y=eval(myForm.y.value);
17 var pil= myForm.opt.value;
18 if (pil == "tambah") {
19 var z = x + y;
20 }else if (pil == "kurang") {
21 var z = x - y;
22 } else if (pil == "kali") {
23 var z = x * y;
24 } else if (pil == "bagi") {
25 var z = x / y;
26 }
27 myForm.hasil.value = z;
28 myForm.x.value = "";
29 myForm.y.value = "";
30 }
31 function resetForm(){
32 document.form1.reset();
33 }
34 </script>
35 <div align="left">
36 <form name="form1" action="#">
37 <p>bilangan 1 <input type="text" name="x" /></p>
38 <p>bilangan 2 <input type="text" name="y" /></p>
39 <p>hasil operasi <input type="text" name="hasil" disabled="true"
/></p>
40 <p>operator <select name="opt"></p>
41 <option value="tambah"> + (tambah)</option>
42 <option value="kurang"> - (kurang)</option>
43 <option value="kali"> * (kali)</option>
44 <option value="bagi"> / (bagi)</option>
45 </select>
46 <input type="button" value="=" onClick="hitung()" />
47 <input type="button" value="CLEAR" onClick="resetForm()" />
48 </form>
49 </body>
50 </html>
D. Penjelasan
Program dapat berjalan dengan pertama meminta inputan dari user untuk bilangan
pertama dan bilangan kedua, kemudian user memilih pengoperasian apa yang diinginkan
ada pertambahan, pengurangan, perkalian, dan pembagian. Jika telah memilih operasi
pencet = maka pada kotak hasil operasi akan menampilkan hasil pengoperasian kedua
bilangan. Jika ingin mengulang operasi yang berbeda, dapat menekan tombol clear pada
bagian kanan bawah.

OPTIMIZED TITLE

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

OPTIMIZED TITLE

Diunggah oleh

Hak Cipta:

Format Tersedia

LATIHAN PRAKTIKUM PEMROGRAMAN APLIKASI BERBASIS WEB

BAB : PENGANTAR PRAKTIKUM

1. PERCOBAAN WEB SERVER

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

2. PERCOBAAN DATABASE SERVER

Buatlah fungsi kalkulator sederhana dengan menggunakan JavaScript.

Anda mungkin juga menyukai