سنقوم اليوم بعمل تطبيق بسيط على تقنية الـ ajax ، لست هنا بصدد شرح ما هية الـ ajax ، بل لعمل تطبيق عليها .
ما سنقوم بتطبيقه هو كيفية إضافة تعليق على موضوع معين بواسطة الـ ajax ( أي بدون إعادة تحميل الصفحة ) أو ما يسمى بالتعليق السريع أو المباشر . والآن لنباشر العمل ..
حسناً ، لنفرض أن لدينا مقال ما ..
كود HTML:
<h3>موضوع ..</h3>
<div>الكاتب : <a href="link">كاتب</a> | التاريخ : 08 مايو 2008</div>
<div><p>محتوى ..</p></div>
الآن نريد إضافة خاصية التعليق على هذا المقال ، سنحتاج إلى قاعدة بيانات و أيضاً لغة تقوم بالتعامل مع هذه القاعدة ، في حالتنا هذه سنقوم بالعمل بواسطة mysql كقاعدة بيانات و php كلغة تتعامل مع هذه القاعدة ، وبالطبع ستحتاج الى خادم ويب و برنامج يقوم بالتعامل مع قاعدة البيانات ، أنظر apache و phpmyadmin ، ويمكنك الحصول على جميع هذه الأدوات من خلال الحزمة appserv .
حسناً ، سنحتاج إلى جدول للتعليقات ( comments ) وسنقوم بإنشاءه في قاعدة بيانات بإسم ajax-comment مثلاً ..
كود:
CREATE TABLE `comments` (
`id` int(3) NOT NULL auto_increment,
`content` text NOT NULL,
`name` varchar(50) NOT NULL,
`link` varchar(100) NOT NULL,
`time` int(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
كما هو واضح من تخطيط الجدول ، لدينا الحقول :
id كمفتاح رئيسي وكرقم خاص لكل تعليق ، يتم إضافته تلقائياً مع كل تعليق .
content محتوى التعليق .
name إسم كاتب التعليق .
link رابط لكاتب التعليق إن وجد .
time تاريخ إضافة التعليق بصيغة unix المكونة من عشرة خانات .
حسناً، الآن سنقوم بإضافة تطوير على شفرة المقال لتقوم بإستخراج التعليقات الموجودة في قاعدة البيانات .
كود PHP:
<div id="comments">
<?php
include('config.php');
include('functions.php');
$result = mysql_query('select * from comments order by time asc');
$count = mysql_num_rows($result);
if ($count != 0)
{
while ($row = mysql_fetch_array($result))
{
$id = $row['id'];
$content = nl2br($row['content']);
$name = ($row['link'] != '') ? '<a href="'.$row['link'].'">'.$row['name'].'</a>' :
$row['name'];
$time = convert($row['time']);
echo '<div id="comment-'.$id.'">الكاتب : '.$name.' | التاريخ :
'.$time.'</div>
<div>'.$content.'</div>';
}
}
mysql_free_result($result);
mysql_close($connect);
?>
</div>
كما تلاحظون من الشفرة ، قمنا بإضافة قسم للتعليقات comments ، وقمنا بطباعة التعليقات إن وجدت ، قد يتساءل البعض عن الدالة convert وهي دالة موجودة في الملف functions وتقوم بتحويل التاريخ من صيغة unix الى صيغة ( اليوم إسم الشهر - باللغة العربية - السنة ) مثل 08 مايو 2008 .
حسناً ، الآن سنضيف النموذج الخاص بإضافة التعليقات .
كود HTML:
<div id="add-comment">
<h3>إضافة تعليق :</h3>
<form>
<div>الإسم : <input type="text" id="name" size="50" maxlength="50" /></div>
<div>رابط : <input type="text" id="link" size="50" maxlength="100" /> [ إختياري ]</div>
<div>التعليق : <textarea id="content" cols="50" rows="5"></textarea></div>
<div><input type="reset" value="مسح" /> <input type="button" value="إضافة تعليق" onclick="javascript:send();" /></div>
</form>
</div>
تلاحظون وجود حدث onclick على الزر الخاصة بإضافة التعليق ، ويقوم هذا الحدث باستدعاء الدالة send التي ستقوم بعملية التأكد من صحة الرد وعدم احتواءه على اخطاء ، وعند حصول ذلك ستقوم بارسال الرد الى ملف php الذي سيقوم بالتعامل مع الرد ويقوم بتخزينه في قاعدة البيانات ثم يعيد النتائج الى الدالة send التي ستقوم بعرض الرد الجديد .
حسناً ، كما تعلمون الـ ajax تقنية من تقنيات لغة الـ javascript ، لذلك سنحتاج الى مكتبة من مكتبة الـ javascript التي ستساعدنا في تسهيل ما نريد القيام به بطريقة افضل وأبسط ، والمكتبة التي سنقوم بالتعامل معها هي مكتبة jquery ، ويمكنك الحصول عليها من صفحة التحميل ، قم بتحميل النسخة المضغوطة ( minified ) لحجم أقل .
حسناً ، نأتي الآن للدالة send .
كود:
function send() {
var name = document.getElementById('name');
var link = document.getElementById('link');
var content = document.getElementById('content');
if (name.value == '') {
alert('الرجاء تعبئة حقل الإسم');
} else if (content.value == '') {
alert('الرجاء تعبئة حقل التعليق');
} else if (content.value.length < 10) {
alert('التعليق قصير جداً');
} else {
$.get('add.php', { n: name.value, l: link.value, c: content.value }, function(result) {
if (result == 0) {
alert('خطأ!');
} else {
$(result).appendTo('#comments');
content.value = '';
}
}
);
}
}
قمنا بتعريف المتغيرات name ، link ، content عن طريق جلبهم بواسطة الدالة getElementById ، ثم قمنا بالتحقق من عدم خلو المتغيرين name و content ، ، وأيضاً نقوم بالتحقق من أن نص التعليق ليس قصيراً ، ومن ثم نقوم بارسال المتغيرات الى الملف add.php الخاص بالاضافة بواسطة الدالة $.get ، ومن ثم نقوم باضافة الناتج من ملف الاضافة الى القسم الخاص بالتعليقات comments ، ونقوم بمسح محتويات حقل النموذج content .
بالنسبة لملف الاضافة add.php فهو كأي ملف إضافة عادي ، سوى أننا نقوم بطباعة الحقل الذي قمنا باضافته ليصبح الناتج الذي سيطبع في القسم comments ، ونتأكد من عدم وجود أي أخطاء أخرى وأيضاً نمنع إستخدام الـ cache .
كود PHP:
<?php
header('cache-control: no-cache');
if (isset($_GET['n']) and isset($_GET['l']) and isset($_GET['c']))
{
$name = htmlspecialchars($_GET['n']);
$link = htmlspecialchars($_GET['l']);
$content = htmlspecialchars($_GET['c']);
if ($_GET['n'] == '' or $_GET['c'] == '')
{
echo 0;
}
else
{
include('config.php');
include('functions.php');
$time = time();
$result = mysql_query("insert into comments ( content, name, link, time ) values ( '$content', '$name', '$link', '$time' )");
if (!$result)
{
echo 0;
}
$id = mysql_insert_id();
$name = ($link != '') ? '<a href="'.$link.'">'.$name.'</a>' : $name;
$time = convert($time);
$content = nl2br($content);
echo '<div id="comment-'.$id.'">الكاتب : '.$name.' | التاريخ : '.$time.'</div>
<div>'.$content.'</div>';
mysql_close($connect);
}
}
?>
تهانينا ، لديك الان تطبيق على تقنية الـ ajax يقوم بإضافة التعليقات بدون إعادة تحميل الصفحة .
هناك بعض الأشياء التي حاولت إضافتها في هذا التطبيق ولم أنجح ، مثل ..
الـ captcha .
عند إرسال النموذج يجب الضغط على زر الإرسال ولا يفيد الضغط على مفتاح enter للارسال .
صورة التحميل أثناء عملية معالجة البيانات .
عندما أريد تبديل الألوان ( مثلاً التعليق الأول لونه #eee والثاني #fff والثالث #eee وهكذا .. )
إنتهينا من التطبيق وإن شاء الله سنقوم بعمل تطبيقات أخرى ( تعديل ، حذف ) في المستقبل القريب .
في المرفقات التطبيق بالكامل ( بالإضافة إلى مكتبة jquery ) مع بعض التحسينات ( css ، ... ) .