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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
| <!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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
| <!-------------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
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <?phpinclude('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><?phpinclude('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.
0 comments:
Post a Comment