PHP Navbar'da seçilen menünün altına dropdown eklemek

sourcere · 26 Aralık 2023

Siteme admin paneli tasarlamak için uğraşıyorum. Hocamızın bizden istediği menü elemanlarını seçebileceğim bir select box olacak ve istenilen menüyü seçtikten sonra yanında metinboxa o menünün altına eklenecek. Dropdown ismini girip ekle butonuna basınca ekleyeceğim bir sistem menü ve altmenü veri tabanımdaki tablolardan geliyorlar. Altmenü şu an boş çünkü menüyü seçip altmenü ismini yazdıktan sonra veri tabanımdaki altmenu adlı tabloya veri girecek ve amenu_mıd menu ve altmenu arasında bağlantıyı sağlayan veri. Aşağıda tablodaki verilerin isimleri var isteyenle PHP kodlarımıda paylaşabilirim. Yapay zeka bile çözemedi, yardım. Tablolarım

Altmenu tablosu:

altmenu_ID
altmenu_ad
altmenu_sira
amenu_MID
altmenu_Durum

Menu tablosu

m_ID
m_ad
m_sira
m_durum

dgknbzglu · 27 Aralık 2023

Hiç bir şey çıkartamadım şu açıklamadan. Daha anlaşılır bir dilde sorununu yazarsan yardımcı olabiliriz.

sourcere · 27 Aralık 2023

dgknbzglu dedi:
Hiç bir şey çıkartamadım şu açıklamadan. Daha anlaşılır bir dilde sorununu yazarsan yardımcı olabiliriz.

Hocam bir adet navbarım var navbarımın menüleri veri tabanından geliyor, şimdi benim yapmak istediğim şey ise seçtiğim menünün altına ekle butonu ile dropdown eklemek

dgknbzglu · 27 Aralık 2023

Yani söylediğine göre şöyle bir şey anladım. Dene bi ona göre tekrar konuşuruz olmazsa.

PHP:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .menu-item {
      margin: 5px;
    }

    .dropdown {
      display: none;
      margin-top: 5px;
    }
  </style>
  <title>nb</title>
</head>
<body>

<?php
$menuler = array("1", "2", "3");
echo '<nav id="navbar">';
foreach ($menuler as $menu) {
    echo '<div class="menu-item" data-menu-id="'.$menu.'">Menü '.$menu.' <button class="add-btn" data-menu-id="'.$menu.'">Ekle</button></div>';
}
echo '</nav>';
?>

<script>
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('add-btn')) {
    const menuId = event.target.getAttribute('data-menu-id');
    const dropdown = createDropdown(menuId);
    event.target.parentNode.appendChild(dropdown);
    dropdown.style.display = 'block';
  }
});

function createDropdown(menuId) {
  const dropdown = document.createElement('div');
  dropdown.classList.add('dropdown');
  dropdown.innerHTML = menuId + '. menünün dropdown içeriği';
  return dropdown;
}
</script>

</body>
</html>

sourcere · 28 Aralık 2023

Maalesef hocam kodunuz çalışmadı ya da ben entregre edemedim sanırsam kendi veri tabanıma göre m_ID gibi değiştirmem gereken yerleri değiştirip koydum ama olmadı isterseniz kodumu paylaşayım ve tekrardan anlatayım. Seçtiğim, veri tabanından navbara gelen menülerden bir tanesine dropdown eklemek istiyorum bunun için menüyü seçecek bir selectboxa sonra seçtiğim menünün altına eklenecek dropdownun adını yazacak bir kutucuğa ihtiyacım var ekle tuşuna basınca seçtiğim menünün altına yazdığım isimde bir dropdown eklenecek.

Kod:

<?php
// Veritabanı bağlantı bilgileri
$servername = "xxxxxx";
$username = "xxxxx";
$password = "xxxxx";
$dbname = "xxxx";

// Veritabanına bağlanma
$conn = new mysqli($servername, $username, $password, $dbname);

// Bağlantıyı kontrol et
if ($conn->connect_error) {
    die("Bağlantı hatası: " . $conn->connect_error);
}

// Menü ekleme işlemi
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["new_menu_name"]) && isset($_POST["new_menu_order"])) {
    $newMenuName = $_POST["new_menu_name"];
    $newMenuOrder = $_POST["new_menu_order"];

    // Yeni menüyü veritabanına ekleme
    $sql = "INSERT INTO menu (m_ad, m_sira, m_durum) VALUES ('$newMenuName', $newMenuOrder, 1)";

    if ($conn->query($sql) === TRUE) {
        // Eklenen menünün ID'sini al
        $newMenuId = $conn->insert_id;
        echo json_encode(array("message" => "Menü ekleme başarıyla tamamlandı.", "newMenuId" => $newMenuId));
        exit;
    } else {
        echo json_encode(array("error" => "Menü ekleme hatası: " . $conn->error));
        exit;
    }
}

