במאמר זה, אני הולך להסביר את התהליך של יצירת טופס התחברות bootstrap באמצעות bootstrap Twitter. אסביר גם כיצד ליישם אימות צד השרת בצורה זו באמצעות PHP. דף הכניסה יעוצב באמצעות HTML רגיל וספריית bootstrap שבה יש להפעיל סקריפט כניסה של PHP כבדיקה. אז בואו נתחיל.
עיצוב טופס התחברות עם Bootstrap
ניתן לעצב את דף הכניסה באמצעות HTML פשוט. עם זאת, למען מאמר זה, אשתמש בטוויטר bootstrap, שהיא ספריית CSS ו-JavaScript בקוד פתוח. הסיבות שבגללן אני משתמש ב-bootstrap ברורות. ראשית, אני רוצה לשפר את המראה והתחושה של דף האינטרנט שלי, והמטען אפשר לי לעשות זאת עם כמה שורות קוד בלבד. שנית, אני רוצה שדף ההתחברות שלי יהיה רספונסיבי. שוב bootstrap מכיל שיעורים שעוזרים לך ליצור פריסות רספונסיביות מהקופסה. תסתכל על קטע הקוד הבא. השם של דף אינטרנט זה הוא "index.php".
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>PHP/Bootstrap Login Form</title><!-- Bootstrap core CSS --><link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template --><link href="css/style.css" rel="stylesheet"></head><body><div class="container"><form class="form-signin" method="post" action="index.php"><h2 class="text-center">Please Login</h2><label for="inputEmail" class="sr-only">Email address</label><input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus><label for="inputPassword" class="sr-only">Password</label><input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required><button name="submit" class="btn btn-success btn-block" type="submit">Login</button></form></div> <!-- /container --><script src="js/bootstrap.js"></script></body></html>
נתחיל בסעיף הכותרת. הוא מכיל מעט מידע מטא וקישורים לגיליון הסגנונות של bootstrap ולגיליון הסגנונות המותאם אישית, כלומר. style.css . קטע הגוף מכיל div עם המחלקה "מיכל". זהו מחלקת האתחול. זה מוסיף ריפוד שמאל וימין וזה גם מרכז את ה-div.
בתוך ה-div, נוצר טופס עם המחלקה טופס-כניסה. 'כניסה לטופס' זה שוב מחלקת ה-bootstrap המשמשת לסגנון הטופס. לטופס שני רכיבי קלט: אחד מסוג טקסט והשני מסוג סיסמה. שני האלמנטים הללו נדרשים. אתה לא יכול להשאיר אותם ריקים. כאן אני מגדיר בכוונה את סוג רכיב האימייל לטקסט, כי כאן אם אני מגדיר אותו לאימייל, bootstrap יבצע אימות דוא"ל משלו. עם זאת, אני רוצה להראות לך כיצד PHP מיישמת אימות דוא"ל.
ב-style.css שיניתי את המחלקה "container" על ידי הגדרת המאפיין max-width שלו ל-600px. הוספתי גם תמונת רקע אקראית לתג הגוף. התוכן של "style.css" נראה כך:
.container{max-width: 600px;}body{background-image: url(../images/contact_form_background.jpg);}כרגע טופס הכניסה נראה כך:
לטופס אין כרגע אימות, למעט אימות null, שנעשה כברירת מחדל על ידי ה-bootstrapper. אתה יכול להוסיף כל דבר לשדה הטקסט וללחוץ על כפתור ההתחברות וכלום לא יקרה.
אימות טופס PHP
עכשיו אני אראה לך איך אנחנו יכולים ליישם אימות באמצעות PHP. אנו נבדוק אם כתובת המייל שהזין המשתמש נכונה ובעלת סיסמה באורך של פחות מ-8 תווים. שנה את קטע הגוף של סימון ה-HTML של הטופס שיצרנו כך שיתאים בדיוק למה שמוצג בקטע הקוד הבא. הסברתי את הקוד מאוחר יותר.
<body><div class="container"><form class="form-signin" method="post" action="index.php"><?php if (isset($loginMessage)) echo $loginMessage ; ?><h2 class="text-center">Please Login</h2><label for="inputEmail" class="sr-only">Email address</label><input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus><span class="text-danger"><?php if (isset($errEmailMessage)) echo $errEmailMessage; ?></span><label for="inputPassword" class="sr-only">Password</label><input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required><span class="text-danger"><?php if (isset($errPassMessage)) echo $errPassMessage; ?></span><button name="submit" class="btn btn-success btn-block" type="submit">Login</button></form></div> <!-- /container --><script src="js/bootstrap.js"></script></body>
אם אתה מסתכל על תג הפתיחה "form", הוא מכיל מאפיין מתודה עם הערך "post" ותכונת action עם הערך "index.php". תכונת השיטה מגדירה את השיטה המשמשת לפרסום נתוני הטופס. תכונת הפעולה מציינת את הדף שאליו יש לשלוח את הנתונים של טופס זה. במקרה זה, כאשר המשתמש שולח את הטופס, נתוני הטופס נשלחים לעמוד עצמו, כלומר. " index.php ".
שימו לב שבתוך אלמנט הטופס בחלק העליון הוספתי את שורת הקוד הבאה
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
שורה זו מציינת שאם PHP "$loginMessage" מוגדר, פלט את הערך של המשתנה. באופן דומה, בשדה קלט האימייל ובשדה קלט הסיסמה, נציג את הערכים של המשתנים "$errEmailMessage" ו-"$errPassMessage" בהתאמה אם הם מוגדרים. משתנה מוגדר ב-PHP הוא משתנה שאינו ריק ומכיל ערך כלשהו. כאשר הדף נטען בפעם הראשונה, כל המשתנים לעיל יהיו ריקים, ולכן הערכים שלהם לא יוצגו.
כעת כאשר המשתמש מזין את כתובת המייל והסיסמה בשדות ולוחץ על כפתור השליחה, פרטי הטופס נשלחים לעמוד "index.php". (זהו דף הטופס עצמו) ערכי שדות טופס מאוחסנים במערך האסוציאטיבי $_POST וניתן לגשת אליהם על ידי העברת שם השדה למערך זה. לדוגמה, אם ברצונך לבדוק אם משתמש שלח טופס על ידי לחיצה על כפתור "שלח", תוכל להשתמש בפונקציה "isset($_POST["שלח")"". פונקציה זו מחזירה true אם המערך האסוציאטיבי מכיל את הערך עבור שדה הטופס "שלח".
בודק אימייל
השיטה filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) משמשת לאימות דוא"ל. שיטה זו לוקחת את הטקסט שהזין המשתמש בשדה האימייל כפרמטר הראשון ואת הדגל "FILTER_VALIDATE_EMAIL" כפרמטר השני. אם כתובת האימייל חוקית, פונקציה זו מחזירה true. אם בדיקת האימייל מחזירה false והקצה את הודעת השגיאה למשתנה "$errEmailMessage".
בדיקת אורך סיסמה
כדי לבדוק את אורך הסיסמה, השתמשנו בפונקציית "strlen" והעברנו לה את הטקסט שהוזן בשדה הסיסמה. לאחר מכן בדקנו שאם מספר התווים קטן מ-8 אז אנו מקצה הודעת שגיאה "$errPassMessage".
אם שדה אימייל וסיסמה כלשהו נכשל במבחן האימות, אנו מגדירים את המשתנה "$LoginMessage" לטעון את תיבת ההתראה על סכנה ולהקצות לה הודעת שגיאה. עם זאת, אם מבחן האימות עבר הן עבור שדה האימייל והן עבור שדה הסיסמה, תיבת התראות ההצלחה מוקצית "$LoginMessage".
ניתן לראות את קוד ה-HTML המלא עם אימות PHP בקטע הקוד הבא.
<?php$LoginE;if (isset($_POST["submit"])){$email = $_POST['email'];$name = $_POST['password'];$errEmail = false;$errPassword = false;if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {$errEmailMessage = "Please Enter a Valid Email.";}if (!$_POST['password'] || strlen($_POST['password']) < 8 ) {$errPassMessage = "Password should be minimum 8 characters.";}if (isset($errEmailMessage) || isset($errPassMessage) ){$loginMessage= '<div class="container"><div class="alert alert-danger">Sorry there were errors loging into your account.Please try again later.</div></div>';}else{$loginMessage= '<div class="alert alert-success">You have successfully logged into your account.</div>';}}?><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>PHP/Bootstrap Login Form</title><!-- Bootstrap core CSS --><link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template --><link href="css/style.css" rel="stylesheet"></head><body><div class="container"><form class="form-signin" method="post" action="index.php"><?php if (isset($loginMessage)) echo $loginMessage ; ?><h2 class="text-center">Please Login</h2><label for="inputEmail" class="sr-only">Email address</label><input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus><span class="text-danger"><?php if (isset($errEmailMessage)) echo $errEmailMessage; ?></span><label for="inputPassword" class="sr-only">Password</label><input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required><span class="text-danger"><?php if (isset($errPassMessage)) echo $errPassMessage; ?></span><button name="submit" class="btn btn-success btn-block" type="submit">Login</button></form></div> <!-- /container --><script src="js/bootstrap.js"></script></body></html>כעת אם תוסיף אימייל או סיסמה לא חוקיים באורך של פחות מ-8 תווים, יש להגדיר "$LoginMessage", "$errEmailMessage" ו/או "$errPassMessage" והערכים שלהם (הודעות שגיאה) יוצגו בשדות המתאימים שלהם. .
עיין בצילומי המסך הבאים כדי לראות כיצד יש להציג את הודעות השגיאה.
