1

Внимание! Вторая лабораторная работа должна включать в себя две части: «клиентскую» и
«серверную». Если вы решаете задачу, и видите, что вам для ее решения серверная часть
не нужна и вы можете обойтись без нее – значит вы задачу трактуете неправильно –
свяжитесь со мной. Обе части должны быть написаны на языке программирования
javascript (PHP, Java, C#, … использовать нельзя). Серверная часть должна использовать
nodejs, другие способы реализации серверной части – не подходят.

Требования, помеченные как дополнительные можно не реализовывать в том случае, если

вы можете реализовать основные без них.

Во многих заданиях вам потребуется «генерировать» динамические страницы, вид которых

зависит от каких-то параметров (список пицц, список велосипедов для проката и т.д.). Это
можно делать как с использованием шаблонизаторов (генерируя страницу на сервере), так
и генерировать страницу на клиенте (используя AJAX)

Если вам досталась игра, вы должны использовать какую-то из рассмотренных в лекциях

технологию связи сервера с клиентом (веб-сокеты, лонгпулинг, SSE)

1. Электронный тесты. Разработать веб-приложение, обладающее следующим

функционалом: пользователю при открытии страницы приложения предлагается ответить
на ряд вопросов. Каждый вопрос представляет собой cледующую структуру:
{
"question": "Вопрос, который необходимо задать",
"answers":[
{
"answer":"вариант ответа №1",
"correct":true
},
{
"answer":"вариант ответа №2",
"correct":true
},
{
"answer":"вариант ответа №3",
"correct":false
}
]
}
Где количество вариантов ответа на вопрос может быть произвольным.
Вопросы на странице приложения отображаются в виде нумерованного списка, каждый
вариант ответа – в виде вложенного ненумерованного списка, содержащего вариант
ответа и элемент управления, позволяющий пометить данный ответ как правильный.
По нажатию кнопки «завершить ответ», введенные пользователем ответы сохраняются в
базе данных и пользователю отображается информация о прохождении теста в виде
таблицы, содержащей два столбца. В первом столбце отображаются номера вопросов, во
втором столбце информация о том, правильно пользователь ответил на это вопрос или
нет. Тест считается пройденным, если пользователь правильно указал ВСЕ правильные
варианты ответа и НЕ указал ни одного неправильного.
Массив вопросов читается из базы данных или из специального каталога на сервере.
Пользователь может просмотреть информацию о пройденных ранее тестах.
 2

Дополнительно: добавить возможность авторизации пользователя и просмотра им только

своих вариантов ответов.
2. Система оценки работ. Разработать веб-приложение, при открытии страницы которого,
пользователю предлагается загрузить в систему файл произвольного типа (свою работу).
Файл загружается на сервер и помещается либо в базу данных, либо в специальный
каталог файловой системы на сервере. При нажатии на кнопку «взять на оценку» на
странице приложения отображается три ссылки, перейдя по которым, пользователь
откроет три разных файла, ранее загруженные на сервер. Файлы отображаются в
отдельном пространстве страницы (для этого можно использовать, например, тэг iframe),
таким образом, чтобы у пользователя оставалась возможность поставить оценку каждому
из файлов (каждой из работ). Оценка представляет собой целое число в диапазоне от 1 до
5, и текстовый комментарий, поясняющий эту оценку. Оценка и текстовый комментарий
сохраняются в базе данных. При формировании ссылок на работы, выдаваемых
пользователю для оценки, система учитывает количество оценок – выбираются такие
работы, у которых количество оценок минимально. Если таких работ несколько – они
выбираются случайным образом. Для каждой из работ можно просмотреть все данные ей
оценки (с комментариями).
Дополнительно: добавить возможность авторизации пользователя и просмотра им
оценок только для своих работ. Кроме того, в этом варианте пользователю для оценки
выдаются только «чужие» работы.
3. Система сбора данных. Разработать веб-приложение, позволяющее собрать данные.
Структура данных, которые необходимо собирать задается файлом, в формате JSON.
Пример такого файла:
{
"name":"Показания счетчиков"
"квартира":"string",
"resources":[
{
"name":"Вода",
"показания счетчика":"number"
},
{
"name":"Электричество",
"Тариф дневной":"number",
"Тариф ночной":"number",
},
{
"name":"Газ",
"показания счетчика":"number"
}
]
}
Здесь свойство «name» во всех объектах предназначено для указания наименования для
данного блока полей, в которые будут вводиться пользователем данные. Для данного
примера система должна построить интерфейс вида
 3

Приведенный выше файл определяющий структуру вводимых данных является примером,

система должны иметь возможность обработать любой файл такого вида. Файл, читается
либо из базы данных, либо из специального каталога на сервере. Введенные
пользователем данные сохраняются в базе данных. Пользователь имеет возможность
просмотреть все ранее введенные данные (система должна иметь возможность
предоставить список ранее введенных данных), но не может их изменить.
Дополнительно: добавить возможность авторизации пользователя и просмотра им только
«своих» данных.
4. Парикмахерская. Разработать веб-приложение, позволяющее осуществлять запись к
парикмахеру. На основной странице пользователь должен иметь возможность выбрать
вид услуги (мы считаем, что количество предоставляемых услуг невелико (15-20), поэтому
виды услуг мы можем отображать на странице в виде таблицы, без поиска по ним) и
время, на которое он хотел бы записаться. Записаться пользователь может только на
свободное, не занятое другими пользователями время (считаем, что в нашей
парикмахерской работает только один мастер). У каждого вида услуги есть
продолжительность ее оказания в минутах и стоимость. После оказания каждой услуги
мастеру дается 5 минут, на приведение рабочего места в порядок. Последовательность
действий пользователя по записи должна быть примерно такая – пользователь выбирает
услугу из списка услуг, приложение каким-то образом показывает ему текущую загрузку
мастера (например, в виде таблицы с шагом в 10 минут, в которой цветом выделено уже
занятое время и те интервалы, с учетом продолжительности выбранной пользователем
услуги и необходимых 5 минут «отдыха» мастера, в которые пользователь может
записаться), пользователь определяет удобное ему время и занимает его, указывая свое
имя и телефон. Справочник типов услуг (со стоимостью и продолжительностью), а также
текущее расписание мастера должны сохраняться в базе данных.
Дополнительно: добавить возможность авторизации пользователя и наличие у него
«личного кабинета» с возможностью указать имя и телефон., которые затем
автоматически включаются в резервирование.
5. Прокат велосипедов. Разработать веб-приложение, позволяющее брать велосипеды
напрокат. На основной странице приложения представлен выбор велосипедов (по их
марке). С каждой маркой велосипеда связано его изображение и короткое (15-20 слов)
описание. Выбор марки осуществляется нажатием пользователя на соответствующее
марке изображение. Каждая марка велосипеда имеет собственную стоимость проката.
Стоимость проката рассчитывается за час времени. Выбрав марку велосипеда,
пользователь затем выбирает удобный для него пункт проката (мы считаем что во всех
пунктах проката всегда есть все необходимые велосипеды), дату и время, свое имя и
 4

номер телефона и резервирует таким образом для себя велосипед, получая ссылку на
активацию проката. Придя в прокат и получив велосипед, пользователь переходит по
полученной ссылке и на странице проката активирует прокат – с этого момента начинает
идти время проката (мы считаем всех наших пользователей кристально честными людьми,
которые всегда активируют прокат, после получения велосипеда). После того, как
пользователь воспользовался прокатом, он переходит по той же самой ссылке, по которой
активировал начало проката, выбирает пункт проката, в который он привез велосипед и
нажимает кнопку «завершить прокат», после чего на этой же странице ему показывается
стоимость проката, рассчитанное, как время проката умноженное на его стоимость, время
округляется вверх до целых часов. Все используемые системой данные хранятся в базе
данных.
Дополнительно: добавить возможность авторизации пользователя и наличие у него
«личного кабинета» с возможностью указать имя и телефон., которые затем
автоматически включаются в резервирование велосипеда. Выделение отдельной роли
«сотрудник пункта проката», который активирует начало проката и окончание проката
вместо пользователя.
6. Заказ пиццы. Разработать веб-приложение, позволяющее заказывать пиццу с доставкой.
Стартовая страница приложения предоставляет выбор вида пиццы, который
осуществляется путем нажатия на изображение соответствующей пиццы. Кроме
изображения на основной странице представлена цена каждого вида и его наименование.
Мы считаем, что видов пиццы, которые мы изготовляем немного – не более 20 штук и все
они могут поместиться на экране без использования как горизонтальной, так и
вертикальной прокрутки. При изменении размера окна браузера изображения должны
перестраиваться так, чтобы не допускать появление горизонтальной прокрутки. При
выборе изображения (вида пиццы) пользователь попадает на страницу, на которой он
видит «базовый» состав пиццы, а также может добавить к своей пицце, какие-то
дополнительные ингредиенты. Перечень ингредиентов, который пользователь может
добавить зависит от вида пиццы – для одних пицц можно добавлять одни ингредиенты, а
для других – другие. Пользователь также может никаких дополнительных ингредиентов не
добавлять. Каждый ингредиент имеет свою стоимость, которая прибавляется к «базовой»
стоимости пиццы. Закончив формирование своего заказа, пользователь видит итоговую
стоимость заказа, затем вводит адрес, по которому пиццу нужно доставить (мы не
поддерживаем возможность в одном заказе заказать сразу несколько пицц), свое имя и
свой телефон, после чего получает ссылку на страницу, на которой он может ввести свой
отзыв об качестве обслуживания. Подтверждение доставки и оплата происходят вне рамок
рассматриваемой системы. Все данные, необходимые для работы системы, читаются и
сохраняются в базе данных.
Дополнительно: добавить возможность авторизации пользователя и наличие у него
«личного кабинета» с возможностью указать имя и телефон., которые затем
автоматически включаются в заказ. Добавление возможности внести в заказ несколько
разных пицц.
7. Служба технической поддержки. Разработать веб-приложение, позволяющее
пользователю отправить заявку в службу технической поддержки на решение своей
проблемы. При возникновении какой-либо технической проблемы, пользователь
переходит к стартовой странице приложения, на которой содержится форма, которую
пользователь должен заполнить. Форма содержит следующие поля:
 ФИО пользователя, у которого возникла проблема
 Телефон для связи с пользователем
 Описание проблемы
 5

При нажатии кнопки «отправить» в этой форме, данные о проблеме пользователя

заносятся в базу данных. Руководитель службы технической поддержки заходит на другую
страницу, на которой он видят список всех нерешенных проблем, о которых сообщили
пользователи. Ознакомившись с проблемой, руководитель службы технической проблемы
назначает ее для решения кому-то из своих сотрудников, выбирая этого сотрудника из
соответствующего справочника. Сотрудник службы технической поддержки, зайдя на свою
страницу и введя свою фамилию, видит все проблемы, которые назначены для решения
ему. Он решает проблему, после чего помечает проблему как решенную и записывает для
пользователя какой-либо комментарий в отдельном поле.

Пользователь на своей странице может просматривать список всех проблем (в том числе -
своих) и видеть, какие из его проблем решены, а какие – нет. Все необходимые для работы
системы данные должны храниться в базе данных.

Дополнительно: добавить возможность авторизации пользователя, при вводе логина и

пароль, пользователи системы автоматически попадают на «свои» страницы
(пользователь – на пользовательскую, руководитель – на свою, сотрудник – на свою) и
видят только те проблемы, которые принадлежат им.
8. Игра «Морской бой» (со стандартными правилами). Разработать веб-приложение,
позволяющее двум пользователям играть в игру «Морской бой». Работа приложения
осуществляется таким образом: первый пользователь (игрок 1) заходит на страницу
приложения и нажимает кнопку «начать игру», после чего автоматически переходит на
страницу с игрой. Второй игрок, зайдя на эту же самую стартовую страницу видит кнопку
«присоединиться к игре», нажимая на которую, он попадает на страницу с игрой. Страница
с игрой представляет собой два поля, одно из которых предназначено для расстановки
своих кораблей, а второе для нанесения ударов по кораблям противника. Расставив свои
корабли (способ расстановки - любой) игроки нажимают кнопку «старт». После того как эту
кнопку нажмут оба игрока, игра начинается. Первым ходит игрок 1. После завершения
игры, информация об ее исходе заносится в базу данных. Предоставляется возможность
просмотреть список всех прошедших игр (выводится дата и время игры, ее
продолжительность и исход).
Дополнительно: добавить возможность авторизации пользователей и возможность игры
нескольких пар игроков. В «личном кабинете» каждого игрока можно просмотреть список
игр, в которых он участвовал, на стартовой странице приложения выводится TOP10 самых
высокорейтинговых (с большим числом побед) игроков.
9. Электронная записная книжка. Разработать веб-приложение, позволяющее сохранять
некоторую важную информацию. При работе приложения поддерживаются два основных
режима – режим ввода новых записей и режим поиска записей. При переходе в режим
ввода новых записей, пользователь попадает на страницу, в которой содержится форма
для ввода следующих данных
 Наименование записи(заголовок)
 Текстовая запись
 Произвольное количество связанных с записью файлов произвольного типа
 Произвольное количество «меток»
При сохранении записи, связанные с записью файлы загружаются на сервер и сохраняются
либо в базе данных, либо в специальном каталоге на сервере. Метки, которые
связываются с записью могут быть как уже имеющиеся в системе («работа», «учеба»,
«семья», «хобби»), так и любые другие система должна предоставить возможность
пользователю создавать свои собственные метки. Каждая запись может быть помечена
произвольным числом меток.
 6

В режиме поиска, пользователь может искать записи одним из следующих способов

 По метке. В таком случае системой выдается список всех записей, помеченных
данной меткой
 По слову в заголовке. При этом типе поиска, система ищет введенное
пользователем слово в заголовках записей и выдает все такие записи, в которых
это такое слово в заголовке есть
 По слову в тексте записи. При этом типе поиска, система ищет введенное
пользователем слово в тексте записей и выдает все такие записи, в которых такое
слово в тексте записи есть

Получив список записей, пользователь может по нему пройти, прочитать текст и загрузить
с сервера те файлы, которые с данной записью связаны.

Дополнительно: добавить возможность авторизации пользователей и разделение

записей записной книжки по пользователям (каждый работает только со своими
записями).
10. «Публичная библиотека». Разработать веб-приложение, позволяющее контролировать
процесс выдачи книг в библиотеке. Работа пользователя начинается со страницы, на
которой он может искать нужные ему книги в библиотечном фонде. Каждая книга в нашей
библиотеке представлена следующими реквизитами:
 Код ISBN
 Список авторов (автор представляется фамилией и инициалами)
 Код издания
 Издательство
 Наименование книги

Данные о библиотечном фонде должны загружаться в систему из файлов формата JSON

(формат разработать самостоятельно)

Одной и той же книги в библиотеке может быть несколько экземпляров. Пользователь

должен иметь возможность осуществить поиск книги по любому из этих реквизитов. В
случае, если поиск был успешен, система выводит список всех книг, удовлетворяющих
критерию поиска с указанием текущего количества экземпляров, которое ест в
библиотеке. Если все экземпляры данной книги на руках, будет выведена строка с
указанием 0 в качестве количества доступных экземпляров. Пользователь выбирает
нужную ему книгу (считаем, что пользователь не может взять более одной книги за раз) и
получает ее (количество доступных экземпляров при этом уменьшается). При этом в
системе фиксируется дата взятия книги пользователем и дата, когда пользователь должен
книгу вернуть (в нашей библиотеке мы выдаем книги максимум на 20 календарных дней).
В момент, когда пользователь возвращает книгу, он заходит на соответствующую страницу
приложения и выбирает среди списка несданных книг ту книгу, которую он сдает. В этот
момент количество доступных экземпляров увеличивается.

Дополнительно: добавить возможность авторизации пользователей и наличие «личного

кабинета», в котором читатель видит свои книги, которые находятся у него на руках, и при
сдаче выбирает их. Кроме того, на первой странице системы выводится «антирейтинг»
читателей – тех, кто чаще всего невовремя сдает книги.
11. Игра «Война вирусов» (правила игры можно прочитать по ссылке Война вирусов). См. игру
«Морской бой», отличие в том, что игроки играют в другую игру.