Как создать форму входа 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 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>
Начнем с раздела заголовка. Он содержит некоторую метаинформацию и ссылки на таблицу стилей начальной загрузки и пользовательскую таблицу стилей, т.е. 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», и их значения (сообщения об ошибках) будут отображаться в соответствующих полях.
Посмотрите на следующие снимки экрана, чтобы увидеть, как должны отображаться сообщения об ошибках.
