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

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

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

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
قديم 22-05-2014, 03:49 PM   #1
Eng_Badr
Administrator
 
الصورة الرمزية Eng_Badr
 
تاريخ التسجيل: Jun 2010
الدولة: Egypt
العمر: 27
المشاركات: 140,237
افتراضي عمل نموذج تسجيل مستخدم جديد للموقع بلغة phpوhtml وcss والجافاسكربت بالصور الجزء الاول,بوابة بدر 2013

عمل نموذج تسجيل مستخدم جديد للموقع بلغة phpوhtml وcss والجافاسكربت بالصور الجزء الاول
تحميل,تنزيل,2013,2014,ماى ايجى,تحميل مباشر,عرب سيد,برابط مباشر,سريع,تورنت,عربي,معرب,مجانا,فاينال,انجليزي,فر نسي,اخر اصدار,برابط واحد,صاروخ
عمل نموذج تسجيل مستخدم جديد للموقع بلغة phpوhtml وcss والجافاسكربت بالصور الجزء الاول
<div>
السلام عليكم

قمت يوم امس بطرح موضوع عمل نظام تسجيل الدخول اضغط هنا لمشاهدته

واليوم ساتكلم عن طريقة عمل نظام تسجيل لمستخدم جديد registration
وسيكون الشرح بششكل مفصل اكثر من الدرس السابق حيث سيكون مدعم بصور ..
لمعاينة الدرس اضغط على الرابط التالي : معاينة تسجيل مستخدم جديد
سجل باسم مستخدم جديد ومن ثم سجل الدخول بنفس الاسم وكلمة المرور :)
---------------------------------------------------------------------
ملاحظة
هذا الدرس للتعليم فقط ولا تقم باستخدامه الا بالمواقع التي تتدرب عليها فالاكواد غبر مؤمنه وسهلة الاختراق وحقن الموقع باكواد ملغومة ,,, ساقوم بالايام القادمة بتكميل هذه الدروس حيث سنقوم باضافة اكواد حماية لتصعيب اختراق الموقع .

نبدأ باسم الله


اولا نقوم بانشاء جدول في قاعدة البيانات وليكون اسم الجدول register .
ندخل الى : كود:
phpMyAdmin


ننشئ جدول register به 3 حقول كما بالصورة !



نسمي الحقول كما بالصورة



نلاحظ ان جميع الحقول من نوع البيانات المدخلة لها هو كود:
varchar()
الان اصبح لدينا قاعدة بيانات كما يلي :
اسم قاعدة البيانات : كود:
tut
اسم الجدول : كود:
reg
حقول الجدول : كود:
user_name varchar(100)
user_pass varchar(100)
user_email varchar(100)
والان ننشئ صفحة html باسم index .
في هذه الصفحة نصمم واجهة النموذج .
سنقوم بعمل فورم ويحتوي على :
1 - حقل لاسم المستخدم
2 - حقل لكلمة المرور
3- حقل لتأكيد كلمة المرور
4- حقل للبريد الالكتروني للمستخدم
5 - زر التسجيل
ونعطي كل منها name و id و class
name : لنستخدمه في صفحة ال php
id : لنستخدمه في الجافاسكربت .
class : لنستخدمه في css .
كود صفحة HTML :
كود بلغة HTML:



****** charset="utf-8">
تسجيل الدخول





اسم المستخدم


كلمة المرور


اعد كتابة كلمة المرور


البريد الالكتروني








والصورة التالية تبين ناتج الاكواد السابقة ..



اعرف انه خطر ببالك ماذا اقصد بهذا السطر
كود بلغة HTML:

ماذا تعني كود:
onSubmit="return check()"
هذا السطر يعني عند الضغط على زر رفع البيانات اذهب الى الدالة التي اسمها check وانظر ماذا تعيد اذا كان true نفذ اذا false لا ترفع الملفات ..

داله check سنقوم ببنائها بعد قليل ,,,,!!!

الان بعد كلمة كود:

مباشرة نضيف كود css وهو المعني بالشكل او الستايل style

ويكتب كما يلي
كود:

