Menu Horizontal dari DB Menggunakan jQuery & PHP

Assalamualakum....
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

Untuk gambaran umum saya rasa penjelasan diatas sudah cukup, sekarang kita akan mengumpulkan apa saja material pendukung untuk projek kita kali ini.

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

Setelah semua material pendukung terkumpul, sekarang kita buat database baru, buat tabel baru dan insert datanya, codenya bisa dilihat dibawah ini.

CREATE TABLE `menu` (
    `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
;

setelah tabel baru terbentuk sekarang kita input datanya:

INSERT INTO `menu` (`id_menu`, `parent_id`, `title`, `url`, `menu_order`) VALUES
    (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);

Setelah databse terbentuk sekarang kita gunakan lib yang sudah kita download tadi, susun direktori seperti terlihat pada gambar dibawah.

Folder CSS, Image dan JS kita gunakan dari lib yang sudah kita download tadi. nah yang kita buat baru adalah bagian DBConnetion.php dan index.php.
Dibawah ini adalah code untuk DBConnection.php

Baca Juga :



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;       
    }
}

ini code untuk index.php



<?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 :

Tampilkan Link Download

Tutorial Cara Download File :