Практическое занятие
Авторизация и регистрация пользователя
Задание 1. Выполните авторизацию пользователя.
(Видео выполнения данного задания с подробными пояснениями приведено по ссылке https://youtu.be/hhsGuU0JXy4)
Пусть в базе данных имеются данные по зарегистрированному пользователю – его логин и пароль. На главной странице выводится форма для заполнения полей с логином и паролем и имеются кнопки Войти и Зарегистрироваться.
Если пользователь вводит логин и пароль, который уже записан в базе данных, то происходит переход на страницу пользователя. Если пользователь вводит логин и пароль, которого нет в базе данных (т.е. это означает, что пользователь не зарегистрирован), то происходит выдача текстового сообщения, что пользователь не зарегистрирован или допустил ошибку в пароле или логине.
Передачу данных пользователя (логина и пароля) и их обработку выполнить с помощью ajax-запроса.
Выполнение задания 1:
1) Создайте базу данных use с помощью phpMyAdmin. Далее таблицу info со следующими полями: id (идентификатор пользователя, auto_increment), login (varchar, длина поля 30 символов) и pass (varchar, длина поля 40 символов).
2) Создайте структуру главной страницы index.php, разместите на ней форму с двумя полями (логином и паролем) и двумя кнопками Войти и Регистрация.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Авторизация</title>
<!—подключение стилей-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Это форма авторизации-->
<form>
<input
type="text" name="login" class="input"
placeholder="Введите логин">
<input
type="password" name="pass" class="input"
placeholder="Введите пароль">
<input
type="submit" value="Войти"
name="enter" class="submit" >
<input
type="submit" value="Регистрация"
name="regist" class="regist">
<div
id="error"></div>
</form>
</body>
</html>
3) Задайте стилевое оформление для формы авторизации. Для этого создайте файл со стилями style.css.
Стили страницы style.css:
form{
margin: 0 auto;
width: 300px;
height: 220px;
background-color: rgb(224, 255, 255);
}
.input{
margin: 20px 20px 5px 20px;
width: 250px;
height: 40px;
border: 1px solid rgb(100, 255, 255);
text-align:
center;
color: black;
font-weight: 600;
background-color: rgb(245, 245, 245);
}
.submit{
margin: 10px 0
10px 20px;
width: 80px;
height: 40px;
border: 1px solid rgb(100, 255, 255);
text-align:
center;
color: black;
font-weight: 600;
float: left;
background-color: rgb(100, 255, 255);
}
.regist{
margin: 10px 23px
10px 0;
width: 150px;
height: 40px;
border: 1px solid rgb(100, 255, 255);
text-align:
center;
color: black;
font-weight: 600;
float: right;
}
#error{
margin: 5px 20px;
width: 250px;
height: 40px;
text-align:
center;
color: rgb(255,0,0);
font-size: 10pt;
display: none;
}
4) В разделе head подключите библиотеку jquery.js командой
<script src="jquery.js"></script>
Далее пишем теги для скрипта:
<script type="text/javascript">
Здесь будем записывать весь код
страницы index.php
<script>
Код скрипта:
Код страницы ajax.php:
Пример 2. Усовершенствуем предыдущий пример. Проведем валидацию полей –запретим оставлять поля пустыми. Проверку на пустоту полей выполним на странице ajax.php
(Видео выполнения данного задания с подробными пояснениями приведено по ссылке https://youtu.be/vAFYL0Xwo8c)
1) В файл со стилями style.css добавьте класс
.field_error{
border-bottom: 1px solid red;
}
Этот класс будем назначать тем полям, которые окажутся пустыми.
2) Внесите изменения в файл index.php и ajax.php
Функция со страницы index.php:
Код страницы ajax.php:
Пример 3. Выполните регистрацию пользователя. Доработайте предыдущий пример – напишите обработчик для кнопки Регистрация.
(Видео выполнения данного задания с подробными пояснениями приведено по ссылке https://youtu.be/vAFYL0Xwo8c)
По нажатию на кнопку Регистрация на главной форме пользователя перенаправляет на страницу с формой регистрации regist.php, в которой пользователь может заполнить поля Фамилия, Имя, Логин, Пароль.
Для текстовых полей необходимо выполнять проверку на пустоту; если поле пустое, то выделить его красным цветом (как и в форме авторизации).
Если пользователь ввел логин такой, какой уже есть в БД, то нужно выдать сообщение о том, что такой логин уже существует и выделить поле с логином красным цветом.
Если пользователь ввел корректные данные, то происходит запись данных пользователя в БД. И с помощью записанного логина и пароля можно авторизоваться.
Форма регистрации может иметь такой вид:
1) Для реализации регистрации пользователя внесите изменения в структуру базы данных – добавьте поля Фамилия и Имя. Т.е. таблица info будет иметь следующие поля: id (идентификатор пользователя, auto_increment), name (varchar, длина поля 30 символов), surname (varchar, длина поля 30 символов), login (varchar, длина поля 30 символов) и pass (varchar, длина поля 40 символов).
Таблица базы данных, которая хранит информацию о зарегистрированном пользователе имеет следующую структуру:
2) На странице index.php допишите в скрипт следующую функцию:
//если
нажата кнопка Регистрация
$('[name="regist"]').bind("click", function(){
//отправляем пользователя на страницу профиля
window.location.href='regist.php';
//отменяем отправку данных формы на сервер
return false;
})
3) Создаем копию страницы index.php, называем ее regist.php
4) Создаем файл стилей style2.css для оформления формы регистрации и подключаем его на странице regist.php в разделе head:
<link rel="stylesheet" href="style2.css">
5) Код страницы регистрации regist.php:
6) Для обработки формы со страницы регистрации создадим страницу ajax2.php для выполнения ajax-запроса.
Код страницы ajax2.php:
