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

imadbelasri PHP
PH

فهاد الجزء الثاني من كيفاش تسجل تعدل وتمسح من قاعدة البيانات ب pdo و jquery غادي نكملو الملفات الخاصة بإضافة note لقاعدة البيانات وأيضا لي غادي يمكنو من تعديل ومسح note من قاعدة البيانات.


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


1- الملف app.js

فالمجلد الرئيسي ديالنا لي هو pdo_notes كنزيد فيه مجلد جديد كنسميه js فيه غادي تزيد ملف سميه app.js فيه لكود jquery لي غادي يمكن من إرسال المعلومات لي ترسلو من form لي كتمكن من إضافة note للملف add.php لي غادي نزيدوه من بعد باش يتزادو فقاعدة البيانات من بعد كاين الكود لي كيمكن من عرض les notes لي عندنا فقاعدة البيانات فالملف read.php لي غادي نزيدوه من بعد ثم كاين الكود لي كيمكن من مسح note اختاريناها بالإعتماد على لid ديالها ثم كاين function edit لي غادي تمكنا باش نردو الحقول ديال الجدول لي غادي يعرض les notes قابلة للتعديل ثم كاين function updateName لي كتمكن من تعديل إسم النوت منبعد مكنسترجعوا لid ديالها منبعد كترسل المعلومات الجديدة للملف update.php لي غادي نزيدوه من بعد ونفس الشيء بالنسبة للfonctions لي بقاو لي كيعدلو باقي المعلومات الكود ديال الملف هو :

                                                    
                                                        //ajouter une note
$('#addForm').submit(function(e){
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
    $.ajax({
        url : 'add.php',
        type : 'POST',
        data : formData,
        success:function(data){
            $('#ajax_msg').css('display','block').delay(3000).slideUp(300).html(data);
            document.getElementById('addForm').reset();
        }
    });
});
//afficher toutes les botes
$('#task-list').load('read.php');
//supprimer une note
function deleteNote(id){
    if(confirm("Voulez vous supprimer cette note ?")){
        $.ajax({
            url : 'delete.php',
            type : 'POST',
            data : {id:id},
            success:function(data){
                $('#ajax_msg').css('display','block').delay(3000).slideUp(300).html(data);
                $('#task-list').load('read.php');
            }
        });
    }
}
//rendre les valeurs modifiable
function edit(div){
    div.style.border = "1px solid lavender";
    div.style.padding = "5px";
    div.style.background = "white";
    div.contentEditable = true;
}
//modifier le titre d'une note
function updateName(div,id){
    var data = div.textContent;
    div.style.border = "none";
    div.style.padding = "0";
    div.style.background = "#ececec";
    div.contentEditable = false;
    $.ajax({
        url : 'update.php',
        type : 'POST',
        data : {name:data,id:id},
        success:function(data){
            $('#ajax_msg').css('display','block').delay(3000).slideUp(300).html(data);
        }
    });
}
//modifier la description d'une note
function updateDesc(div,id){
    var data = div.textContent;
    div.style.border = "none";
    div.style.padding = "0";
    div.style.background = "#ececec";
    div.contentEditable = false;
    $.ajax({
        url : 'update.php',
        type : 'POST',
        data : {desc:data,id:id},
        success:function(data){
            $('#ajax_msg').css('display','block').delay(3000).slideUp(300).html(data);
        }
    });
}
//modifier l'etat d'une note
function updateStatus(div,id){
    var data = div.textContent;
    div.style.border = "none";
    div.style.padding = "0";
    div.style.background = "#ececec";
    div.contentEditable = false;
    $.ajax({
        url : 'update.php',
        type : 'POST',
        data : {status:data,id:id},
        success:function(data){
            $('#ajax_msg').css('display','block').delay(3000).slideUp(300).html(data);
        }
    });
}
                                                    
                                                

2- الملف add.php

فالمجلد الرئيسي ديالنا لي هو pdo_notes غادي تزيد ملف سميه add.php فيه لكود لي غادي يمكن من استقبال المعلومات لي ترسلو من الملف app.js لي هما الإسم والوصف من بعد كن lancer requête لي كتمكن من إضافة note لقاعدة البيانات من بعد كتعرض رسالة النجاح أو الفشل الكود ديال الملف هو:

                                                        
                                                            <?php 

include_once 'Database.php';
if(isset($_POST['name']) && isset($_POST['description'])){
    $name = $_POST['name'];
    $desc = $_POST['description'];
    try{
        $query = "INSERT INTO notes(name,description,created_at)
                    VALUES (:name,:descri,now())";
        $statement  = $conn->prepare($query);
        $statement->execute(array(":name"=>$name,":descri"=>$desc));
        if($statement){
            echo "Notes ajoutée";
        }
    }catch(PDOException $ex){
        echo 'erreur'.$ex->getMessage();
    }
}
                                                        
                                                    

3- الملف update.php

