UNIVERSITAS GUNADARMA

PRAKTIKUM PEMROGRAMAN WEB

MANUAL BOOK
“Perancangan CRUD Perpustakaan Dengan Menggunakan Bahasa JavaScript, HTML, dan
CSS Berbasis Website”

Nama Anggota :
1. Daniel Ryan Simatupang (50420333)
2. Windy Indriarnie (51420280)
Kelas : 3IA01
Fakultas : Teknologi Industri
Jurusan : Informatika
Ketua Asisten : Ryan Arya
Nama Asisten :
1. AprilYandi Dwi
2. Qonita Abdah

Ditulis Guna Melengkapi Sebagian Syarat

Praktikum Pemrograman WEB Jenjang S1
Universitas Gunadarma
2023
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Perkembangan Teknologi Informasi saat ini sangatlah cepat. Teknologi Informasi
memegang peranan yang sangat penting dalam kehidupan manusia. Batas-batas yang ada
karena perbedaan ruang dan waktu dapat ditembus dengan keberadaan teknologi khususnya
internet. Dengan media internet dapat dilakukan banyak hal seperti belanja, ujian, membaca
berita, melihat katalog buku, dan lain-lain secara online. Tentu saja pembuatan sistem tersebut
tidak mudah. Semakin kompleks sebuah sistem maka semakin rumit dalam proses pembuatan
dan perawatannya.

Awalnya makna teknologi terbatas hanya pada benda-benda berwujud seperti

peralatan-peralatan atau mesin. Sejak teknologi muncul pertama kalinya terus berkembang
pesat hingga sekarang. Saat ini banyak manusia sangat bergantung pada tekonologi, bahkan
teknologi bisa menjadi kebutuhan dasar bagi setiap orang. Mulai dari orang tua hingga anak-
anak yang menggunakan teknologi dari aspek kehidupannnya. Dengan adanya teknologi bisa
mempermudah orang untuk melakukan aktivitasnya atau lebih efesian dan cepat.

Dalam pengertian perkembangan teknologi yang lebih luas, teknologi dapat meliputi
pengertian sistem, organisasi, juga teknik. Akan tetapi, seiring dengan perkembangan dan
kemajuan zaman, pengertian teknologi menjadi semakin meluas. Sehingga saat ini teknologi
merupakan sebuah konsep yang berkaitan dengan jenis penggunaan dan pengetahuan tentang
alat dan keahlian. Serta bagaimana dapat memberi pengaruh pada kemampuan manusia untuk
mengendalikan dan mengubah sesuatu yang ada di sekitarnya.

Ini menjadi bukti bahwa memang teknologi sudah menjadi kebutuhan, dan merata di
setiap sektor kehidupan manusia. Terlebih setelah adanya penemuan komputer, dan laptop,
yang sekarang hampir semua pekerjaan manusia memiliki hubungan dengan komputer ataupun
laptop. Sehingga pantas jika komputer adalah penemuan yang paling mutakhir, dan yang paling
berpengaruh pada kehidupan manusia.
1.2 Tujuan
Dalam penulisan ini bertujuan untuk mempermudah sistem peminjaman buku pada
perpustakaan dan dapat merinci data-data para peminjam buku seperti, nama peminjam, judul
buku, penerbit buku tersebut, tanggal peminjaman, tanggal pengembalian dan juga deskripsi
buku yang dipinjam.
 BAB II
PEMBAHASAN

2.1 JavaScript
JavaScript adalah bahasa skrip yang digunakan untuk membuat konten halaman web
dinamis, berfungsi untuk membuat elemen yang mampu meningkatkan interaksi pengunjung
seperti menu drop-down, animasi, dan warna background dinamis. Fungsi JavaScript yang
paling umum adalah untuk pengembangan aplikasi web dan mobile, membangun web server
dan aplikasi server, membuat website yang interaktif, serta game development.
Bahasa pemrograman JavaScript sekarang memiliki banyak framework dan library yang bisa
membantu mempercepat proses, seperti AngularJS, jQuery, and ReactJS. Meskipun
umumnya melayani program berbasis web, fitur pemrograman JavaScript memiliki
implementasi lain di area yang berbeda.

2.1.1 Kegunaan JavaScript

