Инструкции по реализации:
Для выполнения проекта по созданию веб-приложений следует использовать несколько продвинутых HTML-документов (как минимум три различных подстраницы), подготовленных в рамках проекта<<<<<<< "Мое хобби".>>>>>>> Документы должны использовать таблицы стилей CSS и соответствовать синтаксическим и семантическим требованиям предмета HiH (валидаторы доступны на веб-сайтах организации W3C: http://validator.w3.org/ и http://jigsaw.w3.org/css-validator/).
Выбранные документы необходимо обогатить следующими элементами для улучшения их функциональных характеристик:
• Реализовать форму, которая будет отправлять данные методом POST или GET на ресурс odbierz.php (этот ресурс не реализуется). Требуется умение отследить HTTP-коммуникацию с помощью инструментов разработчика (найти введенные данные в форме и понять, что происходит). При нажатии на кнопку "Отправить" сервер должен ответить правильным сообщением о том, что ресурс odbierz.php не найден.
• Необходимо реализовать использование как минимум одного из веб-интерфейсов (исключая API, связанные с CSS, Console API, DOM, HTML DOM, History API), например, WEB Storage API, Geolocation API или другого, который будет иметь применение. Не допускается использование в проектном коде чистых примеров из лекций - реализованная реализация должна логически соответствовать содержанию страницы!
• Следует использовать DHTML на основе JavaScript (без дополнительных библиотек) и API DOM для:
- изменения существующего содержимого страницы или изменения ее внешнего вида (CSS-стилей),
- добавления новых узлов в дерево документа (таких, которых нет в исходном коде документа в виде HTML-тегов) и отображения их на странице. Следует использовать методы document.createElement(), element.appendChild() и подобные им.
• Использовать DHTML с помощью библиотеки jQuery для:
- встраивания на страницу готового примера использования jQuery. Требуется понимание работы использованного кода.
- встраивания как минимум двух компонентов из библиотеки jQuery UI, взаимодействующих со страницей (например, компонент Dialog, используемый для отображения результатов валидации формы).
• Содержание и функциональность страницы (в частности, навигация между подстраницами) должны быть доступными независимо от поддержки браузером языка JavaScript (выполнение скриптов может быть отключено в настройках браузера или в инструментах разработчика). Страница не должна содержать неактивных элементов, которые при этом как-то реагируют - например, кнопка (естественно ожидать ее нажатия и ожидать реакции в ответ).
Для задач, связанных с использованием JavaScript, необходимы навыки отслеживания выполнения подготовленных скриптов с помощью инструментов разработчика (т.е. отладки кода JavaScript).
Инструкции по завершению этапа:
Проверка ошибок: Подготовленная страница не должна генерировать ошибки (например, выполнение скриптов). Это следует проверить, используя инструменты разработчика в браузерах - вкладка Консоль/Console. Ошибки, возникающие во время типичной навигации по странице, приведут к снижению конечных баллов за этап проекта.
Расширенная версия для желающих получить дополнительные баллы: Реализация всей функциональности с использованием языка JavaScript, описанной на первой странице, с использованием TypeScript. Это означает, что мы принимаем одно из решений: либо все требования, описанные на первой странице, реализуются на JavaScript (базовая версия), либо все требования, описанные на первой странице, реализуются на TypeScript (расширенная версия); Расчет дополнительного задания: баллы, обозначенные в таблице требований (см. конец этого документа), умножаются на 1,5.
| Название | Реализация (без TypeScript) |
|---|
| HTTP | 1,5 |
| JavaScript | 1,5 |
| API DOM: модификация текста | 1 |
| API DOM: модификация структуры документа | 1,5 |
| jQuery: использование плагина | 0,5 |
| jQuery UI: использование минимум 2 компонентов | 1,5 |
| Действие и внешний вид страницы при выключенном JavaScript | 0,5 |
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<Вторая часть>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
В рамках второго этапа проекта необходимо создать веб-приложение для галереи изображений. Тематика проекта должна соответствовать странице, разработанной на первом этапе. Создаваемая галерея изображений должна вписываться в тематику страницы, например, для страницы о фильмах - это может быть галерея актеров. Допускается использование макета и форматирования, разработанных на первом этапе.
Серверная часть приложения должна быть реализована на языке PHP без использования внешних фреймворков. Галерея должна поддерживать добавление новых графических файлов и просмотр ранее загруженных на сервер. Приложение также должно обеспечивать корректную регистрацию пользователей, вход и выход из системы. Информация, представленная на странице, должна различаться в зависимости от того, вошел ли пользователь в систему или нет.
Для реализации проекта необходимо выполнить следующие частичные задачи. Они разделены на 3 категории, представляющие различный уровень сложности (категория I - простые, категория II - средняя сложность, категория III - более сложные). Выполнение задач более высокой категории не освобождает от выполнения более легких задач. Однако нет обязательства выполнять задачи в порядке, указанном ниже. Чтобы приступить к презентации проекта, необходимо реализовать все задачи, помеченные как "обязательные".
Для максимального набора баллов (40) за эту часть проекта необходимо выполнить все перечисленные ниже задачи (всего 31 балл), получить коэффициент 1,0 за архитектуру (подробности ниже) и ответить на вопросы для каждой из трех категорий (в каждой из них можно получить до 3 баллов). Если из какой-то категории не выполнено ни одного задания, преподаватель не задает вопросы по этой категории, и баллы за ответы в этой категории не предоставляются.
Баллы, полученные на этом этапе, зависят от архитектуры созданного приложения. Студент в своем ответе должен продемонстрировать знание и понимание использованной архитектуры. В рамках проекта выделяются следующие критерии оценки архитектуры и соответствующие им коэффициенты:
| Критерии | Коэффициент |
|---|
| Смешение элементов бизнес-логики и интерфейса приложения, несоблюдение правильного порядка обработки. | 0,6 |
| Соблюдение правильного порядка обработки: обработка параметров HTTP-запроса, бизнес-логика, установка параметров HTTP-ответа, представление. Выделенная бизнес-логика (например, в виде бизнес-функций). | 0,8 |
| Функциональная реализация шаблона MVC: front-controller, маршрутизация, контроллеры, модель, представления + выделенная бизнес-логика (например, в виде бизнес-функций). | 1,0 |
| Объектная реализация шаблона MVC + выделенная бизнес-логика. | 1,2 |
Для желающих за дополнительные баллы Объектная реализация шаблона MVC + выделенная бизнес-логика. | 1,2 |
A) Загрузка файлов на сервер (2 балла - обязательно): Для передачи фотографий в галерею необходимо реализовать функцию загрузки файлов на сервер (англ. upload). Разрешены только файлы в форматах PNG или JPG. Загружаемые файлы не должны превышать размер 1 МБ. Если пользователь попытается отправить фотографию большего размера или в другом формате, ему должно быть выдано соответствующее сообщение (отдельно для формата файла, его размера или оба сообщения одновременно).
В каталоге, настроенном как DocumentRoot для приложения, необходимо добавить подкаталог images и помещать в него загруженные на сервер изображения [обратите внимание на разрешения для этого каталога]. Это позволит веб-серверу впоследствии обслуживать изображения браузеру для их отображения на странице.
B) Водяной знак и миниатюра (4 балла): Форму загрузки файлов следует дополнить текстовым полем с названием "водяной знак", которое обязательно для заполнения. После отправки изображения на сервер нужно выполнить два преобразования полученного файла на стороне сервера:
- наложить текстовый водяной знак на оригинальное изображение (текст водяного знака берется из формы),
- сгенерировать миниатюру размером 200x125 пикселей.
Для этого следует использовать библиотеку PHP GD, которая была установлена на виртуальной машине во время настройки рабочего окружения.
После реализации вышеуказанных операций на сервере должны находиться 3 графических файла для каждого отправленного изображения: 1) оригинальное изображение, 2) изображение с водяным знаком и 3) миниатюра.
C) Галерея загруженных изображений (4 балла - обязательно): Следует подготовить PHP-код, позволяющий отображать общую галерею всех изображений, отправленных на сервер. Галерея должна представлять миниатюры изображений (сгенерированные в рамках задачи I.B выше) с постраничным отображением по xx штук за раз [значение xx на усмотрение автора]. Если задача I.B не выполнена, следует использовать оригинальные изображения, но представленные в уменьшенном виде с использованием CSS-стилей.
Нажатие на миниатюру изображения должно перенаправлять к изображению с водяным знаком в полном размере (если задача I.B не реализована, следует отобразить оригинальное изображение в полном размере). В рамках задачи следует использовать не менее двух из следующих директив языка
Категория II
A) Использование базы данных (3 балла): Форму загрузки файлов следует дополнить текстовыми полями "заголовок" и "автор". После получения корректного файла (в правильном формате и размере) данные об изображении следует сохранить в базе данных MongoDB. Информацию о заголовках и авторах отдельных изображений следует отображать в галерее миниатюр.
B) Регистрация и вход пользователей (5 баллов): Необходимо подготовить форму регистрации пользователей, включающую поля: "электронная почта", "логин", "пароль", "повторите пароль" (все поля обязательны для заполнения). После проверки данных, полученных из формы (в том числе проверка, не занят ли введенный логин), нового пользователя следует сохранить в базе данных MongoDB. Необходимо учесть преобразование пароля в вид хэша с использованием безопасной хэширующей функции.
Также следует подготовить форму входа, содержащую поля "логин" и "пароль". Для аутентификации следует использовать базу данных зарегистрированных пользователей приложения. Если введенные логин и пароль соответствуют одному из существующих пользователей в базе данных, следует сохранить его идентификатор в сессии и отобразить сообщение об успешном входе. В противном случае следует снова отобразить форму входа с сообщением о неудаче.
Для вошедшего в систему пользователя форма входа не должна быть видна. Для вошедшего в систему пользователя доступна возможность выхода.
C) Механизм сессии (4 балла): Следует изменить галерею миниатюр так, чтобы у каждого изображения было видимое поле типа флажок, идентифицирующее это изображение (можно использовать значения поля _id из базы данных). Также следует добавить кнопку "Запомнить выбранные". Когда пользователь отмечает изображения и нажимает кнопку, нужно запомнить его выбор в сессии. Когда пользователь снова заходит на страницу галереи миниатюр, ранее запомненные изображения должны быть отмечены соответствующими полями флажок.
Также следует добавить еще одну подстраницу в приложение, отображающую только те изображения, которые были ранее выбраны пользователем. При отображении всех изображений на этой странице следует снова отобразить поля типа флажок, которые позволят удалить выбранные изображения из набора, запомненного в сессии (при нажатии кнопки "Удалить выбранные").
Категория III
A) Различение пользователей (5 баллов): Необходимо изменить форму отправки изображений так, чтобы она предлагала дополнительные функции для вошедших в систему пользователей. Когда пользователь вошел в систему, поле "автор" формы должно автоматически содержать логин пользователя. Кроме того, для вошедших в систему пользователей следует отображать дополнительное поле типа радио, позволяющее переключаться между значениями "общедоступное" и "частное".
Если пользователь выбирает опцию "частное", изображение не должно быть видимым в галерее миниатюр для других пользователей (как вошедших в систему, так и анонимных). Изображение должно быть видимым в галерее для пользователя, который его загрузил (вместе с информацией о том, что оно является частным). Публичные изображения следует обрабатывать так, как и раньше. Изображения, отправленные незарегистрированными пользователями, следует автоматически считать общедоступными.
B) AJAX - поиск изображений (4 балла):
Следует реализовать поиск изображений с использованием технологии AJAX. Поиск должен быть реализован как отдельная страница в приложении. После входа на эту страницу видимо сть текстовое поле, в которое пользователь может вводить фрагмент заголовка изображения, которое он ищет.
По мере ввода пользователем новых букв в поисковую строку (например, в ответ на событие onkeyup), следует отправлять на сервер асинхронные HTTP-запросы (AJAX), содержащие текущее значение текстового поля. Сервер должен искать изображения, заголовки которых содержат фразу, введенную пользователем, и в ответе отправлять фрагмент HTML-кода, представляющий миниатюры соответствующих изображений. После получения ответа от сервера браузер должен отображать пользователю соответствующие миниатюры.
Переведено с использованием переводчика, прошу прощения за возможные неточности.
Бюджет начинается с 3500, если получится сделать до утра 3 числа, то тогда будет бонус в 500-1000 грн
