Дорожная карта

Практика рассчитана на 4 недели и включает 16 практических работ.

Дорожная карта показывает, какие результаты должны быть получены на каждой неделе практики.

Общая дорожная карта

Неделя	Этап	Практические работы	Основной результат
1	Анализ, требования и дизайн-концепция	№1–4	Паспорт проекта, требования, структура сайта, дизайн-концепция
2	UI-kit, прототип и начальная верстка	№5–8	UI-kit, макеты, прототип, публичные страницы, графика
3	База данных, PHP и пользовательская часть	№9–12	SQL, PDO, авторизация, роли, личный кабинет
4	Админка, AJAX, адаптивность и защита	№13–16	Админ-панель, Fetch API, адаптивность, публикация и защита

Неделя 1. Анализ, требования и дизайн-концепция

Цель недели — понять предметную область, определить пользователей проекта, сформировать требования и подготовить основу будущего интерфейса.

На первой неделе выполняются практические работы №1–4.

№	Практическая работа	Результат
1	Исследование предметной области и оформление паспорта проекта	Паспорт проекта, Git-репозиторий
2	Формирование требований, ролей и пользовательских сценариев	Требования, роли, пользовательские сценарии
3	Проектирование структуры сайта и пользовательских маршрутов	Структура страниц, карта навигации, пользовательские маршруты
4	Разработка дизайн-концепции и визуального направления проекта	Референсы, цветовое решение, первые эскизы, дизайн-концепция

Что нужно сделать

проанализировать предметную область;
определить целевую аудиторию;
оформить паспорт проекта;
сформировать функциональные и нефункциональные требования;
описать пользовательские сценарии;
определить роли пользователей;
спроектировать структуру страниц;
подготовить карту навигации;
описать пользовательские маршруты;
подобрать референсы;
выбрать цветовое решение;
подготовить промежуточные эскизы интерфейса;
определить визуальное направление проекта;
создать Git-репозиторий и выполнить первые коммиты.

Результат недели

К концу недели должны быть готовы:

Git-репозиторий;
паспорт проекта;
требования к проекту;
пользовательские сценарии;
описание ролей пользователей;
структура страниц;
карта навигации;
пользовательские маршруты;
референсы;
цветовая палитра;
первые эскизы интерфейса;
описание дизайн-концепции.

Контрольная точка

Студент должен объяснить:

что за проект он разрабатывает;
для кого предназначен проект;
какую проблему решает проект;
какие функции будут реализованы;
какие страницы планируются;
какие пользовательские маршруты предусмотрены;
какое визуальное направление выбрано;
какие решения уже зафиксированы в Git-репозитории.

Неделя 2. UI-kit, прототип и начальная верстка

Цель недели — разработать UI-kit и макеты в Figma, подготовить графические материалы и начать перенос интерфейса в HTML/CSS/JavaScript.

На второй неделе выполняются практические работы №5–8.

№	Практическая работа	Результат
5	Создание UI-kit веб-приложения в Figma	UI-kit, компоненты, состояния интерфейса
6	Разработка макетов страниц и интерактивного прототипа	Макеты страниц, прототип переходов
7	Начальная верстка публичной части сайта	Главная страница, каталог, детальная страница
8	Верстка форм, графических элементов и подготовка изображений	Формы, изображения, графические элементы

Что нужно сделать

создать UI-kit в Figma;
оформить цветовые стили;
оформить типографику;
создать компоненты кнопок;
создать компоненты форм;
оформить карточки объектов;
оформить таблицы и статусы для административной части;
разработать макеты основных страниц;
настроить интерактивный прототип;
подготовить несколько адаптивных макетов;
подготовить структуру HTML/CSS/JS;
сверстать главную страницу;
сверстать страницу каталога;
сверстать детальную страницу объекта;
сверстать формы регистрации и авторизации;
выполнить компоновку страниц сайта;
создать стилевое оформление с помощью CSS;
подготовить изображения для главной страницы, каталога и карточек;
использовать изображения в HTML/CSS;
выполнить начальную оптимизацию изображений;
продолжить ведение проекта в Git.

Результат недели

К концу недели должны быть готовы:

ссылка на Figma-файл;
UI-kit;
макеты основных страниц;
интерактивный прототип;
несколько адаптивных макетов;
сверстанная главная страница;
сверстанный каталог;
сверстанная детальная страница;
сверстанные формы регистрации и авторизации;
CSS-оформление проекта;
подготовленные изображения;
графические элементы интерфейса;
актуальная история коммитов в Git.

Контрольная точка

Студент должен показать:

Figma-файл;
UI-kit;
макеты страниц;
прототип переходов;
соответствие верстки макетам;
подготовленные графические материалы;
структуру HTML/CSS/JS;
изменения в Git-репозитории.

Неделя 3. База данных, PHP и пользовательская часть

Цель недели — спроектировать базу данных, подготовить PHP-проект, реализовать авторизацию, роли, личный кабинет и основные пользовательские действия.

На третьей неделе выполняются практические работы №9–12.

