Форма входа с HTML/CSS, PHP и MySQL

В этом руководстве мы покажем вам, как создать форму входа в систему с помощью расширения HTML, PHP и MySQL. Эта форма аутентификации используется, когда пользователю необходимо отправить форму, чтобы авторизовать его для доступа к своей учетной записи, например.

Четыре шага для создания формы входа:

1- Создайте HTML-файл, содержащий структуру формы;
2- Создать CSS-файл для определения стиля;
3- Создать файл логина PHP, который будет проверять поля формы на соответствие значениям таблицы в базе данных;
4- Создадим PHP-файл главной страницы и logout.

Шаг 1:

Сначала создадим HTML-страницу login.php.

login.php:

 
 < голова> 
 < meta charset="utf-8"> <бр />  
 < link rel="таблица стилей" href="style.css" media="screen" type="text/css" /> <бр />  
 < тела> 
 < div id="контейнер"> <бр />  
 
 < форма action="verification.php" method="POST"> 
 < h1> Логин 
 
 < этикетка> < В> Имя пользователя 
 < input type="text" placeholder="Введите имя пользователя" name="имя пользователя" обязательно> 

 < этикетка> < В> Пароль 
 < input type="password" placeholder="Введите пароль" name="пароль" обязательно> 

 < input type="submit" id='submit' value='LOGIN' > 
  if(isset($_GET['error'])){
 $err = $_GET['error']; 
 if($err==1 || $err==2)
 echo "< p style='цвет:красный'> Неверный пользователь или пароль»; 
 }
 ?>

Step 2:

Стиль добавит форматирование в наше окно входа.

style.css:

body{
 background:  #67BE4B; 
}
#container{
 width:400px; 
 margin:0 авто; 
 margin-top:10%; 
}
/* Окаймленная форма */
form {
 width:100%; 
 padding: 30px; 
 граница: сплошной #f1f1f1 1 пиксель; 
 фон: #fff; 
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
}
#container h1{
 ширина: 38%; 
 маржа: 0 авто; 
 padding-bottom: 10px; 
}

/* Входы на всю ширину */
input[type=text], input[type=password] {
 width: 100%; 
 padding: 12px 20px; 
 margin: 8px 0; 
 отображение: inline-block; 
 border: 1px сплошной #ccc;
 box-size: border-box; 
}

/* Установить стиль для всех кнопок */
input[type=submit] {
 background-color: #53af57; 
 цвет: белый; 
 padding: 14px 20px; 
 margin: 8px 0; 
 граница: нет; 
 курсор: указатель; 
 ширина: 100%; 
}
input[type=submit]:hover {
 background-color: white; 
 цвет: #53af57; 
 граница: 1px сплошной #53af57; 
}

Preview:

Шаг 3:

Затем для валидации формы нам понадобится файл для проверки полей формы, но перед этим не забудьте создать таблицу 'user' в базе данных:

verification.php:

session_start(); 
if(isset($_POST['username']) & & isset($_POST['password']))
{
 // подключение к базе данных
 $db_username = 'root'; 
 $db_пароль = 'mot_de_passe_bdd'; 
 $db_name = 'nom_bdd'; 
 $db_host = 'localhost'; 
 $db = mysqli_connect($db_host, $db_username, $db_password,$db_name)
 или die('не удалось подключиться к базе данных'); 
 
 // мы применяем две функции mysqli_real_escape_string и htmlspecialchars
 // для устранения любых атак с использованием SQL-инъекций и XSS
 $username = mysqli_real_escape_string($db,htmlspecialchars($_POST['username'])); 
 $password = mysqli_real_escape_string($db,htmlspecialchars($_POST['password'])); 
 
 if($username !== "" & & $password !== "")
 {
 $requete = "SELECT count(*) FROM user, где 
 nom_utilisateur = '".$username."' и mot_de_passe = '".$password."' "; 
 $exec_query = mysqli_query($db,$requete); 
 $reponse = mysqli_fetch_array($exec_запрос); 
 $count = $reponse['count(*)']; 
 if($count!=0) // правильное имя пользователя и пароль
 {
 $_SESSION['username'] = $username; 
 header('Расположение: principale.php'); 
 }
 else
 {
 header('Location: login.php?error=1'); // неверный пользователь или пароль
 }
 }
 else
 {
 header('Расположение: login.php?error=2'); // пустой пользователь или пароль
 }
}
else
{
 header('Расположение:  login.php'); 
}
mysqli_close($db); Близкое соединение
?>

Step 4:

На последнем шаге сервер проверяет правильность предоставленной информации, и если да, то создает сессию в имени пользователя и перенаправляет на страницу principale.php.

principale.php:

 
 < голова> 
 < meta charset="utf-8"> <бр />  
 < link rel="таблица стилей" href="style.css" media="screen" type="text/css" /> <бр />  
 < стиль тела='background:#fff;' > 
 < div id="содержимое"> <бр />  
  session_start(); 
 if($_SESSION['username'] !== ""){
 $user = $_SESSION['username']; 
 // вывести сообщение
 echo "Здравствуйте, $user, вы подключены"; 
 }
 ?>

Bonus:

Вы зададите вопрос: как мне выйти из системы? Это просто, вы добавляете кнопку для выхода из системы, а также небольшой фрагмент php-кода, который уничтожает текущую сессию.

 
 
 < голова> 
 < meta charset="utf-8"> <бр />  
 < link rel="таблица стилей" href="style.css" media="screen" type="text/css" /> <бр />  
 < стиль тела='background:#fff;' > 
 < div id="содержимое"> 
 
 < a href='principale.php?logout=true'> < размах> Выходить 
 
  
  session_start(); 
 if(isset($_GET['disconnect']))
 { 
 if($_GET['disconnect']==true)
 { 
 session_unset(); 
 заголовок("location:login.php"); 
 }
 }
 else if($_SESSION['username'] !== ""){
 $user = $_SESSION['username']; 
 // отобразить сообщение
 echo "< бр> Здравствуйте, $user, вы на связи»; 
 }
 ?>