Программное обеспечение компьютерных сетей и web-серверов

ПРОГРАММНОЕ 
ОБЕСПЕЧЕНИЕ 

КОМПЬЮТЕРНЫХ СЕТЕЙ

И WEB-СЕРВЕРОВ

Г.А. ЛИСЬЕВ
П.Ю. РОМАНОВ
Ю.И. АСКЕРКО

Москва

ИНФРА-М

2021

УЧЕБНОЕ ПОСОБИЕ

Рекомендовано Учебно-методическим советом СПО 

в качестве учебного пособия для студентов учебных заведений, 

реализующих программу среднего профессионального образования 

по укрупненным группам специальностей 

09.02.00 «Информатика и вычислительная техника» 

и 44.02.00 «Образование и педагогические науки»

УДК 004.4(075.32)
ББК 32.973-018.2я723
 
Л63

Лисьев Г.А.

Л63 
 
Программное обеспечение компьютерных сетей и web-серверов : 

учебное пособие / Г.А. Лисьев, П.Ю. Романов, Ю.И. Аскерко. — 
Москва : ИНФРА-М, 2021. — 145 с. — (Среднее профессиональное образование).

ISBN 978-5-16-014514-3 (print)
ISBN 978-5-16-107065-9 (online)
В учебном пособии предложена система учебных заданий, позволя
ющих ознакомиться с языками и системами web-программирования: HTML, 
JavaScript, PHP. Каждый пункт пособия представляет собой практическую 
работу, позволяющую реализовать отдельный фрагмент проекта. В результате 
последовательного изучения теории и выполнения практических заданий студенты создают макет web-сайта, который содержит упрощенную систему управления базами данных.

Изложение материала сопровождается большим количеством иллюстраций, 

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

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

по УГС 09.02.00 «Информатика и вычислительная техника» и 44.02.00 «Образование и педагогические науки», для студентов вузов, а также всех интересующихся прикладным web-программированием.

УДК 004.4(075.32)

ББК 32.973-018.2я723

Р е ц е н з е н т:

О.С. Логунова, доктор технических наук, профессор, заведующий кафедрой 

вычислительной техники и программирования Магнитогорского государственного технического университета имени Г.И. Носова

ISBN 978-5-16-014514-3 (print)
ISBN 978-5-16-107065-9 (online)

© Лисьев Г.А., Романов П.Ю., 

Аскерко Ю.И., 2018

А в т о р ы:

Г.А. Лисьев, кандидат педагогических наук, доцент, доцент кафедры обра
зовательных технологий и дистанционного обучения Южно-Уральского государственного гуманитарно-педагогического университета;

П.Ю. Романов, доктор педагогических наук, профессор, профессор ка
федры прикладной математики и информатики Магнитогорского государственного технического университета имени Г.И. Носова;

Ю.И. Аскерко, кандидат педагогических наук, доцент, доцент кафедры 

образовательных технологий и дистанционного обучения Южно-Уральского 
государственного гуманитарно-педагогического университета

Введение

Web-программирование является стремительно развивающейся 
областью программной индустрии. Особенности этого направления 
программирования связаны с многочисленными программными 
средами и языками, которые используются как на стороне клиента 
сети, так и на стороне сервера. Поэтому, несмотря на огромное количество интернет-ресурсов и иных справочников по разным разделам программирования в сетях, имеется потребность в интегрированном пособии, дающем возможность одновременно использовать различные механизмы и среды для создания рабочего проекта 
web-приложения.
Основой для создания пособия стал курс «Программное обеспечение компьютерных сетей и web-серверов», который в течение 
нескольких лет преподавался в Магнитогорском многопрофильном 
колледже при Магнитогорском государственном техническом университете им. Г.И. Носова. Отдельные темы и разделы дисциплины 
апробировались при проведении занятий в магистратуре (профиль 
«Информационные технологии в образовании») Южно-Уральского 
государственного гуманитарно-педагогического университета 
(г. Челябинск).
Данное пособие построено по технологии проектного обучения. 
В учебном пособии предложена система учебных заданий, позволяющих ознакомиться с языками и системами web-программирования: HTML, JavaScript, PHP. Каждый пункт пособия представляет 
собой практическую работу, позволяющую реализовать отдельный 
фрагмент проекта. В результате последовательного изучения 
теории и выполнения практических заданий студенты должны создать макет web-сайта, который содержит специфическую систему 
управления базами данных (СУБД). Программно- реализованные 
функции СУБД включают в себя основные операции с БД и таблицами в этих БД: создание, выбор, удаление, корректировка и др.
В пособии приведено большое количество иллюстраций, предлагаются упражнения и вопросы для самоконтроля, что позволяет 
использовать пособие для самообразования и повышения квалификации. Отдельной главой выделен Практикум, который дает 
возможность преподавателям создать собственный набор контролирующих материалов (фонд оценочных средств), включающий 
контрольные работы, тесты, курсовые работы, дипломные проекты.

