Add lw04
@ -19,7 +19,7 @@
|
||||
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
||||
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
|
||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
|
||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/lw04/README.md)
|
||||
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
|
||||
|
||||
Лабораторные работы на выбор:
|
||||
|
171
lw04/README.md
Normal 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
After Width: | Height: | Size: 7.7 KiB |
BIN
lw04/shell-2.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
lw04/wp-1.png
Normal file
After Width: | Height: | Size: 82 KiB |
BIN
lw04/wp-2.jpg
Normal file
After Width: | Height: | Size: 64 KiB |
BIN
lw04/wp-3.jpg
Normal file
After Width: | Height: | Size: 174 KiB |
BIN
lw04/xampp-1.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
lw04/xampp-2.png
Normal file
After Width: | Height: | Size: 24 KiB |