CRUD application ب php & vuejs الجزء الثاني

imadbelasri Vuejs
VS

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص ب vue js من بعد ما قادينا ل api ديالنا فالجزء الأول.

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

1- إسترجاع les contacts كاملين

غادي نزيدو fichier جديد لي مسؤول على إسترجاع
les contacts كاملين سميه getContacts.php فيه غادي يكون الكود لي كيسترجع les contacts وكنعرضهم على شكل json.

الكود ديال الملف هو :

                                                    
                                                        //
<?php 
require('./database/connection.php');
$query = "SELECT * FROM contacts";
$result = mysqli_query($con,$query);

$contacts = [];

if($result = mysqli_query($con,$query))
{
  $i = 0;
  while($row = mysqli_fetch_assoc($result))
  {
    $contacts[$i]['id']    = $row['id'];
    $contacts[$i]['name'] = $row['name'];
    $contacts[$i]['tel'] = $row['tel'];
    $i++;
  }
  echo json_encode($contacts);
}

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

من بعد غادي نزيدوا dossier جديد سميه js فيه زيد ملف main.js فيه كن créer l'objet من la classe Vue منبعد ف data عندي array contacts لي غادي تاخذ les contacts كاملين وعندي أيضا objet contact لي غادي نحتاجوه فالتعديل.

من بعد ف created يعني فاش كتشارجا la page كنفذ ل fonction getContacts لي كنسترجع بها les contacts كاملين.

منبعد عندي فل methods ل fonction getContacts لي كنسترجع بها les contacts وكنعطيهم لل array contacts لي زدنا ف data وهادشي كنديرو بإستعمال axios.

من بعد كاين deleteContact لي كتاخذ ل id ديال ل contact لي غادي تمسح وبالنسبة ل Swal هي فقط مكتبة لي كتمكنا من عرض رسائل ديال تأكيد الحذف.


منبعد عندي addContact لي كنزيد بها contact و updateContact لي كتعدل contact و getContact لي كنسترجع بها contact بل id ديالو وكنعطيه ل objet contact لي زدنا ف data.

الكود ديال الملف هو :

                                                        
                                                            //
new Vue({
    el : "#app",
    data : {
        contacts : [],
        contact : {id : '',name : '',tel : ''},
    },
    created() {
        this.getContacts();
    },
    methods: {
        getContacts(){
            axios.get('http://localhost/vue-php-ajax/getContacts.php')
                .then(response => this.contacts = response.data)
                .catch(err => console.log(err));  
        },
        deleteContact(id){
            Swal.fire({
                title: 'Vous êtes sûr ?',
                text: "Voulez vous vraiment supprimer ce contact",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText : 'Annuler'
            }).then((result) => {
                if (result.value) {
                    axios.delete('http://localhost/vue-php-ajax/delete_contact.php?id=' + id)
                        .then(response => {
                            Swal.fire(
                                'Supprimé !',
                                'succés'
                            ).then(() => {
                                this.contacts = this.contacts.filter(contact => {
                                    return contact.id !== id;
                                })
                            })
                        })
                        .catch(err => console.log(err));  
                }
            })
        },
        addContact(){
            axios.post('http://localhost/vue-php-ajax/add_contact.php',{
                nom : this.contact.name,
                tel : this.contact.tel
            })
                .then(response => {
                    Swal.fire(
                        'Ajouté !',
                        'succés'
                    ).then(() => {
                        this.contacts.push(response.data);
                        $('#addContact').modal('hide')
                    })
                })
                .catch(err => console.log(err));  
        },
        updateContact() {
            axios.put('http://localhost/vue-php-ajax/update_contact.php', {
                id : this.contact.id,
                nom: this.contact.name,
                tel: this.contact.tel
            })
                .then(response => {
                    Swal.fire(
                        'Modifié !',
                        'succés'
                    ).then(() => {
                        this.getContacts();
                        $('#updateContact').modal('hide')
                    })
                })
                .catch(err => console.log(err));
        },
        getContact(id) {
            axios.post('http://localhost/vue-php-ajax/get_contact.php?id=' + id)
                .then(response => {
                    this.contact = response.data;
                })
                .catch(err => console.log(err));  
        }
    },
})

3- إضافة الملف header.php

من بعد غادي نزيدوا dossier جديد سميه includes فيه زيد ملف سميه  header.php فيه غادي يكون عندنا رابط  ملف css و القائمة الرئيسية.

الكود ديال الملف هو :

                                                        
                                                            //
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>VUE PHP</title>
</head>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">VUE PHP</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Ajouter</a>
                </li>
            </ul>
        </div>
    </nav>
<body>

4- إضافة الملف footer.php

من بعد دائما ف includes زيد ملف سميه  footer.php فيه غادي يكونوا عندنا روابط ملفات  javascript لي غادي نحتاجوا بما فيهم vue js و axios و sweet alert.

الكود ديال الملف هو :

                                                        
                                                            //
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <script src="./js/main.js"></script>
</body>
</html>

5- إضافة الملف index.php

من بعد ف dossier ديال ل projet  زيد fichier جديد سميه index.php لي هو الصفحة الرئيسية ديالنا لي فيها كنسترجع les contacts من ل array contacts وكنخدم بل boucle for باش كنعرضهم.

منبعد عندي رابط الإضافة لي فاش كنضغط عليه كتطلع ل modal ديال الإضافة ولي فاش كنضغط على زر الإضافة كتنفذ ل fonction addContact لي سبق و زدنا.


منبعد عندي رابط التعديل لي فاش كنضغط عليه كتطلع ل modal ديال التعديل لي كتعرض ل contact ولي فاش كنضغط على زر التعديل كتنفذ ل fonction updateContact لي سبق و زدنا.

منبعد عندي رابط الحذف لي فاش كنضغط عليه كتنفذ ل fonction deleteContact لي سبق و زدنا.


الكود ديال الملف هو :

                                                        
                                                            //
<?php include('./includes/header.php'); ?>
<div id="app">
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-8 mx-auto">
                <div class="p-3">
                    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addContact">Ajouter</button>
                </div>
                <div class="card card-primary">
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Nom & Prénom</th>
                                    <th>Téléphone</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody v-for="(contact,index) in contacts">
                                <tr key="index">
                                    <td scope="row">{{contact.name}}</td>
                                    <td>{{contact.tel}}</td>
                                    <td>
                                        <a @click="getContact(contact.id)"
                                            data-toggle="modal" data-target="#updateContact"
                                            class="btn btn-sm btn-warning">Modifier</a>
                                        <a @click="deleteContact(contact.id,index)" class="btn btn-sm btn-danger">Supprimer</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Add Modal -->
    <div class="modal fade" id="addContact" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ajouter un contact</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="form-group">
                            <input type="text" placeholder="Nom & Prénom" v-model="contact.name" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="Téléphone" v-model="contact.tel" class="form-control">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-sm btn-success" @click="addContact()">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Update Modal -->
    <div class="modal fade" id="updateContact" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier un contact</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="form-group">
                            <input type="text" placeholder="Nom & Prénom" v-model="contact.name" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="Téléphone" v-model="contact.tel" class="form-control">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-sm btn-success" @click="updateContact()">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include('./includes/footer.php'); ?>
السابق التالي

دروس ذات صلة

VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...