Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
1
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
2
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
3
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
4
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
5
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
6
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
7
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
8
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
9
Sopian Hadianto ~ founder of Geek House ~ geek...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
10
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
11
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
12
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
13
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
14
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
15
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
16
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
17
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
18
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
19
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
20
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
21
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
22
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
23
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
24
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
25
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
26
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
27
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
28
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
29
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
30
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
31
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
32
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
33
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
34
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
35
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
36
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
37
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
38
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
39
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
40
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
41
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
42
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
43
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
44
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
45
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
46
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
47
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
48
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
49
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
50
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
51
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
52
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
53
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
54
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
55
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
56
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
57
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
58
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
59
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
60
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
61
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
62
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
63
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
64
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
65
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
66
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
67
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
68
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
69
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
70
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
71
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
72
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
73
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
74
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
75
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
76
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
77
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
78
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
79
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
80
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
81
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
82
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
83
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
84
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
85
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
86
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
87
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
88
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
89
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
90
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
91
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
92
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
93
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
94
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
95
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
96
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
97
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
98
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
99
Sopian Hadianto ~ founder of Geek House ~ gee...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
100
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
101
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
102
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
103
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
104
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
105
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
106
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
107
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
108
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
109
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
110
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
111
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
112
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
113
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
114
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
115
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
116
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
117
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
118
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
119
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
120
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
121
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
122
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
123
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
124
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
125
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
126
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
127
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
128
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
129
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
130
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
131
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
132
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
133
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
134
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
135
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
136
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
137
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
138
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
139
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
140
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
141
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
142
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
143
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
144
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
145
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
146
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
147
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
148
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
149
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
150
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
151
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
152
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
153
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
154
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
155
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
156
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
157
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
158
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
159
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
160
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
161
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
162
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
163
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
164
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
165
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
166
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
167
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
168
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
169
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
170
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
171
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
172
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
173
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
174
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
175
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
176
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
177
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
178
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
179
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql
180
Sopian Hadianto ~ founder of Geek House ~ ge...
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto
Upcoming SlideShare
Loading in …5
×

Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto

15,306 views

Published on

Buku ini menjelaskan bagaimana cara membangun responsive website dengan twittter bootstrap. Mulai dengan mempelajari twitter bootstrap itu sendiri, sebuah framework CSS dasyat untuk membangun responsive website dengan lebih cepat dan desain yang cantik. Di dalam buku ini juga dijelaskan dengan konsep tutorial bagaimana langkah demi langkah membangung responsive website yang dinamis dengan PHP (FrontEnd dan BackEnd nya) dengan menggunakan DBMS MySQL, sehingga pembaca dapat memahami dasar - dasar twiiter bootstrap

Published in: Technology
10 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total views
15,306
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3,659
Comments
10
Likes
17
Embeds 0
No embeds

No notes for slide