● Efisiensi Pengembangan Aplikasi Web dan Seluler
Pengembangan framework JavaScript, yang terdiri dari library kode JavaScript,
memungkinkan developer menggunakan kode JS siap pakai dalam proyek mereka.
Proses yang harus dilalui pun menjadi lebih cepat dan efisien karena mereka tidak perlu
menulis kode dari nol.

● Membangun Web Server dan Aplikasi Server

Melalui Node.js, JavaScript memungkinkan developer membangun web server
dan infrastruktur back-end sehingga akan menghemat waktu dan tenaga dalam hal
pembuatan web server.

● Membuat Website yang Interaktif

Fungsi JavaScript berikutnya adalah untuk menciptakan halaman web yang
dinamis, seperti untuk menampilkan animasi, mengubah visibilitas teks, dan membuat
menu drop-down. Selain itu, JavaScript memungkinkan Anda mengubah konten dan
nilai atribut HTML tanpa harus merefresh halaman web dulu. Sebab, JavaScript
mendukung tipe data berikut:
 ○ String ‒ terdiri dari data teks yang ditulis di dalam tanda kutip. Misalnya,
“Hello World”, ‘Hello World’, dan “Display ‘Hello world’ text“.
○ Number ‒ mencakup bilangan bulat dan floating-point antara (2^53 – 1) dan -
(2^53 – 1).
○ Boolean ‒ tipe data logis dengan nilai true dan false.
○ BigInt ‒ merepresentasikan data bilangan bulat (integer) dengan panjang
arbitrer.
○ Null ‒ berisi nilai nol.
○ Undefined ‒ termasuk variabel yang dideklarasikan, tapi tidak ditetapkan.
○ Symbol ‒ menyediakan identifier unik untuk objek.
○ Object ‒ untuk struktur data kompleks yang ditulis dengan kurung kurawal.
Misalnya, {item:”Buku”, information:”biografi”}.
Dengan JavaScript, Anda juga bisa meningkatkan pengalaman browsing
pengunjung menggunakan cookie. Untuk membuat, membaca, dan menghapus cookie
dalam JavaScript, diperlukan properti document.cookie yang berfungsi sebagai “getter
and setter” nilai cookie.

● Memudahkan Pengembangan Game

JavaScript juga bisa membantu Anda membuat game kalau digunakan dengan
HTML5 dan Application Programming Interface (API) seperti WebGL. Ada banyak
game engine berbasis JavaScript seperti Phaser, GDevelop, dan Kiwi.js yang tersedia
untuk rendering grafis, daur ulang kode, dan aplikasi lintas platform.

2.1.2 Kelebihan JavaScript

● Struktur yang sederhana.
Strukturnya yang sederhana membuat JavaScript lebih mudah dipelajari dan
diterapkan, serta lebih cepat daripada sejumlah bahasa lain. Error juga mudah
diidentifikasi dan diperbaiki.

● Eksekusi lebih cepat.

JavaScript mengeksekusi skrip langsung di browser web tanpa harus konek ke
server atau menggunakan compiler. Selain itu, sebagian besar browser memungkinkan
JavaScript meng-compile kode pada saat eksekusi program.
 ● Fungsi yang serbaguna.
JavaScript kompatibel dengan bahasa pemrograman lain seperti PHP, Perl, dan
Java. Bahasa ini juga menjadikan data science dan machine learning bisa diakses oleh
developer.

● Cukup populer dan banyak digunakan.

Ada berbagai resource dan forum yang bisa membantu pemula mempelajari
bahasa scripting ini.

● Mengurangi beban server.

Karena berjalan di sisi klien, JavaScript bisa mengurangi permintaan yang
dikirim ke server. Validasi data bisa dilakukan melalui browser, dan update hanya
berlaku pada bagian halaman web tertentu.

● Selalu diperbarui dan dikembangkan.

Tim developer JavaScript dan ECMA International terus memperbarui serta
merancang framework dan library baru sehingga bisa terus relevan.

2.1.3. Kekurangan JavaScript

● Terkadang memiliki masalah kompatibilitas.
Beberapa web browser menginterpretasikan kode JS dalam cara yang berbeda,
sehingga terkadang tidak konsisten. Jadi, Anda harus menguji skrip JavaScript di semua
web browser utama, termasuk versi lamanya agar tidak mengganggu user experience.

● Keamanan kurang terjaga.

Kode JavaScript yang berjalan secara client-side rawan terkena eksploitasi oleh
pengguna yang tidak bertanggung jawab.

● Debugging kurang efisien.

Meskipun beberapa editor HTML mendukung debugging, fungsinya masih
kurang efisien dibanding editor lain. Karena browser tidak menampilkan peringatan
error, Anda mungkin akan kesulitan mengidentifikasi masalah.
2.2 HTML
HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup
standar untuk membuat dan menyusun halaman dan aplikasi web (menggunakan coding
sederhana). Biasanya, penggunaan umum HTML adalah untuk menyusun bagian paragraf,
heading, maupun link pada halaman web. Tapi, meskipun susunannya seperti coding, perlu
diketahui bahwa HTML bukanlah bahasa pemrograman. HTML tidak dianggap sebagai bahasa
pemrograman karena tidak bisa memberikan fungsi yang dinamis. Sekarang, bahasa markup
ini dianggap sebagai standar web resmi, dikelola oleh World Wide Web Consortium (W3C),
yang juga bertugas merilis pembaruan rutin HTML. Sejarah HTML diciptakan oleh Tim
Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi
pertama HTML dirilis oleh Tim Berners Lee pada tahun 1991, yang memiliki 18 tag. Sejak
saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute (tag modifier) yang
juga baru.

2.2.1 Kelebihan HTML:

● Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
● Dijalankan secara alami di setiap web browser.
● Mudah dipelajari.
● Open-source dan sepenuhnya gratis.
● Rapi dan konsisten.
● Menjadi standar resmi web, dikelola oleh (W3C).
● Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.

2.2.2 Kekurangan HTML:

● Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa
menggunakan JavaScript atau bahasa backend, seperti PHP.
● Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah
meskipun menggunakan elemen yang sama, seperti header dan footer.
● Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.
● Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa
merender tag yang lebih baru.
2.3 CSS
CSS adalah bahasa untuk mendesain situs web Anda, yang dapat Anda gunakan untuk
menambahkan latar belakang, warna, dan bahkan transisi atau elemen interaktif lainnya. Ini
juga akan membantu Anda membuat situs web yang ringan dan responsif yang ramah SEO.
Namun, mungkin sulit untuk membiasakan diri dengan berbagai nilai CSS, terutama jika Anda
baru mengenal bahasa tersebut.

Cascading Style Sheet atau CSS adalah bahasa stylesheet yang menentukan
bagaimana elemen situs web Anda seharusnya terlihat. Anda dapat mengontrol desain, tata
letak, font, dan warna konten situs web Anda dengan menyematkan file CSS ke dalam
dokumen HTML Anda. CSS digunakan bersama dengan bahasa markup, seperti HTML dan
XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.

2.3.1 Jenis CSS

Internal CSS

Internal CSS adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada
pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus
dalam satu halaman website. Penggunaannya cocok untuk kamu yang sedang mengerjakan
website dengan tampilan berbeda-beda.
Kelebihan internal CSS adalah :
● Editing yang mudah di tiap halaman website
● Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
● Internal stylesheet bisa memakai ID dan Class
● Error mudah diperbaiki
Kekurangan internal CSS adalah :
● Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa
halaman website
● Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya
● Ukuran file menjadi lebih besar

Eksternal CSS

External CSS adalah kode CSS yang dituliskan terpisah dengan file HTML, dan ditulis
sendiri pada file ekstensi .css. Penulisan file eksternalnya bisa diletakkan pada bagian <head>,
jadi setiap halaman website dilakukan pemanggilan file .css. Penggunaannya cukup sederhana
karena tidak perlu menuliskan CSS pada setiap file HTML.
Kelebihan external CSS adalah :
● Ukuran file lebih kecil
● Code rapi
● Respon website lebih cepat
● Bisa digunakan untuk beberapa halaman website berbeda
Kekurangan external CSS adalah :
● Kurang cocok untuk halaman custom
● Halaman website rawan berantakan saat file CSS gagal load sempurna

Inline CSS

Jenis yang terakhir ini langsung memasukkan kode CSS yang ditulis pada setiap atribut
HTML. Jadi, di setiap atribut memiliki style CSS yang berbeda sesuai kebutuhan dan ini
tergolong kurang efisien jika dibanding jenis CSS lainnya.

2.4 Hubungan HTML, CSS, dan JavaScript