В результате освоения материала пособия учащиеся будут:
знать
 
• технологии клиент-серверной организации вычислительных 
сетей;
 
• особенности объектно-ориентированного web-программирования;
 
• методы взаимодействия исполняемых программных кодов (сценариев) на стороне клиента и на стороне сервера приложения;
 
• возможности по организации интерактивного взаимодействия 
пользователя (клиента) с базами данных (сервером);
уметь
 
• создавать структуру взаимосвязанных html-страниц (webсайтов);
 
• устанавливать и настраивать локальные web-серверы для создания и отладки интерактивного сайта;
 
• создавать сценарии с активными элементами и соответствующим стилевым оформлением при помощи HTML;
 
• создавать и выполнять отладку программных кодов (сценариев) 
на языках JavaScript и PHP;
 
• создавать SQL-запросы к реляционным базам данных, реализованным в СУБД MySQL, с использованием функций PHP;
 
• использовать возможности MySQL и PHP для создания, идентификации и управления выделенными подмножествами пользовательских баз данных;
владеть
 
• методами создания web-страниц и размещения на них различных элементов (таблиц, фреймов, активных элементов);
 
• методами передачи параметров между web-страницами и приложениями (клиент-сервер);
 
• способами обработки событий, происходящих в активных элементах web-страниц;
 
• базовыми конструкциями структурного и объектно-ориентированного программирования для создания сценариев (программ) 
обработки событий и данных;
 
• методами интерактивного и программного (SQL-запросы) манипулирования данными в СУБД MySQL.
Пособие предназначено студентам, осваивающим дисциплины, 
связанные с информационными системами и технологиями, преподавателям информатики, а также всем интересующимся прикладным web-программированием.

Глава 1. 
ТЕХНИЧЕСКОЕ ЗАДАНИЕ ПРОЕКТА

1.1. ДИДАКТИЧЕСКАЯ ЦЕЛЬ ПРОЕКТИРОВАНИЯ

Дидактической целью является формирование профессиональных компетенций бакалавров и магистров, деятельность которых связана с проектированием, отладкой, эксплуатацией программных и технических средств, использующих web-технологии.
Формирование профессио нальных компетенций современного 
программиста (специалиста в информационных технологиях) — 
процесс непрерывный и обусловлен постоянными изменениями 
сред разработки, технологий передачи данных, изменениями в производительности вычислительных систем.
Компетенции определяются Федеральным государственным 
образовательным стандартом (ФГОС). Проект интегрирует 
формирование системы компетенций будущего программиста 
(общепрофессио нальных и профессио нальных).
Сформированные компетенции реализуются в дальнейшем 
в профессио нальной деятельности при выполнении трудовых 
функций программиста, определенных профессио нальным стандартом «Программист» [30] (рис. 1.1).

Рис. 1.1. Фрагмент профессио нального стандарта «Программист»

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

1.2. ТЕХНИЧЕСКАЯ ЦЕЛЬ ПРОЕКТИРОВАНИЯ
В результате реализации Проекта должен быть создан комплекс 
программных модулей (сценариев, скриптов) на языках HTML, 
PHP, JavaScript.
Комплекс выполняет следующие функции.
1. Создание баз данных (БД) по заданному имени в СУБД 
MySQL.
2. Вывод в окно (фрейм) списка созданных разработчиком БД 
и выбор БД для дальнейших действий.
3. Реализация с выбранной БД операций:
 
• удаление;
 
• действия с таблицами данной БД.
4. Выполнение с выбранной БД операций с таблицами:
 
• вывод списка таблиц;
 
• создание новой таблицы с фиксированными полями и новым 
именем;
 
• удаление выбранной таблицы;
 
• выбор таблицы для работы с записями.
5. Выполнение с выбранной таблицей действий:
 
• вывод на экран (фрейм) всех записей таблицы;
 
• вставка (INSERT) новых записей с вводом информации в поля;
 
• удаление выбранной записи (DELETE);
 
• редактирование выбранной записи.
Внешний вид полного экрана проекта в браузере может быть 
следующим (рис. 1.2).

Поле ввода 
имени БД 
для создания
Выбор действий с БД (dora)
Выбор действий с БД (dora)

Выбор действий 
с таблицами, которые 
находятся в БД (dora)

Список для выбора БД 
(выбрана dora)

Рис. 1.2. Внешний вид основного экрана Проекта

