كيفاش تسجل تعدل وتمسح من قاعدة البيانات ب pdo و jquery الجزء الثاني
فهاد الجزء الثاني من كيفاش تسجل تعدل وتمسح من قاعدة البيانات ب 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();
}
}