Contacts App ب Axios & Php الجزء الثالت والأخير

Contacts App ب Axios & Php الجزء الثالت والأخير


فهاد الجزء الأخير من Contacts App ب Axios & Php غادي نكملو الملفات لي بقاونا غادي نشوفوا كيفاش نسترجعوا contact واحد من بعد غادي نشوفوا كيفاش نزيدوا الصفحة الرئيسية لي غادي يتعرضوا فيها les contacts كاملين مع روابط التعديل والحذف وفورم الإضافة.

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

1- استرجاع CONTACT واحد من قاعدة البيانات

باش نسترجعوا contact واحد  من قاعدة البيانات غادي نزيدو ملف نسميوه get-contact.php منبعد متزيدو غادي يكون فيه الكود لي كيمكن من :
- استرجاع القيم من قاعدة البيانات وعرضها على شكل json.
الكود لي زدنا هو : 

                                <?php 
include('database/database.php');
    $_POST = json_decode(file_get_contents('php://input'), true);
    $id = htmlspecialchars(trim($_POST['id']));
    $sql = "SELECT * FROM contacts WHERE id='$id'";
    $results = mysqli_query($con,$sql);
    if($results->num_rows > 0){
        while($row = $results->fetch_assoc()){
            echo json_encode($row);
        }
    }else{
        return false;
    }
                            

2- إضافة الصفحة الرئيسية

ف dossier ديال ل projet ديالنا غادي نزيد fichier جديد سميه index.php هادا هو الصفحة الرئيسية ديالنا فيها:
- فورم لي كتمكن من إضافة المعلومات الخاصة ب contact وكل حقل عندو id به غادي نسترجعوه فالملف main.js لي غادي نزيدو منبعد.
- des boutons لي غادي يمكنوا من الإضافة والتعديل بالنسبة ل bouton الخاص بالتعديل غادي يكون مخفي حتى يكليكي المستخدم على رابط التعديل عاد غادي يظهر.
- div عطيناها id results فيها غادي يتعرضوا les contacts ديالنا.
الكود لي زدنا هو :

                                <?php 
    include('includes/header.php');
?>
<div class="container">
    <div class="row mt-4">
        <div class="col-md-6 mx-auto">
            <div class="card bg-light">
                <div class="car-body">
                    <h3 class="card-title p-2 text-center">Contacts</h3>
                    <hr>
                    <div id="message"></div>
                    <div class="p-2">
                        <div class="form-group">
                            <label for="nom">Nom*</label>
                            <input type="text" name="nom" id="nom" class="form-control" placeholder="Entrer le nom">
                            <input type="hidden" name="id" id="id">
                        </div>
                        <div class="form-group">
                            <label for="prenom">Prénom*</label>
                            <input type="text" name="prenom" id="prenom" class="form-control" placeholder="Entrer le prenom">
                        </div>
                        <div class="form-group">
                            <label for="tel">Téléphone*</label>
                            <input type="tel" name="tel" id="tel" class="form-control" placeholder="Entrer le téléphone">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-danger" id="addBtn">Valider</button>
                            <button class="btn btn-warning" style="display:none" id="updateBtn">Modifier</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-6 mx-auto">
            <div class="card">
                <div class="card-body bg-light">
                    <div id="results"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php 
    include('includes/footer.php');
?>
                            

3- إضافة الملف main.js

