127
55 56
57 58
59 60
61 62
63 64
65 div
div class
= form-group
label Konten
label textarea
class =
form-control rows
= 12
textarea div
button type
= submit
class =
btn btn-primary Simpan
button button
type =
submit class
= btn btn-danger
Cancel button
form div
body html
Jalankan pada browser dan tampilkan hasilnya. Buat pula form update dengan
cara seperti form artikel, bedanya hanya pada button, save as file form artikel,
ubah judul “Terbitkan Artikel” Menjadi “Update Artikel” dan ubah button “Simpan”
menjadi “update. Simpan dengan nama form_update.html
4. Mendesain Halaman Signin
Tulis kode dibawah ini dan simpan dengan nama signin.html, simpan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser
C:xampphtdocstopik4-1signin.html
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17 18
19 20
21 22
23 24
25 26
27 28
29 30
DOCTYPE html html
lang =
en head
meta charset
= utf-8
meta name
= viewport
content =
width=device-width, initial-scale=1 title
Signin title
-- Bootstrap core CSS -- link
rel =
stylesheet href
= cssbootstrap.min.css
link href
= stylesignin.css
rel =
stylesheet head
body div
class =
container form
class =
form-signin h2
class =
form-signin-heading Silahkan masuk
h2 label
for =
inputEmail class
= sr-only
Alamat Email label
input type
= email
id =
inputEmail class
= form-control
placeholder =
Alamat Email
requiredautofocus label
for =
inputPassword class
= sr-only
Password label
input type
= password
id =
inputPassword class
= form-
control placeholder
= Password
required div
class =
checkbox label
input type
= checkbox
value =
remember-me Ingat saya
label div
button class
= btn btn-lg btn-primary btn-block
type =
submit Sign in
button form
div -- container --
body html
128
E. Studi Kasus
1. Buatlah sebuah halaman kontak untuk pengunjung website yang didalamnya terdapat sebuah form untuk mengirimkan sebuah pesan oleh
pengunjung website kedalam admin web. Desainlah sesuai dengan tema pada latihan, anda bias memanfaatkan kode-kode yang ada pada latihan
Simpan dengan namakontak.htmldalam folder topik4-1
2. Buatlah sebuah antarmuka pada dashboard admin untuk menampilkan pesan yang dikirim melalui halaman kontak. Anda bias memodifikasi
halaman dashboard artikel.
3. Simpan dengan namapesan.html dalam folder topik4-1
F. Rangkuman
Front-End web adalah bagian utama dari sebuah web site yang berinteraksi langsung dengan pengguna atau pengunjung situs. Segala sesuatu yang
dilihat ketika melakukan navigasi dalam sebuah halaman web, baik dari font, warna, menu, dan segala yang menyangkut aspek desain yang nantinya
menjadi user interface dari aplikasi web adalah hasil penggabungan dari fungsi HTML, CSS, dan JavaScript dikontrol oleh browser pada komputer.
Desain web merupakan bagian terpenting dalam pembangunan sebuah halaman web, dalam desain web yang baik, unsur estetika yang harus
deperhatikan adalah warna, tata letak, dan layout. Selain itu juga ada prinsip- prinsip yang harus diperhatikan dalam mendesain sebuah web yaitu: Proximity
Prinsip, Clarity, Alignment Prinsip Contrast,Consistency
G. Umpan Balik
1. Apakah saudara mempu mendesain tampilan dan layout web yang bagus dan menarik dalam membangun front-end web application?
2. Apakah saudara memahami apa itu front-end framework Bootstrap? 3. Apakah saudara mengetahuicara menggunakan Bootstrap?
4. Apakah saudara mengetahui fitur-fitur dan keunggulan Bootstrap web framework?
