كيفاش تسجل تعدل تمسح من قاعدة البيانات بإستعمال Ajax الجزء الثالت

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

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


1- الملف script.js


فالمجلد js غادي تزيد ملف جديد سميه script.js فيه الكود لي غادي يمكنا باش نرسلو المعلومات لي كاينين فل forms لي كيمكنو من إضافة مستخدم للملف add_contact.php فل form لي كتمكن من الإضافة زدنالها id سميناه addContact فمنبعد مكنظغط على ajouter المعلومات لي دخلت كتمشي للملف بواسطة post("add_contact.php",$(this).serialize()).done$ ونفس الشي بالنسبة للform الخاصة بالتعديل لي كتخد ل id editContact والform الخاص بالحدف لي كاياخد ل id deleteContact الكود ديال الملف هو :

                                    
                                        $('#addContact').on('submit',function(){
    //post data 
    $.post("add_contact.php",$(this).serialize()).done(function(data){
        console.log(data);
        $('#myModal').modal('toggle');
    });
});
$('#editContact').on('submit',function(){
    //post data 
    $.post("edit_contact.php",$(this).serialize()).done(function(data){
        console.log(data);
        $('.editModal').modal('toggle');
    });
});
$('#deleteContact').on('submit',function(){
    //post data 
    $.post("delete_contact.php",$(this).serialize()).done(function(data){
        console.log(data);
    });
});
                                    
                                

2- الملف index.php


الملف الرئيسي ديالنا غادي نزيدوه فالمجلد adresse_book نسميه index.php وفيه الكود الرئيسي ففهاد الجزء الاول منو كاين الكود ديال الform لي كيمكن من إضافة مستخدم للقاعدة البيانات فمنبعد مكيدخل المستخدم المعلومات كترسل للملف script.js لي كيرسلها للملف add_contact.php ومنبعد كتزاد فقاعدة البيانات الكود ديال هاد الجزء هو :

                                    
                                        <?php include('includes/header.php');?>
<?php
include('core/init.php');
?>
<body>
    <div class="row">
        <div class="col-md-10">
            <a class="btn btn-success pull-right"  data-toggle="modal" data-target="#myModal">Ajouter Contact</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Ajouter un contact</h4>
                    </div>
                    <div class="modal-body">
                    <form method="post" id="addContact">
                        <div class="form-group">
                        <label for="recipient-name" class="control-label">Nom:</label>
                        <input type="text" class="form-control" name="nom" id="nom">
                        </div>
                        <div class="form-group">
                        <label for="recipient-name" class="control-label">Prénom:</label>
                        <input type="text" class="form-control" name="prenom" id="prenom">
                        </div>
                        <div class="form-group">
                        <label for="recipient-name" class="control-label">Email:</label>
                        <input type="text" class="form-control" name="email" id="email">
                        </div>
                        <div class="form-group">
                        <label for="recipient-name" class="control-label">Adresse:</label>
                        <input type="text" class="form-control" name="adresse" id="adresse">
                        </div>
                        <div class="form-group">
                        <label for="recipient-name" class="control-label">Ville:</label>
                        <select class="form-control" name="ville" id="ville">
                            <option value="casablanca">Casa</option>
                            <option value="taza">Taza</option>
                            <option value="rabat">Rabat</option>
                            <option value="fes">Fés</option>
                        </select>
                        </div>
                        <div class="form-group">
                        <label for="recipient-name" class="control-label">Tél:</label>
                        <input type="tel" class="form-control" name="phone" id="phone">
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-primary">Ajouter</button>
                        </div>
                    </form>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
                                    
                                

3- الملف index.php تتمة


فهاد الجزء الثاني من الملف index.php كنزيد الكود لي كيمكن من استرجاع لcontacts لي عندنا فقاعدة البيانات وكنعرضهم فجدول منبعد مكن créer l'objet من ل class Database كنعطي لfonction query الrequête لي غادي تنفد من بعد كنسترجع المعلومات بل fonction resultset ولي كنزيدهم ف variable contacts و كن خدم ب foreach باش كنجبد المعلومات ديال كل contact بوحدو وكنعرضهم فالجدول الكود ديال هاد الجزء هو :

                                      
                                        <div id="pageContent">
    <?php
    $db = new Database();
    $db->query('SELECT * FROM contacts');
    $contacts = $db->resultset();
    ?>
    <div class="col-md-8 col-md-offset-2 main panel panel-default" style="margin-top:10px;">
          <h1 class="page-header">Contacts</h1>
            <div class="row placeholders">
              <div class="table-responsive">
                <table class="table table-stripped">
                  <thead>
                    <tr>
                      <th>id</th>
                      <th>Nom</th>
                      <th>Prénom</th>
                      <th>Adresse</th>
                      <th>Ville</th>
                      <th>Téléphone</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php foreach($contacts as $contact):?>
                    <tr>
                      <td><?php echo $contact->id;?></td>
                      <td><?php echo $contact->nom;?></td>
                      <td><?php echo $contact->prenom;?></td>
                      <td><?php echo $contact->adresse;?></td>
                      <td><?php echo $contact->ville;?></td>
                      <td><?php echo $contact->phone;?></td>
                      <td>
                                      
                                    

