Microsoft Word фккпі 2021 122 Єфремова Д.Є. docx


Створення інтерфейсу сторінок входу та реєстрації



бет29/34
Дата15.12.2023
өлшемі4,21 Mb.
#139482
1   ...   26   27   28   29   30   31   32   33   34

Створення інтерфейсу сторінок входу та реєстрації


Першим етапом розробки WEB–додатку є створення сторінок авторизації та реєстрації користувача. Коли користувач зайшов у WEB–додаток YOCar, йому має надаватись вибір функцій: або зареєструватися, якщо користувач вперше зайшов у WEB–додаток, або авторизуватись, якщо профіль був уже створений. Перша сторінка зображена на рис. 3.2.




Рис. 3.2. Початкова сторінка WEB–додатку власного каршерінгу


При натисканні на кнопку буде відбуватись перехід на відповідну сторінку. Сторінки входу та реєстрації зображені на рис. 3.3 – 3.4.

Рис. 3.3. Сторінка авторизації у WEB–додатку


Якщо користувач забувся пароля, він може звернутись в підтримку, натиснувши на текст «Забули пароль?», що розміщений під полями вводу для подальшого його відновлення.


Рис. 3.4. Сторінка реєстрації у WEB–додатку


Поля для реєстрації, такі як: телефон, email та пароль, представлені у вигляді HTML–форми для взаємодії між користувачем та WEB–додатком.

Інформація HTML–форм передається за допомогою елемента . Для введення одного рядка тексту застосовується елемент , для введення електронної адреси – , а для введення пароля, що буде відображатись зірочками, – . Дані введені користувачем відправляються на сервер за допомогою кнопки для подальшої обробки та зберігання.


Якщо користувач ввів некоректно дані, то буде відображатися підказка
(Рис.3.5) для подальшої точної обробки цих даних.

Рис. 3.5. Відображення підказки при заповнені форми


Після введення даних в поля для реєстрації та натискання кнопки
«Реєстрація», користувачу на вказаний номер надійде код підтвердження, який треба ввести у відповідне поле, що зображено на рис. 3.6, та натиснути
«Підтвердити».

Рис. 3.6. Поле підтвердження номеру телефону
Після введення вірного коду відбувається перехід на головну сторінку
WEB–додатку.


      1. Достарыңызбен бөлісу:
1   ...   26   27   28   29   30   31   32   33   34




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет