Bab 1-3 - 185150700111006 - YanuarOctavianus - PW - TI-A PDF

LATIHAN PRAKTIKUM PEMROGRAMAN WEB
BAB : PENGANTAR PRAKTIKUM

INSTALASI SOFTWARE
HTML, CSS, DAN JAVASCRIPT
NAMA : YANUAR OCTAVIANUS
NIM : 185150700111006
ASISTEN : 1. HILMI AZIZ BUKHORI
2. MUHAMMAD ARIEF HABIBIRRAHMAN
TGL PRAKTIKUM : 02 FEBRUARI 2020
MODUL 2 : INSTALASI SOFTWARE
PERCOBAAN WEB SERVER
SOAL 1
A. Soal
Jalankan (start) web server yang telah terinstal.
B. Screenshoot
C. Syntax
1
D. Penjelasan
Aplikasi web server (XAMPP) berhasil dibuka dengan membuka Apache.
SOAL 2
A. Soal
Buka browser lalu buka URL http://localhost. Pastikan muncul tampilan default dari web
server
B. Screenshoot
C. Syntax
D. Penjelasan
Setelah membuka http://localhost di dalam browser, maka akan tampilan default nya
(dashboard)
SOAL 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
Dengan memasukan ( 127.0.0.1 pejuanglaprak) berarti mengedit hosts
SOAL 4
A. Soal
Buka browser dengan URL http://mywebsite.id. Apakah yang terjadi? Apakah fungsi dari
file “host”? Beri penjelasan
B. Screenshoot
C. Syntax
D. Penjelasan
Saat di buka dengan URL yang baru di tambahkan ke hosts, maka akan menuju ke
localhost. Fungsi file tersebut mengubah alamat localhost menjadi pejuanglaprak
SOAL 5
A. Soal
Buka browser dengan URL http://mywebsite.id:81 Apakah yang terjadi?
B. Screenshoot
C. Syntax
D. Penjelasan
Halaman tidak di temukan
SOAL 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
File yang di buka oleh notepad mengganti Listen 80 menjadi Listen 81
SOAL 7
A. Soal
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 sebenernya angka 80
dan 81 tersebut? Beri penjelasan
B. Screenshoot
C. Syntax
D. Penjelasan
Setelah mengganti di notepad dan di tambahkan dengan :81, bisa di akses sedangkan
bila tidak menggunakan :81 tidak bisa diakses. Angka 80 dan 81 itu adalah nilai port, bila
port nya tidak sesuai maka tidak bisa di akses
SOAL 8
A. Soal
Kembalikan konfigutasi ke “Listen 80” lalu restart kembali web server
B. Screenshoot
C. Syntax
1
D. Penjelasan
Dikembalikan seperti semula
PERCOBAAN DATABASE SERVER
SOAL A
A. Soal
Buka XAMPP Control Panel lalu klik tombol Shell untuk membuka XAMPP Console.
B. Screenshoot
C. Syntax
D. Penjelasan
XAMPP berhasil di jalankan, lalu buka shell yang berada di kanan
SOAL B
A. Soal
ketik “mysqladmin -u root password <password_baru>”

B. Screenshoot
C. Syntax
1 mysqladmin -u root password
D. Penjelasan
Pada percobaan ini mengetikkan mysqladmin -u root password akan membuat
password baru
SOAL C
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
Masuk menggunakan username root dan password yang sudah di ganti
SOAL D
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
Disini bagaimana pembuatan database dari phpmyadmin
MODUL 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
Sebelum mengubah syntax:
Setelah mengubah syntax:

C. Syntax
1 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<h1>Hello World</h1>
<p>Belajar HTML</p>
</body>
</html>
D. Penjelasan
tidak terjadi perubahaan saat menghapus <body> saja
LATIHAN 2
A. Soal
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>
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
Syntax file HTML:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <style type="text/css">
7 </style>
8 </head>
9 <body>
11 <p>Belajar HTML<p>
12 </body>
13 </html>
Syntax file 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
a. Perbedaan yang terlihat pada sebelumnya adalah adanya baris 6 sampai 15 yang
membuat tulisannya memiliki warna, berada di tengah, dan memiliki font berbeda
b. Penulisan code CSS tersebut termasuk Embedded Style Sheet, karena berada di dalam
tag head
c. Pindahkan tag style yang ada di tag head ke tab baru lalu di simpan dengan format .css
LATIHAN 3
A. Soal
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>
Jalankan kode tersebut dan amati apa yang terjadi. Apa fungsi dari baris ke-10?
B. Screenshoot
C. Syntax
1 <!DOCTYPE html>
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 dari baris ke 10 adalah memberitahu browser untuk menulis nilai yang ada di
“z” di dalam html dengan id =”demo”
LATIHAN 4
A. Soal
1 <!DOCTYPE html>
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>
19 equals<br>
20 <input id="f" onkeyup="convert('F')"> derajat Fahrenheit
21 </body>
</html>
a. Jalankan kode di atas dengan server dan amati apa hasil dari kode di atas.
b. Kemudian jalankan kembali kode diatas tanpa menggunakan server. Amati apakah
ada perbedaan dengan sebelumnya?
c. Simpulkan bagaimana sebenarnya prinsip kerja dari JavaScript.
B. Screenshoot
C. Syntax
1 <!DOCTYPE html>
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>
19 equals<br>
20 <input id="f" onkeyup="convert('F')"> derajat Fahrenheit
21
22
</body>
23
</html>
24
D. Penjelasan
a. Sudah di jalankan
b. Saat di jalankan di server, tidak ada perbedaan
c. Java script adalah kode yang membuat web itu berjalan antara HTML dengan pengguna
LATIHAN 5
A. Soal
Buatlah beberapa fungsi pemrograman sederhana dengan menggunakan JavaScript
atas perintah asisten
B. Screenshoot
C. Syntax
JavaScript
1 <form name="calc">
2 <table border=4>
3 <tr>
4 <td>
5 <input type="text" name="input" size="16"
/><br />
6 </td>
7 </tr>
8 <tr>
9 <td>
10 <input type = "button" value="1" onclick
="calc.input.value += '1'" />
13 <input type = "button" value="+" onclick
="calc.input.value += '+'" /> <br/>
17 <input type = "button" value="-" onclick
="calc.input.value += '-'" /> <br/>
21 <input type = "button" value="X" onclick
="calc.input.value += '*'" /> <br/>
22 <input type = "button" value="c" onclick
="calc.input.value += ''" />
24 <input type = "button" value="=" onclick
="calc.input.value = eval(calc.input.value)/>
25 <input type = "button" value="/" onclick
="calc.input.value += '/'" /> <br?>
26 </td>
27 </tr>
28 </table>
29 </form>
D. Penjelasan
Buat form dengan calc. Masukkan angka 0-9 kedalam button beserta valuenya.
Sedangkan itu pembuatan operasinya ( + - / x) masukkan juga valuenya ke dalam button
lalu di buat break supaya tidak di lakukan lebih dari segali operasi yang sama.

Bab 1-3 - 185150700111006 - YanuarOctavianus - PW - TI-A PDF

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

Bab 1-3 - 185150700111006 - YanuarOctavianus - PW - TI-A PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

LATIHAN PRAKTIKUM PEMROGRAMAN WEB

BAB : PENGANTAR PRAKTIKUM

MODUL 2 : INSTALASI SOFTWARE

PERCOBAAN WEB SERVER

Jalankan (start) web server yang telah terinstal.

Buka notepad menggunakan akun administrator lalu buka file

# ganti “mywebsite.id” dengan string apapun 127.0.0.1

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

Kembalikan konfigutasi ke “Listen 80” lalu restart kembali web server

PERCOBAAN DATABASE SERVER

ketik “mysqladmin -u root password <password_baru>”

1 mysqladmin -u root password

Field Tipe Data

Tulis kode di bawah ini.

Sebelum mengubah syntax:

Setelah mengubah syntax:

Tulis kode di bawah ini.

Syntax file CSS:

Tulis kode di bawah ini.

Tulis kode di bawah ini.

Anda mungkin juga menyukai