موقع covoiturage ب php و mysql الجزء الرابع


فهاد الجزء الرابع من  موقع covoiturage ب php و mysql غادي نكملو الملفات لي بقاو ولي غادي يمكنوا من عرض les trajets كاملين لي عندنا فقاعدة البيانات بالإضافة للملف لي غادي يمكن من مشاهدة trajet اختارو المستخدم كما غادي نزيدو ملفات الصفحة الرئيسية ولي غادي تكون فيها الفورم لي كتمكن المستخدم من  البحث على trajet معين. 

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

1- الملف trips.php

فالمجلد الرئيسي ديالنا غادي نزيدو ملف جديد سميه trips.php فيه كاين الكود لي كيمكن من عرض les trajets لي عندنا فالجدول carsharetrips من بعد مكنفد requête وكنسترجع  les trajets كنعرض المعلومات فبلاصتها الكود ديال الملف هو :

                                <?php 
include('includes/header.php');
$sql="SELECT * FROM carsharetrips order by date DESC";
?>
<div class="container">
<?php if($result = mysqli_query($con, $sql)):?>
<?php if(mysqli_num_rows($result) > 0){
    while($row = mysqli_fetch_array($result)):?>
    <div class="row" align="center">
        <div class="col-md-8 col-md-offset-2">
            <div class="trip">
                <div class="row">
                    <a href="viewTrip.php?id=<?php echo $row['trip_id'];?>">
                        <div class="col-md-8">
                            <p>
                                <span class="text-info">Départ : </span><small><?php echo $row["departure"];?></small><br>
                                <span class="text-info">Destination :</span><small><?php echo $row["destination"];?></small><br>
                                <span class="text-info">Le :</span><small><?php echo $row["date"];?> à <?php echo $row["time"];?></small>
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p>
                                <span class="text-danger"><?php echo $row["price"].' '.'DH';?></span><br>
                                <span class="text-success"><?php echo $row["seatsavailable"].' '.'place(s)';?></span><br>
                            </p>
                        </div>
                    </a>
                </div>
            </div>  
        </div>
    </div>
<?php 
endwhile;
}
?>
<?php endif;?>  
<?php include('includes/footer.php');?>
                            

2- الملف viewTrip.php

فالمجلد الرئيسي ديالنا غادي نزيدو ملف جديد سميه viewTrip.php فيه كاين الكود لي كيمكن من عرض  trajet اختارو المستخدم  فمن بعد مكنفد requête وكنسترجع  trajet بالإضافة للمعلومات الخاصة بالمستخدم لي زادو كنعرض المعلومات فبلاصتها الكود ديال الملف هو :

                                <?php 
include('includes/header.php');
$sql="SELECT * FROM users u,carsharetrips c WHERE c.user_id = u.user_id AND trip_id = '".$_GET['id']."'";
?>
<div class="container">
<div id="result"></div>
<?php if($result = mysqli_query($con, $sql)):?>
<?php if(mysqli_num_rows($result) > 0){
    $row = mysqli_fetch_array($result);?>
    <div class="row" align="center">
        <div class="col-md-8 col-md-offset-2">
           <div align="center"><img src="ajax-loader.gif" id="loader"/></div>
           <div class="trip">
                <div class="row">
                    <div class="col-md-4">
                        <p>
                           <img src="<?php echo $row['photo'];?>" height="80" width="100" alt="" id="profileImg">
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p>
                            <span class="text-info">Nom : </span><small><?php echo $row["first_name"];?></small><br>
                            <span class="text-info">Prénom :</span><small><?php echo $row["last_name"];?></small><br>
                            <span class="text-info">Tél :</span><small><?php echo $row["phonenumber"];?></small>
                        </p>
                    </div>
                </div>
            </div>  
            <div class="trip">
                <div class="row">
                    <div class="col-md-8">
                        <p>
                            <span class="text-info">Départ : </span><small><?php echo $row["departure"];?></small><br>
                            <span class="text-info">Destination :</span><small><?php echo $row["destination"];?></small><br>
                            <span class="text-info">Le :</span><small><?php echo $row["date"];?> à <?php echo $row["time"];?></small><br>
                        </p>
                    </div>
                    <div class="col-md-2">
                        <p>
                            <span class="text-danger"><?php echo $row["price"].' '.'DH';?></span><br>
                            <span class="text-success"><?php echo $row["seatsavailable"].' '.'place(s)';?></span><br>
                        </p>
                    </div>
                </div>
            </div>  
        </div>
    </div>
<?php 
}
?>
<?php endif;?>  
<?php include('includes/footer.php');?>
                            

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

