موقع covoiturage ب php و mysql الجزء الثاني


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

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

1- الملف profile.js

فالمجلد الرئيسي ديال ال projet ديالنا كنزيد ملف جديد كنسميه profile.js في الكود لي كيمكن من استرجاع الصورة لي اختار المستخدم من بعد مكنسترجع ل input file لي فالفورم لي فالملف profile.php ولي شفنا فالجزء السابق وكنسترجع ل fichier وكنtester type ديالو واش image مكنش كنعرض erreur message فل p tag لي عندها id message كانت image كنعرضها فال img لي عندها id preview بواسطة ل fonction imageLoaded منبعد عندي الكود لي ملي لمستخدم كيكليكي على valider فالفورم كنسترجع  ل fichier وكنtester type ديالو واش image مكنش كنعرض erreur message فل p tag لي عندها id message كانت image كنرسلها للملف updateprofilepic.php لي غادي نزيدوه من بعد ولي غادي يتكلف بالتعديل ديال الصورة وكنعرض رسالة النجاح ولا الفشل فل p tag  لي عندها id message الكود ديال الملف هو:

                                // Function to preview image after validation
$(function() {
    $("#img").change(function() {
        $("#message").empty();
        file = this.files[0];
        var image = file.type;
        var types = ["image/jpeg", "image/png", "image/jpg"];
        if ($.inArray(image, types) == -1) {
            $("#message").html("<div class='alert alert-danger'>Format non accépté!</div>");
            return false;
        } else {
            var reader = new FileReader();
            reader.onload = imageLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageLoaded(event) {
    $('#preview').attr('src', event.target.result);
};

//Update picture
$("#updateprofileimage").submit(function(event) {
    event.preventDefault();
    //hide message
    if (!file) {
        $("#message").html('<div class="alert alert-danger">Veuillez choisir une photo!</div>');
        return false;
    }
    var imageUploded = file.type;
    var typesAccepted = ["image/jpeg", "image/png", "image/jpg"];
    if ($.inArray(imageUploded, typesAccepted) == -1) {
        $("#message").html('<div class="alert alert-danger">Format invalid!</div>');
        return false;
    } else {
        $.ajax({
            url: "updateprofilepic.php",
            type: "POST",
            data: new FormData(this),
            contentType: false, // The content type used when sending data to the server.
            cache: false, // To unable request pages to be cached
            processData: false, // To send DOMDocument or non processed data file it is set to false
            success: function(data) {
                if (data) {
                    $("#message").html(data);
                } else {
                    location.reload();
                }

            },
            error: function() {
                $("#message").html("<div class='alert alert-danger'>Erreur réessayer.</div>");
            }
        });
    }

});
                            

2- updateprofilepic.php

دائما فالمجلد الرئيسي ديال ال projet ديالنا كنزيد ملف جديد كنسميه updateprofilepic.php فيه الكود لي كيمكن من استرجاع الصورة لي جاتنا من الملف profile.js منبعد كنسترجع ل extension ديالها وكن créer المجلد فين غادي تزاد لي هو photos_profile منبعد كنتحقق يلا تم تحميل الصورة فالمجلد كنعدل الصورة ديال المستخدم من بعد مكنسترجعوا بل id ديالو الكود ديال الملف هو:

                                <?php
session_start();
include('database/connection.php');
$id = $_SESSION['user_id'];
$name = $_FILES['photo']['name'];
$extension = pathinfo($name,PATHINFO_EXTENSION);
$folder = "photos_profile/".md5(time()).".$extension";
$temp_name = $_FILES['photo']['tmp_name'];
if(move_uploaded_file($temp_name,$folder)){
    $sql = "UPDATE users SET photo='$folder' WHERE user_id='$id'";
    $result = mysqli_query($con, $sql);
    if(!$result){
        $message = '<div class="alert alert-danger">Erreur réessayer plutard!</div>';
        echo $message;
    }else{
        $message = '<div class="alert alert-success">Photo de profile ajoutée avec succés!!</div>';
        echo $message; 
    }
}
                            

3- الملف add.php

فالمجلد الرئيسي ديالنا زيد ملف جديد سميه add.php فيه الفورم لي غادي تمكن المستخدم من إضافة trajet جديد لقاعدة البيانات فهنا غادي نخدمو ب ajax باش نزيدو المعلومات فقاعدة البيانات فالفورم عطيناها id addTrip ولي به غادي نسترجعوا المعلومات لي فالفورم الكود ديال الملف هو :

                                <?php include('includes/header.php');?>
<?php
if(!isset($_SESSION['user_id'])){
    header("location:login.php");
}
?>
<div class="container">
<div id="result"></div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <form method="post" id="addTrip">
                    <h3 class="text-info">Ajouter un trajet</h3>
                    <hr>
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div id="map">

                            </div>
                        </div>    
                    </div>
                    <hr>
                        <div class="form-group">
                            <label for="from">Départ:</label>
                            <input class="form-control" type="text" name="from" id="from" placeholder="Départ" maxlength="30">
                        </div>
                        <div class="form-group">
                            <label for="to" class="">Destination:</label>
                            <input class="form-control" type="text" name="to" id="to" placeholder="Destination" maxlength="30">
                        </div>
                        <div class="form-group">
                            <label for="price" class="">Prix par passager:</label>
                            <input class="form-control" type="number" name="price" id="price" placeholder="Prix" maxlength="30">
                        </div>
                        <div class="form-group">
                            <label for="places" class="">Nombre de place:</label>
                            <input class="form-control" type="number" name="places" id="places" placeholder="Places" maxlength="50">
                        </div>
                        <div align="center"><img src="ajax-loader.gif" id="loader"/></div>
                        <div class="form-group">
                            <label for="dateD" class="">Date de départ:</label>
                            <input class="form-control" type="date" name="dateD" id="dateD" placeholder="Date" maxlength="30"></div>
                        <div class="form-group">
                            <label for="time" class="">Heure:</label>
                            <input class="form-control" type="time" name="time" id="time" placeholder="Heure" maxlength="30">
                        </div>
                        <div class="form-group">
                            <label for="desc">Plus d'infos: </label>
                            <textarea name="desc" class="form-control" rows="5" maxlength="300"></textarea>
                        </div>
                        <div class="form-group">
                            <input class="btn btn-success" name="signup" type="submit" value="Valider">
                        </div>
                </form>
            </div>              
        </div>
    </div>
</div>
<?php include('includes/footer.php');?>
                            

4- الملف addTrip.js

دائما فنفس المجلد كنزيد ملف جديد addTrip.js فاولا باش تخدم بخرائط غوغل خصك تجيب clé ديالك راه سبق شرحت كيفاش فهاد الدرس فنرجعو للملف ديالنا فأول حاجة كن créer l'objet من la classe Geocoder ولي كتمكني باش نسترجع الإحداثيات ديال  المدن لي دخل المستخدم فالحقول départ و destination  من بعد ملي كيدير المستخدم submit للفورم المعلومات كنزيدهم ف variable data وكنسترجع الإحداثيات ديال départ بل fonction getAddTripDepCoord وكنزيدهم فالجدول data ونفس الشي بالنسبة للحقل destination ولي كتديرو ل fonction getAddTripDestCoord منبعد مكنسترجع جميع المعلومات كنخدم ب fonction sendTripData باش كنرسلهم للملف addTrip.php لي كيضيفهم لقاعدة البيانات ولي يلا نجحت العملية كيعرض رسالة نجاح أو الفشل الكود ديال الملف هو :    

                                    var geocoder = new google.maps.Geocoder();
var fromLong, fromLat, destLong, destLat;
var data;
$('#addTrip').on('submit', function(e) {
    $("#loader").css("display", "block");
    e.preventDefault();
    data = $(this).serializeArray();
    getAddTripDepCoord();
});

function getAddTripDepCoord() {
    geocoder.geocode({
        "address": document.getElementById('from').value
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            fromLong = results[0].geometry.location.lng();
            fromLat = results[0].geometry.location.lat();
            data.push({ name: 'departureLongitude', value: fromLong });
            data.push({ name: 'departureLatitude', value: fromLat });
            getAddTripDestCoord();
        } else {
            getAddTripDestCoord();
        }
    });
}

function getAddTripDestCoord() {
    geocoder.geocode({
            "address": document.getElementById("to").value
        },
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                destLong = results[0].geometry.location.lng();
                destLat = results[0].geometry.location.lat();
                data.push({ name: 'destinationLongitude', value: destLong });
                data.push({ name: 'destinationLatitude', value: destLat });
                sendTripData();
            } else {
                sendTripData();
            }

        }
    )
};

function sendTripData() {
    console.log(data);
    $.ajax({
        url: "addTrip.php",
        data: data,
        type: "POST",
        success: function(response) {
            if (response) {
                $("#loader").css("display", "none");
                $('#result').html(response);
                $('#addTrip')[0].reset();
            } else {
                //empty form
                $('#addTrip')[0].reset();
            }
        },
        error: function() {
            $("#result").html("<div class='alert alert-danger'>Erreur réessayer plutard.</div>");

        }
    });
}
                                

5- الملف addTrip.php

فالمجلد الرئيسي ديال المشروع ديالنا كنزيد ملف كنسميه addTrip.php لي فيه الكود لي كيمكن المستخدم من إضافة المعلومات الخاصين ب trajet ولي جاونا كيف سبق وشفنا من الملف addTrip.js فمن بعد مكنسترجع كل حقل بوحدو كنتحقق بلي حتى شي حقل ما خاوي يلا كان خاوي كنزيد رسالة فجدول سميتو errors وكنعرض الرسائل لي فيه منبعد كنزيد المعلومات فقاعدة البيانات نجحت العملية كنعرض رسالة نجاح منجحتش كنعرض الرسائل ديال الخطأ الكود ديال الملف هو :

                                    <?php
include('database/connection.php');
session_start();
$errors = "";
$from = filter_var($_POST["from"], FILTER_SANITIZE_STRING);  
$to = filter_var($_POST["to"], FILTER_SANITIZE_STRING);
$price = filter_var($_POST["price"], FILTER_SANITIZE_STRING);
$date = filter_var($_POST["dateD"], FILTER_SANITIZE_EMAIL);
$time = isset($_POST["time"]) ? $_POST['time'] : "";
$desc = filter_var($_POST["desc"], FILTER_SANITIZE_STRING); 
$places = filter_var($_POST["places"], FILTER_SANITIZE_STRING); 
$departLat = isset($_POST["departureLatitude"]) ? $_POST["departureLatitude"] : "";
$departLong =  isset($_POST["departureLongitude"]) ? $_POST["departureLongitude"] : "";
$destLat =  isset($_POST["destinationLatitude"]) ? $_POST["destinationLatitude"] : "";
$destLong =  isset($_POST["destinationLongitude"]) ? $_POST["destinationLongitude"] : "";
if(empty($from)){
    $errors.= '<div class="alert alert-danger">Veuillez entrer le départ</div>';
}
if(empty($to)){
    $errors.= '<div class="alert alert-danger">Veuillez entrer la destination</div>';
}
if(empty($price)){
    $errors.= '<div class="alert alert-danger">Veuillez entrer le prix</div>';
}
if(empty($date)){
    $errors.= '<div class="alert alert-danger">Veuillez entrer la date</div>';
}
if(empty($time)){
    $errors.= '<div class="alert alert-danger">Veuillez entrer l\'heure</div>';
}
$to = mysqli_real_escape_string($con, $to);
$from = mysqli_real_escape_string($con, $from);
$price = mysqli_real_escape_string($con, $price);
//$password = md5($password);
$desc = mysqli_real_escape_string($con, $desc);
if($errors){
    echo '<div class="row"><div class="col-md-4 col-md-offset-4">'.$errors.'</div></div>';
}else{
    $sql = "INSERT INTO carsharetrips (`user_id`,`departure`, `departureLat`,`departLong`,`destination`, `destinationLat`, `destLong`, `price`, `seatsavailable`,`date`, `time`,`comments`) VALUES ('".$_SESSION['user_id']."', '$from','$departLat','$departLong','$to','$destLat','$destLong','$price','$places','$date','$time','$desc')";   
    $result = mysqli_query($con, $sql);
    if(!$result){
        echo '<div class="row"><div class="col-md-4 col-md-offset-4"><div class="alert alert-danger">Erreur réessayer!</div></div>'; 
    }else{
        echo '<div class="row"><div class="col-md-4 col-md-offset-4"><div class="alert alert-success">Trajet ajouté avec succés!</div></div>'; 
    }
}
?>
                                


بحث في الموقع


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