TUGAS 3

PEMROGRAMAN WEBSITE
KELAS A082

Dosen Pengampu:
Dr. Eng Agussalim, S.Pd, M.T

Nama:
Maulana Bryan Syahputra

NPM:
21082010038

Kelas:
Pararel A

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA TIMUR

2023
Tujuan Pratikum:

Mahasiswa memahami dan mengerti dasar dari Pemrograman Web, dengan

memanfaatkan bahasa pemrograman javascript untuk membuat website responsif. Pratikum
ini akan berfokus pada mengoperasikan struktur javascript dan memakai objek form pada
javascripts.

Teori Dasar:

Hypertext Markup Languange (HTML)

Hypertext Markup Language atau HTML adalah bahasa markup yang digunakan untuk
membuat struktur halaman website. HTML terdiri dari kombinasi teks dan simbol yang
disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus
yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau ASCII
(American Standard Code for Information Interchange).

HTML dapat diterima sebagai tampilan halaman Web setelah melalui proses
interpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpa lojik
serta toleran terhadap kesalahan. Standar minimum elemen HTML adalah Document Type
Declaration (DTD), Head, dan Body.

Bahasa Pemrograman Javascript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat konten web
interaktif, seperti situs web dinamis dan aplikasi web. Bahasa ini sering digunakan bersama
dengan HTML dan CSS untuk menambahkan interaktivitas dan fungsionalitas ke halaman
web.

Tools dan Software yang digunakan:

• IDE Visual Code.

• Browser Google Chrome.
• Modul 3 Javascript
• XAMPP

Langkah kerja:

1. Persiapkan Laptop yang telah terinstall Visual Studio Code dan Browser.
2. Baca dan pahami Modul 3.
3. Buka Xampp, Nyalakan module Apache pada Xampp.
4. Buat folder depos di Xampp/htdocs sebagai tempat untuk membuat tempat
pengerjaan. Seperti file 1.html
5. Kerjakan sesuai petujuk dari modul 3.
6. Untuk melihat hasil pengerjaan dapat dilakukan akses melalui localhost/namafolder.
Melalui link tersebut dapat mengakses hasil pengerjaan.

LINK GITHUB:

https://github.com/maulanabry/Pratikum_3_Pemweb
 PRATIKUM
1. Operasi Dasar Aritmatika
a. Source code dan Tampilan
• Aritmatika 1
• Aritmatika 2

b. Analisa
Pada bagian ini penggunaan javascript memungkinkan halaman untuk membuat
perintah sederhana yang menggunakan operator. Pada program kedua dilakukan
dengan input angka terlebih dahulu pada source kemudian terdapat beberapa
perintah operator seperti document.write("<br>" + "Perkalian : val1*val2" +
"<br>") yang menghasilkan angka dari perkalian operator.

2. Operasi Dasar Relasional

a. Source code dan Tampilan
• Relasional 1
 Input Nilai 1=2 ; Nilai 2=4

• Relasional 2
Input Nilai 80=Lulus
b. Analisa
Pada bagian ini dibuat program operasi relasional, program pertama
memungkinkan pengguna untuk menginput angka nilai1 dan nilai2 yang
dimana setelah penginputan program akan membuat hasil tulisan apakah nilai
tersebuh sama dengan, lebih dari, atau kurang dari sesuai dengan perintah
seperti document.write("<br>" + "val1==val2" + "<br>") yang menunjukkan
bahwa val1 memiliki nilai yang sama dengan val2. Sedangkan pada program 2
terlebih dahulu menginputkan angka 0-100 yang dimana jika angka tersebut
>=60 maka akan menghasilkan keterangan tidak lulus, program memanfaatkan
if else untuk mengecek apakah angka yang diinput sesuai atau tidak (if (nilai >=
 60) hasil = "Lulus"; else hasil = "Tidak Lulus"; document.write("Hasil: "+
hasil);
3. Operator Switch
a. Source code dan Tampilan
• Operator Switch
Input Nilai 2= bilangan dua

• Operator For loop

• Operator Do while

b. Analisa
Pada bagian ini dimanfaatkan switch case dan looping berupa for dan do wile. Pada
program pertama memanfaatkan switch case yang dimana akan diinputkan angka (val1)
kemudian program akan mengecek apakah tersebut masuk pada bilangan yang di switch
case sebagai contoh jika menginput angka 2 maka program akan mencetak bilangan
dua sesuai dengan perintah case "2": document.write("Bilangan dua"). Seandainya
angka diinput lebih dari 10 maka program akan mencetak Bilangan lainnya. Pada
program 2 dan 3 memiliki tujuan yang sama untuk mencetak angka 0-10 hanya saja
 berbeda penggunaan loopingnya. Program 2 dengan for sedangkan program do while.
Program akan berhenti mengulang jika x >=10.
4. Form
A. Source code dan Tampilan
• Form 1
Input bil = 2

• Form 2
 B. Analisa
Pada bagian ini akan ditunjukkan pembuatan form html dengan javascript,
dimana pada program pertama membuat program yang dapat menentukan
angka input merupakan genap atau ganjil. Program pertama memanfaatkan
textbox dan button, untuk membedakan angka tersebut ganjil atau genap
memanfaatkan if else. Pada program kedua bertujuan untuk mengganti desain
dari dokumen seperti mengganti latar belakang dengan document.bgColor =
warna; yang diperintahkan melalui button.
TUGAS
1. Program Konversi Nilai (Angka ke Huruf)
 a. Source Code

b. Tampilan

c. Analisa

Pada modul pratikum ini diberikan tugas untuk membuat program sederhana konversi nilai
angka ke huruf menggunakam html dan bahasa pemrograman java script. Pembuatan program
dengan HTML menggunakan objek seperti text, textbox, dan button. Terdapat pula perintah
method function tag script dengan perintah document.write("Dimodifikasi Terakhir Pada " +
document.lastModified untuk menuliskan keterangan perubahan pada file. seperti pada
screenshoot.
Untuk melakukan konversi dibuat method function konversi() menggunakan perintah “if else”
untuk mengkontrol bil sebagai nilai yang diinput dalam tag body.
Form sendiri dipergunakan untuk penginputan data pada halaman HTML, dalam tag form
tersebut diberi name=”kirim” yang berisikan beberapa text dan tag input yang masing masing
memiliki name angka dan huruf. Selain itu juga terdapat tag input bertipe button yang
dipergunakan untuk mengeksekusi perintah onclick=”konversi()” sekaligus memanggil
method konversi.
2. Aplikasi Kalkulator
a. Source Code

b. Tampilan
c. Analisa
Pada modul pratikum ini diberikan tugas untuk membuat program sederhana kalkulator
menggunakam html dan bahasa pemrograman java script. Digunakan tag script, tag
body, dan tag untuk membuat program sesuai dengan petunjuk dari modul. Terdapat
document.write yang dipergunakan untuk memunculkan tulisan pada website. Terdapat
method function seperti tambah(), kurang(), kali(), bagi(), dan function
resetkalkulator() sebagai perintah aksi yang dilengkapi variable bil1, bil2, dan hasil.
Perbedaannya pada method resetkalkulator() dengan perintah
document.kalkulator.reset(); yang digunakan mereset isi pada input halaman HTML
name=kalkulator.

Di dalam tag body juga terdapat berbagai macam perintah yang terhubung dengan tag
script. Terdapat juga tag form yang mempunyai name=“kalkulator” didalam tag from
tersebut juga terdapat beberapa input textbox yang dipergunakan untuk memasukan
angka. Dibuatkan pula button sesuai dengan aksi yang dapat dilakukan pada kalkulator
sederhana.