Home » HtmlPHP » Memecah Template Menggunakan PHP

Memecah Template Menggunakan PHP

Memecah Template/ Membagi template ke dalam bebarapa bagian menggunakan php dilakukan untuk mempermudah pekerjaan kita dalam membuat sebuah website. Tujuan sebenarnya adalah untuk memperpendek script htmlnya. jika pada awalnya kita harus menulis sampai 20 baris script html, maka hal tersebut dapat diganti dengan 3 baris php , dengan menggunakan perintah include

disini, kita akan membagi template yang sudah kita buat sebelumnya menjadi beberapa bagian, diantaranya
  • # bagian Header
  • # bagian Footer
Jadi nanti, kita tinggal langsung memasukkan ISI nya terus tanpa harus mengetik ulang semua script htmlnya

Sebelumnya, lihat terlebih dahulu Script Template Sebelumnya

Script Template HTML Lengkap:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Belajar Php</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <!Memanggil style css>
</head>
<body>
<div id="sampul"> <!div id= membuat class css dengan nama header>


<div id="header">
<h2>Header</h2>
<div id="linkHeader">
<h4><a href="index.php">Beranda</a></h4>
</div>
</div>
<div id="body">
<div id="SidebarKiri">
<h2>Sidebar Kiri</h2>
</div>
<div id="isi">
<h2>Isi</h2>
</div>
<div id="SidebarKanan">
<h2>Sidebar Kanan</h2>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
</div>

</div>
</body>
</html>


Kemudian kita akan memecahnya menjadi dua bagian, yang dimana diantara kedua bagian tersebut MERUPAKAN ISINYA

yang HEADER dari <div id="isi"> ke atas, dan yang Footer dari </div> (penutup div isi) kebawah..

#CARA MEMECAHNYA

Copy paste aja seperti yang saya katakan ti atas, dan isi kekurangannya, kalau yang HEADER kekurangan penutup body dan html, dan kalau yang FOOTER kekurangan pembuka Html dan body nya..

Buatlah sebuah file html baru dengan nama header.html, isinya seperti yang saya jelaskan diatas,

header.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Belajar Php</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <!Memanggil style css>
</head>
<body>
<div id="sampul"> <!div id= membuat class css dengan nama header>


<div id="header">
<h2>Header</h2>
<div id="linkHeader">
<h4><a href="index.php">Beranda</a></h4>
</div>
</div>
<div id="body">
<div id="SidebarKiri">
<h2>Sidebar Kiri</h2>
</div>
<div id="isi">

</body>
</html>

Jika muncul Error pada saat menambah script penutupan, klik disable html error checking pada bola lampunya
script-javaku.blogspot.com
Lalu buatlah sebuah file html baru dengan nama footer.html, isinya seperti yang saya jelaskan diatas

footer.html:

<html>
<body>
</div>
<div id="SidebarKanan">
<h2>Sidebar Kanan</h2>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
</div>

</div>
</body>
</html>

Jika muncul error juga pada saat menambah pembuka html dan body, lakukan cara diatas

sampai sejau ini kita sudah SELESAI memecah htmlnya menjadi 2 bagian


#CARA PENGGUNAANNYA
untuk penggunaannya, kita cukup memanggil file header dan footer dengan menggunakan script php yang bernama include

 buatlah sebuah file php baru, dengan nama terserah anda, disini saya menamakannya tes.php

Buka Script:

<?php
include "header.html";
?>

ini bagian isinya, inilah yang saya maksud mempersingkat dan memecah template,jadi setiap ingin membuat halaman baru, kita tidak harus menulis ulang semua code template htmlnya, cukup menggunakan perintah php seperti ini,
<br/>
<br/>
semoga bermanfaat

<?php
include "footer.html";
?>



Berikut Outputnya, Outputnya terletak pada bagian isi dari template

script-javaku.blogspot.com


untuk Css nya sudah kita kan sudah kita pelajari pada artikel sebelumnya, jadi disini kita ga bahas lagi

Semoga bermanfaat



Artikel Terkait:

gaga

0 comments:

Ada pertanyaan?? Silahkan tanyakan di kotak komentar .. :)

Subscribe to: Post Comments (Atom)