Update lwF5

Reviewed-on: #1

README.md

@@ -1,37 +1,54 @@
-# Интернет-программирование, ИС, УлГТУ, 2022-2023
+# Интернет-программирование, ИС, УлГТУ
 
-Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, 2022-2023 учебный год.
+Репозиторий для дисциплины Интернет-Программирование для кафедры ИС УлГТУ, направление 09.03.03 Прикладная информатика (Авторизация бизнес-решений).
 
 ## Правила оформления и сдачи лабораторных работ
 
 1. Лабораторные работы выполняются в аудитории или дистанционно.
 2. Посещать лабораторные занятия обязательно только для сдачи работ.
-3. Лабораторная работа считается завершённой, если в [таблице с прогрессом](https://disk.yandex.ru/i/P3tpkqqVJWgmKg) есть об этом отметка.
+3. Лабораторная работа считается завершённой, если в [таблице с прогрессом в LMS](https://lms.ulstu.ru/course/view.php?id=2028) есть об этом отметка.
 4. Для выполнения п.3 необходимо показать преподавателю выполненное задание во время лабораторного занятия.
 5. Во время защиты лабораторной работы преподаватель может спрашивать или просить что-то исправить по теме Вашей работы.
-6. Иных отчётов помимо Вашего кода или других артефактов, необходимых для выполнения задания, предоставлять не надо.
+6. Если необходимо оформить отчёт о выполнении лабораторной работы, об этом будет написано дополнительно.
 7. Крайне не рекомендуется затягивать с выполнением лабораторных работ, т.к. их выполнение и защита должны быть последовательны.
 
 ## Лабораторные работы
 
+Скоро появятся.
+
+Frontend:
+
+- [Лабораторная работа №F1 - Макет одностраничного сайта (Figma)](./lwF1/README.md)
+- [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](./lwF2/README.md)
+- [Лабораторная работа №F3 - Стилизация веб-приложения (React)](./lwF3/README.md)
+- [Лабораторная работа №F4 - Взаимодействие с API (Axios)](./lwF4/README.md)
+- [Лабораторная работа №F5* - Базовые технологии WWW (HTML, CSS, JS)](./lwF5/README.md)
+
+Backend:
+
+- [Лабораторная работа №B1 - Разворачивание локального веб-сервера (PHP)](./lwB1/README.md)
+- [Лабораторная работа №B2 - Разработка чат-бота для Telegram](./lwB2/README.md)
+- [Лабораторная работа №B3 - Создание онлайн-чата при помощи WebSocket](./lwB3/README.md)
+
+## Лабораторные работы - НЕ АКТУАЛЬНО
+
 Обязательные лабораторные работы:
 
-* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
+- [Лабораторная работа №1 - Создание макета сайта (Figma)](./legacy/lw01/README.md)
-* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md)
+- [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](./legacy/lw02/README.md)
-* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
+- [Лабораторная работа №3 - Динамика сайта (JavaScript)](./legacy/lw03/README.md)
-* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
+- [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](./legacy/lw05/README.md)
-* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
+- [Лабораторная работа №6 - Изучение шаблона проектирования MVC](./legacy/lw06/README.md)
 
 Лабораторные работы на выбор:
 
-* [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md)
+- [Лабораторная работа №F1 - Одностраничное приложение (TypeScript)](./legacy/lwF1/README.md)
-* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
+- [Лабораторная работа №F2 - Получение данных через API (Fetch)](./legacy/lwF2/README.md)
-* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
-* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/TODO/README.md)
 
 ## Правила допуска до экзамена
 
 Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend.
 Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному.
 
-Для допуска к экзамену надо защитить все обязательные работы и любую из необязательных на выбор.
+Для допуска к экзамену **необходимо получить проходной балл как минимум по 6 работам из 8**.
+Получение хороших баллов (сдача без замечаний) или сдача больше шести работ - возможность получить на автоматическую оценку.

legacy/lw02/README.md

@@ -0,0 +1,256 @@
+# Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)
+
+## Цели работы
+
+- Освоение основ интернет-вёрстки.
+- Освоение каскадных таблиц стилей в вебе (CSS3+).
+- Изучение основных селекторов и свойств CSS.
+
+## Ход выполнения работы
+
+1. Изучение основополагающих принципов интернет-вёрстки: HTML-документ, элементы, теги, поток документа, таблицы, списки, ссылки, изображения.
+2. Изучение основных элементов веб-страницы: заголовок и тело документа, контейнер, абзац, заголовок текста, таблица, ссылка, изображение.
+3. Создание html-документа на основании фреймов из макета.
+4. Подключение к html-документу таблицы стилей.
+5. Изучение flexbox и использование для позиционирования элементов.
+6. Стилизация элементов страницы.
+7. Создание стилей для мобильного представления.
+
+## Изучение принципов интернет вёрстки
+
+На этом этапе выполнения лабораторной работы необходимо усвоить, что такое интернет-вёрстка (похожа ли она на вёрстку газет, например), в чём отличие и схожесть HTML и обычного текстового документа, из чего состоит веб-страница внутри и по каким принципам обычно свёрстаны веб-сайты.
+
+См. следующий материал:
+
+- Введение в HTML - http://htmlbook.ru/samhtml/vvedenie-v-html
+- Про теги - http://htmlbook.ru/samhtml/tegi
+- Про историю проблем с вёрсткой - http://htmlbook.ru/samlayout
+- Про табличную вёрстку (сейчас считается устаревшим) - http://htmlbook.ru/samlayout/verstka-s-pomoshchyu-tablits/osobennosti-tablits
+- Про блочную вёрстку - http://htmlbook.ru/samlayout/blochnaya-verstka (и все страницы этого раздела)
+
+Также в источниках упоминается CSS или "каскадные таблицы стилей".
+Они нам также пригодятся.
+
+## Изучение основных элементов веб-страницы
+
+Когда вы разберётесь в том, что такое вёртка веб-страниц, необходимо ознакомиться с тем, из каких элементов может состоять документ HTML (или наша веб-страница).
+
+Элементов много, но всё сводится к нескольким блочным (то есть блокам - заголовок, абзац, таблица, контейнер без явного смысла и др.) и строчным (изображение, всевозможные выделения текста, блок текста без явного смысла и др.) элементам.
+
+Для "пробы пера" можете использовать CodePen, песочницу для проверки вёрстки и не только - <https://codepen.io/pen/>.
+
+См. следующий материал:
+
+- HTML5 и CSS3 на примерах - https://webref.ru/layout/html5-css3
+- Справочник по HTML - http://htmlbook.ru/html
+
+## Создание документа HTML
+
+На основании макета, выполненного в рамках [лабораторной работы №1](../lw02/README.md), необходимо добавить в HTML-документ элементы.
+
+Главный документ должен иметь название `index.html`.
+Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
+Например, `orders.html`, `feedback.html` или `sitemap.html`.
+
+Для landing-page все блоки страницы должны быть обёрнуты в отдельные div-контейнеры со своим идентификатором, например:
+
+```html
+...
+<body>
+  <div id="nav">
+    <!-- Тут навигация. -->
+  </div>
+  <div id="welcome">
+    <!-- Тут приветственное сообщение от автора. -->
+  </div>
+  <div id="features">
+    <!-- Тут блок с карточками-фичами какой-нибудь системы. -->
+  </div>
+  <div id="order-form">
+    <!-- Тут форма для заказа. -->
+  </div>
+</body>
+...
+```
+
+При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
+Например:
+
+```html
+<div class="card first">
+  <div class="card-header">
+    <h3 class="card-title">Заголовок новости-карточки 1</h3>
+  </div>
+  <div class="card-body">Текст новости-карточки.</div>
+</div>
+...
+<div class="card last">
+  <div class="card-header">
+    <h3 class="card-title">Заголовок новости-карточки 2</h3>
+  </div>
+  <div class="card-body">Текст новости-карточки.</div>
+</div>
+```
+
+Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты".
+Или же сразу добавлять стили к только что созданным элементам.
+
+Пример сайта из материалов, сделанных на практике: <https://vladdy-moses.github.io/docker-designer>.
+Если посмотрите код страницы, то не увидите ничего сложного.
+
+## Вставка картинок из макета
+
+В макете есть возможность выгружать группу элементов как изображение.
+Для этого в панели свойств есть меню "Export", где можно выбрать параметры выгрузки.
+
+Стоит обратить внимание на следующие особенности:
+
+- Если вы экспортируете иконку, где много векторной графики, т.е. графических примитивов (линий, фигур, заливки и проч.), то следует выбирать формат SVG.
+- Если вы экспортируете изображение, где есть растр, т.е сетка пикселей, то следует выбирать формат JPG.
+
+Также удобно называть слой с экспортируемым изображением на английском языке, т.к. название выгружаемого изображения будет с ним совпадать.
+
+Например, при экспорте слоя "site-logo" в формат SVG создастся файл `site-logo.svg`, который можно будет подключить к HTML-документу при помощи элемента `<img src="site-logo.svg" alt="Логотип" />`.
+
+## Подключение каскадных таблиц стилей CSS и пример
+
+Подключение таблицы стилей в head-элементе страницы:
+
+```html
+<link rel="stylesheet" href="style.css" />
+```
+
+Пример таблицы стилей 1:
+
+```css
+body {
+  background-color: #eee;
+  background-image: url(bg-1.png);
+  color: #666;
+
+  margin-top: 60px;
+  margin-left: 1em;
+  margin-right: 14pt;
+  margin-bottom: 15px;
+  /* Можно заменить просто на "margin: 60px 14pt 15px 1em;" */
+
+  padding: 10px 50px;
+  /* Можно заменить просто на "padding: 10px 50px 10px 50px;" */
+
+  font-size: 14px;
+  font-family: "Times New Roman", serif;
+  font-weight: bold;
+
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.card {
+  border-width: 10px;
+  border-color: red;
+  border-radius: 10px;
+}
+
+.card.test-3 {
+  position: absolute;
+  top: 0;
+  left: 55px;
+  right: -50px;
+  bottom: 20px;
+  z-index: 9;
+}
+
+.card.test-4 {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}
+
+.test {
+  background-color: red;
+}
+
+td.test-2 {
+  background-color: coral;
+}
+
+.test.test-2 {
+  background-color: brown;
+}
+
+thead .test,
+thead > tr.test > th {
+  background-color: blue;
+}
+
+#main-container {
+  background-color: aqua;
+}
+
+.test-5 {
+  color: white;
+}
+
+.test-5 strong {
+  color: red;
+  display: block;
+}
+
+.test-6 {
+  color: white;
+  display: inline-block;
+}
+```
+
+Пример таблицы стилей 2: <https://vladdy-moses.github.io/docker-designer/style.css>.
+
+Самоучитель по CSS можно найти по ссылке <http://htmlbook.ru/samcss>.
+Справочник по правилам CSS там же: <http://htmlbook.ru/css>.
+
+## Flexbox
+
+Flexbox – новая система позиционирования элементов в CSS.
+С её помощью можно гибко настроить как положение элемента в контейнере, так и его поведение в зависимости от различных параметров, например, объёма содержимого.
+
+Подробнее можно ознакомиться по этой ссылке: <https://tproger.ru/translations/how-css-flexbox-works/>.
+
+Нам Flexbox поможет настроить положение отдельных элементов в контейнере для настольной и мобильной вёрстки.
+
+В лабораторной работе предполагается, что те места, где в макете содержимое расположено в несколько колонок, они будут стилизованы через Flexbox.
+
+## Адаптивная вёрстка
+
+Адаптивность в стилизации — свойство адаптироваться под различные устройства.
+
+Логично предположить, что если одна и та же страница выглядит одинаково для различных устройств (смартфон, часы, компьютер, планшет, 4К-телевизор), то, скорее всего, она везде будет смотреться ужасно.
+
+Сейчас дизайнерам необходимо формировать несколько макетов для различных устройств, а верстальщикам - несколько вариантов вёрстки.
+Однако такой подход довольно трудозатратен, поэтому можно сделать одну вёрстку, но так, чтобы только при помощи стилей её можно было "подправить" под вид на конкретном устройстве.
+
+Это можно сделать при помощи `@media`-запросов.
+С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации.
+
+Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом:
+
+```css
+@media (max-width: 1020px) {
+  nav {
+    flex-direction: column;
+  }
+}
+```
+
+При помощи `display: none` можно полностью скрывать элементы при определённых условиях.
+Например, так можно скрывать меню для печати страницы или изображения для мобильных версий страниц.
+
+Все переопределённые элементы из примера, который разбирался на практике, можно найти тут: <https://vladdy-moses.github.io/docker-designer/style-mobile.css>.
+
+В лабораторной работе предлагается аналогичным образом дополнить некоторые правила для мобильного вида сайта, чтобы он был похож на соответствующий frame из макета.
+
+## Дополнительные темы для самостоятельного изучения
+
+Если вам интересна интернет-вёрстка, можете изучить самостоятельно следующие темы:
+
+- Анимация в CSS3.
+- Переменные в CSS3.
+- Препроцессоры CSS: LESS, SASS/SCSS.

legacy/lw03/README.md

@@ -0,0 +1,97 @@
+# Лабораторная работа №3 - Динамика сайта (JavaScript)
+
+## Цель работы
+
+Получение основных навыков программирования динамических веб-приложений при помощи языка JavaScript, подключения сторонних библиотек и средств веб-аналитики.
+
+## Ход работы
+
+1. Вспомнить основные понятия в DOM-дереве.
+2. Изучить работу с формами в HTML.
+3. Изучить необходимость JavaScript.
+4. Изучить отладку JS в веб-браузере Google Chrome или Mozilla Firefox.
+5. Подключить JS-библиотеки к HTML-странице.
+6. Написать собственный сценарий (скрипт). Добавить обработку формы.
+
+## Основные понятия в DOM-дереве
+
+Необходимо вспомнить про следующие понятия:
+
+- элементы, вложенность элементов;
+- аттрибуты, имя, идентификатор;
+- формы, поля ввода, кнопки;
+- события, передача событий.
+
+## Формы в HTML
+
+Изучите работы с формами на ресурсе HTMLBOOK: <http://htmlbook.ru/samhtml5/formy>.
+Особенно обратите внимание на первые 6 страниц.
+
+Проверьте, что на ваших формах есть необходимые элементы: элемент form, поля ввода, кнопка в виде button или `<input type="submit" ... />`.
+Также убедитесь, что у полей ввода есть аттрибуты name, которые уникальны для каждого поля в рамках одной формы.
+
+## Необходимость JavaScript и отладка приложений JS
+
+Сейчас страницы написанного вами сайта статичны - в них нет интерактивных элементов.
+Однако если вы зайдёте на популярные сайты, то можете увидеть, что они динамичны - на кнопки можно нажать, при клике на некоторые элементы появляются другие и т.п.
+Для этого используется язык программирования JavaScript, код которого (его называют _скриптами_ или _сценариями_) выполняется в браузере каждого пользователя вашего сайта.
+
+JavaScript — слаботипизированный мультипарадигменный язык программирования.
+Это означает, что в нём есть работа с типами данных, но от разработчика не требуется строгое соответствие типам (например, можно складывать числа со строками и ничего плохо не случится, как, к слову, и хорошего).
+
+Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных.
+Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером.
+Из-за особенностей связи и реализации backend (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
+Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно).
+Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript.
+
+Ознакомьтесь с основами этого интересного языка программирования в Учебнике JavaScript (главы Введение и Основы JavaScript): <https://learn.javascript.ru/>.
+Там же есть описание про средства отладки JS-кода при помощи консоли разработчика.
+
+Также про особенности слабой типизации в JavaScript и Ruby (есть и такой язык программирования) есть шуточный доклад: <https://www.destroyallsoftware.com/talks/wat>.
+Отметьте, как аудитория реагирует, когда докладчик в первый раз говорит "javascript" :)
+
+В качестве освоения консоли разработчика можете повторить примеры на JavaScript из доклада выше и убедиться в том, что JavaScript - интересный язык программирования.
+
+## Подключение JavaScript-библиотек
+
+Ранее Вы подключали каскадные таблицы стилей к Вашему веб-сайту через `<link type="stylesheet" .../>`.
+
+Сценарии JavaScript подключаются немного иначе, через элемент `<script src="site.js"></script>`.
+Заметьте, что у этого элемента обязательно следует указывать закрывающий тег.
+Иначе работать не будет.
+
+Кстати, не все библиотеки нужно скачивать к себе рядом с сайтом.
+Можно воспользоваться CDN — сетями распространения контента.
+
+Подключите таким образом в элемент `head` библиотеку SweetAlert: <https://sweetalert.js.org/>.
+На момент написания задания это можно сделать при помощи элемента `<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>`.
+
+Посмотрите, какие красивые можно сделать сообщения о чём-либо на Вашем сайте!
+
+## Написание собственного скрипта. Добавление обработки формы
+
+До этого Вы ознакомились с основами JavaScript.
+Также Вы попробовали поработать в консоли разработчика и написали там несколько команд (странно, что в этом языке нет `void Main() { }`, не так ли?).
+А ещё Вы подключили сторонние библиотеки (как минимум SweetAlert).
+
+Теперь Ваша задача следующая:
+
+- создать файл `site.js` рядом с index.html либо в отдельной папке _js_;
+- подключить файл на страницу сайта с формой по аналогии с другими библиотеками (только из атрибутов в `script` должен быть только `src`);
+- для примера написать в файле `alert('test');` и проверить, что теперь при входе на страницу с формой должно появляться сообщение;
+- убрать `alert`;
+- добавить поиск формы через `document.forms`;
+- добавить обработчик на `submit` через `.addEventListener`;
+- добавить `.preventDefault`, чтобы при сабмите (отправке) формы не перезагружалась страница сайта (такое поведение по умолчанию во всех браузерах);
+- добавить получение данных через `FormData`;
+- добавить отображение данных из формы ввода в консоль разработчика при помощи `console.log`;
+- добавить отображение сообщения о том, что данные записаны/заказ оформлен/регистрация прошла (смотря что у Вас) через sweet alert.
+- добавить sweet alert с ошибкой, если какие-либо данные на форме были введены некорректно.
+  Например, пароль короткий или количество товара отрицательное.
+
+Для понимания `FormData` и методов работы с ним можете ознакомиться со следующим материалом: <https://www.valentinog.com/blog/formdata/>.
+Также там есть код по получению формы, добавлению обработчика и т.д.
+
+Про использование _SweetAlert_ пример кода можно увидеть на сайте этой библиотеки.
+Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.

legacy/lw05/README.md

