متصل تويتريمكنك أن ترى الصفحة تعمل بتصميم نظيف وبسيط. انظر إلى أعلى يمين الصفحة ، سترى زرًا تفويضإلى النظام من خلال النقر على الذي ستراه شكللملء البيانات. سنخبرك اليوم بكيفية إحداث تأثير مماثل على موقع الويب الخاص بك. إنه في الواقع بسيط للغاية. بالإضافة إلى ذلك ، ستساعدك على توفير مساحة على الصفحة وتضيف إحساسًا بالراحة لزوارك. في هذه المقالة ، سنرشدك عبر خطوات كيفية عمل هذا النظام بالكامل ، وسيكون هذا الدليل مفيدًا أيضًا لمن يرغبون في التعلم مسج... إلى الأمام!
كود HTML
أولاً ، عليك أن تبدأ برمز HTML. رمز HTML بسيط للغاية - فهو يحتوي على علامة "a" ، والتي تتماشى مع علامة "fieldset" ، والتي يتم من خلالها عرض النموذج.
فقط انسخ هذا في رمز صفحتك الجديد:
هل لديك حساب؟ تسجيل الدخول
كود CSS
ستحتاج إلى استخدام CSS لتحديد زر تسجيل الدخول واستمارة تسجيل الدخول. الكود أدناه يقوم بهذه الوظيفة بالضبط.
ما عليك سوى نسخ هذا الرمز إلى ملف css ، أو إضافته إلى كود HTML حيث تحدد النمط. تحدد هذه الرموز زر التفويض.
يبدو أن أكواد HTML و CSS معقدة ومعقدة للغاية ، ولكن في جافا سكريبت كل شيء بسيط للغاية. ما عليك سوى نسخ رمز جافا سكريبت هذا ، حيث سيكون من الممكن عرض النموذج وإخفائه في لحظة النقر فوق زر التفويض ، حتى إذا تم النقر خارج نموذج تسجيل الدخول.
وفقًا للرمز أعلاه ، عندما ينقر الزائر على زر التفويض ، يتم تشغيل وظيفة جديدة. أولاً ، يتم عرض نموذج تسجيل الدخول (المرفق في علامة "مجموعة الملفات") ، ثم يضيف الرابط الموجود في فئة ".signin" فئة "فتح قائمة" أخرى ، مما يؤدي إلى تغيير صورة الخلفية.
حدث آخر في هذا الرمز هو أنه عندما لا ينقر الزائرون على نموذج تسجيل الدخول ، ولكن في مكان ما على الصفحة ، يتم إغلاق النموذج من تلقاء نفسه. بمعنى آخر ، تقوم فئة "menu-open" بإزالة الرابط مع فئة ".signin" وتعيد صورة الخلفية الأصلية إليها.
أما عن التلميحات؟
نوصي عادة باستخدام jQuery plugin - سكران... محتوى تلميح الأداة هو ما هو مكتوب في سمة "العنوان" للارتباط. يمكنك تغيير موضع التلميح بالنسبة إلى الشرق أو الغرب أو الجنوب أو الشمال. يتم ذلك من خلال معلمة "الجاذبية" المحددة في الكود أعلاه. نوفر لك رابطًا لموقع مخصص لهذا المكون الإضافي ، حيث يمكنك دراسة إمكانياته بمزيد من التفاصيل وتنزيل المكون الإضافي. ...
أخيرا
إذا قمت بنسخ جميع التعليمات البرمجية من هذه المقالة ، فالرجاء عدم تغيير بنية المجلد. إذا قمت بتغييره ، فلن يعمل الرمز. هذا الرمز هو مجرد مثال على إنشاء نموذج تسجيل الدخول المنسدل باستخدام jQuery... حظا سعيدا مع ممارستك!
في هذا البرنامج التعليمي ، سننشئ نموذجًا أنيقًا لتسجيل الدخول على الموقع ، يمكنك العثور عليه في Futurico UI Pro ، الذي أنشأه فلاديمير كودينوف. سنستخدم CSS3 و jQuery لإنشاء النموذج.
الخطوة 1 - ترميز HTML
لنبدأ بإنشاء ترميز HTML. دعنا ننشئ نموذجًا بأربعة مدخلات (اسم المستخدم وكلمة المرور ومربع الاختيار وزر "إرسال"). سنقوم بلف مربع الاختيار في علامة الامتداد التي سنستخدمها لتصميم مربع الاختيار هذا. بعد ذلك ، سنقوم بلف النموذج والعنوان في علامة DIV ونقوم بتعيين فئة "نموذج تسجيل الدخول" إليها.
إذا كانت لديك أي أسئلة ، فإننا نوصي باستخدام منتدانا للحصول على إجابة في أسرع وقت ممكن.
يستجيب لوظائف نماذج تسجيل الدخول والتسجيل ، مع إمكانية التبديل الديناميكي ، دون إعادة تحميل الصفحة. بعد ظهور النافذة ، يمكن للمستخدم التبديل بسهولة من واحد إلى آخر ، وإذا لزم الأمر ، حدد خيار تغيير كلمة المرور. سننظر اليوم في كيفية تنفيذ كل هذا باستخدام مجموعة من المكوِّن الإضافي jQuery الصغير ولكن العملي للغاية ومعايير CSS3 الجديدة.
ستكون هذه الطريقة مفيدة إذا كنت تريد إتاحة استمارات تسجيل الدخول والتسجيل للمستخدمين في كل صفحة من صفحات موقعك. عند الدخول إلى الموقع أو التسجيل ، لن يتم إعادة توجيه المستخدمين إلى صفحة أخرى ، وسيتمكنون من تنفيذ جميع الإجراءات الضرورية "دون مغادرة الخروج" ، كل ذلك في صفحة واحدة.
يتم تنفيذ تصميم مظهر النماذج المنبثقة باستخدام CSS3 ، والوزن الإجمالي للمكوِّن الإضافي ليس كبيرًا على الإطلاق ، وتحدث استجابة وتحميل النافذة المشروطة عمليًا دون تأخير. يتم تعيين التخطيط المتجاوب بنسبة 100٪ وارتفاع وعرض النموذج مع النماذج تلقائيًا لتلائم أحجام شاشات أجهزة المستخدم.
لقد نظرنا إلى أحد الأمثلة ، والآن دعونا نلقي نظرة على جميع المكونات الرئيسية للنافذة النموذجية والنماذج من أجل معرفة كيفية استخدامها على موقعنا على الإنترنت. تم إنشاء النافذة المنبثقة التي تحتوي على نماذج تسجيل الدخول والتسجيل على مكتبة جافا سكريبت الشهيرة ، والمكوِّن الإضافي jQuey القابل للتنفيذ وأنماط CSS التي تم إنشاؤها. كل هذه الأدوات تحتاج إلى أن تكون مرتبطة بموقعك. يمكن توصيل أحدث إصدار من مكتبة jQuey مباشرة من Google ، ويمكن العثور على ملف المكون الإضافي main.js نفسه ومجموعة جاهزة من الأنماط التي تم إنشاؤها ، style.css ، في الأرشيف. جافا سكريبت قبل علامة الإغلاق، يمكن نسخ أنماط CSS وإضافتها إلى ملف stylesheet.css الخاص بموقعك.
بنية HTML:
يتم وضع الحاوية الأساسية للنوافذ المشروطة على خلفية مظلمة والنماذج المضمنة مع عناصر التحكم في نص الصفحة. من أجل فهم أفضل ، قمت بتحديد القطاعات وإضافة التعليقات. ترتبط جميع عناصر التصميم ارتباطًا وثيقًا بـ CSS من خلال فئات محددة ، لذلك من السهل إعادة تصميم النماذج لتناسب التصميم العام لمواقعك.
<
div class
=
"cd-user-modal"
>
<
div class
=
"cd-user-modal-container"
>
<
ul class
=
"cd-switcher"
>
<
li><
a href=
"#0"
>مدخل
<
li><
a href=
"#0"
>التسجيل
<
div id=
"cd-login"
>
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"signin-email"
>بريد الالكتروني
<
input class
=
id=
"signin-email"
type=
"email"
placeholder=
"بريد الالكتروني"
>
<
span class
=
"cd-error-message"
>ها هي رسالة الخطأ!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-password"
for
=
"signin-password"
>كلمه السر
<
input class
=
"ذات حدود ذات حشوة كاملة العرض"معرف = "تسجيل الدخول-كلمة المرور" type = "text" placeholder = "(! LANG: Password"
>
!}<
a href=
"#0"
class
=
"hide-password"
>إخفاء
<
span class
=
"cd-error-message"
>ها هي رسالة الخطأ!
<
p class
=
"fieldset"
>
<
input type=
"checkbox"
id=
"remember-me"
checked>
<
label for
=
"remember-me"
>تذكرنى
<
p class
=
"fieldset"
>
<
input class
=
"full-width"
type=
"submit"
value=
"ليأتي"
>
<
p class
=
"cd-form-bottom-message"
><
a href=
"#0"
>نسيت رقمك السري؟
<
div id=
"cd-signup"
>
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-username"
for
=
"signup-username"
>اسم المستخدم
<
input class
=
"ذات حدود ذات حشوة كاملة العرض" id = "signup-username" type = "text" placeholder = "اسم المستخدم">
<
span class
=
"cd-error-message"
>ها هي رسالة الخطأ!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"signup-email"
>بريد الالكتروني
<
input class
=
"ذات حدود ذات حشوة كاملة العرض"معرف = "تسجيل البريد الإلكتروني" type = "email" placeholder = "(! LANG: E-mail"
>
!}<
span class
=
"cd-error-message"
>ها هي رسالة الخطأ!
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-password"
for
=
"signup-password"
>كلمه السر
<
input class
=
"ذات حدود ذات حشوة كاملة العرض" id = "signup-password" type = "text" placeholder = "(! LANG: Password"
>
!}<
a href=
"#0"
class
=
"hide-password"
>إخفاء
<
span class
=
"cd-error-message"
>ها هي رسالة الخطأ!
<
p class
=
"fieldset"
>
<
input type=
"checkbox"
id=
"accept-terms"
>
<
label for
=
"accept-terms"
>أنا أتفق مع<
a href=
"#0"
>شروط
<
p class
=
"fieldset"
>
<
input class
=
"full-width has-padding"
type=
"submit"
value=
"انشئ حساب">
<
div id=
"cd-reset-password"
>
<
p class
=
"cd-form-message"
>نسيت رقمك السري؟ الرجاء إدخال عنوان البريد الإلكتروني الخاص بك. سوف تتلقى رابطًا لإنشاء كلمة مرور جديدة.
<
form class
=
"cd-form"
>
<
p class
=
"fieldset"
>
<
label class
=
"image-replace cd-email"
for
=
"reset-email"
>بريد الالكتروني
<
input class
=
"ذات حدود ذات حشوة كاملة العرض" id = "reset-email" type = "email" placeholder = "(! LANG: E-mail"
>
!}<
span class
=
"cd-error-message"
>ها هي رسالة الخطأ!
<
p class
=
"fieldset"
>
<
input class
=
"full-width has-padding"
type=
"submit"
value=
"استعادة كلمة المرور">
<
p class
=
"cd-form-bottom-message"
><
a href=
"#0"
>العودة إلى المدخل
<
a href=
"#0"
class
=
"cd-close-form"
>قريب
مدخل
التسجيل
نسيت رقمك السري؟
نسيت رقمك السري؟ الرجاء إدخال عنوان البريد الإلكتروني الخاص بك. سوف تتلقى رابطًا لإنشاء كلمة مرور جديدة.
العودة إلى المدخل
قريب
أنماط CSS:
تم تصميم القالب الأساسي وعناصر تحكم النموذج في النمط المسطح الشائع ، مع التركيز الواضح على البساطة. لا شيء غير ضروري وخلفية تظليل شفافة بشكل معتدل وألوان سهلة القراءة وخط ورموز تم اختياره جيدًا للإشارة إلى حقول الإدخال. باستخدام خصائص CSS ، يمكنك بسهولة تعديل أي عنصر نموذج.
.cd-user-modal (الموضع: ثابت ؛ علوي: 0 ؛ يسار: 0 ؛ عرض: 100٪ ؛ ارتفاع: 100٪ ؛ الخلفية: rgba (52 ، 54 ، 66 ، 0.9) ؛ z-index: 3 ؛ overflow- y: تلقائي ؛ المؤشر: المؤشر ؛ الرؤية: مخفي ؛ العتامة: 0 ؛ -مجموعة الويب-الانتقال: عتامة 0.3 ثانية 0 ، رؤية 0 0.3 ثانية ؛ -موز-انتقال: عتامة 0.3 ثانية 0 ، رؤية 0 0.3 ثانية ؛ انتقال: عتامة 0.3 s 0، visibility 0 0.3s؛) .cd-user-modal .is-visual (visibility: visual؛ opacity: 1؛ -webkit-transfer: opacity 0.3s 0، visibility 0 0؛ -moz-transfer: opacity 0.3s 0 ، الرؤية 0 0 ؛ الانتقال: العتامة 0.3 ثانية 0 ، الرؤية 0 0 ؛) .cd-user-modal .is-visual .cd-user-modal-container (-webkit-transform: translateY (0)؛ -moz- تحويل: translateY (0) ؛ -ms-transform: translateY (0) ؛ -o-transform: translateY (0) ؛ التحويل: translateY (0) ؛) .cd-user-modal-container (position: النسبي ؛ العرض: 90٪ ؛ ماكس واي دث: 600 بكسل ؛ الخلفية: #FFF ؛ الهامش: 3em auto 4em ؛ المؤشر: تلقائي ؛ نصف قطر الحدود: 0.25em ؛ -webkit- تحويل: translateY (-30px) ؛ -موز-تحويل: translateY (-30px) ؛ -ms- تحويل: translateY (-30px) ؛ -o-تحويل: translateY (-30px) ؛ التحويل: translateY (-30px) ؛ -webkit-transfer-property: -webkit-transform ؛ -موز-انتقال-خاصية:-تحويل-موز. خاصية الانتقال: تحويل ؛ -مدة انتقال -webkit: 0.3 ثانية ؛ -مدة انتقال: 0.3 ثانية ؛ مدة الانتقال: 0.3 ثانية ؛ ) .cd-user-modal-container .cd-switcher: after (content: ""؛ display: table؛ clear: both؛) .cd-user-modal-container .cd-switcher li (width: 50٪؛ float : يسار ؛ محاذاة النص: مركز ؛) .cd-user-modal-container .cd-switcher li: first-child a (border-radius: .25em 0 0 0؛) .cd-user-modal-container .cd -switcher li: last-child a (border-radius: 0 .25em 0 0؛) .cd-user-modal-container .cd-switcher a (display: block؛ width: 100٪؛ height: 50px؛ line-height : 50px؛ background: # d2d8d8؛ color: # 809191؛) .cd-user-modal-container .cd-switcher a.selected (background: #FFF؛ color: # 505260؛) @ media only screen and (min-width : 600 بكسل) (.cd-user-modal-container (margin: 4em auto؛) .cd-user-modal-container .cd-switcher a (height: 70px؛ line-height: 70px؛)) .cd-form ( الحشو: 1. 4em ؛ ) .cd-form .fieldset (position: النسبي ؛ margin: 1.4em 0 ؛) .cd-form .fieldset: first-child (margin-top: 0 ؛) .cd-form .fieldset: last-child (margin- أسفل: 0 ؛). / * استبدال النص بالرمز * /عرض: مضمنة كتلة ؛ الموقف: مطلق. اليسار: 15 بكسل ؛ أعلى: 50٪؛ أسفل: تلقائي ؛ -webkit- تحويل: translateY (-50٪) ؛ -موز-تحويل: translateY (-50٪) ؛ -ms- تحويل: translateY (-50٪) ؛ -o-تحويل: translateY (-50٪) ؛ التحويل: translateY (-50٪) ؛ الارتفاع: 20 بكسل ؛ العرض: 20 بكسل ؛ تجاوز:
مختفي;
المسافة البادئة النص:
100%
;
مساحة بيضاء:
نوراب;
اللون:
شفاف;
ظل النص:
لا أحد;
تكرار الخلفية:
لا تكرار;
خلفية الموقف:
50%
0
;
}
/ * أيقونات حقول الإدخال * /شكل .cdضع الكلمة المناسبة .cd-username{
الصورة الخلفية:
عنوان url("../img/cd-icon-username.svg")
;
}
شكل .cdضع الكلمة المناسبة .cd- البريد الإلكتروني{
الصورة الخلفية:
عنوان url("../img/cd-icon-email.svg")
;
}
شكل .cdضع الكلمة المناسبة .cd- كلمة المرور{
الصورة الخلفية:
عنوان url("../img/cd-icon-password.svg")
;
}
شكل .cdإدخال {
هامش:
0
;
حشوة:
0
;
نصف قطر الحد:
0.25em;
}
شكل .cdإدخال .full-width{
العرض:
100%
;
}
شكل .cdإدخال .has-padding{
حشوة:
12 بكسل20 بكسل12 بكسل50 بكسل;
}
شكل .cdإدخال .has-border{
الحدود:
1 بكسلصلب# d2d8d8;
-مظهر- webkit :
لا أحد;
-مظ- المظهر :
لا أحد;
-ms- المظهر :
لا أحد;
-o- المظهر :
لا أحد;
مظهر خارجي :
لا أحد;
}
شكل .cdإدخال .has-border:
التركيز{
لون الحدود:
#343642
;
مربع الظل:
0
0
5 بكسلrgba(52
,
54
,
66
,
0.1
)
;
الخطوط العريضة:
لا أحد;
}
شكل .cdإدخال . لديها خطأ{
الحدود:
1 بكسلصلب# d76666;
}
شكل .cdإدخال [
نوع =
كلمه السر ]
{
/ * مساحة لزر الإخفاء * /المساحة المتروكة لليمين:
65 بكسل;
}
شكل .cdإدخال [
نوع =
إرسال ]
{
حشوة:
16 بكسل0
;
المؤشر:
المؤشر;
معرفتي:
# 2f889a;
اللون:
#FFF;
وزن الخط:
بالخط العريض;
الحدود:
لا أحد;
-مظهر- webkit :
لا أحد;
-مظ- المظهر :
لا أحد;
-ms- المظهر :
لا أحد;
-o- المظهر :
لا أحد;
مظهر خارجي :
لا أحد;
}
.لا للمسشكل .cdإدخال [
نوع =
إرسال ]
:
يحوم,
.لا للمسشكل .cdإدخال [
نوع =
إرسال ]
:
التركيز{
معرفتي:
# 3599ae;
الخطوط العريضة:
لا أحد;
}
شكل .cd.اخفاء كلمة المرور{
عرض:
مضمنة كتلة;
موقع:
مطلق;
حق:
0
;
أعلى:
0
;
حشوة:
6 بكسل15 بكسل;
يسار الحد:
1 بكسلصلب# d2d8d8;
أعلى:
50%
;
قاع:
تلقاءي;
-webkit- تحويل :
ترجم (-50%
)
;
-موز-تحويل :
ترجم (-50%
)
;
-ms- تحويل :
ترجم (-50%
)
;
-o- تحويل :
ترجم (-50%
)
;
تحول:
ترجم (-50%
)
;
حجم الخط:
14 بكسل;
حجم الخط:
0.875 ريم;
اللون:
#343642
;
}
شكل .cd.cd- رسالة خطأ{
عرض:
مضمنة كتلة;
موقع:
مطلق;
اليسار:
-5 بكسل;
قاع:
-35 بكسل;
معرفتي:
rgba(215
,
102
,
102
,
0.9
)
;
حشوة:
.8em;
الفهرس z:
2
;
اللون:
#FFF;
حجم الخط:
13 بكسل;
حجم الخط:
0.8125 ريم;
نصف قطر الحد:
0.25em;
/ * منع النقرات واللمسات * /مؤشر الأحداث:
لا أحد;
الرؤية:
مختفي;
العتامة:
0
;
-webkit- الانتقال :
العتامة 0.2 ثانية0
,
الرؤية 0
0.2 ثانية;
-موز-الانتقال :
العتامة 0.2 ثانية0
,
الرؤية 0
0.2 ثانية;
انتقال:
العتامة 0.2 ثانية0
,
الرؤية 0
0.2 ثانية;
}
شكل .cd.cd- رسالة خطأ::
بعد، بعدما{
/ * ركن رسالة الخطأ * /المحتوى:
""
;
موقع:
مطلق;
اليسار:
22 بكسل;
قاع:
100%
;
ارتفاع:
0
;
العرض:
0
;
يسار الحد:
8 بكسلصلبشفاف;
يمين الحدود:
8 بكسلصلبشفاف;
الحد السفلي:
8 بكسلصلبrgba(215
,
102
,
102
,
0.9
)
;
}
شكل .cd.cd- رسالة خطأ.مرئي{
العتامة:
1
;
الرؤية:
مرئي;
-webkit- الانتقال :
العتامة 0.2 ثانية0
,
الرؤية 0
0
;
-موز-الانتقال :
العتامة 0.2 ثانية0
,
الرؤية 0
0
;
انتقال:
العتامة 0.2 ثانية0
,
الرؤية 0
0
;
}
@وسائطالشاشة فقط و (العرض الأدنى:
600 بكسل)
{
شكل .cd{
حشوة:
2em;
}
شكل .cd.fieldset{
هامش:
2em0
;
}
شكل .cd.fieldset:
الطفل الأول{
الهامش العلوي:
0
;
}
شكل .cd.fieldset:
الطفل الأخير{
الهامش السفلي:
0
;
}
شكل .cdإدخال .has-padding{
حشوة:
16 بكسل20 بكسل16 بكسل50 بكسل;
}
شكل .cdإدخال [
نوع =
إرسال ]
{
حشوة:
16 بكسل0
;
}
}
.cd- شكل رسالة{
حشوة:
1.4em1.4em0
;
حجم الخط:
14 بكسل;
حجم الخط:
0.875 ريم;
ارتفاع خط:
1.4
;
محاذاة النص:
المركز;
}
@وسائطالشاشة فقط و (العرض الأدنى:
600 بكسل)
{
.cd- شكل رسالة{
حشوة:
2em2em0
;
}
}
cd- شكل- أسفل الرسالة{
موقع:
مطلق;
العرض:
100%
;
اليسار:
0
;
قاع:
-30 بكسل;
محاذاة النص:
المركز;
حجم الخط:
14 بكسل;
حجم الخط:
0.875 ريم;
}
cd- شكل- أسفل الرسالةأ {
اللون:
#FFF;
زخرفة النص:
تسطير;
}
.cd- شكل وثيق{
/ * النمط X زر أعلى اليمين * /عرض:
منع;
موقع:
مطلق;
العرض:
40 بكسل;
ارتفاع:
40 بكسل;
حق:
0
;
أعلى:
-40 بكسل;
معرفتي:
عنوان url("../img/cd-icon-close.svg")
لا تكرارالمركزالمركز;
المسافة البادئة النص:
100%
;
مساحة بيضاء:
نوراب;
تجاوز:
مختفي;
}
@وسائطالشاشة فقط و (العرض الأدنى:
1170 بكسل)
{
.cd- شكل وثيق{
عرض:
لا أحد;
}
}
# تسجيل الدخول إلى القرص المضغوط,
# الاشتراك في القرص المضغوط,
# cd- إعادة تعيين كلمة المرور{
عرض:
لا أحد;
}
# تسجيل الدخول إلى القرص المضغوط.تم الإختيار,
# الاشتراك في القرص المضغوط.تم الإختيار,
# cd- إعادة تعيين كلمة المرور.تم الإختيار{
عرض:
منع;
}
مشغل القرص المضغوط (الموضع: ثابت ؛ أعلى: 0 ؛ يسار: 0 ؛ عرض: 100٪ ؛ ارتفاع: 100٪ ؛ الخلفية: rgba (52 ، 54 ، 66 ، 0.9) ؛ مؤشر z: 3 ؛ تجاوز- y : تلقائي ؛ المؤشر: المؤشر ؛ الرؤية: مخفي ؛ التعتيم: 0 ؛ -مجموعة الويب-الانتقال: التعتيم 0.3 ثانية 0 ، الرؤية 0 0.3 ثانية ؛ -موز-الانتقال: العتامة 0.3 ثانية 0 ، الرؤية 0 0.3 ثانية ؛ الانتقال: التعتيم 0.3 ثانية 0، visibility 0 0.3s؛) .cd-user-modal.is-visual (visibility: visibility: opacity: 1؛ -webkit-transfer: opacity 0.3s 0، visibility 0 0؛ -moz-transfer: opacity 0.3s 0 ، الرؤية 0 0 ؛ الانتقال: العتامة 0.3 ثانية 0 ، الرؤية 0 0 ؛) .cd-user-modal.is-visual .cd-user-modal-container (-webkit-transform: translateY (0)؛ -moz-transform : translateY (0)؛ -ms-transform: translateY (0)؛ -o-transform: translateY (0)؛ transform: translateY (0)؛) .cd-user-modal-container (position: النسبي ؛ width: 90 ٪؛ max-width: 600px؛ background: #FFF؛ margin: 3em auto 4em؛ cursor: auto؛ border-radius: 0.25em؛ -webkit-transform: translateY (-30px)؛ -moz-transform: translateY (-30px) ؛ -ms- تحويل: translateY (-30px) ؛ -o-تحويل: translateY (-30px) ؛ التحويل: translateY (-30px) ؛ -webkit-transfer-property: -webkit-transform ؛ -موز-انتقال-خاصية:-تحويل-موز. خاصية الانتقال: تحويل ؛ -مدة انتقال -webkit: 0.3 ثانية ؛ -مدة انتقال: 0.3 ثانية ؛ مدة الانتقال: 0.3 ثانية ؛ ) .cd-user-modal-container .cd-switcher: after (content: ""؛ display: table؛ clear: both؛) .cd-user-modal-container .cd-switcher li (width: 50٪؛ float : يسار ؛ محاذاة النص: مركز ؛) .cd-user-modal-container .cd-switcher li: first-child a (border-radius: .25em 0 0 0؛) .cd-user-modal-container .cd -switcher li: last-child a (border-radius: 0 .25em 0 0؛) .cd-user-modal-container .cd-switcher a (display: block؛ width: 100٪؛ height: 50px؛ line-height : 50px؛ background: # d2d8d8؛ color: # 809191؛) .cd-user-modal-container .cd-switcher a.selected (background: #FFF؛ color: # 505260؛) @ media only screen and (min-width : 600 بكسل) (.cd-user-modal-container (margin: 4em auto؛) .cd-user-modal-container .cd-switcher a (height: 70px؛ line-height: 70px؛)) .cd-form ( padding: 1.4em؛) .cd-form .fieldset (position: النسبي ؛ margin: 1.4em 0 ؛) .cd-form .fieldset: First-child (margin-top: 0؛) .cd-form .fieldset: last -الطفل (الهامش السفلي: 0 ؛) ه: 14 بكسل ؛ حجم الخط: 0.875rem ؛ ) .cd-form label.image-replace (/ * استبدل النص برمز * / عرض: كتلة مضمنة ؛ موضع: مطلق ؛ يسار: 15 بكسل ؛ أعلى: 50٪ ؛ أسفل: تلقائي ؛ -webkit-transform: translateY (- 50٪) ؛ -موز-تحويل: translateY (-50٪) ؛ -ms-transform: translateY (-50٪) ؛ -o-transform: translateY (-50٪) ؛ التحويل: translateY (-50٪) ؛ الارتفاع : 20 بكسل ؛ العرض: 20 بكسل ؛ تجاوز: مخفي ؛ مسافة بادئة نصية: 100٪ ؛ مسافة بيضاء: nowrap ؛ اللون: شفاف ؛ ظل النص: لا شيء ؛ تكرار الخلفية: عدم التكرار ؛ موضع الخلفية: 50٪ 0 ؛ ) / * رموز حقل الإدخال * / .cd-form label.cd-username (background-image: url (". ./img/cd-icon-username.svg ") ؛) .cd-form label.cd-email (background-image: url (" ../ img / cd-icon-email.svg ") ؛) .cd -form label.cd-password (background-image: url ("../ img / cd-icon-password.svg") ؛). cd-form input (margin: 0؛ padding: 0؛ border-radius: 0.25 em؛). cd-form input.full-width (width: 100٪؛) .cd-form input.has-padding (padding: 12px 20px 12px 50px؛). صلب # d2d8d8 ؛ -مظهر مجموعة الويب: لا شيء ؛ -مظ-المظهر: لا شيء ؛ -ms-المظهر: لا شيء ؛ -o-المظهر: لا شيء ؛ المظهر: لا شيء ؛). cd-form input.has-border: focus (border -color: # 343642؛ box-shadow: 0 0 5px rgba (52، 54، 66، 0.1) ؛ المخطط التفصيلي: لا شيء ؛) .إدخال شكل cd يحتوي على خطأ (الحد: 1 بكسل صلب # d76666 ؛). cd- إدخال النموذج (/ * space for Hide button * / padding-right: 65px؛). cd-form input (padding: 16px 0؛ cursor: pointer؛ background: # 2f889a؛ color: #FFF؛ font-weight: bold؛ border : لا شيء ؛ -كيت-المظهر: لا شيء ؛ -موز-المظهر: لا شيء ؛ -مظهر-: لا شيء ؛ -o- المظهر: لا شيء ؛ المظهر: لا شيء ؛ ). no-touch. cd-form input: hover،. no-touch. الموضع: مطلق ؛ يمين: 0 ؛ أعلى: 0 ؛ حشوة: 6 بكسل 15 بكسل ؛ حد يسار: 1 بكسل صلب # d2d8d8 ؛ أعلى: 50٪ ؛ أسفل: تلقائي ؛ -webkit-transform: translateY (-50٪) ؛ -moz- تحويل: translateY (-50٪)؛ -ms-transform: translateY (-50٪)؛ -o-transform: translateY (-50٪)؛ transform: translateY (-50٪)؛ font-size: 14px؛ font- الحجم: 0.875rem ؛ اللون: # 343642 ؛) .cd-form .cd-error-message (عرض: كتلة مضمنة ؛ الموضع: مطلق ؛ اليسار: -5 بكسل ؛ أسفل: -35 بكسل ؛ الخلفية: rgba (215 ، 102 ، 102 ، 0.9) ؛ الحشو: .8em ؛ z-index: 2 ؛ اللون: #FFF ؛ حجم الخط: 13 بكسل ؛ حجم الخط: 0.8125rem ؛ نصف قطر الحد: 0.25em ؛ / * منع النقرات واللمسات * / المؤشر - الأحداث: لا شيء ؛ الرؤية: مخفية ؛ التعتيم: 0 ؛ - مجموعة الويب - الانتقال: التعتيم 0.2 ثانية 0 ، الرؤية 0 0.2 ثانية ؛ - الانتقال: التعتيم 0.2 ثانية 0 ، الرؤية 0 0.2 ثانية ؛ الانتقال: العتامة 0.2 ثانية 0 ، فيزي قدرة 0 0.2 ثانية ؛ ) .cd-form .cd-error-message :: after (/ * ركن رسالة الخطأ * / content: "" ؛ الموضع: مطلق ؛ اليسار: 22 بكسل ؛ الأسفل: 100٪ ؛ الارتفاع: 0 ؛ العرض: 0 ؛ حد اليسار: 8 بكسل خالص شفاف ؛ حد-يمين: 8 بكسل خالص شفاف ؛ حد سفلي: 8 بكسل صلب rgba (215 ، 102 ، 102 ، 0.9) ؛) .cd-form .cd-error-message.is-visual (عتامة : 1 ؛ الرؤية: مرئي ؛ -انتقال مجموعة الويب: عتامة 0.2 ثانية 0 ، رؤية 0 0 ؛ -موز-انتقال: عتامة 0. 2s 0 ، الرؤية 0 0 ؛ الانتقال: العتامة 0.2 ثانية 0 ، الرؤية 0 0 ؛ )media only screen and (min-width: 600px) (.cd-form (padding: 2em؛) .cd-form .fieldset (margin: 2em 0؛) .cd-form .fieldset: first-child (margin- أعلى: 0 ؛) .cd-form .fieldset: last-child (margin-bottom: 0؛) .cd-form input.has-padding (padding: 16px 20px 16px 50px؛). cd-form input (padding: 16px 0؛)) .cd-form-message (المساحة المتروكة: 1.4em 1.4em 0 ؛ حجم الخط: 14 بكسل ؛ حجم الخط: 0.875rem ؛ ارتفاع السطر: 1.4 ؛ محاذاة النص: المركز ؛) شاشة @ الوسائط فقط و (min-width: 600px) (.cd-form-message (padding: 2em 2em 0؛)) .cd-form-bottom-message (الموضع: مطلق ؛ عرض: 100٪ ؛ يسار: 0 ؛ أسفل: -30 بكسل ؛ محاذاة النص: مركز ؛ حجم الخط: 14 بكسل ؛ حجم الخط: 0.875rem ؛). cd-form-bottom-message a (color: #FFF؛ text-decoration: underline؛) .cd-close-form (/ * النمط X للزر العلوي الأيمن * / العرض: منع ؛ الموضع: مطلق ؛ العرض: 40 بكسل ؛ الارتفاع: 40 بكسل ؛ اليمين: 0 ؛ أعلى: -40 بكسل ؛ الخلفية: url ("../ img / cd-icon-close. svg ") مركز عدم تكرار ؛ مسافة بادئة نصية: 100 ٪؛ مساحة بيضاء: نوراراب. إخفاء الفائض؛ )media only screen and (min-width: 1170px) (.cd-close-form (display: none؛)) # cd-login، # cd-signup، # cd-reset-password (display: none؛) # cd-login.is-selected، # cd-signup.is-selected، # cd-reset-password.is-selected (display: block؛)
في تأثير انتقال الخبو ، تمت إضافة تأخير لجعل التلاشي الشرطي يتلاشى عند الإغلاق.
ملحوظة:. حجم الخط الافتراضي لجميع حقول الإدخال هو 16 بكسل. هذا يمنع القياس التلقائي الذي يحدث عند العرض على الأجهزة المحمولة.
يقع إصدار المؤلف البرجوازي من البرنامج المساعد. في نفس المكان يمكنك تنزيل النسخة الأصلية. النسخة الروسية ، يمكنك الحصول عليها من Yandex.Disk الخاص بي ، جميع الملفات الضرورية معبأة بعناية في أرشيف واحد ، قبل ذلك ، لا تنسى إلقاء نظرة على المثال الحي المكيف بالكامل لعمل هذا البرنامج المساعد jQuery الرائع:
مع كل الاحترام ، أندرو
في هذه المقالة سوف تتعلم كيفية إنشاء استمارة التسجيل والتفويضباستخدام HTML و JavaScript و PHP و MySql. يتم استخدام هذه النماذج في كل موقع تقريبًا ، بغض النظر عن نوعه. تم إنشاؤها للمنتدى والمتجر عبر الإنترنت ولشبكات التواصل الاجتماعي (على سبيل المثال ، Facebook و Twiter و Odnoklassniki) والعديد من أنواع المواقع الأخرى.
إذا كان لديك موقع على جهاز الكمبيوتر المحلي الخاص بك ، فعندئذ آمل أن يكون لديك بالفعل. لا شيء سيعمل بدونه.
إنشاء جدول في قاعدة البيانات
من أجل تنفيذ تسجيل المستخدم ، نحتاج أولاً وقبل كل شيء إلى قاعدة بيانات. إذا كان لديك بالفعل ، فهذا رائع ، وإلا فأنت بحاجة إلى إنشائه. في هذه المقالة ، أشرح بالتفصيل كيفية القيام بذلك.
وهكذا ، لدينا قاعدة بيانات (اختصارها قاعدة بيانات) ، والآن نحتاج إلى إنشاء جدول المستخدمينحيث سنضيف مستخدمينا المسجلين.
شرحت أيضًا كيفية إنشاء جدول في قاعدة بيانات في المقالة. قبل إنشاء الجدول ، نحتاج إلى تحديد الحقول التي سيحتويها. تتوافق هذه الحقول مع الحقول الموجودة في استمارة التسجيل.
لذلك ، فكرنا في تخيل الحقول التي سيحتويها النموذج الخاص بنا وإنشاء جدول المستخدمينمع الحقول مثل هذا:
هوية شخصية- المعرف. حقل هوية شخصيةيجب أن يحتوي كل جدول من قاعدة البيانات.
الاسم الأول- لحفظ الاسم.
الكنية- لحفظ الألقاب.
البريد الإلكتروني- لحفظ العنوان البريدي. سنستخدم البريد الإلكتروني لتسجيل الدخول ، لذلك يجب أن يكون هذا الحقل فريدًا ، أي يجب أن يحتوي على فهرس فريد.
البريد الإلكتروني- حقل للإشارة إلى ما إذا كان البريد مؤكدًا أم لا. إذا تم تأكيد البريد ، فسيكون له القيمة 1 ، وإلا فإن القيمة 0. بشكل افتراضي ، سيكون لهذا الحقل القيمة 0.
كلمه السر- لحفظ كلمة المرور.
يجب أن تحتوي جميع الحقول من النوع "VARCHAR" على قيمة افتراضية هي NULL.
إذا كنت تريد أن يحتوي نموذج التسجيل الخاص بك على المزيد من الحقول ، فيمكنك إضافتها هنا أيضًا.
كل شيء ، طاولتنا المستخدمينجاهز. دعنا ننتقل إلى الخطوة التالية.
اتصال قاعدة البيانات
لقد أنشأنا قاعدة البيانات ، والآن نحتاج إلى الاتصال بها. سنتصل باستخدام امتداد PHP MySQLi.
في مجلد موقعنا ، قم بإنشاء ملف باسم dbconnect.phpوفيه نكتب النص التالي:
خطأ اتصال قاعدة البيانات... وصف الخطأ: ".mysqli_connect_error ()."
"؛ exit ()؛) // تعيين ترميز الاتصال $ mysqli-> set_charset (" utf8 ")؛ // للراحة ، دعنا نضيف متغيرًا هنا يحتوي على اسم موقعنا $ address_site =" http: // testite.local "؛؟>
هذا الملف dbconnect.phpسوف تحتاج إلى التوصيل لتشكيل معالجات.
انتبه إلى المتغير $ address_site، هنا أشرت إلى اسم موقع الاختبار الخاص بي الذي سأعمل عليه. أنت على التوالي ، أشر إلى اسم موقعك.
هيكل الموقع
الآن دعنا نلقي نظرة على بنية HTML لموقعنا.
سننقل رأس وتذييل الموقع إلى ملفات منفصلة ، header.phpو تذييل. php... سنقوم بتضمينها في جميع الصفحات. وهي الرئيسية (ملف index.php) ، إلى الصفحة التي تحتوي على نموذج التسجيل (ملف form_register.php) والصفحة التي تحتوي على نموذج التفويض (ملف form_auth.php).
حظر مع روابطنا ، التسجيلو تفويض، أضف إلى رأس الموقع بحيث يتم عرضها في جميع الصفحات. سوف يدخل رابط واحد في صفحة استمارة التسجيل(ملف form_register.php) والآخر على الصفحة التي بها نمو ذج تفويض(ملف form_auth.php).
محتوى ملف header.php:
اسم موقعنا
نتيجة لذلك ، تبدو الصفحة الرئيسية كما يلي:
بالطبع ، قد يكون لموقعك بنية مختلفة تمامًا ، لكن هذا ليس مهمًا بالنسبة لنا الآن. الشيء الرئيسي هو أن هناك روابط (أزرار) للتسجيل والترخيص.
الآن دعنا ننتقل إلى نموذج التسجيل. كما فهمت بالفعل ، لدينا في الملف form_register.php.
انتقل إلى قاعدة البيانات (في phpMyAdmin) ، وافتح هيكل الجدول المستخدمينونرى ما هي المجالات التي نحتاجها. هذا يعني أننا بحاجة إلى حقول لإدخال الاسم الأول والأخير ، وحقل لإدخال العنوان البريدي (البريد الإلكتروني) وحقل لإدخال كلمة المرور. ولأغراض أمنية ، سنضيف حقلاً لإدخال حروف التحقق.
على الخادم ، نتيجة معالجة استمارة التسجيل ، قد تحدث أخطاء مختلفة ، بسبب عدم تمكن المستخدم من التسجيل. لذلك ، لكي يفهم المستخدم سبب فشل التسجيل ، من الضروري عرض رسائل حول هذه الأخطاء.
قبل عرض النموذج ، أضف كتلة لعرض رسائل الخطأ من الجلسة.
وشيء آخر ، إذا كان المستخدم مصرحًا له بالفعل ، ومن أجل المصلحة يدخل صفحة التسجيل مباشرة عن طريق الكتابة إلى شريط العنوان في المتصفح site_address / form_register.php، ثم في هذه الحالة ، بدلاً من استمارة التسجيل ، سنعرض له سند الملكية يفيد بأنه قد تم تسجيله بالفعل.
بشكل عام ، رمز الملف form_register.phpلقد حصلنا عليه مثل هذا:
انت مسجل مسبقا
في المتصفح ، تبدو الصفحة التي تحتوي على نموذج التسجيل كما يلي:
باستخدام السمة المطلوبة، لقد جعلنا جميع الحقول المطلوبة.
انتبه إلى رمز نموذج التسجيل حيث يتم عرض كلمة التحقق:
حددنا مسار الملف بقيمة السمة src للصورة كلمة التحقق. phpالذي يولد هذا الكابتشا.
لنلق نظرة على كود الملف كلمة التحقق. php:
تم التعليق على الكود جيدًا ، لذلك سأركز على نقطة واحدة فقط.
داخل الوظيفة imageTtfText ()، يتم تحديد مسار الخط verdana.ttf... لذلك لكي يعمل اختبار captcha بشكل صحيح ، يجب علينا إنشاء مجلد الخطوط، ووضع ملف الخط هناك verdana.ttf... يمكنك العثور عليه وتنزيله من الإنترنت ، أو أخذه من الأرشيف مع مواد هذه المقالة.
انتهينا من بنية HTML ، حان الوقت للمضي قدمًا.
التحقق من صلاحية البريد الإلكتروني باستخدام jQuery
يحتاج أي نموذج إلى التحقق من صحة البيانات المدخلة ، سواء من جانب العميل (باستخدام JavaScript ، و jQuery) وعلى جانب الخادم.
يجب أن نولي اهتمامًا خاصًا لحقل البريد الإلكتروني. من المهم جدًا أن يكون العنوان البريدي المدخل صالحًا.
بالنسبة لحقل الإدخال هذا ، قمنا بتعيين نوع البريد الإلكتروني (type = "email") ، وهذا يحذرنا قليلاً من التنسيقات غير الصحيحة. لكن هذا لا يكفي ، لأنه من خلال فاحص الكود الذي يوفره لنا المتصفح ، يمكنك بسهولة تغيير قيمة السمة نوعمع البريد الإلكترونيتشغيل نصوهذا كل شيء ، لن يكون الشيك صالحًا بعد الآن.
وفي هذه الحالة ، نحتاج إلى إجراء فحص أكثر موثوقية. لهذا ، سوف نستخدم مكتبة jQuery من JavaScript.
لتوصيل مكتبة jQuery ، في الملف header.phpبين العلامات ، قبل علامة الإغلاق ، أضف هذا السطر:
بعد هذا السطر مباشرةً ، أضف رمز التحقق من صحة البريد الإلكتروني. نضيف هنا رمزًا للتحقق من طول كلمة المرور التي تم إدخالها. يجب ألا يقل طوله عن 6 أحرف.
بمساعدة هذا البرنامج النصي ، نتحقق من عنوان البريد الإلكتروني الذي تم إدخاله للتأكد من صحته. إذا أدخل المستخدم بريدًا إلكترونيًا غير صحيح ، فإننا نعرض له خطأً بهذا الشأن ونقوم بإلغاء تنشيط زر إرسال النموذج. إذا كان كل شيء على ما يرام ، نقوم بإزالة الخطأ وتنشيط الزر لإرسال النموذج.
وهكذا ، انتهينا من التحقق من صحة النموذج من جانب العميل. يمكننا الآن إرسالها إلى الخادم ، حيث سنقوم أيضًا بإجراء بعض عمليات التحقق وإضافة البيانات إلى قاعدة البيانات.
تسجيل المستخدم
نرسل النموذج للمعالجة إلى الملف register.php، عبر طريقة POST. اسم ملف المعالج هذا المحدد في قيمة السمة عمل... ويتم تحديد طريقة الإرسال في قيمة السمة طريقة.
افتح هذا الملف register.phpوأول شيء يتعين علينا القيام به هو كتابة دالة لبدء الجلسة وتوصيل الملف الذي أنشأناه سابقًا dbconnect.php(في هذا الملف ، قمنا بالاتصال بقاعدة البيانات). ومع ذلك ، دعنا نعلن على الفور عن الخلايا رسائل خاطئةو رسائل_النجاحفي المجموعة العالمية للجلسة. الخامس سمات_الخطأسنقوم بتسجيل جميع رسائل الخطأ التي تحدث أثناء معالجة النموذج وفي succes_messages، سوف نسجل رسائل بهيجة.
قبل المتابعة ، يجب علينا التحقق كان النموذج المقدم على الإطلاق... يمكن للمهاجم النظر في قيمة السمة عملمن النموذج ، واكتشف الملف الذي يعالج هذا النموذج. وقد يأتي بفكرة الانتقال مباشرة إلى هذا الملف عن طريق كتابة العنوان التالي في شريط العنوان في المتصفح: http: //arees_site/register.php
لذلك ، نحتاج إلى التحقق من وجود خلية في مصفوفة POST العالمية ، يتطابق اسمها مع اسم زر "التسجيل" من النموذج. وبالتالي ، نتحقق مما إذا كان الزر "تسجيل" قد تم النقر عليه أم لا.
إذا حاول المهاجم الانتقال مباشرة إلى هذا الملف ، فسوف يتلقى رسالة خطأ. دعني أذكرك أن المتغير address_site يحتوي على اسم الموقع وتم الإعلان عنه في الملف dbconnect.php.
خطأ!الصفحة الرئيسية.
");
}
?>
تمت إضافة قيمة captcha في الجلسة عند إنشائها في الملف كلمة التحقق. php... للتذكير ، سأعرض لك هذا الجزء من الرمز من الملف مرة أخرى. كلمة التحقق. php، حيث يتم إضافة قيمة captcha إلى الجلسة:
الآن دعنا ننتقل إلى التحقق نفسه. في ملف register.php، داخل كتلة if ، حيث نتحقق مما إذا كان الزر "تسجيل" قد تم النقر عليه ، أو بالأحرى ، حيث يتم تحديد التعليق " // (1) ضع الجزء التالي من الكود"نحن نكتب:
// تحقق من كلمة التحقق الناتجة // قم بقص المسافات من بداية ونهاية السطر $ captcha = trim ($ _ POST ["captcha"]) ؛ if (isset ($ _ POST ["captcha"]) &&! blank ($ captcha)) (// قارن القيمة المستلمة بالقيمة من الجلسة. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// إذا كانت كلمة التحقق غير صحيحة ، فإننا نعيد المستخدم إلى صفحة التسجيل ، وهناك سنعرض رسالة خطأ بأنه أدخل رمز التحقق الخاطئ . $ error_message = "
خطأ!لقد أدخلت كلمة التحقق الخاطئة
"؛ // احفظ رسالة الخطأ إلى الجلسة. $ _SESSION [" error_messages "] = $ error_message؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" HTTP / 1.1 301 Moved Permanent ") ؛ العنوان (" الموقع: " . $ Address_site. "/ form_register.php") ؛ // Stop the script exit () ؛) // (2) ضع الجزء التالي من الكود) else (// إذا لم يتم تمرير captcha أو كان خروجًا فارغًا ( "
خطأ!لا يوجد رمز تحقق ، أي رمز captcha. يمكنك الذهاب إلى الصفحة الرئيسية.
");
}
بعد ذلك ، نحتاج إلى معالجة البيانات المستلمة من صفيف POST. بادئ ذي بدء ، نحتاج إلى التحقق من محتويات مصفوفة POST العالمية ، أي أن هناك خلايا تتوافق أسماؤها مع أسماء حقول الإدخال من نموذجنا.
إذا كانت الخلية موجودة ، فإننا نقوم بقص المسافات من البداية ومن نهاية السطر من هذه الخلية ، وإلا فإننا نعيد توجيه المستخدم إلى الصفحة باستخدام نموذج التسجيل.
علاوة على ذلك ، بعد قطع المسافات ، نضيف سطرًا إلى المتغير ونفحص هذا المتغير بحثًا عن الفراغ ، إذا لم يكن فارغًا ، فانتقل ، وإلا فإننا نعيد توجيه المستخدم إلى الصفحة باستخدام نموذج التسجيل.
الصق هذا الرمز في الموقع المحدد " // (2) ضع الجزء التالي من الكود".
/ * تحقق مما إذا كانت المصفوفة العالمية $ _POST تحتوي على بيانات مرسلة من النموذج وقم بإرفاق البيانات المقدمة في المتغيرات العادية. * / If (isset ($ _ POST ["first_name"])) (// قم بقص المسافات من البداية و من نهاية السلسلة $ first_name = trim ($ _ POST ["first_name"]) ؛ // تحقق من المتغير من أجل الفراغ إذا (! فارغ ($ first_name)) (// للأمان ، قم بتحويل الأحرف الخاصة إلى كيانات HTML $ first_name = htmlspecialchars ($ first_name، ENT_QUOTES)؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
أدخل أسمك
حقل الاسم مفقود
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) if (isset ($ _ POST ["last_name"])) (// قطع المسافات من بداية ونهاية السلسلة $ last_name = trim ($ _ POST ["last_name"]) ؛ إذا (! فارغ ($ last_name )) (// للأمان ، قم بتحويل الأحرف الخاصة إلى كيانات HTML $ last_name = htmlspecialchars ($ last_name، ENT_QUOTES)؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
أدخل اسمك الأخير
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
حقل الاسم الأخير مفقود
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) if (isset ($ _ POST ["email"])) (// اقتطاع المسافات البادئة واللاحقة $ email = trim ($ _ POST ["email"]) ؛ إذا (! فارغ ($ email)) ($ email = htmlspecialchars ($ email، ENT_QUOTES)؛ // (3) مكان الكود للتحقق من تنسيق عنوان البريد الإلكتروني وتفرده) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
أدخل بريدك الإلكتروني
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = " "؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) if (isset ($ _ POST ["password"])) (// اقتطع المسافات من بداية ونهاية السلسلة $ password = trim ($ _ POST ["password"]) ؛ إذا (! فارغ ($ password)) ($ password = htmlspecialchars ($ password ، ENT_QUOTES) ؛ // تشفير paprol $ password = md5 ($ password. "top_secret") ؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION [" رسائل خطأ "]. ="
ادخل رقمك السري
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = " "؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) // (4) ضع رمز إضافة مستخدم إلى قاعدة البيانات
أهمية خاصة هو المجال البريد الإلكتروني... يتعين علينا التحقق من تنسيق العنوان البريدي المستلم وتفرده في قاعدة البيانات. أي ، هل هناك أي مستخدم مسجل بالفعل بنفس العنوان البريدي؟
في الموقع المحدد " // (3) مكان الرمز للتحقق من تنسيق العنوان البريدي وتفردهأضف الكود التالي:
// تحقق من تنسيق عنوان البريد الإلكتروني المستلم باستخدام التعبير العادي $ reg_email = "/ ^**@(+(*+)*\.)++/i" ؛ // إذا كان تنسيق عنوان البريد الإلكتروني المستلم لا يتطابق مع التعبير العادي إذا (! Preg_match ($ reg_email ، $ email)) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
لقد أدخلت بريدًا إلكترونيًا غير صالح
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) // نتحقق مما إذا كان هناك بالفعل مثل هذا العنوان في قاعدة البيانات. $ Result_query = $ mysqli-> query ("SELECT` email` FROM` users` WHERE` email` = "". // إذا كان عدد الصفوف المستلمة واحدًا تمامًا ، لذلك تم تسجيل مستخدم بعنوان البريد الإلكتروني هذا بالفعل إذا ($ result_query-> num_rows == 1) (// إذا كانت النتيجة غير خاطئة إذا (($ row = $ result_query -> fetch_assoc ())! = false) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
تم تسجيل مستخدم بعنوان البريد الإلكتروني هذا بالفعل
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / Form_register.php ") ؛) else (// حفظ رسالة الخطأ إلى الجلسة. $ _SESSION ["error_messages"]. = "
خطأ في استعلام قاعدة البيانات
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / Form_register.php ") ؛) / * أغلق التحديد * / $ result_query-> close () ؛ // إيقاف خروج البرنامج النصي () ؛) / * إغلاق التحديد * / $ result_query-> close () ؛
وهكذا ، انتهينا من جميع عمليات التحقق ، حان الوقت لإضافة المستخدم إلى قاعدة البيانات. في الموقع المحدد " // (4) مكان لرمز إضافة مستخدم إلى قاعدة البياناتأضف الكود التالي:
// طلب إضافة مستخدم إلى قاعدة البيانات . ""، "". $ email. ""، "". $ password. "") ")؛ if (! $ result_query_insert) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
فشلت إضافة مستخدم إلى طلب قاعدة البيانات
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ ) else ($ _SESSION ["Success_messages"] = "
تم التسجيل بنجاح !!! يمكنك الآن تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور الخاصين بك.
"؛ // أرسل المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ العنوان (" الموقع: ". $ Address_site." / Form_auth.php ") ؛) / * إكمال الطلب * / $ result_query_insert-> close () ؛ // أغلق اتصال قاعدة البيانات $ mysqli-> close () ؛
في حالة حدوث خطأ في طلب إضافة مستخدم إلى قاعدة البيانات ، نضيف رسالة حول هذا الخطأ إلى الجلسة ونعيد المستخدم إلى صفحة التسجيل.
خلافًا لذلك ، إذا سارت الأمور على ما يرام ، فإننا نضيف أيضًا رسالة إلى الجلسة ، ولكنها بالفعل أكثر متعة ، وهي إخبار المستخدم بأن التسجيل كان ناجحًا. ونقوم بإعادة توجيهه إلى الصفحة مع نموذج التفويض.
البرنامج النصي للتحقق من تنسيق عنوان البريد الإلكتروني وطول كلمة المرور موجود في الملف header.php، لذلك سيعمل في الحقول من هذا النموذج أيضًا.
تبدأ الجلسة أيضًا في الملف header.php، لذلك في الملف form_auth.phpلا تحتاج إلى بدء الجلسة ، لأننا سنحصل على خطأ.
كما قلت ، فإن البرنامج النصي للتحقق من تنسيق عنوان البريد الإلكتروني وطول كلمة المرور يعمل هنا أيضًا. لذلك ، إذا أدخل المستخدم عنوان بريد إلكتروني غير صحيح أو كلمة مرور قصيرة ، فسيتلقى على الفور رسالة خطأ. والزر ليأتيسيصبح غير نشط.
بعد القضاء على الأخطاء ، الزر ليأتييصبح نشطًا وسيتمكن المستخدم من إرسال النموذج إلى الخادم حيث سيتم معالجته.
إذن المستخدم
لإحالة القيمة عملالإعاقة التفويض لديها ملف المصادقة، هذا يعني أنه ستتم معالجة النموذج في هذا الملف.
وهكذا ، افتح الملف المصادقةواكتب الكود لمعالجة نموذج التفويض. أول شيء يجب فعله هو بدء الجلسة وتوصيل الملف dbconnect.phpللاتصال بقاعدة البيانات.
// قم بتعريف خلية لإضافة الأخطاء التي قد تحدث أثناء معالجة النموذج. $ _SESSION ["error_messages"] = ""؛ // قم بتعريف الخلية لإضافة الرسائل الناجحة $ _SESSION ["Success_messages"] = ""؛
/ * تحقق مما إذا كان النموذج قد تم تقديمه ، أي إذا تم النقر فوق الزر تسجيل الدخول. إذا كانت الإجابة بنعم ، فانتقل ، إذا لم يكن كذلك ، فقم بعرض رسالة خطأ للمستخدم تفيد بأنه انتقل إلى هذه الصفحة مباشرة. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! فارغ ($ _ POST ["btn_submit_auth"])) (// (1) مسافة للجزء التالي من الكود) else (خروج ("
خطأ!لقد قمت بإدخال هذه الصفحة مباشرة ، لذا لا توجد بيانات لمعالجتها. يمكنك الذهاب إلى الصفحة الرئيسية.
");
}
// تحقق من captcha الناتج إذا (isset ($ _ POST ["captcha"])) (// قم بقص المسافات من بداية ونهاية السطر $ captcha = trim ($ _ POST ["captcha"]) ؛ إذا (! Empty ($ captcha)) (// قارن القيمة المستلمة بالقيمة من الجلسة. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// إذا كانت كلمة التحقق غير صحيحة ، فسنقوم بإعادة المستخدم إلى صفحة التفويض ، وهناك سنعرض رسالة خطأ بأنه أدخل رمز التحقق الخاطئ.
خطأ!لقد أدخلت كلمة التحقق الخاطئة
"؛ // احفظ رسالة الخطأ إلى الجلسة. $ _SESSION [" error_messages "] = $ error_message؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 Moved Permanent ") ؛ العنوان (" الموقع: " . $ Address_site. "/ form_auth.php") ؛ // Stop the script exit () ؛)) else ($ error_message = "
خطأ!يجب ألا يكون حقل إدخال captcha فارغًا.
"؛ // احفظ رسالة الخطأ إلى الجلسة. $ _SESSION [" error_messages "] = $ error_message؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 Moved Permanent ") ؛ العنوان (" الموقع: " . $ Address_site. "/ form_auth.php") ؛ // إيقاف خروج البرنامج النصي () ؛) // (2) مكان لمعالجة عنوان البريد // (3) مكان لمعالجة كلمة المرور // (4) مكان لـ إجراء استعلام إلى قاعدة البيانات) else (// إذا لم يتم تمرير captcha للخروج ("
خطأ!رمز التحقق مفقود ، أي رمز captcha. يمكنك الذهاب إلى الصفحة الرئيسية.
");
}
إذا أدخل المستخدم رمز التحقق بشكل صحيح ، فتابع ، وإلا فإننا نعيده إلى صفحة التفويض.
التحقق من العنوان البريدي
// تقليم المسافات من بداية ونهاية السطر $ email = trim ($ _ POST ["email"]) ؛ if (isset ($ _ POST ["email"])) (if (! blank ($ email)) ($ email = htmlspecialchars ($ email ، ENT_QUOTES) ؛ // تحقق من تنسيق عنوان البريد الإلكتروني المستلم باستخدام التعبير العادي $ reg_email = "/ ^**@(+(*+)*\.)++/i"؛ // إذا كان تنسيق عنوان البريد الإلكتروني المستلم لا يتطابق مع التعبير العادي إذا (! preg_match ($ reg_email، $ email)) (// حفظ في رسالة خطأ الجلسة. $ _SESSION ["error_messages"]. = "
لقد أدخلت بريدًا إلكترونيًا غير صحيح
"؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
يجب ألا يكون حقل إدخال العنوان البريدي (البريد الإلكتروني) فارغًا.
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_register.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
حقل البريد الإلكتروني مفقود
"؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ ) // (3) مساحة لمعالجة كلمة المرور
إذا أدخل المستخدم عنوانًا بريديًا بتنسيق غير صحيح أو كانت قيمة حقل العنوان البريدي فارغة ، فإننا نعيده إلى صفحة التفويض حيث نعرض رسالة عنه.
التحقق من كلمة المرور
الحقل التالي المراد معالجته هو حقل كلمة المرور. إلى الموقع المحدد " // (3) مكان لمعالجة كلمة المرور"، نحن نكتب:
If (isset ($ _ POST ["password"])) (// اقتطع المسافات من بداية ونهاية السلسلة $ password = trim ($ _ POST ["password"]) ؛ if (! Empty ($ password )) ($ password = htmlspecialchars ($ password، ENT_QUOTES)؛ // تشفير كلمة المرور $ password = md5 ($ password. "top_secret")؛) else (// حفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages "]. ="
ادخل رقمك السري
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ )) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
لا يوجد مجال لإدخال كلمة المرور
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ )
هنا ، باستخدام وظيفة md5 () ، نقوم بتشفير كلمة المرور المستلمة ، لأنه في قاعدة البيانات لدينا كلمات مرور في شكل مشفر. كلمة سرية إضافية في التشفير ، في حالتنا " توب_سريجب أن يكون "هو الذي تم استخدامه عند تسجيل المستخدم.
أنت الآن بحاجة إلى إجراء استعلام لقاعدة البيانات على عينة من مستخدم عنوانه البريدي يساوي العنوان البريدي المستلم وكلمة المرور تساوي كلمة المرور المستلمة.
// الاستعلام في قاعدة البيانات عن اختيار المستخدم. $ result_query_select = $ mysqli-> استعلام ("SELECT * FROM` users` WHERE email =" ". $ email." "AND password =" ". $ password." "")؛ if (! $ result_query_select) (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
طلب خطأ في جلب المستخدم من قاعدة البيانات
"؛ // إعادة المستخدم إلى رأس صفحة التسجيل (" تم نقل HTTP / 1.1 301 بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ ) else (// تحقق مما إذا لم يكن هناك مستخدم بهذه البيانات في قاعدة البيانات ، ثم اعرض رسالة خطأ إذا ($ result_query_select-> num_rows == 1) (// إذا كانت البيانات المدخلة تتطابق مع البيانات من قاعدة البيانات ، فاحفظ تسجيل الدخول وكلمة المرور إلى مصفوفة الجلسة. $ _SESSION ["email"] = $ email؛ $ _SESSION ["password"] = $ password؛ // إعادة المستخدم إلى رأس الصفحة الرئيسية ("HTTP / 1.1 301 Movedently" ) ؛ رأس ("الموقع:". $ Address_site. "/ index.php") ؛) else (// احفظ رسالة الخطأ في الجلسة. $ _SESSION ["error_messages"]. = "
اسم المستخدم و / أو كلمة المرور غير صحيح
"؛ // إعادة المستخدم إلى رأس صفحة التفويض (" HTTP / 1.1 301 تم نقله بشكل دائم ") ؛ الرأس (" الموقع: ". $ Address_site." / Form_auth.php ") ؛ // Stop the script exit () ؛ ))
تسجيل الخروج من الموقع
وآخر شيء نقوم به هو إجراء مغادرة الموقع... في الوقت الحالي ، يعرض العنوان روابط إلى صفحة الترخيص وصفحة التسجيل.
في رأس الموقع (ملف header.php) ، باستخدام الجلسة نتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول بالفعل. إذا لم يكن الأمر كذلك ، فإننا نعرض روابط التسجيل والتفويض ، وإلا (إذا كان مصرحًا به) ، فبدلاً من روابط التسجيل والتفويض ، نعرض الرابط انتاج |.
جزء معدل من التعليمات البرمجية من ملف header.php:
التسجيل
انتاج |
عندما تضغط على رابط الخروج من الموقع ، نصل إلى الملف logout.php، حيث نقوم ببساطة بتدمير الخلايا باستخدام العنوان البريدي وكلمة المرور من الجلسة. بعد ذلك ، نعيد المستخدم إلى الصفحة التي تم النقر فوق الارتباط عليها انتاج.
كود الملف تسجيل الخروج. php:
هذا كل شئ. الآن أنت تعرف كيف تنفيذ ومعالجة نماذج التسجيل والتفويضمستخدم على موقعك. توجد هذه النماذج في كل موقع تقريبًا ، لذلك يجب أن يعرف كل مبرمج كيفية إنشائها.
تعلمنا أيضًا كيفية التحقق من صحة بيانات الإدخال ، على جانب العميل (في المتصفح ، باستخدام JavaScript ، و jQuery) وعلى جانب الخادم (باستخدام لغة PHP). تعلمنا أيضا تنفيذ إجراءات مغادرة الموقع.
يتم اختبار جميع البرامج النصية وتعمل. يمكنك تنزيل الأرشيف بملفات هذا الموقع الصغير على هذا الرابط.
في المستقبل سأكتب مقالًا أصفه فيه. وأخطط أيضًا لكتابة مقال أشرح فيه (بدون إعادة تحميل الصفحة). لذا ، لكي تكون على دراية بإصدار مقالات جديدة ، يمكنك الاشتراك في موقعي.
إذا كانت لديك أي أسئلة ، فيرجى الاتصال أيضًا ، إذا لاحظت أي خطأ في المقالة ، فيرجى إبلاغي بذلك.
خطة الدرس (الجزء 5):
إنشاء هيكل HTML لنموذج تسجيل الدخول
نقوم بمعالجة البيانات الواردة
نعرض تحية المستخدم في رأس الموقع
هل أعجبك المقال؟
1. البرنامج المساعد لإنشاء نماذج على الإنترنت "jFormer"
إنشاء نماذج الاتصال: الملاحظات ، التعليقات ، استمارة تسجيل الدخول ، استمارة التسجيل مع التحقق من صحة المعلومات المدخلة.
2. نموذج التسجيل خطوة بخطوة باستخدام jQuery
شكل أنيق مع ملء خطوة بخطوة. يوجد أدناه مؤشر تعبئة النموذج.
3. شكل خطوة بخطوة
تعبئة النموذج بعدة خطوات والتحقق من صحة التعبئة.
4. استمارة الاتصال الخاصة بالموقع
يتم التحقق من صحة إدخال المعلومات "على الفور" قبل إرسال الرسالة باستخدام جافا سكريبت.
5. التبديل المتحرك بين النماذج باستخدام jQuery
يمكنك استخدام تطبيق jQuery المتحرك للتبديل بين حقول تسجيل الدخول والتسجيل واستعادة كلمة المرور. في صفحة العرض ، انقر على الرابط الأصفر لرؤية التأثير.
6. نموذج الخروج PHP
يمكن استخدام حل مماثل لمنح الزائر القدرة على الاتصال بسرعة بمالك الموقع من أي صفحة. في صفحة العرض التوضيحي ، انقر فوق السهم لأسفل لتحريك النموذج للخارج.
7. نموذج تسجيل PHP باستخدام jQuery و CSS3
نموذج مع التحقق من صحة المعلومات المدخلة.
8. استمارة تسجيل PHP على غرار Facebook
نموذج تسجيل لطيف تم تنفيذه باستخدام CSS و PHP و jQuery.
9. jQuery "SheepIt" نموذج الاتصال
تم تنفيذ إمكانية إضافة حقول جديدة قبل إرسال الرسالة.
10. نموذج الاتصال "Fancy AJAX Contact Form"
نموذج ملاحظات PHP أنيق وأنيق مع التحقق من صحة المعلومات التي تم إدخالها. التقنيات: CSS ، PHP ، jQuery.
11. نظام الترخيص / التسجيل بالموقع
12. استمارة تقديم البيانات
التحقق من صحة الحشوة.
13. jQuery البرنامج المساعد "Contactable"
لتنفيذ نموذج الخروج لإرسال رسالة بسرعة.
سيبدأ التنزيل الآن ... لا تنسى مشاركة المواد على الشبكات الاجتماعية مع الخاص بك زملاء
مدخل
