Tugas 6: Membuat Form Login dan Contact dengan Bootstrap

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website:

1. Sign In Form: https://dydyandra.github.io/bootstrap-forms/

2. Contact Form: https://dydyandra.github.io/bootstrap-forms/contact.html

Link Source Code: https://github.com/dydyandra/bootstrap-forms

Introduction

Pada penugasan ke-6, kami diminta untuk membuat form login dan contact dengan menggunakan Bootstrap.

Isi dari Form

Komponen yang digunakan pada form adalah card yang berisi form dan button. Adapun isi dari form yaitu:

1. Form Login

Form login berisi input username, password, dan button. Selain itu terdapat button untuk login menggunakan website lain seperti Google, Facebook atau SSO.

2. Form Contact

Form contact berisi input nama depan, nama belakang, email, keperluan dan pesan. Terdapat juga button untuk mengirimkan pesan tersebut.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, CSS dan JS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari form login dan contact. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat internal CSS untuk menambahkan beberapa style pada komponen.

JS untuk menambahkan validasi input form, dan untuk menambahkan modal yang akan muncul apabila form sudah disubmit.

Untuk men-deploy, saya menggunakan Github Pages.

Gambar Form:

Source Code:

Contact Page:

Link Source Code: https://github.com/dydyandra/bootstrap-forms

Penutup

Bootstrap memiliki banyak manfaat dalam pembuatan web, yaitu fleksibel dikarenakan dapat digunakan berulang kali dan juga desainnya yang responsif sehingga proses membangun website dapat menjadi lebih cepat, mudah, dan efisien. Selain itu, penggunaan bootstrap juga meminimalisir bug, dan juga ukuran file yang lebih kecil.

Dyandra Paramitha's