فالمجلد الرئيسي ديالنا لي هو pdo_notes غادي تزيد ملف سميه update.php فيه لكود لي غادي يمكن من استقبال المعلومات لي ترسلو من الملف app.js ولي من بعد مكنتحقق منهم ومن ل id ديال النوت لي غادي تعدل كن lancer requête لي كتمكن من تعديل note ثم كنتحقق واش تم التعديل يلا تم كتعرض رسالة النجاح أو الفشل فحالة متمش الكود ديال الملف هو:

                                                        
                                                            <?php 

include_once 'Database.php';
if(isset($_POST['name']) && isset($_POST['id'])){
    $name = $_POST['name'];
    $id = $_POST['id'];
    try{
        $query = "UPDATE notes SET name=:name WHERE id=:id";
        $statement  = $conn->prepare($query);
        $statement->execute(array(":name"=>$name,":id"=>$id));
        if($statement->rowCount() === 1){
            echo "Titre modifiée";
        }else{
            echo "Aucune modification";
        }
    }catch(PDOException $ex){
        echo 'erreur'.$ex->getMessage();
    }
}else if(isset($_POST['desc']) && isset($_POST['id'])){
    $desc = $_POST['desc'];
    $id = $_POST['id'];
    try{
        $query = "UPDATE notes SET description=:description WHERE id=:id";
        $statement  = $conn->prepare($query);
        $statement->execute(array(":description"=>$desc,":id"=>$id));
        if($statement->rowCount() === 1){
            echo "Description modifiée";
        }else{
            echo "Aucune modification";
        }
    }catch(PDOException $ex){
        echo 'erreur'.$ex->getMessage();
    }
}else if(isset($_POST['status']) && isset($_POST['id'])){
    $status = $_POST['status'];
    $id = $_POST['id'];
    try{
        $query = "UPDATE notes SET status=:status WHERE id=:id";
        $statement  = $conn->prepare($query);
        $statement->execute(array(":status"=>$status,":id"=>$id));
        if($statement->rowCount() === 1){
            echo "Status modifié";
        }else{
            echo "Aucune modification";
        }
    }catch(PDOException $ex){
        echo 'erreur'.$ex->getMessage();
    }
}
                                                        
                                                    

4- الملف delete.php

فالمجلد الرئيسي ديالنا لي هو pdo_notes غادي تزيد ملف سميه delete.php فيه لكود لي غادي يمكن من حدف note من قاعدة البيانات من بعد مكنستقبل ل id ديالها لي ترسل لي من لfonction deleteNote لي فالملف app.js منبعد كن lancer requête ديال الحدف ولي يلا تمت بنجاح كنعرض رسالة النجاح متمتش رسالة الفشل الكود ديال الملف هو :

                                                        
                                                            <?php 

include_once 'Database.php';
if(isset($_POST['id'])){
    $id = $_POST['id'];
    try{
        $query = "DELETE FROM  notes WHERE id=:id";
        $statement  = $conn->prepare($query);
        $statement->execute(array(":id"=>$id));
        if($statement){
            echo "Note supprimée";
        }
    }catch(PDOException $ex){
        echo 'erreur'.$ex->getMessage();
    }
}
                                                        
                                                    

دروس ذات صلة

PH

كيفاش تزيد المعلومات فقاعدة البيانات بإستعمال Ajax

فهاد الدرس غادي نقادو واحد المشروع بسيط لي عبارة عن chatbox الهدف هنا ماشي هو نديرو chat ولكن الهدف...


PH

كيفاش تصاوب إختبار بإستعمال PHP الجزء الأول

فهاد الدرس غادي نشوفو كيفاش نديرو نصاوبو واحد الإختبار بسيط هاد الإختبار غادي يطرح الاسئلة على المست...


PH

كيفاش تصاوب إختبار بإستعمال PHP الجزء الثاني

فهاد الدرس لي هو الجزء الثاني ديال كيفاش نقاد إختبار بإستعمال ل php غادي نكملو باقي الصفحات لي غادي...


PH

كيفاش نصاوب blog بل php الجزء الأول

فهاد المشروع غادي نشوفو كيفاش نقادو blog بإستعمال php كما غادي نشوفو كيفاش نسجلو المعلومات ديالنا فق...


PH

كيفاش نصاوب blog بل php الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نشوفو كيفاش نسجلو المعلومات ديالنا فقاعدة البيانات و كيفاش ند...


PH

كيفاش نصاوب blog بل php الجزء الثالث

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


PH

كيفاش نصاوب blog بل php الجزء الرابع

فهاد الجزء الرابع غادي نشوفو كيفاش نزيدو système d'authentification لي غادي يمكن المستخدم من التسجيل...


PH

مشروع Photos Gallery بل PHP الجزء الأول

فهاد الدرس غادي نشوفو كيفاش نصاوبو واحد المشروع لي عبارة عن موقع للصور المستخدم كيدخل كيشاهد الصور و...


PH

مشروع Photos Gallery بل PHP الجزء الثاني

فهاد الجزء الثاني غادي نقادو الملفات لي غادي يمكننا من ربط الإتصال بقاعدة البيانات وغادي نزيدو الملف...


PH

مشروع Photos Gallery بل PHP الجزء الثالث

فهاد الجزء الثالث من المشروع ديالنا غادي نكملو الملفات لي غادي يمكنو من التعامل مع المعلومات الخاصة...