Langsung ke konten utama

Belajar PHP - Memisah Page di PHP


Tutorial PHP kali ini akan mebahas tentang memisahkan page di PHP yang ada di halaman tersebut. Cara ini akan memudahkan kita untuk memonitoring setiap content yang berada di halaman tersebut dan juga kita tidak harus menulis scriptnya yang sama berkali-kali pada halaman yang berbeda.

Lebih jelasnya akan saya beri contoh pada index.php.
Misalnya saja sebuah index berisi header, sidebar, content, dan juga footer. Tentu saja header, sidebar, dan footer tidak berubah-ubah pada tiap halaman, maka untuk memudahkan kita, scriptnya kita pisah agar jika ada perubah sedikit semua halaman akan terubah dan kita tidak perlu merubah script tersebut pada masing-masing file halaman yang ada script tersebut.

Membuat Halaman Page

Jika anda masih kurang paham pada penjelasan saya di atas, sekarang kita buat sebuah file dengan nama index.php lalu kita pisahkan setiap bagiannya masing-masing. Berikut script lengkap index.php yang akan kita pisahkan.
index.php sebelum dipisahkan
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA- Compatible" content="IE=edge">
  <meta name="viewport" content="width=device- width, initial-scale=1">
  <title>Belajar memisahkan page -  Pemula Belajar</title>
  <link rel="stylesheet" type="text/css"  href="styles.css"/>
</head>
<body>

<!-- Awal header -->
<div class="header">
  <a href='/'>Pemula Belajar</a>
</div>
<!-- akhir header -->
<div class="wrapper">
  <!-- awal sidebar -->
  <div class="sidebar">
  <ul>
      <li>Home</li>
      <li>Artikel</li>
  </ul>
</div>
  <!-- akhir sidebar -->

  <!-- awal content -->
  <div class="content">
     Selamat datang di websit e, selamat belajar pagging pada website
  </div>
  <!-- akhir content -->
</div>

  <!-- awal footer -->
  <div class="footer">
     Copyright 2015 -  Pemula Belajar
  </div>
<!-- akhir footer -->
</body>
</html>

index.php di atas mempunyai bagiannya masing-masing seperti : header, sidebar, content dan footer. Maka setiap masing-masing bagian tersebut akan kita pisahkan.

1. Pisahkan page heaader

Pindah semua script header di atas dari code <div class="header"> sampai penutup </div> tersebut. Jika anda kesusahan mengartikannya cukup copy script di sini. Dan buatlah file dengan nama header.php.
Code header.php
<!-- Awal header -->
<div class="header">
  <a href='/'>Pemula Belajar</a>
</div>
<!-- akhir header -->

2. Memisahkan page sidebar

Sama juga dengan header, kita coba pisahkan sidebar yang berawal dari <div class="sidebar"> sampai dengan </div> atau anda bisa copy script berikut dan buatlah file dengan nama sidebar.php.
Code sidebar.php
  <!-- awal sidebar -->
  <div class="sidebar">
  <ul>
      <li>Home</li>
      <li>Artikel</li>
  </ul>
</div>
  <!-- akhir sidebar -->

3. Jangan pisahkan page content

Maksudnya disini adalah content tidak perlu di pisahkan karena setiap halaman akan berisi kontent yang berbeda, jika anda memisahkan maka anda harus banyak membuat file yang akan di panggil ke index.php. Jika anda ingin memisahkanya caranya sama dengan point 1 dan 2.

4. Memisahkan page footer

Sama juga dengan header dan sidebar, kita coba pisahkan footer yang berawal dari <div class="footer"> sampai dengan </div> atau anda bisa copy script berikut dan buatlah file dengan nama footer.php.
Code footer.php
  <!-- awal footer -->
  <div class="footer">
     Copyright 2015 -  Pemula Belajar
  </div>
<!-- akhir footer -->

Sekarang kita akan memanggil script yang sudah kita pisahkan tersebut dengan menggunakan kode include 'nama_file.php'; di php, atau jika anda ingin lebih jelasnya dapat anda copy script di bawah ini dan masukkan ke dalam index.php.
Code index.php setalah di pagging
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA- Compatible" content="IE=edge">
  <meta name="viewport" content="width=device- width, initial-scale=1">
  <title>Belajar memisahkan page -  Pemula Belajar</title>
  <link rel="stylesheet" type="text/css"  href="styles.css"/>
</head>
<body>
<?php
include 'header.php';
echo '<div class="wrapper">';
include 'sidebar.php';
echo '<!-- awal content -->
  <div class="content">
    Selamat datang di website,&nbs p;selamat belajar pagging pada website
  </div>
  <!-- akhir content -->';
echo '</div>';
include 'footer.php';
?>

</body>
</html> 

Selanjut tinggal anda simpan, apakah tampilan akan sama ? jika tidak terjadi error maka tampilan akan sama pada script di index tanpa pagging. kelebihan dari sistem ini adalah jika ada kesalahan pada sidebar kita hanya membuka file sidebar saja dan tidak perlu membuka file lain dan juga dengan gaya script seperti ini akan lebih ter struktur pada pemograman kita.

Semoga artikel Belajar PHP - Memisah Page di PHP dapat bermanfaat dan juga bisa membantu anda dalam pemograman PHP. Jika anda tidak keberatan tekan tombol share untuk membagikan ke teman-teman yang lain. Bila ada terdapat kesulitan atau masih kurang paham dengan penjelasan saya. Silahkan komentar dibawah. Terimakasih dan Salam :)

Komentar

Posting Komentar

Komentar dan Kritik kawan diperlukan agar dapat membangun pemula belajar kedepannya. Terima Kasih

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...