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
layout1

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.
desain

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

Published by Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

Join the Conversation

7 Comments

Tinggalkan Komentar plz!

  1. kurang screen shoot nya gan, tutorial keren.
    please kunjungi website perusahaan kami bantu input nya ya gan.. semoga sukses selalu
    anekamobil.co.id