سوف نتعلم فى درس اليوم كيف نقوم بعمل نظام تعليقات صغير يعتمد على تقنيات الاجاكس وكيف نحقق اتصال فعال بين مكتبة الجى كويرى jQuery والبى اتش بى وقاعدة البيانات PHP/MySQL بمساعدة الـJSON

شاهد المثال بعد التطبيق | تحميل الدرس + المثال

عليك اولا استخراج مصفوفة تحتوى على التعليقات الموجودة بالفعل فى قاعدة البينات معتمدا على رقم الصفحة التى نظهر بها التعليقات سواء كانت صفحة مقال او صفحة عرض صورة او اى شىء المهم هو ان يكون لكل صفحة من هذه الصفح رقم تميزها لكى تميز التعليقات بها وعند اضافة تعليق سنحفظ رقم الصفحة فى حقل page_id وعند استدعاء التعليقات سنختار من التعليقات جميعا ماهو لديه رقم الصفحة الحالية
مثال للتوضيح:
لديك فى الموقع الخاص بك مقالات لكى تعرض محتوى كل مقالة تذهب على الرابط التالى article.php?id=5
الان انت ستختار من قاعدة البيانات العليقات التى لديها 5 فى حقل page_id

استخراج التعليقات

سنستخدم دالة comments( $page_id ) وهذه الدالة تأخذ من جدول التعليقات اى تعليق لديه رقم الصفحة وتذهب لجدول الاعضاء خاصتك لتأخذ بيانات العضو صاحب التعليق لذلك ستجد جدول صنعته فقط للتوضيح يحتوى على الاعضاء ستستبدله بجدول الاعضاء الخاص بك

التطبيق

<?php
    // الملف المحتوى على الدوال
	include_once ('php/functions.php');
    // رقم الصفحة خاصتك
    $page_id = 5;
    
?>
<div class="comments">
    <?php
        //استخراج التعليقات على حسب متغير رقم الصفحة
    	foreach ((array) comments($page_id) as $comment) {
    ?>
        <div class="comment shadow effect">
            <p class="right tip" title="<?php echo $comment['username'];?> قال">
                <img class="avatar" src="<?php echo get_gravatar($comment['email'],40);?>" />
            </p>
            <p class="body left">
            <?php echo nl2br($comment['comment']);?>
            <div class="details small">
                <span class="blue"><?php echo timeBetween($comment['time'],time());?></span> · <a class="red" href="#" onclick="$(this).delete_answer(<?php echo $comment['id'];?>); return false;">حذف</a>
            </div>
            </p>
            
        </div>
    <?php
    }
    ?>
</div>

حتى الان قمنا بعرض التعليقات التى تمتمى للصفحة رقم 5 الان لكى نضيف تعليق جديد يجب عليك استخدام هذا الكود

<div class="add_comment">
    <div class="write shadow comment">
        <p class="right">
            <img class="avatar" src="#" />
        </p>
        <p class="textarea left">
            <textarea class="right" cols="40" rows="5"></textarea>
            <input class="right" value="تعليق :)" type="submit" />
        </p>
    </div>
    <a onclick="$(this).add_comment(<?php echo $page_id;?>);return false;" class="left effect shadow" href="#">أضف تعليق</a>
</div>

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

اولا حتى تعمل جميع الاكواد لابد ان تستخدم مكتبة الجى كويرى jQuery وسنستخدم بعض الاضافات والاكواد المساعدة مثل اضافة tipsy التى تعمل على اظهار اسم المستخدم عند المرور على الصورة الشخصية له وكود العد التنازلى

دالة الاضافة add_comment( page_id )

هذه الدالة موجودة فى ملف js/comments.js وظيفتها هى عند الضغط على زر اضف تعليق تظهر مربع اضافة التعليق وتخفى زر اضف تعليق وهى تقوم بارسال التعليق comment ورقم الصفحة page_id عن طريق دالة $.post() الخاصة بمكتبة الجى كويرى

الدالة مع شرح مبسط

jQuery.fn.add_comment = function (page_id) {
    var that = $(this);
    //اخفاء زر اضف تعليق واظهار صندوق التعليق
    that.hide(10, function () {
        that.prev().show();
    });
    //عند الضغط على زر ارسال التعليق
    that.parent().find('input[type=submit]').click(function () {
        //نص التعليق
        var value = $(this).prev().val();
        if (value.length < 3) {
            //اضافة كلاس الخطأ ان كان النص اصغر من 3 حروف
            $(this).prev().addClass('error');
            return false;
        } else {
            var input = $(this);
            //تعطيل زر الارسال وحقل النص حتى ارسال القيمة الحالية
            input.prev().attr('disabled', true);
            input.attr('disabled', true);
            //ارسال رقم الصفحة والتعليق
            $.post("ajax.php", {
                page_id: page_id,
                comment: value
            }, function (data) {
                if (data.error) {
                    alert("حدث خطأ ولا يمكن استقبال التعليق الخاص بك");
                } else {
                    //لصق التعليق الجديد
                    that.parent().prev('.comments').append('<div class="comment rounded5"><p class="right"><img class="avatar" src="' + data.avatar + '" /></p><p class="body left small">' + data.comment + '<br /><div class="details small"><span class="blue">' + data.time + '</span> · <a class="red" href="#" onclick="$(this).delete_answer(' + data.id + '); return false;">حذف</a></div></p></div>');
                    //تفريغ قيمة حقل النص الحالية
                    input.prev().val('');
                }
                //تفعيل رز الارسال وحقل النص مرة اخرى
                input.prev().attr('disabled', false);
                input.attr('disabled', false);
            },'json');
 
        }
        return false;
    });
};

