LAPORAN MINGGUAN

PRAKTIKUM PEMROGRAMAN WEB MODULE 2

DISUSUN OLEH : RIVALDO DIKI SETIA PUTRA ( 19533108 )

DOSEN PENGAMPU : Dyah Mustikasari, S.T., M.Eng
MATA KULIAH : PRAKTIKUM PEMROGRAMAN WEB

PROGRAM STUDI TEKNIK INFORMATIKA

UNIVERSITAS MUHAMMADIYAH PONOROGO
2023/2024
 KATA PENGANTAR

Assalamualaikum wr.wb. Puji syukur atas rahmat Allah SWT, berkat rahmat serta karunia-Nya
sehingga laporan yang berjudul “Praktikum Pemrograman Web Module2” ini dapat selesai.

Laporan ini dibuat dengan tujuan memenuhi tugas mata kuliah Praktikum Pemrograman Web
Semester 6 dari Ibu Dyah Mustikasari, S.T., M.Eng pada Program Studi Teknik Informatika
Universitas Muhammadiyah Ponorogo. Selain itu, penyusunan laporan ini bertujuan menambah
wawasan kepada pembaca tentang ‘Desain Website CSS’ dan ‘JavaScript’.

Penulis menyampaikan ucapan terima kasih kepada Ibu Dyah Mustikasari, S.T., M.Eng selaku
Dosen Pengampu mata kuliah Praktikum Pemrograman Web. Berkat tugas yang diberikan ini,
dapat menambah wawasan penulis berkaitan dengan topik yang diberikan. Penulis juga
mengucapkan terima kasih yang sebesarnya kepada semua pihak yang membantu dalam proses
penyusunan laporan ini.

Penulis menyadari bahwa dalam penyusunan dan penulisan masih melakukan banyak kesalahan.
Oleh karena itu penulis memohon maaf atas kesalahan dan ketidaksempurnaan yang pembaca
temukan dalam laporan ini. Penulis juga mengharap adanya kritik serta saran dari pembaca
apabila menemukan kesalahan dalam laporan ini.

Ponorogo, 25 Juni 2023

Rivaldo Diki Setia Putra

ii
 DAFTAR ISI

HALAMAN JUDUL .....................................................................................i

KATA PENGANTAR ..................................................................................ii
DAFTAR ISI .................................................................................................iii
BAB I PENDAHULUAN .............................................................................1
1.1. Latar Belakang ............................................................................................1
1.2. Rumusan Masalah .......................................................................................1
1.3. Tujuan .........................................................................................................1
1.4. Manfaat .......................................................................................................2
BAB II LANDASAN TEORI .......................................................................3
2.1. Web Server .................................................................................................3
2.2. CSS (Cascading Style Sheets)......................................................................3
2.3. JavaScript ...................................................................................................4
BAB III HASIL DAN PEMBAHASAN ......................................................5
3.1 Desain Layout Form Untuk Praktikum Pertama ..........................................5
3.1.1 Membuat Form Sederhana dan Menambahkan Atribut CSS3....................5
3.1.2 Praktikum Java Script Pertama..................................................................7
3.1.3 Praktikum Java Script Kedua.....................................................................8
3.2 Membuat Form CheckAll dan UncheckAll ..................................................9
BAB IV PENUTUP ......................................................................................11
4.1. Kesimpulan ................................................................................................11
4.2. Saran ..........................................................................................................11
DAFTAR PUSTAKA ...................................................................................12

iii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi di dunia Website dewasa ini semakin pesat dan tidak terbatas. Hal
ini ditandai dengan maraknya produsen yang mulai mengunakan website tidak hanya sebagai
media untuk mengiklankan sesuatu, tetapi juga untuk memenuhi segala kebutuhannya, mulai
dari kebutuhan di bidang Industri, Kepolisian, Pendidikan sampai kebutuhan Rumah tangga.
Banyaknya Website-website yang telah diciptakan membutikan bahwa banyaknya persaingan di
bidang Web. Setiap Web Designer dan Web Programmer saling berlomba dalam menciptakan
inovasi baru dibidang web. Pembuatan Web itu sendiri merupakan perpaduan antara sintak
HTML, MYSQL, JavaScript dengan PHP MyAdmin dan lain sebagainya.
CSS adalah singkatan dari Cascading Style Sheets. Dalam KBBI cascading artinya air
terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang
saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS
adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format
atau tampilan suatu halaman HTML.
Penggunaan dari HTML, CSS, dan JavaScript merupakan dasar-dasar dari pembuatan suatu
web yang biasa ditampilkan dan bahkan diakses sehari-hari dalam bidang desain web-nya.
Dalam laporan ini akan membahas dari JavaScript dan mempraktikkannya secara langsung
sehingga dapat mengetahui langsung daripada penggunaan JavaScript tersebut.