Программная реализация заявленных функций рассматривается 
последовательно, начиная с создания набора фреймов на экране 
браузера. Далее создаются отдельные модули проекта, которые реализуют объявленные функции. При создании модулей внимание 
обращается на использование различных инструмен тов программирования (HTML, JS, PHP) и взаимодействия с СУБД MySQL 
(функции PHP, SQL-запросы, обработчики событий на языке 
JavaScript).

Глава 2. 
ЛОКАЛЬНЫЙ WEB-СЕРВЕР И СЕРВЕРЫ 
ПРИЛОЖЕНИЙ ДЛЯ ОТЛАДКИ САЙТА

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

2.1. ПАКЕТ XAMPP

Цель работы: подготовить программную среду для работы над 
проектом.
Средства: доступ к интернету для загрузки пакета установки 
и развертывания локальной среды разработки (IDE): web-сервер, 
сервер баз данных, программная среда разработки.
Среда разработки будет использоваться в полной мере в разделе 
3.3. «Серверные приложения: среда PHP и СУБД MySQL». Для обучающихся, имеющих высокий уровень подготовки в базовом webпрограммировании (HTML, JavaScript), имеет смысл сразу обратиться к этому разделу.

Загрузка и установка XAMPP
Установочный пакет XAMPP загружается с сайта 
www.apachefriends.org/ru/index.html [3]. Внешний вид начальной 
страницы сайта показан на рис. 2.1.

Рис. 2.1. Сайт для загрузки установочного пакета XAMPP

Для корректной работы загружается версия пакета, соответствующая пользовательской ОС (Windows, Linux и др.). В пособии 
это версия для Win 32 (32-разрядная версия Windows, поддерживаемая в Windows 10). Имя файла: xampp-win32—7.1.1—0-VC14installer.exe
После установки на указанном диске будет создана система 
папок (каталогов) и файлов в папке /xampp (рис. 2.2).

Рис. 2.2. Содержимое папки /xampp после инсталляции пакета

Активизацию пакета и разрешение возможных проблем, которые могут возникнуть при установке и запуске XAMPP, рекомендуем провести по материалу, указанному в работе [46].
Для возобновления работы пакета можно использовать программу xampp-control.exe в головной папке /xampp. Она запускает 
контрольную панель управления пакетом. Возможные проблемы 
при ее работе указаны в работе [46]. Внешний вид настроенного 
и работающего локального сервера указан на рис. 2.3.

Рис. 2.3. Панель управления XAMPP

Настройки базовых серверов сайта:
Apache: порты 8080, 8443;
MySQL: порт 3306.
Такая настройка позволит избежать конфликтов с другими приложениями, особенно со Skype.
Запуск локального сервера после запуска и корректной настройки Панели управления XAMPP выполняется в адресной 
строке браузера (в пособии браузер по умолчанию — Яндекс): 
http://localhoct:8080.
Порт 8080 соответствует настройке. После удачного запуска локального web-сервера появляется страница (рис. 2.4).

Рис. 2.4. Начальная страница локального сервера XAMPP

Для дополнительной проверки работоспособности сервера 
и серверов приложений необходимо запустить phpMyAdmin 
(на рис. 2.4 указан стрелкой).
Фрагмент экрана начальной страницы phpMyAdmin показан 
на рис. 2.5.

Рис. 2.5. Начальная страница phpMyAdmin

Web-приложение phpMyAdmin выполняет функции Администратора БД для СУБД MySQL. Оно позволяет в интерактивном 
режиме создавать/удалять БД, создавать/удалять/корректировать 
таблицы внутри БД и многое другое. В пособии это приложение 
обеспечивает оценку выполняемого проекта в части работы с базами данных. Фактически реализация проекта позволяет обучающимся добиться понимания внутренней сущности работы Администратора БД phpMyAdmin будет активно использоваться обучающимися в главе 5 данного пособия.
В следующих разделах приводится цикл практических заданий 
и кодов программных модулей (скриптов, сценариев) на языках 
HTML, JavaScript, PHP. Рассматриваются практические решения 
взаимодействия на серверной стороне (в идеологии клиент-серверной технологии) с СУБД MySQL.
Для выполнения работ необходимо создать папку project, в которой будут находиться папки html, js, php. Их внешний вид показан на рис. 2.6.

Рис. 2.6. Структура папок Проекта (project)

Указанный путь соответствует размещению папок на «localhost» 
при использовании пакета XAMPP. Размещение «project» в заданной локации рекомендуется для упрощения выстраивания пути 
доступа к главному файлу сайта проекта (index.html). В нашем 
случае это будет строка: http://localhost:8080/project/index.html
.