منتديات بوابة بدر  

العودة   منتديات بوابة بدر > منتديات البرامج - Programs Forum > تحميل احدث برامج 2017 , 2018

تحميل احدث برامج 2017 , 2018 تحميل احدث البرامج، تحميل برامج كمبيوتر 2017، برامج 2018، برامج 2018، برامج مجانية، تحميل برامج جديدة، برامج حديثة ، احدث برامج الجهاز , برامج عامة, برامج 2018, تحميل برامج 2017

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
قديم 11-06-2014, 01:24 AM   #1
Eng_Badr
Administrator
 
الصورة الرمزية Eng_Badr
 
تاريخ التسجيل: Jun 2010
الدولة: Egypt
العمر: 27
المشاركات: 140,295
افتراضي عمل نموذج اتصل بنا بتقنية ajax (الجزء الثاني),بوابة بدر 2013

عمل نموذج اتصل بنا بتقنية ajax (الجزء الثاني)
تحميل,تنزيل,2013,2014,ماى ايجى,تحميل مباشر,عرب سيد,برابط مباشر,سريع,تورنت,عربي,معرب,مجانا,فاينال,انجليزي,فر نسي,اخر اصدار,برابط واحد,صاروخ
عمل نموذج اتصل بنا بتقنية ajax (الجزء الثاني)
<div>
بسم الله الرحمن الرحيم

مرحبا بكم اصدقائي ..!

هذا هو الجزء الثاني من بناء نموذج اتصل بنــا

لمعاينة النموذج انتقل الى هذا الرابط : نموذج اتصل بنا

سيكون مضمون هذا الجزء :
سنقوم بعمل تحقق من البيانات التي كتبها المستخدم jquery
- سنقوم بارسال البيانات بتقنية (ajax ) jquery

انصحك قبل المتابعة قرائة الجزء الاول عمل نموذج اتصل بنا بتقنية ajax (الجزء الاول)

حيث قمنا بالجزء الاول تصميم الشكل الخارجي للنموذج .


هذا الجزء سيكون مقسم الي قسمين :
القسم الاول : عملية التحقق من مدخلات المستخدم ( validation )
القسم الثاني : ارسال البيانات بتقنية ajax

ما هي الفائدة من هذه الاجزاء ( هذا الموضوع )

الفائدة من الجزء الاول :
يقوم احيانا المستخدم بارسال رسالة فارغة !! ونحن نريد ان نمنعه !

ربما يكتب المستخدم بريد الكتروني غير صحيح بقصد او بدون . فوجب علينا تنبيهه ان البريد خاطئ!!

من الممكن ان تكون صفحة الارسال قد تعطلت ! فوجب علينا ان نخبر المستخدم ان الرسالة لم تصل بسبب حدوث خلل ما !

وغيرها من الامور التي تكون بدون قصد او بقصد من المستخدم او بعض الاخطاء بالموقع نفسه .

------------------------
اما بالنسبة للقسم الثاني :
( لا اريد ان اتكلم الان عن هذه التقنية فلها فوائد كثيرة وسيكون موضع خاص بها قريبا )
لكن هنا فائدتها هي ارسال الرسالة بدون اعادة تحميل النموذج من جديد !
--------------------------------------
بسم الله نبدأ :-

كنا بالجزء الاول قد انشئنا حقول لتعبئة البيانات من قبل المستخدم وكنا قد وضعنا id لكل حقل
وهنا اتى دور هذه الخاصية (id ) >

قبل كل شيء وجب علينا تحميل مكتبة جي كويري ..
1- يمكنك ادراج رابط المكتبة مباشرة من الانترنت . بهذا الشكل
كود بلغة HTML:

ملاحظة : يجب ان يكون هذا الكود في وسم كود بلغة HTML:




نموذج اتصل بنا





تواصل معنا

































ملف style.css
كود بلغة HTML:

#form1{ ****-align:center; width:50%; margin:70px auto;

box-shadow:#666 5px 5px 5px;
-moz-box-shadow:#666 5px 5px 5px;
-o-box-shadow:#666 5px 5px 5px;
-webkit-box-shadow:#666 5px 5px 5px;
-ms-box-shadow:#666 5px 5px 5px;