دالة الحذف delete_comment( id )

هذه الدالة موجودة فى ملف js/comments.js وهذه الدالة تقوم بارسال رقم التعليق الى السيرفر للحذف من قاعدة البيانات وتقوم بحذف التعليق من الصفحة بمؤثرات الاجاكس

الدالة مع شرح مبسط

jQuery.fn.delete_comment = function (id) {
    var that = $(this);
    //اخفاء كلمة حذف
    that.hide(1, function () {
        //اظهار جملة الحذف
        that.parent().append('<div class="timer">ستتم عملية الحذف خلال <span class="countdown red">30</span> ثانية · <a class="stop blue" href="#">الغاء</a></div>');
        //البحث عن كلاس العد التنازلى
        timer = that.parent().find('.countdown');
        //نبدأ عملية العد التنازلى
        timer.show().countDown({
            startNumber: 30,
            startFontSize: '12px',
            endFontSize: '12px',
            //عند انتهاء العد التنازلى نقوم بارسال رقم التعليق لمحاولة حذفه من قاعدة البيانات
            callBack: function () {
                $.post("ajax.php", {
                    remove: id
                }, function (data) {
                    if (data.status == 'done') {
                        //فى حالة النجاح احذف التعيق من الصفحة ايضا
                        that.parents('.comment').remove();
                    } else {
                        //فى حالة الفشل نعطل العد التنازلى عند 1
                        $('.stop').click();
                    }
                }, 'json');
            }
        });
    });
    //عند الضغط على الغاء الحذف
    $('.stop').live('click', function () {
        var parent = $(this).parent();
        //نبحث عن كلاس العد التنازلى ونلغى عملية العد
        parent.find('.countdown').stop();
        parent.prev().show(1, function () {
            parent.remove()
        });
        return false;
    });
};

عند الضغط على ارسال التعليق او عند الحذف لابد من عمل ملف ليستقبل البيانات مع جهة المستخدم والان يجب ان يكون لدينا ملف باسم ajax.php

المحتوى مع شرح مبسط

<?php
	include_once ('php/functions.php');
    
    //فى حالة ارسال رقم التعليق للحذف
    if(isset($_POST['remove'])){
        // التأكد من ان المرسل رقم
        $id = intval($_POST['remove']);
            //حذف التعليق من قاعدة البيانات
            if(mysql_query("DELETE FROM `comments` WHERE `id` = $id")){
                //نخبر جهة المستخدم انه تم حذف التعليق
                exit(json_encode(array('status' => 'done')));
            }
    }
    
    //فى حالة ارسال تعليق ورقم صفحة
    if(isset($_POST['page_id']) and isset($_POST['comment'])){
        $user_id = 0;//رقم العضو المسجل دخول - اكتب 1 لكى تعلق كمحمود
        $page_id = intval($_POST['page_id']);
        $comment = mysql_escape_string($_POST['comment']);
        $time = time();
        
        //حفظ التعليق فى قاعدة البيانات
        if(mysql_query("INSERT INTO `comments` (`user_id`, `page_id`, `comment`, `time`) VALUES ($user_id, '{$page_id}', '{$comment}', '{$time}')")){
            // رقم التعليق المضاف منذ ثانية
            $id = mysql_insert_id();
            //استدعاء التعليق ذاته من قاعدة البيانات
            $row = single_comment($id);
            //العودة الى جهة المستخدم بالبيانات
            exit(json_encode(array(
                'id' => $id,
                'avatar' => ($row['user_id']) ? get_gravatar($row['email'],40) : '#',
                'time' => timeBetween($row['time'],time()),
                'comment' => $row['comment'],
            )));
        }
    }	
?>

ملحوظة

كل هذا عبارة عن مثال بسيط لتعليقات الاعضاء فى موقعك معنى هذا ان لابد ان يكون المستخدم فى حالة تسجيل الدخول لكى يتمكن من التعليق حتى نستطيع تسجيل رقم عضويته مع التعليق لنتمكن من احضار معلوماته من جدول الاعضاء ولهذا لا يوجد حقل للبريد الالكترونى والموقع الالكترونى اثناء اضافة التعليق