авааы. Дем экз пробный. Модули с описанием работ
 Скачать 21.08 Kb.
|
|
Модули с описанием работ Модуль 1: Введение В последнее время проблем в городах становится все больше и больше. Не каждую проблему удается решить быстро, потому что компании ответственные за решение проблем не всегда знают о них. Вам необходимо создать городской портал «Сделаем лучше вместе!» по приему заявок на устранение проблем в городе: ямочный ремонт дорог, ремонт детских площадок, зданий сооружений и т.д. Вам предстоит продемонстрировать свои знания в разработке веб-портала с использованием таких технологий как дизайн, верстка, программирование на стороне клиента и сервера. Также необходимо позаботиться о защите проекта: от взлома, от несанкционированного доступа к административным функциям и т.д. Вы можете использовать предоставленные фреймворки и библиотеки: Yii2, Laravel 6.5, Django 2.2.4, jQuery, jQuery UI, Vue.js. Вам необходимо продумать дизайн и сверстать его, а также реализовать функциональные возможности сервиса в соответствии с текущим заданием. Стоит принять во внимание тот факт, что основная часть пользователей использует сайт через мобильный телефон. Обязательно позаботьтесь об удобстве использования сервиса и обратной связи между порталом и пользователями. Целью создания сайта является привлечение молодежи от 14 до 25 лет к проблемам благоустройства города. Также вам необходимо разработать логотип, отвечающий требованиям проекта. Дополнительным преимуществом будет реализация интерактивных взаимодействий с пользователем, анимация и микроанимация. ВНИМАНИЕ! Проверяться будут только работы, загруженные на сервер! описание проекта и задач Ваша задача – разработать дизайн сайта, которым удобно пользоваться на смартфонах с разрешением 720х1440px. Несмотря на то, что основная целевая группа будет пользоваться вашим веб-ресурсом со смартфонов, вы должны предусмотреть возможность удобной работы на сайте с компьютеров. Поэтому ваша верстка должна быть адаптивна и корректно открываться со следующих устройствах: ● смартфоны с разрешением 720x1440px; ● компьютеры с шириной экрана от 1200px. Структура страниц для смартфонов и компьютеров должна отличаться. Следует обратить внимание, что дизайн сайта должен быть удобен и понятен для использования, соответствовать современным тенденциям, а также учитывать особенности платформ, для которых создается сайт. Все созданные страницы должны иметь согласованный интерфейс. На сайте должны быть реализованы следующие страницы: ● Главная страница, предоставляющая возможности авторизации и регистрации пользователей. ● Личные кабинеты администратора и авторизованных пользователей Дополнительная информация по каждой из страниц представлена ниже. Вы можете создавать дополнительные страницы по своему усмотрению. Учтите, что дизайн и верстка будут оцениваться в первую очередь по страницам: ● Главная страница ● Личный кабинет авторизованного пользователя Доступ к этим страницам должен быть очевидным. Логотип должен быть реализован в соответствии с требованиями: В логотипе должны быть использованы основные цвета сайта; Логотип представляет собой изображение; Разработанный логотип должен быть сохранен на сервере в корневом каталоге в директории logo со следующим именем - logo.png Портал должен поддерживать возможности 3 типов пользователей: Гость Авторизованный пользователь Администратор Возможности гостя Вход в личный кабинет по логину и паролю Регистрация Просмотр главной страницы Возможности авторизованного пользователя Регистрация, авторизация, выход; Создание заявки на решение проблемы; Просмотр своих заявок; Удаление своей заявки. Разделы администратора Смена статуса заявки на «Решена» или «Отклонена». Управление категориями заявок (например, «ремонт дорог», «уборка мусора» и др.) Авторизация пользователя и администратора При вводе неправильной пары логин-пароль пользователю отображается сообщение об ошибке. При успешной авторизации пользователь должен перенаправляться в личный кабинет с возможностью просмотра своих заявок. Личный кабинет доступен только авторизованному пользователю. Панель управления сайтом доступна только администратору. Регистрация пользователя Вся валидация должна работать без перезагрузки страницы, все поля обязательные для заполнения: ФИО - только кириллические буквы, дефис и пробелы – проверка на стороне клиента; Логин – только латиница, уникальный - проверка на стороне сервера, без перезагрузки страницы; Email - валидный формат email-адрес - проверка на стороне клиента; Пароль; Повтор пароля – введенное значение должно совпадать с паролем; Согласие на обработку персональных данных - должно быть отмечено. В случае несоответствия любым требованиям выводится анимированное сообщение об ошибке, поля с ошибками выделяются, данные на сервер не отправляются. Создайте учетную запись администратора с логином admin и паролем admin. Все авторизованные пользователи могут выйти из профиля по нажатию на ссылку/кнопку «Выход». Создание заявки (все поля обязательны): Название; Описание; Категория (выбор из существующих категорий); Фото, демонстрирующее проблему в одном из форматов (jpg, jpeg, png, bmp) максимальный размер 10Мб; при невыполнении хотя бы одного из требований, заявка не сохраняется на сервере, выводится сообщения об ошибке. Временная метка добавления заявки создается автоматически при добавлении заявки в базу данных. При добавлении заявки она должна автоматически получить статус «Новая». Удаление заявки При удалении заявки пользователю должно быть выведено сообщение с просьбой подтвердить желаемое действие. Пользователь может удалить только свою заявку, статус которой не был изменен администратором на «решено» или «отклонена». Просмотр своих заявок На странице просмотра своих заявок необходимо отобразить список своих заявок со следующими полями: • Временная метка • Название заявки • Описание заявки • Категория заявки • Статус заявки (Новая, Решена, Отклонена). По умолчанию отображаются все заявки в порядке добавления заявок (недавно добавленные отображаются в начале таблицы). Вам необходимо добавить возможности фильтрации заявок по статусу, например, отображение только заявок со статусом «Новая». Главная страница На главной странице выводится не более 4 последних решенных проблем (фото решенной проблемы) со следующими полями: • Временная метка • Название • Категория заявки • Фотография Изначально видна фотография «после». При наведении указателя мыши на фото «после», вместо него анимировано должна отображаться фотография «до». Стиль анимации: «масштабирование». После вывода указателя мыши с изображения появляется начальное изображение «после» с тем же стилем анимации. Пример реализации анимированной смены изображений доступен в видеофайле «hover/масштабирование.mp4». Добавьте на главную страницу счетчик: Количество решенных заявок. Информация о количестве решенных задачах обновляется автоматически, без перезагрузки страницы не реже чем 1 раз в 5 секунд. В случае изменения значения счетчика должно звучать оповещение (Notif.mp3). Значение счетчика должно обновляться с анимацией. Смена статуса заявки Заявке со статусом «Новая» можно сменить статус на «Решена» с обязательным прикреплением (добавлением) фотографии – доказательства решения проблемы (фотография «ПОСЛЕ»). Заявке со статусом «Новая» можно сменить статус на «Отклонена» с обязательным указанием причины отказа. Смена статуса с «Решена» или «Отклонена» невозможна. Управление категориями заявок Администратор может добавить или удалить категорию заявок. При удалении категории должны быть удалены все заявки данной категории. Заявки этой категории не отображаются. ИНСТРУКЦИЯ ДЛЯ УЧАСТНИКОВ Внимание! Доступ ко всем страницам должен быть реализован с помощью элементов пользовательского интерфейса. Медиа файлы располагаются на сервере в папке public. Вы можете изменять предоставленные файлы и создавать новые для улучшения приложения. Проверяются только работы, загруженные на сервер. Ваш HTML/CSS должен быть валидным, а в консоли браузера и на сайте отсутствовать ошибки/предупреждения/оповещения, создаваемые средствами JavaScript и PHP. |