1. مقدمة
يوجد اليوم عدد لا بأس به من تطبيقات الويب، مثل Backpack وBlinksale وGmail، التي تدمج تكنولوجيا قواعد البيانات مع AJAX. هذا التكامل له تأثير كبير على تطبيقات الويب وتجربة المستخدم من خلال توفير تقنية قوية للتواصل مع قاعدة البيانات دون تحديث المتصفح - مما يعني أنه يمكن نقل البيانات في الوقت الفعلي بينما يواصل المستخدم التفاعلات الأخرى.
ستركز هذه المقالة على آلية تكامل التكنولوجيا المذكورة أعلاه. يتم أيضًا توفير كود المصدر المرجعي الكامل. هذا المثال عبارة عن تطبيق بسيط لتسجيل الوظائف حيث يحتوي كل مسمى وظيفي على عنوان ووصف وتاريخ - مما يسمح للمستخدمين بإضافة المسميات الوظيفية وتحريرها وحذفها. كل هذه هي العمليات الأساسية التي تقوم بها عند العمل مع بيانات سجل قاعدة البيانات، ولكن هذا التطبيق يذهب إلى أبعد من ذلك. يمكن تغيير المسمى الوظيفي إلى نموذج قابل للتحرير - سيتم حفظه أو حذفه من قاعدة البيانات وعرضه في حالته الجديدة دون تحديث المتصفح ومقاطعة تشغيل المستخدم.
في هذه المقالة، أفترض أن لديك فهمًا أساسيًا لـ AJAX وMySQL وPHP، أو لغة مشابهة من جانب الخادم. إذا لم تقم بإنشاء كائن طلب XML HTTP بعد، فيمكنك الرجوع إلى مقالتي "كيفية استخدام AJAX" أولاً. بعد ذلك، دعونا أولاً نناقش مشكلة قاعدة البيانات.
2. إنشاء قاعدة البيانات
أول ما عليك فعله هو إنشاء جداول قاعدة بيانات لتخزين البيانات الخاصة بهذه المواضع. لقد قمت بإنشاء جدول MySQL يسمى informit_ajax - يحتوي على حقول المعرف والعنوان والوصف والتاريخ - وهذه كلها متغيرات ستظهر بشكل متكرر في هذه المقالة. إليك رمز إنشاء الجدول:
CREATE TABLE ′informit_ajax′ (
"id" int(11) ليست زيادة تلقائية فارغة،
"التاريخ" التاريخ والوقت ليس فارغًا الافتراضي "0000-00-00 00:00:00"،
النص الطويل "الوصف" ليس فارغًا،
"العنوان" varchar(100) ليس افتراضيًا فارغًا ''،
المفتاح الأساسي ("المعرف")
) TYPE=MyISAM;
يمكنك تنفيذ هذا الرمز باستخدام أي أداة استعلام MySQL أو اللغة المستخدمة لتطوير التطبيق. بمجرد إعداد قاعدة البيانات، فإن الخطوة التالية هي إنشاء ملفات الواجهة الأمامية التي تقدم طلبات إلى الواجهة الخلفية لـ PHP.
3. قم بتقديم طلب
ملف الفهرس HTML هنا عبارة عن عنصر نائب بسيط للبيانات - سيتم تحليله من قاعدة البيانات. يحتوي هذا الملف على مراجع لملفات JavaScript وCSS، ويحتوي أيضًا على معالج onload الذي يقدم الطلب الأول وثلاث علامات div:
التخطيط - يستخدم لتوسيط
تحميل محتوى الصفحة - يقوم بتحميل الرسائل أثناء تحميل البيانات المطلوبة، والتي سيتم استلامها بواسطة كائن HTTPRequest
· المنشورات المستخدمة لعرض كل بيانات الوظيفة التي تم تحليلها
<head>
＜title＞كيفية دمج قاعدة البيانات مع AJAX＜/title＞
＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/الرأس＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="layout" align="center">
＜div id="المشاركات"＞＜/div＞
＜p＞＜input type="button" value="add a post" onmousedown="javascript:makeRequest('services/post.php?method=save');" /＞＜/p＞
＜p＞＜div id="loading"＞＜/div＞＜/p＞
＜/div＞
＜/body＞
يتم إنشاء الطلب الأول عند تحميل الصفحة. يرسل هذا الطلب استعلام الحصول على فئة PHP التي سنقوم بإنشائها لاحقًا؛ ولكن نحتاج أولاً إلى إنشاء طرق تحليل لاستجابة الطلب. يعالج ملف طلب JavaScript جميع الأعمال الأساسية، مثل إنشاء الكائنات وإرسال الطلبات والتحقق من حالة الاستعداد. عند تلقي استجابة من كائن الطلب، أستخدم ملف وظائف JavaScript هذا للتعامل مع إنشاء HTML لهذه المهام. تعد طريقة onResponse قوية للغاية لأنها تتعامل مع إنشاء صفحة HTML لكل عنوان وظيفي في كل من إصدارات النص والنماذج، وتضعها في علامات div المخصصة الخاصة بها؛ وبهذه الطريقة يمكننا إنشاؤها بسهولة أثناء تفاعل المستخدم. بهذه الطريقة يمكننا التبديل بين الإصدارات النصية والنموذجية لكل منشور - ويمكن تحقيق ذلك عن طريق النقر على الرابط "تحرير هذا المنشور". ما يلي هو رمز صفحة HTML التي تم إنشاؤها لكل موضع. يمكنك رؤية التنفيذ الكامل للطريقة في ملف مصدر التنزيل المقابل لهذه المقالة.
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "＜div class='title' id='title_"+ i +"'＞"+ _title +"＜/div＞"
+ "＜div class='description' id='description_"+ i +"'＞"+ _description +"＜/div＞"
+ "＜div class='date' id='date_"+ i +"'＞"+ _date +"＜/div＞"
+ "＜a href="javascript:toggle('"+ i +"');"＞تحرير هذه المشاركة＜/a＞＜br/＞"
+ "＜/div＞"
+ "<div class='post' id='formPost_"+ i +"' "+formPostDisplay +"＞"
+ "＜div class='title'＞＜نوع الإدخال='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div ＞"
+ "＜div class='description'＞＜textarea type='text' id='formDescription_"+ i +"' Wrap='virtual' cols='60'rows='15'＞"+ _description +"＜/ منطقة النص＞＜/div＞"
+ "＜div class='date'＞"+ _date +"＜/div＞"
+ "＜نوع الإدخال='زر' الاسم='إلغاء' القيمة='إلغاء' عند النقر="javascript:toggle('"+ i +"');"＞"
+ "＜نوع الإدخال='button' name='delete' value='delete this post' onclick="javascript:deletePost("+ _id +");"＞"
+ "<input type='button' name='submit' value='حفظ هذه المشاركة' onclick="javascript:saveNewPost("+ _id +"،+ i +");">"
+ "＜/div＞"
+ "＜p＞"nbsp;＜/p＞";
تعرض النسخة النصية لكل مشاركة ببساطة العنوان والوصف والتاريخ ورابط "تحرير هذه المشاركة". تحتوي نسخة النموذج لكل مشاركة على ثلاثة أزرار:
·"إلغاء
"" - يقوم ببساطة بتبديل حالة المنشور مرة أخرى إلى الإصدار النصي.
· زر "حذف هذا المنشور" - يرسل معرف المنشور الحالي إلى كائن PHP لحذفه من قاعدة البيانات.
· زر "حفظ هذا المنشور" - يسمح للمستخدم بحفظ المهمة الجديدة أو المحررة على الخادم.
الطرق الأساسية للتعامل مع طلبات الطلب من جانب الخادم هي طرق onResponse وsaveNewPost وdeletePost وgetPost. وهناك أيضًا طرق getter وsetter التي تخزن فهرس الوظائف قيد التشغيل حاليًا توفر الطريقة قيمة الفهرس الحالية لهذه الطرق الأساسية بحيث يمكن تحديث الموضع الصحيح بالمعلومات الصحيحة بناءً على هذا الفهرس، فيما يلي ملخص قصير لكل طريقة أساسية (باستثناء onResponse، نظرًا لأننا نظرنا إلى وظائفها من قبل). مثال على الوصف والتعليمات البرمجية:
· تقوم طريقة saveNewPost التالية بحفظ المنشور الجديد عن طريق جمع وإرسال قيم إدخال النموذج إلى كائن PHP وتعيين طريقة getPost كطريقة رد اتصال onreadystatechange:
function saveNewPost(_id, _index){.
var newDescription = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndex(_index);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· طريقة getPost أدناه هي طريقة رد اتصال - وهي مسؤولة عن تحديث منشور واحد عند تلقي استجابة من كائن PHP:
الوظيفة getPost(){
إذا (فحص جاهزية (طلب)) {
استجابة var = request.responseXML.documentElement;
var _title = Response.getElementsByTagName('title')[getIndex()].firstChild.data;
var _description = Response.getElementsByTagName('description')[getIndex()].firstChild.data;
var _date = Response.getElementsByTagName('date')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("description_"+ getIndex()).innerHTML = _description;
document.getElementById("date_"+ getIndex()).innerHTML = _date;
تبديل(getIndex());
}
}
· تقوم طريقة الحذف أدناه بإرسال الفهرس الحالي كطلب إلى كائن PHP، والذي سيؤدي في النهاية إلى حذف السجل الموجود في قاعدة البيانات والرد بموضع محدث:
functiondeletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
والمثير للدهشة أن الجزء الأكثر تعقيدًا قد انتهى. دعونا نحلل الجزء الأكثر أهمية - تفاعل قاعدة البيانات.
4. التفاعل مع قاعدة البيانات
من أجل التفاعل مع قاعدة البيانات، تحتاج إلى إنشاء طرق لاسترداد المواضع وإدراجها واستبدالها وحذفها. لقد اخترت إنشاء فصل دراسي باستخدام طرق الحصول والحفظ والحذف للتعامل مع هذه التفاعلات. تحتوي هذه الفئة أيضًا على مرجع لملف اتصال قاعدة البيانات (المستخدم للاتصال بقاعدة البيانات). يجب عليك استبدال اسم تسجيل الدخول وكلمة المرور واسم قاعدة البيانات بمعلومات قاعدة البيانات الخاصة بك.
تعريف ('DB_USER'، 'USERNAME')؛
تعريف ('DB_PASSWORD'، 'PASSWORD')؛
تعريف ('DB_HOST'، 'مضيف محلي')؛
تعريف ('DB_NAME'، 'DATABASE')؛
أو
يموت ('تعذر الاتصال بـ MySQL: ' . mysql_error() );
يجب أن يبدو مُنشئك مشابهًا للكود التالي:
function Post(){
require_once('mysql_connect.php');
$this->table = "informit_ajax";
}
تعد طريقة dbConnect التالية مسؤولة عن إنشاء الاتصال - عن طريق تمرير معلومات تسجيل الدخول إلى قاعدة البيانات؛ ويتم إعادة استخدام هذه الطريقة في جميع الطرق الأساسية قبل الاستعلام عن قاعدة البيانات:
function dbConnect(){
تعريف ('LINK'، mysql_connect (DB_HOST، DB_USER، DB_PASSWORD))؛
}
تقوم طريقة get التالية بالتكرار خلال جدول قاعدة البيانات، وإنشاء سلسلة XML استنادًا إلى صف قاعدة البيانات، وإرجاع السلسلة إلى الطالب:
function get(){
$this->dbConnect();
$query = "SELECT * FROM $this->table ORDER BY id";
نتيجة $ = mysql_db_query (DB_NAME، $query، LINK)؛
$xml = "＜?xml version="1.0" encoding="ISO-8859-1" ?＞n";
$xml .= "＜المشاركات＞n";
بينما($row = mysql_fetch_array($result)) {
$xml .= "＜post＞n";
$xml .= "＜id＞" $row['id'] .
$xml .= "＜date＞" $row['date'] .
$xml .= "＜title＞＜![CDATA[" . $row['title'] . "]]＞＜/title＞n";
$xml .= "＜description＞＜![CDATA[" . $row['description'] . "]]＞＜/description＞n";
$xml .= "＜/post＞n";
}
$xml .= "＜/المشاركات＞";
mysql_Close();
header("نوع المحتوى: application/xml; charset=UTF-8");
صدى $xml;
}
تحقق طريقة الحفظ التالية غرضين من خلال معالجة مواضع التحديث والإدراج:
function save($id, $title, $description){
$this->dbConnect();
$query = "SELECT * FROM $this->table WHERE id='$id'";
نتيجة $ = @mysql_query ($query)؛
إذا (mysql_num_rows($result) > 0)
{
$query = "UPDATE $this->table SET title='$title', description='$description', date=NOW() WHERE id='$id'";
نتيجة $ = @mysql_query($query);
}
آخر
{
$query = "INSERT INTO $this->table (title, description, date) VALUES ('$title', '$description', NOW())";
نتيجة $ = @mysql_query($query);
}
mysql_Close();
$this->get();
}
أسلوب الحذف أدناه مسؤول عن حذف الموقع بناءً على المعرف الذي تم تمريره كمعلمة. ثم اتصل بطريقة get لإرجاع البيانات الجديدة إلى ملف الطلب:
functiondelete($id){
$this->dbConnect();
$query = "احذف من $this->table WHERE id='$id'";
نتيجة $ = @mysql_query($query);
mysql_Close();
$this->get();
}
5. تطبيق شامل
لدمج الأجزاء المذكورة أعلاه معًا، يجب إنشاء ملف بسيط ليكون بمثابة جسر اتصال بين طلبات XML HTTP وكائنات PHP. لا تقوم الصفحة في هذه المرحلة بإنشاء كائنات PHP فحسب، بل تتلقى أيضًا استعلامات وتمرر المتغيرات إلى الأساليب التي تم إنشاؤها ديناميكيًا - في هذه الحالة، الحصول على أو حفظ أو حذف. يشتمل مثال الاستعلام أدناه على طريقة $ ومتغيرات $id و$title و$description الموثوقة.
require_once("../classes/Post.class.php");
$post = new Post();
$post->$method($id, $title, $description);
سنناقش هذه التقنيات بشكل أكبر في المستقبل. يبدو تطوير الويب اليوم جديدًا وديناميكيًا مرة أخرى، ونحن محظوظون لكوننا جزءًا من هذا العصر التكنولوجي الجديد.