() translation by (you can also view the original English article)
Bagi anda yang familiar dengan CMS seperti wordpress tampilan web pertama anda tidak akan jauh berbeda dengan tampilan sederhana flat desain CMS di atas. Perlu di ingat judul artikelnya membangun CMS namun poinnya adalah bagaimana menstruktur dan mendesain tampilan, tidak berkaitan dengan database. Sebagai gantinya, semua informasi disimpan dalam file teks biasa. Karena banyak virtual private server (VPS) saat ini menggunakan RAM berbasis hard drive, pendekatan ini lebih cepat dan lebih aman.
Dalam seri tutorial ini, saya akan menunjukkan cara untuk membuat flat file sistem CMS anda sendiri menggunakan teknologi web sederhana. Tidak seperti sistem CMS pada umumnya yang sudah jadi dan sudah siap pakai, Ini adalah sistem CMS dasar tetapi tetap apa yang di butuhkan untuk para pemula yang ingin belajar dasar CMS akan di jelaskan disini.
Jika anda punya project dan bila project anda sudah berkembang menjadi project yang besar, maka bersiaplah karena masalah pengornasian file dan folder akan segera menghampiri anda ( Serem kan... hihihi ). Juga, setiap jenis halaman memiliki direktori sendiri difolder situs dengan direktori bagian untuk bagian-bagian kecil dari CMS. Hal ini mempertahankan semuanya pada tempatnya masing-masing dan membuat sebuah sistem fleksibel.
Struktur Folder Utama (Root Folder)
Dalam direktori di mana Anda akan membangun proyek, umumnya anda akan membuat direktori seperti: src, site, dan tema. Folder src untuk menyimpan file yang berkaitan dengan server, folder site untuk menyimpan file halaman yang akan menampilkan informasi seperti halaman beranda, kontak, tentang atau lainnya, dan folder tema untuk menyimpan file layout seperti header dan footer atau yang lebih spesifik lagi navigasi.
Dalam direktori theme, Anda perlu membuat direktori layout dan styling. Direktori layouts akan berisi layout halaman web yang berbeda. Dengan memisahkan informasi layout dari informasi styling, theme menjadi lebih fleksibel. Untuk saat ini, akan ada satu layout bernama SingleCol.
Untuk semua pembuatan styling dan layout, saya menggunakan Sass, Compass, dan Susy. Sass adalah bahasa pengolahan Custom Style Sheet. Ini memberikan cara yang lebih kuat untuk menciptakan CSS style sheet untuk website Anda. Compass adalah ekstensi untuk Sass. Sassy-buttons adalah ekstensi Sass untuk membuat tombol menarik di situs web. Susy juga merupakan ekstensi untuk membuat sistem layout grid untuk situs Anda.
Karena Ruby sudah terpasang di semua Mac, Anda tidak perlu menginstalnya. Untuk menjalankan Ruby di sistem Windows, Anda perlu mendownload Ruby's Windows Installer. Pada Linux, Anda perlu menggunakan Manajer paket sistem Anda untuk menginstal Ruby.
Setelah Ruby ada pada sistem Anda, Anda dapat menginstal Sass, Compass, Sassy-buttons, dan Susy dengan baris perintah ini:
1 |
gem install sass
|
2 |
gem install sassy-buttons
|
3 |
gem install compass
|
4 |
gem install susy
|
Untuk tutorial ini, saya menggunakan Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3, dan Susy 2.2.5. Tergantung pada konfigurasi sistem Anda, Anda mungkin harus menjalankan perintah ini dengan sudo.
Tata Letak (Layout)
Untuk memulai membuat layout, jalankan perintah ini di direktori SingleCol:
1 |
compass init |
Ini akan membuat directory sass dan stylesheet dan file bernama config.rb. Karena saya suka menggunakan css untuk direktori stylesheet, ubah nama direktori stylesheet menjadi css. Juga, buat direktori js untuk file JavaScript yang diperlukan untuk layout. Buka file config.rb dan buat terlihat seperti ini:
1 |
require 'susy' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
Sekarang, untuk membuat layout dasar website, buat file dalam direktori layout yang disebut template.html. Dalam file ini, tambahkan kode berikut:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> |
3 |
<head>
|
4 |
<meta name="generator" content="goPress Servery by Custom Computer Tools."> |
5 |
<meta charset="utf-8"> |
6 |
<title>
|
7 |
{{{title}}}
|
8 |
</title>
|
9 |
<link rel="stylesheet" type="text/css" href="{{{WebAddress}}}/stylesheets.css"> |
10 |
{{{head}}}
|
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<div id='wrap'> |
15 |
<div id='headerwrap'> |
16 |
<div id='header'> |
17 |
{{{header}}}
|
18 |
</div>
|
19 |
<div id='navigation'> |
20 |
{{{navbar}}}
|
21 |
</div>
|
22 |
</div>
|
23 |
<div id='sidebar'> |
24 |
{{{sidebar}}}
|
25 |
</div>
|
26 |
<div id='content'> |
27 |
{{{content}}}
|
28 |
</div>
|
29 |
<div id='footer'> |
30 |
{{{footer}}}
|
31 |
</div>
|
32 |
</div>
|
33 |
<script type="text/javascript" src="{{{WebAddress}}}/scripts.js"></script> |
34 |
</body>
|
35 |
|
36 |
</html>
|
Template ini menciptakan halaman web standar untuk situs. Setiap halaman memiliki header dengan panel navigasi, sidebar tunggal, area konten, dan area footer. Hal terakhir yang dimuat adalah javascript yang dibutuhkan untuk situs ini.
Setiap bagian diwakili dengan makro Handlebar. Server memperluas macro-nya sebelum menampilkannya kepada pengguna.
Dalam direktori sass, buat sebuah file bernama base.scss dan letakkan kode ini:
1 |
@import 'compass/reset'; |
2 |
@import 'susy'; |
3 |
|
4 |
$susy: ( |
5 |
flow: ltr, |
6 |
math: fluid, |
7 |
output: float, |
8 |
gutter-position: after, |
9 |
container: auto, |
10 |
container-position: center, |
11 |
columns: 16, |
12 |
gutters: .25, |
13 |
column-width: false, |
14 |
global-box-sizing: content-box, |
15 |
last-flow: to, |
16 |
debug: ( |
17 |
image: hide, |
18 |
color: rgba(#66f, .25), |
19 |
output: background, |
20 |
toggle: top right, |
21 |
),
|
22 |
use-custom: ( |
23 |
background-image: true, |
24 |
background-options: false, |
25 |
box-sizing: true, |
26 |
clearfix: false, |
27 |
rem: true, |
28 |
)
|
29 |
);
|
30 |
|
31 |
body { |
32 |
}
|
33 |
|
34 |
#wrap { |
35 |
@include container(16); |
36 |
width: 1024px; |
37 |
display: block; |
38 |
}
|
39 |
|
40 |
#headerwrap { |
41 |
@include span(16 of 16); |
42 |
margin-bottom: 20px; |
43 |
}
|
44 |
|
45 |
#header { |
46 |
margin-top: 20px; |
47 |
margin-left: auto; |
48 |
margin-right: auto; |
49 |
width: 95%; |
50 |
}
|
51 |
|
52 |
#content { |
53 |
@include span(11 of 16); |
54 |
}
|
55 |
|
56 |
.col1 { |
57 |
@include span(5 of 10); |
58 |
}
|
59 |
|
60 |
.col2 { |
61 |
@include span(last 5 of 10); |
62 |
}
|
63 |
|
64 |
#footer .col2 { |
65 |
width: auto; |
66 |
}
|
67 |
|
68 |
.box { |
69 |
@include span(4 of 10); |
70 |
}
|
71 |
|
72 |
#sidebar { |
73 |
@include span(last 4 of 16); |
74 |
}
|
75 |
|
76 |
#footer { |
77 |
@include span(16 of 16); |
78 |
}
|
79 |
|
80 |
/** CSS dropdown menu **/
|
81 |
|
82 |
#navigation { |
83 |
margin-top: 20px; |
84 |
margin-left: auto; |
85 |
margin-right: auto; |
86 |
width: 95%; |
87 |
}
|
88 |
|
89 |
#menuh-container { |
90 |
top: 1em; |
91 |
left: 1em; |
92 |
display: inline; |
93 |
width: 100%; |
94 |
}
|
95 |
|
96 |
#menuh { |
97 |
margin-top: 1em; |
98 |
display: inline; |
99 |
width: 100%; |
100 |
}
|
101 |
|
102 |
#menuh ul li { |
103 |
display: inline-block; |
104 |
width: fit-content; |
105 |
}
|
106 |
|
107 |
#menuh a |
108 |
{
|
109 |
text-align: center; |
110 |
display:block; |
111 |
white-space:nowrap; |
112 |
margin:0; |
113 |
padding: 5px; |
114 |
text-decoration: none; |
115 |
}
|
116 |
|
117 |
#menuh ul |
118 |
{
|
119 |
list-style:none; |
120 |
margin: 0px 20px 0px 20px; |
121 |
padding: 0px; |
122 |
}
|
123 |
|
124 |
#menuh li |
125 |
{
|
126 |
position:relative; |
127 |
min-height: 1px; |
128 |
vertical-align: bottom; |
129 |
width: fit-content; |
130 |
}
|
131 |
|
132 |
#menuh ul ul |
133 |
{
|
134 |
position: absolute; |
135 |
z-index: 500; |
136 |
top: 50px; |
137 |
left: 20px; |
138 |
display: none; |
139 |
padding: 0.5em; |
140 |
margin: -1em 0 0 -1em; |
141 |
}
|
142 |
|
143 |
#menuh ul ul li { |
144 |
width: 100%; |
145 |
}
|
146 |
|
147 |
#menuh ul ul li a { |
148 |
text-align: left; |
149 |
}
|
150 |
|
151 |
#menuh ul ul ul |
152 |
{
|
153 |
left: 90px; |
154 |
}
|
155 |
|
156 |
div#menuh li:hover |
157 |
{
|
158 |
cursor:pointer; |
159 |
z-index:100; |
160 |
}
|
161 |
|
162 |
div#menuh li:hover ul ul, |
163 |
div#menuh li li:hover ul ul, |
164 |
div#menuh li li li:hover ul ul, |
165 |
div#menuh li li li li:hover ul ul |
166 |
{display:none;} |
167 |
|
168 |
div#menuh li:hover ul, |
169 |
div#menuh li li:hover ul, |
170 |
div#menuh li li li:hover ul, |
171 |
div#menuh li li li li:hover ul |
172 |
{display:block;} |
173 |
|
174 |
/* End CSS Drop Down Menu */
|
Kode sass ini dimuat dalam style reset compass untuk menetralisir browser default. Kemudian itu memuat and menyiapkan susy untuk membuat grid yang tepat untuk semua elemen di halaman web.
Sistem navigasi css ada setelah halaman aktif. Drop-down yang tersebunyi untuk menu menjadi terlihat dengan definisi "mouse-over". Ini hanya memberikan sistem menu css.
Semua style ini mendefinisikan struktur dasar dari website. Tidak ada satu pun dari hal diatas yang membuat tampilan halaman, hanya posisinya. Semua styling akan ditangani oleh konten styling.
Styles
Untuk direktori styling, buatlah sebuah direktori bernama Basic. Inisialisasi informasi sass seperti yang dilakukan untuk direktori layouts/SingleCol. Dalam direktori ini, jalankan baris perintah berikut:
1 |
compass init |
Ini akan membuat direktori sass dan stylesheet dan file bernama config.rb. Karena saya suka menggunakan css untuk direktori stylesheet, ubah nama direktori stylesheet menjadi css. Juga, buat sebuah direktori js untuk setiap JavaScript untuk membuat theme. Buka file config.rb dan buat terlihat seperti ini:
1 |
require 'sassy-buttons' |
2 |
http_path = "/" |
3 |
css_dir = "css" |
4 |
sass_dir = "sass" |
5 |
images_dir = "images" |
6 |
javascripts_dir = "js" |
Untuk mengubah desain tombol di situs web, saya menggunakan sassy-buttons. Karenanya, itu diperlukan dulu, baru kemudian struktur direktori.
Dalam direktori Basic/sass, buat file Basic.scss dengan informasi ini:
1 |
// Welcome to Compass. |
2 |
// In this file you should write your main styles. (or centralize your imports) |
3 |
// Import this file using the following HTML or equivalent: |
4 |
// <link href='/stylesheets/screen.css' media='screen, projection' rel='stylesheet' type='text/css' /> |
5 |
//
|
6 |
@import 'compass/css3'; |
7 |
@import 'sassy-buttons'; |
8 |
|
9 |
$style-color1: rgb(247, 237, 222); |
10 |
$style-color2: #ffedd1; |
11 |
$style-color3: rgb(245, 213, 166); |
12 |
$style-color4: #f0d5ad; |
13 |
|
14 |
//
|
15 |
// Clear Fix |
16 |
//
|
17 |
.clearfix:after { |
18 |
content: '.'; |
19 |
display: block; |
20 |
clear: both; |
21 |
visibility: hidden; |
22 |
line-height: 0; |
23 |
height: 0; |
24 |
}
|
25 |
|
26 |
.clearfix { |
27 |
display: inline-block; |
28 |
}
|
29 |
|
30 |
html[xmlns] .clearfix { |
31 |
display: block; |
32 |
}
|
33 |
|
34 |
* html .clearfix { |
35 |
height: 1%; |
36 |
}
|
37 |
|
38 |
//
|
39 |
// Main Styling for Wood. |
40 |
//
|
41 |
@mixin standardsize { |
42 |
padding-top: 10px; |
43 |
padding-left: 15px; |
44 |
font-size: 19px; |
45 |
line-height: 1.25em; |
46 |
}
|
47 |
|
48 |
body { |
49 |
background-color: $style-color2; |
50 |
|
51 |
input[type='button'] { |
52 |
@include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold); |
53 |
}
|
54 |
|
55 |
.button { |
56 |
@include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold); |
57 |
display: inherit; |
58 |
margin-left: auto; |
59 |
margin-right: auto; |
60 |
margin-top: 10px; |
61 |
margin-bottom: 10px; |
62 |
text-align: center; |
63 |
}
|
64 |
|
65 |
#wrap { |
66 |
background-color: $style-color1; |
67 |
@include border-radius(.6em, .6em); |
68 |
margin-top: 10px; |
69 |
margin-bottom: 10px; |
70 |
border: 4px solid $style-color4; |
71 |
|
72 |
#header { |
73 |
background-color: $style-color2; |
74 |
@include border-radius(15px); |
75 |
background-repeat: no-repeat; |
76 |
border: 2px solid $style-color3; |
77 |
height: 130px; |
78 |
text-align: left; |
79 |
margin-top: 20px; |
80 |
font-size: 3em; |
81 |
|
82 |
h1 { |
83 |
a:link, a:visited { |
84 |
color: #000; |
85 |
text-decoration: none; |
86 |
}
|
87 |
padding-top: 40px; |
88 |
padding-left: 20px; |
89 |
}
|
90 |
h6 { |
91 |
font-size: .4em; |
92 |
font-style: italic; |
93 |
padding-left: 20px; |
94 |
}
|
95 |
}
|
96 |
#sidebar { |
97 |
background-color: $style-color2; |
98 |
@include border-radius(.6em, .6em); |
99 |
padding: .6em; |
100 |
vertical-align: text-top; |
101 |
overflow: hidden; |
102 |
margin-right: .5em; |
103 |
border: 2px solid $style-color3; |
104 |
hr { |
105 |
color: $style-color2; |
106 |
background-color: $style-color2; |
107 |
}
|
108 |
p, ul, li { |
109 |
@include standardsize; |
110 |
}
|
111 |
ul li { |
112 |
list-style-type: disc; |
113 |
margin-left: 25px; |
114 |
padding: 0; |
115 |
border: 0; |
116 |
outline: 0; |
117 |
font-size: 100%; |
118 |
vertical-align: baseline; |
119 |
background: transparent; |
120 |
}
|
121 |
li { |
122 |
margin-bottom: 10px; |
123 |
}
|
124 |
h1, h2, h3, h4, h5, h6 { |
125 |
@include standardsize; |
126 |
font-weight: bold; |
127 |
margin-top: .25em; |
128 |
margin-bottom: .25em; |
129 |
}
|
130 |
h1 { |
131 |
font-size: 2.5em; |
132 |
}
|
133 |
h2 { |
134 |
font-size: 2em; |
135 |
}
|
136 |
h3 { |
137 |
font-size: 1.5em; |
138 |
}
|
139 |
h4 { |
140 |
font-size: 1em; |
141 |
}
|
142 |
h5 { |
143 |
font-size: .8em; |
144 |
}
|
145 |
h6 { |
146 |
font-size: .6em; |
147 |
}
|
148 |
input[type='button'] { |
149 |
margin-left: 120px; |
150 |
clear: both; |
151 |
}
|
152 |
}
|
153 |
#content { |
154 |
input[type='button'] { |
155 |
margin-left: 200px; |
156 |
clear: both; |
157 |
}
|
158 |
h1, h2, h3, h4, h5, h6 { |
159 |
@include standardsize; |
160 |
font-weight: bold; |
161 |
margin-top: .25em; |
162 |
margin-bottom: .25em; |
163 |
}
|
164 |
h1 { |
165 |
font-size: 2.5em; |
166 |
}
|
167 |
h2 { |
168 |
font-size: 2em; |
169 |
}
|
170 |
h3 { |
171 |
font-size: 1.5em; |
172 |
}
|
173 |
h4 { |
174 |
font-size: 1em; |
175 |
}
|
176 |
h5 { |
177 |
font-size: .8em; |
178 |
}
|
179 |
h6 { |
180 |
font-size: .6em; |
181 |
}
|
182 |
hr { |
183 |
margin-top: 30px; |
184 |
margin-bottom: 30px; |
185 |
}
|
186 |
p, ul, li, details, summary, pre { |
187 |
@include standardsize; |
188 |
}
|
189 |
details { |
190 |
p, pre { |
191 |
margin-left: 25px; |
192 |
}
|
193 |
}
|
194 |
ul li { |
195 |
list-style-type: disc; |
196 |
margin-left: 25px; |
197 |
padding: 0; |
198 |
border: 0; |
199 |
outline: 0; |
200 |
font-size: 100%; |
201 |
vertical-align: baseline; |
202 |
background: transparent; |
203 |
}
|
204 |
li { |
205 |
margin-bottom: 10px; |
206 |
}
|
207 |
.box { |
208 |
clear: both; |
209 |
background-color: $style-color4; |
210 |
float: none; |
211 |
margin-left: auto; |
212 |
margin-right: auto; |
213 |
margin-top: 1.0em; |
214 |
margin-bottom: 1em; |
215 |
@include border-radius(.6em, .6em); |
216 |
display: block; |
217 |
padding: .5em; |
218 |
}
|
219 |
img { |
220 |
@include border-radius(10px); |
221 |
margin: 20px auto 20px auto; |
222 |
}
|
223 |
}
|
224 |
#footer { |
225 |
border-top: 5px; |
226 |
border-style: solid; |
227 |
border-color: $style-color3; |
228 |
@include border-radius(.6em, .6em); |
229 |
margin-top: 30px; |
230 |
p { |
231 |
margin-bottom: .6em; |
232 |
@include standardsize; |
233 |
margin-right: 15px; |
234 |
}
|
235 |
}
|
236 |
}
|
237 |
}
|
238 |
|
239 |
// CSS dropdown menu |
240 |
#navigation { |
241 |
text-align: left; |
242 |
border: 2px solid $style-color3; |
243 |
background-color: $style-color2; |
244 |
@include border-radius(15px); |
245 |
}
|
246 |
|
247 |
#menuh { |
248 |
font-size: 1.3em; |
249 |
font-family: arial, helvetica, sans-serif; |
250 |
background-color: $style-color1; |
251 |
}
|
252 |
|
253 |
#menuh ul { |
254 |
background-color: $style-color2; |
255 |
}
|
256 |
|
257 |
#menuh ul ul { |
258 |
background-color: $style-color2; |
259 |
@include border-radius(15px); |
260 |
border: 2px solid $style-color3; |
261 |
}
|
262 |
|
263 |
#menuh a { |
264 |
background-color: $style-color2; |
265 |
color: #000; |
266 |
}
|
267 |
|
268 |
#menuh a:link, #menuh a:visited, #menuh a:active { |
269 |
color: #000; |
270 |
background-color: $style-color2; |
271 |
}
|
272 |
|
273 |
#menuh a:hover { |
274 |
color: #000; |
275 |
background-color: $style-color4; |
276 |
@include border-radius(5px); |
277 |
}
|
278 |
|
279 |
// End CSS Drop Down Menu |
280 |
// Misc classes |
281 |
.picture { |
282 |
border: 3px solid $style-color3; |
283 |
@include border-radius(8px); |
284 |
float: left; |
285 |
margin: 5px 15px 15px 15px; |
286 |
}
|
287 |
|
288 |
a:link, a:visited { |
289 |
color: darken($style-color1, 50); |
290 |
text-decoration: none; |
291 |
}
|
292 |
|
293 |
strong { |
294 |
font-weight: bold; |
295 |
}
|
296 |
|
297 |
table { |
298 |
margin: 20px; |
299 |
border: 3px solid; |
300 |
@include border-radius(10px); |
301 |
border-color: lighten($style-color2, 6); |
302 |
th { |
303 |
text-align: center; |
304 |
font-weight: bold; |
305 |
padding: 10px 0 10px 0; |
306 |
}
|
307 |
tbody { |
308 |
td { |
309 |
padding: 10px; |
310 |
}
|
311 |
tr:nth-child(2n+1) { |
312 |
background-color: darken($style-color2, 5); |
313 |
}
|
314 |
tr:nth-child(even) { |
315 |
background-color: lighten($style-color2, 2.5); |
316 |
}
|
317 |
}
|
318 |
}
|
319 |
|
320 |
#commentSpacer { |
321 |
width: 100%; |
322 |
margin-top: 20px; |
323 |
margin-left: 15px; |
324 |
}
|
325 |
|
326 |
.tutorial_excerpt { |
327 |
margin-left: 20px; |
328 |
}
|
329 |
|
330 |
.tutorial_thumbnail { |
331 |
float: left; |
332 |
margin-right: 20px; |
333 |
margin-left: 20px; |
334 |
margin-bottom: 20px; |
335 |
}
|
336 |
|
337 |
.tutorial_wrap { |
338 |
margin-bottom: 50px; |
339 |
float: left; |
340 |
}
|
341 |
|
342 |
img.wp-post-image { |
343 |
-moz-border-radius: 15px; |
344 |
border-radius: 15px; |
345 |
box-shadow: 10px 10px 5px gray; |
346 |
}
|
347 |
|
348 |
.showcode { |
349 |
margin: 20px auto 20px 30px; |
350 |
-moz-border-radius: 15px; |
351 |
border-radius: 15px; |
352 |
border: $style-color4 3px; |
353 |
border-style: solid; |
354 |
background: white; |
355 |
}
|
356 |
|
357 |
#socialmedia { |
358 |
width: 700px; |
359 |
margin-top: 20px; |
360 |
margin-left: 15px; |
361 |
}
|
362 |
|
363 |
#socialbuttons { |
364 |
margin: auto; |
365 |
}
|
366 |
|
367 |
#socialbuttons a { |
368 |
opacity: 0.8; |
369 |
filter: alpha(opacity = 80); |
370 |
-webkit-transition: all ease-in-out 0.2s; |
371 |
-moz-transition: all ease-in-out 0.2s; |
372 |
-ms-transition: all ease-in-out 0.2s; |
373 |
-o-transition: all ease-in-out 0.2s; |
374 |
transition: all ease-in-out 0.2s; |
375 |
}
|
376 |
|
377 |
#socialbuttons a:hover { |
378 |
opacity: 1; |
379 |
filter: alpha(opacity = 100); |
380 |
}
|
381 |
|
382 |
#socialbuttons a { |
383 |
display: inline-block; |
384 |
height: 28px; |
385 |
width: 30px; |
386 |
background-image: url(/images/ico-subscribe-social.png); |
387 |
background-repeat: no-repeat; |
388 |
}
|
389 |
|
390 |
#socialbuttons a.twitter { |
391 |
background-position: -30px 0; |
392 |
}
|
393 |
|
394 |
#socialbuttons a.facebook { |
395 |
background-position: -60px 0; |
396 |
}
|
397 |
|
398 |
#socialbuttons a.googleplus { |
399 |
background-position: -210px 0; |
400 |
}
|
401 |
|
402 |
dl { |
403 |
margin-left: 20px; |
404 |
margin-top: 20px; |
405 |
margin-bottom: 20px; |
406 |
font-size: 19px; |
407 |
line-height: 1.25em; |
408 |
}
|
409 |
|
410 |
dt { |
411 |
margin-left: 20px; |
412 |
margin-bottom: 20px; |
413 |
font-weight: bold; |
414 |
}
|
415 |
|
416 |
dd { |
417 |
margin-left: 40px; |
418 |
margin-bottom: 20px; |
419 |
}
|
Code ini mendefinisikan bagaimana website terlihat. Itu juga mendefinisikan background, pewarnaan, font, dsb. Yang membentuk styling untuk website pada umumnya.
Direktori Styling/Basic berisi berkas yang diperlukan untuk tampilan default halaman 404, header, footer, dan bagian sidebar situs web. Oleh karena itu, buat sebuah file bernama 404.html dan tempatkan kode ini:
1 |
<h2>404 Page</h2> |
2 |
|
3 |
<p>Sorry, we could not find the page.</p> |
Ini adalah halaman error 404 dasar. Anda harus berhati-hati dengan informasi yang diberikan di sini, karena Anda tidak ingin mengungkapkan terlalu banyak informasi tentang bagaimana situs Anda bekerja. Karena ini akan ditempatkan dibagian content halaman, akan mudah bagi pengguna untuk bernavigasi darinya.
Berikutnya, buat file header.html dengan konten berikut:
1 |
<h1><a href='/'>Test Site</a></h1> |
2 |
<h6>A New Approach</h6> |
3 |
<br>
|
Ini hanya sebuah header dasar tanpa deskripsi, tetapi memberikan CMS sesuatu untuk ditampilkan.
Selanjutnya, buat file footer.html dengan konten ini:
1 |
<footer>
|
2 |
[Column1] |
3 |
<p>Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a> |
4 |
[/Column1] |
5 |
[Column2] |
6 |
<p>Running on a flat CMS server!</p> |
7 |
[/Column2] |
8 |
</footer>
|
Selanjutnya, buat file sidebar.html yang dengan konten ini:
1 |
<h3>A Sidebar</h3> |
2 |
<p>This is a basic sidebar that can have other times.</p> |
Sekali lagi, ini adalah placeholder. Semua file tersebut disalin ke direktori site/parts dan diubah sesuai kebutuhan situs. Tujuannya agar server memiliki nama untuk digunakan seandainya pengguna lupa membuatnya.
Struktur Situs
Dengan theme dan layout yang didefinisikan, saatnya untuk menciptakan konten dasar dan struktur untuk situs sebenarnya. Dalam direktori site, buat direktori parts, pages, posts, images, css, js.
Parts (bagian)
Direktori parts akan berisi potongan kecil html/css/javascript yang akan membuat satu unit ditempatkan di beberapa lokasi situs web. Bagian ini masuk ke server dan digabungkan dengan isi halaman jika diperlukan. Untuk situs demo kita, buat bagian berikut:
- footer.html dengan code ini:
1 |
<footer>
|
2 |
<p style="float: left;">Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a> |
3 |
<p style="float: right;">Running on a flat CMS server!</p> |
4 |
</footer>
|
5 |
<script type="text/javascript"> |
6 |
window.PageName = "{{{PageName}}}"; |
7 |
</script>
|
- header.html dengan code berikut:
1 |
<link rel="shortcut icon" href="{{{WebAddress}}}/images/favicon.ico" /> |
- headr.html dengan code berikut:
1 |
<h1><a href='{{{ServerAddress}}}/'>Test Site</a></h1> |
2 |
<h6>Flat File System CMS</h6> |
- navbar.html dengan code berikut:
1 |
<div id="menuh-container"> |
2 |
<div id="menuh"> |
3 |
<ul>
|
4 |
<li>
|
5 |
<a class="top_parent">Pages</a> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="{{{WebAddress}}}/flatcms">Flat CMS</a> |
9 |
</li>
|
10 |
</ul>
|
11 |
</li>
|
12 |
<li>
|
13 |
<a href="{{{WebAddress}}}/posts/blogs/flatcms">Blog</a> |
14 |
</li>
|
15 |
<li>
|
16 |
<a href="{{{WebAddress}}}/posts/news/flatcms" class="top_parent">News</a> |
17 |
</li>
|
18 |
<li>
|
19 |
<a href="{{{WebAddress}}}/about" class="top_parent">About</a> |
20 |
</li>
|
21 |
</ul>
|
22 |
</div>
|
23 |
</div>
|
- sidebar.html dengan code ini:
1 |
<h2>Side Bar</h2> |
2 |
<hr>
|
- socialmedia.html dengan code ini:
1 |
<div id="socialmedia"> |
2 |
<div id="socialbuttons"> |
3 |
<a href="" class="twitter" title="Twitter"></a> |
4 |
|
5 |
<a href="" class="googleplus" title="Google+"></a> |
6 |
</div>
|
7 |
<div id="commentSpacer" class="clearfix"></div> |
8 |
<!-- Put other Social Media items here (ie: Disqus, etc.); -->
|
9 |
</div>
|
Server memuat bagian ini dengan menggunakan nama tanpa ekstensinya dalam template Handlebar untuk perluasan. Sebagai contoh, dimana pun socialmedia.html perlu ditempatkan, Anda menempatkan makro {{{socialmedia}}} disana. Juga, bagian ini dapat berupa HTML, Markdown, atau format apapun yang dapat ditangani oleh server. Dalam server, saya akan membuat file-file pendukung yaitu HTML, Jade/Amber, dan Markdown. Saya akan membahas detail ini di tutorial pembuatan server yang sebenarnya.
Pages (halaman)
Semua halaman untuk situs akan ditempatkan dalam direktori pages. Untuk saat ini, buat file-file berikut dengan konten-nya masing-masing:
- main.html dengan code ini:
1 |
<h3>Flat CMS Test Site</h3> |
2 |
<p>This is the Main page of the test site.</p> |
- flatcms.md dengan code ini:
1 |
### Flat CMS Server |
2 |
|
3 |
This is a page about the flat CMS server. |
- about.md dengan code ini:
1 |
### About |
2 |
|
3 |
This would be a standard about page. |
Ini adalah halaman demo untuk situsnya. Satu-satunya file wajib adalah main.html karena server akan memuat konten halaman ini kedalam memory dan menyediakan dari memory. Ini membantu mempercepat pemuatan halaman depan website. Dua halaman lainnya memiliki ekstensi md karena mereka dalam format Markdown. Server akan menterjemahkan konten ke HTML sebelum menyematkannya di halaman layout.
Umumnya, halaman berisi informasi yang tidak banyak berubah sepanjang waktu. Itu memberikan pemirsa informasi tentang situs, tujuannya dan sasarannya.
Halaman bisa bersifat hirarkis dengan membuat direktori dan subdirektori dengan halaman. Nama direktori ini membuat alamat ke halaman direktori ini.
Posts
Tidak seperti page, post adalah item yang ditambahkan secara regular, misalnya, posting blog harian/mingguan/bulanan dan item berita. Area ini diharapkan untuk sering diupdate. Dalam direktori posts, buat dua direktori baru: blogs dan news. Dimasing-masing direktori tersebut, buat direktori flatcms. Ini akan berisi postingan blog dan item berita untuk website Flat CMS.
Pada direktori posts/blogs/flatcms, buat file-file berikut:
- index.amber dengan konten ini:
1 |
h3 Flat CMS Blog |
2 |
|
3 |
p This is a rambling blog about a flat CMS. |
4 |
|
5 |
mixin article($title, $link, $excerpt, $date) |
6 |
div.entry |
7 |
div.tutorial_wrap |
8 |
div.tutorial_div |
9 |
a[href=$link] |
10 |
h3 #{$title}
|
11 |
h5 #{$date}
|
12 |
p.tutorial_excerpt #{$excerpt}
|
13 |
div.clear |
14 |
|
15 |
+article("Flat CMS Running", "/posts/blogs/flatcms/flatcms", "Flat CMS Test Server is Running!", "August 12, 2015")
|
- flatcms.md dengan konten ini:
1 |
The New Server is Running |
2 |
---- |
3 |
|
4 |
After much work and programming, the flat CMS server is running. Stay tuned for more news! |
5 |
|
6 |
{{{socialmedia}}}
|
Index.amber adalah template Jade untuk menentukan berbagai post yang berbeda di blog. Sistem template HTML Jade memudahkan menambahkan konten baru dengan format yang tepat. Parameter ke makro membentuk item yang berbeda. Anda bisa menemukan lebih banyak informasi tentang Jade di Tuts+.
Di sini, ekstensi yang digunakan adalah amber karena Go language yang setara dengan Jade adalah Amber. Karena di situlah saya memulai, begitulah cara saya membuatnya. Jika Anda ingin mengubah ekstensi, ingatlah untuk mengubahnya dalam kode server yang sesuai juga.
Di direktori posts/news/flatcms, buat file berikut ini:
- index.amber dengan konten ini:
1 |
h3 Flat CMS News |
2 |
|
3 |
p Here is where all the news about what I am doing is found. Please come back often to check it out! |
4 |
|
5 |
mixin article($title, $link, $excerpt, $date) |
6 |
div.entry |
7 |
div.tutorial_wrap |
8 |
div.tutorial_div |
9 |
a[href=$link] |
10 |
h3 #{$title}
|
11 |
h5 #{$date}
|
12 |
p.tutorial_excerpt #{$excerpt}
|
13 |
div.clear |
14 |
|
15 |
+article("Flat CMS is Running", "/posts/news/flatcms/flatcms", "The Flat CMS Test Server is Running!", "August 12, 2015")
|
- flatcms.md dengan konten ini:
1 |
The New Server is Running |
2 |
---- |
3 |
|
4 |
After much work and programming, I finally have everything moved over to a goPress server that I wrote myself. I will be making this available for you too. Stay tuned! |
5 |
|
6 |
{{{socialmedia}}}
|
Ini membuat item news untuk demo situs. Di situs saya, saya menggunakan struktur yang sama untuk tutorial dan demo halaman code.
Images
Semua website punya gambar. Dalam konfigurasi ini, semua gambar ada di direktori site/images. Untuk keperluan demo, hanya icon social media yang diletakkan di sini. Anda bisa mendapatkan file gambar dari file download.
Site CSS
Bahkan dengan layout css dan styling css, akan ada waktu dimana Anda ingin aturan css khusus. Direktori site/css berisi semua file css yang menempatkan sentuhan akhir di situs web. Semua layout, styling, dan site/css akan dikompilasi bersama ke dalam satu file css. Karena itu, buatlah direktori site/css/final untuk menempatkan file yang dikompilasi ini. Sekarang, buat file site/css/site.css dengan konten berikut:
1 |
.clear { |
2 |
clear: both; |
3 |
height: 0px; |
4 |
}
|
Tidak banyak di sini—hanya definisi untuk class clear. Anda bisa menambahkan apapun yang Anda mau, tapi harus sesuatu yang tidak berkaitan dengan layout atau kategori styling.
Site Scripts
direktori site/js berisi semua file JavaScript spesial untuk situs. Ini akan disusun bersama-sama dan diminimalkan agar memuat halaman situs menjadi lebih cepat. Untuk sekarang, buat direktori site/js/final untuk script yang dikompilasi dan file site/js/01-site.js dengan isi berikut:
1 |
;
|
2 |
//
|
3 |
// File: Site.js
|
4 |
//
|
5 |
// Description: The JavaScript file for the site.
|
6 |
//
|
7 |
jQuery(document).ready(function () { |
8 |
//
|
9 |
// Code here will be ran once a page is loaded.
|
10 |
//
|
11 |
});
|
Tidak banyak di sini, untuk sekarang. Tapi, karena Anda membutuhkan JavaScript kustom, itu bisa diletakkan di sini.
Karena script akan disusun bersama, saya memasukkannya sesuai urutan yang dibutuhkan untuk pemuatan. Aturan untuk mengkompilasi script bersama-sama akan memuat script dalam urutan numerik.
Otomatisasi Dengan Gulp
Cara termudah untuk mempercepat load halaman web adalah dengan memiliki request HTTP sedikit mungkin. Karenanya, lebih baik untuk menggabungkan semua CSS dan JavaScript file ke dalam satu file. Cara terbaik untuk mengkompilasi file ini adalah dengan membuat script. Melakukan hal itu setiap kali server menerima request adalah buang-buang waktu pemrosesan.
Pilihan saya untuk otomatisasi script adalah Gulp. Gulp berjalan pada Node.js. Oleh karena itu, pergi ke website Node.js dan download programnya untuk sistem Anda. Setelah Anda menginstal Node.js, Anda dapat menginstal Gulp dengan ini:
1 |
npm install --global gulp |
2 |
npm install --global gulp |
3 |
npm install --global gulp-compass |
4 |
npm install --global gulp-autoprefixer |
5 |
npm install --global gulp-compressor |
6 |
npm install --global gulp-concat |
Ini akan menginstal Gulp dan Modul Gulp yang saya gunakan di script yang dibuat. Sekarang, di bagian atas direktori Anda, buat file gulpfile.js yang berisi konten berikut:
1 |
// Requirements
|
2 |
var gulp = require('gulp'), |
3 |
compass = require('gulp-compass'), |
4 |
prefix = require('gulp-autoprefixer'), |
5 |
compressor = require('gulp-compressor'), |
6 |
concat = require('gulp-concat'); |
7 |
|
8 |
// Defines path to sass
|
9 |
var Theme = "Basic"; |
10 |
var Layout = "SingleCol"; |
11 |
var themesassRoot = 'themes/styling/' + Theme; |
12 |
var layoutsassRoot = 'themes/layouts/' + Layout; |
13 |
|
14 |
// Gulp task
|
15 |
gulp.task('theme-compass-to-css', function(){ |
16 |
return gulp.src(themesassRoot+'/sass/Basic.scss') |
17 |
.pipe(compass({ |
18 |
config_file: themesassRoot + '/config.rb', |
19 |
css: themesassRoot + '/css', |
20 |
sass: themesassRoot + '/sass', |
21 |
require: 'sassy-buttons' |
22 |
}))
|
23 |
.pipe(prefix("last 3 versions")) |
24 |
.pipe(gulp.dest(themesassRoot + '/css')) |
25 |
});
|
26 |
|
27 |
gulp.task('layout-compass-to-css', function(){ |
28 |
return gulp.src(layoutsassRoot+'/sass/base.scss') |
29 |
.pipe(compass({ |
30 |
config_file: layoutsassRoot + '/config.rb', |
31 |
css: layoutsassRoot + '/css', |
32 |
sass: layoutsassRoot + '/sass', |
33 |
require: 'susy' |
34 |
}))
|
35 |
.pipe(prefix("last 3 versions")) |
36 |
.pipe(gulp.dest(layoutsassRoot + '/css')) |
37 |
});
|
38 |
|
39 |
gulp.task('watch-compass', function(){ |
40 |
// What to watch
|
41 |
gulp.watch(themesassRoot + '/sass/Basic.scss', function(){ |
42 |
// What to run
|
43 |
gulp.run('theme-compass-to-css'); |
44 |
});
|
45 |
gulp.watch(layoutsassRoot + '/sass/Basic.scss', function(){ |
46 |
// What to run
|
47 |
gulp.run('layout-compass-to-css'); |
48 |
});
|
49 |
});
|
50 |
|
51 |
gulp.task('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']); |
52 |
|
53 |
// js compressor
|
54 |
gulp.task('js', function () { |
55 |
gulp.src([ layoutsassRoot +'/js/*.js', themesassRoot + '/js/*.js', 'site/js/*.js']) |
56 |
.pipe(compressor()) |
57 |
.pipe(concat("final.js")) |
58 |
.pipe(gulp.dest('site/js/final')); |
59 |
});
|
60 |
|
61 |
// css compressor
|
62 |
gulp.task('css', ['all-compass'], function () { |
63 |
gulp.src([layoutsassRoot +'/css/*.css', themesassRoot + '/css/*.css', 'site/css/*.css']) |
64 |
.pipe(compressor()) |
65 |
.pipe(concat("final.css")) |
66 |
.pipe(gulp.dest('site/css/final')); |
67 |
});
|
68 |
|
69 |
gulp.task('default', ['all-compass', 'js', 'css']); |
Ini akan menggabungkan semua CSS dan JavaScript ke dalam satu file: di dalam file site/css/final/final.css untuk CSS, dan di dalam file site/js/final/final.js untuk JavaScript. Ini juga akan menambahkan aturan prefix browser untuk CSS Jalankan di direktori utama perintah berikut:
1 |
gulp |
Gulp akan mengkompilasi semua file kita dan menempatkan mereka di lokasi yang tepat. Setiap tugas yang didefinisikan dalam gulpfile.js dapat dijalankan secara terpisah dengan memberikan nama tugas setelah perintah gulp. Anda bisa mempelajari lebih jauh tentang Gulp di Tuts+.
File Configuration Server
Semua server memerlukan informasi konfigurasi. Karena itu, di root direktori, buat file server.json dengan informasi ini:
1 |
{
|
2 |
"CurrentLayout": "SingleCol", |
3 |
"CurrentStyling": "Basic", |
4 |
"ServerAddress": "localhost:8080", |
5 |
"SiteTitle": "Flat CMS Test Site", |
6 |
"Sitebase": "./site/", |
7 |
"TemplatBase": "./themes/", |
8 |
"Cache": false, |
9 |
"MainBase": "" |
10 |
} |
File json ini mendeskripsikan informasi tentang layout yang digunakan, styling yang digunakan, tujuan respon alamat dan port server, nama utama untuk situs dengan sub judul, caching untuk dijalankan dan dimatikan cache untuk keperluan debugging, dan lokasi direktori yang berbeda digunakan untuk situs. Dengan memberikan informasi ini ke server dalam file json, server bisa fleksibel, dengan informasi yang tidak butuh terlalu banyak code.
Mengupload Situs ke Server
Kebanyakan orang menggunakan klien FTP untuk menyalin file ke server mereka. Hal ini mudah dilakukan, tetapi sangat bervariasi mengenai sistem dan program yang digunakan. Tetapi ada beberapa alternatif.
Anda dapat menyiapkan daemon Dropbox untuk memuat situs Anda dari akun Dropbox Anda. Dropbox Wiki punya instruksi detail untuk menyiapkannya. Satu-satunya masalah adalah file secara otomatis terupload ke server ketika Anda membuat perubahan. Kadang-kadang, Anda ingin membuat perubahan tanpa mengupdate ke server. Jika hal ini terjadi, miliki lokasi bebas-Dropbox dari semua file situs dan lokasi Dropbox juga. Ketika selesai, buat tugas di file Gulp Anda untuk menyalin file situs baru ke lokasi Dropbox.
Pendekatan pilihan saya adalah dengan menggunakan Dropzone 3. Anda dapat memprogram Dropzone 3 dengan Ruby atau Python untuk menjalankan file yang dipasangkan padanya. Dropzone 3 juga memiliki banyak fungsi bawaan. Ada file action yang dibangun di untuk meng-upload ke situs FTP/SFTP. Aku membuat satu target Dropzone 3 untuk masing-masing direktori utama di situs saya. Kemudian, ketika saya ingin mengubah atau menambahkan file, saya cukup menyeretnya ke direktori yang sesuai untuk target dropzone. Anda dapat mempelajari lebih lanjut tentang Dropzone 3 dengan tutorial saya Writing Dropzone 3 Actions.
Kesimpulan
File-file dasar ini akan membuat sebuah website yang terlihat seperti ini:
Ini adalah hanya permulaan! Sekarang, dengan struktur situs yang ditata, sekarang saatnya untuk mulai membangun server web. Bergabung dengan saya di mana saya akan membangun server web berbasis Go language untuk situs demo ini tutorial selanjutnya.
