| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
|
| | LinkBack | أدوات الموضوع |
| |||||
| [ تطبيق ajax ] إضافة التعليق دون إعادة تحميل الصفحة ( التعليق السريع ) ما سنقوم بتطبيقه هو كيفية إضافة تعليق على موضوع معين بواسطة الـ ajax ( أي بدون إعادة تحميل الصفحة ) أو ما يسمى بالتعليق السريع أو المباشر . والآن لنباشر العمل .. حسناً ، لنفرض أن لدينا مقال ما .. كود بلغة HTML: <h3>موضوع ..</h3> <div>الكاتب : <a href="link">كاتب</a> | التاريخ : 08 مايو 2008</div> <div><p>محتوى ..</p></div> حسناً ، سنحتاج إلى جدول للتعليقات ( 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: حسناً ، الآن سنضيف النموذج الخاص بإضافة التعليقات . كود بلغة 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> حسناً ، كما تعلمون الـ 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 = '';
}
}
);
}
} بالنسبة لملف الاضافة add.php فهو كأي ملف إضافة عادي ، سوى أننا نقوم بطباعة الحقل الذي قمنا باضافته ليصبح الناتج الذي سيطبع في القسم comments ، ونتأكد من عدم وجود أي أخطاء أخرى وأيضاً نمنع إستخدام الـ cache . كود PHP: هناك بعض الأشياء التي حاولت إضافتها في هذا التطبيق ولم أنجح ، مثل .. الـ captcha . عند إرسال النموذج يجب الضغط على زر الإرسال ولا يفيد الضغط على مفتاح enter للارسال . صورة التحميل أثناء عملية معالجة البيانات . عندما أريد تبديل الألوان ( مثلاً التعليق الأول لونه #eee والثاني #fff والثالث #eee وهكذا .. ) إنتهينا من التطبيق وإن شاء الله سنقوم بعمل تطبيقات أخرى ( تعديل ، حذف ) في المستقبل القريب . في المرفقات التطبيق بالكامل ( بالإضافة إلى مكتبة jquery ) مع بعض التحسينات ( css ، ... ) . | |||||
|
| |||||
|
اتمنى ان يوجد هناك نوع من التفاعل والنقاش في هذا الموضوع ، فكما اسلفت هنك بعض الأشياء التي لم استطع اضافتها الى هذا التطبيق .. اقتباس: إضافة للاشياء التي يمكن اضافتها للتطبيق : إضافة تأثير من نوع ما ( fade ، slide ) عند إضافة التعليق . | |||||
|
| |||||
|
مجهود تستحق عليه الثناء
__________________ اطلب برنامجك الخاص سواء ويب او ديسك توب الله لا إله إلا انت سبحانك إني كنت من الظالمين | |||||
|
| |||||
|
بصراحة الفكرة دي انا كنت محتاجها ومجهود تسلم ايدك عليه بس متزعلشي مني مش هقدر افيدك قوي لاني لسه علي قدي في الاجاكس بس دعواتك ان ربنا يمن علينا بالاجادة فيها ،،،شكرا جزيلا اخوك عمر
__________________ إذا كان الله معك فمن عليك ؟؟؟؟؟ و إذا كان الله عليك فمن معك ؟؟؟؟ تذكر اخي ان الدنيا ثواني فأغتنمها . www.onshodah.com www.livedes.com om.shahin@gmail.com | |||||
|
| |||||
|
# تحديث : بعد مراجعة سريعة للتطبيق وجدت خطأ بسيط وهو في ملف add.php استبدل كود PHP: كود PHP: كود PHP: أخيراً هناك إضافة أخرى اود اضافتها للتطبيق وهي تعطيل زر الاضافة ( الـ submit ) اثناء عملية ارسال التعليق حتى لا يحدث خطأ عندما يضغط المستخدم على زر الارسال اكثر من مرة ، فلو ضغط عليه مرتين فسيضاف التعليق مرتين وهكذا .. ايضاً كانت لي محاولة بسيطة في اضافة تأثير fadeIn على تطبيق مشابه لهذا التطبيق ونجحت ، ولكن عندما قمت بتجربتها على هذا التطبيق لم تنجح . كود PHP: | |||||
|
| |||||
|
جزاك الله الف خير كيف يمكنني التعديل على الكود اعلاه ليتناسب مع تعليقات المقالات مثلا لدي جدول مقال فيه حقول : lid و جدول التعليقات فيه tid pid >> حقل ربط التعليق مع المقال اي يمكنني وضع كود PHP:
__________________ سبحان الله و بحمده الدفاع عن السنة : موقع للدفاع عن الدين الاسلامي و كشف المذاهب الباطلة منتدى الدفاع عن السنة للذب و الدفاع عن القرآن و السنة العضوية يستخدمها شخصان | |||||
|
| |||||
| اقتباس:
من هنا بس وين بالظبط نسيت
__________________ عروض بيج رانك 7 trwegh.com ( @ ) hotmail ( . ) com [ يستـ خ ـدم الـ ع ـضوية ش خ ـصين ] | |||||
|
![]() |
| أدوات الموضوع | |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| سكربت لاينز وورك الخيالي لادارة المواقع lineswork | المفكر العربي | تطوير الويب | 1 | 21-11-2007 09:31 PM |
| الصفحة الأم Master Page | nothing4u | ASP و ASP.NET | 7 | 21-05-2007 12:46 AM |
| بدايتك لإستخدام تقنية أجاكس ( AJAX ) مع لغة البرمجة ASP .Net 2.0 في إطار العمل VS2005 | القافلة العربية | PHP | 7 | 09-01-2007 08:16 AM |
| الاصدار 1.5.0 من برنامج منتديات MySmartBB | Arab Domains | إصلاح وصيانة المنتديات | 31 | 04-10-2006 10:48 PM |
| ترشيح لأجمل منتديات vBulletin Version 2.0.3 | alkahf | إصلاح وصيانة المنتديات | 74 | 07-09-2001 02:49 AM |