@@ -0,0 +1,231 @@
+# Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core
+
+## Цель работы
+
+Получить навыки в создании кросс-платформенного веб-приложения в среде ASP.NET Core при помощи открытых кросс-платформенных инструментов.
+Освоить принцип проектирования API REST.
+
+## Ход работы
+
+1. Установка Visual Studio Code.
+2. Установка .NET (Core) SDK.
+3. Настройка Visual Studio Code для работы с C# (.NET).
+4. Создание ASP-NET-приложения через VS Code.
+5. Запуск и отладка C#-приложения в VS Code.
+6. Изучение основных концепций ASP.NET Core.
+7. Изменение pipeline
+8. Подключение Swagger Gen+UI для демонстрации
+
+## Прочтите внимательно перед выполнением работы
+
+Для сдачи лабораторной работы необходимо показать работающее приложение, которое способно принимать запросы из браузера.
+
+## Установка Visual Studio Code
+
+Visual Studio Code (VS Code) -- кросс-платформенный инструмент для разработки и не только.
+Очень грубо, VS Code можно считать очень прокаченным блокнотом с кучей плагинов.
+Плагины при этом могут быть различные: добавление иконок в дерево папок и файлов, добавление поддержки форматирования, отладки и запуска исходного кода, средства доступа к удалённым серверам, возможность работать с контейнерами и т.д.
+
+Скачать и установить Visual Studio Code можно с официального сайта: <https://code.visualstudio.com/>.
+При установке можете отказаться от добавления VS Code в контекстное меню и т.д.
+Единственное, что можете оставить - это добавление в PATH, если это, конечно, будет спрашиваться при установке.
+Почитать подробнее про PATH можно тут: <https://ru.wikipedia.org/wiki/PATH_(%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F)>.
+
+## Установка .NET (Core) SDK
+
+Перед выполнением этого шага необходимо убедиться: вдруг на Вашем ПК уже установлено необходимое программное обеспечение.
+
+Для этого в консоли или командной строке (для Windows сейчас рекомендуется использовать PowerShell) следует набрать следующую команду:
+
+```
+dotnet --list-sdks
+```
+
+Если вывод будет содержать строку наподобие `8.0.202 [C:\Program Files\dotnet\sdk]` и номер версии будет из актуальных, то всё хорошо.
+В противном случае необходимо произвести установку.
+
+Для этого необходимо установить .NET SDK с официального сайта: <https://dotnet.microsoft.com/download>.
+
+> ASP.NET Core - это платформа для создания веб-приложений, использующих .NET.
+> C# - язык программирования, позволяющий работать с .NET.
+
+После установки SDK под свою систему и возможной перезагрузки компьютера выполните повторно команду из начала раздела.
+Теперь она должна выводить данные корректно.
+
+## Настройка Visual Studio Code для работы с C# (.NET)
+
+Для того, чтобы удобно работать в VS Code с C#, необходимо установить расширение [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit).
+
+После установки расширение будет отображаться что-то наподобие следующего:
+
+![](vsc-extension-installed.png)
+
+## Создание ASP-NET-приложения через VS Code
+
+Создайте пустую папку где-нибудь на Вашем компьютере.
+Постарайтесь не использовать в пути до этой папки пробелы и отличные от английских букв и цифр символы.
+
+Откройте эту папку в Visual Studio Code.
+Для этого выберите пункт меню "Открыть папку" (Open Folder) со стартовой страницы или меню "Файл" (File).
+
+Далее для создания нового C#-приложения нажмите F1.
+Должна открыться строка команд по середине VC Code сверху.
+В появившейся строке введите `.net new`, а затем выберите пункт ".NET: New project..." и нажмите Enter.
+
+![](net-new-project.png)
+
+После этого выберите тип проекта как "ASP.NET Core Empty".
+
+![](net-project-type.png)
+
+Далее введите название проекта.
+Например, `IntProgLw5`.
+
+На заключительном шаге выберите каталог по умолчанию.
+
+В итоге на экране просмотра файлов в последнем блоке "Solution Explorer" должно быть видно название проекта.
+
+![](solution-explorer.png)
+
+Всё готово к первому запуску и отладке приложения!
+
+## Запуск и отладка C#-приложения в VS Code
+
+Пока не вдаваясь в подробности некоторого сгенерированного кода, зайдите в _Program.cs_, перенесите часть строки с `=> "Hello world");` на новую и поставьте точку останова в это место.
+
+![](breakpoint-set.png)
+
+Для запуска приложения и включения режима отладки необходимо нажать `F5`.
+
+VS Code может спросить, какой язык и какой проект необходимо отлаживать.
+Выберите C# и стандартную конфигурацию вашего приложения.
+
+![](vsc-debug-run-1.png)
+![](vsc-debug-run-2.png)
+
+В итоге должен открыться веб-браузер по ссылке <http://localhost:5062/> или похожей.
+
+> _localhost_ - это домен (адрес) локального ПК.
+> Никто другой Ваш сайт по такому адресу не увидит.
+
+Заметьте, что выполнение программы остановилось в точке останова:
+
+![](breakpoint-catched.png)
+
+Если у вас всё работает похожим образом, значит всё настроено правильно.
+
+## Изучение основных концепций ASP.NET Core
+
+Перед ознакомлением с основами ASP.NET Core, необходимо ознакомиться с основами построения веб-серверов.
+Как минимум надо вспомнить или узнать, что такое: протокол HTTP, запрос, ответ, тип запроса (GET, POST, PUT, ...) код ответа (200 OK, 404 NOT FOUND, 500, ...), составные части URL (схема, домен, путь, query-string, hash).
+
+После этого можно переходить к основам ASP.NET Core, которые хорошо изложены тут: <https://learn.microsoft.com/ru-ru/aspnet/core/introduction-to-aspnet-core#recommended-learning-path>.
+
+Однако основные вещи изложу здесь, чтобы не заставлять вас сейчас читать столь сложный для понимания текст.
+
+ASP.NET Core, как и другие современные платформы для построения веб-приложений, использует принцип _pipeline_ - запрос от клиента (браузера) попадает в начало "конвейера", где затем каждый обработчик (практически любая функция на _C#_) может его или изменить, или пропустить без изменений, или остановить конвейер в зависимости от самого запроса.
+После прохождения всех обработчиков формируется ответ, который и возвращается клиенту (браузеру).
+
+Визуально это можно изобразить так:
+
+```
+<запрос>         <ответ>
+   ↑↑               ↓↓
+------------------------
+| обработчик 1         |
+------------------------
+   ↑↑               ↓↓
+------------------------
+| обработчик 2         |
+------------------------
+   ↑↑               ↓↓
+------------------------
+| обработчик 3         |
+------------------------
+```
+
+Примеры обработчиков:
+
+- проверка, что запрос клиентом составлен правильно;
+- проверка доступа клиента к запрашиваемому ресурсу;
+- если по пути из запроса найден файл на веб-сервере, то можно его вернуть;
+- а если файл не найден, может какая-то подпрограмма может забрать обработку на себя?
+- "Хмм, всё, что начинается с /api, отдавайте мне, остальное мне не надо";
+- отрисовка красивых страниц об ошибках (например, 404, 403, 500 и т.д.), если прошлые обработчики сказали, что запрос был плохим;
+- обработчик-которые складывает с специальный файл информацию о запросах (логгер или служба/подсистема логирования).
+
+Как видите, обработчиков бывает много, но этот конвейер где-то надо настроить.
+В ASP.NET Core для этого существуют классы _WebApplicationBuilder_ и _WebApplication_, использование которых и можно видеть в файле _Program.cs_ нашего проекта.
+
+В нашем простейшем приложении порядок обработчиков примерно такой:
+
+1. _(неявно)_ Если запрос составлен с ошибками, выводить код `400 BAD REQUEST`.
+2. _(неявно)_ Если приложение выбросило исключение, выводить специальную страницу и код `500 INTERNAL SERVER ERROR`.
+3. Если поступил GET-запрос на главную страницу (`/`), то выводится строка `Hello World!`.
+
+Как видите, пока ничего сложного.
+
+Далее необходимо сопоставить наше веб-приложение (по сути это набор обработчиков запросов) с конкретным веб-сервером.
+Например, тем самым, что запускает ваше веб-приложение по адресу <http://localhost:хххх>.
+
+А это делается в строке `app.Run();`.
+
+> В рамках этого руководства не будем вдаваться в подробности того, что спрятано под этой строкой, а также под командой `WebApplication.CreateBuilder(args)` из начала файла.
+
+Что находится в файлах помимо _Program.cs_, можете изучить самостоятельно.
+Дам только наводку, что launchSettings необходим для запуска веб-сервера, а appsettings - для настройки веб-приложения.
+
+## Изменение pipeline
+
+После того, как вы научились запускать простейшее веб-приложение для отладки и изучили базовые понятия конвейерной обработки в ASP.NET Core, самое время этот конвейер немного поменять.
+
+Перед вами есть пример обработчика для _GET_-запросов по пути _/_.
+
+Предлагается сделать ещё как минимум несколько обработчиков для _GET_-запросов и проверить в браузере, как они будут работать.
+Например:
+
+- При GET-запросе _/time_ (через браузер необходимо будет перейти по адресу <http://localhost:5000/time>) должно выводиться текущее время строкой в формате "ДД.ММ.ГГГГ ЧЧ:ММ.СС", например, "12.04.1961 09:07:00".
+- При запросе _/whoami_ должна выводиться информация о текущем браузере.
+- При запросе _/error_ должен возвращаться такой код статуса (`StatusCode`), который придёт из параметра обработчика `[FromQuery] int status`. Если не придёт, то отдавать код статуса _200 OK_. Тогда запрос в адресной строке браузера будет выглядеть примерно как <http://localhost:5000/error?status=403> и в этом случае выводить якобы ошибку о том, что нет доступа к ресурсу. В Панели разработчика на вкладке "Сеть" должен возвращаться код из query-параметра.
+
+Для работы с запросом пользователя для получения информации о браузере или параметрах этого запроса следует изучить использование переменной `context`, которая передаётся в обработчик.
+Там есть свойство `.Request`, которое должно Вам помочь.
+
+## Подключение Swagger Gen+UI для демонстрации
+
+Как проверить, что новые обработчики работают корректно?
+
+Для этого необходимо установить дополнительную зависимость в приложение и добавить обработчик для отображения нового интерфейса.
+
+Для этого в "Solution Explorer" нажмите правой кнопкой мыши на название проекта (на втором уровне вложенности!) и выберите пункт "Open In Integrated Terminal".
+
+В появившейся командой строке введите команду `dotnet add package Swashbuckle.AspNetCore`.
+
+![](swagger-installed.png)
+
+Далее в _Program.cs_ до построения приложения `builder.Build()` добавьте следующие строки:
+
+```csharp
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen();
+```
+
+> Этот код добавляет вспомогательные службы для обработчика-генератора контракта нашего API.
+
+Также до `app.Run()` добавьте следующие строки:
+
+```csharp
+app.UseSwagger();
+app.UseSwaggerUI();
+```
+
+> Этот код добавляет обработчики для возврата контакта API и интерфейс для просмотра этого контракта.
+
+Чтобы проверить наши обработчики, необходимо при отладке приложения в адресной строке добавить `/swagger` к адресу сайта.
+Должна открыться похожая страница:
+
+![](swagger-test.png)
+
+Пример демонстрации работы query-параметра _status_ в запросе кода ошибки:
+
+![](swagger-error.png)

legacy/lw06/README.md

@@ -0,0 +1,34 @@
+# Лабораторная работа №6 - Изучение шаблона проектирования MVC
+
+## Цель работы
+
+Понимание шаблона проектирования MVC и его применения при проектировании интернет-приложений.
+
+## Ход выполнения работы
+
+Необходимо вспомнить, что говорилось на лекции про данный шаблон проектирования.
+
+Также крайне рекомендуется осознать материал отсюда:
+
+- <https://metanit.com/sharp/aspnet6/>;
+- <https://learn.microsoft.com/ru-ru/aspnet/core/mvc/overview>.
+
+Что следует понять из представленных выше и, возможно, каких других статей:
+
+1. Какие есть компоненты в шаблоне MVC и как они зависят друг от друга.
+2. Как реализуется шаблон в ASP.NET Core.
+3. Как создавать контроллеры и представления для них.
+4. Где находится общий шаблон всех представлений и как его подключить.
+5. Как передаются параметры на действия контроллера.
+6. Что такое `wwwroot` и как использовать файлы из этой директории в веб-приложении.
+
+## Защита работы
+
+Для защиты лабораторной работы необходимо продемонстрировать аналогичную работу из курса "Разработка профессиональных приложений", где есть:
+
+- Отдельный слой представления;
+- Отдельный слой бизнес-логики;
+- Наличие API в стиле REST;
+- Наличие паттерна MVC.
+
+> Как понимаю, это соответствует лабораторной работе №5.

legacy/lwF2/README.md

@@ -0,0 +1,66 @@
+# Лабораторная работа №F2 - Получение данных через API (Fetch)
+
+## Цель работы
+
+Освоить получение данных через fetch API и отображение данных на клиенте.
+
+## Ход выполнения работы
+
+1. Найти документацию по интеграции с API Github.
+2. Изучить fetch API и Promise в Javascript.
+3. Создать приложение React с шаблоном TypeScript.
+4. Описать интерфейс репозитория Github и состояние компонента со списком репозиториев.
+5. Реализовать метод получения данных о репозиториях пользователя и сохранение их в состоянии.
+6. Релизовать отображение списка репозиториев.
+
+## Документация API Github
+
+Описание ресурсоа API Github можно найти здесь: <https://docs.github.com/en/rest>.
+
+Пример данных со списком репозиториев пользователя _vladdy-moses_: <https://api.github.com/users/vladdy-moses/repos>.
+
+В качестве примера можно использовать любого пользователя, количество публичных репозиториев у которого больше трёх. 
+
+## Метод получения данных
+
+В качестве базы будет использоваться приложение из л/р №F1.
+
+Пусть в `App.tsx` будут выводиться карточки со списком репозиториев.
+
+Для того, чтобы это сделать, надо:
+
+1. Объявить интерфейс с информацией о репозитории: названии, описании, ссылке на github.
+2. Создать асинхронный метод по получению данных от API при помощи fetch API.
+3. Добавить вывод от API в `console.log` и вызвать метод, чтобы убедиться, что он работает.
+
+Получение данных надо реализовать при помощи Fetch API.
+Информацию можно получить здесь: <https://developer.mozilla.org/ru/docs/Web/API/Fetch_API>.
+
+Пример функции:
+
+```tsx
+let getData = () => {
+    fetch(`https://api.github.com/users/vladdy-moses/repos`)
+    .then(res => res.json())
+    .then((res: GithubRepo[]) => {
+        console.log(res);
+    })
+};
+```
+
+## Добавление состояния и вывод данных на экран
+
+Проведите самостоятельно.
+
+В качестве состояния можете использовать массив элементов с интерфейсом `GithubRepo`.
+В работе №F1 состоянием счётчика было "текущее количество".
+В этой же работе состоянием компонента "приложение" будет "массив репозиториев, полученный через API".
+
+Должно получиться что-то наподобие этого:
+
+![](example.png)
+
+
+## Защита лабораторной работы
+
+Как и с л/р №F1, её работу необходимо продемонстрировать на лабораторном занятии.

lw01/README.md

@@ -1,89 +0,0 @@
-# Лабораторная работа №1 - Создание макета сайта (Figma)
-
-## Цель работы
-
-Освоение средств прототипирования веб-приложений.
-
-## Ход выполнения работы
-
-1. Выбрать тематику своего будущего сайта.
-2. Зарегистрироваться в Figma или аналоге.
-3. Создать макет сайта согласно требованиям.
-
-## Выбор тематики будущего веб-сайта
-
-В рамках данного курса вам необходимо будет создать небольшое веб-приложение.
-
-> Разработка таких приложений обычно делятся на 2 части: разработка frontend и backend.
->
-> Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя.
-> То есть визуальные стили, шаблоны страниц и т.д.
->
-> Backend - это то, как веб-приложение работает внутри.
-> То есть взаимодействие веб-сервера с системами управления базами данных, обработка логики приложения и т.д.
-
-В рамках данной лабораторной работы важно определиться с тематикой будущего сайта.
-
-На этом этапе рекомендуется ознакомиться с возможными аналогами и понять, какая тематика ближе вам.
-Какой веб-сайт вам хочется сделать?
-Такой и попробуйте.
-
-Примерный список тем для сайтов предыдущих лет:
-
-1. Портал медицинского учреждения.
-2. Книжный интернет-магазин.
-3. Автосервис.
-4. Электронный дневник школьника.
-5. Электронный журнал в вузе.
-6. Учёт продукции на складе.
-7. Домашний бюджет.
-8. Гостиница.
-9. Учёт вычислительной техники.
-10. Суши-бар.
-11. Строительная фирма.
-12. Фирма по ремонту компьютерной техники.
-13. Библиотека.
-14. Отдел кадров.
-15. Доска объявлений.
-16. Фотогалерея.
-17. Форум.
-18. Новостной блог.
-19. Учёт состояния здоровья сотрудников предприятия.
-20. Компьютерная игра.
-
-> Крайне рекомендуется, чтобы тема у вас не повторялась с другими студентами вашей группы.
-> Преподаватель в таком случае может попросить изменить или самостоятельно назначить тему веб-приложения.
-
-## Регистрация в Figma
-
-В этой работе требуется создать макет будущего сайта.
-Для этого существует множество программ, позволяющих прототипировать интерфейс.
-
-Например, [Figma](https://www.figma.com/).
-Чтобы создавать свой макет, там надо зарегистрироваться (Sign up).
-К сожалению, приложение работает только на английском языке.
-Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).
-
-> В качестве альтернативы можете использовать Gimp, Adobe XD, Adobe Photoshop.
-
-## Требования к макету
-
-1. Два frame: для desktop и для мобильного устройства (например, iPhone 14).
-2. На макете должны быть следующие блоки:
-  - Блок с ссылками. Например, шапка сайта.
-    Ссылки можно оформить в виде текста с подчёркиванием.
-  - Блок с компонентами.
-    На каждом компоненте можно использовать svg-иконку.
-    Компоненты необходимо расположить в несколько столбцов для desktop-версии.
-  - Блок с таблицей.
-    Для мобильной версии можно добавить горизонтальную прокрутку.
-  - Блок с формой.
-    Элементы формы для desktop-версии можно расположить в несколько столбцов.
-    Для мобильной - в один.
-3. Обязательно черновик должен быть переименован в формат `Фамилия Имя, группа`.
-
-## Сдача лабораторной работы
-
-Для очной защиты достаточно показать работающий макет преподавателю.
-
-В случае дистанционной сдачи л/р необходимо скинуть ссылку на макет (проверьте её в режиме инкогнито / приватного окна) в [эту форму](https://forms.yandex.ru/u/63eef4a8d046880f47ffe776/) и написать об этом в [чате telegram](https://t.me/+MGRd5PxIoV83NTgy).

lwB1/README.md

@@ -0,0 +1,168 @@
+# Лабораторная работа №B1 - Разворачивание локального веб-сервера (PHP)
+
+## Цель работы
+
+Изучение основных компонентов веб-сервера, локальная установка системы управления контентом (CMS).
+
+## Ход работы
+
+1. Прочитать задание лабораторной работы до конца.
+2. Скачать и установить веб-сервер и систему управления базами данных (СУБД).
+3. Создать БД для системы управления контентом (CMS).
+4. Произвести установку CMS.
+5. Настроить CMS: подобрать тему, блоки, меню и категории записей.
+6. Заполнить CMS тестовыми записями.
+7. Оформить отчёт о выполнении лабораторной работы.
+
+## Об оформлении отчёта
+
+В рамках выполнения лабораторной работы необходимо создавать скриншоты, демонстрирующие Ваши действия.
+Таким образом крайне рекомендуется перед началом выполнения работы создать документ в любом текстовом процессоре (Microsoft Word или Google Docs) и делать в нём скриншоты.
+Не стоит делать скриншот каждого клика мышкой или каждой экранной формы, но должно быть понимание, что эту работу делали Вы.
+
+_P.S. Есть множество средств сравнения изображений. Можете попытаться обмануть систему, но проще просто сделать работу :)_
+
+## Установка веб-сервера и СУБД
+
+До этого Вы писали собственный сайт, который открывается в обычном браузере из памяти Вашего компьютера.
+Возможно, некоторые из Вас также разместили сайт на статический хостинг Github Pages.
+
+Теперь пришло время научиться устанавливать собственный веб-сервер и размещать сайт на нём.
+
+**Веб-сервер** - программное обеспечение, которое служит для отображения пользователям данных в вебе.
+Прежде всего идёт речь про HTML-разметку (не обязательно на сервере хранятся файлы *.html), CSS-стили, JS-скрипты, изображения, видео-материалы и т.д.
+Основная задача веб-сервера - реализация протоколов HTTP различных версий, которые отлично воспринимаются специальными клиентскими программами - **браузерами**.
+
+Существует множество веб-серверов.
+Самые популярные из них - Apache HTTP Server, Nginx, IIS.
+
+**Apache HTTP Server** - веб-сервер с открытым исходным кодом.
+Широко расширяем, легко запускается как на UNIX-подобных системах, так и на Windows.
+Славится не очень хорошими настройками по умолчанию.
+
+**Nginx** - отечественный веб-сервер также с открытым исходным кодом.
+Очень простой и гибкий.
+Обычно служит в качестве различных прокси-серверов.
+Например, пользователи со всего Интернета могут обращаться к веб-серверу nginx, а он внутри будет перенаправлять (проксировать) запросы к другому веб-серверу (например, тому же Apache).
+Такая связка используется очень много где и помогает распределить нагрузку и увеличить отказоустойчивость системы.
+
+**IIS** - веб-сервер от Microsoft для запуска ~~начинающих устаревать~~ веб-приложений на технологиях этой корпорации.
+Запускается только в Windows и жёстко связан с этой ОС (например, использует драйвер HTTP.sys).
+У IIS закрытая реализация, однако относительно удобное администрирование.
+Также IIS считается довольно быстрым веб-сервером как раз из-за жёсткой связи с Windows.
+
+_P.S. Современные приложения на технологиях Microsoft могут запускаться не только на IIS и Windows, и это прекрасно!_
+
+Веб-сервер по умолчанию может прослушивать специальный TCP-порт (80) и отдавать запрошенные файлы из конкретной папки на диске.
+Например, можно настроить, чтобы при запросе http://127.0.0.1:80/ открывался бы файл _C:\\htdocs\\index.html_, а при http://127.0.0.1:80/test.png файл _C:\\htdocs\\test.png_.
+Это самый простой способ работы сервера - отдавать статические файлы (по аналогии со статическим хостингом Github Pages).
+
+Более сложный режим работы веб-сервера - добавление логики по обработке пользовательских запросов.
+Это и есть т.н. backend или серверная часть веб-приложения.
+Веб-приложение должно быть разработано на каком-либо языке программирования и взаимодействовать с веб-сервером.
+Пример такого взаимодействия - протокол _FastCGI_.
+
+Самый популярный язык программирования в вебе - **PHP**.
+Вышло уже много версий этого языка, и до сих пор он не потерял свою популярность благодаря широкому сообществу, низкому порогу входа и простоте установки на веб-сервер.
+Вы могли слышать много баек про PHP-программистов, однако этот язык всё равно является самым популярным в вебе.
+
+Также неотъемлемой частью бекенда является система управления базами данных, где могут храниться данные о пользователях.
+Почти у каждого в макете сайта были формы входа, регистрации, оформления заказа.
+А где эти данные должны храниться?
+Как раз в базе данных.
+
+Можно самостоятельно установить СУБД, веб-сервер, подключить к последнему язык программирования, однако существуют специальные сборки таких средств для локальной разработки и отладки.
+
+Предлагаю установить среду разработки на PHP **XAMPP**: <https://www.apachefriends.org/ru/index.html>.
+
+При установке не забудьте снять ненужные флажки:
+
+![](xampp-1.png)
+
+> Если хотите получить графическую среду по управлению СУБД, выберите дополнительно "PhpMyAdmin".
+
+После установки среды разработки Вы сможете открыть панель управления:
+
+![](xampp-2.png)
+
+Запустите веб-сервер и СУБД и проверьте, что сайт-приветствие открывается.
+
+## Создание базы данных для CMS
+
+В мире веба не все сайты разрабатываются с нуля (как это делали вы в прошлых лабораторных работах).
+Если веб-сайт не очень сложный, например, состоящий из блога, пары изображений, пары страниц, и, может быть, страницы с заказом или оформлением доставки, то можно использовать готовые открытые разработки, настроенные под свои нужды.
+
+Выделяют класс таких систем - **систем управления контентом** (Content Management System, CMS).
+Благодаря им Вам не придётся самостоятельно создавать таблицы в базе данных, программировать работу с формами, их отображением и т.д.
+
+Самой популярной CMS является WordPress, и, вы не поверите, она написана на PHP!
+Устанавливать и конфигурировать WordPress относительно легко, поэтому займёмся этим в данной лабораторной работе.
+Полученные навыки позволяет установить любую другую CMS на Ваш выбор или выбор Вашего абстрактного заказчика.
+
+Однако перед тем, как создать собственный сайт на WordPress, необходимо создать базу данных.
+
+Перейдите в Shell из панели XAMPP.
+
+Введите команду `mysqladmin.exe -u root password %ваш-пароль%`, чтобы задать пароль системному пользователю _root_:
+
+![](shell-1.png)
+
+Далее создадите БД при помощи команд `mysql  -u root -p` и `CREATE DATABASE wordpress;`:
+
+![](shell-2.png)
+
+## Установка WordPress
+
+Для установки WordPress скачайте архив с [официального сайта](https://ru.wordpress.org/) и распакуйте его в папку _C:\\xampp\\htdocs\\_:
+
+![](wp-1.png)
+
+Далее перейдите в браузере по адресу <http://localhost/wordpress/> и начните установку.
+
+Введите в форму выбора БД данные, которые вы указали при её создании:
+
+![](wp-2.jpg)
+
+Далее продолжите установку.
+
+После окончания установки и ввода данных Вашего будущего сайта у Вас должна открыться панель администрирования:
+
+![](wp-3.jpg)
+
+В меню можно нажать на название сайта и перейти на него (ссылка есть выше).
+Взгляните на Ваш уже практически полностью настроенный сайт!
+Круто, не так ли?
+
+## Настройка и заполнение CMS
+
+Изучите возможности WordPress.
+
+Существует возможность скачивать и устанавливать темы.
+Практически любую тему можно настроить под себя: выбрать цвета, шрифты, форму блоков с данными, контент шапки, подвала и т.д.
+
+Также можно определить записи и их категории.
+Вообще запись - основная сущность WordPress.
+Синоним - новость.
+Также в WordPress есть понятие "Страница".
+Пример страниц - контакты, "обо мне", "схема проезда" и т.д.
+
+Можно настроить меню, чтобы нужные новостные категории или страницы отображались в нём в определённом порядке.
+
+Можно устанавливать плагины.
+Существуют как бесплатные дополнения, так и платные.
+Один из самых популярных - _Contact Form 7_, позволяющий создавать формы обратной связи.
+
+Для выполнения данного пункта выберите тему, настройте меню, шапку, подвал сайта, а также главную страницу согласно своей тематике.
+Попробуйте добавить несколько записей и страниц.
+Заметьте, что это намного проще, чем делать сайт с нуля.
+
+## Вопросы для рассуждения
+
+- Если CMS нетрудно настраивать и довольно легко сопровождать, почему нас учат основам вёрстки, таблиц стилей, браузерных скриптов?
+- Можно ли на CMS разработать социальную сеть?
+- Насколько быстрее будет работать сайт на CMS в отличие от написанного с нуля?
+- Как понять, когда следует использовать CMS, а когда начинать разработку "с чистого листа"?
+- Насколько безопасно использовать CMS? А собственный код? А если он ещё и написан не самым лучшим образом?
+- Что дешевле сопровождать - сайт на CMS или собственноручно написанный движок?
+- Насколько сложно сделать свою CMS? (Кстати, ваш ассистент в школе таким баловался ещё на PHP 4 или 5. Как хорошо, что этот код не сохранился...)
+- Как думаете, старый сайт политеха сделан на CMS? Отвечу сразу - [да, на разработанной в политехе же в 2005 году](http://www.sisadminov.net/main/view/article/16).

lwB2/README.md

@@ -0,0 +1,86 @@
+# Лабораторная работа №B2 - Разработка чат-бота для Telegram
+
+## Цель работы
+
+Понять концепцию построения чат-ботов на примере Telegram.
+
+## Ход работы
+
+**Чат-бот** - программа, с которой можно общаться, будто вы общаетесь с живым (но может быть и не самым умным) собеседником.
+
+Чат-боты служат для различных целей: в качестве напоминателей (всяческие календари), подсказчиков ("не забудь заплатить за электричество!1"), информационных служб (например, "пробить авто по номеру" или "показать погоду в Ульяновске") и много чего ещё.
+
+Обычно чат-бот не умеет сам писать сообщения людям, только реагировать на сообщения от людей.
+Однако иногда допускается писать самостоятельно, если диалог с пользователем уже был когда-то инициирован.
+
+Существует множество архитектур по созданию чат-ботов для разных платформ.
+Мы же рассмотрим Telegram.
+
+Для создания нового бота необходимо... написать боту `@BotFather`!
+Он на английском языке предложит определить имя нового бота, его логин и выдаст в итоге ключ доступа к API (_token_).
+Там же будет написано, что этот ключ ни в коем случае нельзя передать кому-либо, поэтому при оформлении отчёта по этой работе, пожалуйста, **удаляйте _token_ из исходного кода и из скриншотов**.
+
+Список доступных методов для ботов Telegram перечислен здесь: <https://core.telegram.org/bots/api#available-methods>.
+Где-то там есть и описание того, как эти методы вызывать.
+Нам пока это не особо интересно, однако знать следующие вещи стоит:
+
+- бот получает обновления при помощи команды `getUpdates`.
+  Эта команда позволяет возвращать те обновления, к которым имеет доступ чат-бот.
+  Например, кто-то написал или отредактировал личное сообщение.
+  Команда позволяет получать до 100 обновлений за один вызов.
+- при вызове команды обычно требуется объект какого-то формата на вход.
+  Также обычно команда возвращает ответ в определённом формате.
+  Параметры можно сериализовать в JSON-строку.
+- если кто-то пишет чат-боту сообщения, информация об этом состоит из следующих полей: <https://core.telegram.org/bots/api#message>.
+  Как можете заметить, возвращается много информации, но там есть как минимум: ИД сообщения, текст сообщения, чат, из которого было получено сообщение, дата, прикреплённые аудио, фото и т.д.
+- если мы хотим отправить сообщение, следует вызвать метод `sendMessage`: <https://core.telegram.org/bots/api#sendmessage>.
+  Там обязательно требуется указать ИД чата и текст нашего сообщения.
+  Однако можно указать и другие поля, например, ИД сообщения, на который мы хотим ответить и список доп. кнопок для быстрых действий.
+
+Также первое сообщение боту от пользователя обычно `/start`, это также стоит помнить.
+
+Предположим, мы хотим написать диагностического бота, который будет реагировать на сообщения людей следующим образом:
+
+- на сообщение `/start` писать, что этот бот написан в качестве учебного материала и может выполнять следующие команды: ...
+- на сообщение `/who` выводит ИД чата, ИД сообщения, ИД отправителя, имя отправителя и дату отправки сообщения.
+- на сообщение `/rand %i %j` выводит случайное число между `%i` и `%j`.
+  Или сообщение об ошибке, если `%j` меньше, чем `%i`.
+- при отправке голосового сообщения должен отвечать, что он "бумер" и не понимает голосовые сообщения.
+- при отправке картинки должен всегда осыпать пользователя комплиментами по поводу красоты того, что он прислал.
+
+Забавно?
+Ещё бы.
+Осталось реализовать.
+
+Ход выполнения видится следующим:
+
+1. Регистрация бота.
+2. Обработка получения обновлений.
+3. По каждому обновлению: если оно сообщение, то разбираем содержимое сообщения.
+4. После разбора содержимого формируем ответ.
+5. Отправляем ответ на сообщение.
+
+Вроде бы всё просто, однако одновременно с этим ничего и не понятно.
+
+Здесь нам придёт на помощь сообщество ИТ-специалистов, потому что многие стандартные решения уже были реализованы до нас (или нами).
+
+Например, далеко не полный список библиотек для построения ботов для Telegram:
+
+- для C# - <https://github.com/TelegramBots/Telegram.Bot>;
+- для Python - <https://github.com/python-telegram-bot/python-telegram-bot/wiki/Extensions-%E2%80%93-Your-first-Bot>;
+- для Java - <https://github.com/pengrad/java-telegram-bot-api>;
+- для Go - <https://github.com/go-telegram-bot-api/telegram-bot-api>.
+
+Ваши задачи на эту лабораторную работу:
+
+- определиться с любимым языком программирования;
+- найти популярную реализацию библиотеки для создания чат-бота в Telegram;
+- зарегистрировать чат-бота;
+- подключить чат-бота к библиотеке и проверить, что обновления приходят;
+- попытаться хоть что-нибудь ответить самому себе через программу (хотя бы тем же самым сообщением);
+- дополнить обработку ответов уже тем, что описано выше в тексте лабораторной работы;
+- продемонстрировать работу.
+
+## Демонстрация работы
+
+Демонстрация работы предполагает запуск бота и проверку его ответов на сообщения преподавателя в режиме реального времени.

lwB3/README.md

@@ -0,0 +1,13 @@
+# Лабораторная работа №B3 - Создание онлайн-чата при помощи WebSocket
+
+## Цель работы
+
+Изучить протокол WebSocket и его реализацию (например, socket.io или SignalR).
+
+## Ход выполнения работы
+
+1. Определиться с технологией.
+   Например, можно использовать ASP.NET с SignalR или nodejs с socket.io.
+2. Реализовать онлайн-чат из примера для демонстрации работы технологии.
+3. Доработать онлайн-чат: добавить новое текстовое поле "Имя" (_nickname_), которое также надо задать до отправки сообщения на сервер.
+4. Продемонстрировать работу изменённого чата с использованием нескольких клиентов (например, несколько браузеров).

lwF1/README.md

@@ -0,0 +1,106 @@
+# Лабораторная работа №F1 - Макет одностраничного сайта (Figma)
+
+## Цель работы
+
+- Освоение средств прототипирования веб-приложений.
+
+## Ход выполнения работы
+
+1. Выбрать тематику своего будущего сайта.
+2. Зарегистрироваться в Figma или аналоге (например, Lunacy).
+3. Создать макет сайта согласно требованиям.
+
+## Выбор тематики будущего веб-сайта
+
+В рамках данного курса вам необходимо будет создать небольшое веб-приложение.
+
+> Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend).
+>
+> Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя.
+> То есть визуальные стили, шаблоны страниц и т.д.
+>
+> Backend - это то, как веб-приложение работает внутри.
+> То есть взаимодействие веб-сервера с системами управления базами данных, обработка логики приложения и т.д.
+
+В рамках данной лабораторной работы важно определиться с тематикой будущего сайта.
+
+На этом этапе рекомендуется ознакомиться с возможными аналогами и понять, какая тематика ближе вам.
+Какой веб-сайт вам хочется сделать?
+Такой и попробуйте.
+
+Примерный список тем для сайтов предыдущих лет:
+
+1. Портал медицинского учреждения.
+2. Книжный интернет-магазин.
+3. Автосервис.
+4. Электронный дневник школьника.
+5. Электронный журнал в вузе.
+6. Учёт продукции на складе.
+7. Домашний бюджет.
+8. Гостиница.
+9. Учёт вычислительной техники.
+10. Суши-бар.
+11. Строительная фирма.
+12. Фирма по ремонту компьютерной техники.
+13. Библиотека.
+14. Отдел кадров.
+15. Доска объявлений.
+16. Фотогалерея.
+17. Форум.
+18. Новостной блог.
+19. Учёт состояния здоровья сотрудников предприятия.
+20. Компьютерная игра.
+
+> Крайне рекомендуется, чтобы тема у вас не повторялась с другими студентами вашей группы.
+> Преподаватель в таком случае может попросить изменить или самостоятельно назначить тему веб-приложения.
+
+## Регистрация в Figma
+
+В этой работе требуется создать макет будущего сайта.
+Для этого существует множество программ, позволяющих прототипировать интерфейс.
+
+Например, [Figma](https://www.figma.com/).
+Чтобы создавать свой макет, там надо зарегистрироваться (Sign up).
+К сожалению, приложение работает только на английском языке.
+Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).
+
+> В качестве альтернативы можете использовать Lunacy, Sketch, Gimp.
+
+## Требования к макету
+
+1. Сайт должен быть выполнен в стиле langing-page, то есть являться одностраничным и состоять из блоков (о компании, цены, отзывы, обратная связи и т.п.).
+   Допускается наличие нескольких вкладок на одной странице, но лучше блоки с информацией располагать друг под другом с общей навигацией по всей странице, например, в шапке.
+2. Необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 16).
+3. Обязательна для использования готовая дизайн система.
+   Например, [Consta Design](https://consta.design/) ([figma](https://www.figma.com/community/file/853774806786762374)), [Ant Design](https://ant.design/) ([figma](https://www.figma.com/community/file/831698976089873405)) или [Material UI](https://mui.com/material-ui/) ([figma](https://www.figma.com/community/file/912837788133317724)).
+4. Все элементы на frame-ах должны быть выполнены при помощи компонентов, скопированных из макета выбранной дизайн-системы.
+   Если соблюдать это правило, дальнейшая вёрстка будет сильно проще.
+5. Разрешается использовать нестандартные иконки, если их нет в дизайн-системе.
+   Однако они должны быть добавлены в компонент корректно.
+6. В вашем макете должны быть расположены следующие блоки:
+
+- Блок с ссылками. Например, шапка сайта.
+  Обычно за это отвечает группа компонентов *Navigation* или *NavBar*.
+  Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужную часть frame-а.
+- Блок с карточками.
+  В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое.
+  Карточки необходимо расположить в несколько столбцов для desktop-версии.
+  В мобильной версии обычно карточки располагаются друг под другом.
+  Пример карточек: блок с анонсами новостей и событий.
+  Обычно за это отвечает группа компонентов *Stack*, *Grid* и *Card*.
+- Блок с формой.
+  Элементы формы для desktop-версии можно расположить в несколько столбцов.
+  Для мобильной - в один.
+  Не забудьте кнопку отправки формы!
+  Пример формы: обратная связь, подписка на новости, форма входа в систему.
+  Обычно за это отвечает набор компонентов *Form*, *Input*, *Label*.
+
+7. Обязательно файл с Вашим макетом должен быть переименован из `Untitled` в формат `Фамилия Имя, группа`.
+8. Ваш page с двумя frame (см. п. 2) должен быть самым первым.
+
+## Некоторые советы
+
+- Чтобы создать свой frame в выбранной дизайн-системе в Figma, достаточно скопировать нужный макет к себе, создать новый Page (в меню слева), сделать его первым в списке всех страниц. После этого в панели инструментов (снизу) выбрать *Frame* (или нажать `F` на клавиатуре) и на панели справа выбрать тип нового фрейма. Он добавится на страницу автоматически.
+- Для копирования компонентов необходимо найти нужную страницу с компонентами, затем выделить нужный компонент, скопировать его через `Ctrl-C` и вставить на свой frame через `Ctrl+V`.
+- Для изменения свойств компонента (например, необходимо поменять вид кнопки или её текст) необходимо его выделить, и в панели *Design* (справа) сверху появится список свойств компонента, которые можно свободно менять.
+- Это учебный макет. Он не должен выглядеть супер-круто и не должен содержать **всю** информацию, что была бы полезна на сайте выбранной вами темы. Ограничьтесь минимальным набором информации и полей ввода на форме.

lwF2/README.md

@@ -0,0 +1,277 @@
+# Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)
+
+## Цель работы
+
+- Освоение среды локальной фронтенд-разработки на базе NodeJS.
+- Освоение языка программирования TypeScript.
+- Освоение библиотеки для построения одностраничных приложений React.
+- Освоение принципов декомпозиции одностраничных веб-приложений.
+
+## Ход работы
+
+1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений.
+2. Создать шаблон приложения с использованием языка TypeScript и технологии React.
+3. Изменить шаблон, добавив компоненты на основании макета из л/р F1.
+
+> Задание описано для React, однако можете исполоьзовать в качестве аналога любую другую похожую технологию.
+
+## Настройка среды разработки
+
+Необходимо установить следующий софт:
+
+1. NodeJS: <https://nodejs.org/en/download/>, версия LTS.
+2. Visual Studio Code: <https://code.visualstudio.com/download>.
+3. Google Chrome с расширением React Developer Tools: <https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru>.
+
+Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
+
+Чтобы проверить установку NodeJS, выполните в терминале (можно в VS Code) следующие команды.
+Вывод должен быть похож на представленный ниже.
+
+```bash
+$ node --version
+v22.14.0
+$ npx --version
+10.9.2
+```
+
+> Если при выполнении команды отображается номер версии - всё хорошо.
+> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
+
+## Создание первого SPA-приложения
+
+Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest`.
+Она запускает процесс создания простейшего SPA-приложения.
+
+Введите название проекта, например, `ip-lwf2`.
+
+Для использования React выберите `React` → `TypeScript + SWC`.
+
+В конце должно возникнуть сообщение:
+
+```
+Done. Now run:
+  cd ip-lwf2
+  npm install
+  npm run dev
+```
+
+Выполните указанные команды во встроенном терминале.
+В конце должны получить похожий вывод:
+
+```
+  VITE v6.2.2  ready in 233 ms
+
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: use --host to expose
+  ➜  press h + enter to show help
+```
+
+Для отображения сайте перейдите по ссылке, которая указана в выводе.
+Для остановки отладки нажмите `Ctrl+C`.
+
+Если более подробно рассматривать созданный шаблон, то можно выделить следующие файлы и каталоги:
+
+- `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
+- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения.
+- `src` - весь наш исходных код, в т.ч. подключаемые динамически стили и изображения, связанные с нашим React-приложением.
+- `index.html` - основной файл для внедрения нашего одностраничного приложения.
+- `package.json` - конфигурация приложения.
+- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
+- `tsconfig.json` - конфигурация компилятора TypeScript.
+- `vite.config.ts` - конфигурация нашего прилжения, основанного на vite.
+
+Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`.
+Должен открыться браузер с анимированным логотипом реакта.
+
+Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что сайт автоматически изменился в браузере без необходимости перезагрузки страницы.
+
+## Изучение TypeScript
+
+TypeScript — это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
+Другими словами, это "JavaScript с типами".
+
+Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>.
+Можно почитать эту страницу и другие до _Type Manipulation_.
+
+Также рассмотрите файл `src/App.tsx`.
+Благодаря TypeScript среда Visual Studio Code позволяет подсказывать атрибуты у элементов.
+Кстати, заметьте, что в tsx-файле (аналог js-файла) прямо внутри JS-кода расположена разметка HTML.
+Странно, не так ли?
+
+## Изучение React
+
+Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: <https://ru.react.dev/>.
+Знакомство с React очень подробное и понятное.
+Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого.
+
+## Создание своих компонентов на примере счётчика кликов
+
+Когда вы разобрались, что такое компоненты, давайте добавим собственный.
+Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия.
+Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код:
+
+```tsx
+var Counter = () => {
+    return (
+        <div>Тут будет счётчик.</div>
+    );
+};
+export default Counter;
+```
+
+На текущий момент весь компонент - это один статический `<div>`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики.
+Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (`<Counter />`).
+
+Теперь поговорим про состояние нашего компонента.
+Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".
+
+С состоянием можно работать через хук `useState`.
+Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния.
+Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
+
+```tsx
+import { useState } from 'react'; // Подключаем ссылку на useState.
+
+var Counter = () => {
+    var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0.
+    return (
+        <div>Значение счётчика: {count}.</div>
+    );
+};
+export default Counter;
+```
+
+Пока у нас нет логики по изменению состояния, поэтому всегда будет отображаться то число, которое указано в `useState`.
+
+Добавим же её!
+
+Сперва добавим кнопку в фукнцию рендера.
+Сразу установим событие по клику на кнопку:
+
+```tsx
+return (
+    <div>
+        <div>Значение счётчика: {count}.</div>
+        <button onClick={handleIncrease}>Прибавить 1</button>
+    </div>
+);
+```
+
+Этот код изначально работать не будет, так как не объявлена функция-обработчик `handleIncrease`.
+Добавим её (до `return (`):
+
+```tsx
+var handleIncrease = () => {
+    setCount(count + 1);
+};
+```
+
+Код должен заработать!
+
+Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS).
+Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов.
+Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов.
+А что же такое пропсы?
+
+## Пропсы
+
+Давайте изменим пример.
+Пускай мы можем передать в компонент `Counter` начальное значение счётчика и шаг его изменения.
+
+Изменим код в `App.tsx`: `<Counter start={10} step={5} />`.
+Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали.
+
+Опишем же их!
+В `Counter.tsx` добавим перед объявлением блоков интерфейс и заиспользуем его в описании компонента:
+
+```tsx
+interface CounterProps {
+    start: number;
+    step: number;
+}
+
+var Counter = (props: CounterProps) => {
+```
+
+Теперь код работает, однако значения наших параметров игнорируются, потому что мы их не используем.
+
+Добавьте использование параметров самостоятельно.
+
+Теперь создадим отдельный компонент под кнопку.
+Это нужно, например, если на сайте все кнопки должны иметь одинаковое поведение и одинаковый внешний вид.
+
+Допустим, заглушка для кнопки будет такая:
+
+```tsx
+interface ButtonProps {
+    text: string;
+    onClick: () => any; // TODO: Что это за пропс?
+}
+
+var Button = (props: ButtonProps) => {
+    return (
+        <button onClick={/* ??? */}>{props.text}</button>
+    );
+};
+export default Button;
+```
+
+Вам необходимо самостоятельно понять, что за `onClick` и что необходимо прописать в разметке, чтобы оно заработало.
+
+## Декомпозиция комопнентов
+
+Компоненты в React могут включать в себя другие компоненты.
+Таким образом, можно выстроить дерево компонентов от общих к конкретным.
+
+Например, таким образом:
+
+- App
+  - Header
+  - Body
+  - Footer
+
+We need to go deeper:
+
+- App
+  - Header
+    - Title
+      - Logotype
+      - Text
+    - NavBar
+      - Link
+  - Body
+    - Main
+      - Title
+      - Subtitle
+    - Price
+      - PriceAmount
+      - PriceDescription
+    - Feedback
+      - Form
+        - TextBox
+        - Button
+  - Footer
+    - Contacts
+    - Map
+
+Каждый из пунктов выше может быть выделен в отдельный компонент со своим набором пропсов, чтобы из их комбинации можно было собрать наш лендинг из л/р 1.
+
+Предлагается компоненты положить по следующим директориям:
+
+- `src/components` - общие компоненты: ссылки, обёртки блоков, поля ввода, кнопки.
+- `src/blocks` - описание блоков сайта: шапка, цены, отзывы, подвал.
+- `src/forms` - описание форм (обычно одна форма).
+
+## Демонстрация работы
+
+Демонстрация работы производится на лабораторном занятии.
+
+Для того, чтобы запустить код на лабораторных компьютерах, можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище.
+Однако помните при этом, что **необходимо удалить папку `node_modules`**.
+В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые можно восстановить в любой момент командой `npm install`.
+
+## Сдача лабораторной работы
+
+На лабораторных ПК должен быть установлен NodeJS и VS Code.
+Поэтому SPA-приложение необходимо будет продемонстрировать вместе с его кодом.

lwF3/README.md

@@ -0,0 +1,141 @@
+# Лабораторная работа №F3 - Стилизация веб-приложения (React)
+
+## Цель работы
+
+- Освоение принципов стилизации элементов при помощи конструкций CSS.
+- Освоение использования компонентов готовых дизайн-систем в React.
+
+## Ход работы
+
+1. Подключить к проекту дизайн-систему.
+2. Для компонентов, которые в работе F2 разрабатывались вручную, найти аналоги.
+3. Начать использовать компоненты из дизайн-системы.
+4. Добавить собственные стили при помощи CSS-модулей, чтобы вёрстка сайта была похожа на макет из работы F1.
+5. При необходимости добавить изображения и фон.
+
+> Для любителей хардкора пункты 1-3 можно пропустить, и всё делать самому.
+
+## Подключение дизайн-системы
+
+В nodejs есть стандартный менеджер пакетов NPM.
+По аналогии с NuGet в DotNet и Maven в Java.
+
+Обычно подключение дизайн-системы, как и любых других библиотек, происходит через указанный выше NPM командой `npm install`.
+Её необходимо запускать в той директории, где располагается файл `package.json`.
+После успешной установки библиотеки (или "зависимости" для нашего приложения) изменятся файлы `package.json` и `package-lock.json`.
+В этих файлах описывается базовая информация о проекте и закрепление конкретных зависимостей сответственно.
+
+> Что за закрепление зависимостей?
+> Всё дело в том, что в `package.json` обычно указаны диапазоны зависимостей (например, `"zustand": "^4.5.5"`, то есть "любая версия от 4.5.5 строго до 5.0.0").
+> В `package-lock.json` указывается конкретная версия, которая должна удовлетворять требованиям и быть использована при работе нашего приложения.
+
+Пример команды подключения consta design:
+
+```bash
+npm install @consta/uikit @consta/icons @consta/header
+```
+
+Это команда установит компоненты из Consta UI и Consta Header, а также иконки из Consta Icons.
+
+## Собственная стилизация через CSS-модули
+
+В классическом документе HTML с подключёнными CSS все стили для всех элементов описываются глобально, а элементы, для которых и нужно определить какие-то стили, выбираются через "селекторы".
+
+Пример селектора:
+
+- `.text-danger` - все элементы, у которых определён аттрибут `class="<...> text-danger <...>"`, то есть хотя бы один класс - это `text-danger`;
+- `.text.text-danger` - все элементы, у которых определены сразу два класса: и `text`, и `text-danger`;
+- `p,h1` - этот селектор выбирает все абзацы (`<p>это абзац</p>`) и все заголовки первого уровня (если что, их 6 уровней);
+- `a:hover` - для ссылок (`<a href="https://ulstu.ru/">Политех!</a>`), на которые пользователь навёл мышь.
+
+Затем для каждого селектора объявляется набор правил стилизации, например:
+
+```css
+.text {
+    font-size: 16px; /* Размер шрифта */
+}
+
+.text.text-danger {
+    color: #ff0000; /* Красный цвет текста */
+    background-color: #ff9999; /* Розовый - цвет фона */ 
+}
+
+h1 {
+    border: 1px solid black; /* Стиль границ элемента */
+    border-radius: 10px; /* Радиус скругления границ */
+}
+```
+
+Этот подход существует уже как несколько десятков лет, но есть нюанс.
+Если сайт (веб-приложение, система) очень сложная и некоторые стили ещё и подключаются снаружи (например, та же дизайн-система), то можно легко схлопотать конфликт стилей.
+
+Представим, что для примера выше где-то другой разработчик определил следующее:
+
+```css
+.text {
+    font-size: 14pt;
+}
+```
+
+И что получится?
+Размер шрифта должен быть `16px` или `14pt`?
+
+Чтобы частично решить эту проблему, было предложено множество подходов.
+
+Один из них: БЭМ (Блок, Элемент, Модификатор).
+Он описывает правила, как должны называться классы, чтобы не было конфликта стилей, как выше.
+
+Другой подход - использование модулей CSS.
+При этом подходе для каждого компонента создаётся отдельный файл `%component_name%.module.css`, где можно указывать стили для конкретных элементов компонента.
+
+Импортируется такой набор стилей как `import styles from './%component_name%.module.css'`, далее можно обращаться к переменной `styles`. Это - объект, в котором каждое поле - это название класса из CSS-модуля.
+
+Предположим CSS-модуль для карточки (`Card.module.css`) описан таким образом:
+
+```css
+.header { /* Стили заголовка */ }
+.text { /* Стили текста. Да, тут нет комментариев // */ }
+.footer { /* Стили подвала */ }
+```
+
+Тогда если импортировать этот модуль в `Card.tsx` как `import styles from './Card.module.css'`, то в объекте `styles` будут следующие строки:
+
+- `styles.header` - для `className`, связанного с заголовком;
+- `styles.text` - для `className`, связанного с основным текстом;
+- `styles.footer` - для `className`, связанного с подвалом.
+
+Пример описания компонента `Card.tsx` может быть таким:
+
+```tsx
+import { ReactNode, PropsWithChildren } from 'react';
+import styles from './Card.module.css';
+
+interface Props {
+    header: string;
+    footer: ReactNode;
+}
+
+export const Card = (props: PropsWithChildren<Props>) => (
+    <div>
+        <h3 className={styles.header}>{props.header}</h3>
+        <div className={styles.body}>{props.children}<div>
+        <footer className={styles.footer}>{props.footer}</footer>
+    </div>
+);
+```
+
+Вся мощь CSS-модулей - это уникальные названия селекторов.
+Предположим, есть 2 CSS-модуля, и в обоих определён селектор `.header`.
+Тогда при компиляции нашего приложения для одного из компонентов итоговое название класса, которое "увидит" браузер, может быть `_header_mdccx_73`, а для другого - `_header_mdccx_78`.
+
+## Добавление изображений
+
+Как добавлять статические файлы (к которым относятся документы, картинки, и т.д.) для vite [описаны в этой документации](https://vite.dev/guide/assets).
+
+Если кратко, есть несколько путей:
+
+- Скопировать файлы с изображениями в папку `public` и использовать в качестве ссылки на фон или изображение просто имя файла, например, `<img src="img.png" alt="" />`.
+- Скопировать файлы с изображениями рядом с компонентом и импортировать их как `import imgBg from './img.png'`.
+  Тогда в переменную `imgBg` будет помещён сгенерированный url, который надо использовать по назначению, например, `<img src={imgBg} alt="" />`.
+- Скопировать файлы с изображениями рядом с CSS-модулем и использовать значение свойства по типу `url('./img.png')`.
+  Например, `.text{ background: url('./bg.png'); }`.

lwF4/README.md

@@ -0,0 +1,241 @@
+# Лабораторная работа №F4 - Взаимодействие с API (Axios)
+
+## Цель работы
+
+- Освоение взаимодействия между fronend и backend в веб-приложениями посредством технологии `axios`.
+- Получение навыков формирования макета RESTful API при помощи технологии `json-server`.
+- Освоение технологии `Postman` для работы с API, основанным на протоколе HTTP(S).
+
+## Ход работы
+
+1. Проверить и при необходимости исправить код описания формы ввода данных в приложении из [lwF3](../lwF3/README.md).
+2. Развернуть API-сервер на основе `json-server` рядом с frontend-приложением.
+3. Развернуть ПО Postman и выполнить CRUD-запросы на API-сервере (backend).
+4. Подключить к frontend пакет `axios`.
+5. Добавить в обработчик отправки формы вызов метода добавления данных в API-сервер при помощи axios.
+6. Убедиться через Postman и через блокнот, что данные корректно пришли с frontend на backend.
+
+## Проверка формы ввода
+
+При использовании Consta Design, убедитесь, что все текстовые поля записывают значение во внутреннее состояние формы.
+
+Если используете собственные обёртки, пропсы `value` и `onChange` "перекидывать" из компонентов Consta Design далее.
+
+Пример формы БЕЗ компонентов-обёрток (у Вас должно быть с "обёртками"):
+
+```tsx
+export const FeedbackForm = () => {
+  const [nameValue, setNameValue] = useState<string | null>(null);
+  const [textValue, setTextValue] = useState<string | null>(null);
+
+  const handleSend = () => {
+      /* TODO: логика по отправке данных на сервер. */
+  };
+
+  return (
+    <Theme preset={presetGpnDefault}>
+      <TextField
+        onChange={setNameValue}
+        value={nameValue}
+        type="text"
+        label="Имя"
+        placeholder="Как Вас зовут?"
+      />
+      <TextField
+        onChange={setTextValue}
+        value={textValue}
+        type="textarea"
+        rows={5}
+        label="Сообщение"
+        placeholder="Напишите, что Вы думаете о нас..."
+      />
+      <Button label="Отправить" onClick={handleSend} />
+    </Theme>
+  );
+}
+```
+
+Пример обёртки над текстовым полем:
+
+```jsx
+import {
+  TextField as ConstaTextField,
+  TextFieldPropOnChange,
+  TextFieldPropValue,
+} from "@consta/uikit/TextField";
+
+interface TextFieldProps {
+  onChange: TextFieldPropOnChange;
+  value: TextFieldPropValue;
+  label: string;
+  placeholder: string;
+}
+
+export const TextField = (props: TextFieldProps) => (
+  <ConstaTextField
+    type="text"
+    onChange={props.onChange}
+    value={props.value}
+    label={props.label}
+    placeholder={props.placeholder}
+  />
+);
+```
+
+Если же вы используете обычные элементы `input`, `textarea` и т.п., тогда надо использовать их в controlled-режиме (подробнее о режимах полей ввода [можете почитать в документации](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)).
+Например, так:
+
+```jsx
+<input
+  onChange={(e) => setNameValue(e.target.value)}
+  value={nameValue}
+  type="text"
+  placeholder="Как Вас зовут?"
+/>
+<textarea
+  value={textValue}
+  onChange={(e) => setTextValue(e.target.value)}
+  placeholder="Напишите, что Вы думаете о нас..."
+></textarea>
+```
+
+Только обратите внимание, что необходимо изменить тип в переменных состояния, отвечающих за значения данных на форме, т.к. `string | null` уже не подходит.
+
+## Установка сервера json-server
+
+Создайте каталог рядом с react-приложением.
+
+Создайте в нём файл `db.json` с содержимым:
+
+```json
+{
+    "feedback": []
+}
+```
+
+> Замените `feedback` на кодовое название сущности, к которой относится ваша форма.
+> Например, `order` для заказа, `thread` для ветви обсуждения и т.п.
+
+Запустите в консоли в созданном каталоге команду `npx json-server db.json`.
+
+Примерный вывод:
+
+```
+JSON Server started on PORT :3000
+Press CTRL-C to stop
+Watching db.json...
+
+♡( ◡‿◡ )
+
+Index:
+http://localhost:3000/
+
+Static files:
+Serving ./public directory if it exists
+
+Endpoints:
+No endpoints found, try adding some data to db.json
+
+Endpoints:
+http://localhost:3000/feedback
+```
+
+Запомните последнюю ссылку, она нам понадобится позже.
+
+## Проверка работы API при помощи утилиты Postman
+
+Postman – утилита для работы с API-интерфейсами в стиле REST (популярен в web).
+
+Страница для скачивания: <https://www.postman.com/downloads/>.
+
+Продолжите запуск без учётной записи (2 раза надо об этом сказать).
+
+Далее необходимо сделать процедуры CRUD.
+Это сокращение от Create, Read, Update, Delete.
+
+Согласно документации json-server доступны следующие методы API (на примере ресурса `posts`):
+
+```
+GET    /posts
+GET    /posts/:id
+POST   /posts
+PUT    /posts/:id
+PATCH  /posts/:id
+DELETE /posts/:id
+```
+
+Попробуем выполнить запросы по аналогии с feedback.
+
+Создание:
+
+![](postman_post.png)
+
+Просмотр списка:
+
+![](postman_get_all.png)
+
+Просмотр подробностей:
+
+![](postman_get.png)
+
+Обновление:
+
+![](postman_put.png)
+
+Удаление:
+
+![](postman_delete.png)
+
+При этом в файле `db.json` всё время будут происходить изменения, инициированные запросами к API.
+
+## Подключение axios к frontend
+
+Axios – технология для вызова API-методов (по аналогии с Postman) для frontend-приложений.
+
+Устанавливается при помощи команды `npm install axios`.
+
+Использовать axios необходимо в функции `handleSend`.
+
+Сделайте это самостоятельно, используя следующие требования/подсказки:
+
+- Метод `handleSend` удобно поментить `async`.
+  В этом случае вызов `post(endpont, data)` из библиотеки `axios` можно пометить как `await`.
+- Собирать объект для отправки на бекенд надо прямо в методе `.post`, а не через отдельную контанту/переменную.
+- При ошибке (например, сервер недоступен) метод `axios.post` выбрасывает исключение.
+  Его надо ловить и каким-то образом показывать на экран.
+  Для этого можно использовать функцию `alert` или ошибку из пакета `react-toastify` (ставится отдельно).
+- В случае успеха надо также использовать отображение данных через `alert` или `toast`.
+- Метод не должен ничего выводить в консоль. Только для отладки. Код вывода в консоль перед сдачей лабораторной работы должен быть удалён.
+
+Пример отправки данных на сервер, который НЕ подходит под требования, но который работает:
+
+```jsx
+import axios from "axios";
+
+const handleSend = () => {
+  console.log(nameValue, textValue);
+  const data = {
+    name: nameValue,
+    text: textValue,
+  };
+  axios
+    .post("http://localhost:3000/feedback", data)
+    .then(() => alert("Данные отправлены, спасибо!"));
+};
+```
+
+## Проверка работы
+
+Убедитесь, что после отправки формы в файле `db.json` появляются указанные в полях ввода данные.
+Дополнительно убедитесь, что через Postman в методе GET также возвращаются эти же данные.
+
+Убедитесь, что при отключении json-server приложение React начинает выдавать ошибку отправки, правда спустя какое-то время (тайм-аут).
+
+## Дополнительные улучшения
+
+> За которые возможны доп. баллы.
+
+1. Вместо alert использовать react-toastify с правильно подобранными типами уведомлений: для ошибки - ошибка, для успеха - успех.
+2. Необходимо на время отправки данных блокировать (disabled) кнопку отправки и поля ввода.
+3. Если при отправке формы был получен успешный ответ от API, получать и выводить `id` созданной сущности.
+   Например, `Обращение №4ba0 зарегистрировано, спасибо!`

lwF5/README.md

@@ -0,0 +1,131 @@
+# Лабораторная работа №F5* - Базовые технологии WWW (HTML, CSS, JS)
+
+## Цель работы
+
+- Более глубокое изучение базовых технологий WWW: HTML, CSS, JS.
+- Изучение базовых правил работы с утилитой git.
+
+## Ход работы
+
+- Перед выполнением работы необходимо как минимум сдать лабораторные работы F3 и F4, т.к. работа будет основываться на этих работах.
+- Первый этап работы: организация рабочего пространства.
+- Затем необходимо создать репозиторий git и залить его на хостинг.
+- В репозитории необходимо создать как минимум по одному файлу HTML, CSS, JS и связать их друг с другом.
+  Также в репозиторий необходимо положить пример файла `db.json` для запуска json-server из л/р F4.
+- Необходимо повторить вёрстку (lwF3) и алгоритм отправки данных на сервер (lwF4) без использования react, axios, module css и typescript.
+- Для сдачи необходимо прислать репозиторий на проверку, затем продемонстрировать работу веб-приложения.
+
+## Настройка рабочего окружения
+
+На лабораторном (или личном) ПК должны быть установлены следующие программы:
+
+- Visual Studio Code: <https://code.visualstudio.com/download>;
+- Система контроля версий git: <https://git-scm.com/downloads>.
+
+Необходимые к установке расширения VS Code:
+
+- GitLens: <https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens>.
+  Необходимо для более тесной интеграции VS Code и git.
+- Live Server: <https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer>.
+  Необходим для запуска небольшого веб-сервера.
+  Без него не будет работать отправка данных на json-server из-за политик безопасности браузера.
+- HTML CSS Support: <https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css>.
+  Для поддержки подсказок с классами CSS в HTML-документе.
+- HTMLHint: <https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint>.
+  Для проверки, что разметка в HTML-документе указана корректно.
+
+## Создание репозитория git
+
+Происходит по адресу <https://git.is.ulstu.ru>, а точнее <https://git.is.ulstu.ru/repo/create> (после регистрации).
+
+Обязательно в описании репозитория укажите вашу фамилию и имя.
+Пример:
+
+![](gitea-create-repo.png)
+
+Далее на своём ПК создайте любой каталог, откройте его в VS Code, создайте пустой файл `README.md`.
+
+Далее в терминале ``(Ctrl + `)`` необходимо написать код, указанный на сайте в блоке "Создать новый репозиторий из командной строки", кроме строки 1.
+
+Пример:
+
+```
+git init
+git checkout -b main
+git add README.md
+git commit -m "first commit"
+git remote add origin https://git.is.ulstu.ru/v.moiseev/ip-lw-f5.git
+git push -u origin main
+```
+
+> Разберитесь с каждой командой из представленных выше.
+> Преподаватель может в рамках защиты лабораторной работы попросить объяснить смысл этих команд.
+
+После успешного выполнения команды на сайте должен отобразиться файл `README.md`:
+
+![](gitea-result.png)
+
+Всё.
+Среда разработки и репозиторий подготовлены для работы.
+Убедиться в этом можно на вкладке *Source Control* в VS Code:
+
+![](vs-code-git.png)
+
+## Создание набора файлов и базового шаблона для выполнения лабораторной работы
+
+Так как работа будет выполняться на базовых технологиях веб-разработки, необходимо создать следующие файлы:
+
+- `index.html`.
+  Здесь будет разметка HTML-документа, который будет представлять собой одностраничное приложение, разрабатываемое в рамках работ lwF1-lwF4.
+- `style.css`.
+  Здесь будут описаны правила стилизации элементов документа при помощи технологии каскадных таблиц стилей CSS.
+- `script.js`.
+  В этом файле будет описана логика получения данных с полей ввода и их отправка на json-server.
+
+> Почему основной HTML-документ называется index - прочитайте самостоятельно.
+
+Далее надо создать базовый шаблон в HTML-документе.
+Для этого можно воспользоваться Emmet-шаблонов `!`: ввести в файле `index.html` символ `!` и нажать на Enter.
+
+Далее необходимо подключить `style.css` и `script.js`.
+
+> Особенность подключения `script.js`.
+> Необходимо в тэге `script` указать атрибут `defer`, чтобы скрипт выполнялся уже после загрузки всего DOM-дерева.
+
+## Собственно выполнение лабораторной работы
+
+Дополнительные требования:
+
+- В HTML-документе должен быть определён favicon: изображение, которое отображается на вкладке с Вашим документом;
+- Ссылки в шапке (навигации) на разделы лендинга, как и в л/р F1, должны переносить пользователя на эти разделы;
+- Внешний вид страницы должен более-менее соответствовать макету из л/р F1.
+- Для получения данных с формы необходимо воспользоваться объектом `FormData`.
+- Для отправки данных на сервер почитайте и реализуйте вызов API через функцию `fetch`.
+
+Несколько советов:
+
+- Не забудьте каждому `input`-элементу задать атрибут `name`.
+- Для более тонкой настройки позиционирования элементов используйте `display: flex` и другие возможности flexbox.
+- Если нужно вставить картинки, их можно добавить в каталог `img`. Шрифты - `fonts`. Или подключить их через CDN.
+- Старайтесь понятия все правила стилизации в CSS, т.к. на защите это пригодится.
+  Рекомендуется использовать минимальный набор стилей для повторения макета от л/р F1.
+
+> Почитайте, что такое CDN и как оно может помочь или наоборот навредить.
+
+Источники:
+
+- <https://htmlbook.ru/>;
+- <https://learn.javascript.ru/>.
+
+## Коммит результата
+
+После этого необходимо при помощи вкладки *Source control* или командной строки добавить новый коммит в ваш репозиторий с файлами лабораторной работы, а потом выполнить `git push` (в VS Code есть кнопка *Sync*, которая делает push + pull).
+
+Что должно быть в итоге:
+
+- файл `README.md`;
+- файл `index.html`;
+- файл `style.css`;
+- файл `script.js`;
+- файл `db.json`;
+- возможно дополнительные файлы с изображениями, шрифтами, документами и пр.