Pada tutorial pertama kita fokuskan pada teknik load halaman saat kita melakukan klik pada menu di web site kita secara prosedural bukan OO. Pengetahun yang wajib disaratkan agar memahami tutorial ini adalah HTML dan CSS serta basic GET, POST php. Mengapa Prosedural duu? karena akan sangat berat bagi seoarng pemula utnuk langsung terjun ke OO based, diperlukan pemahaman dan pengenalan lebih lanjut mengenai OO di Php. Untuk itulah artikel ini ditujukan bagi seseorang yang benar2 baru dalam php jika anda sudah mahir tolong segera lompati bacaan selanjutnya dan tulisakn saja koment di bawah 
Ok selanjutnya buatlah File , tuliskan script dibawah dan simpan dengan nama index.php pada localhost anda.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Simple Load Menu With Php</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#demo-container{padding:25px 15px 0 15px;background:#67A897;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
-->
</style>
</head>
<body>
<div id="demo-container">
<ul id="simple-menu">
<li><a href="" title="Home">Menu1</a></li>
<li><a href="" title="Home">Menu2</a></li>
<li><a href="" title="Home">Menu3 </a></li>
<li><a href="" title="Home">Menu4</a></li>
</ul>
</div>
</body>
</html>
Kemudian buatlah 4 file php lagi dengan nama menu1.php, menu2.php dst. Tuliskan script dibawah ini dengan mengubah nomor dari satu sampe 4
<?php echo "menu1': ?>
Selanjutnya mari kita buat script Err0r 404, artinya ya seperi apache error akan menampilkan halaman yg menandakan apa yg direquest dari client itu tidak ada di serve, namai dengan 404.php
<?php echo "Error, Halaman Tidak DItemukan"; ?>
Next buat file default php yg diload secara default saat kita membuka index.php namai dengan home.php
<?php echo "ini adalah home"; ?>
Saatnya membuat Engine yang menangani parservariabel sehingga bisa mengincludekan file php yang dimaksud.
<?
$isi=$_GET["i"];
if(!isset($_GET["i"]) || !file_exists($isi.".php"))
{
include "home.php";
}
elseif($isi!="empty" && $isi!='')
{
$content=$isi.".php";
include $content;
}
else
{
include "404.php";
}
?>
Penjelasan kode di atas :
- Line 1: Menangkap nilai dari variabel “i” yang di parsing menggunakan GET method kemudian hasil dari tangkapan itu digunakan untuk memberikan nilai variabel isi ($isi).
- Line 2 dan seterusnya : Jika tidak ada tangkapan variabel i dan tidak ada file “nilai”.php maka tampilkan file default tetapi jika ada nilai tangkapan i dan i tidak sama dengan null maka tampilkan “nilaii”.php jika tidak maka tampilkan 404.php
Selanjutnya ubah link html pada file index.php sesuai dengan script dibawah :
<li><a href="index.php?i=home" title="Menu1">Home</a></li> <li><a href="index.php?i=menu1" title="Menu1">Menu1</a></li> <li><a href="index.php?i=menu2" title="Menu2">Menu2</a></li> <li><a href="index.php?i=menu3" title="Menu3">Menu3</a></li> <li><a href="index.php?i=menu4" title="Menu4">Menu4</a></li>
Selanjutnya Sisipkan Script engine dan link menudi atas di file index.php sehingga seperti dibawah
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Simple Load Menu With Php</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#demo-container{padding:25px 15px 0 15px;background:#67A897;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
-->
</style>
</head>
<body>
<div id="demo-container">
<ul id="simple-menu">
<li><a href="index.php?i=home" title="Menu1">Home</a></li>
<li><a href="index.php?i=menu1" title="Menu1">Menu1</a></li>
<li><a href="index.php?i=menu2" title="Menu2">Menu2</a></li>
<li><a href="index.php?i=menu3" title="Menu3">Menu3</a></li>
<li><a href="index.php?i=menu4" title="Menu4">Menu4</a></li>
</ul>
</div>
<div>
<?
$isi=$_GET["i"];
if(!isset($_GET["i"]) || !file_exists($isi.".php"))
{
include "home.php";
}
elseif($isi!="empty" && $isi!='')
{
$content=$isi.".php";
include $content;
}
else
{
include "404.php";
}
?>
</div>
</body>
</html>
Maka Saat Anda buka dari broser index.php jika benar akan muncul “ini adalah home” jika di klik menu 1 maka muncul “menu1″. Seperti itu saja, sangat simpel. Jika ada pertanyaan dan sanggahan atau saran jangan sungkan untuk menuliskannya. Tutorial selanjutnya akan materi yang sama tetapi dari sisi OOP what?? heheh see u next tutorial.
Jika ingin mengunduh file lengkapnya, silahkan unduh disini.
#1 by edus on December 14, 2009 - 12:06 pm
okeh brow, keep blogging you, hidup blogger
#2 by ardlian on January 6, 2010 - 2:46 pm
thx.. gan..
#3 by nova gunawan on February 14, 2010 - 6:30 am
salam kenal
wah aku belum sampe neh ilmunya bozz
#4 by ardlian on February 17, 2010 - 8:10 am
hai…
salam kenal kembali… semangat