Teknik Layout Website dengan PHP – part I

layout1

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:

  1. Teknik halaman static
  2. teknik include fragment
  3. teknik include content
  4. 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:

layout1

 

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">
								&copy; 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.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

2 thoughts on “Teknik Layout Website dengan PHP – part I”

Tinggalin komentar dong!