Задание на учебную практику УП.05.01 Проектирование и разработка информационных систем по специальности 09.02.07 Информационные системы и программирование ОПИСАНИЕ ПРОЕКТА И ЗАДАЧ Ваша задача – сверстать следующие страницы веб-сайта: ● Главная страница - Landing Page ● Страница входа в личный кабинет ● Страница регистрации в личном кабинете ● Страница личного кабинета ● Страница с результатами поиска ● Страница бронирования ● Страница управления бронированием ● Страница выбора мест в салоне воздушного судна
Главная страница (landing page) Главная страница должна содержать следующие блоки: ● Шапка сайта ○ Логотип авиакомпании < .test-0-logo > ○ Меню навигации ■ Акции < .test-0-nav-1 >, ■ Поиск < .test-0-nav-2 >, ■ Регистрация на рейс < .test-0-nav-3 >, ■ Личный кабинет < .test-0-nav-4 > ● Секция(и) описания принципа накопления бронирований для осуществления перелета с целью снижения его стоимости. Три принципа необходимо визуализировать при помощи анимированной инфографики на основе вводимых демо данных посетителем. Например, выбор условной даты, ввод числа бронирований и демонстрация изменения стоимости и вероятности вылета. ● Секция о доверии компании. ● Форма поиска. Должна содержать следующие поля ввода: ○ Откуда – город или аэропорт отправления < .test-0-fd > ○ Куда – город или аэропорт назначения < .test-0-fa > ○ Туда – дата вылета туда < .test-0-fdt- > ○ Обратно – дата вылета обратно < .test-0-fat > ○ Количество пассажиров (от 1 до 8 включительно) < .test-0-fnp > ○ Кнопка для поиска билетов < .test-0-fbs > ● Акции (список акций доступен в медиафайлах). Каждая акция должна содержать следующую информацию: ○ Изображение < .test-0-ai > ○ Название акции < .test-0-an > ○ Краткое описание акции < .test-0-ad > ○ Кнопка для просмотра акции < .test-0-abm > ● Форма для подписки на закрытые акции. Должна содержать следующие поля: ○ Поле для ввода Email < .test-0-sie > ○ Кнопка для подписки < .test-0-sbs > ● Подвал сайта ○ Телефон “8 (800) 100-10-10” < .test-0-phone > ○ Навигация по сайту (список ссылок для навигации будет предоставлен в медиафайлах)
Страница с результатами поиска Попасть на эту страницу можно с главной (из формы поиска рейсов). На этой странице необходимо отобразить все найденные рейсы (туда и обратно), а именно: ● Номер рейса < .test-4-fn > ● Воздушное судно < .test-4-at > ● Дата вылета < .test-4-dd > ● Время вылета < .test-4-dt > ● Время прилета < .test-4-at > ● Время в пути < .test-4-ft > ● Стоимость < .test-4-fp > ● Вероятность вылета < .test-4-fh > Вероятность вылета - это визуальное отображение зависящие от заполненности рейса в указанную дату. Если самолет заполнен на половину (30 из 60 пассажиров), то вероятность вылета - 100%. Если самолет заполнен на четверть (15 из 60 пассажиров), то вероятность вылета - 50% и т.д. Предусмотрите способ для выбора понравившихся рейсов (один рейс “туда” и один рейс “обратно”) и кнопку для перехода к бронированию < .test-4-bsb >.
Страница бронирования Данная страница отображается сразу после страницы с результатами поиска. На этой странице необходимо отобразить форму для сбора данных пассажиров, а именно: ● Данные о рейсах (для каждого рейса) ○ Номер рейса < .test-5-fc > ○ Название города вылета < .test-5-fcity > ○ Название аэропорта вылета < .test-5-from > ○ Дата вылета < .test-5-dd > ○ Время вылета < .test-5-dt > ○ Название города назначения < .test-5-tcity > ○ Название аэропорта назначения < .test-5-to > ○ Время прилета < .test-5-at > ○ Стоимость < .test-5-fp > ● Данные о пассажирах (для каждого пассажира) ○ Имя < .test-5-name > ○ Фамилия < .test-5-last > ○ Дата рождения < .test-5-dob > ○ Номер документа < .test-5-doc > ● Кнопка для добавления пассажира < .test-5-add > для добавления еще одного пассажира в бронирование ● Кнопка для удаление пассажира < .test-5-remove > ● Финальная стоимость < .test-5-price > ● Кнопка для оформления бронирования < .test-5-book >
Страница управления бронированием На этой странице необходимо отобразить всю информацию о бронировании, а именно: ● Информация о бронировании ○ Код бронирования < .test-6-code > ○ Стоимость бронирования < .test-6-tp > ● Информация о перелете (для каждого рейса) ○ Номер рейса < .test-6-fc > ○ Воздушное судно < .test-6-ac > ○ Название города вылета < .test-6-fcity > ○ Название аэропорта вылета < .test-6-from > ○ Дата вылета < .test-6-dd > ○ Время вылета < .test-6-dt > ○ Название города назначения < .test-6-tcity > ○ Название аэропорта назначения < .test-6-to > ○ Время прибытия < .test-6-at > ○ Время в пути < .test-6-ft > ○ Вероятность вылета < .test-6-fh > ● Информация о пассажирах (для каждого пассажира) ○ Имя < .test-6-name > ○ Фамилия < .test-6-last > ○ Дата рождения < .test-6-dob > ○ Номер документа < .test-6-doc > ○ Место в салоне воздушного судна туда < .test-6-ts > ○ Место в салоне воздушного судна обратно < .test-6-bs > ● Кнопка для выбора места < .test-6-select >
Страница выбора мест в салоне воздушного судна На этой странице необходимо отобразить схему воздушного судна с возможностью выбрать место. В авиакомпании используется Bombardier CRJ200, который имеет 12 рядов по 4 места в ряду (компоновка 2х2).
Страница регистрации в личном кабинете На этой странице вам необходимо сделать форму со следующими полями: ● Имя < .test-2-name > ● Фамилия < .test-2-last > ● Номер документа < .test-2-doc > ● Телефон < .test-2-phone > ● Пароль < .test-2-pass > ● Повтор пароля < .test-2-pass2 > ● Кнопка для регистрации < .test-2-btn >
Страница входа в личный кабинет На этой странице вам необходимо сделать форму со следующими полями: ● Телефон < .test-1-fpn > ● Пароль < .test-1-fps > ● Кнопка для входа < .test-1-fbs >
Страница личного кабинета На этой странице необходимо отобразить информацию о пользователе, а именно: ● Имя < .test-3-name > ● Фамилия < .test-3-last > ● Количество полетов < .test-3-num > ● Кнопка выхода из личного кабинета < .test-3-logout > ● Предстоящие бронирования. Каждое бронирование должно отражать следующую информацию: ○ Код бронирования < .test-3-code > ○ Дата вылета < .test-3-d1 > ○ Время вылета < .test-3-t1 > ○ Время прилета < .test-3-t2 > ○ Название аэропорта вылета < .test-3-from > ○ Название аэропорта назначения < .test-3-to >
БЛОК С PHP Реализовать механизм регистрации в личный кабинет и входа в личный кабинет с помощью PHP. Предварительно необходимо в СУБД MySQL создать базу данных airport с таблицей clients. Код должен состоять из функций и(или) классов, разделён на файлы.
ПРИМЕЧАНИЯ Сверстанный веб-сайт должен быть располагаться в папке airport и доступен по адресу http://localhost/airport/index.html. Сохраните сверстанные страницы со следующими именами: ● Главная страница - Landing Page – index.html ● Страница входа в личный кабинет – login.html ● Страница регистрации в личном кабинете – register.html ● Страница личного кабинета – profile.html ● Страница с результатами поиска – search.html ● Страница бронирования – booking.html ● Страница управления бронированием – booking_management.html ● Страница выбора мест в салоне воздушного судна – seat.html ● PHP-файлы именовать по смыслу.
Ваш HTML/CSS должен быть валидным. Оценка будет производиться в браузере Google Chrome. Использование любых фреймворков и сторонних библиотек запрещено.