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

منذ 3 سنوات imadbelasri Vuejs

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

فل projet بسيط عبارة عن application كتدير إضافة تعديل وحذف des contacts المهم هنا هو نجمعوا بين php و vue js.

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

1- إعداد ل php api و الإتصال بقاعدة البيانات

أول حاجة زيد قاعدة بيانات جديدة سميها contacts فيها table contacts لي فيها الحقول name و tel.

من بعد زيد dossier ف wamp/www أو xampp/htdocs سميه لي بغيتي فيه غادي تزيد dossier سميه database فيه زيد fichier connection.php فيه غادي يكون الكود ديال الإتصال بقاعدة البيانات لي هو :

عرض الكود

                                                    
                                                        //
<?php 
$con = mysqli_connect("localhost","root","","contacts");

2- إضافة contact جديد

غادي نزيدو fichier جديد لي مسؤول على إضافة contact سميه add_contact.php فيه غادي يكون الكود لي كيستقبل المعلومات لي غادي يجيو من الفورم وغادي نزيدوهم فقاعدة البيانات.

الكود هو :

عرض الكود

                                                        
                                                            //
<?php
require './database/connection.php';
// Get the posted data.
$data = file_get_contents("php://input");

if (isset($data) && !empty($data)) {

    $request = json_decode($data);

    $query = "INSERT INTO contacts (name,tel) VALUES ('$request->nom','$request->tel')";

    if (mysqli_query($con, $query)) {
        $contact = [
            'name' => $request->nom,
            'tel' => $request->tel,
            'id'    => mysqli_insert_id($con)
        ];
        echo json_encode($contact);
    } else {
        echo mysqli_error($con);
    }
}

3- تعديل contact

غادي نزيدو fichier جديد لي مسؤول على تعديل contact سميه update_contact.php فيه غادي يكون الكود لي كيستقبل المعلومات لي غادي يجيو من الفورم مع ل id ديال ل contact لي غادي نعدلوا.

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

عرض الكود

                                                        
                                                            //
<?php
require './database/connection.php';

// Get the posted data.
$data = file_get_contents("php://input");

if (isset($data) && !empty($data)) {
    $request = json_decode($data);

    $query = "UPDATE contacts SET name='$request->nom',tel='$request->tel' WHERE id = '$request->id'";

    if (mysqli_query($con, $query)) {
        $contact = [
            'name' => $request->nom,
            'tel' => $request->tel,
            'id'    => $request->id
        ];
        echo json_encode($contact);
    }
}

4- حذف contact

غادي نزيدو fichier جديد لي مسؤول على حدف contact سميه delete_contact.php فيه غادي يكون الكود لي كيستقبل ل id ديال ل contact لي غادي نمسحوا.

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

عرض الكود

                                                        
                                                            //
<?php

require './database/connection.php';

$id = ($_GET['id'] !== null) ? $_GET['id'] : false;


// Delete contact
$query = "DELETE FROM contacts WHERE id ='$id' LIMIT 1";

if (mysqli_query($con, $query)) {
    $message = [
        "deleted" => true
    ];
    echo json_encode($message);
}

5- إسترجاع contact

غادي نزيدو fichier جديد لي مسؤول على إسترجاع contact سميه get_contact.php فيه غادي يكون الكود لي كيستقبل ل id ديال ل contact لي غادي نسترجعوا.

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

عرض الكود

                                                        
                                                            //
<?php

require './database/connection.php';

$id = ($_GET['id'] !== null) ? $_GET['id'] : false;


// Delete contact
$query = "SELECT * FROM contacts WHERE id ='$id' LIMIT 1";

if ($result = mysqli_query($con, $query)) {
    $row = mysqli_fetch_assoc($result);
    $contact = [
        'name' => $row['name'],
        'tel' => $row['tel'],
        'id'  => $row['id'],
    ];
    echo json_encode($contact);
}