Layout Halaman Website dengan Pagging PHP

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Umumnya, halaman website memanfaatkan link untuk berpindah kehalaman yang lain. katakanlah anda membuat halaman website dengan 3 menu. menu satu adalah link ke home (halaman utama), menu kedua link ke profile sedangkan menu ketiga adalah link ke gallery. sebenarnya dengan memanfaatkan fungsi tag anchor html hal tersebut bekerja dengan baik. hanya saja anda akan membuat tiga buah halaman (home, profile dan gallery) yang secara umum semua isi halaman tersebut sama, hanya isi konten yang berbeda. apa itu tidak ribet ?

Dengan memanfaatkan teknik pagging di php kita dapat mempermudah itu semua. caranya dengan menggunakan fungsi include dan Passing Variabel. selebihnya akan kita bahas nanti.

Seperti yang telah kita ketahui bahwa PHP adalah Server Side Scripting artinya Script PHP harus dijalankan oleh server sehingga tanpa server script PHP tidak akan berjalan itu sebabnya kita harus meletakan Script PHP dalam folder htdocs XAMPP karena dalam xampp sudah include Webserver Apache.

Sebelum Kita Mulai, Silahkan Baca Postingan Sebelumnya karena postingan ini bisa dikatakan sebagai lanjutan dari dua postingan berikut

1. Mengatur Halaman Website dengan CSS
2. Membuat Menu dengan CSS

Langkah - Langkah Manajeman Layout dengan Pagging PHP

- Install Xampp anda. Kalau Belum punya silahkan Download disini

- Copy Folder Projek yang sudah kita buat Sebelumnya ke C:\xampp\htdocs

- Buka File index.html dengan Notepad atau sejenisnya, save as dengan nama index.php

- Hapus File index.html anda karena kita sudah memiliki file index.php

- Buat 3 Buah File PHP dengan Notepad atau sejenisnya dalam folder projek anda

  - File Pertama Isi dengan code berikut simpan dengan nama satu.php
 <?php echo "Ini adalah Halaman Pertama";  ?>

  - File Kedua Isi dengan code berikut simpan dengan nama dua.php
 <?php echo "Ini adalah Halaman Kedua";  ?>

  - File Ketiga Isi dengan code berikut simpan dengan nama tiga.php
 <?php echo "Ini adalah Halaman Ketiga";  ?>


- Buka File index.php kemudian ganti Code yang ada diantara tag Menu <div class="menu"> Hapus code yang ada disini </div> dengan code ini
<ul id="menu">
 <li><a href="?page=satu">Menu Satu</a></li>
 <li><a href="?page=dua">Menu Dua</a></li>
 <li><a href="?page=tiga">Menu Tiga</a></li>
</div>

- Tambahkan Code berikut diantara tag <div id="isi"> Letakan Codenya disini </div>
<?php

  @$hal = $_GET['page']; // ambil value dari page (lihat adress bar di browser)
  if(!$hal){ include "satu.php"; } // Jika tidak ada aksi penekanan menu maka masukan file satu.php
   else {
   switch($hal){
    case "satu" : include "satu.php"; break; // masukan file satu jika menu satu ditekan
    case "dua" : include "dua.php"; break; // masukan file dua jika menu dua ditekan
    case "tiga" : include "tiga.php"; break; // masukan tiga satu jika menu tiga ditekan
    default : echo "page not found! "; break; 
    }
   }
?>

- Simpan File index.php tersebut kemudian coba buka browser anda kemudian ketikan http://localhost/nama-folder-projek-anda/ Silahkan klik satu persatu menu tersebut untuk mengujinya. lihat perubahan yang terjadi pada bagian isi website. Happy Coding !
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.