WEBSummer2022

Практическая часть "Технологии разработки web-приложений" лето 2022

Практика Барабаш

Задание 1
1.1. Создайте форму авторизации (поля «Логин» и «Пароль», кнопка «Войти»), отправляющая при нажатии на кнопку «Войти» данные (логин и пароль) на сервер по адресу http://localhost:8085/server. Если пользователь забыл ввести логин или пароль, попросить его сделать это. Добавить стилизацию элементов формы с помощью Bootstrap или другими средствами.
1.2. Разработайте серверное приложение, расположенное по адресу http://localhost:8085/server, которое может:

1. принимать от клиента данные (логин и пароль)
2. сравнивать входящие логин и пароль с логином и паролем, хранящимися в базе данных MongoDB, PostgreSQL или SQLite (на выбор студента). Поиск в базе происходит по логину.
3. возвращать на клиент строку «success» (в случае совпадения входящих и хранящихся логинов-паролей) или «fail» (в случае расхождения входящих и хранящихся логинов-паролей).

Задание 2
2.1. Создайте клиентскую часть сервиса для мониторинга актуальных цен на нефть различных марок: URALS, BRENT, WTI. Можно воспользоваться ресурсом https://maanimo.ua/ru/oils или подобными ему ресурсами. На форме должно быть поле выбора марки нефти (URALS, BRENT, WTI), поле для вывода текущей цены и поле для вывода динамики (разницы цен между текущей ценой и ценой предыдущего дня, выделен красным на рисунке, используется сайт https://maanimo.ua/ru/oils).
2.2. Реализуйте серверную часть сервиса для мониторинга актуальных цен на нефть различных марок: URALS, BRENT, WTI. При выборе марки нефти пользователем на клиентской форме сервер проверяет, есть ли уже загруженные данные в локальной базе (MongoDB, PostgreSQL или SQLite), если есть – текущая цена и динамика за последние сутки – передаются на клиент и выводятся в соответствующие поля на форме, если нет – данные загружаются напрямую с сайта, передаются на клиент и выводятся на форме.

Задание 3
3.1. Создайте клиентскую часть сервиса, загружающего данные курсов валют с сайта https://www.cbr-xml-daily.ru/ и отображающего результат в таблице из 3-х столбцов: Валюта, Курс сегодня, Курс вчера. В таблице должно быть не менее 5 различных валют. Сделайте оформление таблицы в отдельном CSS-файле.
3.2. Реализуйте серверную часть сервиса, которая будет отправлять готовый html-файл из предыдущей задачи. Предусмотрите использование относительных ссылок на html-файл c помощью модуля PATH. Подключите Ngrok или ему подобные инструменты для вывода сервиса в глобальную сеть.

Практика Абашин

1. Даны картинки. По нажатию на любую картинку увеличьте ее в 2 раза.
2. Даны N инпутов с классом .num и кнопка. По нажатию на кнопку получите числа, стоящие в этих инпутах и запишите их сумму в абзац с id="result".
3. Дана таблица с числами. По нажатию на кнопку найдите ячейку, в которой хранится максимальное число, и сделайте ее фон красным.
4. Дана таблица с числами. По нажатию на ячейку она активируется и становится красного цвета. Активировать можно много ячеек. Под таблицей кнопка. По нажатию по этой кнопке в абзац ниже выведите сумму активированных ячеек. Реализуйте кнопку сбросить активированные ячейки'.
5. Реализуйте раскрывающийся список. По умолчанию есть список стран (ul), по нажатию на страну внутри li со страной появляется список городов.
6. В инпут через запятую вводятся страны. По нажатию на кнопку сделайте так, чтобы эти страны записались в ul под инпутом (каждая страна отдельный li).
7. Дан ряд ссылок. Сделайте так, чтобы по нажатию на ссылку она становилась с красным фоном. По нажатию на другую ссылку выделение первой ссылки снимается и выделяется та, на которую мы нажали. В абзац ниже пишите текст активной ссылки.