Meskipun dinyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak
sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa
digunakan untuk menambah elemen dan membuat struktur konten.
Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend: CSS
(Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa
meningkatkan pengalaman user dan memberikan fungsi yang lebih canggih.

● CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan
animasi.
● JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti
slider, pop-up, dan galeri foto.
 BAB III
ANALISA DAN PERANCANGAN

Projek yang dibuat yaitu, perancangan crud perpustakaan dengan menggunakan bahasa
JavaScript, HTML, dan CSS berbasis website dengan memanfaatkan visual studio code sebagai
sarana pengaplikasiannya. Di bawah ini merupakan tampilan awal visual studio code :

Kemudian membuka folder dari project yang telah kami buat

Lalu akan terbuka file index.html, main.js, dan style.css yang telah dibuat
 Source Code Program:

● index.html
Penjelasan Source Code:
● Judul program menggunakan h4.
● modal-title class untuk membuat judul pada form pengisian.
● modal-body class untuk memasukkan inputan pada form pengisian berupa Nama
peminjam, Judul buku, Penerbit, Tanggal pinjam, dan Tanggal kembali.
● modal-footer class untuk menambahkan button Tambah dan Keluar pada form
pengisian.
● Judul dari output yang akan tampil menggunakan h5.
● script src=”main.js” untuk mengkoneksi file html dengan file js.
● main.js
Penjelasan Source Code:
● let form, textInput, textInput2, textInput3 dateInput, dateInput2, msg, tasks, dan add
untuk mendeklarasikan variabel.
● form.addEventListener untuk membuat tombol submit yang jika digunakan terdapat
kegagalan, maka akan keluar pesan “Task cannot be blank”, dan jika sukses, langsung
menampilkan output pada halaman utama.
● let acceptData untuk membuat form dapat diisi.
● let createTasks untuk menampilkan output pada halaman utama dari form yang telah
diisikan. Disini juga terdapat button edit dan button delete.
● let deleteTasks untuk mendelete output pada halaman utama.
● let editTasks membuat kita dapat mengedit output pada halaman utama dengan
mengembalikan kita ke form pengisian dan ketika kita menekan kembali tombol
submit, maka outputnya akan berubah.
● style.css
Penjelasan Source Code:
1. body {
● font-family: sans-serif;
Digunakan untuk mengatur font dengan jenis sans-serif
● margin: 0 50px;
Digunakan untuk menetapkan ukuran margin. Margin atas dan bawah akan sebesar 0px
dan 50px
● background-color: #e5e5e5;
Digunakan untuk menentukan warna background menjadi warna dengan kode hex
● overflow: hidden;
Digunakan untuk mengatur terlihat atau tidaknya saat kita melakukan scroll pada
aplikasi
● display: flex;
Digunakan untuk mengatur penempatan atau layout berjenis flexbox (flexible box)
● justify-content: center;
Konten yang ada pada div-submit akan dibuat secara merata pada browser di bagian
tengah (center)
● align-items: center;
Digunakan untuk mengatur penempatan kotak margin item fleksibel dipusatkan di
dalam garis pada sumbu silang
● height: 100vh;
Digunakan untuk menetapkan tinggi menjadi sebesar 100vh
}

2. .app {
● background-color: #fff;
Digunakan untuk menentukan warna background menjadi warna dengan kode hex.
● width: 300px;
Digunakan untuk menetapkan lebar sebesar 300px ukuran aplikasinya
● height: 500px;
 Digunakan untuk menetapkan tinggi menjadi sebesar 500px
● border: 5px solid #d3b1e8;
Digunakan untuk menetapkan ukuran border menjadi 5px dengan garis lurus dengan
warna menggunakan kode hex
● border-radius: 8px;
Digunakan untuk menetapkan radius border sebesar 8px. Radius border digunakan
untuk membulatkan sudut border
● padding: 15px;
Digunakan untuk menetapkan padding sebesar 15px
● overflow-y: scroll;
Digunakan untuk mengatur terlihat atau tidaknya saat kita melakukan scroll pada
aplikasi
}

3. .app::-webkit-scrollbar {
● width: 0 !important;
Digunakan untuk menetapkan lebar sebesar 0 ukuran webkit-scrollbarnya
}

4. #addNew {
● display: flex;
Digunakan untuk mengatur penempatan atau layout berjenis flexbox (flexible box)
● justify-content: space-between;
Konten yang ada pada div-submit akan dibuat jarak antara satu dengan lainnya
● align-items: center;
Digunakan untuk mengatur penempatan kotak margin item fleksibel dipusatkan di
dalam garis pada sumbu silang
● background-color: rgba(201, 167, 238, 0.35);
Digunakan untuk menentukan warna background menjadi warna dengan kode rgb
● padding: 5px 10px;
Digunakan untuk menetapkan padding sebesar 5px dan 10px
● border-radius: 5px;
Digunakan untuk menetapkan radius border sebesar 5px. Radius border digunakan
untuk membulatkan sudut border
 ● cursor: pointer;
Kursor adalah penunjuk yang menunjukkan tautan. Biasanya gambar tangan yang
menunjuk.
}

