Evaluasi Tengah Semester Pemrograman Web
Nama: Fauzan Dzikri Rabbani
NRP: 5025221311
Kelas: Pemrograman Web (A)
Evaluasi Tengah Semester
Fungsi HTML, CSS, Javascript, dan Bootstrap dalam Pengembangan Web
Pada dasarnya HTML, CSS, Javascript, dan juga Bootstrap memiliki fungsionalitas yang sama yaitu untuk membangun suatu web. Meskipun demikian, peran yang dipegang oleh masing-masing tool inilah yang membedakan antara satu sama lain.
Pengembangan web analogis dengan pembangunan suatu bangunan. Dalam implementasi pembangunan tersebut terdapat beberapa tahap dan aspek yang memisahkan proses pembangunan tersebut kepada beberapa bagian. Dalam analogi ini, HTML berperan dalam membangun pondasi dan struktur bangunan seperti menata batu bata dan juga semen. Oleh karena itu, peran HTML dalam pengembangan suatu web adalah untuk menetapkan informasi dan juga beberapa elemen yang akan berinteraksi dengan pengguna seperti tombol, form isian, link, dan lain-lain. Akan tetapi, suatu bangunan yang hanya diciptakan menggunakan bata dan semen saja kurang enak untu dilihat dan tidak memenuhi standar fungsionalitas suatu bangunan seperti listrik dan aliran air. Di situlah peran CSS dan Javascript.
Jika kita telah menciptakan struktur dasar bangunan, hal yang perlu kita lakukan seterusnya adalah untuk mengecar, menata pintu, jendela, dan dekorasi lain agar mencipatkan suatu bangunan yang indah secara estetik. Peran CSS pada pengembangan web adalah untuk menata, mewarnai, memberi gaya, dan memperindah elemen dasar yang telah kita ciptakan menggunakan HTML sebelumnya. CSS dapat mewarnai, mengatur penataan, mengatur posisi, dan juga mengganti background elemen-elemen dalam suatu web.
Setelah membangun bangunan dan mempercantiknya, tugas berikutnya adalah untuk memberikan fungsionalitas seperti saluran air dan listrik. Dalam pengembangan web, ini analogis dengan mengatur interaksi web dengan pengguna menggunakan javascript. Javascript berfungsi untuk menciptakan dan mengatur fungsionalitas client-side suatu web seperti form submission, deteksi pergerakan input user seperti mouse atau keyboard, menciptakan animasi, mengubah web berdasarkan masukan user, dan lain-lain.
Seperti itulah suatu web dapat diciptakan menggunakan HTML, CSS, dan Javascript. Namun, menggunakan analogi bangunan yang saya gunakan di awal, membangun web menggunakan HTML, CSS, dan Javascript adalah seperti membangun bangunan di mana kita menciptakan sendiri pipa, kabel, dekor, perabotan, dan alat-alat listrik yang akan kita gunakan. Akan tetapi ada cara yang lebih mudah yaitu dengan menggunakan komponen dan perabotan yang telah diciptakan terlebih dahulu oleh orang lain. Itulah Bootstrap. Bootstrap merupakan library untuk mempermudah pengembangan suatu web dengan cara menyediakan komponen yang telah dibuat sehingga kita hanya perlu menata komponen yang telah dibuat tersebut tanpa harus menciptakan komponen dari awal. Dengan Bootstrap kita dapat dengan mudah memanggil komponen seperti form, navigasi, tabel, tombol, dan komponen lain dengan mudah. Selain itu, Bootstrap juga menyediakan library fungsi untuk implementasi Javascript juga.
Implementasi Pemngembangan Web menggunakan HTML, CSS, Javascript, dan Bootstrap
Dengan HTML dan CSS saja kita dapat menciptakan website yang enak untuk dilihat meskipun usaha yang diperlukan lebih besar secara umum jika kita tidak menggunakan library seperti Bootstrap. Berikut adalah contoh untuk suatu website portofolio suatu kursus yang diciptakan menggunakan HTML dan CSS saja.
Web di atas menyediakan tampilan yang cukup baik untuk dilihat, namun tidak memiliki fungsionalitas interaktif antara web dan pengguna sehingga terasa sangat datar. Kita dapat menggunakan Javascipt untuk membangun fungsi interaktif untuk menarik pengguna. Pada contoh berikut, terlihat implementasi pengembangan website menggunakan Javascript juga untuk menciptakan interaksi dengan pengguna beserta respon oleh web yang sesuai.
Terlihat di contoh berikut bahwa web menerima input pengguna dan menyediakan respon yang sesuai jika pengguna memberikan input yang salah. Dengan begitu, terciptalah interaksi antara pengguna dan laman web untuk meningkatkan kualitas pengalaman pengguna.
Design Web Perpustakaan
Berikut adalah landing page ketika memasuki web perpustakaan yang mengandung buku trending dan juga beberapa pilihan buku berdasarkan preferensi pengguna
Berikut adalah laman home ketika pengguna telah login
Berikut adalah tampilan untuk laman yang akan menampilkan semua kumpulan berdasarkan genre. Terdapat juga search bar
Berikut adalah laman registration untuk mendaftar ke perpustakaan bagi pengguna baru
Implementasi Design Web Perpustakaan
untuk source code dapat dilihat di link berikut:
Pada Source code terdapat main_menu.html yang adalah landing page untuk website saya. Terdapat juga login.html untuk laman login. Terdapat collections.html untuk laman collections. Terdapat juga news.html untuk laman news. Semua style terdapat di dalam folder slider/style-slider.css.
Comments
Post a Comment