Как создать форму входа Bootstrap с проверкой PHP

Содержание статьи
В этой статье я собираюсь объяснить процесс создания формы входа в систему начальной загрузки с помощью Twitter начальной загрузки. Я также объясню, как реализовать проверку на стороне сервера в этой форме через PHP. Страница входа в систему будет разработана с использованием простого HTML и библиотеки начальной загрузки, где в качестве проверки должна выполняться сценарий входа в PHP. Итак, начнем.
Разработка формы входа с помощью Bootstrap
Страница входа может быть разработана с помощью простого HTML. Тем не менее, ради этой статьи я буду использовать Twitter bootstrap, который является библиотекой CSS и JavaScript с открытым исходным кодом. Причины, по которым я использую бутстрап, очевидны. Во-первых, я хочу улучшить внешний вид моей веб-страницы, и загрузчик позволил мне сделать это всего несколькими строками кода. Во-вторых, я хочу, чтобы моя страница входа была отзывчивой. Снова начальная загрузка содержит классы, которые помогают создавать адаптивные макеты из коробки. Взгляните на следующий фрагмент кода. Название этой веб-страницы — «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 ENGINE="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input ENGINE="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>
Начнем с раздела заголовка. Он содержит некоторую метаинформацию и ссылки на таблицу стилей начальной загрузки и пользовательскую таблицу стилей, т.е. style.css . Раздел body содержит div с классом «container». Это класс начальной загрузки. Это добавляет левый и правый отступ, и это также центрирует div.
Внутри div была создана форма с классом form-signin. Этот ‘form-signin’ снова является классом начальной загрузки, используемым для стилизации формы. Форма имеет два элемента ввода: один типа текста, а другой типа пароля. Оба эти элемента являются обязательными. Вы не можете оставить их пустыми. Здесь я намеренно установил тип элемента электронной почты на текст, потому что здесь Если я установлю его на электронную почту, начальная загрузка выполнит свою собственную проверку электронной почты. Тем не менее, я хочу показать вам, как PHP реализует проверки электронной почты.
В style.css я изменил класс «container», установив его свойство max-width равным 600px. Я также добавил случайное фоновое изображение в тег body. Содержимое « style.css » выглядит следующим образом:
.container{ max-width: 600px; } body{ background-image: url(../images/contact_form_background.jpg); }
На данный момент форма входа выглядит так:

На данный момент форма не имеет проверки, за исключением проверки на нулевое значение, которая по умолчанию выполняется программой начальной загрузки. Вы можете добавить что-нибудь в текстовое поле и нажать кнопку входа в систему, и ничего не произойдет.
Проверка формы через PHP
Теперь я покажу вам, как мы можем реализовать валидацию через PHP. Мы проверим, правильно ли введенный пользователем адрес электронной почты имеет длину пароля менее 8 символов. Измените раздел body разметки 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» и атрибут действия со значением «index.php». Атрибут method устанавливает метод, используемый для публикации данных формы. Атрибут action указывает страницу, на которую должны быть отправлены данные этой формы. В этом случае, когда пользователь отправляет форму, данные формы отправляются на саму страницу, т.е. « index.php ».
Обратите внимание, что внутри элемента формы в верхней части я добавил следующую строку кода
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
Эта строка указывает, что если установлен PHP «$ loginMessage», выведите значение переменной. Аналогично, в поле ввода электронной почты и поле ввода пароля мы будем отображать значения переменных «$ errEmailMessage» и «$ errPassMessage» соответственно, если они установлены. Переменная set в PHP — это переменная, которая не равна нулю и содержит некоторое значение. Когда страница загружается в первый раз, все вышеупомянутые переменные будут пустыми, поэтому их значения не будут отображаться.
Теперь, когда пользователь вводит адрес электронной почты и пароль в поля и нажимает кнопку отправки, информация о форме отправляется на страницу « index.php ». (это сама страница формы) Значения полей формы хранятся в ассоциативном массиве $ _POST, и к ним можно получить доступ, передав имя поля в этот массив. Например, если вы хотите проверить, отправил ли пользователь форму, нажав кнопку «отправить», вы можете использовать функцию «isset ($ _ POST [« отправить »])» ». Эта функция возвращает true, если ассоциативный массив содержит значение для поля формы «submit».
Проверка электронной почты
Для проверки электронной почты используется метод 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», и их значения (сообщения об ошибках) будут отображаться в соответствующих полях.
Посмотрите на следующие снимки экрана, чтобы увидеть, как должны отображаться сообщения об ошибках.
