PHP Kategorileme mantığı

10-08-2023, 12:49:53

#1

cihan6797

Herkese Merhaba

Bir adet tab menüm var

ana kategorileri yani parent_id 0 olanları burada tab kısmında görüntülemek istiyorum
veri tabanım ise şu şekilde

bunu nasıl yapabilirim

şimdiden çok teşekkürler
10-08-2023, 12:53:35

#2

MajoR44

Öncelikle kategori ve ürünleri ayrı tablolarda tutunuz sonra kategoriyi çekin altınada ürünleri çekin.
10-08-2023, 12:55:19

#3

cihan6797

MajoR44 adlı üyeden alıntı: mesajı görüntüle

Öncelikle kategori ve ürünleri ayrı tablolarda tutunuz sonra kategoriyi çekin altınada ürünleri çekin.

bu yaptığınız çok kral hareket çok sağolun hocam 1 gündür uğrasıyorum kafam allak bullak olmuştu )))

10-08-2023, 18:04:32

Selam senin için şöyle bir örnek yaptım umarım fikir konusunda yardımcı olur.

<?php
$db = new mysqli('localhost', 'root', '', 'r10');
$db->query('SET NAMES utf8');

$query = $db->query('SELECT * FROM kategoriler ORDER BY title ASC');

$categoryData = array();

