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

Посмотрите на следующие снимки экрана, чтобы увидеть, как должны отображаться сообщения об ошибках.