صفحة 1 من 3 123 الأخيرةالأخيرة
النتائج 1 إلى 15 من 37

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

  1. #1
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613

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



    سنقوم اليوم بعمل تطبيق بسيط على تقنية الـ 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 ، ... ) .





    الملفات المرفقة الملفات المرفقة


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Jan 2008
    المشاركات
    450


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






  3. #3
    عضو نشيط
    تاريخ التسجيل
    Nov 2005
    المشاركات
    136


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





    __________________
    اذا دعتك قدرتك على ظلم النس فتذكر قدرة الله عليك

  4. #4
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


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






  5. #5
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


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

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






  6. #6
    عضو نشيط جدا
    تاريخ التسجيل
    Sep 2006
    المشاركات
    599


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





    __________________
    MrKindy

  7. #7
    عضو نشيط
    تاريخ التسجيل
    Jun 2005
    المشاركات
    103


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





    __________________
    إذا كان الله معك فمن عليك ؟؟؟؟؟
    و إذا كان الله عليك فمن معك ؟؟؟؟
    تذكر اخي ان الدنيا ثواني فأغتنمها .
    www.onshodah.com
    www.livedes.com
    om.shahin@gmail.com

  8. #8
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


    # تحديث :

    بعد مراجعة سريعة للتطبيق وجدت خطأ بسيط وهو في ملف add.php
    استبدل
    كود 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>'
    بـ :
    كود PHP:
            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 أثناء عملية الإضافة ، لذلك قم بازالة السطر
    كود PHP:
    header('cache-control: no-cache'); 
    في أول ملف الإضافة add.php .

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

    ايضاً كانت لي محاولة بسيطة في اضافة تأثير fadeIn على تطبيق مشابه لهذا التطبيق ونجحت ، ولكن عندما قمت بتجربتها على هذا التطبيق لم تنجح .
    كود PHP:
    $(result).hide().fadeIn('slow').appendTo('#comments'); 
    التعديل يكون في ملف ajax-comment.js .






  9. #9
    عضو فعال
    تاريخ التسجيل
    Sep 2006
    المشاركات
    1,051


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

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

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

    اي يمكنني وضع
    كود PHP:
    $pid $_GET['lid']; 
    حتى يستقبل رقم المقال في حقل ربط التعليق بالمقال






  10. #10
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


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






  11. #11
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    52


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





    __________________
    شكراً سوالف سوفت ,,



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

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

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





    __________________
    ownersınnı
    ALdiraZi BLoOoG | Contact Me | lt.tl - shorten your URL

  13. #13
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


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






  14. #14
    عضو فعال جدا
    تاريخ التسجيل
    Sep 2006
    المشاركات
    3,006


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

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





    __________________
    p-king-p@hotmail.com


    الرجاء مراجعة الموضوع للجميع :
    http://www.swalif.net/softs/swalif12/softs302945

  15. #15
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


    نسيت أن أذكر أنه يجب التعديل على الدالة send() في ملف ajax-comment.js لما يناسبك
    كود PHP:
    // إسم الحقل الذي يحتوي على الإسم
    var name document.getElementById('name');

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

    // إسم الحقل الذي يحتوي على محتوى التعليق
    var content document.getElementById('content'); 
    أيضاً ..
    كود PHP:
    // إسم الملف الذي سيستقبل البيانات ويقوم بالتعامل معها
    $.get('add.php'
    أما بالنسبة للجزئية
    كود PHP:
    nname.valuellink.valueccontent.value 
    فهي طريقة ارسال البيانات ..
    في الملف الذي سنتعامل فيه مع البيانات سنكتب
    كود PHP:
    $name $_GET['n'];
    $link $_GET['l'];
    $content $_GET['c']; 







صفحة 1 من 3 123 الأخيرةالأخيرة




ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
0
أضف موقعك هنا