В этой статье я собираюсь объяснить процесс создания формы входа на базе bootstrap с использованием twitter bootstrap. Я также объясню, как реализовать проверку на стороне сервера в этой форме через PHP. Страница входа в систему будет разработана с помощью простого HTML и библиотеки bootstrap, где проверка должна выполняться с помощью скрипта входа в систему PHP. Итак, давайте начнем.
Разработка формы входа в Bootstrap
Страница входа может быть разработана с помощью простого HTML. Однако ради этой статьи я буду использовать twitter bootstrap, который является библиотекой CSS и JavaScript с открытым исходным кодом. Причины, по которым я использую bootstrap, просты. Во-первых, я хочу улучшить внешний вид моей веб-страницы, и 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></title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Пользовательские стили для этого шаблона -->
<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">Пожалуйста, войдите<h2 class="text-center"></h2>
<label for="inputEmail" class="sr-only">Адрес электронной почты<label for="inputEmail" class="sr-only"></label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Пароль<label for="inputPassword" class="sr-only"></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 name="submit" class="btn btn-success btn-block" type="submit"></button>
</form>
</div> </div><!-- /container -->
<script src="js/bootstrap.js"><script src="js/bootstrap.js"></script>
</body>
</html>
Начнем с раздела заголовка. Он содержит некоторую мета-информацию и ссылки на таблицу стилей bootstrap и пользовательскую таблицу стилей, то есть style.css. Раздел body содержит div с классом “контейнер”. Это класс bootstrap. Он добавляет левое и правое заполнение, а также центрирует div.
Внутри div была создана форма с классом “form-signin". Этот ‘form-signin’ снова является классом bootstrap, используемым для стиля формы. Форма имеет два элемента ввода: один типа text и другой типа password. Оба этих элемента необходимы. Вы не можете оставить их пустыми. Здесь я намеренно установил тип элемента электронной почты в текст, потому что здесь, если я установлю его на электронную почту, bootstrap будет реализовывать свою собственную проверку электронной почты. Однако я хочу показать вам, как PHP реализует проверку электронной почты.
В style.css я изменил класс “контейнер”, установив его свойство max-width равным 600px. Я также добавил случайное фоновое изображение к тегу body. Содержимое “style.css” выглядит следующим образом:
.container{
максимальная ширина: 600px;
}
тело{
background-image: url(../images/contact_form_background.jpg);
}
На данный момент форма не имеет проверки, кроме проверки null, которая по умолчанию реализована bootstrap. Вы можете добавить что-нибудь в текстовое поле и нажать кнопку входа, и ничего не произойдет.
Проверка формы через 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">Пожалуйста, войдите<h2 class="text-center"></h2>
<label for="inputEmail" class="sr-only">Адрес электронной почты<label for="inputEmail" class="sr-only"></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">Пароль<label for="inputPassword" class="sr-only"></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 name="submit" class="btn btn-success btn-block" type="submit"></button>
</form>
</div> </div><!-- /container -->
<script src="js/bootstrap.js"><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[“submit”])”. Эта функция возвращает true, если ассоциативный массив содержит значение для поля формы “отправить”.
Проверка электронной почты
Для проверки электронной почты используется метод “filter_var($_POST[’email’], FILTER_VALIDATE_EMAIL))". Этот метод принимает текст, введенный пользователем в поле электронной почты, в качестве первого параметра и флаг “FILTER_VALIDATE_EMAIL” в качестве второго параметра. Если электронная почта действительна, эта функция возвращает true. Если проверка электронной почты возвращает false и назначает сообщение об ошибке переменной “$errEmailMessage”.
Проверка длины пароля
Для проверки длины пароля мы использовали функцию “strlen” и передали ей текст, введенный в поле пароля. Затем мы проверили, что если количество символов меньше 8, то назначьте сообщение об ошибке “$errPassMessage”.
Если какое-либо из полей электронной почты и пароля не проходит проверку, мы устанавливаем переменную “$LoginMessage” в поле предупреждения об опасности bootstrap и назначаем ему сообщение об ошибке. Однако, если тест проверки проходит как для поля электронной почты, так и для поля пароля, поле предупреждения об успехе присваивается “$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 = "Пожалуйста, введите действительный адрес электронной почты".;
}
if (!$_POST['password'] || strlen($_POST['password'])
$errPassMessage = "Пароль должен быть минимум 8 символов".;
}
if (isset($errEmailMessage) || isset($errPassMessage) )
{
$loginMessage= '<div class="container"><div class="container"><div class="alert alert-danger">Извините, были ошибки при входе в вашу учетную запись.Пожалуйста, повторите попытку позже.</div></div></div>';
}
else
{
$loginMessage= '<div class="alert alert-success">Вы успешно вошли в свою учетную запись.<div class="alert alert-success"></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></title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Пользовательские стили для этого шаблона -->
<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">Пожалуйста, войдите<h2 class="text-center"></h2>
<label for="inputEmail" class="sr-only">Адрес электронной почты<label for="inputEmail" class="sr-only"></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">Пароль<label for="inputPassword" class="sr-only"></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 name="submit" class="btn btn-success btn-block" type="submit"></button>
</form>
</div> </div><!-- /container -->
<script src="js/bootstrap.js"><script src="js/bootstrap.js"></script>
</body>
</html>
Теперь, если вы добавите неверный адрес электронной почты или пароль менее 8 символов, будет установлено значение для “$LoginMessage”, “$errEmailMessage” и/или “$errPassMessage”, и их значения (сообщения об ошибках) будут отображаться с соответствующими полями.
Посмотрите на следующие скриншоты, чтобы увидеть, как будут отображаться сообщения об ошибках.
Теперь вы знаете, как можно сделать форму для входа(авторизацию)
Пользуйтесь;)