*/هنا كود css /*

نلاحظ اننا اضفنا كلاس باسم info لكل الحقول .. ولذلك سيكون كود ال css كما يلي :
كود بلغة HTML:

#form{
width:600px;
****-align:center;
margin:0 auto;
border:1px solid #00C;
box-shadow:5px 5px 20px #999999;
background-color:#DFDFDF;
margin-top:20px;
padding:20px 0 20px 0;
}
.info{
width:300px;
height:30px;
font-size:18px;
font-weight:600;
margin-bottom:10px;

}

هكذا اصبح الكود كاملا كما يلي :

كود بلغة HTML:



****** charset="utf-8">
تسجيل الدخول


#form{
width:600px;
****-align:center;
margin:0 auto;
border:1px solid #00C;
box-shadow:5px 5px 20px #999999;
background-color:#DFDFDF;
margin-top:20px;
padding:20px 0 20px 0;
}
.info{
width:300px;
height:30px;
font-size:18px;
font-weight:600;
margin-bottom:10px;

}






اسم المستخدم



كلمة المرور



اعد كتابة كلمة المرور



البريد الالكتروني








والناتج من الكود كما بالصورة :



والان نضف كود الجافا سكربت
هذا الكود يتأكد ما اذا كانت الحقول ممتلئة ام فارغة ,, وايضا يتحقق اذا كانت كلمة المرور واعادة كتابة كلمة المرور متطابقتين ,,
الكود يكتب تحت وسم كود بلغة HTML:

مباشرة ...

الكود باختصار كما يلي :
كود بلغة HTML:

شرح الكود بسرعة :
عرفنا متغير Error وهو فارغ ..
كود:
var pass = ********.getElementById("id").value;
احضرنا قيم الحقول حسب ال id لكل منها وخزناها في متغيرات .
جملة الشرط :
[/CODE]
تعمل على : اذا كان احد القول فارغ اجعل قيمة Error كما بالكود واظهر رسالة الخطأ وارجع قيمة false

اذا كانت جميعها ممتلأة تاكد بان قيمة pass تساوي قيمة repass
اي كلمة المرور واعادة كلمة المرور اذا كانتا غير متطابقتان اظهر رسالة خطأ وارجع قيمة false

اذا كل شي تمام ارجع قيمة true ...

الان اصبح الكود كاااملا كما يلي :
كود بلغة HTML:




****** charset="utf-8">
تسجيل الدخول


#form{
width:600px;
****-align:center;
margin:0 auto;
border:1px solid #00C;
box-shadow:5px 5px 20px #999999;
background-color:#DFDFDF;
margin-top:20px;
padding:20px 0 20px 0;
}
.info{
width:300px;
height:30px;
font-size:18px;
font-weight:600;
margin-bottom:10px;

}








اسم المستخدم



كلمة المرور



اعد كتابة كلمة المرور



البريد الالكتروني









وصورة للخطأ ::



هنا انتهينا من الجزء الاول : وهو صفحة ال index.html وبناء قاعدة البيانات .... !!!

بقي علينا عملية ادخال البيانات في قاعدة البيانات ,, سيكون بالجزء الثاني ان شاء الله ..

يمكنك معاينة الدرس من هنا :: معاينة نموذج تسجيل مستخدم جديد
قم بالتسجيل باسم جديد ومن ثم قم بتسجيل الدخول بنفسم الاسم وكلمة المرور :)
-----------------------------------------------
ارجو لكم الافادة ... اي سؤال على هذا الجزء ضعه في رد .

ساقوم بتحديث الموضوع لوضع رابط الجزء الثاني


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

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


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

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

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

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

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كيفية عمل فورمات للموقع,بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 11-01-2014 11:30 AM
دروس مهمه في الجافا الجزء الاول,بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 24-09-2013 01:30 PM
طلب لعبة prince of persia 1 الجزء الاول,بوابة بدر 2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 06-09-2013 03:35 PM
[شرح] : طريقة عمل برواز رائع للموقع ويجعل الصفحه غير ممدهـ :$ Eng_Badr بوابة تطوير منتديات الجيل الثالث VB3 1 25-08-2013 01:27 AM
بوابة بدر: مطلوب لعبة igi الجزء الاول او التانى,2013 Eng_Badr تحميل احدث برامج 2017 , 2018 0 12-07-2013 06:11 PM


الساعة الآن 01:11 AM


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