121 •
glyphicons-halflings-regular.eot •
glyphicons-halflings-regular.svg •
glyphicons-halflings-regular.ttf •
glyphicons-halflings-regular.woff •
glyphicons-halflings-regular.woff2
3.
Direktori “js” memiliki tiga buah file di dalamnya, yaitu: •
bootstrap.js •
bootstrap.min.js •
npm.js
D. Aktifitas Pembelajaran 1. Mendesain Halaman Home, Caruosel dan Menu
Buat folder dalam derektori C:\xampp\htdocs dengan nama topik4-1, copy file bootstrap.rar yang ada dalam CD kedalam forder topik4-1 dan ektrak file,
copy juga folder image dan style yang ada dalam CD paste satu folder dengan
file bootstap. Sehinga diperoleh file seperti gambar dibawah ini didalam folder topik4-1.
kemudian tulis kode dibawah ini dan simpan dengan nama home.html dan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui
browser
C:xampphtdocstopik4-1home.html
1 2
3 4
5 DOCTYPE html
html lang
= en
head title
Nama Proyek title
meta charset
= utf-8
122
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 31
32 33
34 35
35 37
38 39
40 41
42 43
44 45
46 47
48 49
50 51
52 53
55 56
57 58
59 60
61 62
63 64
65 66
67 68
69 70
71 72
73 74
meta name
= viewport
content =
width=device-width, initial-scale=1 link
rel =
stylesheet href
= cssbootstrap.min.css
link href
= stylecarousel.css
rel =
stylesheet style
.carousel-inner .item img, .carousel-inner .item a img {
width: 100; margin: auto;
} style
head body
-- CAROUSEL -- div
id =
myCarousel class
= carousel slide
data-ride =
carousel ol
class =
carousel-indicators li
data-target =
myCarousel data-slide-to
= class
= active
li li
data-target =
myCarousel data-slide-to
= 1
li li
data-target =
myCarousel data-slide-to
= 2
li ol
div class
= carousel-inner
role =
listbox div
class =
item active img
src =
imagesgambar1.jpg alt
= Chania
div class
= carousel-caption
h2 Judul Gambar 1
h2 p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
p div
div div
class =
item img
src =
imagesgambar2.jpg alt
= Flower
div class
= carousel-caption
h2 Judul Gambar 2
h2 p
Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
p div
div div
class =
item img
src =
imagesgambar3.jpg alt
= Flower
div class
= carousel-caption
h2 Judul Gambar 3
h2 p
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse p
div div
-- Left and right controls -- a
class =
left carousel-control href
= myCarousel
role =
button data-slide
= prev
span class
= glyphicon glyphicon-chevron-left
aria-hidden =
true span
span class
= sr-only
Previous span
a a
class =
right carousel-control href
= myCarousel
role =
button data-slide
= next
span class
= glyphicon glyphicon-chevron-right
aria-hidden =
true span
span class
= sr-only
Next span
a div
-- carousel-inner -- div
-- AKHIR SCRIPT CAROUSEL -- div
class =
container div
br nav
class =
navbar navbar-default div
class =
container-fluid
123
75 76
77 77
78 79
80 81
82 83
84 85
86 87
88 89
90 91
92 93
94 95
96 97
98 99
100 101
102 103
104 105
106 107
108 109
110 111
112 113
114 115
116 117
div class
= navbar-header
button type
= button
class =
navbar-toggle collapsed
data-toggle =
collapse data-
target =
navbar aria-expanded
= false
aria-controls =
navbar span
class =
sr-only Toggle navigation
span span
class =
icon-bar span
span class
= icon-bar
span span
class =
icon-bar span
button a
class =
navbar-brand href
= Nama Proyek
a div
div id
= navbar
class =
navbar-collapse collapse ul
class =
nav navbar-nav li
class =
active a
href =
Home ali
lia href
= Profil
ali lia
href =
Kontak ali
li class
= dropdown
a href
= class
= dropdown-toggle
data-toggle =
dropdown role
= button
aria- haspopup
= true
aria-expanded =
false Menu lain
span class
= caret
spana ul
class =
dropdown-menu lia
href =
Galery ali
lia href
= Video
ali ul
li ul
div --.nav-collapse --
div --.container-fluid --
nav div
div class
= row
div class
= col-sm-8 blog-main
div h2
Blog post h2
p December 23, 2015 by
a href
= Iswanul Umam
ap p
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. p
div -- .blog-post --
nav ul
class =
pager lia
href =
Previous ali
lia href
= Next
ali ul
nav div
-- .blog-main -- div
class =
col-sm-3 col-sm-offset-1 blog-sidebar div
class =sidebar-module sidebar-module-inset
h4 About
h4 p
Etiam porta em
sem malesuada magna em
mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
p div
div h4
Archives h4
ol class
= list-unstyled
lia href
= Januari 2015
ali lia
href =
Februari 2015 ali
lia href
= Maret 2015
ali lia
href =
April 2015 ali
lia href
= Mei 2015
ali lia
href =
Juni 2015 ali
lia href
= Juli 2015
ali lia
href =
Augustus 2015 ali
124
lia href
= September 2015
ali lia
href =
Oktober 2015 ali
lia href
= November 2015
ali lia
href =
Desember 2015 ali
ol div
div h4
Elsewhere h4
ol class
= list-unstyled
lia href
= GitHub
ali lia
href =
Twitter ali
lia href
= Facebook
ali ol
div div
-- .blog-sidebar -- div
-- .row -- script
src =
jsjquery.min.js script
script src
= jsbootstrap.min.js
script body
html
Jalankan pada browser dan tampilkan hasilnya.
2. Mendesain Dashboard Admin
kemudian tulis kode dibawah ini dan simpan dengan nama dashboard.html, simpan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan
melalui browser
C:xampphtdocstopik4-1dashboard.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
DOCTYPE html html
lang =
en head
meta charset
= utf-8
meta name
= viewport
content =
width=device-width, initial-scale=1 title
Dashboard Admin title
-- Bootstrap core CSS -- link
rel =
stylesheet href
= cssbootstrap.min.css
link href
= styledashboard.css
rel =
stylesheet head
body nav
class =
navbar navbar-inverse navbar-fixed-top div
class =
container-fluid div
class =
navbar-header button
type =
button class
= navbar-toggle collapsed
data-toggle =
collapse data-
target =
navbar aria-expanded
= false
aria-controls =
navbar span
class =
sr-only Toggle navigation
span span
class =
icon-bar span
span class
= icon-bar
span span
class =
icon-bar span
button a
class =
navbar-brand href
= Nama Proyek
a div
div id
= navbar
class =
navbar-collapse collapse ul
class =
nav navbar-nav navbar-right
125
27 28
29 30
31 32
33 34
35 35
37 38
39 40
41 42
43 44
45 46
47 48
49 50
51 52
53 55
56 57
58 59
60 61
62 63
64 65
66 67
68 69
70 71
72 73
74 75
76 77
7 lia
href =
Setting ali
lia href
= Logout
ali ul
div div
nav div
class =
container-fluid div
class =
row div
class =
col-sm-3 col-md-2 sidebar ul
class =
nav nav-sidebar li
class =
active a
href =
Artikel span
class =
sr- only
current spanali
lia href
= Kontak
ali lia
href =
Pesan ali
ul ul
class =
nav nav-sidebar lia
href =
User ali
lia href
= Setting
ali ul
div div
class =
col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main h1
class =
page-header Dashboard
h1 h2
class =
sub-header Artikel
h2 button
type =
submit class
= btn btn-success
Buat baru button
div class
= table-responsive
table class
= table table-striped
thead tr
th width
= 5
th th
width =
40 Judul
th th
width =
45 Konten
th th
width =
5 Aksi
th th
width =
5 th
tr thead
tbody tr
td 1
td td
Lorem td
td ipsum
td tdbutton
type =
submit class
= btn btn-info
Update buttontd
tdbutton type
= submit
class =
btn btn-danger Hapus
buttontd tr
tr tbody
table div
div div
div body
html
Jalankan pada browser dan tampilkan hasilnya.
126
3. Mendesain Form Artikel
Tulis kode dibawah ini dan simpan dengan nama form_artikel.html di folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui browser
C:xampphtdocstopik4-1form_artikel.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
31 32
33 34
35 35
37 38
39 40
41 42
43 44
45 46
47 48
49 50
51 52
53 DOCTYPE html
html lang
= en
head meta
charset =
utf-8 meta
name =
viewport content
= width=device-width, initial-scale=1
title Dashboard Admin
title -- Bootstrap core CSS --
link rel
= stylesheet
href =
cssbootstrap.min.css link
href =
styledashboard.css rel
= stylesheet
head body
nav class
= navbar navbar-inverse navbar-fixed-top
div class
= container-fluid
div class
= navbar-header
button type
= button
class =
navbar-toggle collapsed data-toggle
= collapse
data- target
= navbar
aria-expanded =
false aria-controls
= navbar
span class
= sr-only
Toggle navigation span
span class
= icon-bar
span span
class =
icon-bar span
span class
= icon-bar
span button
a class
= navbar-brand
href =
Nama Proyek a
div div
id =
navbar class
= navbar-collapse collapse
ul class
= nav navbar-nav navbar-right
lia href
= Setting
ali lia
href =
Logout ali
ul div
div nav
div class
= container-fluid
div class
= row
div class
= col-sm-3 col-md-2 sidebar
ul class
= nav nav-sidebar
li class
= active
a href
= Artikel
span class
= sr-
only current
spanali lia
href =
Kontak ali
lia href
= Pesan
ali ul
ul class
= nav nav-sidebar
lia href
= User
ali lia
href =
Setting ali
ul div
div class
= col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main
h1 class
= page-header
Dashboard h1
h2 class
= sub-header
Terbitkan Artikel h2
form div
class =
form-group label
Judul Artikel label
input type
= text
class =
form-control placeholder
= Judul artikel
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
