Microsoft Word фккпі 2021 122 Єфремова Д.Є. docx
Створення інтерфейсу сторінки редагування або додавання інформації в профіль
жүктеу/скачать 4,21 Mb.
|
- Бұл бет үшін навигация:
- Реалізація і налаштування серверної частини
Створення інтерфейсу сторінки редагування або додавання інформації в профільВигляд сторінки додавання інформації та її редагування зображений на рис. 3.22. Рис. 3.22. Інтерфейс сторінки редагування профілю Поля для заповнення інформації створені за допомогою та . Другий дозволяє створити елемент у вигляді списку, що розгортається (рис. 3.23). Рис. 3.23. Вибір марки авто Реалізація і налаштування серверної частиниДля реалізації серверної частини для початку необхідно встановити Laravel та репозиторій за допомогою терміналу для того, щоб було зручно створювати базу даних та щоб був доступ адміністратора. Для того щоб створити та керувати базою даних, необхідно запустити локальний WEB– сервер XAMPP, в якому міститься необхідна програма. Процес створення бази даних зображений на рис. 3.24. Рис. 3.24. Створення бази даних Необхідно підключити Laravel до БД, змінивши файл з налаштуваннями (рис. 3.25). Рис. 3.25. Підключення Laravel В IDE PhpStorm через термінал було підключено систему, яка емулює CMS та CRUD, зареєстровано себе як адміністратора та в режимі тестування обрано одну мову (рис. 3.26). Рис. 3.26. Підключення системи емуляції На рис. 3.27 зображено налаштування локального домену. Рис. 3.27. Налаштування локального домену Необхідно виконати перевірку успішного виконання всіх кроків. Для цього необхідно запустити сторінку. При успішному запуску на екран має вивестись текст «HW!» (рис. 3.28). Рис. 3.28. Успішний запуск локального домену Якщо в командному рядку дописати «/admin», здійсниться вхід в панель адміністратора, де в подальшому можна відстежувати дані користувачів в БД. Вхід в панель адміністратора зображено на рис. 3.29, а на рис. 3.30 зображений стандартний вигляд панелі адміністратора. Рис. 3.29. Вхід в панель адміністратора Рис. 3.30. Стандартний вигляд панелі адміністратора За допомогою скритого функціоналу панелі адміністратора можна створити таблиці в БД (рис. 3.31). Рис. 3.31. Створення нової таблиці Всього необхідно створити чотири таблиці: таблиця, що зберігає всі необхідні дані про користувача (рис. 3.32) таблиця, що зберігає всі необхідні дані про автомобіль (рис. 3.33) таблиця, що зберігає всі необхідні дані про запити (рис. 3.34) таблиця, що зберігає всі необхідні дані про відгуки (рис. 3.35) Рис. 3.32. Таблиця Users Рис. 3.33. Таблиця Cars Рис. 3.34. Таблиця Requests Рис. 3.35. Таблиця Responses Вигляд панелі адміністратора після створення таблиць (рис. 3.36). Рис. 3.36. Оновлена панель адміністратора Для подальшого налаштування бекенду, необхідно перенести написаний фронтенд в фреймворк Laravel. Першим кроком в створенні бекенду – є створення контролерів для груп схожих сутностей та написання коду для кожної сторінки (рис. 3.37), в якому задається метод, майбутня назва URL сторінки та присвоєно виконання майбутньої функції на відповідній сторінці. Контролер необхідний для керування бекендом, адже в ньому описуються функції, за допомогою яких існує зв'язок сутностей з бази даних і фронтенду. Рис. 3.37. Приклад групи схожих сутностей Для того, щоб контент відобразився на сторінці, необхідно в відповідному контролері створити функцію, що повертає відображення контенту (рис. 3.38). Рис. 3.38. Функція для відображення сторінки каталогу авто На рис. 3.39 зображена перевірка авторизації користувача при вході у WEB–додаток. Якщо користувач раніше зайшов в свій профіль з свого присторою, він перенаправляється на сторінку каталогу авто, якщо ні – користувачу відображається перша сторінка з вибором: авторизація або реєстрація. Рис. 3.39. Перевірка авторизації На рис. 3.40 зображена функція за допомогою якої відбувається вихід з WEB–додатку. Рис. 3.40. Вихід з WEB–додатку Для того щоб правильно виконувалась функція авторизації, в першу чергу необхідно задати метод Post в формі для вводу даних авторизації. Наступним кроком виконується перевірка, чи авторизований користувач. Якщо так – відбувається перехід на сторінку каталогу, якщо ні – то після введення в форму даних, на сервер надсилається два поля (логін та пароль). Далі відбувається перевірка наявності в базі даних введеного логіну. Якщо він присутній, то відбувається порівнювання надісланого захешованого паролю з наявним в базі даних захешованим паролем. Якщо всі введені користувачем дані відповідають даним в БД, то авторизація пройшла успішно і відбувається перехід на сторінку каталогу. Уривок коду реалізації процесу авторизації зображено на рис. 3.41. Рис. 3.41. Реалізація процесу авторизації Для реєстрації користувача виконується перевірка даних на їх коректність (рис. 3.42). За допомогою вбудованого в Laravel класу Validator викликається функція make, яка порівнює дані на вході з заданими шаблонами та умовами, наприклад: поле має бути обов’язково заповнено, дані, що передаються, повинні бути унікальними, а максимальна кількість символів не повинна перевищувати задане значення. Рис. 3.42. Перевірка даних при реєстрації Для того щоб зберегти нового користувача WEB–додатку в БД, виконується підтвердження введених даних, шляхом надсилання коду підтвердження. Реалізація даного процесу відбувається наступним чином: користувач створюється у БД (рис. 3.43), йому присвоюється код підтвердження, що рандомно генерується за допомогою функції generateRandomString (рис. 3.44), а вже згенерований код надсилається користувачу. Рис. 3.43. Функція створення користувача Рис. 3.44. Генерація випадкового коду Для підтвердження реєстрації відбувається порівняння збереженого в БД згенерованого коду з тим, що ввів користувач в відповідне поле. Якщо користувача з введеним кодом не існує в БД – користувач лишається на тій самій сторінці, якщо існує – то відбувається оновлення таблиці, а саме: статус користувача змінюється на авторизований, а код підтвердження видаляється з БД. Після успішної реєстрації відбувається перехід на сторінку каталогу авто, якщо ні. На рис. 3.45 зображений уривок коду підтвердження реєстрації. Рис. 3.45. Підтвердження коду На рис. 3.46 зображений уривок коду, за допомогою якого відбувається вивід даних користувача у відповідні поля на сторінці редагування, шляхом отримання і передачі даних на неї. Замість прямих запитів в SQL використовується PDO Laravel [16]. Рис. 3.46. Вивід даних на сторінку Для збереження введених даних користувача спочатку необхідно створити масиви, в які будуть передаватись веденні користувачем у відповідні поля значення (рис. 3.47), а потім, перебираємо кожне поле і, якщо користувач ввів у нього нове значення, то зберігаємо його, а якщо користувач змінив вже заповнене поле, то оновлюємо йогозначення в БД (рис. 3.48). Рис. 3.47. Створення масивів даних користувача Рис. 3.48. Збереження даних користувача На рис. 3.49 зображений уривок коду в якому відбувається отримання даних з БД про всі додатні користувачами авто, для подальшого відображення на головній сторінці каталогу. Для цього необхідно перебрати кожне авто в базі даних (рис. 3.50) та вивести необхідну інформацію на сторінці (рис. 3.51). Рис. 3.49. Отримання даних про авто з БД Рис. 3.50. Перебір кожного авто в БД Рис. 3.51. Вивід авто Результатом зробленої роботи буде відповідність відображення інформації в базі даних (рис. 3.52) та на головному екрані (рис. 3.53). Рис. 3.52. Відображення інформації в базі даних Рис. 3.53. Відображення інформації на головному екрані жүктеу/скачать 4,21 Mb. Достарыңызбен бөлісу:
|