كيفاش تصاوب contacts app ب ajax و php الجزء الأول


فهاد المشروع البسيط غادي نشوفو كيفاش نصاوبو contacts app ب ajax و php المشروع بسيط الهدف منو هو تعرف كيفاش تسجل وتعدل وتحدف معلومات من قاعدة البيانات بلا مت actualiser الصفحة هنا المستخدم غادي يسجل المتصلين ديالو فقاعدة البيانات غادي يبحث عليهم يعدل ويحدف منهم.

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

1- إضافة قاعدة البيانات

أول حاجة غادي نديرو هي غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها ajax-contacts من بعد غادي نزيد فيها table نسميها contacts هادي هي قاعدة البيانات لي غادي يكونوا فيها المتصلين لي غادي يتعرضوا فالصفحة الرئيسية الكود باش تزيد الجدول فقاعدة البيانات هو :

                                --
-- Structure de la table `contacts`
--

CREATE TABLE `contacts` (
  `id` int(11) NOT NULL,
  `nom` varchar(255) NOT NULL,
  `prenom` varchar(255) NOT NULL,
  `tel` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Index pour la table `contacts`
--
ALTER TABLE `contacts`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT pour les tables exportées
--

--
-- AUTO_INCREMENT pour la table `contacts`
--
ALTER TABLE `contacts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
                            

2- الإتصال بقاعدة البيانات

غادي تمشي ل wamp/www أو xampp/htdocs يلا كنتي خدام ب xampp وغادي تزيد مجلد جديد تسميه ajax-contacts من بعد تزيد فيه 3 مجلدات واحد تسميه database وواحد includes وواحد js من بعد غادي نزيد ملف نسميه db.php فالمجلد database هاد الملف هو لي غادي يمكني من الإتصال بقاعدة البيانات الكود النهائي ديال الملف :

                                <?php
$DB_HOST = 'localhost';
$DB_USER = 'root';
$DB_PASS = '';
$DB_DATABASE = 'ajax-contacts';


$con = mysqli_connect($DB_HOST,$DB_USER,$DB_PASS,$DB_DATABASE);
if(!$con){
    echo 'erreur de connexion';
}
                            

3- الملف add.php

فالمجلد الرئيسي لي هو ajax-contacts زيد ملف جديد سميه add.php هادا الملف لي فيه الكود لي غادي يمكن من إضافة contact لقاعدة البيانات منبعد مكيتحقق من استقبال الإسم والهاتف كيزيد المعلومات فالجدول contacts يلا نجحت الإضافة كيعرض رسالة نجاح منجحتش كيعرض رسالة خطأ الكود ديال الملف هو :

                                <?php
include('database/db.php');
if(isset($_POST['nom']) && isset($_POST['tel']) && isset($_POST['prenom'])){
    $nom = $_POST['nom'];
    $prenom = $_POST['prenom'];
    $tel = $_POST['tel'];
    $query = "INSERT INTO contacts (nom,prenom,tel) values('$nom','$prenom','$tel')";
    if(mysqli_query($con,$query)){
        echo 'Contact Ajouté';
    }else{
        echo 'Erreur Veuillez réessayer';
    }
}
                            

4- الملف get-contacts.php

فالمجلد الرئيسي لي هو ajax-contacts زيد ملف جديد سميه get-contacts.php هادا الملف لي فيه الكود لي غادي يمكن من استرجاع les contacts لي عندنا فقاعدة البيانات منبعد مكنسترجعهم كنعرضهم فجدول ولي غادي يتزاد فالصفحة الرئيسية لي غادي نزيدوها من بعد والأسماء غادي يتعرضو على شكل روابط ملي يكليكي عليه المستخدم غادي يعرض المعلومات الخاصة بداك لcontact وهادشي لي كيديرو الكود jquery لي منبعد فكنسترجع لid ديال ل contact لي كليكا عليه المستخدم وكنرسلوه للملف view.php لي كنسترجعو به المعلومات الخاصة ب contact اختارو المستخدم ولي غادي نزيدوه من بعد الكود ديال الملف هو :

                                    <?php
include('database/db.php');
$query = "SELECT * FROM contacts";
$result = mysqli_query($con,$query);
if(empty($result)){
    die('Aucun contact trouvé');
}
while($row = mysqli_fetch_array($result)){
    echo '<tr>
        <td>'.$row['id'].'</td>
        <td><a data-id="'.$row['id'].'" class="link-nom" href="javascript:void(0)">'.$row['nom'].' '.$row['prenom'].'</a></td>
    </tr>';
}
?>
<script>
$('.link-nom').on('click',function(){
    var id = $(this).attr('data-id');
    $.post('view.php',{id:id},function(data){
        $('#view').html(data);
    });
});
</script>
                                

5- الملف update.php

فالمجلد الرئيسي لي هو ajax-contacts زيد ملف جديد سميه update.php هادا الملف لي فيه الكود لي غادي يمكن من تعديل معلومات contact اختارو المستخدم منبعد مكيتحقق من استقبال الإسم والهاتف ول id كيزيد المعلومات فالجدول contacts يلا نجح التعديل كيعرض رسالة نجاح منجحش كيعرض رسالة خطأ الكود ديال الملف هو :

                                    <?php
include('database/db.php');
if(isset($_POST['nom']) && isset($_POST['tel']) && isset($_POST['prenom']) && isset($_POST['id'])){
    $nom = $_POST['nom'];
    $prenom = $_POST['prenom'];
    $tel = $_POST['tel'];
    $id = $_POST['id'];
    $query = "UPDATE contacts set nom = '$nom',prenom = '$prenom',tel = '$tel' WHERE id = '$id'";
    if(mysqli_query($con,$query)){
        echo 'Contact Modifié';
    }else{
        echo 'Erreur Veuillez réessayer';
    }
}
                                


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

بحث في الموقع


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