Permasalahan yang sering dialami oleh pemula programer web adalah tidak tahu teknik melayout website. Secara umum, ada 4 teknik yang digunakan untuk melayout website dengan PHP. Teknik teknik tersebut adalah sebagai berikut:
- Teknik halaman static
- teknik include fragment
- teknik include content
- teknik halaman dinamis
Penamaan tersebut adalah penamaan dari saya sendiri karena saya tidak menemukan istilah yang tepat di internet. Artikel ini akan saya bagi menjadi 4 bagian, Bagian pertama ini akan membahas teknik halaman statis. Teknik ini adalah teknik yang paling sederhana. Anggaplah kita punya website seperti gambar dibawah ini:
Layout diatas adalah halaman index.php. website sederhana ini terdiri dari 3 halaman yatu
index.php,produk.php dan kontak.php. Ketiganya mempunyai layout yang sama. Berikut ini adalah struktur projectnya .| index.php
| kontak.php
| produk.php
|
\---assets
baby-blue.css
pure-min.css
ui.js
folder assets berisi file JS dan CSS, sedangkan file php ada di luar assets. Berikut ini adalah kode lengkap dari file index.php
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| <!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Candralab Studio</title> <link rel="stylesheet" href="assets/pure-min.css"> <link rel="stylesheet" href="assets/baby-blue.css"> <script type='text/javascript' src='assets/ui.js'></script> </head> <body> <div id="layout"> <a href="#menu" id="menuLink" class="menu-link"> <span></span> </a> <div id="menu"> <div class="pure-menu pure-menu-open"> <a class="pure-menu-heading" href="/">Menu</a> <ul> <li class=" "> <a href="index.php">Home</a> </li> <li class=" "> <a href="produk.php">Produk</a> </li> <li class=" "> <a href="kontak.php">contact</a> </li> </ul> </div> </div><!--div menu --><!--- Content -------------------------------> <div id="main"> <div class="header"> <h2>Candralab Studio </h2> <h3>Mobile and Web Development Company</h3> </div> <div class="content"> <h1>selamat datang</h1> <p> Selamat datang di candralab Studio, kami menyediakan layanan berikut : </p> <oL> <li> Web delopment dengan PHP dan MySQL </li> <li> Mobile App berbasis Android dan jQuery Mobile </li> <li> Training Web & Mobile Development </li> </oL> </div> <!-------------FOOOOOOOOOOOOOOOOOOOOOTER-----------------------------> <div class="footer"> <div class="legal pure-g"> <div class="pure-u-1 pure-u-sm-1-2"> <p class="legal-copyright"> © 2014 Candralab Studio All rights reserved. </p> </div> </div> </div> </div><!-- div main --> </div> <!--div layout --> </body></html> |
Perhatikan code diatas. jika kita ingin membuat halaman baru, misalkan halaman produk, cukup save as file ini menjadi
produk.php.Selanjutnya tinggal ganti code didalam
1
| <div id='main'> |
.
jangan lupa tambahkan link halaman tadi di
1
| <div id='menu'> |
Cara ini adalah cara yang paling sederhana dan paling gampang. Namun cara ini mempunyai kekurangan yang paling nampak yaitu banyak kode yang diulang, terutama dibagian header, sidebar dan footer. Kekurangan lain, jika kita mengedit footer misalkan maka kita harus mengedit sebanyak jumlah halaman tadi. Jika kita menambah halaman baru pun, kita harus menambahkan link ke menu sidebar sebanyak file halamannya.