while ($row = $query->fetch_object()) {
    // Kategorileri parent-child ilişkisine göre düzenleme
    // $categoryData dizisine her kategoriyi ilgili parent_id altında grupluyoruz
    $categoryData[$row->parent_id][] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tab Örnek</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rubik:400,500,600,700,800&subset=latin-ext">
    <link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
    <style type="text/css">
       body{font-family:Rubik;font-size:14px;background:#f0f0f0;padding-top:150px}
       main{padding-top:200px}
       .box{box-shadow:rgba(0,0,0,.1) 0 6px 18px;border-radius:6px;background:#fff;overflow:hidden;max-width:640px;margin:0 auto}
       .box-headline{padding:15px 25px;border-bottom:1px solid #eee}
       .box-headline h3{font-size:13px;font-weight:500;margin:0}
       .box-body{padding:15px 25px}
       .box ul{margin:0;padding:0;list-style:none}
       .box-tab-menu{padding:10px 15px;border-bottom:1px solid #eee}
       .box-tab-menu ul{display:flex;align-items:center}
       .box-tab-menu ul li{padding:7px 15px;display:flex;align-items:center;user-select:none;cursor:pointer;transition:all .3s ease-in-out;margin-right:1em;border-radius:6px}
       .box-tab-menu ul li:hover{background-color:#f0f0f0}
       .box-tab-menu ul li i.fa{width:30px;height:30px;border-radius:100%;background-color:#CCC;display:flex;align-items:center;justify-content:center;margin-right:10px;color:#555}
       .box-tab-menu ul li span{font-weight:500}
       .box-tab-menu ul li.active{background-color:#00bd9d;color:#fff;cursor:inherit}
       .box-tab-menu ul li.active i.fa{background-color:#208876;color:#fff}
       .box-tab{height:0;opacity:0;visibility:hidden;transition:all .3s ease-in-out}
       .box-tab.active{height:auto;visibility:visible;opacity:1;display:block}
       .box-tab li{margin-right:1em;margin-bottom:1em}
       .box-tab li:last-child{margin-bottom:0}
       .box-tab li:before{content:"\f00c";width:20px;color:rgb(255,255,255);font-size:.7em;line-height:20px;text-align:center;height:20px;display:inline-block;margin-right:1em;font-family:FontAwesome;background:#CCC;border-radius:100%}
    </style>
</head>
<body>
    <div class="container">
        <div class="box box-tabs">
            <div class="box-tab-menu">
                <ul data-key="kategoriler">
                    <?php
                        // Ana kategoriler
                        foreach ($categoryData[0] as $index => $category) {
                            echo '<li' . ( ! $index ? ' class="active"' : '') . '><i class="fa ' . $category->icon . '"></i><span>' . $category->title . '</span></li>';
                        }
                    ?>
                </ul>
            </div>
            <?php foreach ($categoryData[0] as $index => $category): ?>
                <div class="box-tab<?php echo ( ! $index ? ' active' : ''); ?>">
                   <div class="box-body">
                        <ul>
                            <?php
                                foreach ($categoryData[$category->id] as $sub_category) {
                                    echo '<li>' . $sub_category->title . '</li>';
                                }
                            ?>
                        </ul>
                   </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script>
        $(function(){
            // Sekme geçişini yönetme
            if ($(".box-tabs").length) {
                $(".box-tabs ul li").click(function(){
                    // Kullanıcının seçtiği sekmenin sırasını localStorage'a kaydetme
                    localStorage.setItem("activeTab_" + $(this).parent().data("key"), $(this).index());
                    $(".box-tabs ul li, .box-tabs .box-tab").removeClass("active");
                    $(this).addClass("active");
                    $(".box-tabs .box-tab").eq($(this).index()).addClass("active");
                });

                // Sayfa yenilendiğinde kullanıcının son seçtiği sekme görüntüleniyor
                if (current = localStorage.getItem("activeTab_" + $(".box-tabs ul").data("key"))) {
                    $(".box-tabs ul li, .box-tabs .box-tab").removeClass("active");
                    $(".box-tabs ul li").eq(current).addClass("active");
                    $(".box-tabs .box-tab").eq(current).addClass("active");
                }
            }
        });
    </script>
</body>
</html>

10-08-2023, 18:08:05

cihan6797

QuarkChain adlı üyeden alıntı: mesajı görüntüle

Selam senin için şöyle bir örnek yaptım umarım fikir konusunda yardımcı olur.

<?php
$db = new mysqli('localhost', 'root', '', 'r10');
$db->query('SET NAMES utf8');

$query = $db->query('SELECT * FROM kategoriler ORDER BY title ASC');

$categoryData = array();

while ($row = $query->fetch_object()) {
    // Kategorileri parent-child ilişkisine göre düzenleme
    // $categoryData dizisine her kategoriyi ilgili parent_id altında grupluyoruz
    $categoryData[$row->parent_id][] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tab Örnek</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rubik:400,500,600,700,800&subset=latin-ext">
    <link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
    <style type="text/css">
       body{font-family:Rubik;font-size:14px;background:#f0f0f0;padding-top:150px}
       main{padding-top:200px}
       .box{box-shadow:rgba(0,0,0,.1) 0 6px 18px;border-radius:6px;background:#fff;overflow:hidden;max-width:640px;margin:0 auto}
       .box-headline{padding:15px 25px;border-bottom:1px solid #eee}
       .box-headline h3{font-size:13px;font-weight:500;margin:0}
       .box-body{padding:15px 25px}
       .box ul{margin:0;padding:0;list-style:none}
       .box-tab-menu{padding:10px 15px;border-bottom:1px solid #eee}
       .box-tab-menu ul{display:flex;align-items:center}
       .box-tab-menu ul li{padding:7px 15px;display:flex;align-items:center;user-select:none;cursor:pointer;transition:all .3s ease-in-out;margin-right:1em;border-radius:6px}
       .box-tab-menu ul li:hover{background-color:#f0f0f0}
       .box-tab-menu ul li i.fa{width:30px;height:30px;border-radius:100%;background-color:#CCC;display:flex;align-items:center;justify-content:center;margin-right:10px;color:#555}
       .box-tab-menu ul li span{font-weight:500}
       .box-tab-menu ul li.active{background-color:#00bd9d;color:#fff;cursor:inherit}
       .box-tab-menu ul li.active i.fa{background-color:#208876;color:#fff}
       .box-tab{height:0;opacity:0;visibility:hidden;transition:all .3s ease-in-out}
       .box-tab.active{height:auto;visibility:visible;opacity:1;display:block}
       .box-tab li{margin-right:1em;margin-bottom:1em}
       .box-tab li:last-child{margin-bottom:0}
       .box-tab li:before{content:"\f00c";width:20px;color:rgb(255,255,255);font-size:.7em;line-height:20px;text-align:center;height:20px;display:inline-block;margin-right:1em;font-family:FontAwesome;background:#CCC;border-radius:100%}
    </style>
</head>
<body>
    <div class="container">
        <div class="box box-tabs">
            <div class="box-tab-menu">
                <ul data-key="kategoriler">
                    <?php
                        // Ana kategoriler
                        foreach ($categoryData[0] as $index => $category) {
                            echo '<li' . ( ! $index ? ' class="active"' : '') . '><i class="fa ' . $category->icon . '"></i><span>' . $category->title . '</span></li>';
                        }
                    ?>
                </ul>
            </div>
            <?php foreach ($categoryData[0] as $index => $category): ?>
                <div class="box-tab<?php echo ( ! $index ? ' active' : ''); ?>">
                   <div class="box-body">
                        <ul>
                            <?php
                                foreach ($categoryData[$category->id] as $sub_category) {
                                    echo '<li>' . $sub_category->title . '</li>';
                                }
                            ?>
                        </ul>
                   </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script>
        $(function(){
            // Sekme geçişini yönetme
            if ($(".box-tabs").length) {
                $(".box-tabs ul li").click(function(){
                    // Kullanıcının seçtiği sekmenin sırasını localStorage'a kaydetme
                    localStorage.setItem("activeTab_" + $(this).parent().data("key"), $(this).index());
                    $(".box-tabs ul li, .box-tabs .box-tab").removeClass("active");
                    $(this).addClass("active");
                    $(".box-tabs .box-tab").eq($(this).index()).addClass("active");
                });

                // Sayfa yenilendiğinde kullanıcının son seçtiği sekme görüntüleniyor
                if (current = localStorage.getItem("activeTab_" + $(".box-tabs ul").data("key"))) {
                    $(".box-tabs ul li, .box-tabs .box-tab").removeClass("active");
                    $(".box-tabs ul li").eq(current).addClass("active");
                    $(".box-tabs .box-tab").eq(current).addClass("active");
                }
            }
        });
    </script>
</body>
</html>

hocam harika olmuş elinize sağlık