Teknik Layout halaman Web dengan PHP – part II

desain

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.

Author: Candra Adi Putra

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

4 thoughts on “Teknik Layout halaman Web dengan PHP – part II”

Tinggalin komentar dong!