This commit is contained in:
Vladislav Moiseev 2023-03-06 22:16:45 +04:00
parent 1403355431
commit e257e6f66e
9 changed files with 172 additions and 1 deletions

View File

@ -19,7 +19,7 @@
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md) * [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) * [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) * [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md) * [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md) * [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
Лабораторные работы на выбор: Лабораторные работы на выбор:

171
lw04/README.md Normal file
View File

@ -0,0 +1,171 @@
# Лабораторная работа №4 - Разворачивание локального веб-сервера (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>.
> Внимание! На текущий момент (март 2023) лучше устанавливать XAMPP 8 с PHP 8 внутри.
При установке не забудьте снять ненужные флажки:
![](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).

BIN
lw04/shell-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
lw04/shell-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
lw04/wp-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

BIN
lw04/wp-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

BIN
lw04/wp-3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

BIN
lw04/xampp-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
lw04/xampp-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB