web

1.

MoviePortal – веб-приложение
видеотека
Выполнил: студент группы
ПИН-221
Титов Глеб Сергеевич

2. Цель проекта

2
• Разработать веб-приложение для каталогизации фильмов с
административной панелью и современной системой
авторизации.
2

3. Задачи проекта

3
• Создать дизайн - разработать концепцию, цветовую схему и UI
компоненты
• Сверстать макет - реализовать адаптивную верстку на
HTML/CSS/JS
• Настроить окружение - развернуть Docker-инфраструктуру с
тремя контейнерами
• Реализовать работу с БД - создать запросы на получение,
добавление и обновление данных
• Реализовать авторизацию - интегрировать OAuth
3

4. Концепция дизайна

4
4

5. UI компоненты

5
• Карточки фильмов с hoverэффектами - при наведении
карточка приподнимается и
появляется тень
• Навигационное меню с бургериконкой для мобильных устройств
• Поиск в реальном времени с
выпадающим списком результатов
• Хлебные крошки
5

6. Вёрстка макета

6
Вёрстка макета
Адаптивная сетка фильмов
Анимация и hover-эффекты
Гамбургер-меню
6

7. Вёрстка макета

7
Соблюдается иерархия
заголовков
Сематические теги
Атрибуты для ссылок и
изображений
Уникальные метатеги
7

8. Настраивание окружения

8
8

9. Примеры запросов к базе данных (SELECT)

9
9

10. Примеры запросов к базе данных (INSERT)

10
10

11. Примеры запросов к базе данных (UPDATE)

11
Примеры запросов к базе данных (UPDATE)
11

12. Oauth 2.0 - Yandex ID

12
12

13. Шаги авторизации

13
• Шаг 1-2: Пользователь кликает на кнопку, и мы редиректим его на
https://oauth.yandex.ru/authorize
• Шаг 3: Яндекс показывает пользователю форму входа (если не
залогинен) и запрос разрешения на доступ к данным.
• Шаг 4: После подтверждения Яндекс редиректит на наш callback с
параметрами
• Шаг 5-6: Наш сервер делает серверный POST запрос к Яндексу,
передавая code, client_id и client_secret. Яндекс возвращает
access_token. Важно: client_secret никогда не передается клиенту,
только между серверами
• Шаг 7-8: С полученным токеном делаем GET запрос
• Шаг 9-10: Ищем пользователя по yandex_id в БД. Если найден авторизуем через сессию.
• Шаг 11: Если не найден - показываем форму привязки, где
пользователь вводит логин/пароль существующего админа.
13

14. Яндекс Oauth – получение токена

14
14

15. Яндекс Oauth – получение данных пользователя

15
15

16. Яндекс.Метрика

16
16

17. Оптимизировано время загрузки страниц

17
17

18. Спасибо за внимание!