موقع ecommerce بل php و Mysql السلسلة الأولى الجزء الأول

فهاد المشروع غادي نشوفو كيفاش نصاوبو موقع ecommerce للمبتدئين ولي غادي يمكن المستخدم من الإطلاع على قائمة ديال المنتجات من بعد مكيختار منتوج كيتزاد فل panier من بعد كيمكنلو يمسح المنتجات لي مبغاش ويزيد أخرى ثم كيمر للأداء عبر الموقع المعروف بايبال.

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


- إنشاء قاعدة البيانات


أول حاجة غادي نديرو هي غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها ecome_db من بعد غادي نزيد فيها 4 ديال لtables نسميهم users,categories,contacts,products هادي هي قاعدة البيانات لي غادي تمكنا من حفظ المنتوجات لي غادي نزيدوها الكود باش تزيد الجداول فقاعدة البيانات هو :

                                    
                                        -- Structure de la table `categories`
--

CREATE TABLE IF NOT EXISTS `categories` (
  `cat_id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_title` varchar(255) NOT NULL,
  PRIMARY KEY (`cat_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;

-- Structure de la table `contacts`
--

CREATE TABLE IF NOT EXISTS `contacts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(64) COLLATE utf8mb4_unicode_ci NOT NULL,
  `message` text COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=0;


-- Structure de la table `products`
--

CREATE TABLE IF NOT EXISTS `products` (
  `product_id` int(11) NOT NULL AUTO_INCREMENT,
  `product_title` varchar(255) NOT NULL,
  `product_category_id` int(11) NOT NULL,
  `product_price` float NOT NULL,
  `old_price` float NOT NULL,
  `product_quantity` int(11) NOT NULL,
  `product_description` text NOT NULL,
  `short_desc` text NOT NULL,
  `product_image` varchar(255) NOT NULL,
  PRIMARY KEY (`product_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;

-- Structure de la table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0;
                                    
                                

- الملفات الأساسية


من بعد كنمشي wamp/www وكنزيد مجلد جديد كنسميه php_ecommerce كنزيد فيه مجلد كنسميه includes داخل هاد المجلد غادي تزيد 3 ديال المجلدات css و js و fonts منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف bootstrap.min.js ف js منبعد غادي تقوم بتحميل fontawsome وغادي تزيد الملف fontawsome.css ف css والملفات لي fonts فالمجلد fonts لي زدنا من بعد غادي تزيد ملف تسميه header.php فالمجلد includes الكود ديالو هو :

                                    
                                        <?php include("functions.php");?>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hanouti.com</title>
    <link href="includes/css/bootstrap.min.css" rel="stylesheet">
    <link href="includes/css/font-awesome.css" rel="stylesheet">
    <link href="includes/css/main.css" rel="stylesheet">
  </head>
  <body>


   
                                    
                                

- الملف logo.php


فالمجلد includes غادي نزيد ملف نسميه logo.php لي غادي يكون فيه الكود لي كيتضمن القائمة لي غادي تمكن المستخدم من تسجيل الدخول والتسجيل فقاعدة البيانات بالإضافة للpanier الكود ديالوهو :

                                      
                                        <div class="row">
<div class="col-md-4">
    <a href="index.php" style="text-decoration:none;" class="btn btn-link"><span class="text-primary" id="logo">Hanouti<span class="text-danger">.com</span></a>
</div>
<div class="col-md-8">
    <div class="pull-right">
        <ul class="nav navbar-nav">
            <li class="dropdown">
            <a href="#" style="background:#FFF;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compte <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <?php if(isset($_SESSION['logged']) && $_SESSION['logged'] == true):?>
                        <li><a href="logout.php"><i class="fa fa-user"></i> <?php echo $_SESSION['nom'];?></li>
                        <li><a href="logout.php"><i class="fa fa-sign-out"></i> Déconnexion</a></li>
                    <?php else:?>
                        <li><a href="login.php"><i class="fa fa-sign-in"></i> Connexion</a></li>
                        <li><a href="register.php"><i class="fa fa-user-plus"></i> Inscription</a></li>
                    <?php endif;?>
                </ul>
            </li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" style="background:#FFF;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-shopping-cart"></i> Panier <span class="caret"></span></a>
                <ul class="dropdown-menu">
                <?php if(isset($_SESSION['count'])):?>
                    <li><a href="cart.php"><?php echo $_SESSION['count'];?> produit(s)</a></li>
                <?php else:?>
                    <li><a href="cart.php">0 produit(s)</a></li>
                <?php endif;?>
                </ul>
            </li>
        </ul>
    </div>
</div>
</div>
                                      
                                    

- الملف navigation.php


فالمجلد includes غادي نزيد ملف نسميه navigation.php لي غادي يكون فيه الكود لي كيتضمن القائمة ديال المشروع ديالنا الكود ديالوهو :

                                        
                                            <?php 
  $sql = "SELECT * FROM categories";
  $result = query($sql);
?>
<nav class="navbar navbar-default" id="menu">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.php">Acceuil</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" id="category" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Catégories <span class="caret"></span></a>
          <ul class="dropdown-menu" id="drop-menu">
          <?php while($row = fetch_array($result)):?>
            <li><a href="category.php?id=<?php echo $row['cat_id'];?>"><?php echo $row['cat_title'];?></a></li>
            <li role="separator" class="divider"></li>
          <?php endwhile;?>
          </ul>
        </li>
        <li><a href="products.php">Produits</a></li>
        <li><a href="contact.php">Contact</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Recherche">
        </div>
        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
                                        
                                    

- الملف footer.php


فالمجلد includes غادي نزيد ملف نسميه footer.php لي غادي يكون فيه الكود لي كيتضمن footer ديال المشروع ديالنا الكود ديالوهو :

                                        
                                              <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="includes/js/bootstrap.min.js"></script>
  </body>
</html>
                                        
                                    

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