Teknik Layout halaman Web dengan PHP – part II
Ini adalah bagin 2 dari 4 artikel yang membahas teknik layout dengan PHP. pada bagian ini, saya akan menjelaskan teknik layout dengan menginclude komponan halaman yang sama kedalam halaman content.
berikut ini adalah tampilan halamannnya
Untuk membuat teknik ini, perhatikan bahwa untuk masing masing halaman, komponen header, footer dan sidebar sama disetiap halaman, berikut ini adalah komponen halaman dalam format desain layout.
Struktur file
| index.php
| kontak.php
| produk.php
|
+---assets
| baby-blue.css
| pure-min.css
|
\---fragment
header.php
sidebar.php
footer.php
Kode Masing masing bagian
Kode header,footer dan sidebar diletakan di folder fragment.
header.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">
</head>
<body>
sidebar.php
<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 -->
Kode footer.php
<!-------------FOOOOOOOOOOOOOOOOOOOOOTER----------------------------->
<div class="footer">
<div class="legal pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<p class="legal-copyright">
© 2015 Candralab Studio All rights reserved.
</p>
</div>
</div>
</div>
</div><!-- div main -->
</div>
<!--div layout -->
</body>
</html>
halaman index.php
<?php
include('fragment/header.php');
include('fragment/sidebar.php');
?>
<!--- 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>
<?php
include('fragment/footer.php');
?>
dengan layout ini, jika kita ingin membuat halaman baru, cukup kopi file index.php dan beri nama dengan nama produk.php (misal saja). tinggal ganti isinya. Saat halaman itu dibuka otomatis bagian header,sidebar dan footer akan terinclude secara otomatis. Cara ini sering dipakai oleh programmer php, terutama yang memakai framework CodeIgniter.
Kelebihan dari teknik ini adalah tidak ada kode yang berulang, karena bagian halaman yang selalu berulang (header,sidebar, footer) sudah diletakan di file terpisah.
Setelah teknik ini, saya akan menjelaskan teknik ketiga yaitu teknik include content. Teknik ini adalah kebalikan dari teknik include komponen.
Download source
Jika ingin mencoba sendiri, silahkan download source codenya di sini.
kurang screen shoot nya gan, tutorial keren.
please kunjungi website perusahaan kami bantu input nya ya gan.. semoga sukses selalu
anekamobil.co.id
request sistem template di codeingniter
thanks penjelasannya
Tutorial yang bagus mas. Gimana caranya mas supaya setiap link yang diklik tampilnya di bagian content? Butuh respon kilat mas. Terima kasih. Email: umang.fotografer@gmail.com
membantu sekali
thanks….
akhirnya nemu juga :) thanks banget gan.
Hem Request donk sistem template di codeigniter