من بعد فالمجلد الرئيسي غادي تزيد فيه مجلد سميه includes منبعد غادي تزيد فيه ملف تسميه header.php و آخر تسميه footer.php فالملف header.php عندنا الروابط ديال ملفات css بالإضافة للقائمة لي كتمكن المستخدم من التنقل بين الصفحات الكود ديالو هو :

                                <?php 
include('./database/connection.php');
//Start session
session_start();
?>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav role="navigation" class="navbar navbar-default">
          <div class="container-fluid">
              <div class="navbar-header">
                  <a href="index.php" class="navbar-brand">Covoiturage.com</a>
                  <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  
                  </button>
              </div>
              <div class="navbar-collapse collapse" id="navbarCollapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="trips.php">Trajets</a></li>
                    <li><a href="add.php">Ajouter</a></li>
                    <li><a href="#">Aide</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                  <?php if(isset($_SESSION['logged']) && isset($_SESSION['user_id'])):?>
                    <li><a href="profile.php" title="profile"><?php echo isset($_SESSION['username']) ? $_SESSION['username'] : ""?></a></li>
                    <li><a href="logout.php">Déconnexion</a></li>
                    <li><a href="mytrips.php">Mes trajets</a></li>
                  <?php else:?>
                    <li><a href="login.php">Connexion</a></li>
                    <li><a href="register.php">Inscription</a></li>
                  <?php endif;?>
                  </ul>
              </div>
          </div>
    </nav>
                            

4- الملف footer.php

دائما فincludes الملف footer.php  فيه الروابط مع ملفات js بالإضافة للرابط لي كيمكنك من استخدام خرائط غوغل ولي غادي تزيد فيه ل clé ديالك الكود ديالو هو :

                                    <div class="footer">
    <div class="container">
        <p class="lead text-center" style="color:#FFF;">darija-coding.com  © 2016-<?php $today = date("Y"); echo $today?>.</p>
    </div>
</div>
<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=votre clé&libraries=places"></script>
    <script src="script.js"></script>
    <script src="profile.js"></script>
    <script src="addTrip.js"></script>
    <script src="editTrip.js"></script>
    </body>
</html>
                                

5- الملف index.php

فالمجلد الرئيسي ديالنا غادي نزيدو ملف جديد سميه index.php ولي هو الصفحة الرئيسية ديالنا فيه كاين الكود لي كيمكن المستخدم من البحث على trajet منبعد مكيدخل مدينة الإنطلاق والوصول ولي كتصيفط المعلومات للملف search.php ولي غادي نزيدوه من بعد ثم عندنا واحد div لي عندها ل id map ولي غادي تكون فيها الخريطة الكود ديال الملف هو :

                                    <?php include('includes/header.php');?>
    <div class="container">
        <div class="row" align="center">
            <div class="col-md-8 col-md-offset-3 header">
                <h1 class="text-left">En voiture !</h1>    
                <p class="text-left lead">Prenez la route en bonne compagnie.</p>
            </div>    
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-3">
                <form action="search.php" method="post" class="form-horizontal" id="searchForm">
                    <div class="form-group">
                        <label for="">Départ</label>
                        <input type="text" class="form-control" name="from" id="from" placeholder="Départ">
                    </div>
                    <div class="form-group">
                        <label for="">Destination</label>
                        <input type="text" class="form-control" name="to" id="to" placeholder="Arrivée">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success">Recherche</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div id="map">

                </div>
            </div>    
        </div>
    </div>
<?php include('includes/footer.php');?>
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد