PHP ve Bootstrap Dropdown Menü Yapımı

PHP ve Bootstrap Dropdown Menü Yapımı


PHP ve Bootstrap Dropdown Menü Yapımı

 Hepinize merhaba arkadaşlar bu yazımda sizlere PHP ve Bootstrap kullanarak nasıl açılabilir menü yapabileceğinizden bahsedeceğim. Örnek vermem gerekir ise aşağıdaki görsel iyi bir örnek olacaktır.



Php Bootstrap Dropdown Menu

Baştan söyleyelim bu yazı için özel bir tasarım yapmadım ve direkt olarak Bootstrap da bulunan navbar kodlarını alıp php ile birleştirdim.

Bootstrap Navbar sayfasına bakmak için buraya tıklayın.

Database Ayarları

İlk olarak utf8-bin olarak yeni bir database oluşturuyoruz ben bir adet blog scripti yapmak ile uğraşıyorum şu anda o yüzden adını "urhobablog" olarak belirledim ve oluşturdum. Database yi oluşturduktan sonra menümüz için bir tablo oluşturuyoruz.
Sitenin üst kısmında yani header dediğimiz yerinde bulunan menü olacağı için adını "ub_headermenu" olarak koydum.

Php Bootstrap Dropdown Menu Database

Oluşturduğum tablonun içinde menü başlığı gideceği sayfa ve hangi menünün alt başlığı olduğunu belirtmek için satırlarımı aşağıdaki gibi ekledim.

Database Satırlar

Gelin bu satırları biraz daha inceleyelim.

ub_menuID menuye atanan "id / kimlik" tir ve diğer menüleri bunun alt menüsü olarak belirlemekte bu ID yi kullanıyoruz, ayrıca bu kısmı otomatik tanımlanır olarak ayarlıyoruz ki bu satır eşsiz olsun.

ub_menuName bu menünün ekranda gözükeceği isim. yukarıdaki görselden örnek vermem gerekir ise "urhoba", "Anasayfa" gibi yazıları buraya yazıyoruz.

ub_menuURL burası menünün yönlendireceği sayfanın bağlantı adresi.

ub_manuParent burası menü eğer ki alt menü olacaksa hangi menünün alt menüsü ise onun "ub_menuID" sinin girildiği yerdir. Burası "0" olduğu zaman herhangi bir menünün alt menüsü olmadığı anlamına gelir.

Veri Tabanı Verileri

Menüleri eklediğimiz zaman bu şekilde olacaktır. "ub_menuParent" de bulunan 0lar ana menü olduklarını gösterir. 2 Olan ise "ub_menuID" si 2 olanın ebeveyn olduğunu gösteriyor.

Unity3D kullananlarınız var ise bunu parent chield ilişkisi gibi düşünebilirsiniz.


HTML İle Headerin Oluşturulması

<nav class="navbar navbar-expand-lg navbar-<?PHP $design->NavColorControl(); ?> bg-<?PHP $design->BgColorControl(); ?> border-bottom">
  <a class="navbar-brand" href="<?PHP $site->SiteURL(); ?>"><?PHP $site->SiteName(); ?></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <?PHP $menu->HeaderMenu(); ?>
    </ul>
  </div>
</nav>

Burada aslında Bootstrap da aldığım navbar kodlarını direkt olarak kullandım ve menü değerlerinin girildiği yeri silip, php ile oluşturduğum sınıftan menü fonksiyonunu çektim.

 <?PHP $menu->HeaderMenu(); ?>

Yukarıdaki kod ile php de oluşturduğum fonksiyondan veriyi çekiyorum.

Php İle Verilerin Çekilmesi

Config.php

<?PHP
## Classes
$menu = new Menu;

## Site URL
$site_url = "http://192.168.1.31/urhobablog/"; ## Site URLsini lütfen / ile birlikte yazın.

## Database Connection Settings
$db_host = "localhost";
$db_username = "root";
$db_password = "root";
$db_database = "urhobablog";

Burada veri tabanına bağlanmak için gerekli değişkenleri oluşturuyorum ve aynı zamanda "function.php" de oluşturduğum sınıfları çekiyor ve bir değişkene atıyorum.

Burada sizin işinize yarayacak kısımlar "Classes" kısmındaki "$menu" değişkeni ve "Database Connection" kısmı.
menu kısmında function.php de oluşturduğumuz sınıfı çekiyoruz ve de database connection kısmında veri tabanına bağlanmak için gerekli olan bilgileri giriyoruz.

Function.php

<?PHP
include_once 'config/config.php';

function DBConnect()
{
    try {
        global $db_connection;
        $db_connection = new PDO("mysql:host=" . $GLOBALS["db_host"] . ";dbname=" . $GLOBALS["db_database"] . "", $GLOBALS["db_username"], $GLOBALS["db_password"]);
    } catch (PDOException $e) {
        print $e->getMessage();
    }
}

function DBClose()
{
    $GLOBALS["db_connection"] = null;
}

class Menu
{
    function HeaderMenu()
    {
        DBConnect();
        $query = $GLOBALS["db_connection"]->query("SELECT * FROM ub_headermenu WHERE ub_menuParent = '0'", PDO::FETCH_ASSOC);
        if ($query->rowCount()) {
          
            foreach ($query as $row) {
 $query2 = $GLOBALS["db_connection"]->query("SELECT * FROM ub_headermenu WHERE ub_menuParent = '{$row["ub_menuID"]}'", PDO::FETCH_ASSOC);
                if ($query2->rowCount()) {
                    echo ' <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"  href="' . $row["ub_menuURL"] . '" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  ' . $row["ub_menuName"] . '</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">';
                    foreach ($query2 as $row2) {
                        echo ' <a class="dropdown-item" href="' . $row2["ub_menuURL"] . '">' . $row2["ub_menuName"] . '</a>';
                    }
                    echo '</div></li>';
                } else {
                    echo ' <li class="nav-item"><a class="nav-link" href="' . $row["ub_menuURL"] . '">' . $row["ub_menuName"] . '</a></li>';
                }
            }
        }
        DBClose();
    }
}

Burada "DBConnect" adı altında bir fonksiyon oluşturduk ve veri tabanına bu fonksiyon ile bağlantı kurduk. "DBClose" fonksiyonu ile veri tabanına olan bağlantımızı sonlandırdık.

"menu" Adında bir sınıf oluşturduk ve içine "Header Menu" adında bir fonksiyon oluşturduk. Şimdi burada sınıf kullanmamın sebebi bütün menüleri bu sınıf altında birleştirip gerekli yerlerde çekerek kullanmak için olduğunu söylemeliyim, böylelikle kod karmaşasından kurtulacağız.
Header menü kısmını açıklamam gerekir ise "DBConnect" ile veri tabanına bağlanıp ilk olarak foreach ile veri tabanından menüde bir menünün alt menüsü olmayanları aratıyor ve ekrana yazdırıyoruz. ($query burada ilk yaptığımız sorgu ve alt menü olmayanları sorguluyoruz.)

ilk sorgumuzun sonuçlarının içinde ikinci bir sorgu döndürüyoruz ve bu foreach ile çektiğimiz menünün alt menüsü bulunuyorsa yeni bir foreach ile alt menüleri de çekiyor ve ekrana bastırıyoruz.

PHP ve Bootstrap Dropdown Menü Yapımı

Bu projenin kaynak kodlarına alttaki bağlantı adresinden erişebilirsiniz


Bu konu ile ilgili merak ettiğiniz veya aklınıza takılan herhangi bir soru var ise hiç çekinmeden aşağıdaki yorum kısmında bana sorabilirsiniz.

Yorum Gönder

0 Yorumlar