// Menü durumunu güncelleme (pasif hale getirme veya aktif etme) işlemi
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["menu_id"]) && isset($_POST["action"])) {
    $menuId = $_POST["menu_id"];
    $action = $_POST["action"];

    // Menü durumunu güncelleme (m_durum'u 0 yapma veya 1 yapma)
    $status = ($action == "disable") ? 0 : 1;
    $sql = "UPDATE menu SET m_durum = $status WHERE m_ID = $menuId";

    if ($conn->query($sql) === TRUE) {
        echo json_encode(array("message" => "Menü durumu başarıyla güncellendi."));
        exit;
    } else {
        echo json_encode(array("error" => "Menü durumu güncelleme hatası: " . $conn->error));
        exit;
    }
}

// Menü sıralarını güncelleme işlemi
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["order"])) {
    $order = $_POST["order"];

    // Menü sıralarını güncelleme
    foreach ($order as $key => $menuId) {
        $sql = "UPDATE menu SET m_sira = $key + 1 WHERE m_ID = $menuId";
        if ($conn->query($sql) !== TRUE) {
            echo json_encode(array("error" => "Menü sıra güncelleme hatası: " . $conn->error));
            exit;
        }
    }

    echo json_encode(array("message" => "Menü sıraları başarıyla güncellendi."));
    exit;
}

// Menüleri veritabanından çek
$sql = "SELECT * FROM menu ORDER BY m_sira";
$result = $conn->query($sql);

// Menü listesini oluştur
if ($result->num_rows > 0) {
    echo '<div class="container mt-5">';
    echo '<h2 class="mb-3">Menü Ekle</h2>';

    echo '<form id="new-menu-form">';
    echo '<div class="form-group">';
    echo '<label for="new_menu_name">Menü Adı:</label>';
    echo '<input type="text" class="form-control" name="new_menu_name" required>';
    echo '</div>';
    echo '<div class="form-group">';
    echo '<label for="new_menu_order">Menü Sırası:</label>';
    echo '<input type="number" class="form-control" name="new_menu_order" required>';
    echo '</div>';
    echo '<button type="submit" class="btn btn-success">Menü Ekle</button>';
    echo '</form>';

    echo '<h2 class="mt-5">Menüler</h2>';
    echo '<div id="menu-list" class="sortable list-group mt-3">';
    while ($row = $result->fetch_assoc()) {
        $statusText = ($row["m_durum"] == 1) ? "Pasif Et" : "Aktif Et";
        $action = ($row["m_durum"] == 1) ? "disable" : "enable";
        $badgeColor = ($row["m_durum"] == 1) ? "badge-danger" : "badge-success";
        echo '<li data-id="' . $row["m_ID"] . '" class="list-group-item d-flex justify-content-between align-items-center">' . $row["m_ad"] . '
              <a href="#" class="action-menu badge ' . $badgeColor . '" data-id="' . $row["m_ID"] . '" data-action="' . $action . '">' . $statusText . '</a></li>';
    }
    echo '</div>';
    echo '</div>';
} else {
    echo "Menü bulunamadı.";
}

// Bağlantıyı kapat
$conn->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menü Düzenleme Paneli</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<script>
    $(function () {
        // Yeni menü ekleme formunu AJAX ile gönderme
        $("#new-menu-form").submit(function (e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "",
                data: formData,
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    if (response.error) {
                        alert(response.error);
                    } else {
                        // Başarıyla eklenen menüyü listeye ekleme
                        var newMenuItem = '<li data-id="' + response.newMenuId + '" class="list-group-item d-flex justify-content-between align-items-center">' + response.message + '</li>';
                        $("#menu-list").append(newMenuItem);
                        // Formu sıfırla
                        $("#new-menu-form")[0].reset();
                    }
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });

        $(".sortable").sortable({
            update: function (event, ui) {
                saveNewOrder();
            }
        });

        // Menü durumunu güncelleme işlemini AJAX ile gerçekleştirme
        $("#menu-list").on("click", ".action-menu", function (e) {
            e.preventDefault();
            var menuId = $(this).data("id");
            var action = $(this).data("action");
            updateMenuStatus(menuId, action);
        });

        function saveNewOrder() {
            var menuOrder = [];
            $("#menu-list li").each(function () {
                menuOrder.push($(this).data("id"));
            });

            // AJAX ile yeni sıra bilgilerini sunucuya gönder
            $.ajax({
                type: "POST",
                url: "",
                data: { order: menuOrder },
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    // Başarıyla güncellendiğini işleyebilirsiniz
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

        function updateMenuStatus(menuId, action) {
            // AJAX ile menü durumunu güncelleme işlemini sunucuya gönder
            $.ajax({
                type: "POST",
                url: "",
                data: { menu_id: menuId, action: action },
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    // Başarıyla güncellendiğini işleyebilirsiniz
                    // Yeniden yükleme işlemi
                    location.reload();
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    });
</script>


</body>
</html>

PHP Navbar'da seçilen menünün altına dropdown eklemek

Ayrıntılı düzenleme

sourcere

Decapat

dgknbzglu

Kilopat

sourcere

Decapat

dgknbzglu

Kilopat

sourcere

Decapat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz