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 yatuindex.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
<!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
<div id='main'>
.
jangan lupa tambahkan link halaman tadi di
<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.
Cara ini bisa diatasi dengan menggunakan teknik kedua yaitu teknik include. Inti dari teknik ini adalah menyimpan komponen halaman yang sama dalam file tersendiri. Saya akan bahas di artikel selanjutnya.
Download source
Jika ingin mencoba sendiri, silahkan download source codenya di sini.
makasih ya penjelsannya sangat membantu bro
Gw suka cara penjelesan bang chandra ini, lugas pelan-pelan step by step, kalau dekat daerah joglo jakarta barat ane mau ajak minum kopi, Thanks alot :D
Part IV nya mana kang.