موقع covoiturage ب php و mysql الخامس و الأخير


فهاد الجزء الأخير من موقع covoiturage ب php و mysql غادي نكملو الملفات لي بقاونا ولي غادي يمكنوا المستخدم من البحث على des trajets بالإضافة لملفات css وjs لي غادي يمكنوا من إضافة تعديلات على الموقع ديالنا.

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

1- الملف search.php

فالمجلد الرئيسي ديالنا غادي نزيدو ملف جديد سميه search.php فيه كاين الكود لي كيمكن من عرض les trajets لي بحث عليهم المستخدم من بعد مكنستقبلوا مدينة الإنطلاق والوصول لي دخل فالفورم لي كاينة ف index.php فمنبعد مكنفد requête وكنسترجع  les trajets كنعرض المعلومات فبلاصتها الكود ديال الملف هو : 

                                <?php 
include('includes/header.php');
$sql="SELECT * FROM carsharetrips WHERE departure='".$_POST['from']."' AND destination ='".$_POST['to']."'";
?>
<div class="container">
<div id="result"></div>
<?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 align="center"><img src="ajax-loader.gif" id="loader"/></div>
            <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-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>
                    </a>
                </div>
            </div>  
        </div>
    </div>
<?php 
endwhile;
}
?>
<?php endif;?>  
<?php include('includes/footer.php');?>
                            

2- الملف script.js

فالمجلد الرئيسي ديالنا غادي نزيدو ملف جديد سميه script.js غادي نزيدو أولا الكود لي كيمكن من إضافة الخريطة ولي غادي تكون ف div لي عندها ل id map منبعد كاين الكود لي كيزيد autocomplete للحقول يعني ملي كتدخل شي مدينة كتعرض اوتوماتيكيا فالحقول ديالنا منبعد كنديكلاري directionService لي كياخد request لي فيها مدينة الإنطلاق والوصول لي دخل المستخدم فالفورم زائد شنو ل mode ديال السفر هنا حددنا السيارة ومنبعد كيرسم trajet على الخريطة الكود ديال الملف هو :

                                //set the map on div map
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: { lat: 34.0132500, lng: -6.8325500 },
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add autocomplete to inputs
var from = document.getElementById("from");
var to = document.getElementById("to");
var options = {
    types: ['(cities)']
}
var autocomplete1 = new google.maps.places.Autocomplete(from, options);
var autocomplete2 = new google.maps.places.Autocomplete(to, options);
//calculate the distance
// Instantiate a directions service.
var directionsService = new google.maps.DirectionsService;
// Create a renderer for directions and bind it to the map.
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
google.maps.event.addListener(autocomplete1, "place_changed", calcDistance);
google.maps.event.addListener(autocomplete2, "place_changed", calcDistance);

function calcDistance() {
    //draw the direction
    var poly = new google.maps.Polyline({ strokeColor: "#2518DD", strokeWeight: 4 });
    //set from and to values and travel mode
    var request = {
        origin: document.getElementById("from").value,
        destination: document.getElementById("to").value,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    //send request
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            //delete all routes
            directionsDisplay.setDirections({ routes: [] });
            map.setCenter(map.center);
        }
    });

}
                            

3- الملف style.css

فالمجلد الرئيسي ديالنا غادي نزيدو ملف جديد سميه  style.css فيه غادي يكونوا les styles ديالنا لي غادي نحتاجو باش نقادو المظهر ديال الموقع ديالنا الكود ديال الملف هو:

                                /**body style**/

body {
    background: url('road-2517227_1920.jpg') center center fixed;
    background-size: cover;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/**div container style**/

.container {
    margin-top: 10px;
}


/**form style**/

form {
    padding: 10px;
    align-content: center;
    margin-top: 30px;
    margin-left: 15px;
    color: #000;
}

#searchForm {
    color: #FFF;
}


/**div with map id style**/

#map {
    width: 100%;
    height: 300px;
    border: 5px solid #FFF;
    border-radius: 2px;
}


/**div with result id style**/

#result {
    margin-top: 5px;
}


/**div with result class style**/

.result {
    background-color: #FFF;
    padding: 20px;
}


/**checkbox style**/

checkbox {
    color: #000;
}


/**h1 & p tag style**/

.header h1,
p {
    color: #FFF;
    font-weight: bold;
}


/**table style**/

.preview {
    margin-top: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    border: 2px solid #000;
}

img#preview {
    max-width: 100%;
}


/**loader style**/

#loader {
    display: none;
}


/**div body style**/

.trip {
    background-color: rgba(255, 255, 255, 0.9);
    width: 560px;
    height: 100px;
    margin-top: 20px;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #000;
}

.trip p {
    color: #000;
    text-align: left;
    padding: 15px;
    position: absolute;
}

.trip p small {
    padding: 10px;
}

#profileImg {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
                            

4- الملف logout.php

فآخر ملف غادي نزيدوه هو logout.php ولي فيه الكود لي كيمكن المستخدم باش يديكونيكطا الكود ديال الملف هو:

                                    <?php
    session_start();
    unset($_SESSION['user_id']);
    unset($_SESSION['username']);
    unset($_SESSION['email']);
    $_SESSION['logged'] = false;
    session_destroy();
    header("location:index.php");
?>
                                

5- الملف forgotpassword.php

فيلا بغيتي تزيد تطورالموقع يمكنلك تظيف des options آخرين فمثلا ت vérifier لإمايل ديال المستخدم قبل ما يتسجل بالإضافة للملف الخاص باسترجاع كلمة المرور الخاصة بالمستخدم في حالة ما نساها ولي هاد الملف غادي تكون فيه الفورم ونتا يمكنلك تزيد الكود لي كيمكن المستخدم من استرجاعها من بعد مكيدخل الإمايل ديالو فالفورم  وكيترسلو email لل boite ديالو باش ي confirmer من بعد كتوجهو للصفحة الخاصة بتعديل كلمة المرور فهدي فقط إضافة من الإضافات لي يمكنلك تزيدها الفورم هي :

                                    <?php include('includes/header.php');?>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <form method="post" id="forgotpasswordform">
                    <h5 class="text-danger">
                        Mot de passe oublié ? Entrer votre email adresse: 
                    </h5>
                    <div class="form-group">
                        <label for="forgotemail">Email:</label>
                        <input class="form-control" type="email" name="forgotemail" id="forgotemail" placeholder="Email" maxlength="50">
                    </div>
                    <button type="button" class="btn btn-success">
                        Valider
                    </button>  
                </form>
            </div>              
        </div>
    </div>
</div>
<?php include('includes/footer.php');?>
                                


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

بحث في الموقع


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