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

[dev11]

سنقوم اليوم بعمل تطبيق بسيط على تقنية الـ ajax ، لست هنا بصدد شرح ما هية الـ ajax ، بل لعمل تطبيق عليها .

ما سنقوم بتطبيقه هو كيفية إضافة تعليق على موضوع معين بواسطة الـ ajax ( أي بدون إعادة تحميل الصفحة ) أو ما يسمى بالتعليق السريع أو المباشر . والآن لنباشر العمل ..

حسناً ، لنفرض أن لدينا مقال ما ..

<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 المكونة من عشرة خانات .

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

<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="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
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 ، ... ) .

[dewan159]

السلام عليكم ,..
حقا مشكور ...
وننتظر باقى التطبيقات

[ksa-team]

اولا اشكرك على مجهودك الكبير
والله فعلا تطبيق رائع
---------
كيف يمكنني ان اصنع صفحة اخرى يتم منها اضافة المواضيع في الصفحة الرئيسيه

[dev11]

قم بتضمين كل من الملفات jquery.js و ajax-comment.js ، ثم قم بإضافة نموذج الإدخال في صفحتك .

[dev11]

اتمنى ان يوجد هناك نوع من التفاعل والنقاش في هذا الموضوع ، فكما اسلفت هنك بعض الأشياء التي لم استطع اضافتها الى هذا التطبيق ..

الـ captcha .
عند إرسال النموذج يجب الضغط على زر الإرسال ولا يفيد الضغط على مفتاح enter للارسال .
صورة التحميل أثناء عملية معالجة البيانات .
عندما أريد تبديل الألوان ( مثلاً التعليق الأول لونه #eee والثاني #fff والثالث #eee وهكذا .. )

فمن لديه القدرة او المعلومة فلا يبخل بها علينا ..

إضافة للاشياء التي يمكن اضافتها للتطبيق :
إضافة تأثير من نوع ما ( fade ، slide ) عند إضافة التعليق .

[mr.kindy]

مجهود تستحق عليه الثناء

[Omr]

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

[dev11]

# تحديث :

بعد مراجعة سريعة للتطبيق وجدت خطأ بسيط وهو في ملف add.php
استبدل

        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.'" class="c1">الكاتب : '.$name.' | التاريخ : '.$time.'</div>
<div class="c2">'.$content.'</div>'; 

بـ :

        if (!$result)
        {
            echo 0;
        }
        else
        {
            $id = mysql_insert_id();
            $name = ($link != '') ? '<a href="'.$link.'">'.$name.'</a>' : $name;
            $time = convert($time);
            $content = nl2br($content);
            echo '<div id="comment-'.$id.'" class="c1">الكاتب : '.$name.' | التاريخ : '.$time.'</div>
<div class="c2">'.$content.'</div>';
        } 

أيضاً وجدت أنه لاداعي لالغاء خاصية الـ cache أثناء عملية الإضافة ، لذلك قم بازالة السطر

header('cache-control: no-cache'); 

في أول ملف الإضافة add.php .

أخيراً هناك إضافة أخرى اود اضافتها للتطبيق وهي تعطيل زر الاضافة ( الـ submit ) اثناء عملية ارسال التعليق حتى لا يحدث خطأ عندما يضغط المستخدم على زر الارسال اكثر من مرة ، فلو ضغط عليه مرتين فسيضاف التعليق مرتين وهكذا ..

ايضاً كانت لي محاولة بسيطة في اضافة تأثير fadeIn على تطبيق مشابه لهذا التطبيق ونجحت ، ولكن عندما قمت بتجربتها على هذا التطبيق لم تنجح .

$(result).hide().fadeIn('slow').appendTo('#comments'); 

التعديل يكون في ملف ajax-comment.js .

[2end]

جزاك الله الف خير

كيف يمكنني التعديل على الكود اعلاه ليتناسب مع تعليقات المقالات مثلا لدي جدول مقال فيه حقول :
lid

و جدول التعليقات فيه
tid
pid >> حقل ربط التعليق مع المقال

اي يمكنني وضع

$pid = $_GET['lid']; 

حتى يستقبل رقم المقال في حقل ربط التعليق بالمقال

[dev11]

ضعه في اول الملف الذي يقوم بعرض المقال وتعليقاته .

[smart mind]

الله يرضى عليك بالدنيا والآخره
سؤال هل يمكن تطبيق هذا الدرس على الردود في ثيمات الـvb

[owner]

شكرا لك على الشرح الوافي

لي عودة بعد التجربة

بالتوفيق ان شاء الله

[dev11]

هل يمكن تطبيق هذا الدرس على الردود في ثيمات الـvb

إذا كنت ملماً ببرمجية الـ vb فيمكنك ذلك ، لكن أعتقد أنه توجد إضافات خاصة لهذا النوع من المنتديات جاهزة وأفضل من التطبيق البسيط هنا .

[سليمان عبدالعزيز]

هل يمكن تطبيق هذا الدرس على الردود في ثيمات الـvb

هذي الخاصيه موجودهـ بالـ vb بس يلزم تفعيلها من خيارات المنتدى --> عناصر الاجاكس

من هنا بس وين بالظبط نسيت

[dev11]

نسيت أن أذكر أنه يجب التعديل على الدالة send() في ملف ajax-comment.js لما يناسبك

// إسم الحقل الذي يحتوي على الإسم
var name = document.getElementById('name');

// إسم الحقل الذي يحتوي على حقل الرابط
var link = document.getElementById('link');

// إسم الحقل الذي يحتوي على محتوى التعليق
var content = document.getElementById('content'); 

أيضاً ..

// إسم الملف الذي سيستقبل البيانات ويقوم بالتعامل معها
$.get('add.php') 

أما بالنسبة للجزئية

n: name.value, l: link.value, c: content.value 

فهي طريقة ارسال البيانات ..
في الملف الذي سنتعامل فيه مع البيانات سنكتب

$name = $_GET['n'];
$link = $_GET['l'];
$content = $_GET['c'];