background-color:#39F;
padding-bottom:30px;
padding-top:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
}
.info {
box-shadow:#666 5px 5px 5px;
-moz-box-shadow:#666 5px 5px 5px;
-o-box-shadow:#666 5px 5px 5px;
-webkit-box-shadow:#666 5px 5px 5px;
-ms-box-shadow:#666 5px 5px 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
****-align:center;

font-size: 18px;
font-weight: 700;
padding: 3px;
height: 33px;
width:60%;

}

.infobtn {
box-shadow:#666 5px 5px 5px;
-moz-box-shadow:#666 5px 5px 5px;
-o-box-shadow:#666 5px 5px 5px;
-webkit-box-shadow:#666 5px 5px 5px;
-ms-box-shadow:#666 5px 5px 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
****-align:center;

font-size: 18px;
font-weight: 700;
padding: 3px;
height: 33px;
width:25%;

}
.msg{
resize:none;
box-shadow:#666 5px 5px 5px;
-moz-box-shadow:#666 5px 5px 5px;
-o-box-shadow:#666 5px 5px 5px;
-webkit-box-shadow:#666 5px 5px 5px;
-ms-box-shadow:#666 5px 5px 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
width:65%; height:200px;****-align:center;

font-size: 18px;
font-weight: 700;
}
#error{ background-color:#F00; width:60%; margin:0 auto; color:#FFF; ****-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
box-shadow:#666 5px 5px 5px;
-moz-box-shadow:#666 5px 5px 5px;
-o-box-shadow:#666 5px 5px 5px;
-webkit-box-shadow:#666 5px 5px 5px;
-ms-box-shadow:#666 5px 5px 5px;}
والى هنا قد انهينا الجزء الثاني !!
جرب شغله وخلي الحقول فاضية وارسل ..!!
او حط ايميل بتنسيق خطأ
او ارسل رسالة اقل من 8 حروف !!

وبعدين ارسل رسالة كاملة بدون اخطاء

وشوف النتائج

شاهد معاينة للنموذج النهائي من هنا : نموذج اتصل بنا

بقي لدينا الجزء الثالث والاخير وهو كود صفحة send.php

اذا في شي مش مفهوم وبدك توضيح اكتب في تعليق

كان الموضوع خالي من الصور لانو الانترنت عندي اقترب على انتهاء الاشتراك وهو بطيء جدا :mad:

نلتقي بالجزء الثالث ::::
في امان الله :)


عمل نموذج اتصل بنا بتقنية ajax (الجزء الثاني)
تحميل,تنزيل,2013,2014,ماى ايجى,تحميل مباشر,عرب سيد,برابط مباشر,سريع,تورنت,عربي,معرب,مجانا,فاينال,انجليزي,فر نسي,اخر اصدار,برابط واحد,صاروخ
عمل نموذج اتصل بنا بتقنية ajax (الجزء الثاني)
Eng_Badr غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
عمل نموذج اتصل بنا بتقنية ajax (الجزء الاول),بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 10-06-2014 02:42 AM
عمل نموذج تسجيل مستخدم جديد للموقع بلغة phpوhtml وcss والجافاسكربت بالصور الجزء 2,بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 23-05-2014 12:02 PM
عمل نموذج تسجيل مستخدم جديد للموقع بلغة phpوhtml وcss والجافاسكربت بالصور الجزء الاول,بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 22-05-2014 03:49 PM
عمل صفحة اتصل بنا + شرح الكود,بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 14-10-2013 07:51 AM
[Product] : هاك vb-ajaxlogin 1.0 للتسجيل في المنتدى وتسجيل الدخول بتقنية ajax الاصدار الاول Eng_Badr بوابة تطوير منتديات الجيل الثالث VB3 0 22-11-2010 09:06 PM


الساعة الآن 06:32 AM


بوابة بدر ، منتديات بوابة بدر ، برامج 2016 ، برامج شات 2016 ، برامج بورتابل 2016
BadrGate | About Us | Google Adsense Privacy Policy | DMCA | Disclaimer | Contact Us
جميع المشاركات لا تعبر عن وجهة نظر الاداره وإنما تعبر عن وجهة نظر صاحبها فقط وللإبلاغ عن اى إنتهاك للحقوق يُرجى الاتصال بنا
يمنع وضع اى مشاركات تتضمن اى انتهاك لحقوق الملكية الفكرية او الادبية لاى جهة واذا وجد اى ضرر نرجوا الاتصال بنا لعمل اللازم