Bismillahirrohmanirrohiim…
Ceritanya lagi belajar membuat menu menggunakan PHP dan mysql. Biar tampilan menu bisa seperti ini.

langsung aja buat database namanya terserah dan jangan lupa diisi. berikukt skrinshutnya.

Terus isi datanya sebagai berikut

Buat 3 buah file : Index.php, Koneksi.php dan menu.php

Index.php

<?php
include "index.php";
?>

Koneksi.php

<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbnm = "elektronik";

$conn = mysql_connect($host,$user,$pass);
if($conn){
	$buka = mysql_select_db($dbnm);
	if(!$buka){
		die("Database tidak dapat dibuka");
	}
} else {
	die("Server MySQL tidak terhubung");
}
?>

menu.php

<?php
function get_menu($data, $parent = 0) {
	static $i = 1;
	$tab = str_repeat("\t\t", $i);
	if ($data[$parent]) {
		$html = "\n$tab<ul>";
		$i++;
		foreach ($data[$parent] as $v) {
			$child = get_menu($data, $v->id);
			$html .= "\n\t$tab<li>";
			$html .= '<a href="'.$v->url.'">'.$v->title.'</a>';
			if ($child) {
				$i--;
				$html .= $child;
				$html .= "\n\t$tab";
			}
			$html .= '</li>';
		}
		$html .= "\n$tab</ul>";
		return $html;
	} else {
		return false;
	}
}

include "koneksi.php";

$result = mysql_query("SELECT * FROM menu ORDER BY menu_order");
while ($row = mysql_fetch_object($result)) {
	$data[$row->parent_id][] = $row;
}

$menu = get_menu($data);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu Horizontal</title>
<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>
<style type="text/css">
body { font: 11px Tahoma, sans-serif; margin: 0; padding: 0; }
a { color: #3150a9; text-decoration: none; }
#content { padding: 10px; margin: 15px; border: 1px solid #ccc; width: 500px; background: #fafafa; }
</style>
</head>
<body>

<div id="myjquerymenu" class="jquerycssmenu">
<?php echo $menu; ?>
<br style="clear: left" />
</div>

</body>
</html>

download file2 pendukung disini.
http://www.ziddu.com/download/9353434/menu.zip.html

About these ads