5. .fa-plus {
● background-color: #bca1ce;
Digunakan untuk menentukan warna background menjadi warna dengan kode hex
● padding: 3px;
Digunakan untuk menetapkan padding sebesar 3px
● border-radius: 3px;
Digunakan untuk menetapkan radius border sebesar 3px. Radius border digunakan
untuk membulatkan sudut border
}

6. #tasks {
● display: grid;
Digunakan untuk mengatur penempatan atau layout berjenis grid
● grid-template-columns: 1fr;
Digunakan untuk mendefinisikan nama baris dan fungsi ukuran dari kolom grid yang
berjumlah 1fr
● gap: 14px;
Digunakan untuk mengatur jarak antara baris dengan kolom sebesar 14px
}

7. #tasks div {
● border: 3px solid #d8abe7;
Digunakan untuk menetapkan ukuran border menjadi 3px dengan garis lurus dengan
warna menggunakan kode hex
● background-color: #f2cff9;
Digunakan untuk menetapkan warna background menjadi warna dengan kode hex
● border-radius: 6px;
Digunakan untuk menetapkan radius border sebesar 6px. Radius border digunakan
untuk membulatkan sudut border
 ● padding: 5px;
Digunakan untuk menetapkan padding sebesar 5px
● display: grid;
Digunakan untuk mengatur penempatan atau layout berjenis grid
● gap: 4px;
Digunakan untuk mengatur jarak antara baris dengan kolom sebesar 4px
}

8. #tasks div .options {

● justify-self: center;
Self yang ada pada div-submit akan dibuat secara merata pada browser di bagian tengah
(center)
● display: flex;
Digunakan untuk mengatur penempatan atau layout berjenis flexbox (flexible box)
● gap: 20px;
Digunakan untuk mengatur jarak antara baris dengan kolom sebesar 20px
}

9. #tasks div .options i {

● cursor: pointer;
Kursor adalah penunjuk yang menunjukkan tautan. Biasanya gambar tangan yang
menunjuk
}

10. #msg {
● color: red;
Digunakan untuk menetapkan warna teks menjadi merah.
}
 Output program:
● Tampilan halaman awal

● Output Create untuk pembuatan data baru dimana user harus menginput data pada form
dengam menginput nama peminjam, judul buku, penerbit, tanggal pinjam dan tanggal
pengembalian.
● Output Read untuk proses pengembalian data yang telah diisikan pada form dengan
menekan button tambah pada form untuk mensubmit, maka data yang telah diinput akan
tampil pada halaman utama.

● Output Update untuk mengubah data pada output yang telah tampil pada halaman utama
dengan klik button edit yang direpresentasikan dengan logo pensil, yang nantinya akan
dikembalikan kembali ke dalam form untuk mengganti data yang ingin diganti. Kemudian
klik button tambah untuk menampilkan hasil perubahannya pada halaman utama.
● Output Delete untuk melakukan proses penghapusan output pada halaman utama dengan
menekan button delete yang direpresentasikan dengan logo tempat sampah.
 BAB IV

PENUTUP

4.1 Kesimpulan
Dengan adanya praktikum ini, mahasiswa jadi mampu untuk mengetahui bagaimana
cara membuat sebuah tampilan web dengan bagus dan baik. Tentunya dengan menggunakan
bahasa pemrograman yang beragam seperti salah satunya javascript, CSS dan HTML.

4.2 Saran
Lebih teliti lagi pada saat memberikan sebuah quiz baik itu pada pre test, act, dan post
test karena masih adanya kesalahan pada pemberian jawaban yang diberikan oleh kakak asisten
lab. Selain itu, terkadang masih adanya kesalahan teknis lainnya seperti link gmeet yang
terlambat, dsb. Oleh karena itu, mohon dikurangi kesalahan yang telah terjadi sebelumnya agar
praktikan lebih nyaman mengerjakan praktikum.