4- الملف index.php تتمة


فهاد الجزء الثالت والاخير من index.php كاين الكود لي فيه form التعديل ولي عبارة عن modal ملي كنظغط على رمز التعديل كتعرض مملوءة بالمعلومات الخاصة ديال لcontact لي منبعد مكنعدلها ونظغط على modifier كترسل للملف script.js لي كيرسلها للملف edit_contact.php ومنبعد كتزاد فقاعدة البيانات ثم كاين لform ديال الحدف لي كترسل ل id ديال لcontact لي بغينا نحدفو للملف script.js لي كيرسلو للملف delete_contact.php ومنبعد كيتحدف من قاعدة البيانات الكود ديال هاد الجزء هو:

                                        
                                            <a href="#" class="btn btn-warning"  data-toggle="modal" data-target="#editModal<?php echo $contact->id;?>" data-id="<?php echo $contact->id;?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                        <form method="post" id="deleteContact" style="margin-top:10px;">
                            <input type="hidden" class="form-control" name="id" id="id" value="<?php echo $contact->id;?>">
                            <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                        </form>
                      </td>
                      <div class="modal fade editModal" id="editModal<?php echo $contact->id;?>" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" data-cid="<?php echo $contact->id;?>">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                  <h4 class="modal-title" id="myModalLabel">Modifier un contact</h4>
                              </div>
                              <div class="modal-body">
                              <form method="post" id="editContact">
                                  <div class="form-group">
                                  <label for="recipient-name" class="control-label">Nom:</label>
                                  <input type="text" class="form-control" name="nom" id="nom" value="<?php echo $contact->nom;?>">
                                  <input type="hidden" class="form-control" name="id" id="id" value="<?php echo $contact->id;?>">
                                  </div>
                                  <div class="form-group">
                                  <label for="recipient-name" class="control-label">Prénom:</label>
                                  <input type="text" class="form-control" name="prenom" id="prenom" value="<?php echo $contact->prenom;?>">
                                  </div>
                                  <div class="form-group">
                                  <label for="recipient-name" class="control-label">Email:</label>
                                  <input type="text" class="form-control" name="email" id="email" value="<?php echo $contact->email;?>">
                                  </div>
                                  <div class="form-group">
                                  <label for="recipient-name" class="control-label">Adresse:</label>
                                  <input type="text" class="form-control" name="adresse" id="adresse" value="<?php echo $contact->adresse;?>">
                                  </div>
                                  <div class="form-group">
                                  <label for="recipient-name" class="control-label">Ville:</label>
                                  <select class="form-control" name="ville" id="ville">
                                      <option value="casablanca" <?php echo ($contact->ville == 'casablanca') ? 'selected' : '';?>>Casa</option>
                                      <option value="taza" <?php echo ($contact->ville == 'taza') ? 'selected' : '';?>>Taza</option>
                                      <option value="rabat" <?php echo ($contact->ville == 'rabat') ? 'selected' : '';?>>Rabat</option>
                                      <option value="fes" <?php echo ($contact->ville == 'fes') ? 'selected' : '';?>>Fés</option>
                                  </select>
                                  </div>
                                  <div class="form-group">
                                  <label for="recipient-name" class="control-label">Tél:</label>
                                  <input type="tel" class="form-control" name="phone" id="phone" value="<?php echo $contact->phone;?>">
                                  </div>
                                  <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                                  <button type="submit" class="btn btn-primary" id="update">Modifier</button>
                                  </div>
                              </form>
                              </div>
                            </div>
                        </div>
                      </div>
                    </tr>
                    <?php endforeach;?>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
<?php include('includes/footer.php');?>

                                        
                                    

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