إضافة التعليق دون إعادة تحميل الصفحة ( التعليق السريع )

إضافة التعليق دون إعادة تحميل الصفحة
( التعليق السريع )

صورة مرسلة

إولاً سنحتاج لزراعة قاعدة بيانات وجداول

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 تاريخ إضافة التعليق

الآن سنقوم بإضافة تطوير على شفرة المقال في ملف index لتقوم بإستخراج التعليقات الموجودة في قاعدة البيانات .

<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 .

الآن سنضيف النموذج الخاص بإضافة التعليقات .

<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="java script: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 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);
    }
}
?>

تهانينا