Создание формы входа — это не просто технический процесс; это ключевой элемент безопасности вашего веб-приложения. В этом пошаговом руководстве мы научимся добавлять форму входа в ваше веб-приложение, которое уже включает форму регистрации. Мы будем использовать существующие файлы и добавлять необходимый код для реализации функционала входа. Это руководство идеально подходит как для начинающих, так и для опытных разработчиков.
Часть 1: Обновление HTML-файла
Шаг 1: Добавление формы входа в существующий файл
Если у вас уже есть файл 'index.html', откройте его и добавьте код для формы входа. Убедитесь, что форма регистрации уже присутствует в этом файле.
<h2>Вход в систему</h2>
<form id="loginForm">
<label for="loginUsername">Имя пользователя:</label>
<input type="text" id="loginUsername" name="username" required><br>
<label for="loginPassword">Пароль:</label>
<input type="password" id="loginPassword" name="password" required><br>
<button type="submit">Войти</button>
</form>
Полный пример файла 'index.html'
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма регистрации и входа</title>
</head>
<body>
<!-- Форма регистрации -->
<h2>Регистрация пользователя</h2>
<form id="registrationForm">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required><br>
<button type="submit">Зарегистрироваться</button>
</form>
<!-- Форма входа -->
<h2>Вход в систему</h2>
<form id="loginForm">
<label for="loginUsername">Имя пользователя:</label>
<input type="text" id="loginUsername" name="username" required><br>
<label for="loginPassword">Пароль:</label>
<input type="password" id="loginPassword" name="password" required><br>
<button type="submit">Войти</button>
</form>
<script src="registration.js"></script>
<script src="login.js"></script>
</body>
</html>
Часть 2: Добавление JavaScript для обработки формы входа
Шаг 2: Создание JavaScript для обработки формы входа
Теперь создайте файл 'login.js' (если его еще нет) и добавьте следующий код для обработки отправки формы входа:
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // предотвращаем стандартное поведение формы
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
const data = { username, password };
fetch('login.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Успешный вход!');
window.location.href = 'welcome.html'; // Перенаправление на страницу приветствия
} else {
alert('Ошибка: ' + data.message);
}
})
.catch((error) => {
console.error('Ошибка:', error);
});
});
Часть 3: Создание PHP-скрипта для проверки учетных данных
Шаг 3: Создание PHP-скрипта
Создайте файл 'login.php', который будет принимать данные из формы и проверять их в базе данных. Добавьте следующий код:
<?php
header('Content-Type: application/json');
$servername = "localhost"; // Замените на ваши данные
$username = "root"; // Замените на ваши данные
$password = ""; // Замените на ваши данные
$dbname = "your_database"; // Замените на название вашей базы данных
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die(json_encode(['success' => false, 'message' => 'Ошибка подключения к базе данных']));
}
$data = json_decode(file_get_contents("php://input"), true);
$username = $conn->real_escape_string($data['username']);
$password = $data['password']; // Не хешируем пароль здесь
$sql = "SELECT * FROM users WHERE username='$username'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
// Проверяем пароль
if (password_verify($password, $row['password'])) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'message' => 'Неверный пароль']);
}
} else {
echo json_encode(['success' => false, 'message' => 'Пользователь не найден']);
}
$conn->close();
?>
Часть 4: Обработка успешного входа
Шаг 4: Создание страницы приветствия
После успешного входа вы можете перенаправить пользователя на страницу приветствия ('welcome.html'). Убедитесь, что у вас есть такая страница с приветствием.
Пример страницы приветствия ('welcome.html'):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Добро пожаловать</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Вы успешно вошли в систему.</p>
</body>
</html>
Заключение
Теперь у вас есть полное руководство по созданию формы входа с использованием JavaScript и PHP. Если у вас возникли вопросы или вы хотите узнать больше о программировании и веб-разработке, не стесняйтесь оставлять комментарии под этим постом!
Попробуйте реализовать эту форму входа на своем проекте и делитесь своими успехами! Если вам понравилось это руководство, подписывайтесь на мой канал в Яндекс Дзен, чтобы не пропустить новые полезные материалы и уроки. Спасибо за внимание! Жду вас на следующем уроке!