Bagaimana kabarnya sahabat pojok code eh sahabat blogger semua, mudah-mudahan dalam keadaan sehat walafiat selalu. Sahabat kali ini saya mau share ke kalian cara untuk membut menu horizontal yang dinamis load langsung dari database, sebelumnya saya sudah posting mengeni yang menu vertikalnya dan bisa dilihat di sini Tree menu dinamis load dari DB.
Menu horizontal seperti ini sering sekali kita temukan di website-website atau blog, sebagi programmer sudah selayaknya kamu mengetahui cara-cara ini.
Dafar ini postingn ini:
- Gambaran umum
- Bahan dan material pendukung
- Coding dan programming
- Testing dan preview
- File Code latihan
- Jquery, untuk jquery kamu bisa download dari situs resminya yaitu jquery.com
- Notepad ++ untuk text editornya, tapi jika kamu mengunakan yang lainnya juga bisa seperti sublime text visual studio netbeans dan lain sebagainya.
- Lib Jquery Sample menu download dari link berikut https://github.com/mshahbazsaleem/jQSimpleMenu
CREATE TABLE `menu` (setelah tabel baru terbentuk sekarang kita input datanya:
`id_menu` INT(11) NOT NULL AUTO_INCREMENT,
`parent_id` INT(11) NOT NULL DEFAULT '0',
`title` VARCHAR(200) NOT NULL DEFAULT '0',
`url` VARCHAR(200) NULL DEFAULT NULL,
`menu_order` INT(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id_menu`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=5
;
INSERT INTO `menu` (`id_menu`, `parent_id`, `title`, `url`, `menu_order`) VALUESSetelah databse terbentuk sekarang kita gunakan lib yang sudah kita download tadi, susun direktori seperti terlihat pada gambar dibawah.
(1, 0, 'Beranda\r\n', 'null', 1),
(2, 0, 'profile', NULL, 2),
(3, 2, 'Visi', NULL, 3),
(4, 2, 'Missi', NULL, 0),
(5, 0, 'Blog', NULL, 4),
(6, 5, 'Programming', NULL, 5),
(7, 5, 'Vlog', NULL, 6),
(8, 6, 'java', NULL, 0),
(9, 6, 'C++', NULL, 0),
(10, 0, 'About', NULL, 0);
Dibawah ini adalah code untuk DBConnection.php
Baca Juga :
- System informasi restoran dengan PHP dan MySql
- Collapsable sidebar menu dengan bootstrap
Upload image dengan preview- Custom validasi input pada HTML5
class DBConnection {
//put your code here
private $host = "localhost";
private $dbName = "latihan3";
private $usr = "root";
private $pwd = "root";
public function getConnection() {
try {
$conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
return $conn;
}
}
<?php
require_once 'lib/DbConnection.php';
$con = new DBConnection();
$connection = $con->getConnection();
function has_children($rows,$id) {
foreach ($rows as $row) {
if ($row['parent_id'] == $id)
return true;
}
return false;
}
function build_menu($rows,$parent=0)
{
if($parent==0){
$result = '<ul class="menu">';
}else{
$result = '<ul>';
}
foreach ($rows as $row)
{
if ($row['parent_id'] == $parent){
$result.= "<li><a href=\"https://www.pojokcode.com\">{$row['title']}</a>";
if (has_children($rows,$row['id']))
$result.= build_menu($rows,$row['id']);
$result.= "</li>";
}
}
$result.= "</ul>";
return $result;
}
$sql = "select * from menu";
$stmt = $connection->prepare($sql);
$stmt->execute();
$menu = array();
foreach ($stmt->fetchAll() as $k=> $v) {
$menu[]=array('id'=>$v['id_menu'],'title'=>$v['title'],'parent_id'=>$v['parent_id']);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu horizontal</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jqsimplemenu.js"></script>
<link rel="stylesheet" href="css/jqsimplemenu.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function () {
$('.menu').jqsimplemenu();
});
</script>
</head>
<body>
<?php echo build_menu($menu); ?>
</body>
</html>
Jika sudah selesa, sekarang coba jalankan file index.php nya jika menghasilkan seperti tampilan diatas berarti kamu sudah berhasil. Silahkan di modifikasi dan di kembangkan sendiri. Mudah mudahan bermanfaat. Terus belajar dan jika ada pertanyaan silahkan cantumkan pada kolom komentar dibawah. Terima Kasih
Salam
Klik Tombol Dibawah Untuk Memunculkan Link Download :
Tutorial Cara Download File :
