site ecommerce php mvc & pdo الجزء الرابع

فهاد الجزء الرابع من site ecommerce ب php & pdo غادي نزيدو les pages ديالنا وغادي نشوفوا كيفاش نعرضوا ل produits ديالنا فالصفحة الرئيسية مع ل catégories لي غادي تكون عندي إمكانية الضغط على كل catégorie ونعرض ال produits الخاصين بها.

نظرة سريعة بالفيديو


1- إضافة الملف header.php


ف dossier ديال ل projet زيد dossier جديد سميه views لي فيه غادي يكونوا les pages ديالنا.

فهاد dossier زيد dossier سميه includes لي فيه غادي يكونوا الملفات الفرعية لي غادي نحتاجوا.

أول ملف غادي تزيد ف includes هو header.php لي غادي يكون فيه روابط css لي غادي نحتاجوا حنا غادي نخدموا ب bootstrap فأنا زدت الرابط ديالو بغيتي تخدم بحاجة أخرى أنت حر.

الكود ديال الملف هو :

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>PHP MVC STORE</title>
</head>
<body>
<?php include("navbar.php");?>
<div class="row">
    <div class="col-md-10 mx-auto m-3">
        <?php
            include('./views/includes/alerts.php')
        ?>
    </div>
</div>
                                    
                                

2- إضافة الملف footer.php


دائما ف includes زيد fichier جديد سميه footer.php لي غادي يكونوا فيه روابط javascript لي غادي نحتاجوا ممكن تزيد menu او لي بغيتي داخل الملف أنا زدت غير الروابط.

الكود ديال الملف هو :

                                    
                                        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script  cript src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="public/js/main.js"></script>
    </body>
</html>
                                    
                                

3- إضافة الملف alerts.php


دائما ف includes زيد ملف جديد سميه alerts.php ولي غادي يكونوا فيه les flashes messages يعني رسائل التنبيه ولي سبق وزدناهم فل class Session.php فهنا كنعرضهم وهاد الملف غادي يكون عندي فجميع الملفات الأخرى داكشي علاش درنالو ل include فل header.php.

الكود ديال الملف هو :

                                      
                                        <?php

if(isset($_COOKIE["success"])){
    echo "<div class='alert alert-success'>".$_COOKIE["success"]."</div>";
}

if(isset($_COOKIE["error"])){
    echo "<div class='alert alert-danger'>".$_COOKIE["error"]."</div>";
}

if(isset($_COOKIE["info"])){
    echo "<div class='alert alert-info'>".$_COOKIE["info"]."</div>";
}
                                      
                                    

4- إضافة الملف navbar.php


دائما ف includes زيد ملف جديد سميه navbar.php ولي غادي تكون فيه ل menu ديالنا لي هي قائمة التصفح وهنا خدمنا بل BASE_URL لي سبق وزدنا فالملف bootstrap.php باش نتنقلوا بين les pages ديالنا.

فعندي ل panier لي كنتحقق واش عندي ف session العدد ديال ل produits لي فل panier وكنعرضهم مكانش كنعرض 0 وعندي أيضا روابط التسجيل الخاصة بالمستخدم لي يلا connecté كنعرض الإسم ديالو ورابط الخروج مكانش كنعرض روابط التسجيل أيضا كنتحقق يلا كان أدمن كنعرض رابط التنقل للأدمن.

الكود ديال الملف هو :

                                        
                                            <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="<?php echo BASE_URL;?>">PHP STORE</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="<?php echo BASE_URL;?>">Accueil <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo BASE_URL;?>cart">
          Panier
          <?php if(isset($_SESSION["count"]) && $_SESSION["count"] > 0):?>
            (<?php echo $_SESSION["count"];?>)      
          <?php else:?>
            (0)
          <?php endif;?> 
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Compte
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <?php if(isset($_SESSION["logged"]) && $_SESSION["logged"] === true):?>
          <a class="dropdown-item" href="#"><?php echo $_SESSION["fullname"];?></a>
          <a class="dropdown-item" href="<?php echo BASE_URL;?>logout">Déconnexion</a>
          <?php if(isset($_SESSION["admin"]) && $_SESSION["admin"] == true):?>
           <a class="dropdown-item" href="<?php echo BASE_URL;?>dashboard">Admin <span class="sr-only">(current)</span></a>
          <?php endif;?> 
        <?php else:?>  
          <a class="dropdown-item" href="<?php echo BASE_URL;?>register">Inscription</a>
          <a class="dropdown-item" href="<?php echo BASE_URL;?>login">Connexion</a>
        </div>
        <?php endif;?> 
      </li>
    </ul>
  </div>
</nav>
                                        
                                    

5- إضافة الملف 404.php


دائما ف includes زيد ملف جديد سميه 404.php ولي الدور ديالو هو عرض رسالة للمستخدم بأن الصفحة لي كيقلب عليها مكايناش في حالة متوجه لشي رابط لي مكاينش.

الكود ديال الملف هو :

                                        
                                            <div class="container">
    <div class="row mt-4">
        <div class="col-md-10 mx-auto">
            <div class="card-body">
                <div class="text-center p-5 rounded bg-secondary">
                    <h2 class="text-white">
                        Page Introuvable
                    </h2>
                    <a href="<?php echo BASE_URL;?>" class="btn btn-secondary">
                        Accueil
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
                                        
                                    

كلمات مفاتيح :