№	Практическая работа	Результат
9	Проектирование базы данных и подготовка SQL-скриптов	Структура БД, `schema.sql`, тестовые данные
10	Подготовка PHP-проекта и подключение базы данных через PDO	PHP-структура, подключение к БД, вывод данных
11	Реализация регистрации, авторизации и ролей пользователей	Регистрация, авторизация, сессии, роли
12	Разработка пользовательской части и личного кабинета	Каталог из БД, пользовательское действие, личный кабинет

Что нужно сделать

определить основные таблицы базы данных;
определить поля таблиц;
определить первичные и внешние ключи;
описать связи между сущностями;
подготовить SQL-скрипт создания базы данных;
подготовить тестовые данные;
организовать структуру PHP-проекта;
создать конфигурационный файл подключения к базе данных;
реализовать подключение через PDO;
вывести тестовые данные из базы данных на страницу;
реализовать регистрацию пользователя;
выполнить серверную валидацию форм;
хранить пароли через password_hash;
реализовать авторизацию;
проверять пароли через password_verify;
реализовать выход из системы;
использовать сессии;
разграничить доступ по ролям;
реализовать личный кабинет пользователя;
вывести каталог объектов из базы данных;
реализовать детальную страницу объекта;
реализовать категории;
реализовать форму основного пользовательского действия;
сохранять пользовательское действие в базе данных;
реализовать страницу «Мои действия»;
продолжить ведение проекта в Git.

Результат недели

К концу недели должны быть готовы:

структура базы данных;
SQL-файл database/schema.sql;
тестовые данные;
документация по базе данных;
структура PHP-проекта;
подключение к MySQL/MariaDB через PDO;
вывод данных из базы данных;
регистрация;
авторизация;
выход из системы;
роли пользователя и администратора;
защищённый личный кабинет;
каталог с данными из базы;
детальная страница объекта;
основное пользовательское действие;
страница «Мои действия»;
актуальная история коммитов в Git.

Контрольная точка

Студент должен показать полный пользовательский сценарий:

регистрация → авторизация → каталог → детальная страница → действие → личный кабинет

Также необходимо показать:

структуру базы данных;
подключение к базе данных;
вывод данных из базы;
работу регистрации и авторизации;
разделение доступа по ролям;
сохранение пользовательского действия в базе данных.

Неделя 4. Админка, AJAX, адаптивность, публикация и защита

Цель недели — реализовать административную часть, добавить интерактивность, адаптировать интерфейс, протестировать проект, опубликовать его и подготовиться к защите.

На четвёртой неделе выполняются практические работы №13–16.

№	Практическая работа	Результат
13	Разработка административной панели и CRUD-операций	Админ-панель, CRUD, изменение статусов
14	AJAX-интерактивность с использованием Fetch API	Минимум 3 AJAX-действия
15	Адаптивность, микроанимации, мультимедиа и тестирование	Адаптивная версия, анимация, оптимизация, тестирование
16	Публикация проекта, подготовка презентации и защита	Опубликованный проект, README, презентация, защита

Что нужно сделать

создать главный экран администратора;
реализовать список объектов каталога;
реализовать добавление объекта;
реализовать редактирование объекта;
реализовать удаление объекта;
реализовать список пользовательских действий;
реализовать изменение статусов;
ограничить доступ к административной панели;
добавить AJAX-интерактивность через Fetch API;
реализовать JSON-ответы на стороне PHP;
обновлять интерфейс без перезагрузки страницы;
реализовать минимум 3 AJAX-действия;
добавить динамические элементы интерфейса;
добавить микроанимации;
создать GIF-анимацию или современный анимационный элемент;
подготовить мультимедиа для сайта;
выполнить финальную оптимизацию изображений;
адаптировать сайт под мобильные устройства;
протестировать проект;
исправить ошибки;
подготовить README;
опубликовать проект на хостинге;
подготовить презентацию;
финально оформить Git-репозиторий;
защитить проект.

Результат недели

К концу недели должны быть готовы:

административная панель;
CRUD для основной контентной сущности;
обработка пользовательских действий;
изменение статусов;
минимум 3 AJAX-действия;
JSON-ответы от PHP;
динамические элементы интерфейса;
адаптивная верстка;
оптимизированные изображения;
GIF-анимация или другой анимационный элемент;
протестированный проект;
README;
опубликованный проект;
Git-репозиторий;
Figma-файл;
презентация;
готовность проекта к защите.

Контрольная точка

Студент должен продемонстрировать:

готовый веб-проект;
опубликованную версию проекта;
Git-репозиторий;
Figma-файл;
пользовательскую часть;
личный кабинет;
административную панель;
CRUD-операции;
изменение статусов;
работу AJAX-интерактивности;
адаптивность интерфейса;
подготовленные графические и мультимедийные материалы;
презентацию;
готовность проекта к итоговой защите.

Итоговые результаты практики

К завершению учебной практики студент должен подготовить:

работающий веб-проект;
дизайн-проект в Figma;
UI-kit;
интерактивный прототип;
сверстанные страницы сайта;
базу данных;
SQL-скрипты;
серверную часть на PHP;
регистрацию и авторизацию;
роли пользователей;
личный кабинет;
административную панель;
CRUD-операции;
пользовательское действие;
AJAX-интерактивность;
адаптивную верстку;
оптимизированные изображения;
анимационные или мультимедийные элементы;
Git-репозиторий;
README;
опубликованную версию проекта;
презентацию для защиты.