Практическая по созданию капчи - Разработка формы регистрации и авторизации при помощи html, css, JavaScript, php

Практическая по созданию капчи. Разработка формы регистрации и авторизации при помощи html, css, JavaScript, php

Практическая работа 1

Тема: Разработка формы регистрации и авторизации при помощи HTML, CSS, JavaScript, PHP.

Цель:

Научиться создавать формы при помощи HTML;
Применять стили CSS;
Научиться применять язык JavaScript для функциональности форм.
Разработать систему авторизации и регистрации на языке PHP.

Задачи:

Разработать форму при помощи HTML;
При помощи каскадных таблиц стилей создать приятную для пользователя web-страницу;
Научиться использовать базовые функции JavaScript.
Научиться использовать базовые функции PHP.

Ход работы:

1. Описание web-форм:

1.1 Форма регистрации состоит из шести полей: «Логин», «Пароль», «Повторите пароль», «Телефон», «Почта», «Капча» (Рисунок 1). Поля могут содержать не более 50 символов (Рисунок 2). Поля «Пароль» и «Повторите пароль» должны соответствовать друг другу (Рисунок 3). Поле «Почта» принимает латинские символы, цифры, один символ «@» и «.». Поле «Капча» должна соответствовать тексту сгенерированным при помощи тега canvas (Рисунок 4). Поля должны быть уникальными для каждого пользователя (Рисунок 5). Поля не должны быть пустыми (Рисунок 6). При успешной регистрации нам выводится данное сообщение (Рисунок 7).

Рисунок 1. Форма регистрации

Рисунок 2. Более 50 символов в поле

Рисунок 3. Несовпадение полей «Пароль» и «Повторите пароль»

Рисунок 4. Случайно сгенерированный текст

Рисунок 5. Пользователь с такой почтой уже существует

Рисунок 6. Незаполненные поля

Рисунок 7. Успешная регистрация

1.2 Форма авторизации состоит из 2 полей: «Логин», «Пароль» (Рисунок 8). Поля должны совпадать с данными зарегистрированного пользователя (Рисунок 9). При успешной авторизации нам выводится сообщение об успешной авторизации и данные пользователя (Рисунок 10).

Рисунок 8. Форма авторизации

Рисунок 9. Введенные данные не совпали с хранимыми данными

Рисунок 10. Успешная авторизация

2. Программный код

2.1 login.html

DOCTYPE html>

include_once("../core/db.php");

$login = $_POST["login"];

$password = $_POST["password"];

$sql = "SELECT * FROM `users` WHERE login = '$login' AND password = '$password'";

$query = dbQuery($sql);

$result = $query->fetch();

// При успешной Авторизации

if ($result) {

var_dump($result);

echo "прошли авторизацию";

} else {

echo "

";

echo "

не прошли авторизацию (Пользователя не существует)

";

echo "Обратно";

}

?>

include_once("../core/db.php");

$login = $_POST["login"];

$password = $_POST["password"];

$rep_password = $_POST["rep_password"];

$email = $_POST["email"];

$phone = $_POST["phone"];

// проверка на не пустые поля

foreach ($_POST as $key => $value) {

if ($_POST[$key] == "") {

echo "

";

echo "не прошли регистрацию (Пустые поля)";

echo "Обратно";

exit();

}

}

// пароли не совпадают

if ($password != $rep_password) {

echo "

";

echo "не прошли регистрацию (Пароли не совпали)";

echo "Обратно";

exit();

}

$sql = "INSERT INTO `users`(`id`, `login`, `password`, `phone`, `email`) VALUES (0, '$login', '$password', '$phone','$email')";

$query = dbQuery($sql);

// При успешной регистарции

if ($query) echo "прошли регистрацию";

else {

echo "

";

echo "не прошли регистрацию (Внутрення ошибка сервера)";

echo "Обратно";

}

?>