1.2 Rumusan Masalah

Berdasakan latar belakang diatas, maka diambil rumusan masalah sebagai berikut :
1. Jelaskan apa yang anda ketahui tentang CSS3?
2. Sebutkan beberapa macam cara penulisan kode JavaScript. Dan tuliskan contoh
kodenya!

1.3 Tujuan
Dari penulisan laporan ini, memiliki tujuan yang hendak dicapai yaitu:
1. Mengenal dan memahami komponen CSS3
2. Mengenal JavaScript
3. Mengetahui penggunaan kode JavaScript
4. Mengetahui Framework JavaScript dan bagaimana penggunaannya

iv
1.4 Manfaat
Adapaun manfaat yang diperoleh dari penulisan laporan ini, adalah:
1. Mahasiswa dapat membuat desain layout form sederhana dan menambahkan dengan
atribut CSS3 sehingga lebih terlihat atraktif.
2. Mahasiswa dapat menerapkan event onclick dengan inputan form menggunakan
Javascript.
3. Mahasiwa dapat membuat operasi checkAll dan UncheckAll pada list data yang
ditampilkan dengan checkbox.

v
 BAB II
LANDASAN TEORI

2.1 Web Server

Sebuah software yang memberikan layanan berbasi data berfungsi untuk melakukan
transfer berkas permintaan berupa berkas teks, video, gambar, file dan lain-lain. 10
Menurut Simarmata (2010:88) “Web Server adalah potongan perangkat lunak yang
mendukung berbagai protocol Web, seperti HTTP, HTTPS, dan lainlain untuk memproses
permintaan client”.
Menurut Sibero (2013:11) “Web Server adalah sebuah komputer yang terdiri dari perangkat
keras dan perangkat lunak”.
Sedangkan Menurut Arief (2011:19) “Web server adalah program aplikasi yang memiliki
fungsi sebagai tempat menyimpan dokumen-dokumen web”.
Berdasarkan pendapat yang dikemukanan diatas dapat disimpulkan bahwa, Web Server
adalah potongan perangkat lunak yang memiliki fungsi sebagai tempat menyimpan dokumen-
dokumen web dengan dukungan berbagai protocol web dan lain-lain untuk memproses
permintaan client.

2.2 CSS (Cascading Style Sheets)

Salah satu bahasa desain web yang dapat mengatur format tampilan sebuah halaman web
dengan perancangan desain text berupa font, color, margins, size dan lain-lain.
Menurut Kadir dan Triwahyuni (2013:323) “CSS adalah kode yang dimaksudkan untuk
mengatur tampilan halaman web”.
Sedangkan Menurut Arief (2011:11) “Client side scripting adalah salah satu jenis bahasa
pemrograman web yang proses pengolahannya dilakukan disisi client”.
Menurut Sibero (2013:112) menyatakan bahwa, “Casading Style Sheet memiliki arti Gaya
Menata Halaman Bertingkat, yang artinya setiap satu elemen yang telah diformat dan memiliki
anak dan telah diformat, maka anak dari elemen tersebut secara otomatis mengikuti format
element induknya”.
Casading Style Sheet (CSS) digunakan untuk membuat web menjadi lebih rapi dan
terstruktur. Dari beberapa pendapat diatas dapat disimpulkan bahwa CSS (Cascading Style
Sheets) adalah Salah satu jenis bahasa pemrograman untuk mengatur proses pengolahan pada
komponen tampilan web menjadi bentuk web yang lebih indah dan menarik.

vi
2.3 JavaScript
Bahasa pemrograman yang bersifat client side yang permrosesanya dilakukan oleh client
sering digunakan pada web browser untuk menciptakan halaman web yang menarik.
Menurut Kadir dan Triwahyuni (2013:325) “JavaScript adalah bahasa pemrograman yang
biasa diletakkan bersama kode HTML untuk menentukan suatu tindakan”.
Sedangkan Menurut Sibero (2013:150) “Javascript adalah bahasa skrip (Scripting
language), yaitu kumpulan intruksi perintah yang digunakan untuk mengendalikan beberapa
bagian dari sistem operasi”.
Berdasarkan pendapat yang dikemukanan diatas dapat disimpulkan bahwa, JavaScript
adalah Bahasa pemrograman atau bahasa skrip yang berisi kumpulan intruksi perintah yang
dilletakkan bersama kode HTML.

vii
 BAB III
HASIL DAN PEMBAHASAN

3.1 Desain Layout Form Untuk Praktikum Pertama

Desain Layout form untuk praktikum pertama adalah mencoba membangun form
sederhana dan menambahkan beberapa atribut CSS3 pada form tesebut agar .terlihat lebih
atraktif

3.1.1 Membuat Form Sederhana dan Menambahkan Atribut CSS3

viii
ix
 Gambar diatas adalah code beserta hasil dari tampilan form registrasi dengan
menambahkan style CSS.

3.1.2 Praktikum Java Script Pertama

Dalam percobaan praktikum JavaScript pertama, mencoba menerapkan event onclick
dengan inputan form

x
 Gambar diatas adalah code beserta hasil tampilan dari event onclick dengan membuat
sebuah file HTML

3.1.3 Praktikum Java Script Kedua

Dalam percobaan praktikum JavaScript kedua ini, kita akan mencoba membuat operasi
checkAll dan UncheckAll pada list data yang ditampilkan dengan checkbox.

xi
 Gambar diatas adalah code beserta hasil dari tampilan checkAll dan UncheckAll pada list
data yang ditampilkan dengan checkbox.

3.2 Membuat Form CheckAll dan UncheckAll

xii
xiii
Gambar diatas adalah code beserta hasil dari tampilan form CheckAll dan UncheckAll.

xiv
 BAB IV
PENUTUP

4.1 Kesimpulan
1. Laporan ini dapat menambah pengetahuan tentang Cascading Style Sheets (CSS) dan
kemampuan dalam menggunakan CSS untuk mengubah tampilan dan tata letak elemen-elemen
pada halaman web, termasuk checkbox dan file.
2. Laporan ini dapat merangkum pemahaman tentang bahasa pemrograman JavaScript dan
kemampuan dalam menggunakan JavaScript untuk memberikan interaktivitas pada halaman
web, seperti menangani peristiwa klik dan memanipulasi elemen DOM.
3. Laporan ini dapat menjelaskan bagaimana cara membuat form yang terdiri dari
beberapa checkbox dan satu tombol "checkall" serta satu tombol "uncheckall" untuk mengontrol
status checked atau unchecked dari checkbox-checkbox tersebut.
4. Laporan ini dapat mencatat tantangan yang dihadapi selama praktikum, seperti
penanganan peristiwa klik atau memastikan fungsi "checkall" dan "uncheckall" bekerja dengan
benar. Serta dapat memberikat pelajaran tentang cara mengatasi masalah-masalah tersebut.
5. Laporan ini dapat menyajikan rekomendasi mengenai cara meningkatkan implementasi
form "checkall" dan "uncheckall" dengan file di dalam checkbox.

4.2 Saran
1. Mempertahankan konsistensi dalam tampilan dan gaya desain halaman web secara
keseluruhan. Pastikan bahwa elemen-elemen seperti checkbox, tombol, dan teks terlihat
seragam dan mudah dibaca oleh pengguna.
2. Menyertakan dokumentasi yang jelas dan komprehensif untuk membantu pengguna lain
memahami dan menggunakan form "checkall" dan "uncheckall" dengan file di dalam checkbox
yang telah dibuat.
3. Melakukan pengujian menyeluruh pada form "checkall" dan "uncheckall" yang telah
dibuat untuk memastikan fungsionalitas yang tepat dan memperbaiki masalah atau bug yang
ditemukan selama pengujian.

xv
 DAFTAR PUSTAKA

https://repository.bsi.ac.id/index.php/unduh/item/1550/File-10-Bab-II-Landasan-

Teori.pdf

https://www.academia.edu/63246256/

LAPORAN_PRAKTIKUM_DESAIN_WEB_JAVASCRIPT

https://eprints.utdi.ac.id/8303/2/2_155610022_BAB_I.pdf

https://digilib.uns.ac.id/dokumen/download/53753/MjMxNTMx/Pembuatan-

Aplikasi-Generator-Css3-Berbasis-Web-Menggunakan-Teknologi-Javascript-

Bab_1.pdf

https://www.idn.id/memadukan-htmlcss-dan-javascript-untuk-membuat-website/

https://www.niagahoster.co.id/blog/cara-membuat-website-html-css/

https://www.malasngoding.com/product/7-hari-jago-web-design-html-css-dan-

javascript-untuk-pemula/

https://blog.hubspot.com/marketing/web-design-html-css-javascript

https://www.freecodecamp.org/news/html-css-and-javascript-explained-for-

beginners/

https://www.w3schools.com/css/css_rwd_intro.asp

https://blog.skillacademy.com/perbedaan-front-end-dan-back-end

xvi