ف dossier ديال ل projet ديالنا غادي نزيد dossier جديد نسميه js فيه غادي تزيد fichier سميه main.js  فيه :
- كنسترجع الحقول و les boutons بل id ديالهم و div فين غادي يتعرضوا les contacts ورسائل النجاح والفشل.
- كنزيد لل bouton valider ل event click لي ملي كنكليكي عليه كتنفذ ل fonction addContact.
- كنعرض les contacts كاملين ملي كتشارجا الصفحة الرئيسية بواسطة ل fonction getContacts.
- منبعد عندي ل fonction addContact لي كتسترجع القيم من الحقول وكتحقق كانوا خاويين كترض رسالة تنبيه مكانوش كتخدم ب axios لي كيصيفطهم ل fichier add.php لي كيف شفنا كيسترجعهم وكيزيدهم فقاعدة البيانات منبعد كتعرض les contacts كاملين ملي كتشارجا الصفحة الرئيسية بواسطة ل fonction getContacts وكتخوي الفورم.
الكود ديال هاد الجزء:

                                const contactId = document.getElementById('id');
    const contactNom = document.getElementById('nom');
    const contactPrenom = document.getElementById('prenom');
    const contactTel = document.getElementById('tel');
    const results = document.getElementById('results');
    const form = document.getElementById('add-form');
    const updateButton = document.getElementById('updateBtn');
    const addButton = document.getElementById('addBtn');
    const messageBox = document.getElementById('message');

    addButton.addEventListener('click',addContact);
    //get contacts
    document.addEventListener('DOMContentLoaded',getContacts);
    //add contact
    function addContact(){
        if(contactNom.value != "" && contactPrenom.value != "" && contactTel.value != ""){
            axios.post('http://localhost/axios-contacts-app/add.php', {
                nom: contactNom.value,
                prenom: contactPrenom.value,
                tel: contactTel.value
            })
            .then(function (response) {
                // results.innerHTML = response.data;
                getContacts();
                contactNom.value = '';
                contactPrenom.value = '';
                contactTel.value = '';
                messageBox.innerHTML = `
                    ${response.data}
                `;
            })
            .catch(function (error) {
                console.log(error);
            });
        }else{
            messageBox.innerHTML = `
                <div class="alert alert-danger">Veuillez remplir tous les champs</div>
            `;
        }
        
    }
                            

3- إضافة الملف main.js تتمة

- كاين fonction getContacts لي كتسترجع les contacts كاملين كنخدم بل fonction get ديال axios لي كنعطيها الرابط لي كيدي لل fichier get-contacts.php منبعد كنعرض les contacts ف table وكنزيدهم ف div results.
- كاين ل fonction getContact لي كتسترجع contact واحد بل id ديالو كنرسلو ل id لي كيجينا ملي كيكليكي المستخدم على الرابط ديال التعديل للملف get-contact.php لي كيعطينا ل contact كيف قلنا قبل على شكل json منبعد كنعرض القيم فالحقول وكنعرض ل bouton modifier وكنخفي ل bouton valider.
- منبعد كنزيد ل bouton modifier ل event click ولي كينفذ ل fonction لي كتمكن من التعديل فكنسترجع القيم لي فالحقول مع ل id ديال ل contact لي كنزيدو فواحد ل input hiddeen فلفورم وكنرسلهم للملف update.php لي كيدير التعديل ومتنساش تحدد put ك fonction ف axios باش يعرف بلي غادي تدير تعديل.
- منبعد كاين ل fonction deleteContact لي كتاخد ل id ديال ل contact لي كيجيها ملي كيكليكي المستخدم على رابط الحدف وكترسلوا للملف delete.php ولي كتكلف بالحدف ديالو.
الكود ديال الملف هو :

                                    //get contacts
    function getContacts(){
        axios.get('http://localhost/axios-contacts-app/get-contacts.php',)
        .then(function (response) {
            // results.innerHTML = response.data;
            //console.log(response.data);
            results.innerHTML = `
                <table class="table table-responsive table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Téléphone</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${response.data}
                    </tbody>
                </table>       
            `;
        })
        .catch(function (error) {
            console.log(error);
        });
    }
    //get single contact
    function getContact(id){
        axios.post('http://localhost/axios-contacts-app/get-contact.php',{       
            id: id
        })
        .then(function (response) {
            contactNom.value = response.data.nom;
            contactPrenom.value = response.data.prenom;
            contactTel.value = response.data.tel;
            contactId.value = response.data.id;
            updateButton.style.display = "block";
            addButton.style.display = "none";
        })
        .catch(function (error) {
            console.log(error);
        });
    }
    //update contact
    updateButton.addEventListener('click',function(){
        axios.put('http://localhost/axios-contacts-app/update.php', {
            id: contactId.value,
            nom: contactNom.value,
            prenom: contactPrenom.value,
            tel: contactTel.value
        })
        .then(function (response) {
            // results.innerHTML = response.data;
            getContacts();
            contactNom.value = '';
            contactPrenom.value = '';
            contactTel.value = '';
            updateButton.style.display = "none";
            addButton.style.display = "block";
            messageBox.innerHTML = `
                ${response.data}
            `;
        })
        .catch(function (error) {
            console.log(error);
        });
    });
    //delete contact
    function deleteContact(id){
        axios.post('http://localhost/axios-contacts-app/delete.php', {
             id:id
        })
        .then(function (response) {
            // results.innerHTML = response.data;
            getContacts();
            messageBox.innerHTML = `
                ${response.data}
            `;
        })
        .catch(function (error) {
            console.log(error);
        });
    }
                                


بحث في الموقع


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