Membangun responsive website dengan twitter bootstrap 2.0 + php dan mysql by sopian hadianto

  1. 1. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 1 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan MySQL Sopian Hadianto
  2. 2. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 2 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kata Pengantar Assalamualaikum Wr. Wb. Alhamdulillahirobbilalamin, segala puji bagi Allah tuhan semesta alam, zat yang Maha mengetahui atas segala sesuatu apa yang ada di bumi dan apa yang ada di langit. Dan syukur Alhamdulillah saya panjatkan, karena atas rahmat-Nya buku ini dapat diselesaikan. Buku ini saya persembahkan kepada Ayah saya semoga beliau diberi kesehatan dan almarhum Ibu saya semoga amal ibadahnya diterima disisi Allah SWT. Amin. Kepada kaka – kaka dan keluarga saya yang selalu mendukung saya untuk melanjutkan kuliah. Tak lupa kepada rekan - rekan saya atas segala dukungannya, saya ucapkan terima kasih. Kritik dan saran terhadap buku ini akan saya terima dengan baik sebagai koreksi membangun demi kemajuan pengembangan website programming di Indonesia. Semoga buku ini bisa bermanfaat. Amin Bandung, 20 Maret 2014 Sopian Hadianto
  3. 3. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 3 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Daftar Isi Kata Pengantar.......................................................................................................2 Daftar Isi.................................................................................................................3 BAB 1......................................................................................................................6 MENGENAL BOOTSTRAP ........................................................................................6 1.1. Apa itu Bootstrap ?.................................................................................6 1.2. Memulai Bootstrap ................................................................................9 1.3. Sistem Responsive Layout....................................................................21 1.4. Dasar – dasar CSS Bootstrap ................................................................34 1.5. Component/Widget Bootstrap.............................................................60 1.6. JavaScript .............................................................................................87 BAB 2..................................................................................................................103 MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END ................................103 2.1. Layout Website Company Profile/Portfolio........................................103 2.2. Halaman Index ...................................................................................104 2.2.2. Section Layanan .............................................................................119 2.2.3. Section Portfolio.............................................................................123 2.2.4. Section Blog....................................................................................126 2.2.6. Section Footer................................................................................132 BAB 3..................................................................................................................134 MEMBANGUN WEB SERVER...............................................................................134 3.1. Mengenal Web Server........................................................................134 3.2. Instalasi Webserver............................................................................134 3.3. Mengenal MySQL dan PHPMyAmin ...................................................141
  4. 4. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 4 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz BAB 4..................................................................................................................155 MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP ..................................155 4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server 155 4.2. Membangun Website dinamis dengan PHP.......................................157 4.2.1. Membuat templating website........................................................157 BAB 5..................................................................................................................176 MEMBANGUN CONTROL PANEL ADMIN/BACK END..........................................176 5.1. Konfigurasi Database yang akan digunakan .......................................176 5.2. Kerangka template halaman admin. ..................................................178 5.3. Halaman – halaman pendukung yang dibutuhkan.............................181 5.4. Menambahkan kondisi untuk variable templating.............................187 5.5. Membuat folder – folder untk setiap konten menu admin................189 5.6. Konten menu......................................................................................190 5.7. Membangun halaman login ...............................................................241 5.8. Membuat halaman logout..................................................................246 5.9. Membuat folder – folder sebagai tempat upload gambar.................247 BAB 6..................................................................................................................249 MEMBANGUN KONTEN DINAMIS TIAP SECTION DENGAN MYSQL DAN PHP.....249 6.1. Sistem templating pada index.php.....................................................249 6.2. Koneksi.php untuk konfigurasi database............................................251 6.3. Home.php untuk menampilkan section - section...............................251 6.4. Memodifikasi section dengan menambahkan konten dari database MySQL dengan menggunakan PHP ................................................................252 6.4.2. Section Layanan .............................................................................254 6.4.3. Section Portfolio.............................................................................260
  5. 5. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 5 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 6.4.4. Section Blog....................................................................................266 6.4.5. Section Kontak................................................................................273 6.5. Menambahkan efek Smooth Scroll untuk mempercantik one-page website...............................................................................................................279 6.5.1. Menambahkan jquery.min.js dan smoothscroll.js.............................279 6.5.2. Menambahkan kelas smoothScroll pada link – link menu navigasi ..280 6.5.3. Memodifikasi tag <body> pada index.php ........................................280 Referensi............................................................................................................282 Daftar Pustaka ...................................................................................................283 Tentang Penulis..................................................................................................284
  6. 6. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 6 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz BAB 1 MENGENAL BOOTSTRAP 1.1. Apa itu Bootstrap ? “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” “Sebuah Framework yang manis, intuitif dan powerfull untuk pengembangan web yang lebih cepat dan lebih mudah”. “By nerds, for nerds.” Dari kutu buku, untuk kutu buku. Bootstrap adalah sebuah Framework yang dikembangkan di Twitter oleh @mdo dan @fat, Bootstrap menggunakan LESS CSS, yang di-compile via Node, dan dikelola melalui GitHub untuk membantu nerds membangun web yang keren. Sekilas tentang Bootstrap Creator : @mdo (Mark Otto) dan @fat (Jacob) adalah desainer dan programmer Twitter yang membuat dan mengembangkan Bootstrap. Sekilas LESS CSS: LESS CSS LESS adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan fitur variabel, mixin, serta operasi dan fungsi yang dimilikinnya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS. Proses kompilasi LESS menjadi CSS dapat berjalan baik di sisi klien dengan javascript maupun di sisi server dengan bantuan Node.js dan Rhino. Berkas LESS yang memiliki format *.less dan akan diubah menjadi file berformat CSS oleh file javascript less.js pada sisi klien atau melalui kompilasi pada sisi server. Sekilas Node atau Node.js :
  7. 7. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 7 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Node.js adalah sebuah platform software yang dipakai untuk membangun aplikasi – aplikasi serverside yang fleksibel di sebuah network / jaringan. Node.js menggunakan JavaScript sebagai bahasa pemrogaman dan dapat dengan mudah menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O. Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx. Node.js pertama kali dibuat oleh Ryan Dahl pada tahun 2009 yang kemudian berkembang pesat di bawah licensi Open Source MIT oleh sebuah perusahaan bernama Joyent Inc. Pada hakekatnya Node.js dikembangkan berdasarkan teknologi Google V8 JavaScript engine serta berisi kompilasi skrip inti dan banyak modul siap pakai yang bermanfaat sehingga pengguna (dalam hal ini web developer) tidak perlu melakukan coding dan mendesain segalanya dari awal. Jadi, apa sebenarnya isi dari software Node.js itu? Pada dasarnya Node.js adalah 2 hal: sebuah runtime environment dan script library. Sebuah runtime environment adalah sebuah software yang berfungsi untuk mengeksekusi, menjalankan dan mengimplementasikan fungsi – fungsi dan cara kerja inti dari suatu bahasa pemrograman. Contoh: Agar sebuah server bisa mengeksekusi script PHP maka harus terlebih dulu diinstall PHP runtime environment-nya. Mungkin anda sudah pernah dengar LAMP (Linux, Apache, MySQL dan PHP). Begitu pula Node.js. Agar sebuah server bisa mengeksekusi script JS, maka terlebih dahulu harus diinstall Node.js sebagai runtime environment untuk JavaScript. Sedangkan Script Library adalah kumpulan, kompilasi atau bank data berisi skrip / kode – kode pemrogaman. Sekilas GitHub: GitHub GitHub adalah layanan berbasis web hosting untuk proyek-proyek pengembangan perangkat lunak yang menggunakan sistem kontrol revisi Git. GitHub menawarkan fasilitas berbayar untuk repositori pribadi, dan akun gratis untuk proyek-proyek open source. Pada Mei 2011, GitHub adalah situs yang paling populer untuk situs repositori terbuka.
  8. 8. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 8 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz GitHub juga merupakan tempat terbaik untuk berbagi kode dengan teman-teman, rekan kerja, teman sekelas, dan orang asing. Lebih dari dua juta orang menggunakan GitHub untuk membangun hal-hal menakjubkan bersama-sama. Dengan fitur kolaboratif GitHub.com, desktop dan aplikasi mobile, dan GitHub Enterprise, belum pernah lebih mudah bagi individu dan tim untuk menulis kode yang lebih baik, lebih cepat. “Made for everyone”. Dibuat untuk semua orang. Bootstrap ini dibuat tidak hanya untuk dapat terlihat luar biasa di browser desktop saja, namun di browser tablet dan smartphone melalui responsive CSS (CSS yang responsive, saat halaman HTML dan CSS dibuka di Browser Tablet dan SmartPhone maka tampilannya akan menyesuaikan dengan resolusi layarnya). “Packed with features.” Dikemas dengan banyak fitur. 12 kolom untuk grid yang responsive, lusinan komponen/widget, plugin – plugin JavaScript, typography, form controls, dan sebuah web-based Customizer untuk membuat Bootstrap milik kita sendiri. Sudah banyak website yang menggunakan Bootstrap, contohnya :
  9. 9. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 9 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz http://soundready.fm/,http://kippt.com/, http://www.gathercontent.com/,dan masih banyak lagi dan website saya sendiri http://www.tugaskampus.web.id (masih dalam tahap pengembangan - under-construction) yang dibangun dengan Bootstrap. Persiapan sebelum menggunakan Bootstrap, minimal kita harus : Menguasai dasar – dasar HTML, CSS (JavaScript dan LESS CSS bila diperlukan). Kemampuan diatas mutlak diperlukan karena intinya dalam pengembangan website berbasis Bootstrap ini adalah bagaimana kita memodifikasi HTML, CSS serta JavaScriptnya sekreatif mungkin. Kebutuhan Software : Website Editor : disarankan Notepad++ atau Sublime Text 2 Browser : Google Chrome, Mozilla Firefox, IE ( diatas IE7 ) dll. *untuk sementara cukup 2 software itu saja, karena untuk saat ini kita belum masuk ke web dinamis dengan PHP. Alasan kita menggunakan Bootstrap : OpenSource, bebas untuk dikembangkan oleh siapapun. Banyak referensi desain dari pengambang – pengembang Bootstrap lainnya. Desain Responsive untuk Desktop, Tablet, dan Smartpone. Jadi pengembang web hanya perlu membuat 1 buah website saja yang ketika dibuka di Desktop, Tablet, dan Smartpone tampilannya akan luar biasa responsive berbeda dengan website biasanya. Bootstrap menawarkan kecepatan dan kemudahan pengembangan website. Modifikasi desain tanpa batasan, kita dapat memanipulasi atau menambahkan CSS dan javascript untuk mempercantik website kita. Jadi dapat dikatakan bahwa Bootstrap ini adalah framework yang berisi kumpulan CSS, JavaScript, Font, icon dan bagaimana cara menggunakannya dengan aturan – aturan khas sebuah Framework. 1.2. Memulai Bootstrap Bootstrap sendiri telah berkembang kedalam beberapa versi, sepengetahuan saya sudah versi 3.0.3 (mungkin sudah ada versi terbarunya) namun pada kali ini saya menggunakan Bootstrap versi 2.3.2, karena versi 2.x.x ini memiliki dokumentasi yang lengkap dan merupakan dasar bagi versi – versi selanjutnya.
  10. 10. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 10 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 1. Download Anda dapat mendownload Bootstrap versi 2.3.2 atau versi 2.x.x lainnya di Github, https://github.com/twbs/bootstrap/ (tidak disarankan untuk mendownload versi 3.x.x ke atas karena akan sedikit berbeda dalam kode – kodenya, serta kelas – kelas CSS yang digunakannya. [ Dokumentasi Bootstrap versi 2.3.2 ] 2. Struktur File bootstrap/assets ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png
  11. 11. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 11 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz [Struktur File Bootstrap versi 2.3.2, un-compiled file ] Bootstrap.css dan bootstrap.min.css, adalah file yang sama perbedaannya adalah bootstrap.css adalah kode css murni yang belum di-compile (menungkinkan kita untuk memodifikasi kode – kode css) sedangkan bootstrap.min.css adalah kode css yang sudah di-compile (tidak memungkinkan kita untuk memodifikasi, dengan .min ini kita dapat langsung menggunakan Framework Bootstrap ini tanpa harus memodifikasinya). [bootstrap.js (un-compiled) dan bootstrap.min.js (compiled)] Sama halnya dengan bootstrap.js dan bootstrap.min.js, dan file – file css, dan js lainnya. Selain itu bootstap juga menyediakan icon – icon glyphicons-
  12. 12. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 12 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz halflings.png dan glyphicons-halflings-white.png yang dapat digunakan untuk mempercantik tampilan website dari Glyphicons Free licensed under CC BY 3.0. [Glyphicons Free licensed under CC BY 3.0.] Selain itu bootstap juga menyediakan JQuery, dan plugin – plugin javascript* (membutuhkan JQuery) dan file – file tambahan lainnya. Untuk keperluan latihan dan pemahaman lebih dalam tentang bootstap, maka saya telah menyertakan file – file pendukung dalam CD di buku ini. Silahkan Ekstraks bootstrap.zip yang ada di dalam CD, ke drive D atau E Anda. 3. Basic HTML Template Untuk dapat menggunakan Bootstrap maka kita perlu untuk memasukan file – file css, dan javascript kita ke dalam file html. Berikut adalah contoh file html tanpa dan dengan bootstrap. File HTML yang umum, tanpa bootstrap : [File HTML yang umum, tanpa bootstrap]
  13. 13. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 13 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz File HTML dengan bootstrap : [File HTML dengan bootstrap] 1. Bukalah Editor anda, lalu ketikan kode diatas : 2. Simpan dengan nama html-dengan-bootstrap.html di Folder Bootstrap anda, di E:bootstrap [Menyimpan file html] 3. Lalu buka di browser Anda.
  14. 14. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 14 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz [File HTML dengan bootstrap – diuji di browser] Latihan Buatlah folder “latihan” di dalam folder bootstrap anda. Cara 1 : a. Bukalah file index.html yang ada di dalam folder bootstrap/docs/index.html di browser anda. b. Pilihlah menu “Get Started”, lalau pilihlah submenu “Examples”
  15. 15. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 15 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz c. Klik salah satu template yang tersedia misalnya “Strater template” d. Klik kanan pada area kosong, lalu pilihlah View Page Source untuk melihat source koding dari halaman html tersebut
  16. 16. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 16 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz e. Lalu ketiklah koding html tersebut di editor anda, dan simpanlah di folder latihan dengan nama latihan-1.html (*jangan copy and paste ya, supaya ngetiknya lancar dan faham kelas – kelas bootstrap nantinya). f. Lalu bukalah file latihan-1.html di browser anda Apakah tampilannya seperti gambar di atas? Apa tampilan tersebut sangat berbeda dengan contoh? Jika ia coba anda buka kembali file latihan-1.html di editor anda.
  17. 17. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 17 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kenapa tampilan tidak sesuai ? Hal ini karena tag : <link href="../../assets/css/bootstrap.css" rel="stylesheet"> Pada atribut href=”{merujuk pada folder tempat file css ataupun file javascript yang akan digunakan berada}” Jika kita lihat file latihan-1.html berada di folder : E:bootstraplatihan Dan file bootstrap.css berada di folder : E:bootstrapassetscss Maka karena file latihan-1.html berada di folder latihan yang berada di folder bootstrap, dan file letihan-1.html ingin mengambil/merujuk bootstrap.css yang ada di luar folder latihan, maka file latihan-1.html perlu keluar satu folder dengan kode : “ ../ ” = “keluar satu folder dari folder dimana file berada” Lalu masuk ke folder assets -> css -> bootstrap.css, Replace-lah “../../” dengan “ ../”
  18. 18. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 18 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz g. Bukalah kembali file latihan-1.html [ Tampilan Desktop ] Berhasilkah ? Bagaimana menguji bahwa latihan-1.html anda juga sudah responsive ? Cara 1 : 1. Ikuti langkah gambar di bawah ini
  19. 19. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 19 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Maka tampilan responsivenya adalah sebagai berikut.
  20. 20. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 20 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz [ Tampilah Mobile – Tool Responsive Mozilla FireFox ] Tools di Mozilla firefox ini cukup berguna bagi para develover website. Atau Cara 2 : Kecilkanlah resolusi browser anda [ Tampilah Mobile – mengecilkan jendela browser ] Berhasilkah? h. Cobalah berlatih dengan template – template lainnya dan jangan copy paste. NB: ../ = keluar satu folder ../../ = keluar dua folder ./ atau / atau tanpa “/” = tetap di folder yang sama, lihat contoh html-dengan- bootstrap.html Cara 2 :
  21. 21. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 21 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Cara 2 hampir sama dengan cara 1, bedanya adalah pada cara dua anda cukup membuka filenya dengan editor anda Selanjutnya sama saja dengan cara 1, ingat jangan copas. 1.3. Sistem Responsive Layout  Bootstrap membutuhkan HTML 5 doctype untuk disertakan di dalam setiap file HTML nya. <!DOCTYPE html> <!—html 5 doctype --> <html lang="en"> <!—html language english --> ... </html> Apa itu Layout?  Layout adalah suatu kerangka dasar atau suatu tempat yang nantinya dapat menampung konten – konten dari website, biasanya sebuah layout umumnya akan berisi : header, navigasi, konten, dan footer. Header Navigasi/menu Konten utama Sub konten/ sidebar footer
  22. 22. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 22 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz layout di dalam Bootstrap mirip halnya dengan membuat layout dengan tag <table>di html. Contoh menggunakan tag <table>: <table> <tr> <!—tr = tag untuk membuat satu baris kosong --> <td>Kolom ke-1 baris ke-1</td> <!—td = tag untuk membuat kolom --> </tr> <tr> <!—tr = tag untuk membuat satu baris kosong --> <td>Kolom ke-1 baris ke-2</td> <td>Kolom ke-2 baris ke-2</td> </tr> </table> Maka hasilnya sebagai berikut : Kolom ke-1 baris ke-1 Kolom ke-1 baris ke-2 Kolom ke-2 baris ke-2 Selain menggunakan tag <table>dalam merancang layout, biasanya pengembang website menggunakan tag <div> untuk merancang website, karena dianggap lebih dinamis daripada tag <table>. Bootstrap juga menggunakan tag <div> untuk merancang desain layout website. Layout Bootstrap  Default Grid System/Fixed Grid  Live grid example Default bootstrap grid system terdiri dari 12 kolom, jika tanpa memakai fitur responsive maka lebar container nya menjadi 940pixel. Dengan memakai file CSS, the Grid (maksudnya adalah baris dan kolom yang dibuat) akan beradaptasi menjadi 724px dan 1170px tergantung dari resolusi device kita. Jika resolusi layar dibawah 767px maka, baris dan kolom akan menjadi fluid(mengapung) dan tertumpuk secara vertikal.
  23. 23. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 23 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Bingung? Ayo lihat ke contoh gambar. [Layout ketika resolusi layar device lebih dari 767px] [Layout ketika resolusi layar device kurang dari 767px] Inilah yang dinamakan dengan responsive, sehingga kita tidak usah khawatir konten website kita tidak akan user friendly lagi saat dibuka di device dengan layar yang kecil. Selain itu responsive design juga menghilangkan proses “zoom-in” pada website saat dibuka di mobile device.
  24. 24. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 24 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz [Tampilan website non-responsive] Untuk dapat melihat konten maka kita perlu melakukan zoom-in pada konten. Hal itu lah salah satu perbedaan antara website non-responsive dengan website responsive. Saatnya merancang layout. Karena kita akan menggunakan Framework Bootstrap, maka kita perlu mengikuti aturan pemakaian kelas yang sesuai. Aturan untuk membuat layout :  Untuk membuat 1 baris kosong kita memakai kelas .row (nilai default dari kelas .row adalah span12, maka jumlah kolom – kolom span* harus sama dengan 12 untuk menjaga kepersisian layout kita )  Untuk membuat kolam kita menggunakan kelas .span* (*adalah nilai lebar kolom mulai dari span1 - span12) Latihan a. Bukalah editor anda, ketikan kode berikut dan simpanlah dengan nama Latihan-2-container-layout-sederhana.html di folder latihan anda
  25. 25. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 25 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Coba buka di browser anda. Apakah berhasil? Lalu kecilkan layar browser anda. Apakah tampilannya belum responsive?
  26. 26. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 26 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tentu saja, hal ini karena bootstrap juga menghendaki tampilan non-responsive, jika kita tidak memasukan bootstrap-responsive.css. c. Sekarang tambahkan ootstrap-responsive.css pada file latihan-2 anda. d. Buka kembali filenya Apakah tampilannya seperti ini? Jika yam aka anda sukses membuat layout responsive.
  27. 27. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 27 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Offsetting columns Pindahkan kolom ke sebelah kanan dengan kelas .offset*. setiap kelas menambahkan margin kiri sebesar nilai offsetnya. Latihan a. Bukalah file Latihan-2-container-layout-sederhana.html anda b. Lalu pada bagian baris 1, gantilah kodingnya menjadi seperti ini, c. Save as dengan nama Latihan-3-container-layout-offset.html, lalu bukalah di browser.
  28. 28. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 28 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Terlihat adanya jarak antara kolom 1 dan 2, itu karena di kolom 2 ditambahkan kelas offset. Nesting Columns Untuk menjaringkan kolom di dalam kolom, kita dapat membuatnya dengan kode sebagai berikut : Live Fluid Grid Fluid Grid System menggunakan persentase dari pixel untuk lebar kolomnya. Ia memiliki kemampuan responsive sama halnya dengan default drid/fixed grid, Fluid Grid akan memenuhi layar device jika berada diluar kelas .container. Latihan a. Bukalah file Latihan-3-container-layout-offset.html anda b. Gantilah kelas .container nya menjadi kelas .row-fluid. c. Simpanlah dengan nama Latihan-4-fluid-layout.html, lalu bukalah file tersebut
  29. 29. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 29 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tampak bahwa, grid rapat ke sisi jendela browser atau memenuhi layar. Responsive Design Mengaktifkan fitur responsive Seperti yang saya katakana sebelumnya, bahwa Bootstrap mendukung responsive design dan juga un-respnsive design, karena itu untuk dapat menggunakannya kita perlu memasukan .bootstrap-responsive.css di dalam tag <head>. Akan tetapi jika kita memakai bootstrap.min.css (compiled css) maka sudah automatis menjadi responsive. Tentang Bootstrap yang responsive Dengan queri – queri tertentu memungkinkan untuk men-custom CSS berdasarkan beberapa kondisi seperti – ratios, width, display type, dll. Tetapi biasanya difokuskan sekitar min-width dan max-width (batas minimal lebar dan maksimalnya)
  30. 30. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 30 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Responsive Bootstrap akan :  Memodifikasi lebar dari kolom di grid  Menumpuk element secara mengambang/float saat dibutuhkan  Me-resize heading dan teks supaya lebih sesuai dengan device Supported devices/Perangkat yang didukung Bootstrap mendukung perangkat – perangkat sebagai berikut : Responsive utility classes Untuk mempercepat mobile-friendly development, gunakanlah kelas utility ini untuk menampilkan dan menyembunyikan pada device. Dibawah adalah sebuah tabel dari kelas – kelas yang tersedia dan efek – efeknya dengan label sesuai dengan nama – nama device.
  31. 31. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 31 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kapan menggunakan kelas ini? saat kita ingin menampilkan atau menyembunyikan konten pada sebuah device. Berikut adalah cara menggunakannya : a. Buatlah file html berikut
  32. 32. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 32 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Simpanlah dengan nama Latihan-5-Responsive-Visibility-Test.html, lalu bukalah file tersebut. Maka tampilannya desktopnya adalah :
  33. 33. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 33 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kecilkan layar browser anda ke ukuran tablet, maka tampilan tabletnya : Kecilkan layar browser anda ke ukuran smartphone, maka tampilan smartphonenya:
  34. 34. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 34 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Mudah bukan? Sekarang anda dapat membuat layout apa saja dengan mudah. 1.4. Dasar – dasar CSS Bootstrap Untuk memulai latihan dasar – dasar css, komponen css dan komponen javascript dari bootstrap, buatlah file template html latihan berikut :
  35. 35. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 35 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Simpanlah dengan nama template.html di dalam folde bbostrap anda.
  36. 36. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 36 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Sebenarnya file javascript tidak usah dimasukan semua, tergantung kebutuhan. Misalnya kita ingin membuat image slide-show kita butuh file bootstrap- carousel.js, maka kita harus memasukan file tersebut. Akan tetapi supaya kita tidak kerepotan dalam berlatih (file mana – mana saja yang harus dimasukan), kita dapat memasukan semua file javascript maupun cssnya. A. Typography Typography kurang lebih adalah suatu seni bagaimana menampilkan tulisan yang indah dan enak dilihat. Bootstrap telah mengatur style tag – tag html, agar memiliki typography yang baik. Untuk mengefisiensikan waktu penjelasan, saya akan menjelaskan fungsi inti dan bagaimana cara menggunakan tag – tag html dan kelas – kelas di bagian Base CSS ini. Anda dapat mempelajari lebih jauh dengan membuka dokumentasi bootstrap docs, dan pilih menu “Base CSS” lalu membuka source code-nya. 1. Heading : <h1> - <h6> Tempatkan kode berikut di dalam file template.html anda.
  37. 37. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 37 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Maka tampilannya seperto berikut : Lakukan hal yang sama pada kode – kode dibawah. 2. Paragraf <p> <p class=”lead”> gunakan kelas .lead untuk membuat judul pada tag <p> atau <span>.
  38. 38. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 38 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 3. Emphasis <small> : tag ini untuk membuat teks kecil 4. Teks berwarna Untuk menampilkan teks berwarna kita dapat menggunakan kelas – kelas berikut. Pada bootstrap sudah disediakan warna – warna default yang setiap warnanya memiliki arti masing – masing. Warna – warna ini sudah diberi nama sesuai dengan namanya masing – masing. Biasanya nama – nama ini akan dipakai bersamaan dengan kelas yang lain, untuk memberi arti tampilan kelas tersebut dengan warnanya. Daftar nama, warna dan maknanya : Warning : kuning : sebagai tanda peringatan Error : merah : tanda error atau aksi yang negatif Info : biru : tanda informasi Success : hijau : tanda keberhasilana atau aksi yang positif Muted : abu – abu : tanda tidak aktif Contoh penggunaanya :
  39. 39. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 39 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Selain digunakan untuk teks, nama – nama warna/tanda ini ada yang digunakan pada kelas lainnya, misalnya pada kelas btn (button), alert dll. 5. Abbreviations <abbr> : untuk menampilkan kepanjangan dari teks, dan menampilkanya ketika teksnya disorot. 6. Addresses <address> : format untuk menampilkan alamat, biasanya digunakan untuk alamat di footer
  40. 40. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 40 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 7. Blockquotes <blockquote> : untuk melakukan pengutipan dari sumber yang lain, contoh dalam mengutip pendapat orang lain di dalam artikel.
  41. 41. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 41 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Secara default <blockquote> akan mengapung/float ke sebelah kiri, untuk menampilkannya mengapung di sebelah kanan gunakan kelas .pull-right. 8. List a. Unordered : daftar/list dari item tanpa nilai (angka, huruf, dll)
  42. 42. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 42 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Ordered : daftar/list dari item dengan nilai (angka, huruf, dll) Untuk menonatifkan angka/symbol dari list, gunakanlah kelas .unstyled didalam tag <ul>/<ol> nya. B. Code Untuk menampilkan tag – tag kode html anda di dalam halaman html anda, gunakanlah tag <code>
  43. 43. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 43 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz C. Tables Sama seperti membuat tabel html biasa, namun gunakanlah kelas .table untuk menampilkan tabel dengan style bootstrap. [Default Table] Style lain untuk table, anda dapat menambahkan kelas – kelas style lain untuk tag <table> sebagai berikut : [ .table-striped ] Karena kelas .table-striped adalah subkelas dari kelas .table, maka untuk menggunakannya kita harus menyertakan kelas .table terlebih dahulu.
  44. 44. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 44 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz [ .table-bordered ] tabel dengan border [ .table-hover ] baris akan berubah warna ketika disorot. Kelas baris/row opsional lainnya :
  45. 45. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 45 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Dengan menyertakan kelas – kelas warna diatas di dalam tag – tag table maka akan mewarnai tabel tersebut. D. Forms Seperti yang kita tahu bahwa Form adalah salah satu media untuk mengndapatkan inputan dari user, desain form yang userfriendly harus menjadi acuan utama dalam pembuatan form. a. Default Style
  46. 46. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 46 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Ket. : o <legend> = untuk nama dari Form o <label> = untuk label dari media inputan (textbox, radio, checkbox dll) o .help-block = tempat untuk menempatkan informasi tambahan bagaimana cara mengisi form dengan benar b. Optional layouts Bootstrap telah menyediakan beberapa pilihan layout form tentang beberapa kasus desain form yang sering kita temui. o Search Form Form untuk melakukan pencarian.
  47. 47. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 47 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Ket. : .input-medium = ukuran dari inputan, bootstrap menyediakan berbagai ukuran untuk inputan. o Inline Form Form ini menempatkan semua komponen form ke dalam satu baris saja, bisanya digunakan untuk form login, pencarian dll. o Horizontal form Digunakan untuk membuat tampilan komponen – komponen form tertata dengan rapi.
  48. 48. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 48 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Ket. : .form-horizontal = letakan di dalam tag <form> .control-group= menyatukan label dan inputan dalam satu baris .control-label = kelas untuk tag <label> .controls = kelas untuk tag – tag inputan Placeholder = menampilkan teks buram di dalam inputan
  49. 49. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 49 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz c. Inputan form yang didukung (Supported form controls) Inputan – inputan dalam form yang didukung bootstrap. o Input Untuk menampung data karakter yang sedikit. o Textarea Untuk menampung data karakter yang banyak atau menampung suatu teks artikel. o Checkbox dan radio Checkbox biasanya digunakan untuk memberikan beberapa pilihan yang dapat diinputkan. Contohnya checkbox “hobi”, kita dapat mem Radio biasanya digunakan untuk memberikan hanya satu pilihan yang dapat diinputkan dari beberapa pilihan yang tersedia. Ket. : Biasanya nama kelas – kelas inputan akan sama dengan nama tag htmlnya dan diletakan di dalam tag <label>, karena inputan selalu berdampingan dengan label keterangannya.
  50. 50. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 50 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz o Select Select atau combo box, inputan untuk memasukan hanya satu inputan dari beberapa pilihan yang tersedia, contohnya combobox “agama”, kita hanya boleh memilih satu agama saja dari banyak agama yang tersedia. d. Style Inputan yang lain. o Prepended and appended inputs Style ini biasanya digunakan untuk memberikan keterangan pada textbox, sebelum dan sesudah textbox.
  51. 51. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 51 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz o Button instead of text Style ini menyatukan button dengan textbox. o Button Dropdown
  52. 52. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 52 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Daftar submenu ditempatkan di antara tag <li>. e. Control Sizing/Ukuran untuk inputan/komponen form Gunakanlah relative sizing (ukuran yang tetap) seperti kelas .input-large atau cocokan ukuran inputan anda dengan ukuran grid/layout kelas .span. o Block Level Inputs Ukuran inputan akan menyesuaikan secara penuh pada ukuran grid/layout. o Relative Sizing (ukuran yang relative/tetap)
  53. 53. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 53 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz o Grid sizing
  54. 54. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 54 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz f. Uneditable inputs Untuk inputan yang tidak dapat di edit. g. Form Actions Button untuk mengeksekusi data inputan dari form.
  55. 55. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 55 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz h. Validation states Bootstrap menyertakan style validasi untuk pesan error, warning, info dan success, style ini berguna untuk memberitahukan kepada user tentang status inputan yang ia berikan.
  56. 56. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 56 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz E. Buttons a. Default Button Button style ini dapat kita gunakan dengan mengaplikasikan kelas .btn, kelas ini paling baik dikombinasikan dengan tag <a> atau <button>. Berikut adalah daftar button – button yang dapat kita gunakan : Setiap style button memiliki arti yang hampir sama dengan style text warna, disesuaikan dengan warnanya. b. Button Size Ukuran button dapat disesuaikan dengan menggunakan kelas .btn-large, .btn- small, .btn-mini.
  57. 57. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 57 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz c. Disable state Me-nonaktifkan button. F. Images Kita dapat menggunakan kelas berikut untuk memanupulasi style gambar kita, style sudut tumpul, lingkaran dan efek kamera polaroid.
  58. 58. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 58 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz G. Icons by Glyphicons Bootstrap bekerja sama dengan Glyphicon.com untuk menyediakan icon gratisan yang dapat kita gunakan secara bebas. Tersedia 140 icon dengan warna hitam dan putih, berikut adalah sebagian dari icon – icon tersebut :
  59. 59. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 59 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Untuk menggunakannya kita membutuhkan tag <i>, didalam tag <i> inilah kita dapat memasukan nama kelasnya. Icon ini dapat dikombinasikan dengan button, dan element – element html yang lain. <i class="icon-search"></i> Untuk icon warna hitam. <i class="icon-search icon-white"></i> Untuk icon warna hitam a. Icon in Button
  60. 60. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 60 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kita dapat menempatkan icon seperti kita menempatkan teks, datau digabung dengan teks. 1.5. Component/Widget Bootstrap A. Button groups Digunakan untuk mengelompokan button. B. Button dropdowns Memberikan dropdown menu/submenu pada sebuah button.
  61. 61. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 61 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz a. Split button dropdown style lain dari button dropdown diatas, yaitu menyisipkan satu buah button tambahan sebagai tombol pembuka dropdown menu. C. Navs Navs adalah pilihan navigasi untuk menu yang disediakan oleh bootstrap, yaitu tabs, pills dan list. Untuk mendapatkan komponen ini kita hanya perlu menyisipkan kelasnya di dalam tag <ul>, berikut cara penggunaannya. a. Basic tabs Style komponen ini berisi daftar tab/tabulasi.
  62. 62. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 62 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Basic pill c. Stacked tabs Tab vertical yang terpasang secara menumpuk, style ini cocok untuk sidebar/menu kiri/kanan.
  63. 63. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 63 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz d. Stacked pills e. Tabs with dropdown Menambahkan dropdown pada navigasi menu. f. Nav List/sidebar Komponen ini dapat digunakan sebagai sidebar.
  64. 64. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 64 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz g. Tabbable nav tab nav yang memiliki kontennya/sectionnya masing – masing.
  65. 65. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 65 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Saat kita memilih tab Section 2, maka konten akan berubah ke tag <div> yang memiliki id “tab2”. h. Tabbable on left Selain style diatas ada pula kelas align lainnya yaitu, .tabs-below, .tabs-left, .tabs- right.
  66. 66. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 66 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz D. Navbar Navbar itu dapat dikatakan sebagai menu bar, yakni berisi daftar menu - menu utama di dalam website kita menu – menu tersebut seperti home, profil, kontak dll. Pada mulanya navbar itu static (atau posisinya tidak menetap ketika layar kita scroll ke bawah/not fixed to the top).
  67. 67. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 67 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Komponen - komponen dari navbar yaitu sebagai berikut : a. Brand Kelas .brand ini digunakan sebagai judul atau nama website. b. Nav links Menambahkan item menu melalui tag <li> pada tag <ul>, disini kita dapat menambahkan menu – menu utama dari website.
  68. 68. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 68 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kelas .active menunjukan bahwa halaman yang sedang terbuka adalah halaman menu tersebut. Kita dapat menambahkan pemisah/divider antar menu, dengan menambahkan kelas .divider-vertical di dalam setiap tag <li>. Terlihat ada pemisah antar link menu pada navbar diatas. c. Form Selain memasukan menu pada navbar, kita juga dapat memasukan komponen form. Tag <form> dapat sebelum tag <ul> atau pun setelah tag </ul>, dengan menempatkan kelas .navbar-form.
  69. 69. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 69 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kelas .pull-left, dimaksudkan untuk menempatkan form ke sisi kiri navbar, atau .pull-right ke sisi kanan navbar. d. Optional display variations Variasi pilihan display navbar yang lain. o Fixed to top Navbar akan ditempatkan menetap di atas layar, ketika layar digulung kebawah. Untuk menggunakan kelas ini, kita harus menambahkan style padding minimal 40px di dalam tag body, misalnya <body> di file bootstrap.css anda.
  70. 70. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 70 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz o Fixed to bottom Navbar akan ditempatkan menetap di bawah layar. o Static top navbar Buatlah full-width navbar yang akan tergulung bersama halaman dengan menambahkan .navbar-static-top. e. Responsive Navbar Responsive navbar dapat dibuat dengan mengaplikasikan komponen – komponen diatas.
  71. 71. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 71 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Desktop view Tablet/Smartphone view
  72. 72. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 72 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Inverse style (Navbar hitam) Kelas .navbar-inverse dapat digunakan dengan menempatkannya setelah kelas .navbar. E. Breadcumbs Breadcumbs biasanya digunakan untuk menampilkan history dari link – link yang berhubungan secara struktur link yang telah dan sedang dibuka.
  73. 73. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 73 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz F. Pagination Pagination digunakan untuk penomoran/penandaan halaman. o Size Untuk menentukan ukuran pagination kita dapat menempatkan kelas – kelas berikut setelah kleas .pagination, kelas – kelas : .pagination-large, .pagination- small, atau .pagination-mini. o Aligment Untuk menentukan arah pagination kita dapat menempatkan kelas – kelas berikut setelah kleas .pagination, kelas – kelas : .pagination-centered dan .pagination- right.  Pager
  74. 74. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 74 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Penanda halaman lainnya. Aigned links G. Labels and badges a. Labels
  75. 75. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 75 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Badges H. Typography a. Hero Unit Hero unit salah satu typography yang mungkin anda dapat menggunakannya.
  76. 76. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 76 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Page header Kelas ini dapat digunakan untuk membuat teks header. I. Thumbnail Thumbnail dari Bootstrap dapat digunakan untuk membuat galeri, foto profil dll. a. Default thumbnails
  77. 77. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 77 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Maksud dari data-src=”holder.js/260x180” adalah untuk memampilkan data dumy untuk image dengan ukuran tersebut. b. Highly customizable Kita dapat mengkombinasikan kelas .thumbnail dengan kelas – kelas lain.
  78. 78. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 78 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz J. Alerts Alert biasanya digunakan untuk memberikan pemberitahuan kepada user, setelah user melakukan suatu aksi tertentu. a. Defalut alert
  79. 79. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 79 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Untuk pesan yang lebih banyak tambahan kelas .alert-block setelah kelas .alert. b. Alert Error atau danger c. Alert Success
  80. 80. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 80 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz d. Alert Information K. Progress bars Progress bar ini biasanya digunakan untuk proses loading, redirecting, atau pun status dari aksi yang kita lakukan. Progress bar akan bekerja dari width 0% - 100%. a. Basic / Progress bar dasar b. Striped / Bergaris c. Animated Untuk mengaktifkesan animasi dari progress bar, kita dapat menambahkan kelas .active setelah kelas .progress-striped
  81. 81. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 81 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz d. Stacked / Progress bar warna – warni yang tertumpuk e. Striped color bars ,
  82. 82. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 82 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Browser support, progress bar menggunakan CSS3 gradient,s transisi, dan animasi untuk menerapakan efek – efeknya. Fitur ini tidak didukung oleh Internet Explorer 9 kebawah dan Firefox versi lama. L. Media object Abstraksi dari style object untuk membangun variasi dari macam – macam komponen (seperti komentar blog, Tweets dll) fitur ini memiliki gambar dan text yang dapat align-nya dapat di kiri maupun di kanan. a. Default example Default media mengijinkan mengambangkan (float) media objeck (image, video, audio) ke kiri atau ke kanan.
  83. 83. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 83 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Media list Dengan tambahan ekstra tag/markup, kita bisa menggunakan media di dalam list/ tag <li> (berguna untuk threads komentar atau daftar artikel).
  84. 84. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 84 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
  85. 85. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 85 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz M. Miscellaneous/Lain – lain a. Wells Gunakan kelas .well untuk memberikan effect isian (inset effect) pada grid.
  86. 86. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 86 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Helper classes/ kelas – kelas pembantu Berikut adalah kelas – kelas pembantu yang biasanya sangat berguna untuk digunakan. .pull-left Men-float element ke sisi kiri .pull-right Men-float element ke sisi kanan .muted Mengganti warna element/komponen dengan warna #999
  87. 87. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 87 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz .clearfix Clear/bersihkan float style dari elemen/komponen 1.6. JavaScript A. Transitions Bootstrap-transition.js Untuk efek transisi sederhana, masukanlah Bootstrap-transition.js Diantara file js (javascript) lainnya. Akan tetapi jika kita menggunakan bootstrap.js yang di-compile ataupun yang tidak di-compile kita tidak perlu memasukan file js ini karena sudah ada di file bootstrap.js. Contoh kasus penggunaan transisi o Sliding (menampilkan) atau fading (menyembunyikan) di dalam modal o Fading out tab – tab o Fading out alert o Sliding carousel/sliding image slide show B. Modal Modal itu seperti prompt dialog/kotak dialog yang akan muncul ketika button atau tombol modalnya di klik. a. Live modal Untuk membuat modal kita membutuhkan elamen <div> yang akan dijadikan tempat dialog box dan tombol atau link untuk mengaktifkannya.
  88. 88. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 88 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tampilan kode diatas adalah tombol di bawah. Ketika tombol diklik maka akan muncul modal dialod/kotak dialog berikut.
  89. 89. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 89 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz C. Dropdown Dropdown dengan javascript hampir sama dengan dropdown dengan CSS sebelumnya, hana berbeda dari kodenya saja.
  90. 90. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 90 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz D. Scrollspy bootstrap-scrollspy.js Plugin ScrollSp ini akan merubah otomatis nav targets berdasarkan posisi dari scroll. Untuk lebih jelas mari kita lihat gambar berikut : Pada saat area belum digulung, maka area akan seperti berikut :
  91. 91. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 91 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Dapat kita lihat pula bahwa, nav target ada pada target “#fat”. Dan ketika layar digulung kea rah teks “@mdo”, maka area akan seperti berikut : Dapat kita lihat pula bahwa, nav target ada pada target “#mdo”. Untuk lebih memahami ScrollSpy, silahkan buatlah dengan kode berikut :
  92. 92. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 92 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz E. Tab bootstrap-tab.js
  93. 93. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 93 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Ketika tab profile diklik maka tab profile akan terbuka secara automatis. Untuk membuat tab diatas, silahkan ketikan kode berikut.
  94. 94. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 94 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz F. Tooltip bootstrap-tooltip.js Tooltip biasanya digunakan untuk menampilkan keterangan tambahan dari sebuah teks, button,dll.
  95. 95. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 95 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz G. Popover Popover hampir sama dengan tooltip, dengan style yang sangat berbeda.
  96. 96. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 96 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz H. Alert bootstrap-alert.js
  97. 97. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 97 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz I. Button bootstrap-button.js Lakukan lebih dengan button dengan javascript. a. Stateful Digunakan untuk menyatakan status, misalnya status data yang sedang di-load. Button ketika belum diklik Button setelah diklik. b. Single toggle
  98. 98. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 98 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tombol ini dapat digunakan sebagai tombol yang dapat ditekan secara menetap, contohnya untuk menyalakan atau mematikan sesuatu. Button sebelum ditekan. Button setelah ditekan. c. Checkbox button Dengan button kita dapat juga membuat checkbox. Button sebelum ditekan. Button dapat dipilih lebih dari satu.
  99. 99. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 99 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz d. Radio button Dengan button kita dapat juga membuat radio. Button sebelum ditekan. Button yang dapat dipilih hanya boleh satu. J. Collapse bootstrap-collapse.js, juga membutuhkan plugin transitions. Accordion ini konsepnya mirip dengan tab, untuk lebih memperjelas mari lihat gambar berikut. Tampilan awal
  100. 100. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 100 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Ketika diklik item #2 maka akan berubah menjadi seperti berikut.
  101. 101. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 101 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz K. Carousel Carousel adalah slideshow gambar yang akan berganti secara automatis (dalam beberapa detik) atau pun dengan mengklik gambar tersebut.
  102. 102. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 102 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
  103. 103. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 103 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz BAB 2 MERANCANG DESAIN WEBSITE RESPONSIVE/FRONT END Untuk merancang tampilan website responsive dengan bootstrap ini, kita kan menggunakan konsep one-page template, maksudnya adalah semua konten yang ada dalam website ini akan ditampilkan dalam satu halaman html saja (halaman index). Jadi nantinya akan ada beberapa bagian (section) untuk konten – konten utama, yang akan disusun berbaris kebawah, sehingga saat menu konten dipilih maka halaman akan secara otomatis tergulung ke section konten tersebut. Template seperti ini sangat cocok digunakan untuk company profile atau pun portfolio, hal ini karena website seperti ini memiliki konten yang sedikit sehingga template simple yang seperti ini cukup baik untuk dipakai. Untuk lebih jelasnya anda dapat membuka, file contoh-website-one- page.html yang ada di folder “contoh-website-one-page”. 2.1. Layout Website Company Profile/Portfolio Berikut adalah desain layout website yang akan anda buat.
  104. 104. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 104 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2.2. Halaman Index Pertama kita akan membuat desain layoutnya terlebih dahulu, setelah itu kita akan mengisi konten – konten pada layout tersebut. Silahkan buatlah rancangan layout di bawah ini : <!-- Bootstrap --> <!DOCTYPE html>
  105. 105. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 105 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz <html> <head> <!-- Meta --> <!-- Judul Website Anda, akan muncul dalam tab di browser--> <title>Proyek-Web-Portfolio</title> <!-- Link Favicon (icon website), ditampilkan di sebelah Judul website --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="./assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="./assets/ico/favicon.png"> <!-- Meta, untuk mengenali spesifikasi device (desktop, mobile, tablet) untuk mendukung fitur responsive Bootstrap --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- fungsi require() digunakan untuk memasukan file .php atau .html --> <!-- Meta --> <!-- Link-css --> <!-- Link file css yang dibutuhkan --> <link href="./assets/css/bootstrap.css" rel="stylesheet" media="screen"> <!-- Link file css baru untuk memodifikasi Desain di Bootstrap --> <link href="./assets/css/main.css" rel="stylesheet" media="screen"> <!-- Link file css yang dibutuhkan --> <link href="./assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
  106. 106. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 106 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz <link href="./assets/css/docs.css" rel="stylesheet" media="screen"> </head> <!-- Script-Js --> <!-- Link file javascript yang dibutuhkan --> <script src="./assets/js/jquery.js"></script> <script src="./assets/js/bootstrap-transition.js"></script> <script src="./assets/js/bootstrap-alert.js"></script> <script src="./assets/js/bootstrap-modal.js"></script> <script src="./assets/js/bootstrap-dropdown.js"></script> <script src="./assets/js/bootstrap-scrollspy.js"></script> <script src="./assets/js/bootstrap-tab.js"></script> <script src="./assets/js/bootstrap-tooltip.js"></script> <script src="./assets/js/bootstrap-popover.js"></script> <script src="./assets/js/bootstrap-button.js"></script> <script src="./assets/js/bootstrap-collapse.js"></script> <script src="./assets/js/bootstrap-carousel.js"></script> <script src="./assets/js/bootstrap-typeahead.js"></script> <script src="./assets/js/holder/holder.js"></script> <script src="./assets/js/google-code-prettify/prettify.js"></script> <script src="./assets/js/application.js"></script> <!-- Script-Js --> </body> </html> Simpanlah dengan nama index.html di folder “proyek-web-portfolio”. Kita sudah memiliki kerangka webnya, sekarang kita akan membuat layout dasar sesuai dengan gambar rancangan di atas.
  107. 107. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 107 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Silahkan tambahkan kode berikut setelah di dalam tag <body>. <!-- Section-Index --> <div class="row-fluid" id="section-index"> <!-- Section-Beranda --> <div class="row-fluid" id="section-beranda"> <!-- Section-Navigasi --> <div class="row-fluid" id="section-navigasi"> </div> <!-- Section-Navigasi --> <!-- Section-Slide-Show --> <div class='row-fluid' id='section-slide-show'> </div> <!-- Section-Slide-Show --> </div> <!-- Section-Beranda --> <!-- Section-Layanan --> <div class='row-fluid' id='section-layanan'> <!-- Section- --> <div class='row-fluid bg-gray'> </div> <!-- Section- --> </div> <!-- Section-Layanan --> <!-- Section-Portfolio --> <div class="row-fluid" id="section-portfolio"> <!-- Section- --> <div class="row-fluid "> </div> <!-- Section- --> </div> <!-- Section-Portfolio --> <!-- Section-Blog --> <div class="row-fluid" id="section-blog"> <!-- Section- -->
  108. 108. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 108 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz <div class="row-fluid"> </div> <!-- Section- --> </div> <!-- Section-Blog --> <!-- Section-Kontak --> <div class="row-fluid" id="section-kontak"> <!-- Section- --> <div class="row-fluid bg-gray'"> </div> <!-- Section- --> </div> <!-- Section-Kontak --> <!-- Section-Footer --> <div class="row-fluid" id="section-footer"> <!-- Section- --> <div class="row-fluid"> </div> <!-- Section- --> </div> <!-- Section-Footer --> </div> atribut “id” pada tag <div> digunakan sebagai tanda pengenal section (bagian) di dalam halaman html. Selanjutnya kita akan membuat konten - konten yang akan kita masukan ke dalam section – section di layout web kita. 2.2.1. Section Beranda Pada section beranda ini akan ditampilkan konten navigasi (menu bar) dan image slide-show. 2.2.1.1. Section Navigasi Tambahkan kode berikut di dalam tag <div> yang memiliki id=”section-navigasi”. <!-- Section-Navigasi --> <div class="row-fluid" id="section-navigasi">
  109. 109. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 109 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz <div class="navbar navbar-inverse navbar-fixed-top" id="home" style="position:fixed;"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data- toggle="collapse" data-target=".nav-collapse"> <img src="./assets/img/toggle.png" alt="" width="25px"> </button> <span> <a class="brand" href="index.php"> &nbsp;&nbsp;&nbsp; <img src="./assets/img/toggle.png" alt="" width="25px"> Portfolio </a> </span> <div class="nav-collapse collapse"> <ul class="nav"> <li class=""> <a href="index.php#section-index">Beranda</a> </li> <li class=""> <a href="index.php#section-layanan">Layanan</a> </li> <li class=""> <a href="index.php#section-portfolio">Portfolio</a> </li> <li class=""> <a href="index.php#section-blog">Blog</a> </li> <li class=""> <a href="index.php#section-kontak">Kontak</a> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  110. 110. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 110 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz </div> <!-- Section-Navigasi --> Penjelasan berdasarkan nomor : 40-42 membuat navbar fixed, agar posisisnya menetap di atas layar. 46-49 membuat toggle button untuk menampilkan menu pada tampilan mobile. 52-55 menampilkan icon logo web dan nama web. 58-64 membuat menu bar, yaitu Beranda, Layanan, Portfolio, Blog dan Kontak. Coba lihat nomor 59 ada link index.html, artinya ketika tombol Beranda ditekan maka halaman akan membuka halaman index.html. Lalu coba lihat baris dibawahnya, ada link index.html#section-layanan. Link tersebut ketika diklik maka halaman akan menuju ke tag html yang memiliki id=”section-layanan”. <!-- Section-Layanan --> <div class='row-fluid' id='section-layanan'> <!-- Section- --> Simpanlah, lalu bukalah di browser anda. Coba anda buka file index.html dengan tampilan mobile responsivenya, hal ini penting dilakukan untuk memastikan kesesuaian desain desktop dan mobile.
  111. 111. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 111 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Ternyata ketika melihat bahwa judul website dan button toggle tampak masuk ke sisi kiri dan kanan, kita perlu untuk memperbaikinya. Tampilan error ini terjadi karena kita memasukan style-inline (style yang ada di dalam halaman html) secara langsung, yaitu style=”position:fixed;”. Alasan kita memasukan style ini karena, tanpa style tambahan ini maka navbar dalam tampilan mobile posisinya tidak akan fixed/tetap. <div class="navbar navbar-inverse navbar-fixed-top" id="home" style="position:fixed;"> Kita dapat memanupulasi tampilan icon logo dan judul dengan menambahkan spasi kosong sebelum icon logo. <a class="brand" href="index.php"> &nbsp;&nbsp;&nbsp; <img src="./assets/img/toggle.png" alt="" width="25px"> Portfolio </a> Silahkan reload file index.html anda.
  112. 112. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 112 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Sekarang kita akan memanipulasi tampilan toggle buttonnya, untuk kasus yang satu ini kita akan memanipulasi tampilannya dengan memanipulasi kelas bootstrapnya di file main.css. Untuk memodifikasi suatu objek/element kita dapat melihat kelas dari objek tersebut lalu mengubah atribut – atribut kelas tersebut ataupun dengan menambahkan kelas baru. Sekarang buatlah file main.css, di folder css bootstrap anda. Lalu ketikan kode berikut. /* main.css */ /* navbar */ .navbar-inverse .btn-navbar { margin-right:20px; } /* navbar */ Lalu bukalah lagi index.html tersebut. Tampak tampilah sudah lebih baik dari sebelumnya, anda dapat memanipulasi langsung kelas di atas di file bootstrap.css nya, namun lebih baik kita
  113. 113. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 113 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz memodofikasi kelas tersebut di file css yang lain, supaya tidak mengubah file asli bootstrap.css. Tampak juga bahwa tampilan dropdown menunya tidak mepet ke sebelah kiri atau tidak memiliki padding, coba anda lihat menu – menu tersebut berada di kelas apa. <ul class="nav"> <li class=""> <a href="index.php#section-index">Beranda</a> </li> <li class=""> <a href="index.php#section-layanan">Layanan</a> </li> <li class=""> <a href="index.php#section-portfolio">Portfolio</a> </li> <li class=""> <a href="index.php#section-blog">Blog</a> </li> <li class=""> <a href="index.php#section-kontak">Kontak</a> </li> </ul> Ternyata menu – menu tersebut berada di kelas .nav. Sekarang kita buka lagi file main.css nya, lalu modifikasilah kelas .nav dengan menambahkan atribut padding, seperti berikut : /* main.css */ /* navbar */ .navbar-inverse .btn-navbar { margin-right:20px; } .nav{ Padding-left:30px; } /* navbar */ Coba bukalah file index.html anda lagi.
  114. 114. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 114 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Jika kita lihat menu sudah memiliki padding, namun ketika menu di sorot/hover, ternyata style hover tidak memenuhi layar. Kenapa? Coba anda cari kelas .nav di file bootstrap.css anda. Jika kita lihat lagi ternyata, teks menu ini ada di dalam tag <li>. Karena tag <li> berada di tag <ul> yang memiliki kelas .nav, maka untuk memberikan jarak antara layar dan menu kita dapat menambahkan margin pada kelas .nav yang merujuk ke tag <li>. Silahkan editlah kode yang tadi dengan kode berikut. /* main.css */ /* navbar */ .navbar-inverse .btn-navbar { margin-right:20px; } .nav >li{ margin-left:10px; } /* navbar */
  115. 115. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 115 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Coba buka lagi file index.html anda. Sekarang tampilan menu hover nya sudah memenuhi layar. Sebenarnya untuk melakukan modifikasi style pada bootstrap.css itu tergantung dari daya kreatifitas anda, anda dapat melakukan modifikasi kelas – kelas bootstrap sesuai selera anda. Saya sarankan untuk banyak – banyak berlatih atau istilah lainnya “ngulik” kode – kode html, css, javascript dan lain – lain. Terkadang kita dapat langsung memodifikasi langsung di file bootstrap.css, tergantung dengan kebutuhan. Sekarang kita akan memperbesar ukuran navigasi, tambahakanlah koding berikut pada main.css anda. .navbar-inner { padding-bottom:5px; padding-top:5px; } 2.2.1.2. Section Slide Show Efek animasi akan mempercantik tampilan suatu web, sekarang kita akan menambahkan slide show pada section-slide-show. Bukalah index.html anda, lalu tambahkan koding berikut. <!-- Section-Slide-Show --> <div class='row-fluid' id='section-slide-show'> <div id='myCarousel' class='carousel slide'> <div class='carousel-inner'> <div class='item active'> <img src='../assets/img/examples/slide-01.jpg' alt='Mobile Application' width='100%'>
  116. 116. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 116 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz <div class='container'> <div class='carousel-caption'> <h2>Mobile Application</h2> <p class='lead'>Mobile Application </p> </div> </div> </div> <div class='item '> <img src='../assets/img/examples/slide-02.jpg' alt='Mobile Application' width='100%'> <div class='container'> <div class='carousel-caption'> <h2>Mobile Application</h2> <p class='lead'>Mobile Application </p> </div> </div> </div> </div> <a class='left carousel-control' href='#myCarousel' data-slide='prev'>&lsaquo;</a> <a class='right carousel-control' href='#myCarousel' data-slide='next'>&rsaquo;</a> </div> </div> <!-- Section-Slide-Show --> Maka tampilannya seperti berikut :
  117. 117. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 117 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Dalam hitungan beberapa detik slide-show nya akan merubah (gambarnya akan berganti). Sekarang kita akan memodifikasi tampilan slide-shownya supaya lebih menarik.
  118. 118. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 118 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Maka tampilan modifikasinya seperti berikut :
  119. 119. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 119 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Memberi warna latar (background pada tag <body>) dan menetapkan warna default untuk teks. 2.2.2. Section Layanan Pada section-layanan ini, akan ditampilkan daftar layanan – layanan (produk) yang ditawarkan oleh perusahaan. Silahkan ketiklah kode di bawah di dalam section-layanan.
  120. 120. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 120 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Sekarang kita akan membuat kelas baru, kelas .section-1. Kelas ini digunakan untuk membedakan dan sebagai pemisah antar section – section. Bukalah file main.css anda dan ketikan kodo berikut.
  121. 121. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 121 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Lalu kita akan memberikan efek tranparant pada image ketika image disorot (hover) Selanjutnya kita akan memberikan efek transisis (-webkit-transition) dan border radius (untuk membulatkan sisi – sisi image) Tampilan section-layanan.
  122. 122. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 122 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tampilan gambar setelah disorot. [Section Layanan] [Section Layanan]
  123. 123. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 123 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Warna gambar terlihat lebih transparan dan bentuknya menjadi bulat. 2.2.3. Section Portfolio Section portfolio ini digunakan untuk menampilkan portfolio dari perusahan, portfolio ini adalah produk perusahaan yang sudah dipakai oleh pelanggan. Misalnya di section portfolio perusahaan menampilkan jasa pembuatan website maka di portfolio ini ditampilkan website pelanggan yang dibuat oleh perusahaan. Tambahkan kelas .bg-black seperti kode berikut. Kita akan membuat kelas .section-2, style kelas ini akan berbeda dengan kelas .section-1. Ketikanlah kode berikut di dalam section-porfolio untuk membuat konten section- porfolio.
  124. 124. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 124 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
  125. 125. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 125 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tampilan section-porfolionya seperti berikut.
  126. 126. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 126 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz [Section Portfolio] 2.2.4. Section Blog Halaman Blog biasanya digunakan untuk menyampaikan informasi/artikel/berita baik kabar dari perusahaan maupun dari luar. Ketiklah kode berikut untuk membuat konten section blog.
  127. 127. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 127 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Selanjutnya kita buat modifikasi kelas .img-rounded untuk merubah style-nya.
  128. 128. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 128 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tampilan section blog. Untuk mengisi section-blog anda dapat menambahkan konten lagi di bawah konten sebelumnya. Sehingga tampilannya seperti berikut.
  129. 129. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 129 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Anda juga dapat menambahkan konten lagi pada section-layanan supaya terlihat memenuhi layar.
  130. 130. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 130 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2.2.5. Section Kontak Section kontak biasanya digunakan sebagai sarana untuk melakukan komunikasi dengan pelanggan atau pengunjung website, biasanya akan ditampilkan informasi perusahaan, kontak sosial media perusahaan, dan buku tamu, dan lain – lain. Berikut kode untuk membuat konten section-kontak.
  131. 131. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 131 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Sekarang buatlah kelas .section-3. Tampilan section-kontak.
  132. 132. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 132 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2.2.6. Section Footer Section ini biasana berisi copyright website, tahun pembuatan dan pengembangan, perusahaan/orang yang membuatnya dll. Untuk mengisi konten ini kita hanya cukup menambahkan teks sederhana saja. Ketikanlah kode berikut pada section-footer.
  133. 133. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 133 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Sekarang kita buat kelas baru, kelas .bg-black-2 dan kelas .section-4. Tampilannya sebagai berikut.
  134. 134. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 134 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz BAB 3 MEMBANGUN WEB SERVER 3.1. Mengenal Web Server Web Server adalah sebuah perangkat lunak server yang berfungsi untuk menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman - halaman web yang umumnya berbentuk dokumen HTML. Web Server yang terkenal adalah Apache dan Microsoft Internet Information Service (IIS). Apache ( Server HTTP Apache atau Server Web/WWW Apache) adalah web server yang dapat dijalankan di berbagai Sistem Operasi yang beruna untuk melayani dan memfungsikan situs web. Protocol yang digunakan untuk melayani fasilitas web ini adalah menggunakan HTTP. Dengan Apache anda dapa membangun server web pribadi untuk pengembangan web. Setelah anda memahami apa iti web server beserta fungsinya. Tahap selanjutnya anda akan belajar bagaimana cara membangun web server local pada computer anda sendiri Dikarenakan situs web yang akan anda buat menggunakan script PHP (PHP:Hypertext Preprocessor). Maka web sever yang digunakan adalah Apache web server. Kalli ini kita akan menggunakan web server Xampp salah satu Apache Friends yang memiliki fitur yang lengkap dalam pengembangan website. Xampp juga ini open source dan dapat di download secara bebas di alamat : htttp://www.apachefriends.org . 3.2. Instalasi Webserver Jika anda sudah memilikinya, anda dapat melakukan instalasi dengan langkah – langkah sebagai berikut : 1. Jalankan file xampp-win32-1.7.3 (atau versi lainnya).
  135. 135. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 135 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Setting directory tempat file xampp akan diinstal. Misalnya di directory D, lebih baik tidak di directory C (OS) untuk menghindari sesuatu yang tidak diinginkan misalnya ketika computer kita di uninstall, data di folder xampp akan hilang semua. 3. Klik install
  136. 136. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 136 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 4. Tekan enter untuk menambahkan shortcut Xampp di desktop 5. Enter [y] untuk membiarkan Xampp me-relocate ulang directory
  137. 137. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 137 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 6. Enter [n], untuk tidak mengaktifkan fasilitas portable Xampp. 7. Enter, untk melanjutkan instalasi
  138. 138. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 138 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 8. Enter, Xampp mengatur timezone pada file php.ini, anda dapat mengubah timezone disana 9. Ketikan ‘ x ’ untuk keluar dari Xampp, lalu tekan Enter. Sekarang anda telah menyelesaikan instalasi
  139. 139. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 139 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 10. Sampai tahap ini anda sudah berhasil menginstal XAMPP, artinya anda sudah menginstal semua paket softwarenya yaitu, Apache, PHP dan MySQL. Selanjutnya kita akan menjalankan servicenya. 11. Jalankan XAMPP Control Panel yang ada di desktop. 12. Start Apache untuk memulai menjalankan Xampp.
  140. 140. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 140 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 13. Buka web browser anda, lalu ketikan http://localhost. Jika tampilannya seperti di bawah ini, maka Xampp anda sudah terinstal dengan benar.
  141. 141. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 141 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Instalasi web server xampp telah berhasil. 3.3. Mengenal MySQL dan PHPMyAmin Sebelumnya pernah dikatakan bahwa Xampp ini memili fasilitas sepert Apache web server, MySQL dan phpMyAdmin dll. MySQL adalah Sebuah program database server yang mampu menerima dan mengirimkan data dengan cepat, multi user serta menggunakan perintah dasar SQL ( Structured Query Language ). MySQL merupakan dua bentuk lisensi, yaitu FreeSoftware dan Shareware. MySQL yang biasa kita gunakan adalah MySQL FreeSoftware yang berada dibawah Lisensi GNU/GPL ( General Public License ).
  142. 142. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 142 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz MySQL Merupakan sebuah database server yang free, artinya kita bebas menggunakan database ini untuk keperluan pribadi atau usaha tanpa harus membeli atau membayar lisensinya. MySQL pertama kali dirintis oleh seorang programmer database bernama Michael Widenius . Selain database server, MySQl juga merupakan program yang dapat mengakses suatu database MySQL yang berposisi sebagai Server, yang berarti program kita berposisi sebagai Client. Jadi MySQL adalah sebuah database yang dapat digunakan sebagai Client mupun server. Database MySQL merupakan suatu perangkat lunak database yang berbentuk database relasional atau disebut Relational Database Management System ( RDBMS ) yang menggunakan suatu bahasa permintaan yang bernama SQL (Structured Query Language ). Logo MySQL Sedangkan PHPMYADMIN adalah database admin panel yang ada pada web server. Fungsinya adalah sebagai pengendali dan alat manupulasi database MySQL menggunakan web server. Logo phpMyAdmin.
  143. 143. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 143 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Kita akan mencoba untuk menjalankan phpMyAdmin, berikut langkah – langkahnya : 1. Pastikan anda sudah mengaktifkan Apache dan MySQL Service pada Xampp Control Panel anda 2. Buka browser anda dan ketikan http://localhost/phpmyadmin atau http://localhost/phpmyadmin/index.php pada address bar.
  144. 144. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 144 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 3. Sekarang anda dapat menggunakan phpMyAdmin untuk membangun Database 3.4. Merancang Database 1. Pastikan anda masih di halaman phpMyAdmin 2. Untuk membuat database baru, caranya pada ketikan nama database anda misalnya “ portfolio_db ” pada text box Create New Database, lalu klik tombol Create
  145. 145. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 145 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 3. Jika sukse maka tampilannya seperti berikut 3.5. Membuat Tabel Membuat database selesai, tahap selanjutnya adalah membuat tabel (table), tabel ini digunakan untuk menyimpan data – data yang akan ditampilkan di situs. Untuk pembuatan tabel ini saya membaginya menjadi dua cara yaitu : A. Membuat tabel secara manual 1. Pastikan anda membukan phpMyAdmin dan membuka database yang baru saja anda buat. 2. Ketikanlah nama tabel “admin” dengan jumlah field 4.
  146. 146. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 146 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 3. Akan muncul tampilan seperti berikut 4. Anda rancang struktur tabel admin seperti berikut. 5. Lalu isilah buatlah seperti berikut, lalu klik tombol save.
  147. 147. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 147 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
  148. 148. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 148 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 6. Jika berhasil maka tampilannya seperti berikut.
  149. 149. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 149 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Jika menggunakan kode dan MySQL Console, kodenya akan seperti berikut : CREATE TABLE `portfolio_db`.`admin` ( `id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `username` VARCHAR( 30 ) NOT NULL , `password` VARCHAR( 30 ) NOT NULL , `ket` VARCHAR( 10 ) NOT NULL ) ENGINE = MYISAM ; 7. Selanjutnya dengan cara yang sama, anda akan membuat tabel – tabel web site yang dibutuhkan lainnya. Berikut adalah rancangan tabelnya : Tabel “artikel”
  150. 150. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 150 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tabel “bukutamu” Tabel kategori Tabel “kontak” Tabel “slide_show”
  151. 151. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 151 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Tabel “tentang” B. Meng-import database Untuk mengimpor database yang sudah jadi, ikuti langkah – langkah berikut : 1. Jika sebelumnya anda telah membuat database “portfolio_db”, anda dapat menghapusnya terlebih dahulu. 1. Buatlah kembali database “portfolio_db”
  152. 152. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 152 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Klik menu import. 3. Klik tombol browse, dan pilihlah database di dalam folder data base.
  153. 153. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 153 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Klik open, lalu klik Go.
  154. 154. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 154 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 4. Jika tampilannya seperti berikut maka anda telah berhasil mengimport database
  155. 155. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 155 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz BAB 4 MEMBANGUN SISTEM WEBSITE DINAMIS DENGAN PHP 4.1. Mempersiapkan Website Company Profile/Portfolio ke Web Server Sekarang kita akan memindahkan website kita ke dalam web server/localhost. Silahkan ikuti langkah – langkah berikut : 1. Copy folder proyek-web-portfolio. 2. Pindahkan ke dalam folder htdocs anda. 3. Copy dan pindahkan juga folder assets anda ke dalam folder proyek-web- portfolio anda.
  156. 156. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 156 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 4. Bukalah breowser anda, lalu ketikanlah alamat berikut pada address bar. http://localhost/proyek-web-portfolio/ 5. Tampilannya terlihat tidak sesuai dengan sebelumnya, hal ini karena lokasi folder assets berbeda dari sebelumnya. Sekarang folder assets berada pada folder yang sama dengan file index.html. Bukalah file index.html anda, lalu ubahlah lokasi link dan script nya. 6. Gantilah “../” dengan “./”. 7. Simpan dan bukalah di browser anda.
  157. 157. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 157 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 4.2. Membangun Website dinamis dengan PHP 4.2.1. Membuat templating website Maksud dari templating website adalah kita akan membagi – membagi satu halaman website menjadi beberapa halaman/bagian. Kita akan membagi – bagi section – section, lalu menggabungkannya kembali dengan fungsi php. Silahkan ikuti langkah – langkah berikut : 1. Bukalah kembali file index.html anda. 2. Lalu save-as lah file anda dengan ekstensi .php.
  158. 158. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 158 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 3. Hapuslah file index.html anda, karena kita sudah memiliki file index.php. 4. Bukalah file index.php anda, lalu potonglah (cut) bagian ang terblok seperti gambar berikut.
  159. 159. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 159 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 5. Buatlah file baru, lalu paste di file baru tersebut. 6. Simpanlah dengan nama meta.php di folder yang sama dengan file index.php
  160. 160. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 160 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 7. Sekarang kita akan memasukan file meta.php ke dalam file index.php. letakan kursor pada area pemotongan yang tadi lalu ketikan kode fungsi php berikut pada area tersebut. Sekarang kita akan melakukan hal yang sama pada section – section yang lainnya. a. Templating website lanjut – Link CSS 1. Cut kode yang terblok.
  161. 161. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 161 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Paste di file baru dan simpanlah dengan nama link-css.php 3. Lalu masukan file link-css.php anda di dalam file index.html.
  162. 162. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 162 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz b. Templating website lanjut – Section-Navigasi 1. Cut kode yang terblok. 2. Paste di file baru dan simpanlah dengan nama navigasi.php
  163. 163. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 163 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 3. Lalu masukan file navigasi.php anda di dalam file index.html. 4. Karena file index.html telah diganti dengan file index.php, maka kita perlu mengganti pula link – link index.html dengan index.php. Bukalah file navigasi.php anda, lalu gantilah “index.html” menjadi “index.php”. c. Templating website lanjut – Section-Slide-Show 1. Cut kode yang terblok.
  164. 164. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 164 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Paste di file baru dan simpanlah dengan nama slide-show.php 3. Lalu masukan file slide-show.php anda di dalam file index.php.
  165. 165. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 165 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz d. Templating website lanjut – Section-Layanan 1. Cut kode yang terblok.
  166. 166. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 166 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Buatlah folder section, di dalam folder utama anda, dan buatlah folder layanan di dalam folder section anda. 3. Paste di file baru dan simpanlah dengan nama layanan.php di dalam folder layanan anda.
  167. 167. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 167 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 4. Lalu masukan file layanan.php anda di dalam file index.php. e. Templating website lanjut – Section-Portfolio 1. Cut kode yang terblok.
  168. 168. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 168 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
  169. 169. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 169 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Buatlah folder portfolio, di dalam folder section. 3. Paste di file baru dan simpanlah dengan nama portfolio.php di dalam folder portfolio anda. 4. Lalu masukan file portfolio.php anda di dalam file index.php. f. Templating website lanjut – Section-Blog 1. Cut kode yang terblok.
  170. 170. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 170 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz
  171. 171. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 171 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Buatlah folder blog, di dalam folder section. 3. Paste di file baru dan simpanlah dengan nama blog.php di dalam folder blog anda. 4. Lalu masukan file blog.php anda di dalam file index.php.
  172. 172. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 172 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz g. Templating website lanjut – Section-Contact 1. Cut kode yang terblok.
  173. 173. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 173 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 2. Buatlah folder contact, di dalam folder section. 3. Paste di file baru dan simpanlah dengan nama contact.php di dalam folder contact anda. 4. Lalu masukan file contact.php anda di dalam file index.php.
  174. 174. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 174 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz h. Templating website lanjut – Section-Footer 1. Cut kode yang terblok. 2. Paste di file baru dan simpanlah dengan nama footer.php di dalam folder utama anda. 3. Lalu masukan file footer.php anda di dalam file index.php. i. Templating website lanjut – Script-Js
  175. 175. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 175 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 1. Cut kode yang terblok. 4. Paste di file baru dan simpanlah dengan nama script-js.php di dalam folder utama anda. 5. Lalu masukan file script-js.php anda di dalam file index.php.
  176. 176. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 176 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz BAB 5 MEMBANGUN CONTROL PANEL ADMIN/BACK END 5.1.Konfigurasi Database yang akan digunakan Sekarang kita akan membuat halaman koneksi.php yang berfungsi untuk menghubungkan halaman html/php kita dengan server MySQL. Koneksi.php 1. Ketikanlah kode berikut dalam editor anda. 2. Buatlah folder admin dalam folder utama anda. 3. Simpan lah file tersebut dengan nama “koneksi.php” di dalam folder admin anda.
  177. 177. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 177 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz 4. Sekarang kita akan mengecek koneksi tersebut, apakah berhasil atau gagal. Tambahkan kode di bawah pada file koneksi.php lalu simpan kembalilah. 5. Lakukan seperti gambar di bawah untuk memeriksa koneksi database.
  178. 178. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 178 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Klik koneksi.php, jika tampil seperti di bawah maka koneksi berhasil. 6. Karena kode di koneksi.php sudah berhasil, maka kita perlu menghapus kode pengecekannya. Hal ini untuk tidak menampilkan pemberitahuan berhasil atau gagal koneksi. Lalu simpan kembali file tersebut. 5.2.Kerangka template halaman admin. home.php
  179. 179. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 179 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Penjelasan home.php:
  180. 180. Membangun Responsive Website dengan Twitter Bootstrap 2.0 + PHP dan Mysql 180 Sopian Hadianto ~ founder of Geek House ~ geekhouse.biz Penjelasan home.php : 1-6 Memulai session, session itu seperti cookies, dapat menampung data sementara. 28-29

×