-
Notifications
You must be signed in to change notification settings - Fork 0
Frontend
Цей документ описує структуру, дизайн і функціональність веб-застосунку для інтернет-магазину.
Використані технології
- HTML
- CSS
- JS
- HTMX
Сторінка входу слугує точкою входу для користувачів для отримання безпечного доступу до їхніх індивідуальних облікових записів у веб-застосунку інтернет-магазину. З огляду на те, що платформа може містити конфіденційні дані користувачів, такі як особиста інформація, історія замовлень та способи оплати, безпечний та інтуїтивно зрозумілий процес входу має важливе значення. Ця сторінка дозволяє користувачам вводити свої облікові дані, підтверджувати свою особу та отримувати доступ до своїх персоналізованих інформаційних панелей, де вони можуть виконувати різні завдання, такі як перегляд продуктів, розміщення замовлень та відстеження відправлень.
Коли користувач вперше переходить на сторінку входу, він бачить форму, яка містить наступні поля:
- Поле адреси електронної пошти: Поле для введення адреси електронної пошти користувача.
- Поле "Пароль": Поле для введення пароля користувача.
Обидва поля є обов'язковими і включають перевірку HTML5 на стороні клієнта:
- Email: У полі для введення адреси електронної пошти використовується HTML-атрибут type="email", щоб переконатися, що користувач вводить коректний формат адреси електронної пошти.
- Пароль: Поле для введення пароля має тип type="password", щоб приховати символи при введенні.
- Бібліотека HTMX перехоплює подію відправлення форми і робить асинхронний HTTP POST запит до бекенду Django за адресою /api/signin/.
- HTMX гарантує, що відправлення форми не призводить до повного перезавантаження сторінки, покращуючи користувацький досвід.
- Сервер перевірить облікові дані. Якщо вони невірні, повертається відповідь у форматі JSON зі статусом "помилка". HTMX відреагує на це, відобразивши повідомлення про помилку на формі.
- Якщо облікові дані правильні, сервер створить новий сеанс користувача і поверне статус "успіх" у відповіді JSON.
- Після успішного входу в систему, HTMX ініціює перенаправлення на стороні клієнта на інформаційну панель користувача або на попередньо відвідану сторінку, якщо це можливо.
Якщо сервер повертає помилку або якщо відправка форми не вдається з будь-якої причини, повідомлення про помилку буде відображено на самій формі, інформуючи користувача про те, що пішло не так. Це також буде оброблятися асинхронно за допомогою HTMX, щоб забезпечити безперебійну роботу користувача.
HTML-сторінка для функції входу розділена на кілька розділів, включаючи заголовок, форму і нижній колонтитул. Елементи мають ідентифікатори та класи, які відповідають атрибутам CSS та HTML.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Sign In</title>
<link rel="stylesheet" href="css/signin.css">
</head>
<body>
<div id="signin-container">
<form hx-post="/api/signin/" hx-swap="outerHTML">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Sign In">
</form>
</div>
</body>
</html>
HTMX використовується для асинхронної обробки відправлення форми. Коли форма відправляється, HTTP POST-запит надсилається на кінцеву точку /api/signin/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем.
Приклад:
<form hx-post="/api/signin/" hx-swap="outerHTML">
<!-- form content -->
</form>
Стилістика міститься в окремому CSS-файлі.
Приклад:
#signin-container {
width: 300px;
margin: auto;
}
label, input {
display: block;
margin-bottom: 10px;
}
Сторінка реєстрації відіграє важливу роль у залученні нових користувачів до веб-застосунку інтернет-магазину. З огляду на те, що електронна комерція є дуже персоналізованою, кожен користувач потребує окремого облікового запису для управління своїми замовленнями, перегляду рекомендацій щодо товарів, збереження обраних товарів та безпечної роботи з платіжними системами. Сторінка реєстрації призначена для того, щоб дозволити новим користувачам легко і безпечно створювати власні облікові записи, створюючи основу для персоналізованого шопінгу.
Коли користувач вперше заходить на сторінку реєстрації, він бачить просту, не перевантажену форму, що складається з наступних полів для введення даних:
- Поле адреси електронної пошти: Слугує унікальним ідентифікатором для кожного користувача.
- Поле "Пароль": Для встановлення надійного пароля для облікового запису.
- Поле "Підтвердити пароль": Для підтвердження правильності введеного пароля.
- Перевірка електронної пошти: Адреса електронної пошти є обов'язковою і повинна відповідати стандартному формату електронної пошти ([email protected]). Використовується атрибут HTML5 type="email" для перевірки на стороні клієнта.
- Перевірка пароля: Поле пароля також є обов'язковим. Воно встановлюється як type="password", щоб введені символи були приховані, забезпечуючи базовий рівень безпеки.
- Підтвердити перевірку пароля: Це поле має збігатися з початковим полем пароля, щоб переконатися, що користувач не зробив помилки при введенні пароля. З метою безпеки воно також встановлюється як type="password".
Коли користувач натискає кнопку "Зареєструватися" після заповнення форми HTMX перехоплює цю подію і надсилає асинхронний HTTP POST запит до бекенду Django за адресою /api/register/. HTMX гарантує, що відправка форми обробляється без перезавантаження сторінки, забезпечуючи тим самим безперебійну роботу користувача.
- Внутрішній сервіс перевіряє електронну пошту та паролі. Якщо будь-яке з полів є недійсним, повертається відповідь у форматі JSON зі статусом "помилка".
- Перевірка на дублювання. Бекенд перевірить, чи адреса вже зареєстрована. Якщо це так, буде повернуто повідомлення про помилку.
- Якщо перевірка пройшла успішно і дублікатів не знайдено, буде створено новий обліковий запис користувача. Відповідь у форматі JSON зі статусом "success" буде надіслано назад на фронт-енд.
- Після успішної реєстрації HTMX на стороні клієнта перенаправляє користувача на сторінку "Дякуємо за реєстрацію" та безпосередньо на його нову панель користувача.
Помилки на стороні сервера: Якщо серверна валідація не пройшла успішно або імейл вже зареєстровано, повідомлення про помилку буде відображено безпосередньо у формі без перезавантаження сторінки, завдяки HTMX. Помилки на стороні клієнта: Якщо валідація на стороні клієнта не пройшла успішно (наприклад, неправильний формат електронної пошти або не збігаються паролі), форма відобразить попереджувальне повідомлення без відправки даних на сервер.
HTML-сторінка для функції входу розділена на кілька розділів, включаючи заголовок, форму і нижній колонтитул. Елементи мають ідентифікатори та класи, які відповідають атрибутам CSS та HTML. Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="css/registration.css">
</head>
<body>
<div id="registration-container">
<form hx-post="/api/register/" hx-swap="outerHTML">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="passwordConfirm">Confirm Password:</label>
<input type="password" id="passwordConfirm" name="passwordConfirm" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
HTMX використовується для асинхронної обробки відправлення форми. Коли форма відправляється, HTTP POST-запит надсилається на кінцеву точку /api/register/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем. Приклад:
<form hx-post="/api/register/" hx-swap="outerHTML">
<!-- form content -->
</form>
Стилістика міститься в окремому CSS-файлі. Приклад:
#registration-container {
width: 300px;
margin: auto;
}
label, input {
display: block;
margin-bottom: 10px;
}