/
Теги: информационные технологии вычислительная техника обработка данных микропроцессоры
ISBN: 978-5-4497-3244-6
Текст
А.В. Маркин
WEB-ПРОГРАММИРОВАНИЕ
Учебник
2-е издание
Москва
Ай Пи Ар Медиа
2024
УДК 004
ББК 32.97
М25
Автор:
Маркин А.В. ― канд. техн. наук, ст. науч. сотр., доц. кафедры
автоматизированных систем управления
Рязанского государственного радиотехнического университета
имени В.Ф. Уткина, почетный работник высшего
профессионального образования Российской Федерации
Маркин, Александр Васильевич.
М25
Web-программирование : учебник / А.В. Маркин. — 2-е изд. — Москва :
Ай Пи Ар Медиа, 2024. — 286 с. — Текст : электронный.
ISBN 978-5-4497-3244-6
Учебник представляет собой практическое руководство по созданию сайтов на
языке серверного web-программирования PHP. Описаны основные термины и понятия, характеризующие современный web, а также технологии, применяемые для webразработки, такие как HTML, CSS и PHP. Подробно рассмотрены синтаксис языка
PHP и его работа с протоколом передачи данных HTTP и системой управления реляционными базами данных Firebird. Также дано описание основного синтаксиса регулярных выражений и их применению в PHP-скриптах. Теоретический материал в полной мере проиллюстрирован примерами. Практикум позволяет самостоятельно закрепить и проверить полученные теоретические знания и приобрести практические
навыки в разработке современных web-сайтов.
Подготовлен в соответствии с Федеральным государственным образовательным
стандартом высшего образования.
Предназначен для студентов укрупненных групп направлений подготовки «Математика и механика», «Компьютерные и информационные науки», «Информатика и
вычислительная техника», изучающих дисциплины «Web-программирование», «Основы web-программирования», «Основы программирования web-сайтов».
Учебное электронное издание
ISBN 978-5-4497-3244-6
© Маркин А.В., 2021
© Оригинал-макет, оформление.
ООО Компания «Ай Пи Ар Медиа», 2024
Учебное издание
Маркин Александр Васильевич
Редактор М.В. Половникова
Технический редактор, компьютерная верстка А.В. Неверова
Корректор А.В. Полева
Обложка С.С. Сизиумовой
Подписано к использованию 05.07.2024. Объем данных 10 Мб.
ООО Компания «Ай Пи Ар Медиа»
8 800 555 22 35 (бесплатный звонок по России)
E-mail: sales@iprmedia.ru
ОГЛАВЛЕНИЕ
ПРЕДИСЛОВИЕ.................................................................................................... 9
ГЛАВА 1. ВВЕДЕНИЕ В WEB-ТЕХНОЛОГИИ ........................................... 11
1.1. Основные понятия ...................................................................................... 12
1.2. Web-страница и web-сайт .......................................................................... 14
1.2.1. Унифицированный идентификатор ресурса ................................... 15
1.2.2. Классификация web-сайтов ............................................................... 17
1.2.3. Этапы разработки web-сайтов ........................................................ 20
1.2.4. Современные требования к web-сайтам. Концепция Web 2.0 ....... 23
1.3. Протокол HTTP .......................................................................................... 24
1.3.1. HTTP-заголовки ................................................................................... 25
1.3.2. Формат HTTP-запроса ....................................................................... 26
1.3.3. Методы запросов ................................................................................ 27
1.3.4. Формат HTTP-ответа ....................................................................... 29
1.3.5. Коды состояний .................................................................................. 29
1.4. Web-браузер и web-сервер ........................................................................ 30
1.4.1. Пример взаимодействия web-сервера и web-браузера .................... 32
1.4.2. История развития web-браузеров..................................................... 33
1.4.3. Обзор web-браузеров ........................................................................... 35
1.5. Языки web-разработки ............................................................................... 37
1.5.1. Языки разметки .................................................................................. 37
1.5.2. Языки стилевого представления ....................................................... 40
1.5.3. Клиентские языки web-программирования ...................................... 41
1.5.4. Серверные языки web-программирования ........................................ 43
1.6. Программные комплексы web-технологий ............................................. 45
1.7. Системы управления контентом ............................................................... 48
1.8. Обзор программного обеспечения web-разработки ............................... 51
1.8.1. Фреймворки .......................................................................................... 52
1.8.2. Среда создания локального web-сервера .......................................... 52
1.8.3. Редактор программного кода............................................................ 59
1.8.4. Web-браузер ......................................................................................... 60
Контрольные вопросы........................................................................................... 61
4
ГЛАВА 2. ОСНОВЫ HTML ................................................................................ 62
2.1. Общие положения ........................................................................................ 63
2.2. Структура HTML-документа ...................................................................... 64
2.2.1. Объявление типа документа ............................................................... 65
2.2.2. Заголовок HTML-документа ................................................................ 66
2.2.3. Тело HTML-документа ......................................................................... 68
2.3. Средства форматирования текста ............................................................... 69
2.3.1. Гиперссылки ........................................................................................... 72
2.3.2. Escape-последовательности ................................................................ 73
2.3.3. Таблицы .................................................................................................. 74
2.3.4. Списки ..................................................................................................... 76
2.4. Работа с изображениями и мультимедиа ................................................... 79
2.4.1. Встраивание изображений .................................................................. 79
2.4.2. Встраивание мультимедиа .................................................................. 83
2.5. Формы ............................................................................................................ 87
2.5.1. Элемент INPUT ..................................................................................... 88
2.5.2. Элемент SELECT................................................................................... 90
2.5.3. Элемент TEXTAREA ............................................................................. 92
2.6. HTML5 ........................................................................................................... 93
2.6.1. Структура HTML5-документа ........................................................... 93
2.6.2. Пример валидного HTML5-документа................................................ 94
2.7. Верстка web-страниц.................................................................................... 96
Контрольные вопросы........................................................................................... 100
ГЛАВА 3. ОСНОВЫ CSS ................................................................................... 102
3.1. Общие положения ...................................................................................... 103
3.2. Встраивание CSS в HTML ......................................................................... 104
3.3. Правила CSS ............................................................................................... 105
3.3.1. Селекторы CSS .................................................................................... 106
3.3.2. Псевдоклассы и псевдоэлементы ...................................................... 108
3.3.3. Правила @ ............................................................................................ 111
3.3.4. Приоритеты CSS-правил ................................................................... 112
3.4. Свойства CSS .............................................................................................. 113
3.4.1. Свойства текста ................................................................................ 114
3.4.2. Свойства шрифта .............................................................................. 116
3.4.3. Свойства цвета и фона ...................................................................... 117
3.4.4. Свойства блока ................................................................................... 119
5
3.4.5. Свойства форматирования и позиционирования ............................ 122
3.4.6. Верстка web-страниц с помощью CSS ............................................. 125
Контрольные вопросы........................................................................................... 130
ГЛАВА 4. ОСНОВЫ PHP .................................................................................. 131
4.1. Общий синтаксис ....................................................................................... 132
4.2. Переменные и константы .......................................................................... 134
4.3. Типы данных ............................................................................................... 136
4.3.1. Скалярные типы .................................................................................. 137
4.3.2. Структурированные типы ................................................................ 140
4.3.3. Специальные типы .............................................................................. 141
4.3.4. Приведение типов ............................................................................... 141
4.4. Операторы ................................................................................................... 143
4.5. Управляющие конструкции ...................................................................... 146
4.5.1. Условные операторы .......................................................................... 146
4.5.2. Циклы .................................................................................................... 152
4.5.3. Конструкции включений ..................................................................... 156
4.6. Отладка PHP-скриптов .............................................................................. 157
Контрольные вопросы........................................................................................... 161
ГЛАВА 5. ФУНКЦИИ В PHP............................................................................ 162
5.1. Пользовательские функции ....................................................................... 162
5.1.1. Определение функции.......................................................................... 163
5.1.2. Передача функциям аргументов ....................................................... 164
5.1.3. Возвращение функциями значений .................................................... 166
5.2. Встроенные функции ................................................................................. 167
5.2.1. Функции для работы с переменными ................................................ 167
5.2.2. Математические функции ................................................................. 169
5.2.3. Функции обработки строк................................................................. 171
5.2.4. Функции для работы с массивами .................................................... 174
5.2.5. Функции даты и времени ................................................................... 175
5.2.6. Функции для работы с файловой системой ..................................... 176
Контрольные вопросы........................................................................................... 179
ГЛАВА 6. РАБОТА PHP И HTTP .................................................................... 180
6.1. Работа с формами ....................................................................................... 181
6.1.1. Метод GET .......................................................................................... 181
6
6.1.2. Метод POST ........................................................................................ 184
6.1.3. Загрузка файлов на сервер .................................................................. 187
6.2. Работа с Cookies.......................................................................................... 190
6.3. Работа с HTTP-заголовками ...................................................................... 192
6.4. Работа с сессиями ....................................................................................... 194
Контрольные вопросы........................................................................................... 198
ГЛАВА 7. РАБОТА PHP И FIREBIRD............................................................ 199
7.1. Основы SQL ................................................................................................ 199
7.1.1. Типы данных......................................................................................... 200
7.1.2. Операторы ........................................................................................... 201
7.1.3. Выражения .......................................................................................... 206
7.2. Функции PHP для работы с Firebird ......................................................... 208
7.3. Практическое использование Firebird в PHP-приложениях .................. 211
7.3.1. Создание базы данных и таблиц ....................................................... 211
7.3.2. Получение системных данных ........................................................... 212
7.3.3. Создание автоинкрементных полей ................................................. 215
7.3.4. Добавление данных .............................................................................. 216
7.3.5. Выборка данных .................................................................................. 219
7.3.6. Удаление данных ................................................................................. 220
7.3.7. Обновление данных ............................................................................. 222
7.3.8. Сортировка данных ............................................................................ 224
7.3.9. Постраничный вывод данных ............................................................ 226
7.3.10. Поиск в базе данных .......................................................................... 228
Контрольные вопросы........................................................................................... 233
ГЛАВА 8. РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В PHP ........................................ 233
8.1. Синтаксис регулярных выражений .......................................................... 234
8.1.1. Основные метасимволы ..................................................................... 234
8.1.2. Символьные классы ............................................................................. 236
8.1.3. Квантификаторы ............................................................................... 237
8.1.4. Модификаторы ................................................................................... 238
8.1.5. Подшаблоны......................................................................................... 238
8.1.6. Позиционные проверки........................................................................ 240
8.2. Функции PHP для работы с регулярными выражениями ...................... 240
Контрольные вопросы........................................................................................... 243
7
ГЛАВА 9. ЛАБОРАТОРНЫЙ ПРАКТИКУМ ............................................... 244
Лабораторная работа № 1. Изучение HTML и CCS ...................................... 244
Лабораторная работа № 2. Работа с web-сервером Apache.
Изучение синтаксиса PHP .................................. 247
Лабораторная работа № 3. Изучение работы PHP и HTTP ........................... 251
Лабораторная работа № 4. Изучение работы PHP и СУБД Firebird ............ 259
Лабораторная работа № 5. Регулярные выражения ....................................... 265
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ ..................................... 273
ПРИЛОЖЕНИЯ................................................................................................... 274
Приложение А. Методические указания к курсовой работе ............................ 274
Приложение Б. Установка и настройка Microsoft Visual Studio Code ............. 279
Приложение В. Установка и настройка Open Server ......................................... 281
Приложение Г. Установка и настройка СУБД Firebird ..................................... 282
Приложение Д. Учебный шаблон сайта.............................................................. 285
8
ПРЕДИСЛОВИЕ
Целью настоящего учебника является знакомство читателя с основными
терминами web-службы и технологиями, позволяющими разрабатывать современные web-сайты.
В главе 1 даются общие сведения о web-службе и web-технологиях, необходимые для понимания всего последующего материала. Здесь излагаются основные понятия и термины, рассматривается протокол передачи данных HTTP,
взаимодействие web-сервера и web-браузера, а также дается обзор современных
web-браузеров, языков web-программирования, систем управления контентом и
программного обеспечения (ПО), необходимого для web-разработки.
Глава 2 содержит основные сведения о языке гипертекстовой разметки
HTML, позволяющем создавать простейшие статические web-страницы. В этой
главе излагаются общие положения языка HTML и структура HTMLдокументов, а также рассматриваются вопросы синтаксиса языка, такие как
форматирование текста, работа с мультимедиа и создание web-форм. Кроме того, дается обзор обновленной версии языка HTML — HTML5 и описывается
верстка web-страниц с его помощью.
В главе 3 рассматривается механизм каскадных таблиц стилей CSS, применяющихся для форматирования внешнего вида web-страниц. Здесь приводятся основные понятия CSS и методы встраивания CSS в HTML-документы, подробно описывается синтаксис правил и свойств CSS.
В главе 4 излагаются основы серверного языка web-программирования
PHP, позволяющего создавать полноценные динамические web-страницы. Данная глава посвящена общему синтаксису языка и содержит сведения о типах
данных, переменных и константах, операторах и управляющих конструкциях.
Также здесь рассматриваются вопросы отладки PHP-скриптов.
Глава 5 освещает тему функций в РHP и содержит сведения о синтаксисе
и механизме использования пользовательских, а также описание встроенных
РHP-функций.
В главе 6 излагаются механизмы взаимодействия PHP-скриптов с протоколом передачи данных HTTP и рассматриваются такие вопросы, как обработка web-форм, работа с Cookies и HTTP-заголовками, а также использование сессий.
Глава 7 посвящена использованию баз данных в PHP-скриптах. Здесь рассматриваются основы построения запросов к базам данных на языке SQL, описываются особенности синтаксиса системы управления базами данных Firebird,
а также ее применение в PHP-скриптах на примере создания сайта-каталога.
9
Глава 8 содержит основные сведения о механизме регулярных выражений, их синтаксисе и PHP-функциях для работы с ними.
Материал сопровождается большим количеством как простых, так и достаточно сложных примеров. В конце каждой главы приводятся контрольные
вопросы, с помощью которых можно проверить усвоение теоретического материала, изложенного в соответствующей части учебника. Также для закрепления
теоретического материала в учебнике приведено описание лабораторных работ
и курсовой работы.
В приложении А содержатся методические указания к курсовой работе. В
приложениях Б, В и Г приведены руководства по установке и настройке ПО,
рекомендуемого для выполнения заданий настоящего издания. В приложении Д
учебника приведен учебный шаблон сайта, который может быть использован
для выполнения лабораторных работ и отработки начальных навыков webпрограммирования.
В результате освоения дисциплины обучающиеся должны:
1) знать:
• основы функционирования World Wide Web;
• язык гипертекстовой разметки HTML;
• технологию разделения содержимого и оформления с использованием
каскадных таблиц стилей CSS;
• основные технологии web-программирования;
• языковые конструкции PHP;
• технологии на основе языка PHP;
2) уметь:
• создавать статические HTML-страницы и применять таблицы стилей;
• устанавливать и настраивать веб-сервер Apache, серверы баз данных
Firebird и MySQL, платформу PHP;
• создавать клиентские скрипты и серверные приложения на языке PHP;
• использовать методы GET и POST для передачи и обмена данными;
• применять полученные знания для разработки web-сайтов;
3) владеть:
• практикой разработки базовых веб-приложений;
• устойчивыми навыками подключения web-приложения к базе данных с
целью хранения и обмена информацией между базой данных и приложением;
• навыками практического применения методов web-программирования;
Автор благодарит А.Ю. Баранова и С.С. Шкарина за большую помощь в
подготовке учебника.
10
ГЛАВА 1. ВВЕДЕНИЕ В WEB-ТЕХНОЛОГИИ
Современный мир немыслим без Интернета, и с каждым годом он получает все большее распространение (если в 2011 г. насчитывалось около 2 млрд
пользователей, то в 2020 г. число пользователей превысило 4 млрд). Интернет
сегодня предоставляет огромное число сервисов и услуг, позволяющих работать со всем спектром информационных ресурсов:
электронная почта (е-mail), обеспечивающая возможность обмена сообщениями одного человека с одним или несколькими абонентами;
телеконференции, или группы новостей (Usenet), обеспечивающие
возможность коллективного обмена сообщениями;
сервис FTP — система файловых архивов, обеспечивающая хранение и
пересылку файлов различных типов;
сервис Telnet, предназначенный для управления удаленными компьютерами в терминальном режиме и др.
Однако наиболее важным и значимым сервисом, принесшим Интернету
такую популярность, является сервис World Wide Web (WWW).
Сеть World Wide Web (Всемирная паутина, Web-служба, Web) — глобальное информационное пространство, основанное на физической инфраструктуре Интернета и протоколе передачи данных HTTP. Датой изобретения
web принято считать 1980 г., когда британский ученый Тим Бернерс-Ли, работающий тогда в Европейском совете по ядерным исследованиям (CERN), для
собственных нужд написал программу «Энквайр» («Дознаватель»), которая использовала случайные ассоциации для хранения данных и заложила концептуальную основу для Всемирной паутины.
Однако непосредственно рождение WWW как службы Интернета произошло лишь спустя 9 лет, в 1989 г. В то время Тим, работая в CERN над внутренней сетью организации, предложил глобальный гипертекстовый проект,
подразумевавший публикацию гипертекстовых документов, связанных между
собой гиперссылками. Им же в последствии были изобретены и все основные
технологии, без которых невозможно представить современный web — webбраузер, протокол HTTP, язык HTML и идентификаторы URI.
С 1994 г. большую часть работы по развитию Всемирной паутины взял на
себя основанный и до сих пор возглавляемый Тимом Бернерсом-Ли консорциум Всемирной паутины (W3C), разрабатывающий и внедряющий технологические стандарты для Интернета и Всемирной паутины [3].
11
Главное отличие web-службы от других сервисов Интернета заключается
в том, что она позволяет работать практически со всеми доступными видами
документов: текстовые файлы, изображения, звук и видео. Основная функция
WWW заключается в том, чтобы организовать всю имеющуюся в Интернете
информацию, а также локальную информацию по выбору пользователя как
набор гипертекстовых документов — web-сайтов и позволить пользователям
перемещаться между ними по ссылкам. Web-служба обеспечила пользователям
Интернета доступ к нужной им информации в любое удобное для них время,
заменив традиционные приемы работы с информацией: хранение ее в записных
книжках, раскладывание вырезок газет и журналов в картонные коробки и т.д.
Но web-служба не только предоставляет любому человеку возможность
быстрого поиска нужных данных и доступа к ним, но и позволяет ему выносить
на многомиллионную аудиторию пользователей Интернета собственную информацию, создавая свои web-сайты. Их создание, размещение, сопровождение, администрирование и просмотр осуществляется с помощью различных
web-технологий, которым посвящено издание.
В настоящей главе излагаются принципы работы Всемирной паутины и
основные понятия web-технологий, обозреваются программные средства для
просмотра и разработки web-сайтов, подробно рассматривается протокол передачи данных HTTP.
1.1. Основные понятия
Существует множество определений понятия технологии глобальной сети
WWW (web-технология). В первую очередь, web-технология — это концепция
работы с информацией. Как и другие информационные концепции, webтехнология имеет ряд особенностей:
техническая основа web-технологий — локальные и глобальные сети,
обычно Интернет;
применение особого типа клиентов — web-браузеров;
преимущественно текстовая и статично-графическая подача информации;
мгновенное отображение изменений, внесенных в web-документ;
неограниченное число потребителей;
активная работа поисковых машин;
бесплатная доставка и тиражирование контента;
12
универсальный и интуитивно понятный интерфейс между пользователем и компьютером;
высокая степень интеграции различных видов информационных ресурсов (текст, звук, видео и пр.), связанных между собой гипертекстовыми ссылками.
Рассмотрим основные понятия web-технологий.
Гипертекст — любой текст, в котором содержатся какие-либо ссылки на
другие фрагменты этого текста или на другой объект (файл, директория, приложение). Такие ссылки называются гиперссылками и в тексте выделяются
графически. Использование гипертекста в современных информационных системах во многом связано с тем, что он позволяет создавать механизм нелинейного просмотра информации. То есть данные предоставляются не в виде непрерывного потока текстовой информации, а набором взаимосвязанных компонентов, переход по которым осуществляется при помощи гиперссылок.
Контент — информация, размещенная на web-страницах.
Web-клиент (браузер) — программное обеспечение для просмотра webсайтов (для запроса контента web-страниц у web-сервера), их обработки, вывода и перехода от одной страницы к другой.
Web-сервер — программное и (или) аппаратное обеспечение, принимающее HTTP-запросы web-браузера и выдающее соответствующие web-ресурсы.
Web-технология — совокупность технических, коммуникационных и
программных средств для решения задач, организации совместной деятельности пользователей в сети Интернет, т.е. для просмотра, функционирования webсайтов и web-разработки.
Web-разработка — процесс создания web-сайта или web-приложения.
Web-приложение — любое приложение, в котором клиентом выступает
web-браузер, а сервером — web-сервер. Логика web-приложения распределена
между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, а обмен информацией происходит по сети.
Среди web-технологий, применяемых для web-разработки, выделяют
(рис. 1.1):
технологии описания документов, или технологии гипертекстовой разметки;
серверные технологии web-программирования;
клиентские технологии web-программирования.
13
Рис. 1.1. Классификация web-технологий
Важно понимать, что современные информационные системы, претендующие за место на рынке, реализуют все виды web-технологий.
Подробнее каждая из этих технологий и реализующие ее программные
средства рассматриваются в последующих разделах учебника.
1.2. Web-страница и web-сайт
Миллионы компьютеров, связанных через Интернет, хранят невообразимо огромные объемы информации, представленной в виде web-страниц.
Web-страницей, или web-документом, называется информационный ресурс, снабженный уникальным адресом, доступ к которому осуществляется через web-браузер. Как правило, страницы создаются с помощью языков разметки
и состоят из основного файла и некоторого количества ссылок на другие объекты разного типа: изображения, аудио и видео. Также они могут включать в себя
гиперссылки, содержащие информацию о других файлах, для быстрого перехода по web-страницам — web-серфинга. Во время web-серфинга web-браузер
находит указанные в гиперссылках страницы, интерпретирует все размещенные
на них указания и выводит информацию на экран.
14
Совокупность web-страниц и файлов, связанных между собой гиперссылками и объединенная под одним адресом (доменным именем или IP-адресом),
называется web-сайтом.
1.2.1. Унифицированный идентификатор ресурса
Браузер находит страницы и отдельные объекты по адресам специального
формата, называемым URI (Uniform Resource Identifier — унифицированный идентификатор ресурса). URI представляет собой стандартизованную
строку символов, указывающую местонахождение в Интернете абстрактного
или физического ресурса: документа, изображения, файла, службы, ящика
электронной почты и т.д. или его части. Примером URI-адреса может служить:
http://www.example.com:80/article/index.php?id=1&a=tp#key=value.
В нем можно выделить шесть частей.
1. Тип прикладного протокола доступа (в примере это http). Наиболее известные протоколы, используемые в сети Интернет:
HTTP (Hyper Text Transfer Protocol) — протокол передачи гипертекста.
Используется при пересылке web-страниц;
HTTPS (Hyper Text Transfer Protocol Secure) — расширение протокола
HTTP, поддерживающее шифрование; используется в безопасных соединениях;
FTP (File Transfer Protocol) — протокол передачи файлов со специального
файлового сервера на компьютер пользователя;
POP (Post Office Protocol) — стандартный протокол почтового соединения; предназначен для обработки запросов на получение почты от клиентских
почтовых программ;
SMTP (Simple Mail Transfer Protocol) — протокол, задающий набор правил для передачи почты;
telnet — протокол удаленного доступа; дает возможность пользователю
работать на любом компьютере сети Интернет как на своем собственном.
2. URL (Uniform Resource Locator — унифицированный указатель ресурса). Определяет имя сервера в системе DNS или IP-адрес, на котором хранится
нужный сетевой ресурс (в примере это www.example.com). Для несетевых ресурсов URL может опускаться.
3. Порт хоста для подключения — идентифицируемый номером системный ресурс, выделяемый приложению, выполняемому на некотором хосте, для
связи с другими приложениями. Как правило, порт хоста не указывается при
15
адресации и по умолчанию равен порту протокола прикладного уровня (в примере 80).
4. URN (Uniform Resource Name — унифицированное имя ресурса).
Определяет составное имя ресурса (путь к ресурсу) относительно главного каталога web-сервера (в примере это /article/index.php).
5. Параметры — строка, содержащая передаваемые на сервер параметры
(в примере это ?id=1&a=tp).
6. Якорь — идентификатор, ссылающийся на некоторую часть сетевого
ресурса (в примере это #key=value).
Появление адресов URI стало существенным нововведением в Интернете,
так как позволило максимально естественно производить адресацию ресурсов в
сети. Однако с момента его изобретения и по сей день стандарт URI обладает
несколькими серьезными недостатками.
Главный недостаток URI заключается в том, что в нем можно использовать только ограниченный набор символов: латинские буквы, буквы и некоторые знаки препинания. Символы кириллицы, иероглифы или специфические
символы перекодируются особым образом. Например, строка вида
http://www.example.com/article/Web
кодируется
в
URL
как
http://www.example.com/article/ %d0 %92 %d0 %b5 %d0 %b1. Такое преобразование происходит в два этапа: сначала каждый символ кодируется в Юникоде в
последовательность из двух байтов, затем каждый байт записывается в шестнадцатеричном представлении, а перед каждым кодом байта ставится знак процента:
В => d0 92 => %d0 %92
е => d0 b5 => %d0 %b5
б => d0 b1 => %d0 %b1
Поскольку такому преобразованию подвергаются буквы всех алфавитов,
кроме базовой латиницы, то URI со словами на подавляющем большинстве
языков (кроме английского, итальянского, латинского) может утратить способность восприниматься людьми. Эту проблему призван решить стандарт IRI (International Resource Identifier — международный идентификатор ресурсов),
принятый в 2005 г. Идентификаторы IRI почти идентичны URI, однако могут
содержать любые символы Юникода в чистом виде, без всякого кодирования. В
2011 г. стандарт IRI начал использоваться в системе доменных имен DNS.
Еще один существенный недостаток URI состоит в отсутствии гибкости.
Сетевые ресурсы Интернета могут изменяться и удаляться, а ссылки в виде URI
остаются, указывая на отсутствующие ресурсы. Для решения этой проблемы
16
были предложены постоянные локаторы PURL (Persistent Uniform Resource
Locator). В сущности, это те же URI, но они указывают не на конкретное место
расположения ресурса, а на запись в базе данных PURL, где, в свою очередь,
записан уже конкретный URI-адрес ресурса. При обращении к PURL сервер
находит нужную запись в этой базе данных и перенаправляет запрос уже на
конкретное местоположение ресурса. Если адрес ресурса меняется, то достаточно лишь изменить запись в базе данных.
1.2.2. Классификация web-сайтов
Изначально сайты представляли собой совокупность статических документов, например — сайт-визитка. По мере развития коммуникаций количество
внутренних и внешних ссылок увеличивалось. Сайт стал выполнять не только
роль справки, аннотации, но и функционального офиса, новостного или медийного центра. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев используется термин «webприложение» — готовый программный комплекс для решения задач сайта.
В большинстве случаев в Интернете одному сайту соответствует одно
доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Однако возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов
используют крупные сайты (web-порталы), чтобы логически отделить разные
виды
предоставляемых
услуг
(mail.google.com,
news.google.com,
maps.google.com). Нередки и случаи выделения отдельных доменов для разных
стран или языков. Например, google.ru и google.fr логически являются сайтом
Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов.
Существует большое количество различных классификаций web-сайтов.
Рассмотрим некоторые из них.
1. По используемым технологиям различают статические и динамические
сайты, а также флэш-сайты.
Статические сайты — это сайты, сделанные по технологии HTML. Webстраницы таких сайтов написаны полностью на языке HTML и имеют расширение .htm или .html. Статическими они называются потому, что, набирая URIадрес, соответствующий сайту или его определенной странице, пользователь
всегда будет видеть одно и то же содержание. Специалисты, отвечающие за со-
17
здание и поддержку статического сайта, создают в формате HTML каждую
страницу в отдельности, включая ее оформление и содержание.
Преимущества статического сайта:
- быстрота разработки;
- низкая стоимость разработки;
- малая требовательность к техническим характеристикам web-сервера.
Недостатки:
- низкий функционал: все, что может такой сайт — это показывать статичные web-страницы;
- высокая стоимость сопровождения при наличие большого количества
страниц.
Динамические сайты — это сайты, созданные на основе скриптов различных серверных технологий, динамически генерирующих HTML-код. Содержание и вид динамической страницы с одним и тем же адресом может быть
совершенно различным в зависимости от разных условий. Скрипты, которые
используются для формирования динамических web-страниц, могут быть написаны на разных языках (PHP, Perl, ASP.NET и т.д.). Такие сайты могут предоставлять пользователям интерактивность — например, вводить различные запросы и осуществлять поиск по сайту, отправлять на сайт и сохранять свою
собственную информацию и многие другие функциональные возможности.
Преимущества динамического сайта:
- высокая функциональность;
- легкость управления web-сайтом;
- высокая масштабируемость;
- низкая стоимость обслуживания и сопровождения web-сайта.
Недостаток: более высокая по сравнению со статическими web-сайтами
стоимость разработки.
Флэш-сайты — это сайты, сделанные по технологии Flash. Данная технология позволяла создавать очень красивые, интерактивные сайты со звуком и
анимацией, которые выглядели на порядок эффектнее, чем обычные HTMLсайты. Однако сложность и трудоемкость их изготовления, большой вес страниц, а также невозможность индексирования в поисковых службах привели к
тому, что флэш-сайты не получили широкого распространения. В 2020 г. компания Adobe официально заявила о прекращении поддержки Flash Player. Вслед
за этим крупные интернет-корпорации: Google, Facebook, Microsoft, Mozilla и
др. поддержали это решение и объявили о прекращении поддержки плагина
Flash в своих браузерах с начала 2021 г. К слову, компания Apple полностью
18
прекратила поддержку Flash еще в 2014 г. в пользу технологий HTML5 и
WebGL.
2. По принадлежности различают сайты персональные, коммерческих и
некоммерческих организаций.
Персональные сайты — такими сайтами владеет и осуществляет поддержку один человек, например, http://www.tema.ru/main.html. Большинство
web-сайтов сегодня являются персональными.
Сайты коммерческих организаций — это сайты, предназначенные для
ведения бизнеса компаниями и рекламы своих товаров и услуг, например,
http://www.sony.ru. Различают сайты-визитки, промо-сайты и сайты электронной коммерции.
Сайты некоммерческих организаций — это сайты государственных,
образовательных учреждений, научно-исследовательских институтов, общественных движений и т.д., например, http://www.gov.ru.
3. По величине и уровню решаемых задач сайты можно разделить на простые, тематические, а также тематические порталы.
Простые сайты — такие сайты содержат немного информации и обычно
состоят всего из нескольких страниц.
Тематические сайты — такие сайты могут быть довольно большими и
подробно освещать какой-либо вопрос, предоставляя пользователям Интернета,
интересующимся определенной темой, возможность получить по ней полезную
и детальную информацию.
Тематические порталы — это очень большие web-ресурсы, которые
предоставляют исчерпывающую информацию по определенной тематике. Порталы похожи на тематические сайты, но дополнительно содержат средства взаимодействия с пользователями и позволяют пользователям общаться в рамках
портала (форумы, чаты).
4. По типу информации и возможностям для пользователей, различают
сайты, предоставляющие контент, сайты для онлайн-контактов и общения, сайты электронной коммерции и сайты, предоставляющие онлайн-сервисы.
Сайты, предоставляющие контент — это информационнотематические, новостные, развлекательные сайты, сайты-библиотеки, сайтыбазы определенного рода документов, разнообразные сайты-справочники, онлайн-энциклопедии и словари, сайты, обобщающие информацию о других сайтах, и т.д., например, http://www.world-art.ru.
19
К этому же типу относятся сайты-каталоги, создающиеся, как правило,
для демонстрации своей продукции крупными организациями или для учета
разного рода коллекций, например, каталоги музыки или фильмов.
Сайты для онлайн-контактов и общения — это разнообразные чаты,
форумы, доски объявлений, социальные сети, службы знакомств, биржи труда,
сайты, предназначенные для поддержки общения пользователей между собой, и
т.д., например, http://vk.com.
Сайты электронной коммерции — это интернет-магазины, сайты банков, электронных платежных систем, сайты обменных пунктов валют и прочие
сайты, предоставляющие платные услуги, например, http://www.ozon.ru.
Сайты, предоставляющие онлайн-сервисы. К ним относят хостинг (для
сайтов, гостевых, форумов, чатов, блогов, файлов и т.п.), почтовый и поисковый сервис, онлайн-перевод web-страниц и т.д., например, http://www.google.ru.
5. По физическому расположению бывают:
общедоступные сайты сети Интернет;
локальные сайты — сайты, доступные только в пределах локальной сети (корпоративные сайты организаций, сайты частных лиц в локальной сети
провайдера).
6. По доступности сервисов различают открытые, полуоткрытые и закрытые сайты.
Открытые. Все сервисы, которых полностью доступны для любых посетителей и пользователей, например, http://wikipedia.org.
Полуоткрытые. Для доступа к сервисам которых необходимо зарегистрироваться (обычно бесплатно), например, http://www.intuit.ru.
Закрытые. Полностью закрытые служебные сайты организаций (в том
числе корпоративные сайты), личные сайты частных лиц, например,
http://fido20.ru. Такие сайты доступны для узкого круга людей, а доступ новым
людям обычно дается через инвайты (приглашения).
1.2.3. Этапы разработки web-сайтов
Изготовление web-сайтов как работающих целостных информационных систем — составной процесс, вовлекающий труд различных специалистов. Этот вид
деятельности называется web-разработкой и состоит из многих этапов.
Создание технического задания. На этом этапе менеджер проекта составляет договор с заказчиком, в котором излагаются его пожелания относительно визуального представления и структуры сайта, указывается на ошибки в
20
старой версии сайта, приводятся примеры сайтов конкурентов. Исходя из договора, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком.
Проектирование базы данных — первостепенный этап при разработке
крупных динамических web-сайтов, во многом предопределяющий их будущий
функционал и работоспособность. На этом этапе архитекторы баз данных разрабатывают их структуру, связи между таблицами, проводят нормализацию. В
качестве программного обеспечения используются такие средства проектирования баз данных, как Erwin, DBDesigner Fork, Open ModelSphere, Sybase Power
Designer, 1С-Битрикс и пр.
Web-дизайн. На этом этапе дизайнеры в соответствии с техническим заданием создают в графическом редакторе макеты шаблонов страниц. Макет
шаблона представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка. Дизайнеры
определяют, каким образом конечный потребитель будет получать доступ к
информации и услугам сайта, т.е. занимается непосредственно разработкой
пользовательского интерфейса. В большинстве случаев страницы включают в
себя графические элементы. Их подготовкой занимаются художникииллюстраторы, фотографы, технические дизайнеры, шрифтовики и т.д.
Верстка. Здесь верстальщики получают макеты шаблонов в виде простых
изображений (в формате JPEG или PNG) или разбитых по слоям (в PSD или
AI), создают код web-страницы, используя язык гипертекстовой разметки
(раньше HTML, XHTML, XML; сейчас HTML5), и оформляют его с помощью
встроенных средств языка разметки, либо же с помощью каскадных таблиц
стилей CSS. Задача этого этапа — получить из графических макетов статические гипертекстовые web-страницы с подготовленными для Интернета изображениями. В качестве программного обеспечения на данном этапе используются
текстовые редакторы или визуальные редакторы html. Если необходимости в
интерактивности страниц сайта нет, то процесс web-разработки завершается.
Иначе наступает этап программирования.
Web-программирование. На этом этапе программисты, используя готовые шаблоны страниц и указания дизайнеров по работе и организации элементов сайта, создают программную основу сайта с помощью языка webпрограммирования (PHP, Perl, Python, Ruby, JavaScript), или фреймворка. Разница между ними заключается в том, что фреймворки, помимо возможности со-
21
здавать приложения, предоставляют программисту различные библиотеки, значительно упрощающие создание программ и сайтов.
Тестирование. Здесь программисты совместно с дизайнерами проверяют
сайт в работе на своем локальном сервере: от соответствия техническому заданию, правильности ссылок, работоспособности в различных условиях до проверок защищенности. Затем к тестированию приступает группа внештатных тестеров, которая вносит необходимые корректировки, доводя сайт до финального состояния.
Размещение сайта в Интернет. На этом этапе файлы готового сайта
размещаются на web-сервере, постоянно находящемся в сети Интернет. Процедура размещения называется деплой (от англ. to deploy) — развертывать, а сервер — хостинг-провайдером. Хостинг (англ. hosting) — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно находящемся
в сети (обычно Интернет). Хостинговая компания (также: хостер, хостингпровайдер, web-хостер, HSP (Hosting Service Provider)) — компания, занимающаяся предоставлением услуг размещения оборудования, данных и web-сайтов
на своих технических площадках (хостинг). Одним из важных критериев выбора хостинг-провайдера является используемая операционная система, поскольку от этого зависит программное обеспечение, которое будет поддерживать
функциональность тех или иных сервисов. Также важным аспектом описания
хостинга является поддержка тех или иных служб и возможностей: языков webпрограммирования, баз данных и пр. Все хостинги делятся на платные, поддерживающие большое количество web-технологий и оснащенные мощным
серверным оборудованием, и бесплатные, ограниченные в функционале и характеристиках. Некоторые платные хостинг-провайдеры предоставляют бесплатный тест на определенный период, по истечении которого пользователь
должен определиться, подходит ли для него выбранная хостинговая компания и
имеет ли смысл оплачивать большие периоды.
Наполнение контентом. Здесь администраторы наполняют сайт контентом: текстом, изображениями, файлами для скачивания и т.д.
Сдача проекта. На этом этапе заказчик просматривает готовый проект и,
если его все устраивает, то подписывает документы о сдаче проекта. На этом
же этапе проводится обучение заказчика навыкам работы в администраторской
зоне сайта.
В зависимости от объема и функционала web-сайта разработка может состоять из разного числа этапов. Так, для создания простого статического сайта,
состоящего из нескольких HTML-страниц, потребуется лишь разработать ди22
зайн и произвести верстку, а для крупных информационных порталов может
потребоваться весь цикл web-разработки.
1.2.4. Современные требования к web-сайтам.
Концепция Web 2.0
В настоящее время доступ в Интернет можно получить с самых разных
устройств, начиная с компьютеров и мобильных телефонов и заканчивая телевизорами и мультимедийными плеерами. Поэтому к современным web-сайтам
предъявляются серьезные требования.
Строгое соблюдение web-стандартов — позволяет обеспечить корректное отображение web-страниц на всех аппаратных платформах. Это правило
также требует отказа от устаревших и закрытых web-технологий. Устаревшие
технологии ограничивают возможности разработчиков, закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмоймонополистом, которая не всегда прислушивается к мнению интернетсообщества. К таким технологиям можно отнести, например, Adobe Flash и MS
ActiveX.
Обеспечение полноты и удобства наполнения web-страниц. Структура
web-страниц должна быть хорошо продумана, чтобы посетители сразу могли
найти на них все, что им нужно. Страницы должны быть удобными и легко читаться.
Обеспечение доступности web-страниц. Страницы должны быть как
можно более компактными для более быстрой загрузки по сети. Они не должны
быть чересчур сложными, так как для ее обработки и вывода потребуется
большой объем времени и системных ресурсов. Также web-страницы не должны требовать никакого дополнительного программного обеспечения — для их
вывода должно быть достаточно только web-браузера.
Эти правила в полной мере отражены в так называемой концепции
Web 2.0, активно развивающейся в настоящее время. Помимо этих правил, Web
2.0 выдвигает четыре принципа, являющихся краеугольными в современном
web-дизайне.
1. Разделение содержимого, представления и поведения webстраницы. Здесь содержимое — это информация, которая выводится на webстранице, представление описывает формат вывода этой информации, а поведение — реакцию web-страницы или отдельных ее элементов на действия посетителя. Благодаря их разделению разработчик может править, например, со23
держимое, не затрагивая представление и поведение, или поручать создание
содержимого, представления и поведения разным людям. Этот принцип в полной мере соответствует концепции MVC, которая будет рассмотрена в дальнейшем.
2. Подгружаемое содержимое. Вместо обновления всей web-страницы
пользователь может подгружать только ее часть, содержащую необходимую
информацию. Это уменьшает объем передаваемой по сети информации и позволяет выполнять какие-либо действия с данными после их подгрузки.
3. Генерируемое содержимое. Некоторая часть web-страницы может не
загружаться по сети, а генерироваться прямо в web-браузере. Это еще больше
сокращает сетевой трафик, передаваемый по сети.
4. Семантическая разметка данных. Она позволяет связать выводимые
на web-страницу данные согласно каким-либо правилам. К примеру, можно семантически связать страницы справочника, и посетитель, загрузив какую-либо
страницу, сможет сразу перейти на связанные с ней страницы, содержащие дополнительные или родственные сведения.
Web 2.0 не является новой версией Всемирной паутины, а лишь определяет иной, более комплексный подход к организации, реализации и поддержке
web-приложений, продолжая при этом использовать технологии и стандарты
Web 1.0. Поэтому доступ к web-страницам, разработанным согласно концепции
Web 2.0, также осуществляется по протоколу HTTP, а их просмотр с помощью
web-браузера.
1.3. Протокол HTTP
HTTP (HyperText Transfer Protocol) — прикладной протокол передачи
гипертекста, обеспечивающий доступ к сетевым ресурсам. Основная задача
протокола состоит в установлении связи с web-сервером и обеспечении доставки HTML-страниц web-браузеру клиента посредством HTTP-сообщений. Независимо от вида сообщения (запрос браузера или ответ сервера) каждое HTTPсообщение имеет один и тот же формат, состоящий из трех разделов:
Строка «запрос/ответ» — определяет тип сообщения.
HTTP-заголовок — характеризуют тело сообщения, параметры передачи
и прочие сведения.
HTTP-тело — непосредственно данные сообщения. Обязательно должно
отделяться от заголовков пустой строкой (символ ¶).
24
Содержимое этих разделов зависит от того, является ли сообщение запросом или ответом.
В отличие от многих других протоколов, HTTP не сохраняет своего состояния. Это означает отсутствие сохранения промежуточного состояния между парами запрос — ответ. Компоненты, использующие HTTP (web-браузер и
web-сервер), могут самостоятельно осуществлять сохранение информации о состоянии, связанным с последними запросами и ответами. Так, браузер, посылающий запросы, может отслеживать задержки ответов, а сервер может хранить IP-адреса и заголовки запросов последних клиентов.
1.3.1. HTTP-заголовки
HTTP-заголовок — строка в HTTP-сообщении, содержащая служебную
информацию о web-браузере (в случае HTTP-запроса) или о запрашиваемом ресурсе (в случае HTTP-ответа).
HTTP-сообщение может включать в себя несколько заголовков, каждый
из которых содержит описание блока информации, а также значение этого блока, разделенное двоеточием. Многие из заголовков являются обязательными, поэтому протокол HTTP требует указывать окончание передачи заголовочной информации с помощью пустой строки.
Все заголовки делятся на четыре основные группы:
1) общие заголовки (general-headers) могут присутствовать как в запросе,
так и в ответе;
2) заголовки запросов (request-headers) присутствуют только в запросе;
3) заголовки ответов (response-headers) присутствуют только в ответе;
4) заголовки сущности (entity-headers) относятся к телу сообщения и
описывают его содержимое. Наиболее важные заголовки приведены в табл. 1.1.
Таблица 1.1
HTTP-заголовки
Заголовок
Connection
Date
Pragma
Transfer-Encoding
Назначение
Общие заголовки
Указывает серверу на завершение (close) или продолжение (keepalive) сеанса
Дата и время формирования сообщения
Специальные, зависящие от реализации команды, касающиеся
передаваемого содержимого (например, no-cache)
Способ кодирования сообщения при передаче (например, utf-8,
koi-8r)
25
Accept
Accept-Charset
Accept-Encoding
Host
If-Modified-Since IfMatch If-None-Match
If-Range If-UnmodifiedSince
Range
User-Agent
Age
Location
Retry-After
Server
Allow
Content-Encoding
Content-Length
Content-Type
Etag
Expires
Last-Modified
Заголовки запроса
Типы содержимого, которое клиент способен разработать и может воспроизвести
Кодировки символов, в которых клиент может принимать текстовое содержимое
Способ, которым сервер может закодировать сообщение
Хост и номер порта, с которого запрашивается документ
Заголовки запроса для условного обращения к ресурсу
Запрос части документа
Название программного обеспечения клиента
Заголовки ответа
Число секунд, через которое нужно повторить запрос для получения нового содержимого
URI ресурса, к которому нужно обратиться для получения содержимого
Дата и время или число секунд, через которое нужно повторить
запрос, чтобы получить успешный ответ
Название программного обеспечения сервера, приславшего ответ
Заголовки сущности
Перечисляет поддерживаемые сервером методы
Способ, которым закодировано тело сообщения, например, с целью уменьшения размера
Длина сообщения в байтах
Тип содержимого и, возможно, некоторые параметры
Уникальный тег ресурса на сервере, позволяющий сравнивать
ресурсы
Дата и время, когда ресурс на сервере будет изменен и его нужно
получать заново
Дата и время последней модификации содержимого
1.3.2. Формат HTTP-запроса
Первой строкой в каждом HTTP-запросе является строка запроса, содержащая три блока информации:
1) метод;
2) путь от сервера к запрашиваемому ресурсу (идентификатор ресурса);
3) номер версии протокола HTTP.
26
Пример строки запроса:
GET /index.php HTTP/1.1
Метод (в примере GET) используется для того, чтобы указать серверу,
как обрабатывать данный запрос. Наиболее распространены три метода: GET,
POST и HEAD. Если в строке HTTP-запроса используется метод POST, то в
HTTP-теле содержатся любые данные, которые отправляются серверу. В противном случае тело HTTP-запроса пустое.
Идентификатор ресурса (/index.php) показывает путь к запрашиваемому
ресурсу относительно главного каталога web-сервера, адрес которого указывается в обязательном заголовке Host.
Версия (HTTP/1.1) представляет собой пару разделенных точкой арабских цифр. Текущая версия протокола, принятая в июне 1999 г., позволила реализовать режим «постоянного соединения». В данном режиме TCP-соединение
может оставаться открытым после отправки ответа на запрос, что позволяет посылать несколько запросов за одно соединение.
Пример HTTP-запроса, который браузер посылает серверу, показан на
рис. 1.2.
Рис. 1.2. Пример HTTP-запроса
1.3.3. Методы запросов
HTTP-метод — последовательность из любых символов, кроме управляющих и разделителей, указывающая на основную операцию над ресурсом. Познакомимся с основными методами протокола http.
OPTIONS — используется для запроса информации о параметрах соединения (методах, типах документов, кодировках), которые поддерживает сервер
для запрашиваемого ресурса. Если идентификатор запрашиваемого ресурса —
звездочка («*»), то запрос предназначен для обращения к серверу в целом.
27
GET — позволяет получить информацию, связанную с запрашиваемым
ресурсом. Если идентификатор запрашиваемого ресурса указывает на документ, то сервер возвращает содержимое этого документа (содержимое файла).
Если идентификатор запрашиваемого ресурса указывает на директорию (каталог, папку), то, в зависимости от настроек сервера, может быть возвращено либо содержимое директории (список файлов), либо содержимое одного из файлов, находящегося в этой директории (как правило, index.html). В случае запроса папки ее имя может указываться как с символом «/» на конце, так и без него.
Разновидностями метода GET является «условный GET» («conditional
GET») и «частичный GET» («partial GET»). Условный GET запрашивает передачу объекта, только если он удовлетворяет условиям, описанным в приведенных заголовках. Частичный GET запрашивает передачу только части объекта.
Запросы типа GET считаются идемпотентными — многократное повторение одного и того же запроса GET должно приводить к одинаковым результатам (при условии, что сам ресурс не изменился за время между запросами).
Это позволяет кэшировать ответы на такие запросы.
HEAD — идентичен методу GET, за исключением того, что сервер не
возвращает в ответе тело сообщения. Запрос HEAD обычно применяется для
извлечения метаданных, проверки наличия ресурса (валидация URI) и чтобы
узнать, не изменился ли он с момента последнего обращения.
POST — применяется для передачи пользовательских данных заданному
ресурсу. При этом передаваемые данные включаются в тело запроса. Метод
POST не считается идемпотентным, т.е. многократное повторение одних и тех
же запросов POST может возвращать разные результаты. Сообщение ответа
сервера на выполнение метода POST не кэшируется.
PUT — применяется для загрузки содержимого тела запроса на указанный в запросе URI. Различие методов POST и PUT заключается в понимании
предназначений URI ресурсов. Метод POST предполагает, что по указанному
URI будет производиться обработка передаваемого клиентом содержимого.
Метод PUT же предполагает, что загружаемое содержимое соответствует находящемуся по данному URI ресурсу. Сообщения ответов сервера на метод PUT
не кэшируются.
DELETE — удаляет ресурс, имеющий запрашиваемый идентификатор.
TRACE — возвращает полученный запрос так, что клиент может увидеть, какую информацию промежуточные серверы добавляют или изменяют в
запросе.
Каждый web-сервер обязан поддерживать как минимум методы GET,
HEAD и POST.
28
1.3.4. Формат HTTP-ответа
Первой строкой в каждом HTTP-ответе является строка ответа, содержащая два блока информации:
1) номер версии HTTP;
2) код состояния HTTP-запроса, который указывает на успешное или безуспешное выполнение данного запроса.
Пример строки ответа:
HTTP/1.1 200 OK
Пример HTTP-ответа, который сервер посылает браузеру, показан на
рис. 1.3.
Рис. 1.3. Пример HTTP-ответа
Если запрос был успешным, то тело HTTP-ответа содержит HTML-код
(вместе с каким-либо сценарием, выполняемым на стороне клиента), готовый
для интерпретации браузером, иначе сервер генерирует сообщение об ошибке
на основании кода состояния.
1.3.5. Коды состояний
Код состояния HTTP является частью первой строки ответа сервера. Он
представляет собой целое число из трех арабских цифр. Первая цифра указывает на класс состояния. За кодом ответа обычно следует отделенная пробелом
поясняющая фраза на английском языке, которая разъясняет причину именно
такого ответа.
Выделяют пять классов кодов состояния:
1хх Informational (Информационные) — коды, информирующие о процессе передачи.
29
2хх Success (Успешно) — коды, информирующие об успешном принятии
и обработке запроса клиента. В зависимости от статуса сервер может еще передать заголовки и тело сообщения.
3xx Redirection (Перенаправление) — коды, сообщающие клиенту, что
для успешного выполнения операции требуется произвести следующий запрос
к другому URI. В большинстве случаев новый адрес указывается в заголовке
Location, а клиент осуществляет автоматический переход.
4xx Client Error (Ошибка клиента) — коды, предназначенные для указания ошибок со стороны клиента. При использовании всех методов, кроме
HEAD, сервер должен вернуть в теле сообщения гипертекстовое пояснение для
пользователя.
5xx Server Error (Ошибка сервера) — коды, информирующие о неудачном выполнении операции по вине сервера. Для всех ситуаций, кроме использования метода HEAD, сервер должен включать в тело сообщения объяснение,
которое клиент отобразит пользователю.
1.4. Web-браузер и web-сервер
Web-служба представляет собой распределенный сервис, построенный на
архитектуре клиент — сервер. Это предполагает наличие клиента, отправляющего запросы, сервера, обрабатывающего эти запросы, и протокола, по которому клиент и сервер взаимодействуют.
Клиентская часть web-службы, или web-браузер, представляет собой приложение, которое устанавливается на компьютере конечного пользователя и
одной из важных функций которого является поддержание графического пользовательского интерфейса. Через этот интерфейс пользователь получает доступ
к широкому набору услуг, главной из которых является web-серфинг, включающий поиск и просмотр страниц, навигацию между уже просмотренными
страницами, переход по закладкам и хранение истории посещений. Помимо
средств просмотра и навигации, web-браузер предоставляет пользователю возможность манипулирования страницами, а именно:
сохранение их в файле на диске компьютера;
вывод на печать;
передача по электронной почте;
контекстный поиск в пределах страницы;
30
изменение кодировки и формата текста, а также множество других
функций, связанных с предоставлением информации на экране и конфигурирование самого браузера.
Значительную часть своих функций web-браузер выполняет в тесной кооперации с web-сервером. Как уже отмечалось ранее, клиент и сервер связываются через сеть специальным протоколом передачи данных HTTP. Это означает, что в клиенте web-службы реализована клиентская часть HTTP, а на сервере — серверная часть HTTP.
Как и любой другой сервер, web-сервер должен быть постоянно в активном состоянии, прослушивая порт 80 протокола HTTP. Как только сервер получает запрос от клиента, он устанавливает соединение и получает от клиента имя
объекта, после чего находит в своем каталоге этот файл, а также другие связанные с ним объекты и отсылает клиенту. Получив объекты от сервера, webбраузер отображает их на экране, после чего соединение с сервером разрывается. В дополнительные функции сервера входят также аутентификация клиента
и проверка прав доступа данного клиента к запрашиваемой web-странице.
Для повышения производительности некоторые web-серверы прибегают к
кэшированию наиболее часто используемых в последнее время страниц в своей
памяти. Когда приходит запрос на какую-либо страницу, сервер, прежде чем
считывать ее с диска, проверяет, не находится ли она в буферах более быстрой
оперативной памяти. Кэширование страниц осуществляется и на стороне клиента, а также на промежуточных серверах (прокси-серверах). Кроме того, эффективность обмена данными с клиентом иногда повышают путем компрессии
(сжатия) передаваемых страниц. Объем передаваемой информации уменьшают
также за счет того, что клиенту передается не весь документ, а только та часть,
которая была изменена. Все эти приемы повышения производительности webслужбы реализуются средствами протокола HTTP.
К наиболее популярным сегодня web-серверам относят:
• Apache — бесплатный и самый распространенный web-сервер, занимающий около половины рынка;
• Nginx — свободный web-сервер, пользующийся большой популярностью на крупных проектах. На данный момент активно развивается, занимает
около 25 % всего рынка;
• Internet Information Services (IIS) — web-сервер от Microsoft, распространяемый с серверными ОС семейства Windows;
• Google Web Server — web-сервер, разработанный компанией Google.
Однако следует также отметить, что web-браузер не является единственным видом клиента, который может обратиться к web-серверу. Эту роль могут
31
исполнять любые программы и устройства, поддерживающие протокол HTTP, а
также мобильные телефоны — для доступа в этом случае применяется специальный протокол WAP (Wireless Application Protocol — протокол беспроводных приложений).
1.4.1. Пример взаимодействия web-сервера и web-браузера
Взаимодействие web-сервера и браузера можно продемонстрировать на
примере вызова статической web-страницы (рис. 1.4). Пример рассматривается
на уровне «клиент — сервер», т.е. не затрагивая такие вопросы, как передача
данных по сети, формирование пакетов и преобразование доменных имен.
Взаимодействие можно представить в виде последовательности шагов.
1. Пользователь с помощью web-браузера вводит URI-адрес требуемой
web-страницы или переходит по гиперссылке.
2. Web-браузер извлекает адрес сервера из URI и устанавливает с ним соединение. Используя это соединение, браузер через протокол HTTP отсылает
GET-запросы web-серверу, содержащие помимо адреса страницы и все необходимые для него заголовки. В случае если пользователь загружает на сервер
свою информацию, то соответствующие данные записываются в тело запроса.
Рис. 1.4. Взаимодействие web-сервера и браузера
32
3. Web-сервер считывает запрос, обрабатывает (извлекает имя запрашиваемой web-страницы и связывает его с соответствующим файлом) и ищет этот
файл в сетевом каталоге своей файловой системы.
4. Web-сервер отсылает браузеру, используя установленное соединение,
GET-ответ, в теле которого размещается найденный файл web-страницы, и
снабжает его своими заголовками.
5. Браузер получает ответ от сервера и анализирует файл web-страницы,
чтобы определить, есть ли в нем вставленные файлы (графика, звук, видео). В
случае их обнаружения браузер отправляет web-серверу несколько HTTPзапросов (по одному на каждый нужный файл).
6. Получив HTTP-запросы, сервер находит каждый из файлов и отсылает
их web-браузеру (по одному файлу на запрос).
7. Web-браузер берет исходный файл web-страницы и следует инструкциям, предоставляемым HTML-дескрипторам в нем, чтобы скомпоновать webстраницу и содержимое вставленных файлов в завершенный web-документ, который затем отображает на экране. На этом соединение между браузером и сервером закрывается.
1.4.2. История развития web-браузеров
История зарождения web-браузеров относится к концу 80-х гг. прошлого
века, когда Тим Бернерс-Ли, разработав целый ряд web-технологий, заложил
основу для первого в мире web-браузера, названного им WorldWideWeb (впоследствии переименованного в Nexus). WWW появился в 1991 г. и был текстовым одномерным браузером, способным отображать только одну страницу за
один момент времени. Браузер распространялся бесплатно и имел открытые
исходные коды, что принесло ему огромную популярность и привело к бурному росту подобных приложений.
15 мая 1992 г. увидел свет первый графический web-браузер —
ViolaWWW. Это был первый браузер, обладающий графическим интерфейсом
и способный отображать изображения, размещенные на web-страницах. А уже
через полгода стараниями программиста Марка Андерсена, работавшего в американском Национальном центре суперкомпьютерных приложений (NCSA),
был выпущен браузер Mosaic, вызвавший ошеломляющий интерес к Всемирной
паутине и ставший прародителем практически всех современных webбраузеров. В 1994 г., на волне успеха Mosaic, Марк Андерсен открыл свою собственную компанию Netscape и выпустил Mosaic-подобный браузер Netscape
33
Navigator, унаследовавший большинство функций своего предшественника.
Широкий функционал (в браузере была поддержка всевозможных плагинов, а
также встроенный почтовый клиент и HTML-редактор) и интуитивно понятный
пользовательский интерфейс принесли браузеру огромную популярность. В результате чего к 1994 д. Netscape Navigator на рынке web-браузеров составляла
около 90 %.
В 1995 г. Microsoft принялась за разработку своего браузера (названного
впоследствии Internet Explorer), также взяв за основу Mosaic. Однако, ввиду
схожего с Netscape функционала и его большой распространенности, IE не мог
занять какую-либо значительную часть рынка web-браузеров. Все изменилось в
1996 г., когда Microsoft решила поставлять свой браузер вместе с операционной
системой Windows. Это существенно укрепило позиции IE на рынке и привело
к так называемой «браузерной войне», поделившей тогдашнюю Всемирную паутину на два практически равных лагеря — «нетскейповский» и «майкрософтовский». Дело в том, что оба браузера-конкурента совершенно по-разному
подходили к изображению web-страниц и были абсолютно несовместимыми.
Пытаясь вернуть утраченные позиции, Netscape выпустили в 1998 г. бесплатно
распространяемый браузер с открытыми исходниками Mozilla. Но огромная
популярность платформы Windows предопределила победу IE, который к
2002 г. владел уже 95 % рынка. А в 1998 г., после трехлетней войны с Microsoft,
Netscape объявил себя банкротом и ушел с рынка браузеров.
Тем не менее, когда в начале 2000-х гг. Интернет начали поражать первые
эпидемии вирусных «червей», стало очевидно, что IE вместе с Windows изобилует программными уязвимостями, и его применение сопряжено с угрозой безопасности для компьютера. Еще одна проблема заключалась в том, что IE не
поддерживал полностью такие основополагающие для web стандарты, как
HTML и CSS. Поэтому в это же время активно стали развиваться альтернативные проекты web-браузеров, такие как вышеупомянутая Mozilla, Opera (хотя
первоначальная версия была разработана еще в 1996 г.), Safari (разработанный
компанией Apple в 2003 г.) и Google Chrome (выпущенный в 2008 г.). Все они
акцентировались на безопасности, кроссплатформенности, открытости, внедрении новых технологий (использование вкладок, жестов, менеджеров загрузки
файлов, средств шифрования данных и пр.) и поддержке web-стандартов. Это
привело к усилению конкуренции на рынке браузеров и уменьшению доли IE
на нем.
К 2021 г. рынок web-браузеров выглядит следующим образом: более
60 % — Google Chrome, около 20 % — Safari, 5 % — Mozilla Firefox, в районе
34
2–3 % имеют такие, ранее популярные браузеры, как Microsoft Edge (Internet
Explorer) и Opera [4].
Также следует отметить активное развитие отечественного продукта —
«Яндекс Браузера», на данный момент он занимает около 20 % российского
рынка [5].
1.4.3. Обзор web-браузеров
Web-браузеры классифицируются:
по типу интерфейса:
- графические браузеры (все вышеперечисленные);
- текстовые браузеры (Alynx, ELinks, Links, Lynx, w3m, Netrik, WebblE);
по режиму доступа:
- online-браузеры (все вышеперечисленные) — осуществляют доступ к
web-страницам непосредственно из сети Интернет;
- offline-браузеры (HTTrack, Offline Explorer, Teleport Pro, WebZip) —
позволяют просматривать только сохраненные копии web-сайтов или их частей.
Все современные браузеры являются графическими и представляют собой комплексные приложения для обработки и вывода web-страниц и предоставления интерфейса между web-сайтом и пользователем. Главными характеристиками web-браузеров, как информационных систем, являются:
производительность;
надежность;
функциональность.
Производительность браузера определяется скоростями работы движка
рендеринга и интерпретатора JavaScript. Движок рендеринга является самой
важной частью любого браузера и выполняет такие задачи, как чтение HTML,
формирование на его основе объектной модели документа DOM (Document
Object Model) и ее визуализацию. Составным блоком, отвечающим за интерпретацию HTML-разметки, является парсер HTML и CSS. Однако почти все
разработчики браузеров используют собственные движки рендеринга. Однозначно определить лидера по производительности среди браузеров невозможно — один быстрее обрабатывает HTML, другой JavaScript, третий лучше работает с памятью.
Надежность браузера зависит от двух факторов — наличия уязвимостей
в браузерных плагинах (Adobe Flash, Java и пр.) и открытости исходных кодов,
позволяющей находить эти уязвимости. Именно поэтому Internet Explorer и
35
Mozilla Firefox (изначально являющийся открытым браузером) наименее
надежны среди других браузеров. Наиболее надежным, из-за закрытости и относительно небольшой распространенности, принято считать браузер Opera.
Функциональность браузера определяется такими факторами, как поддержка операционных систем, web-технологий и интернет-протоколов, наличие
плагинов, модулей и пр. Сравнительный анализ функционала современных
(на 2020 г.) web-браузеров приведен в табл. 1.2.
Таблица 1.2
Сравнительный анализ web-браузеров
Функционал
Стоимость
Windows
Mac OS X
Linux
Android
UNIX
Вкладки
Менеджер
закачек
Панель поиска
Проверка
орфографии
Блокировка
баннеров
Фильтр фишинга
CSS3
Фреймы
Java
JavaScript
HTML5
FTP
Microsoft Edge
Mozilla
Google
(Internet
Safari
Firefox
Chrome
Explorer)
Бесплатен
Бесплатен
Бесплатен
Бесплатен
Поддержка операционных систем
Да
Да
Да
Да
Нет
Да
Да
Да
Нет
Да
Да
Нет
Да
Да
Да
Да
Нет
Да
Да
Нет
Функциональные модули
Да
Да
Да
Да
Да
Да
Да
Да
Opera
Бесплатен
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Плагин
Да
Да
Да
Да
Да
Да
Да
Поддержка web-технологий и интернет-протоколов
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Плагин
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Частично
36
Да
Да
Да
Да
Да
Да
1.5. Языки web-разработки
Существует множество языков, используемых в web-разработке, но все
их можно разделить на четыре группы:
языки гипертекстовой разметки, представляющие статическую часть
страницы;
языки стилевого представления содержимого страницы;
серверные языки web-программирования, работающие на стороне сервера;
клиентские языки web-программирования, работающие на стороне
клиента (на том компьютере, где запущен web-браузер, воспроизводящий страницу на экране).
Выбор того или иного языка осуществляется на самых первых этапах работы над web-приложением и зависит от его объема, задач и функционала, а
также от программных и аппаратных возможностей самих разработчиков. Как
правило, в современных web-приложениях используются как серверные, так и
клиентские языки web-программирования.
1.5.1. Языки разметки
Язык разметки (текста) в компьютерной терминологии — набор символов или последовательностей, вставляемых в текст для передачи информации о
его выводе или строении. Текстовый документ, написанный с использованием
языка разметки, содержит не только сам текст (последовательность слов и знаков препинания), но и дополнительную информацию о различных его участках — например, указание на заголовки, выделения, списки и т.д. Различают
логическую и визуальную разметки. В первом случае речь идет только о том,
какую роль играет данный участок документа в его общей структуре (например, «данная строка является заголовком»). Во втором определяется, как именно будет отображаться этот элемент (например, «данную строку следует отображать жирным шрифтом»). Идея языков разметки состоит в том, что визуальное отображение документа должно автоматически получаться из логической
разметки и не зависеть от его непосредственного содержания.
Современная web-служба содержит огромное количество различных по
структуре, содержанию и оформлению web-страниц. Однако все они разработаны с использованием того или иного языка разметки.
С точки зрения web-разработки язык разметки — это набор специальных инструкций, называемых тегами, предназначенных для формирования
37
структуры web-страницы и определения отношений между различными элементами этой структуры. Теги языка, или, как их иногда называют, управляющие дескрипторы, определенным образом кодируются, выделяются относительно основного содержимого web-страницы и служат в качестве инструкций
для браузера, производящего показ содержимого страницы пользователю.
Наиболее известными языками разметки, связанными с web-разработкой,
являются SGML, HTML, XML и XHTML.
SGML (Standard Generalized Markup Language) — общий язык разметки, утвержденный в 1986 г. организацией ISO в качестве международного стандарта. Но ввиду некоторой своей сложности SGML использовался, в основном,
для описания синтаксиса других языков разметки, и немногие приложения работали с SGML-документами напрямую. SGML определяет допустимый набор
тегов, их атрибуты и внутреннюю структуру документа. Контроль за правильностью использования дескрипторов осуществляется при помощи специального набора правил, называемых DTD-описаниями, которые используются программой клиента при разборе документа. Для каждого класса документов определяется свой набор правил, описывающих грамматику соответствующего
языка разметки. С помощью SGML можно описывать структурированные данные, организовывать информацию, содержащуюся в документах, представлять
эту информацию в некотором стандартизованном формате.
HTML (HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов, разработанный Тимом Бернерсом-Ли приблизительно в 1989–1991 гг. в качестве составной части webслужбы. Являясь упрощенной версией SGML, язык HTML позволял определять
оформление элементов документа, имея при этом некий ограниченный набор
тегов, при помощи которых осуществлялся процесс разметки. Инструкции
HTML, в первую очередь, предназначены для управления процессом вывода
содержимого документа на экране web-браузера и определяют этим самым способ представления документа, но не его структуру. В качестве элемента гипертекстовой базы данных, описываемой HTML, используется текстовый файл, который может легко передаваться по сети с использованием протокола HTTP.
Эта особенность, а также то, что HTML является открытым стандартом, и
огромное количество пользователей может применять возможности этого языка
для оформления своих документов, безусловно, повлияли на рост популярности
HTML и сделали его сегодня главным механизмом представления информации
в WWW.
38
Однако активно развивающиеся web-приложения нуждались не только в
языке представления данных на экране клиента, но и в механизме, позволяющем определять структуру документа, описывать содержащиеся в нем элементы. HTML обладал несложным набором команд и вполне успешно справлялся с
задачей описания текстовой информации и отображением ее на экране браузера. Однако сами отображаемые данные никак не связаны с теми тегами, которые используются для форматирования, поэтому у программ-анализаторов нет
возможности использовать теги HTML для поиска нужных пользователю фрагментов документа.
Другим существенным недостатком HTML можно назвать ограниченность набора его тегов. DTD-правила для HTML определяют фиксированный
набор дескрипторов, и поэтому у разработчика нет возможности вводить собственные, специальные теги. Хотя постепенно появляются новые расширения
языка, но долгий путь их стандартизации, сопровождаемый постоянными разногласиями между основными производителями браузеров, делали практически
невозможной быструю адаптацию языка, его использование для отображения
специализированной информации (например, мультимедиа, математических,
химических формул и т.д.).
Из-за этих недостатков, вскоре после выхода HTML 4.01 в 1999 г., разработчики перестали поддерживать данный стандарт гипертекстовой разметки,
популярность начал набирать другой язык — XHTML.
XML (eXtensible Markup Language — расширяемый язык разметки) — это язык разметки, созданный на основе SGML в 1996 г. и фактически
представляющий собой свод общих синтаксических правил. Этот язык используется в качестве средства для описания грамматики других языков и контроля
за правильностью составления документов.
XML сам по себе не содержит никаких тегов, предназначенных для разметки, а просто определяет порядок их создания. Таким образом, у разработчиков появляется уникальная возможность определять собственные команды,
позволяющие им наиболее эффективно определять данные, содержащиеся в документе. Автор документа создает его структуру, строит необходимые связи
между элементами, используя те теги, которые удовлетворяют его требованиям, и добивается такого типа разметки, который необходим ему для выполнения операций просмотра, поиска, анализа документа.
XML позволяет также осуществлять контроль за корректностью данных,
хранящихся в документах, производить проверки иерархических соотношений
внутри документа и устанавливать единый стандарт на структуру документов,
39
содержимым которых могут быть самые различные данные. Это означает, что
его можно использовать при построении сложных информационных систем, в
которых очень важным является вопрос обмена информацией между различными приложениями, работающими в одной системе.
XHTML (eXtensible Hypertext Markup Language — расширяемый
язык разметки гипертекста) — язык разметки web-страниц на основе XML,
разработанный в 2000 г. для сокращения разрыва между HTML и XML и как
промежуточный этап между ними.
XHTML сохраняет все особенности HTML, но вносит более строгие правила создания страниц — все теги должны быть закрыты, имена тегов и атрибутов должны быть записаны строчными буквами. XHTML являлся основным
языком гипертекстовой разметки в течение 14 лет, до 2014 г. Его возможности
позволяли создавать независимые от устройства отображения страницы, в результате чего они корректно показывались во всех браузерах и платформах того
времени.
HTML5 — последний и самый современный язык структурирования и
представления содержимого Всемирной паутины. И, хотя, четвертая версия
HTML была выпущена еще в прошлом веке, в 2014 г. разработчики представили HTML5. Пятая версия вобрала в себя все самое лучшее от своих предшественников: возможности XHTML в мульти-платформенности, но в то же время
не такие строгие правила разметки; работу с различными типами данных и документами, как в XML и т.д. HTML5 также улучшил взаимодействие с медиаданными (видео, аудио, замена плагинов Adobe Flash и т.д.), в нем был добавлен единый API для всех сложных web-приложений.
На данный момент HTML5 является единственным повсеместно используемым стандартом для представления web-страниц. Исходя из этого, в настоящем курсе будет представлена работа именно с HTML5.
Применение языков разметки не ограничивается разработкой web-страниц.
Они используются везде, где требуется вывод форматированного текста. Например, в типографии, интерфейсах приложений или текстовых редакторах.
1.5.2. Языки стилевого представления
Языки стилевого представления — языки для форматирования статичных
данных web-страницы, представленных языками разметки. В начале 2000-х гг. за
первенство в стилевом представлении боролись сразу несколько языков стилей,
но в настоящее время все это семейство представлено всего лишь одним, безоговорочным лидером — CSS.
40
CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет
прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили
используются для создания и изменения стиля элементов web-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также
могут быть применены к любому виду XML-документа, в том числе XML, SVG
и XUL. Отделяя стиль представления документов от содержимого документов,
CSS упрощает создание web-страниц и обслуживание сайтов [1].
Существует также фреймворк Bootstrap [17], который реализует настройку стилей страницы при помощи специальных библиотек JavaScript. Данная система очень широко применяется web-разработчиками, но в настоящем учебнике она не рассматривается.
1.5.3. Клиентские языки web-программирования
При использовании языков программирования, работающих на стороне
клиента, HTML-код запрошенной страницы с встроенным в него клиентским
скриптом (кодом программы) передается web-сервером браузеру как обычный
статический объект, а затем браузер выполняет этот код (с помощью встроенного интерпретатора языка), создает с его помощью динамическое содержание
страницы и выводит ее на экран. Такой подход к формированию динамических
web-страниц обладает целым рядом преимуществ:
данные обрабатываются непосредственно браузером и не отправляются
на сервер, что значительно ускоряет работу web-приложений и загрузку webстраниц. Производительность также увеличивается из-за того, что клиентские
скрипты не всегда требуют перезагрузки страницы;
для выполнения клиентских скриптов не требуется никакого дополнительного программного обеспечения, так как их поддержка реализована непосредственно в HTML;
за пользование клиентскими языками компании, предоставляющие хостинг, не требуют платы;
имеется возможность динамически изменять стиль и содержание webстраниц зависимости от характеристик браузера пользователя;
клиентские языки позволяют реагировать на различные события, совершенные пользователем (движение курсора мыши, нажатие клавиш и пр.);
клиентские скрипты являются кроссплатформенными, так как не зависят от конкретной операционной системы пользователя.
41
Однако присутствует и один существенный недостаток. Результат выполнения клиентских скриптов зависит от браузера пользователя. Это позволяет
легко просматривать и изменять в браузере исходные коды скриптов или же
вообще отключать их. Поэтому использовать клиентские языки webпрограммирования для решения задач, связанных с безопасностью данных, категорически не рекомендуется.
Одними из самых известных клиентских языков программирования являются: JavaScript, VBScript, ActionScript.
VBScript (Visual Basic Scripting Edition) — скриптовый язык программирования, интерпретируемый компонентом Windows Script Host. Был создан
компанией Microsoft как замена устаревшему пакетному языку, интерпретируемому приложением command.com. В начале 2000-х пользовался большой популярностью, позволял работать с графическими объектами на webинтерфейсе, обладал большими объектно-ориентированными возможностями.
Но вскоре технологию приняли устаревшей, последняя версия данного языка
вышла в 2008 г., на данный момент язык не используется.
ActionScript — объектно-ориентированный язык программирования, разработанный Гари Гроссманом в 1998 г. в качестве программируемой среды для
платформы Macromedia Flash.
Среди конкурентов ActionScript был уверенным лидером, обладал рядом
преимуществ перед другими клиентскими языками программирования, например наличием виртуального компилятора на движке Flash Player, что позволяло
создавать тяжелые web-приложения, браузерные игры и многое другое. Так как
поддержка Flash Player современными браузерами прекратилась в 2020 г., ActionScript покидает просторы Интернета.
JavaScript — мультипарадигменный язык программирования с динамической типизацией, может использоваться как в объектно-ориентированной, так
и в императивной и функциональной методологиях. Изначально данный язык
программирования создавался только для браузера, поэтому обладает полной
интеграцией с HTML/CSS, имея возможность изменять DOM-дерево. Возможности JavaScript зависят от окружения, в котором он работает. Например,
Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д. На этой платформе написаны API для создания чатботов популярных мессенджеров, таких как «ВКонтакте» и Telegram.
В настоящее время JavaScript является самым популярным языком из семейства клиентских, широко применяемым в web-разработке.
42
1.5.4. Серверные языки web-программирования
При использовании серверных языков программирования запрашиваемая
web-страница сначала обрабатывается на сервере (выполняются все связанные
с ней скрипты) и только потом возвращается к пользователю в виде файла, не
содержащего уже никаких серверных скриптов. К преимуществам такого подхода по формированию динамических web-страниц сравнительно с клиентскими скриптами следует отнести:
исходный код серверных скриптов недоступен для просмотра через
web-браузер, т.е. защищен от взлома;
серверные скрипты позволяют передавать данные серверу и получать
от него ответ;
позволяют взаимодействовать с базами данных, значительно увеличивающими функциональность web-приложений;
выполнение серверных скриптов нельзя отключить в браузере, что
обеспечивает корректную работу web-приложений в любое время.
Возможности серверных скриптов довольно богаты. Они могут, например, обрабатывать данные с форм, генерировать динамические страницы или
осуществлять запросы к базе данных. С помощью серверных скриптов можно
создавать гостевые книги, чаты, опросы, хранить защищенные паролем данные. Также ни один интернет-магазин не обходится без серверных скриптов — с их помощью пользователь может рассчитать общую стоимость покупки, вносить изменения в свою покупательскую «корзину», фиксировать
время, дату заказа и т.п.
Главный же недостаток серверных скриптов заключается в их низкой
производительности. Прежде чем выполниться, скрипт должен быть откомпилирован или интерпретирован сервером с помощью дополнительного программного обеспечения, которое к тому же может быть платным. Другой недостаток серверных скриптов в том, что они, в отличие от клиентских, не позволяют динамически менять содержимое web-страницы, не перезагрузив ее.
К наиболее распространенным технологиям web-программирования,
предназначенным для создания серверных скриптов, относят:
PHP;
ASP.NET;
Perl;
Ruby.
43
PHP (Hypertext Preprocessor) — скриптовый язык программирования
общего назначения, препроцессор гипертекста.
Язык PHP был создан в 1994 г. датским программистом Расмусом Лердорфом и представлял собой набор скриптов на языке Perl для вывода и учета посетителей его сайта. Набор был назван Personal Home Page (персональная домашняя страница) и позволял лишь обрабатывать шаблоны HTML-документов.
Вскоре функциональности и производительности Perl перестало хватать, вследствие чего PHP был переписан на языке C и назван PHP/FI (Personal Home
Page/Form Interpreter — персональная домашняя страница/интерпретатор
форм). PHP/FI отличался от прародителя более простым и понятным синтаксисом и включал всю базовую функциональность современного PHP.
PHP широко применяется в web-разработке и обладает большим набором
встроенных средств для разработки web-приложений — взаимодействие с
большинством систем управления базами данных, работа с Cookies и сессиями,
обработка загружаемых на сервер файлов, автоматизированная отправка HTTPзаголовков, работа с локальными и удаленными файлами и сокетами и мн. др.
Также PHP, начиная с пятой версии, поддерживает широкие объектноориентированные возможности и позволяет использовать различные библиотеки классов, такие как PEAR и PECL, расширяющие его функционал.
В настоящее время PHP благодаря своей простоте, скорости выполнения,
богатой функциональности, кроссплатформенности и распространению исходных кодов является одним из лидеров среди языков программирования, применяющихся для создания динамических web-сайтов.
Perl (Practical Extraction and Report Language — практический язык
для извлечения данных и составления отчетов) — скриптовый язык программирования общего назначения, созданный Ларри Уоллом в 1987 г. как система для отчетов в Usenet-конференциях Unix-систем.
Perl был первоначально разработан для манипуляций с текстом (обладает
очень глубоким механизмом регулярных выражений), но на данный момент используется для выполнения широкого спектра задач, в том числе и в webразработке. Являясь предком PHP, Perl имеет схожий с ним синтаксис и функционал, но из-за своей общей направленности проигрывает ему в скорости выполнения web-приложений и обладает меньшим числом применимых в webразработке встроенных функций.
ASP.NET (Active Server Pages) — технология создания web-приложений
и web-сервисов от компании Microsoft, разработанная в 1997 г. программистами
Марком Андерсом и Скоттом Гутри, работавшими также над web-сервером IIS.
44
ASP.NET — развитие более старой технологии Microsoft ASP, но имеет
ряд отличительных особенностей. Код для ASP.NET можно писать, используя
практически любые языки программирования, в том числе и входящие в комплект .NET Framework (C#, VisualBasic.NET и JScript.NET). ASP.NET имеет
преимущество в скорости по сравнению со скриптовыми технологиями (PHP,
Perl), так как при первом обращении код компилируется и помещается в специальный кэш и впоследствии только исполняется.
Ruby — полностью объектно-ориентированный интерпретируемый язык
высокого уровня. Был разработан в 1993 г. японским программистом Юкихиро
Мацумото и предназначался для написания простых и понятных программ, некритичных к скорости выполнения. По синтаксису Ruby близок к Perl, а также
имеет некоторые общие черты с Python, LISP и Dylan. Ruby позволяет разрабатывать web-приложения, используя для этого написанный на этом языке
фреймворк Ruby on Rails. Он предоставляет каркас модель-представлениеконтроллер (Model-View-Controller) для web-приложений, а также обеспечивает
их интеграцию с web-сервером и сервером базы данных.
1.6. Программные комплексы web-технологий
С увеличением требований, предъявляемых разрабатываемым webприложениям, функциональности языков web-программирования становится
недостаточно. Рассмотрим, например, разработку интернет-магазина. Безусловно, добавление интерактивных элементов с помощью языков webпрограммирования позволит пользователям выбирать товары и совершать покупки. Но с ростом числа покупателей контролировать работу магазина станет
все труднее. А реализовать некоторые функции, такие как просмотр предыдущих покупок и сортировку товаров, средствами только языков программирования вообще невозможно. Для решения такого рода задач используют так называемые программные комплексы web-разработки.
Под программным комплексом web-технологий понимают как инфраструктуру web-сервера, так и просто пакет программ, ориентированных на работу в web. Каждый такой комплекс состоит из трех элементов:
1) браузер — клиентская часть системы, выводит данные на стороне клиента, реализуется языками разметки, стилей и клиентскими языками программирования;
45
2) сервер — обрабатывает запросы браузера и возвращает ему webстраницы, позволяет хранить все данные web-приложения и предоставляет доступ к ним, реализуется при помощи серверных языков программирования;
3) уровень транспорта — протокол, используемый для передачи данных.
Структура программного web-комплекса показана на рис. 1.5.
Рис. 1.5. Структура программного комплекса web-разработки
Существует большое количество web-комплексов, различающихся входящим в них программным обеспечением, например для PHP:
LAMP — Linux, Apache, MySQL и PHP. Наиболее популярная связка изза низкой стоимости (все компоненты распространяются бесплатно), высокой
надежности и простоте в установке и разработке;
WAMP — аналогичный комплекс для платформы Windows;
WIMP — Windows, IIS, MySQL и PHP;
FNMP — FreeBSD, Nginx, MySQL и PHP;
WAFP — Windows, Apache, Firebird и PHP;
FNFP — FreeBSD, Ngnix, Firebird и PHP.
В настоящем учебнике рассматривается программный комплекс WAFP.
Продемонстрируем работу этого программного комплекса на примере загрузки
динамической web-страницы (рис. 1.6). В общем случае этот процесс состоит из
девяти этапов.
1. Пользователь вводит в адресную строку браузера URI-адрес требуемой
страницы.
2. Браузер извлекает из URI адрес сервера и посылает ему запрос.
3. Web-сервер, получивший запрос, ищет страницу в своей файловой системе.
46
4. Разместив запрашиваемую страницу в своей памяти, web-сервер замечает, что она представлена файлом, включающим в себя PHP-сценарии, и передает ее интерпретатору PHP.
5. Интерпретатор PHP выполняет PHP-код.
6. Если некоторые фрагменты кода PHP содержат SQL-команды (обращения к базе данных), то они передаются серверу базы данных, например Firebird.
7. Сервер базы данных обрабатывает SQL-команды и возвращает результаты их выполнения интерпретатору PHP.
8. Интерпретатор PHP возвращает web-серверу результаты выполнения
кода PHP, а также результаты, полученные от базы данных.
9. Web-сервер формирует статическую web-страницу и возвращает ее выдавшему запрос браузеру, который отображает ее на экране пользователя.
Возращенные браузеру HTML-страницы могут также содержать код клиентского скрипта (например, JavaScript), интерпретируемый локально на компьютере пользователя. Этот код может инициировать еще один запрос, точно
так же запрос может быть инициирован встроенными объектами (фото, аудио,
видео).
Рис. 1.6. Принцип загрузки динамических web-страниц
47
1.7. Системы управления контентом
Для создания динамического сайта возможны два пути. Во-первых, это
написание собственных web-приложений с помощью языков webпрограммирования, рассмотренных ранее. При этом созданная система будет
полностью отвечать потребностям, однако потребует больших усилий и времени и вызовет так называемый «эффект бутылочного горлышка», когда вся работа по созданию, наполнению и сопровождению сайта взваливается на одного
web-разработчика. Второй путь — это воспользоваться уже существующими
системами, которые называются системами управления web-контентом CMS
(Content Management System). Они значительно облегчают работу webразработчикам и автоматизируют процесс публикации информации, предоставляя пользователям возможность самим публиковать материалы в WWW и
определять их визуальное представление, используя для этого стандартные
средства, не требующие знания языка HTML и достаточно сложных для неспециалиста процедур.
Системы управления контентом — наследники средств визуальной разработки и поддержки сайтов, таких как Microsoft FrontPage или Macromedia
DreamWeaver. С их помощью можно, не будучи профессиональным разработчиком, создавать и модифицировать информационное наполнение сайтов. Но
поскольку такие системы работают преимущественно со статическим представлением информации, сегодня они не устраивают пользователей.
Основная идея систем управления контентом — разделение визуального
дизайна сайта и его информационного наполнения. При создании сайта с помощью такой системы разрабатывается набор шаблонов страниц, в которых
впоследствии размещается информация. В этом случае роль разработчиков
(фактически это группа внедрения) ограничивается только созданием начальной информационной системы на основе CMS. Затем пользователи сами публикуют требуемую информацию и определяют ее представление. Управление
сайтом сводится к минимуму — администратору остается только управлять
пользователями.
Таким образом, при использовании систем управления контентом не возникает эффекта бутылочного горлышка, так как вся работа равномерно распределена — разработчики создают на основе CMS web-сайт, а пользователи создают структуру и оформление страниц, а также наполняют их контентом.
В настоящее время существует несколько сотен различных видов CMS, и
выбор той или иной системы, подходящей для решения конкретной задачи, зависит от множества факторов. К основным из них можно отнести следующие.
48
Требования к работе — поддержка web-технологий, возможность кэширования страниц, нагрузка на хостинг.
Цена — непосредственная стоимость CMS, стоимость новых модулей и
их внедрения, разработка, хостинг и обслуживание создаваемых на конкретной
CMS web-приложений.
Сопровождение — возможность самостоятельной доработки системы и
наличие понятной и информативной документации к ней, качественное гарантийное обслуживание.
Безопасность — возможность фиксирования действий пользователей
(ведение логов), защиты от автоматического заполнения форм (CAPTCHA),
проверки публикуемых материалов, распределения прав, поддержка безопасного протокола при работе с системой.
Удобство — наличие визуального редактора и планировщика состояния
контента, возможность копировать объекты системы и восстанавливать их в
случае удаления.
Гибкость — поддержка нескольких языков интерфейса, возможность одновременно работать с несколькими web-приложениями.
Безусловно, одним из важнейших критериев при выборе CMS, так же как
при выборе любой информационной системы, является критерий цена/
функционал. Поэтому все CMS можно условно поделить на три группы.
1. Собственные (внутренние) CMS — подобный тип систем управления
контентом создается непосредственно конкретным web-разработчиком (или
web-студией) и является его интеллектуальной собственностью. К преимуществам собственных CMS можно отнести небольшие сроки разработки webприложений и ее относительно небольшая стоимость. Однако чаще всего исходные коды таких систем являются закрытыми и все доработки в созданные
сайты можно осуществлять только через самого разработчика, т.е. его клиенты
оказываются зависимыми от проводимой к ним политики цен, качества и возможности дальнейшего обслуживания. Среди всех систем управления контентом собственные CMS занимают около 50 %.
2. Коммерческие CMS — данный тип систем распространяется по лицензии на платной основе разработчиком, который также берет на себя все вопросы, связанные с технической поддержкой и обновлениями своих программных продуктов. К наиболее известным коммерческим CMS можно отнести 1-С
Bitrix, DataLife Engine, Shop-Script и Tilda. На рынке CMS такие системы составляют порядка чуть более 20 %.
3. Свободно распространяемые (бесплатные) CMS — системы управления контентом данного типа создаются и поддерживаются независимыми ин49
тернет-сообществами, поэтому не требуют приобретения лицензии на них, что
значительно снижает стоимость разработки сайтов. Бесплатные CMS практически не уступают коммерческим аналогам в удобстве и надежности, но, как правило, являются менее сфокусированными на нуждах пользователей — они не
привязаны к какой-то конкретной предметной области, вследствие чего содержат большое количество ненужных для конкретной задачи функций. Разработчики такого рода систем не заинтересованы в извлечении прибыли из своих
программных продуктов, поэтому вся работа по их техническому обслуживанию ложится на плечи самих пользователей. Наиболее известными бесплатными системами являются: WordPress, Joomla, Drupal, OpenCart и Wix. Доля бесплатных CMS на рынке достигает отметки в 30 % [6].
Сравнение наиболее популярных CMS согласно приведенным критериям
представлено в табл. 1.3.
Таблица 1.3
Сравнительный анализ CMS
Функционал
Drupal
Стоимость
Бесплатен
Базы данных
Web-серверы
Языки
программирования
Операционные
системы
Ведение логов
CAPTCHA
Модерация
материалов
Распределение
прав
Кэширование
страниц
Поддержка
безопасного
протокола
MySQL,
Postgres
SQL
Apache, IIS,
Lighttpd
PHP
Joomla
WordPress
Бесплатен
Бесплатен
Системные требования
Платная
DataLife
Engine
Платная
MySQL, MS
SQL, Oracle,
Postgres SQL
1-C Bitrix
MySQL
MySQL
MySQL, MS
SQL, Oracle,
Postgres SQL
Apache, IIS
Apache
Apache, IIS
Apache, IIS
PHP
PHP
PHP,
ASP.NET
PHP
Windows,
Windows,
Windows,
Windows,
UNIX,
UNIX
UNIX
UNIX
MacOS
Безопасность и производительность
Да
Да
Да
Да
Да
Да
Да
Да
Windows,
UNIX
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
50
Функционал
Drupal
Joomla
WordPress
1-C Bitrix
DataLife
Engine
Да
Да
Сопровождение
Руководство
пользователя
Да
Да
Да
Удобство и гибкость
Дружественные
URL
Клонирование
объектов
Восстановление
объектов
Визуальный
редактор
Планировщик
состояния
Несколько языков
интерфейса
Многосайтовость
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Нет
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Да
Преимуществами платных CMS являются безопасность и оптимизация, а
бесплатных — большое количество тем, доступность плагинов и виджетов, открытость исходного кода, а также возможность создания собственных тем.
Для того чтобы начать web-разработку, необходимо обладать следующими инструментами: web-сервер, СУБД, редактор кода (или фреймворк), программный отладчик (компилятор) и web-браузер. В отличие от многих других
языков программирования, где среду разработки создают разработчики языка,
для web-программистов такой единой среды нет, поэтому перед разработчиком
открывается множество вариантов. Кроме того, необходимо воспользоваться
платными услугами какого-либо хостинг-провайдера либо использовать локальный web-сервер.
1.8. Обзор программного обеспечения web-разработки
Для того чтобы начать web-разработку, необходимо обладать следующими инструментами: web-сервер, СУБД, редактор кода (или фреймворк), программный отладчик (компилятор) и web-браузер. В отличие от многих других
языков программирования, где среду разработки создают сами разработчики
языка, для web-программистов такой единой среды нет, поэтому перед разработчиком открывается множество вариантов.
51
1.8.1. Фреймворки
Фреймворк — это программная среда, в которой определяется структура
программной системы с целью облегчения разработки путем объединения различных компонентов программирования. Фреймворки очень популярны у
опытных разработчиков. Каждый фреймворк используется для своих задач посвоему. Для web-программирования также существуют фреймворки.
Фреймворки бывают разные, некоторые из них могут использоваться
только для одного конкретного языка программирования, некоторые для всей
web-разработки в целом. Например, популярные на данный момент фреймворки для работы с PHP, это: Laravel [18], Symphony [19], Yii2 [21]. Популярные
фреймворки для полной web-разработки: Code Igniter [20] и др. Фреймворки
для верстки web-страницы (HTML, CSS): Bootstrap [17], Foundation [22] и т.д.
Фреймворк — достаточно сложная система, она определенно упрощает
работу с разрабатываемым проектом. Фреймворк автоматизирует множество
процессов, выполняемых программистом, в этом его, безусловно, большой
плюс, но в целях обучения web-программированию в настоящем издании
фреймворки не используются.
1.8.2. Среда создания локального web-сервера
Первое, что необходимо выбрать для работы с PHP, — это программную
среду для запуска локального web-сервера. Большинство из них также включают в себя и СУБД.
Для чего нужна программа создания локального web-сервера? В отличие
от HTML и СSS, которые составляют статическую часть web-страницы, PHP
образует динамическую часть. Это значит, что код, написанный на PHP, не будет работать в условиях отсутствия web-сервера. Поэтому необходимо выбрать
среду, позволяющую создавать этот web-сервер.
Рассмотрим несколько наиболее популярных сред. Основными критериям
для попадания в этот список являются: бесплатность ПО, поддержка разработчиками и регулярные обновления, наличие последней версии PHP 7.0+, поддержка web-сервера Apache.
В данный список попали: Open Server, USB WebServer, WampServer,
ampps, UwAmp, XAMPP. Сравнение данных сред будет осуществляться по следующим параметрам:
1) портабельность — возможность программы свободно переноситься с
одного устройства на другое без влияния на ее функционирование;
2) локализация — наличие русификации в программе;
52
3) кроссплатформенность — возможность использования программы на
нескольких операционных системах: Windows, Linux, Mac;
4) интерфейс — наличие интерфейса, который позволяет пользователю
ориентироваться в программе;
5) «полезный» интерфейс — то, насколько интерфейс упрощает работу с
программой и файлами;
6) доступ к просмотру логов — возможность просматривать логи программы, что позволяет лучше отслеживать работу программы;
7) выбор версии PHP. Зачастую многие сайты уже были написаны ранее,
на более старых версиях PHP, поэтому выбор версий PHP является полезной
функцией при сопровождении проектов.
Open Server
Open Server Panel — это портативная серверная платформа и программная среда, созданная специально для web-разработчиков с учетом их рекомендаций и пожеланий [7].
Open Server можно бесплатно скопировать с официального сайта разработчиков, он является портабельной программой и имеет русификацию, но
кроссплатформенностью похвастаться не может, Open Server можно использоваться только на ОС Windows. Данное программное средство имеет очень простой и понятный интерфейс (рис. 1.7).
Рис. 1.7. Интерфейс Open Server
53
Open Server позволяет просматривать логи программы и имеет в наличии
все версии PHP. Еще одним недостатком данного ПО можно назвать его размер, полный набор может превышать 7 Гб, что не всегда удобно при переносе
программного средства на другие устройства или срочного скачивания его
из сети.
USB WebServer
USB WebServer — самый маленький и легковесный локальный портативный web-сервер с Apache, PHP, MySQL и PHPMyadmin для Windows [8].
В отличие от предыдущего программного средства USB WebServer занимает чуть более 100 Мб. Данное ПО также является портабельным и имеет русификацию. USB WebServer не кроссплатформенный, его можно использовать
только на OC Windows. Он имеет интерфейс, но ограниченной функциональности (рис. 1.8). С помощью интерфейса программы можно только включить или
выключить локальный web-сервер, работать с файлами придется вручную. К
сожалению, у USB WebServer имеется возможность запуска только одного webсайта.
USB WebServer позволяет просматривать логи программы, но не позволяет выбирать версию PHP. Чтобы работать с другой версией PHP, необходимо
скопировать другую версию USB WebServer, что также очень неудобно при сопровождении старых web-сайтов.
Рис. 1.8. Интерфейс USB WebServer
54
WampServer
WampServer это платформа для web-разработки под Windows для динамических web-приложений с помощью сервера Apache2, интерпретатора скриптов PHP и базы данных MySQL. В него также входит web-приложение
PHPMyadmin для наиболее простой обработки баз данных [9].
WampServer — бесплатное ПО, которое можно скачать с официального
сайта разработчика. И первый минус WampServer — он не является портабельной программой. Однажды установив его на свою систему, вы больше не сможете свободно перемещать его на прочие устройства: съемные диски, флэшнакопители и др. WampServer имеет русификацию, что упрощает работу начинающим разработчикам. Кроссплатформенностью WampServer похвастаться не
может, работать на нем можно в пределах OC Windows. Помимо всего прочего,
интерфейс программы (рис. 1.9) полностью берет на себя работу с файлами,
вручную ничего делать не приходится, поэтому WampServer получает свой
плюс за его «полезность».
WampServer позволяет просматривать логи программы и предоставляет
возможность выбора версии PHP.
Рис. 1.9. Интерфейс WampServer
55
Аmpps
Аmpps — это простой в установке программный стек из автоматического
установщика Apache, Mysql, PHP, Perl, Python и Softaculous, который можно
использовать на настольных компьютерах и офисных серверах [10].
Аmpps можно скачать с официального сайта, и данное программное средство не является портабельным, требует установки и не может быть переброшено на сторонние носители. Аmpps имеет русификацию и кроссплатформенность. На ampps можно работать как на OC Windows, так и на Linux и Mac.
Аmpps имеет очень приятный интерфейс (рис. 1.10), а что самое главное — полезный. Интерфейс ampps берет на себя полностью работу как с файлами, так и
с сервером.
Рис. 1.10. Интерфейс ampps
Аmpps позволяет просматривать логи, но не дает возможность выбирать
версию PHP, работать приходится только с последней версией, предусмотренной разработчиками.
UwAmp
UwAmp — бесплатный сервер Wamp с Apache MySQL, PHP и SQLite [11].
UwAmp можно также скачать с официального сайта разработчика.
UwAmp является портабельной программой, но в ней отсутствует локализация,
56
интерфейс доступен только на английском языке. Кроссплатформенность присутствует, UwAmp можно использовать на всех популярных операционных системах. Интерфейс, как было сказано ранее, доступен только на английском
языке (рис. 1.11), но полностью реализует работу с файлами, поэтому его можно считать «полезным».
Рис. 1.11. Интерфейс UwAmp
UwAmp имеет возможность просмотра логов и также позволяет выбирать
для программирования версию PHP.
XAMPP
XAMPP полностью бесплатный и простой в установке дистрибутив
Apache, содержащий MariaDB, PHP и Perl. XAMPP создан с открытым исходным кодом, чтобы быть невероятно простым в установке и в использовании
[12].
57
XAMPP не является портабельной программой, требует скачивания и
установки. В интерфейсе XAMPP отсутствует локализация. Что касается кроссплатформенной, то чтобы работать на разных ОС, необходимо скопировать
разные версии XAMPP. Но так как визуально они ничем не отличаются, т.е.
разработчику не придется учиться работать в новой среде при смене ОС, то за
кроссплатформенность XAMPP получает свой плюс. Интерфейс, как сказано
выше, доступен только на английском языке (рис. 1.12), но и «полезным» его
назвать также нельзя, так как с файлами приходится работать вручную.
Рис. 1.12. Интерфейс XAMPP
XAMPP позволяет просматривать логи программы. Как и в случае с USB
WebServer, для работы с другими версиями PHP необходимо скачивать другую
версию XAMPP, что зачастую очень неудобно.
Итоги сравнения сред создания web-сервера
Все преимущества и недостатки рассмотренных программных сред скомпонованы и представлены в табл. 1.4.
Каждый разработчик имеет право выбрать для себя среду. Каждая из них
обладает своими преимуществами и недостатками. В учебнике используется
58
Open Server, инструкция по его установке и настройке представлена в приложении В издания.
Таблица 1.4
Результаты сравнения сред локального web-сервера
Среда
Open Server
USB Web
Server
Wamp
Server
ampps
Uw Amp
XAMPP
Портабельность
КроссЛокалиплатфорзация
менность
Интерфейс
Полезный Доступ к
интер- просмотфейс
ру логов
Выбор
версий
PHP
+
+
–
+
+
+
+
+
+
–
+
–
+
–
–
+
–
+
+
+
+
–
+
–
+
–
–
+
+
+
+
+
+
+
+
–
+
+
+
–
+
–
1.8.3. Редактор программного кода
Помимо среды запуска локального web-сервера, также необходимо выбрать и редактор кода с программным компилятором. Редактор кода — текстовый редактор, предназначенный для редактирования исходного кода программ.
В большинстве случаев современные редакторы имеют встроенные компиляторы или позволяют их установить в качестве дополнительных расширений. Так
же, как и в случае со средами создания web-сервера, рассмотрим наиболее популярные бесплатные редакторы на данный момент. В данный список попали:
Notepad++, Visual Studio Code и Atom. Рассмотрим каждый редактор в отдельности.
Notepad++
Notepad ++ — это бесплатный редактор исходного кода и замена «Блокнота», который поддерживает несколько языков [13].
Notepad++ — прокаченная версия обычного блокнота Windows. Возможность поддержки кучи языков программирования, достаточно прост и понятен,
но из-за этой его «простоты» многие разработчики не считают его лучшим выбором для программирования. В основном, потому что на Notepad++ невоз59
можно установить новые плагины, приходится работать только со встроенными, из-за чего может отсутствовать множество функций. Как итог, Notepad++
возможный выбор, но не лучший.
Visual Studio Code
Visual Studio Code — это легкий, но мощный редактор исходного кода, который работает на рабочем столе и доступен для Windows, MacOS и Linux [14].
Visual Studio Code — по праву один из лучших бесплатных редакторов.
Его единственный минус в том, что после скачивания основной программы
необходимо устанавливать все прочие расширения для каждого отдельно взятого языка программирования, но данная функция встроена внутри программы,
так что это не составляет большого труда. В остальном Visual Studio Code не
уступает своим «платным» коллегам, так что уверенно можно сказать, что это
отличный выбор.
Atom
Atom — взломанный текстовый редактор для XXI века [15].
Atom — бесплатный редактор, обладает средними характеристиками среди конкурентов. Имеет свои небольшие преимущества при работе с webстраницами, но чувствителен к файлам большого размера. Начинающим разработчикам Atom подойдет, для создания больших проектов его лучше не использовать.
В данном учебнике рассмотрены далеко не все доступные редакторы.
Каждый web-разработчик может сделать выбор самостоятельно. В издании используется Visual Studio Code, так как это весьма простой в освоении и очень
популярный на данный момент бесплатный редактор. Инструкция по установке
и настройке Microsoft Visual Studio Code представлена в приложении Б издания.
1.8.4. Web-браузер
Браузер — это прикладное программное обеспечение для просмотра
страниц, web-документов, файлов и их каталогов, управления webприложениями. Вся работа web-программистов направлена на то, чтобы дать
что-то пользователю через web-браузер. Существуют множество популярных
60
браузеров, такие как: Google Chrome, «Яндекс Браузер», Mozilla Firefox, Internet
Explorer (Microsoft Edge), Opera и т.д. Отдельно на каждом браузере останавливаться не будем. Профессиональные разработчики проверяют работоспособность своего кода практически во всех браузерах, но на начальном этапе достаточно одного.
В настоящем учебнике используется Google Chrome [16]. На данный момент, по версии Browser Market Share, это самый популярный web-браузер в
мире. Его используют практически 67 % интернет-пользователей [4]. У него
есть свои минусы, но благодаря его колоссальной популярности проверку работоспособности любого кода стоит начать именно с него.
Контрольные вопросы
1. Кто считается изобретателем web-службы, и какие технологии он заложил в ее основу?
2. Что такое web-приложение, web-страница и web-сайт?
3. Какие языки разметки применяются в web-разработке и в чем их особенности?
4. Какова структура URI и в чем заключаются его основные недостатки?
5. Каким образом можно классифицировать web-сайты?
6. На какие этапы делится разработка web-сайта, какой из этапов является наиболее важным и почему?
7. В чем заключается концепция Web 2.0?
8. Какую структуру имеет HTTP-сообщение и каковы особенности
HTTP-запроса и HTTP-ответа?
9. Каким образом осуществляется взаимодействие web-браузера и webсервера при выводе статических web-страниц?
10. Каковы основные характеристики современных web-браузеров?
11. В
чем
заключаются
отличия
серверных
языков
webпрограммирования от клиентских? Какие представители этих языков наиболее
распространены сегодня?
12. Что такое LAMP и чем он отличается от WAFP?
13. Каким образом осуществляется взаимодействие web-браузера и webсервера при выводе динамических web-страниц?
14. В чем заключается основная задача CMS?
15. Для чего необходимо использование сред создания локального webсервера?
61
ГЛАВА 2. ОСНОВЫ HTML
Язык HTML был разработан Тимом Бернерс-Ли во время его работы в
CERN и распространен браузером Mosaic, разработанным в NCSA. В
1990-х гг. он добился особенных успехов благодаря быстрому росту WWW. В
это время HTML был расширен и дополнен. Web-служба изначально предъявляла очень серьезные требования по использованию единых стандартов и соглашений между разработчиками web-страниц и производителями браузеров.
Это явилось причиной совместной работы над последующими спецификациями
языка HTML.
HTML 2.0 был разработан под эгидой Internet Engineering Task Force
(IETF) для упорядочения общепринятых положений в конце 1994 г. Среди нововведений этой версии можно отметить: возможность загрузки файлов через
формы, использование карт изображений и зарождение многоязычности.
HTML 3.0 был предложен Консорциумом всемирной паутины (W3C) в
марте 1995 г. и обеспечивал множество новых возможностей, таких как поддержку работы с таблицами, «обтекание» изображений текстом, отображение
сложных математических формул и поддержку «бегущей строки». Даже при
том, что этот стандарт был совместим со второй версией, реализация его была
сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы,
поддерживаемые браузерами Netscape Navigator и Mosaic.
В версии HTML 4.0, разработанной в декабре 1997 г., вводятся механизмы таблиц стилей, скриптов, кадров, внедрения объектов, улучшенная поддержка разных направлений письма, таблицы с большим количеством возможностей и новые свойства форм, обеспечивая лучшие возможности доступа для
людей с физическими недостатками. Многие элементы были отмечены как
устаревшие и нерекомендованные (в частности, элемент font, используемый для
изменения свойств шрифта). Эта версия HTML была разработана с помощью
экспертов в области интернационализации, так что документы можно было писать на любом языке и легко передавать их по всему миру.
HTML5, релиз которого состоялся в 2014 г., на данный момент стал единственным и повсеместно используемым языком построения web-страниц.
HTML5 включает в себя все преимущества предыдущих версий, а также возможности XHTML и XML. Были решены многие проблемы четвертой версии
HTML, а также улучшено взаимодействие с медиаданными. Благодаря API рен62
дерингу была улучшена работа со сложными мультимедийными приложениями. Был создан новый движок, возможности которого еще полностью не освоены. Из-за него HTML5 принято называть не просто языком гипертекстовой
разметки, а языком структурирования и представления web-страниц.
Существует также и концепция HTML6. Первая прото-версия HTML6
была представлена еще в 2015 г., но после нескольких этапов тестирования разработчиками было сделано заявление о том, что современные технологии пока
не позволяют в полной мере реализовать все возможности этого языка. На данный момент о разработке HTML6 широкой общественности больше ничего не
известно.
В настоящем учебнике используется HTML5, так как это единственная, в
настоящее время повсеместно используемая версия языка для представления
web-страниц.
2.1. Общие положения
HTML сегодня является самым распространенным языком представления,
применяемым в web-разработке. Основное назначение языка заключается в
управлении процессом вывода содержимого web-документа на экране браузера
и определении этим самым способа представления документа.
Основой языка HTML является элемент. Он несет в себе определенную
информацию, может описывать документ в целом или способ форматирования
текста. Любая web-страница создана с помощью элементов разных типов (абзац, заголовок, изображение, гиперссылка и др.).
Название элемента помещается в угловые скобки, например <P>. Полученное выражение называется тегом. В данном случае это открывающий тег,
обозначающий начало абзаца. Иногда необходимо задать парный закрывающий
тег, который записывается как </P>. В основном парные теги используются при
форматировании текста, они задают начало и конец блока форматирования.
Иногда закрывающий тег не требуется, а иногда его можно пропустить, однако
для корректной обработки документа рекомендуется всегда использовать закрывающий тег.
Теги применяются для того, чтобы сказать браузеру, какой блок необходимо разместить в определенным месте страницы, а также какую информацию
этот блок должен содержать. Кроме того, браузеру нужно сообщить, как отображать эту информацию. Для этого используют атрибуты тегов.
63
С помощью атрибутов можно указывать различные способы отображения
информации, добавляемой с помощью одинаковых тегов, а в некоторых случаях применение тега без атрибутов не дает результатов. Например, следующий
тег типа абзац выравнивает содержимое по центру:
<P align="center"> Абзац слева </P>
где <P> и </P> начальный и конечный тег соответственно; align — атрибут;
center — значение атрибута; Абзац слева — содержимое тега.
Значения атрибутов задаются после знака равенства в кавычках (или без
них) и могут быть разными. Некоторым атрибутам присущ набор фиксированных значений, для других количество значений не ограничено.
Теги и их атрибуты являются основой языка HTML, но для правильного
отображения страницы в браузерах важно верно создать структуру документа.
Для этого существуют строгие правила. Есть теги, без которых HTML-документ
не может обойтись, потому что именно они определяют его структуру.
2.2. Структура HTML-документа
Для создания структуры документа и хранения служебной информации в
нем предусмотрено много тегов, которые охватывают все необходимые пункты
построения документа.
HTML-документ содержит следующие компоненты (рис. 2.1):
строку объявления типа документа;
заголовок;
тело документа.
Рис. 2.1. Структура HTML-документа
64
Тег <HTML> является корневым для HTML-документа. Это значит, что
все остальные элементы содержатся внутри тегов <HTML> и </HTML>. Тем не
менее в документах HTML этот тег не является обязательным, хотя W3C рекомендует включать его. Комментирование в HTML осуществляется с помощью
тега <!-- -->, например:
<HTML>
<!-- Тело документа -->
<BODY> Тело </BODY>
</HTML>
Любой текст, расположенный внутри этого тега, не будет отображаться
браузером.
HTML не поддерживает вложенные комментарии, поэтому результатом
выполнения следующего кода:
<!--Это комментарий. <!-- Это комментарий2 --> Его видно не будет. -->
будет вывод на экран «Его видно не будет. -->», так как закомментирован будет
код, расположенный между открывающим тегом «<!--» и первым закрывающим тегом «-->», остальные же теги будут интерпретированы как обычный
текст.
2.2.1. Объявление типа документа
Объявление типа документа позволяет избежать большого количества
проблем при создании и эксплуатации сайта, особенно при использовании серверных языков программирования. В теории его можно не использовать, но на
практике, и по стандарту W3C, любой HTML-документ должен быть объявлен.
В HTML5 строка объявления документа всегда имеет вид:
<!DOCTYPE html>,
где <!DOCTYPE> — односторонний тег (не требует закрывающего тега) объявления документа; html — тип документа, общепринятый стандарт HTML5.
В предыдущих версиях HTML 4.01 и ранее объявление документа являлось очень сложной и важной задачей. Браузеру было необходимо предоставить служебную информацию о типе документа, чтобы он мог его грамотно обработать.
65
По стандарту DTD (Document Type Definition — определение типа документа) браузеру предоставлялись следующие сведения для правильной обработки HTML документа:
строгие правила DTD — требовали, чтобы данный HTML-документ
точно соответствовал всем требованиям спецификации HTML 4.01. Документы
с этим набором правил содержали такое объявление:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">;
переходные правила DTD — допускали использование устаревших, не
поддерживаемых в версии HTML 4.01 тегов и атрибутов. Документы с этим
набором правил содержали такое объявление:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">;
правила DTD для документов с фреймами. Фреймовый HTMLдокумент выглядит в браузере как набор нескольких окон со своими полосами
прокрутки. Документы с этим набором правил содержали такое объявление:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">.
Здесь представлены не все тонкости объявления документов в HTML
4.01. Несмотря на то, что в большинстве случаев использовали переходные
правила, все равно такое объявление документов было очень сложным и неудобным. Благодаря новым стандартам DTD и возможностям HTML5 объявление документов стало намного более простой и не требующей внимания
операцией.
2.2.2. Заголовок HTML-документа
Заголовок, описываемый элементом HEAD, играет очень важную роль:
данные, содержащиеся в нем, помогают браузеру в обработке страницы, а поисковым системам — в индексации документа.
Элементы, которые можно использовать внутри HEAD, могут быть следующими:
TITLE — задает заголовок окна, который отображается в окне браузера (требует наличия закрывающего тега). В заголовке может быть только один
такой элемент, но его наличие не обязательно;
META — определяет различную служебную информацию. Общий
синтаксис тега <META> имеет вид: <META http-equiv="" content="">. Где атрибут http-equiv содержит имя свойства (в HTML5 возможно упрощение
66
"name"), а content — его значение. В табл. 2.1 представлены возможные свойства атрибута http-equiv и их значения.
Таблица 2.1
Свойства атрибута http-equiv (name)
Свойство
Описание
content-type
Определяет тип содержимого
документа
Expires
Pragma
Refresh
Charset
Значение
text/html (html файл)
image/jpeg (изображение)
text/plain (текстовый файл)
Задает время действия
документа. После указанной даты
Mon, Nov 2011 09:11:00 GMT+3
он будет считаться устаревшим
Определяет тип кэширования
документа, т.е. позволяет
no-cache (не кэшировать)
запретить браузеру сохранение страницы в кэше
Время в секундах
(время до перезагрузки)
Позволяет задать параметры
Время в секундах, URI
автоматической загрузки документа
(время до перезагрузки и адрес
загружаемой страницы)
Charset="utf-8" (в отсутствии тега
используется по умолчанию)
Позволяет задать кодировку
HTML-документу
Charset="Windows-1251"
и т.д.
SCRIPT — позволяет добавлять скрипты различных клиентских языков программирования (при отсутствии тега "type" по умолчанию используется
JavaScript). Пример вставки скрипта на JavaScript, выводящий на экран «Привет, кафедра АСУ!»:
<SCRIPT [type="text/javascript" ]>
alert("Привет, кафедра АСУ!")
</SCRIPT>
LINK — односторонний тег, задает ссылки на дополнительные системные файлы, например на таблицу стилей:
<LINK rel="stylesheet" href="style.css" [type="text/css"]>
67
STYLE — позволяет добавить стили для страницы или отдельного
элемента. Пример задания для страницы цвета фона и типа шрифта:
<STYLE type="text/css">
BODY {
font: 24px Arial;
background: #12f3f4
}
</STYLE>
BASE — односторонний тег, задает базовый адрес документа при помощи "href", либо имя окна или фрейма, куда будет загружаться документ, открываемый по ссылке ("target"), например:
<BASE href="https://www.abonent.plus/">
2.2.3. Тело HTML-документа
Сам документ располагается внутри элемента BODY: весь текст, находящийся между открывающим тегом <BODY> и закрывающим тегом </BODY>,
будет отображаться браузером.
Атрибуты тега <BODY> применяются для того, чтобы установить общие
для всего документа свойства, и в этом отношении возможности данного тега
достаточно большие: можно задать цвет ссылок, параметры фона и т.п. Основные атрибуты тега <BODY> указаны в табл. 2.2. Цвета можно задавать в HEXформате или ключевыми словами.
Таблица 2.2
Атрибуты тега BODY
Атрибут
Alink
Vlink
Link
Text
Bgcolor
Background
Bottommargin
Leftmargin
Topmargin
Описание
Задает цвет активной ссылки
Определяет цвет посещенной ссылки
Устанавливает цвет непосещенной ссылки
Задает цвет текста документа
Определяет цвет фона
Устанавливает фоновый
рисунок страницы
Задают расстояние от нижнего, левого
и верхнего края окна браузера
соответственно
68
Пример
green
#008000
test.jpeg
(ссылка на изображение)
20 (число пикселей)
Помимо текста внутри элемента BODY могут находиться теги, отвечающие за форматирование документа, а также различные мультимедийные объекты и формы.
2.3. Средства форматирования текста
Ввод текстовой информации на страницу осуществляется внутри элемента BODY. Однако чаще всего простое расположение текста внутри него неприемлемо, необходимо его оформлять, например, разделять на абзацы или создавать заголовки. Для оформления текста HTML предоставляет много возможностей: для любого абзаца или заголовка можно задать уникальный внешний вид,
можно создавать списки и таблицы, менять цвет, размер и шрифт текста.
Основными средствами, позволяющими провести базовое форматирование теста, являются следующие:
физические теги форматирования — указывают браузеру, как должен выглядеть тот или иной блок текста, не уточняя никак смысл и значение
его содержимого:
<PRE></PRE> — выводит предварительно отформатированный текст.
Браузер покажет текст, заключенный между этими тегами в том виде, в каком
он был в текстовом редакторе;
<B></B> — используется для выделения текста полужирным;
<I></I> — используется для получения курсивного текста. Вместо этого тега может использоваться тег <EM></EM>;
<U></U> — позволяет подчеркнуть текст;
<TT></TT> — задает моноширинное написание текста;
<BIG></BIG> — отображает текст, расположенный внутри, шрифтом
на единицу больше, чем остальной текст;
<SMALL></SMALL> — отображает текст, расположенный внутри,
шрифтом на единицу меньше, чем остальной текст;
<STRIKE></STRIKE> — делает текст перечеркнутым;
<SUB></SUB> — предназначен для выделения подстрочного текста
(нижний индекс);
<SUP></SUP> — нужен для выделения надстрочного текста (верхнего
индекса);
логические теги форматирования — сообщают браузеру о том, какой
тип информации в них содержится. По сути, они разбивают документ на логи-
69
ческие части и при этом не обязывают браузер отображать текст, расположенный внутри тега, каким-либо конкретным образом:
<ABBR></ABBR> — определяет текст как аббревиатуру. С помощью
атрибута title можно задать всплывающую подсказку с ее расшифровкой;
<ACRONYM></ACRONYM> — указывает, что текст является акронимом;
<CITE></CITE> — отмечает небольшую сноску, взятую из другого источника. Текст выводится курсивным шрифтом;
<CODE></CODE> — указывает на программный код. Текст выводится
моноширинным шрифтом;
<DEL></DEL> — помечает текст как удаленный. Тег содержит два атрибута: cite указывает URI документа, в котором описаны причины удаления,
datetime — дату и время удаления. Текст отображается как зачеркнутый;
<DFN></DFN> — выделяет текст как определение. Текст выводится
курсивом;
<EM></EM> — выделяет важные фрагменты текста курсивом;
<INS></INS> — отмечает текст как вставку и применяется для выделения изменений, вносимых в документ. Имеет аналогичные тегу DEL атрибуты.
Текст отображается как подчеркнутый;
<KBD></KBD> — помечает текст, вводимый пользователем с клавиатуры. Текст отображается моноширинным шрифтом;
<Q></Q> — обозначает текст как цитату и применяется для добавления
коротких высказываний в текст. Текст отображается как курсив или выделяется
кавычками;
<SAMP></SAMP> — определяет текст как пример и используется для
выделения результатов работы программы. Текст выделяется моноширинным
шрифтом;
<STRONG></STRONG> — предназначен для постановки акцента на
тексте. Он выделяется полужирным шрифтом;
<VAR></VAR> — применяется для выделения переменных из программ. Текст выделяется курсивом;
заголовок — важный элемент сайта, помогающий систематизировать
текст.
В HTML доступно создание заголовков разных уровней, позволяющих
легко выделять смысловые темы и подтемы. Текст, находящийся в заголовках,
влияет на индексацию сайта поисковыми системами.
70
Заголовки создаются с помощью тегов <H1></H1>…<H6></H6>. По
умолчанию заголовок самого верхнего уровня (H1) выделяется самым крупным
шрифтом, и чем ниже уровень заголовка, тем меньше шрифт.
Для заголовка любого уровня можно задать выравнивание по горизонтали. Это делается с помощью атрибута align с возможными значениями center,
left, right и justify, который выравнивает текст заголовка по центру, по левому
краю, по правому краю и одновременно по двум краям соответственно;
абзац — делит текст на логические части и выделяется отступом от
края документа. В HTML абзацы отделяются друг от друга расстоянием в одну
строку. Для организации абзацев в HTML предусмотрен тег <P></P>. К нему,
как и к тегу заголовка, можно применить атрибут выравнивания align;
обрыв строки — переносит текст на новую строку, не заканчивая абзац. Для переноса служит тег <BR>, не требующий закрывающего тега. С помощью атрибута clear можно выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера;
элемент DIV — служит для выделения больших блоков текста под
форматирование. Единственное, что возможно сделать с этим элементом с помощью HTML, — выровнять текст в блоке с помощью атрибута align и создать
всплывающую подсказку для блока с помощью атрибута title. Основная
же работа с блоками осуществляется средствами таблиц стилей, речь о которых
пойдет в следующем разделе настоящего учебника;
тег шрифта FONT — позволяет задавать параметры шрифта для текста. Его не рекомендуется использовать в последних версиях HTML, так как
для форматирования шрифта предпочтительней использовать таблицы стилей.
Параметры текста задаются атрибутами тега <FONT>. За тип шрифта отвечает атрибут face, значением которого должно быть название шрифта, «знакомое» компьютеру. Допустимо задавать несколько типов шрифтов, вводя их
через запятую.
За размер шрифта отвечает атрибут size. Значение задается в относительных величинах, то есть 2, 4 и т.д. По умолчанию используется размер 3. Можно
также задать размер шрифта относительно остального текста. Для этого нужно
скачала указать +, если необходимо увеличить шрифт, или если требуется обратное форматирование. После знака требуется указать количество пунктов, на
которое текст должен быть больше или меньше.
71
За цвет шрифта отвечает атрибут color, значением которого должно быть
либо ключевое слово, обозначающее имя цвета, либо HEX-код цвета в формате
#RRGGBB.
Все логические и физические теги форматирования, а также теги DIV
можно использовать как по одному, так и несколько вместе. Достигается это
путем вложения тегов друг в друга, например:
<strong>H<sub>2</sub>O</strong>—<i><b>формула воды.</b></i>
Помимо базового форматирования HTML позволяет создавать гиперссылки на другие страницы или на часть текущего документа, представлять
текст в форме таблиц и списков, а также вставлять в текст специальные символы с помощью escape-последовательностей.
2.3.1. Гиперссылки
Гиперссылки (URI) имеют стандартный формат, что позволяет браузеру
интерпретировать их и выполнять необходимые функции (вызывать методы) в
зависимости от типа ссылки. Ссылки могут указывать на другой документ
(обычные ссылки), специальное место указанного документа (ссылки-метки)
или выполнять другие функции (почтовые ссылки, ссылки с JavaScript кодом).
URI может указывать на специальное место по абсолютному пути доступа или указывать на документ в текущем пути доступа, что часто используется
при организации больших структурированных web-сайтов.
Для того чтобы браузер отобразил обычную ссылку, необходимо отметить ее в HTML-документе специальными тегами следующим образом:
<A HREF="URI"> Текст </A>.
Тег <A HREF="URI"> открывает описание ссылки, а тег </A> — закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом web-браузером.
Существует возможность делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для
этих разделов. Это позволяет быстро переходить от раздела к разделу внутри
документа, не используя скролирование экрана. При щелчке по такой ссылке
браузер перемещает окно обзора на указанный раздел документа, а строку, в
которой стоит маркер данного раздела (обычно первая строка раздела или заголовок раздела) размещает на первой строке окна.
72
Для создания такой ссылки-метки необходимо выполнить следующие шаги:
создать маркер раздела:
<A NAME=имя_маркера> Название раздела </A>;
создать ссылку на данный маркер:
<A HREF=#имя_маркера> Текст ссылки </A>.
Символы #имя_маркера сообщают браузеру, что необходимо найти в
данном HTML-документе маркер с именем «имя_маркера». Когда пользователь
щелкает мышью на строке «Текст ссылки», браузер переходит сразу к разделу «Название раздела». Аналогично можно организовать доступ к нужному
участку или разделу другого документа, дополнительно указав его URI.
2.3.2. Escape-последовательности
Escape-последовательности (или символьные объекты) представляют собой метод представления специальных символов. Некоторые символы, такие
как <, используются в HTML в специальном значении, поэтому должен существовать способ их выражения как символьных данных внутри самого документа или в URI. Принято использовать соответствия, представленные в
табл. 2.3.
Таблица 2.3
Основные escape-последовательности
Символ
Описание
Двойная кавычка
Левая угловая
скобка
Правая угловая
скобка
Escape-код
Символ
Описание
Escape-код
"
±
Плюс-минус
±
<
n
Возведение в
N-ую степень
&supN;
>
m
Дробь M/N
&fractMN;
Амперсанд
&
×
Неразрывный
пробел
÷
§
Параграф
§
¬
€
Евро
€
£
Фунт
£
°
©
"
<
>
&
∕n
73
Знак
умножения
Знак
деления
Знак
отрицания
÷
Градус
°
Знак copyright
©
×
¬
Двойные кавычки могут использоваться и в пределах обычного текста.
Точка с запятой является частью escape-последовательности, но может быть
опущена. Escape-последовательности являются регистрзависимыми, то есть
различают заглавные и строчные буквы. Например, амперсанд не может быть
представлен как &, так как escape-последовательность будет не определена.
2.3.3. Таблицы
С появлением в языке HTML 3.0 механизма таблиц, в арсенале webразработчиков появились два ценных инструмента — средство для представления числовых и строковых данных, разбитых по строкам и столбцам, или как
средство форматирования web-страниц и задания взаимного расположения элементов страницы. Именно последнее применение играет наиболее важную роль
для разработчика, так как позволяет производить с помощью таблиц верстку
web-страниц, речь о которой пойдет в последующих разделах учебника.
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие как заголовки, списки,
абзацы, графику, а также элементы форм. Описание таблиц располагается
внутри элемента BODY. Каждая таблица определяется тегами <TABLE>
</TABLE>, внутри которых должны находиться все элементы таблицы.
Количество строк таблицы определяется количеством тегов <TR></TR>,
а количество ячеек в пределах строки — тегами <TD></TD>. Чтобы созданная
ячейка являлась заголовком в таблице (текст выравнивается по центру и выделяется жирным шрифтом), нужно воспользоваться тегами <TH></TH>. Применение элементов TR, TD и TH без закрывающих тегов допустимо, но нежелательно из-за некорректного отображения в некоторых браузерах.
Основные атрибуты таблицы:
border — используется в элементе TABLE, определяет ширину границы
ячеек таблицы и таблицы в целом. Ширина границы указывается в пикселях;
bordercolor — устанавливает цвет границы таблицы;
align — управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру). При
использовании внутри элемента TABLE определяет горизонтальное положение
таблицы на странице;
valign — управляет положением данных в ячейках по вертикали. Может принимать значения top (вверху), bottom (внизу), middle (посередине) и
74
baseline (все ячейки строки прижаты кверху). При использовании внутри элемента TABLE определяет вертикальное положение таблицы на странице;
nowrap — указывает на то, что данные в ячейке не могут логически
разбиваться на несколько строк и должны быть представлены одной строкой;
colspan — указывает количество ячеек, занимаемых данной ячейкой по
горизонтали. По умолчанию — 1;
rowspan — указывает количество ячеек, занимаемых данной ячейкой
по вертикали. По умолчанию — 1;
width — задает ширину таблицы или ее элемента. Значение можно задавать как в абсолютных единицах, например width="100", так и в относительных, например width="50%" от родительского элемента;
height — задает высоту таблицы или ее элемента. Значение можно задавать как в абсолютных единицах, например height="400", так и в относительных, например height="30%" от родительского элемента;
cellpadding — определяет расстояние между границей ячейки и ее содержимым;
cellspacing — задает расстояние между внешними границами ячеек;
bgcolor — задает цвет содержимого таблицы или ее элемента;
background — определяет фоновый рисунок таблицы или ее элемента.
Пример 2.1. Создание HTML-таблицы.
<TABLE border=1 height=50>
<!-- Подпись к таблице -->
<CAPTION align=bottom> Таблица </CAPTION>
<!-- Первая строка таблицы -->
<TR>
<!-- Ячейка, занимающая 2 строки -->
<TD rowspan=2></TD>
<!-- Заголовок, занимающий 2 ячейки -->
<TH colspan=2> Среднее значение </TH>
</TR>
<!-- Вторая строка таблицы -->
<TR>
<TH> Рост </TH>
<TH> Вес </TH>
</TR>
<!-- Третья строка таблицы -->
<TR align=center>
<TD> Мужчины </TD>
<TD> 174 </TD>
<TD> 78 </TD>
</TR>
75
<!-- Четвертая строка таблицы -->
<TR align=center>
<TD> Женщины </TD>
<TD> 165 </TD>
<TD> 56 </TD>
</TR>
</TABLE>
Результат выполнения кода показан на рис. 2.2.
Рис. 2.2. Пример HTML-таблицы
Таблицы могут вкладываться друг в друга, образуя различные логические
структуры. Для этого просто необходимо разместить одну пару тегов (стартовый и завершающий) внутри другой. Благодаря этой особенности таблицы получили широкое распространение в верстке web-документов.
2.3.4. Списки
Списки — важный инструмент форматирования текста, применяемый для
организации и группировки данных. Они могут пригодиться при создании
оглавления сайта, для описания сложных структур и других подобных объектов. В HTML можно выделить три типа списков:
ненумерованные;
нумерованные;
списки определений.
Можно создавать вложенные списки, используя различные теги списков
или повторяя одни теги внутри других.
Ненумерованные списки
Ненумерованный (маркированный) список — это список, в котором
пункты отмечаются с помощью различных символов. В таких списках последовательность элементов неважна.
76
Для создания ненумерованных списков в HTML предусмотрен элемент
UL, требующий наличия закрывающего тега. Пункты списка находятся внутри
UL и описываются элементом LI. У обоих элементов есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:
circle — создает маркер в виде круга, белого внутри;
square — создает маркер в виде квадрата;
disc — создает маркер в виде закрашенного черным круга.
Пример 2.2. Создание ненумерованного списка.
<UL type=square>
<LI> Англия </LI>
<LI type=disc> Франция</LI>
<LI> Испания </LI>
<LI type=circle> Италия </LI>
</UL>
Результат выполнения кода показан на рис. 2.3.
Рис. 2.3. Пример ненумерованного списка
Нумерованные списки
Нумерованные списки применяются, когда порядок следования пунктов
списка имеет большое значение. Особенностью списков этого типа является то,
что все их элементы упорядочены.
Для создания упорядоченных списков применяется элемент OL, требующий наличие закрывающего тега. Все пункты списка находятся внутри OL и
описываются элементом LI. У обоих элементов есть атрибут type, задающий
формат символов, используемых для нумерации. Следующие значения атрибута type указывают, что пункты списка будут нумероваться с помощью:
А — заглавных букв латинского алфавита;
а — строчных букв латинского алфавита;
I — заглавных римских цифр;
i — строчных римских цифр;
1 — арабских цифр.
77
Элемент OL также имеет атрибут start, указывающий, с какого числа
начинать нумерацию всего списка.
Пример 2.3. Создание нумерованного списка с разной нумерацией.
<OL type=I start=2>
<LI> Закрыть дверь </LI>
<LI type=A> Сходить в магазин </LI>
<LI type=i> Купить молоко </LI>
<LI type=1> Открыть дверь </LI>
<LI> Закрыть дверь </LI>
</OL>
Результат выполнения кода показан на рис. 2.4.
Рис. 2.4. Пример нумерованного списка
Списки определений
Список определений — это особый вид списка, применяемый для формирования словарей или для пояснения значения терминов. Элемент такого списка всегда состоит из двух частей. Первая часть задает определяемое слово, а
вторая — его расшифровку или описание.
Для организации списков определений служит элемент DL, внутри которого располагаются определение и описание термина. За определение отвечает
элемент DT, за описание — DD.
Пример 2.4. Создание списка определений.
<DL>
<DT>
<DD>
<DT>
<DD>
</DL>
HTML </DT>
Язык гипертекстовой разметки </DD>
PHP </DT>
Серверный язык web-программирования</DD>
78
Результат выполнения кода показан на рис. 2.5.
Рис. 2.5. Пример списка определений
2.4. Работа с изображениями и мультимедиа
В HTML предусмотрен целый ряд возможностей для работы с изображениями и мультимедиа. Это встраивание графики и использование звуков, применение анимационных роликов и видео.
Применение мультимедийных возможностей является далеко не последним аргументом в борьбе за привлечение новых пользователей web-сайта, в то
же время при использовании мультимедиа необходимо соблюдать чувство меры. Хорошо оформленная web-страница позволит привлечь и удержать внимание посетителей, в то же время чрезмерное увлечение изображениями, звуковыми эффектами и т.п. может затруднить просмотр страницы (при медленных
каналах связи) или отпугнуть чересчур навязчивыми мелодиями.
В общем случае при использовании мультимедиа на web-страницах желательно придерживаться следующих правил.
1. Оформление сайта должно соответствовать его содержанию. Применение графики и мультимедиа должно упрощать навигацию по сайту.
2. Должна быть предусмотрена возможность работы с web-страницей для
медленных каналов связи (замещающие надписи, дублирующие текстовые меню или специальные текстовые варианты страницы).
2.4.1. Встраивание изображений
Самым простым и распространенным для встраивания в web-страницы
мультимедийным элементом является изображение. У него множество плюсов:
статичность, небольшие размеры файлов (относительно других типов мультимедиа содержимого), широкая область применения. Изображения являются незаменимым элементом на любом современном web-сайте.
Для встраивания изображений в HTML-документ применяется не требующий закрывающего тега элемент IMG, который имеет следующие атрибуты:
src — обязательный параметр, содержащий URI изображения. Оно
должно храниться в графическом формате, поддерживаемом браузером. На се79
годняшний день форматы PNG, GIF и JPG поддерживаются большинством
браузеров;
alt – задает текст, который будет отображен браузером, не поддерживающим отображение графики. Обычно это короткое описание изображения,
которое пользователь мог бы или сможет увидеть на экране. Его также можно
увидеть при наведении указателя мыши на изображение. Если данный параметр
не срабатывает, то необходимо добавить в элемент IMG тег title с аналогичным
содержанием;
height — указывает высоту рисунка в пикселях или процентах относительно родительского элемента. Если данный параметр не указан, то
используется оригинальная высота рисунка;
width — указывает ширину рисунка в пикселях или процентах относительно родительского элемента. Если данный параметр не указан, то
используется оригинальная ширина рисунка;
align — сообщает браузеру, как выравнивать изображение относительно текста. Это позволяет более строго задать расположение элементов на
экране. Атрибут может иметь следующие значения выравнивания:
left — по левому краю;
right — по правому краю;
top — выравнивание верхней границы картинки по самому высокому
элементу текста;
texttop — выравнивание верхней границы картинки по самому высокому элементу текста;
middle — середина изображения выравнивается по базовой линии
строки;
absmiddle — середина изображения выравнивается по середине строки;
baseline или bottom — выравнивание нижней границы изображения по
базовой линии строки;
absbottom — нижняя граница изображения выравнивается по нижней
границе текущей строки;
hspace — задает расстояние в пикселях между изображением и текстом
по горизонтали;
vspace — задает расстояние в пикселях между изображением и текстом
по вертикали;
border — указывает ширину рамки изображения в пикселях;
lowscr — содержит URI изображения худшего качества, но того же содержания, что и основная картинка. Это позволит пользователям с медленным
каналом связи получить примерное представление о том, что он увидит.
80
Пример 2.5. Встраивание изображения на страницу.
<IMG src=image.jpg width=300 height=400 align=right vspace=10 hspace=10 border=2 al
t=Uncharted2 title=Uncharted2>
Uncharted 2: Among Thieves –
главный, пожалуй, претендент на звание игры 2009 года. Этот приключенческий экшен
великолепен практически во всем. Здесь есть увлекательный, отлично поданный сюжет, качество
которого обязательно оценят
поклонники Индианы Джонса. Здесь есть отличный геймплей –
с перестрелками, акробатикой, неожиданными ситуациями и
тщательно выверенным балансом. И здесь есть, наконец, самое главное –
потрясающее внимание абсолютно ко всем деталям,
даже самым мелким. В каждой, абсолютно каждой минуте прохождения игры можно найти что
-то свое, уникальное и необычное.
Результат выполнения кода показан на рис. 2.6.
Рис. 2.6. Пример встраивания изображения
Карты изображений
Наряду с использованием изображений в качестве иллюстраций к тексту
или элементов оформления web-страницы в HTML предусмотрена возможность
81
создания карт изображений (imagemap), отдельные области которых могут являться гиперссылками на другие разделы или страницы web-сайта. В общем
виде это соответствует использованию изображения в качестве гиперссылки с
тем отличием, что на одной карте изображений можно создать несколько несовпадающих областей и, соответственно, гиперссылок. Применение таких карт
изображений удобно для создания географических справочных систем, путеводителей, карт погоды. Также карты изображений находят широкое применение
при создании сложных графических меню.
В HTML предусмотрены два варианта обработки карт изображений: обработка карты изображения непосредственно браузером и передача на сервер
координат указателя мыши для дальнейшей обработки.
Обрабатываемые браузером (автономные) карты изображений описываются с помощью атрибута usemap элемента IMG:
<IMG src=image.png usemap=#coordinates>
Где атрибут src содержит URI изображения, а usemap — ссылку на часть
HTML-документа, описывающего координатные области.
Координатные области карты изображений определяются при помощи тегов <map> и <area>. Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов:
shape — определяет форму области-ссылки. Атрибут может содержать
следующие значения:
rect — прямоугольник;
circle — окружность;
poly — многоугольник;
coords — определяет размеры области. Значение этого атрибута может
меняться в зависимости от типа размечаемой области. Для прямоугольной области указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях, для круглой указываются координаты центра
окружности и ее радиус, а для многоугольной последовательно указываются
координаты вершин многоугольника;
href — задает URI ссылки для перехода в случае щелчка мышью на
выбранной области.
Заданные при помощи тегов <area> координатные области изображения
ограничиваются при помощи тегов <map></map>.
82
Представление цвета в HTML
Встраивание изображений — не единственное средство HTML по работе
с графикой. Язык также позволяет задавать цвета фона, гиперссылок, шрифта,
таблиц и множества других элементов.
Цвета в HTML задаются в виде трех пар шестнадцатеричных цифр по
схеме RGB, где каждая пара отвечает за свой цвет: две первые цифры — красный, две в середине — зеленый, две последние цифры — синий. К примеру, код
#000000 соответствует черному цвету, а цвет #FFFFFF — белому.
Также цвета могут представляться с помощью ключевых слов, например
green, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, HTML позволяет использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
Перечень стандартных цветов HTML и их коды дан в табл. 2.4.
Таблица 2.4
Стандартные цвета HTML
Ключевое слово
Black (Черный)
Silver (Серебро)
Gray (Серый)
White (Белый)
Maroon (Бордовый)
Red (Красный)
Purple (Фиолетовый)
Fuchsia (Фуксия)
Код
#000000
#C0C0C0
#808080
#FFFFFF
#800000
#FF0000
#800080
#FF00FF
Ключевое слово
Green (Зеленый)
Lime (Известь)
Olive (Оливковый)
Yellow (Желтый)
Navy (Темно-синий)
Blue (Синий)
Teal (Чирок)
Aqua (Аква)
Код
#008000
#00FF00
#808000
#FFFF00
#000080
#0000FF
#008080
#00FFFF
В настоящее время разработана теория цвета, необходимая для использования при создании сайтов, а также имеется достаточно много профессиональных
генераторов цветовых схем для создания цветов палитр (http://www.color.ru).
2.4.2. Встраивание мультимедиа
Работа с мультимедийными данными является чуть ли не самым главным
двигателем прогресса web-технологий. Если в начале 2000-х гг. главными инструментом разработчиков являлись текстовая и графическая информация, то
83
сейчас количество и разнообразие различных мультимедийных данных поражает.
Все мультимедиа можно грубо разделить на три группы: аудио, видео и флэш.
Флэш-технологии, как уже говорилось ранее, в 2020 г. покинули просторы Интернета, а вот в отношении аудио и видео HTML5 сделал большой шаг вперед.
В HTML 4.01 и ранее, чтобы отобразить аудио или видео, необходимо
было использовать какой-либо сторонний плагин для встраивания мультимедиа
в страницу. Встраивание происходило при помощи следующих тегов:
• <applet>;
• <embed>;
• <object>.
У каждого из этих тегов также существовало множество атрибутов и параметров, в общем, разработчик должен был вручную настраивать проигрыватель, который будет воспроизводить аудио или видео.
Очень важная вещь, которая может пригодиться и современным разработчикам — это MIME-типы. Может возникнуть такая ситуация, в которой современный интерпретатор мультимедиа не сможет распознать медиа-элемент,
из-за чего придется вручную прописывать проигрыватель, как это делали разработчики до HTML5. И одним из важнейших элементов такого подхода будет
являться MIME-тип. Основные MIME-типы перечислены в табл. 2.5.
Таблица 2.5
Основные MIME-типы
Тип файла
Аудиозапись AU
Аудиозапись MIDI
Аудиозапись MP3
Аудиозапись WAV
Видео AVI
Видео MPEG
Видео quicktime
Flash
Расширение
.au
.mid
.mp3
.wav
.avi
.mpeg, .mpg
.mov
.swf
MIME-тип
audio/basic
audio/mid
audio/mpeg
audio/wav
video/x-msvideo
video/mpeg
video/quicktime
application/x-shockwave-flash
Также имелась возможность присвоения мультимедиа по ссылке. Это был
самый простой и в то же время самый ненадежный способ, но именно он лег в
основу нововведений HTML5:
<A href="music.mp3"> Песня </A>
84
С появлением HTML5 задача обработки мультимедиа значительно упростилась. Появилось два специальных тега:
<audio>;
<video>.
Тег <audio> предназначен для обработки аудио данных:
<audio src="URI" [controls] [autoplay="autoplay"] [loop="3"]> Мелодия </audio>
где src — атрибут, содержащий URI аудиоэлемента;
сontrols — атрибут, включающий отображение панели управления по умолчанию (при ручной настройке плеера данный атрибут не требуется);
autoplay — атрибут, определяющий автоматическое воспроизведение аудио при
открытии пользователем страницы;
loop — атрибут, определяющий количество воспроизведений.
Пример 2.6. Встраивание аудио плеера.
Рассмотрим пример встраивания аудиоплеера на страницу. Используется
.mp3 файл, хранящийся текущем каталоге.
<audio src="music.mp3" controls></audio>
Результат выполнения кода показан на рис. 2.7, а.
Тег <video> работает точно так же, как и <audio>, но с видеоэлементами:
<video src="URI" controls autoplay="autoplay" loop="3"></video>
Пример 2.7. Встраивание видеоплеера.
Рассмотрим пример встраивания видео на страницу. Для этого используем видеофайл с расширением .avi, хранящийся в текущем каталоге:
<video src="video.avi" controls></video>11
Результат выполнения кода показан на рис. 2.7, б.
85
а
б
Рис. 2.7. Примеры видеоплеера
а — пример аудиоплеера; б — пример видеоплеера
При ручной настройке плеера можно воспользоваться, например, Windows Media плеером, параметры для него указаны в табл. 2.6.
Таблица 2.6
Основные параметры проигрывателя
Имя параметра
FileName
Volume
PlayCount
Autostart
ShowDisplay
ShowControls
ShowAudioControls
ShowPositionControls
ShowTracker
Описание
Адрес воспроизводимого файла
Громкость
Количество повторений
Автоматическое воспроизведение
Показ информации о воспроизводимом файле
Показ панели управления воспроизведением
Показ панели управления звуком
Показ кнопки перемотки
Показ позиции воспроизведения
Значение
URI файла
Число
True/false
Для более корректного отображения видео можно использовать фрейм
проигрывателя источника. Например, видео с YouTube лучше всего представить в виде фрейма, в окне которого будет сам проигрыватель YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/lFX5cB7PMww" fr
ameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
Результат выполнения кода показан на рис. 2.8.
86
Рис. 2.8. Пример использования фрейма проигрывателя источника
2.5. Формы
Получение и обработка данных, введенных пользователем, является
неотъемлемой частью большинства web-сайтов. Ввод логина и пароля, написание ответа на форуме, поиск товара в интернет-магазине — все это и многое
другое реализуется с использованием HTML-форм.
Основой любой формы служит элемент FORM, требующий наличия закрывающего тега. Атрибуты этого элемента содержат информацию, общую для
всех полей формы. Большинство из них влияют на обработку формы, а не на ее
внешний вид.
Формы можно условно разбить на две части. Это видимая часть формы,
которая показывается пользователю, и невидимая — скрипт, который обрабатывает данные, полученные из формы. Технически формы передают данные от
пользователя удаленному серверу, где они обрабатываются с помощью языков
web-программирования. Получение и обработка данных форм будет рассмотрена в последующих разделах учебника, а этот раздел касается только конструирования форм средствами HTML.
Основными атрибутами элемента FORM являются следующие:
action — указывает URI обработчика данных для формы, то есть файла,
в котором описано, что нужно делать с данными формы. Если значение атрибута
не задано, то обработчиком является сам файл, в котором описана форма;
87
enctype — определяет MIME-тип данных, содержащихся в форме. Если
отправляются обычные данные, то атрибут может не указываться. При работе с
почтой необходимо использовать значения text/plain, а при загрузке файлов на
сервер — multipart/form-data;
method — задает HTTP-метод, которым будет передаваться форма.
Возможные методы описаны в разд. 1.3.3 учебника;
target — указывает на то, в каком окне выводить результат обработки
формы. В зависимости от значения атрибута страница с результатом обработки
загружается в:
_blank — в новое окно браузера;
_self — в текущее окно;
name — определяет имя формы.
Однако сам по себе элемент FORM только логически объединяет поля
формы, которые создаются с помощью управляющих элементов:
INPUT;
SELECT;
TEXTAREA.
2.5.1. Элемент INPUT
Наиболее популярным управляющим элементом форм, позволяющим создавать всевозможные поля для ввода и управления, является элемент INPUT,
не требующий закрывающего тега. Атрибуты элемента отличаются в зависимости от поля, для которого используется этот элемент. Тем не менее есть атрибуты, которые применяются вне зависимости от типа поля и являются обязательными. К ним относятся следующие атрибуты:
type — указывает на тип поля;
name — задает уникальное имя поля. Введенная пользователем информация будет передаваться обработчику в качестве переменной с этим именем;
value — определяет значение поля, которое будет передано обработчику.
Типом ввода может быть: поле ввода текста, пароля, поле добавления
файла, кнопка, переключатель, флажок или скрытое поле. Тип поля ввода задает значение атрибута type, которое может принимать одно из следующих значений:
text — поле ввода текста. Применяется для однострочного ввода текста. Помимо обязательных может содержать следующие атрибуты:
88
maxlength — определяет максимальное количество символов, которые
можно ввести в данную строку;
size — задает длину поля ввода в символах;
password — поле ввода пароля. Аналогично текстовому полю, за исключением того, что все введенные буквы закрываются звездочками, и увидеть
вводимый пароль невозможно;
button — кнопка. HTML позволяет создавать различные кнопки, в зависимости от того, что нужно сделать с формой. Для создания обычной кнопки
атрибуту type присваивается значение button, для кнопки подтверждения отправки формы — submit, а для очистки формы — reset. Атрибут value задает
надпись на кнопке;
file — поле добавления файла. Позволяет загружать файлы, выбирая их
через проводник. С помощью атрибута size можно отрегулировать длину поля;
image — поле-картинка. Позволяет использовать изображения в качестве кнопок. Поле обладает атрибутами аналогичными элементу IMG, рассмотренному в разд. 2.4.1;
radio — переключатель. Позволяет выбрать одно положение из всех
возможных. Для всех переключателей, которые принадлежат к одной группе,
должно быть установлено одно значение атрибута name. Атрибут value в этом
случае содержит значение, которое будет передано обработчику, если пользователь выберет указанное положение. Положение, выбранное по умолчанию,
можно задать с помощью атрибута checked;
checkbox — флажок. Аналогичен переключателю, только дает пользователю возможность выбирать сразу несколько из предложенных вариантов;
hidden — скрытое поле. Позволяет передавать дополнительную информацию, которая не должна быть видна пользователю.
Пример 2.8. Использование полей управляющего элемента INPUT
<!-Форма с именем testform, поддерживающая загрузку файлов.
Обработчик располагается в
файле test.php. Результаты обработки открываются в новом окне -->
<FORM action=test.php method=POST name=testform enctype=multipart/formdata target=_blank>
<!-- Текстовое поле ввода -->
ФИО: <INPUT type=text name=FIO value=ФИО maxlenght=70 size=20><br>
<!-- Поле ввода пароля -->
Пароль: <INPUT type=password name=password value=Пароль maxlenght=20 size=20><br>
89
<!-- Переключатель -->
Пол: <INPUT type=radio name=gender value=man> Мужской
<INPUT type=radio name=gender value=woman> Женский <br>
<!-- Флажки -->
Увлечения:<br><INPUT type=checkbox name=hobby[] value=movie> Кино <br>
<INPUT type=checkbox name=hobby[] value=sport> Спорт <br>
<INPUT type=checkbox name=hobby[] value=music> Музыка <br>
<INPUT type=checkbox name=hobby[] value=dance> Танцы <br>
<!-- Поле добавления файла -->
Фото: <INPUT type=file name=foto size=20><br><br>
<!-- Кнопки -->
<INPUT type=submit name=submit value=Отправить>
<INPUT type=reset name=reset value=Очистить>
<!-- Скрытое поле -->
<INPUT type=hidden name=id value=666>
</FORM>
Результат выполнения кода показан на рис. 2.9.
Рис. 2.9. Пример использования полей элемента INPUT
2.5.2. Элемент SELECT
Списки дают возможность расположить большое количество пунктов более компактно. При их создании пользователь сам может определить количество видимых элементов и настроить возможность выбора одного или нескольких из них. По функциям списки напоминают переключатели и флажки, однако
их плюс в компактности. С другой стороны, поиск по спискам занимает больше
времени.
Для создания списков используется элемент SELECT, который имеет два
атрибута, отвечающих за общее отображение списка. Атрибут size устанавли90
вает количество видимых элементов списка. Если он равен 1, а количество элементов списка больше одного, то появляется раскрывающийся список выбора.
Если же количество элементов списка превышает число, указанное атрибутом
size, добавляется полоса прокрутки. Атрибут multiple дает возможность выбирать несколько элементов из списка (для этого при выборе надо удерживать
клавишу Ctrl).
Для добавления в список пунктов используются элементы OPTION, которые располагают внутри элемента SELECT. Атрибут value задает значение, которое будет передано обработчику в случае выбора соответствующего пункта.
Атрибут selected задает пункт, выбранный по умолчанию. Название элемента
списка задается внутри элемента OPTION.
Систематизировать и уточнить списки можно с помощью элемента
OPTGROUP, который создает заголовки в списках. У него есть единственный
атрибут label, указывающий текст заголовка.
Пример 2.9. Использование списков форм.
Языки web-программирования:<br>
<SELECT name=languages size=1>
<OPTGROUP label=Серверные>
<OPTION value=php selected> PHP </OPTION>
<OPTION value=asp> ASP.NET </OPTION>
<OPTION value=perl> Perl </OPTION>
<OPTION value=ruby> Ruby </OPTION>
<OPTGROUP label=Клиентские>
<OPTION value=javascript> JavaScript </OPTION>
<OPTION value=vbscript> VBScript </OPTION>
<OPTION value=actioncript> ActionScript </OPTION>
</SELECT>
Результат выполнения кода показан на рис. 2.10.
Рис. 2.10. Пример списка формы
91
2.5.3. Элемент TEXTAREA
В процессе работы с сайтом может сложиться ситуация, когда размеров
обычных текстовых полей не хватает для ввода текста, например, при публикации статей или комментариев. Для этих целей в HTML-формах служат большие
текстовые поля.
Для создания больших текстовых полей применяется элемент
TEXTAREA, требующий наличие закрывающего тега. Текст, вводимый по
умолчанию, находится между открывающим и закрывающим тегами этого элемента. Данный элемент имеет следующие атрибуты:
cols — задает размер поля по горизонтали;
rows — задает размер поля по вертикали;
readonly — устанавливает запрет на редактирование текста в поле;
wrap — указывает браузеру, как осуществляется перенос текста и в каком виде текст отправляется на сервер. Атрибут может принимать значения:
hard — автоматически переносит строку, когда она доходит до границы
окна ввода, и передает текст на сервер с такой расстановкой переносов;
soft — переносит строку автоматически, но на сервер знак переноса передает только там, где была нажата клавиша Enter;
off — переносит слова только при нажатии клавиши Enter и, если строка превышает горизонтальный размер окна, появляется полоса прокрутки.
Пример 2.10. Использование больших текстовых полей.
Описание:<br>
<TEXTAREA cols=30 rows=10 name=description
wrap=off> PHP –
скриптовый язык программирования общего назначения, препроцессор гипертекста. </TEXTAREA>
Результат выполнения кода показан на рис. 2.11.
Рис. 2.11. Пример большого текстового поля
92
2.6. HTML5
HTML5 на данный момент стал практически единственным и повсеместно используемым языком структурирования web-страниц. Если старые версии
HTML 4.01 и ранее имели ряд недостатков, из-за которых выбор разработчика
иногда мог переходить на другие языки разметки, например XHTML или XML,
то HTML5 стал единогласно общепринятым стандартом. В данном разделе будет показана структура документа HTML5 согласно стандартам W3C, показаны
его преимущества над старыми языками разметки, будут приведены примеры
настоящих web-страниц, оформленных в соответствии со всеми нормами и правилами.
2.6.1. Структура HTML5-документа
Создание грамотного HTML5-документа является важной задачей. Если
при использовании простой HTML-страницы с CSS-стилями проблем может не
возникнуть даже при отсутствии тегов <html></html>, то вот при использовании серверных языков программирования они могут появиться. Помимо этого,
существуют стандарты, которые следует соблюдать, особенно при работе в команде или в случае, если данный код будет позднее сопровождаться другими
разработчиками.
В сравнении со старыми языками представления web-страниц, такими как
XHTML, XML или HTML 4.01 и ранее, в HTML5 структура документа стала
куда проще. HTML5 не требует описания правил DTD, прописывания версии
или пространства имен. В частности, эти изменения сильно упростили процедуру описания структуры документа в HTML5.
Начинается документ HTML5 с объявления. Как уже говорилось ранее, в
HTML5, в отличие от своих предшественников, существует один-единственный
вариант объявления документа. Объявление документа можно не использовать,
если проект не выходит за рамки HTML и CSS, но при использовании серверных языков программирования документ объявлять стоит всегда. Объявление
документа в HTML5 имеет вид: <!DOCTYPE html>.
После объявления документа следует тег <html>. По стандарту W3C любой html-документ должен как минимум обладать тегами <html></html>. Данный тег желательно использовать всегда, иначе многие другие теги могут быть
не восприняты программным обеспечением. В данном теге можно указать язык
документа, например <html lang="en">. Это необязательный параметр, но для
93
понимания того, что происходит в документе, особенно при работе с контентом
на другом языке, его лучше использовать.
Далее следует заголовок страницы, он выделяется специальными тегами
<head></head>. Прежде всего в этих тегах описывается название страницы при
помощи тегов <title></title>, также имеется возможность использовать мини
изображение. В данном разделе описывается немаловажные теги <meta> и
<link>, в которых можно указать кодировку страницы и множество других важных параметров, например: <meta charset="UTF-8">. Да, рекомендуется использовать именно эту кодировку, а не какую-либо другую. UTF-8 является кодировкой по умолчанию, поэтому большинство программ использует именно ее.
Основную часть страницы составляет тело, которое обозначается тэгом
<body></body>. Тело содержит контент, который пользователь видит у себя на
устройстве. Кроме того, в тело страницы встраиваются скрипты различных
языков, например, клиентского JavaScript или процедуры и функции серверных
языков.
Структура валидного HTML5-документа представлена рис. 2.12.
Рис. 2.12. Структура HTML5-документа
2.6.2. Пример валидного HTML5-документа
В качестве примера документа, соответствующего стандарту HTML5,
можно рассмотреть следующий:
<!DOCTYPE html> <!-- объявление документа !-->
<html lang="ru">
<!-- открытие документа и задание языка !-->
94
<head>
<!-- заголовок документа !-->
<meta charset="UTF-8"> <!-- указание кодировки !-->
<title>Заголовок страницы</title> <!-- наименование заголовка страницы !-->
<meta name="description" content="Пример правильно составленного документа в HT
ML5">
<!-- описание контента на странице !-->
<link rel="stylesheet" href="style.css"> <!-привязка к документу таблицы стилей !-->
<link rel="shortcut icon" href="minimg.ico"> <!-- миниизображение для заголовка страницы !-->
</head>
<body>
<!-- пример наполнения контентом тела страницы
!-->
<p>Здесь может быть какая-то информация</p>
<p></p>
<ul>Ненумерованный список
<li>Первый</li>
<li>Второй</li>
</ul>
<p></p>
<ol>Нумерованный список
<li>Первый</li>
<li>Второй</li>
</ol>
<p></p>
<a href="https://www.example.com">Ссылка</a>
<p></p>
<script>
/* встраивание клиентских языков программирования в документ */
/* здесь можно что-то написать на JavaScript */
</script>
<img src="image.png" alt="неработающая картинка">
<p>и т.д.</p>
</body>
</html>
Если соблюдать предписания стандарта, то можно избежать множества
проблем при создании и использовании web-страницы, поэтому настоятельно
рекомендуется им следовать.
Важно! При создании HTML-документа необходимо использовать кодировку UTF-8, в противном случае могут возникнуть проблемы с отображением
содержимого страницы.
О том, как встраиваются в HTML-документ серверные языки программирования, в частности PHP, будет рассмотрено позже.
95
2.7. Верстка web-страниц
Верстка web-страниц является неотъемлемой частью процесса изготовления сайтов и заключается в формировании web-страницы по готовому макету.
Процесс верстки условно можно разделить на два этапа — компоновка макета и
непосредственно верстка этого макета средствами HTML.
Под компоновкой макета принято понимать условное (схематическое)
расположение блоков информации на будущей web-странице. Принято выделять четыре блока информации:
«шапка» — занимает верхнюю часть сайта в окне браузера и может
содержать логотип, рекламную информацию, поисковую форму и пр.;
меню — организует систему навигации по web-сайту. Меню может
быть вертикальным, горизонтальным, а также содержать подменю;
блок контента — содержит содержательную часть web-сайта (новости,
каталог продукции и т.д.);
«подвал» — нижняя часть web-сайта, подчеркивающая его четкую
структуру и выделяющая блок контента относительно других блоков информации. Он может содержать информацию об авторском праве разработчиков webсайта, сведения о сервере, координаты для связи, рекламную информацию и
прочее.
Пример компоновки макета web-страницы, содержащей вышеперечисленные блоки информации, показан на рис. 2.13.
Верстка полученного макета реализуется одним из трех способов:
табличная верстка — верстка, при которой макет представляется в
виде совокупности вложенных таблиц (элемент TABLE). На сегодняшний день
наибольшее распространение она получила при создании форумов.
Достоинства табличной верстки:
o простота в понимании — табличная верстка интуитивно понятна и почти не требует знаний каскадных таблиц стилей;
o возможность создавать колонки. Под колонкой понимается область,
которая состоит из строк текста, образующих вертикальный ряд. Макет на
рис. 2.13 состоит из двух колонок;
o кроссплатформенность — web-страницы с табличной версткой выглядят почти одинаково во всех браузерах;
o элементы таблицы можно изменять и выравнивать единовременно по
длине и ширине, что позволяет размещать эти элементы на странице различными способами.
96
Недостатки табличной верстки:
она использует элементы разметки, не соответствующие той семантике, которую они несут, так как изначально таблицы не были предназначены для
построения макета страниц, а служили непосредственно для вывода табличных
данных;
громоздкость кода, особенно при использовании вложенных таблиц;
web-страницы, использующие табличную верстку, выводятся на экран
только после полной загрузки, что отражается на скорости.
Рис. 2.13. Пример компоновки макета web-страницы
Пример 2.11. Табличная верстка.
Рассмотрим пример верстки макета, приведенного на рис. 2.13, с помощью таблиц:
<table border="1" height="400" width="100%">
<tr>
<td align="center" colspan="3" height="5%">
<table>
<tr>
<td> "Шапка" </td>
</tr>
</table>
</td>
</tr>
97
<tr>
<td width="25%">
<table>
<tr>
<td> Меню </td>
</tr>
</table>
</td>
<td width="75%" height="90%" colspan="2">
<table>
<tr>
<td> Блок контента </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="3" height="5%">
<table class="bottom">
<tr>
<td> "Подвал" </td>
</tr>
</table>
</td>
</tr>
</table>
блочная верстка — верстка, при которой макет представляется в виде
совокупности вложенных блоков (элемент DIV). Благодаря тесной связи с каскадными таблицами стилей, речь о которых пойдет в следующей главе учебника, она применяется для верстки большинства современных web-сайтов.
Достоинства блочной верстки:
соответствие стандартам — корректная блочная верстка соответствует
всем стандартам HTML;
правильное отображение web-страниц разными устройствами вывода;
компактный код;
элементы web-страниц, использующих блочную верстку, выводятся на
экран сразу, что увеличивает скорость загрузки;
web-страницы с блочной версткой лучше индексируются поисковыми
машинами.
Недостатки блочной верстки:
элементы web-страниц при блочной верстке не имеют жесткой привязки, поэтому при использовании различных браузеров могут «расползаться»;
необходимость знания каскадных таблиц стилей;
98
Пример 2.12. Блочная верстка.
Рассмотрим пример верстки макета, приведенного на рис. 2.13, с помощью блоков:
<div style="text-align:center; border:1px solid #000; height:5%"> "Шапка" </div>
<div style="height:400">
<div style="textalign:left; border:1px solid #000; width:25%; float:left; height:400;"> Меню </div>
<div style="text-align:left; border:1px solid #000; width:75%; marginleft:25%; height:400;"> Блок контента </div>
</div>
<div style="text-align:center; border:1px solid #000; height:5%"> "Подвал" </div>
смешанная верстка — верстка, при которой макет представляется в
виде совокупности вложенных блоков и таблиц. Оптимальный вариант верстки,
поскольку он обладает всеми преимуществами как блочной, так и табличной
верстки. Как правило, при такой верстке колонки и элементы, требующие жесткой фиксации на странице, верстаются с помощью таблиц, а остальные же элементы страницы — с помощью блоков.
Пример 2.13. Смешанная верстка.
Рассмотрим пример верстки макета, приведенного на рис. 2.13, с помощью таблиц и блоков:
<div style="text-align:center; border:1px solid #000; height:5%"> "Шапка" </div>
<table border="1" height="400" width="100%">
<tr>
<td width="25%" height="100%">
<table>
<tr>
<td> Меню </td>
</tr>
</table>
</td>
<td width="75%" height="100%" colspan="2">
<table>
<tr>
<td> Блок контента </td>
</tr>
</table>
</td>
</tr>
</table>
<div style="text-align:center; border:1px solid #000; height:5%"> "Подвал" </div>
99
В HTML5 для верстки web-страницы появились теги <header> и
<footer>, они выполняют функции блоков «шапка» и «подвал» соответственно,
имеют некоторый набор встроенных функций характерных описываемым блокам. Пример верстки с использованием данных тегов:
<header style="border:1px solid #000;">Шапка</header>
<div style="height:400">
<div style="textalign:left; border:1px solid #000; width:25%; float:left; height:400;"> Меню </div>
<div style="text-align:left; border:1px solid #000; width:75%; marginleft:25%; height:400;"> Блок контента</div>
</div>
<footer style="border:1px solid #000;">Подвал</footer>
Тип верстки также зависит от способа задания размеров элементам страницы. Так, верстка, при которой размер элемента задается в абсолютных величинах (в пикселях), называется фиксированной. Такая верстка применяется, если макет страницы проработан очень тонко, и малейшее нарушение положения
элементов может его разрушить. Также страницы с фиксированной версткой
приемлемо выглядят при любом разрешении экрана. Однако если разрешение
меньше того, под которое адаптирована верстка, появляются полосы прокрутки, а при больших разрешениях — неэстетичные пустоты.
Если же размеры элементов страницы задаются в процентах, то такая
верстка называется «резиновой». Страницы с такой версткой гибко подстраиваются под любое разрешение экрана, поэтому не возникает пустот и полос
прокрутки. К минусам «резиновой» верстки можно отнести непредсказуемость
поведения элементов страницы при изменении размеров окна браузера.
Таким образом, каждый тип верстки обладает своими достоинствами и
недостатками. Поэтому выбор той или иной верстки зависит от предпочтений
разработчика и поставленных задач. В большинстве случаев использование
смешанных видов верстки наиболее рационально.
Контрольные вопросы
1. Кто является разработчиком языка HTML, и какая версия языка на сегодняшний день является последней?
2. В чем заключается различие между элементом и тегом?
100
3. Какова структура HTML-документа?
4. Что такое правило DTD и какие правила DTD существуют?
5. Какими инструментами для форматирования текста обладает HTML?
6. Где применяются HTML-таблицы и каковы их основные атрибуты?
7. Каким образом происходит вставка изображений в текст и для чего
нужны карты изображений?
8. Где применяются HTML-формы и каковы их основные атрибуты?
9. Каковы основные управляющие элементы форм?
10. В чем заключаются основные стандарты валидного HTML5документа?
11. Что такое валидность и каким образом осуществляется ее проверка?
12. акие типы верстки существуют и в чем их особенности?
101
ГЛАВА 3. ОСНОВЫ CSS
В ранние годы Всемирной паутины HTML был довольно бедным языком.
Он почти целиком состоял из структурных элементов, полезных для описания
абзацев, гиперссылок, списков и заголовков. В нем не было таблиц, фреймов
или сложной разметки — всего того, что сегодня считается абсолютно необходимым для создания web-страниц. Другими словами, язык не затрагивал описание внешнего вида — он лишь определял схему разметки.
Начиная с версии 3.2, HTML получил значительные средства представления. Появилась возможность изменять цвет и размер текста с помощью элемента font, назначать фоновые цвета и изображения для документов и таблиц, задавать атрибуты элемента table и форматировать текст и мн. др. В результате этого объем разметки начал существенно превышать объем полезной информации,
а сами web-документы стали менее структурированными. Несмотря на то, что
такой подход отчасти удобен для разработчиков, так как позволяет осуществлять полный контроль над содержимым страницы, он обладает целым рядом
недостатков:
неструктурированные страницы значительно усложняют индексирование содержимого. Поисковые механизмы позволяют вести поиск только по заголовкам страниц, или только по заголовкам разделов страниц, или только по
тексту абзацев. Однако для реализации таких возможностей содержимое страниц должно соответствовать некому стандарту структурированной разметки;
недостаточная структурированность снижает удобство восприятия;
улучшенное представление страницы возможно только при наличии
некоторой структуры документа;
структурированная разметка упрощает обслуживание сайта, так как
позволяет очистить код и упростить поиск в нем.
Для решения проблемы «загрязнения» HTML разметкой представления и
для придания HTML-документам некой структурности, консорциум W3C в
1995 г. начал публикацию рабочего варианта стандарта, названного CSS
(Cascading Style Sheets — каскадные таблицы стилей). К 1996 г. он получил
статус рекомендации. Спецификации второго уровня (CSS2) была выпущена в
мае 1998 г. Пересмотренный вариант спецификации (CSS2.1) увидел свет в апреле 2008 г. На данный момент самой распространенной версией языка является CSS3. В сравнении с предыдущими версиями движок CSS3 позволяет создавать анимированные элементы без использования JavaScript, поддерживать линейные и радиальные градиенты, тени, сглаживания и т.д. Существует также и
102
концепция CSS4, разработка этого языка ведется еще с 2011 г. Инженеры сообщают о больших возможностях движка четвертой части, но пока широкого
распространения она не получила.
В учебнике рассматривается CSS3 как самая распространенная и используемая в настоящее время версия. В данной главе рассматриваются общие правила языка и основные свойства.
3.1. Общие положения
Основное предназначение языка CSS — задание внешнего вида HTMLдокумента. Модификация содержимого таблицы стилей меняет внешний вид
документа, не затрагивая его структуры и информационного содержания. Одна
и та же таблица стилей может применяться к нескольким документам и, наоборот, к одному и тому же документу может быть применено несколько таблиц
стилей. В последнем случае браузер учитывает приоритеты таблиц и по определенным правилам разрешает возникающие конфликты, в результате чего таблицы выстраиваются неким каскадом (отсюда и название языка).
Кроме стилизации HTML-документов, CSS обеспечивает еще и позиционирование элементов. Для любого элемента можно задать размеры и координаты расположения, а также другие параметры визуализации. Так что, используя
CSS, можно обойтись без тегов таблиц и фреймов, широко применяемых для
компоновки web-страниц.
Основу синтаксиса CSS составляют правила форматирования, которые
представляют собой набор стилевых параметров, описывающих оформление
самой web-страницы и отдельных ее фрагментов. Каждое правило CSS должно
быть привязано к соответствующему элементу web-страницы. После привязки
описываемые выбранным правилом параметры начинают применяться к данному элементу. Привязка может быть явная, когда разработчик непосредственно указывает, какой стиль к какому элементу web-страницы привязан, или неявная, когда правило автоматически привязывается ко всем элементам webстраницы, созданным с помощью определенного тега. Подробнее правила форматирования CSS будут рассмотрены в гл. 3.2 настоящего учебника.
Помимо правил форматирования, язык CSS, как и другие языки программирования, содержит ключевые слова, а также позволяет использовать комментарии. Ключевые слова используются для создания объявлений и не должны
заключаться в кавычки (например, border: none). Комментарии в CSS начина-
103
ются с символов /*, заканчиваются символами */ и могут находиться в любом
месте таблицы.
3.2. Встраивание CSS в HTML
CSS — встраиваемый в HTML язык. Правила CSS можно присоединять к
HTML-документам несколькими способами:
внедрение — запись правил непосредственно в HTML-коде с помощью элемента STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD, например следующим образом:
<head>
<style type="text/css">
h1 {
font-size: 12px
}
</style>
</head>
Используя такой способ, стили будут изменяться только на одной странице, и для внесения изменений на всем сайте придется редактировать все
страницы;
связывание — запись правил в отдельном текстовом файле (с расширением .css) и помещение в HTML-документ ссылки на него. Связывание осуществляется с помощью элемента LINK, размещаемого внутри элемента HEAD,
например, так:
<head>
<link rel="stylesheet" type="text/css" href="stl.css" media="screen">
</head>
Элемент link имеет четыре атрибута:
– rel — тип соединения, который для таблиц стилей задается как
stylesheet;
– type — тип присоединяемой таблицы стилей. Так как элемент LINK
может использоваться для присоединения других файлов, то необходимо указывать тип присоединяемого файла. Для таблиц стилей это значение text/css;
– href — местонахождение таблицы стилей, то есть адрес и имя файла;
– media — тип устройства, для которого применяется стилевое оформление.
104
Таблица стилей из внешнего файла действует на все документы, в которых содержится ссылка на нее. Она передается браузеру вместе с документом,
который на нее ссылается. Однако браузеры могут кэшировать загруженные
данные и при повторном запросе таблицы стилей последняя не будет передаваться с сервера снова, если она еще находится в кэше. Хранение таблицы стилей в отдельном файле выгодно, если она применяется к нескольким документам одного сайта. В этом случае изменения в одном файле распространяются
сразу на несколько документов;
встраивание — указание стиля непосредственно в нужном теге с помощью атрибута style, например, в следующем виде:
<h1 style="color: green; font-size: 12px"> Заголовок </h1>
Данный способ удобен, когда требуется назначить индивидуальные стилевые параметры для некоторых элементов только в одном документе, не корректируя основную таблицу стилей в элементе STYLE или во внешнем файле.
Все эти способы можно использовать как по отдельности, так и вместе,
но предпочтительнее использовать только второй способ.
3.3. Правила CSS
Таблица стилей, внедренная или связанная, содержит одно или несколько
правил форматирования, каждое из которых состоит из двух основных частей:
селектора и блока объявлений. Блок объявлений состоит из одного или более
объявлений, каждое из которых представляет собой сочетание свойства и значения. Общая структура правила CSS показана на рис. 3.1.
Рис. 3.1. Структура правила CSS
Селектор, расположенный в левой части правила, определяет, на какие
части документа распространяется правило. На рис. 3.1 выбраны элементы типа
105
H1, это означает, что правило будет распространяться на все заголовки первого
уровня.
В правой части правила находится блок объявлений, образованный одним или несколькими объявлениями, разделенными точкой с запятой. Если
объявление одно, точка с запятой может не указываться. На рис. 3.1 представлен блок, содержащий два объявления. Согласно им все элементы типа H1 этого документа будут иметь размер в 12 пикселей и выводиться синим цветом.
3.3.1. Селекторы CSS
В CSS под селектором понимается множество элементов, к которому
применяется допустимое правило форматирования. Различают следующие селекторы:
универсальный (обозначаемый *) — свойства с таким селектором
применяются ко всем элементам HTML страницы, например:
* {font-size: 12px};
типа — базовые селекторы, содержащие имена типов элементов
HTML. Например, следующее правило:
h1 {font-size: 12px; font-family: Arial}
означает, что все заголовки HTML-документа будут отображаться размером 12
пикселей и шрифтом Arial. Для задания разным элементам документа одних и
тех же свойств селекторы типов элементов можно сгруппировать в список, разделив их запятыми. Например, следующее правило:
h1, h2, p {font-size: 12px; font-family: Arial}
означает, что свойства, перечисленные в фигурных скобках, будут действовать
на элементы типов H1, H2 и P;
потомков — селекторы, применяемые для задания свойств элементу,
который располагается непосредственно внутри какого-то другого элемента, то
есть является его потомком. Селекторы потомков состоят из двух и более селекторов элементов, разделенных пробелом. Так, для задания всем ячейкам
таблицы одинакового выравнивания содержимого по вертикали можно воспользоваться следующим правилом:
table td {vertical-align:top};
дочерние — действуют на элементы, которые непосредственно располагаются внутри родительских элементов. Отличие данных селекторов от се
106
лекторов потомков заключается в том, что стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, то есть непосредственно располагается внутри родительского элемента. Для селекторов потомков же допустим любой уровень вложенности. Предыдущий пример при
использовании дочерних селекторов будет выглядеть следующим образом:
table > td {vertical-align: top};
сестринские — действуют на элементы, которые непосредственно
следуют друг за другом в документе. Например, задать размер вертикального
пространства между таблицей и абзацем, расположенными по соседству в документе, можно, используя следующее правило:
table + p {margin-top: 12};
атрибутов — селекторы, используемые для установления стиля по
присутствию определенного атрибута элемента или его значения. Область действия селекторов атрибутов бывает четырех видов:
[attr] — элементы, у которых установлен атрибут attr. Например:
h1[font-family] {font-size: 12px}.
Данное правило будет распространяться на все заголовки первого уровня,
которым задан атрибут font-family;
[attr=val] — элементы, у которых атрибут attr имеет значение val,
например, в
h1[font-family=Arial][font-size=12px] {font-color: red}
селектор сопоставляется всем заголовкам первого уровня, имеющим шрифт
Arial и размер в 12 пикселей;
[attr~=val] — элементы, у которых атрибут attr имеет в качестве значения список слов, разделенных пробелом, и одно из этих слов есть val. Например, в
a[rel~=bookmark] {color: blue}
селектор будет сопоставляться ссылкам, одним из значения атрибута rel которых является bookmark;
[attr|=val] — элементы, у которых атрибут attr имеет в качестве значения список слов, разделенных дефисом, и первое слово есть val. Например,
правило:
div[class|="block"] a {color: blue}
107
будет задавать цвет ссылок, расположенных внутри блока div, название класса
которого содержит пробелы и начинается со слова block.
Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных
случаях квадратные скобки идут подряд;
классов — произвольные слова, подобные именам переменных, перед
которыми ставится точка. Для применения параметров CSS с данными селекторами к элементам последние должны иметь заданный атрибут class. Например:
<style type="text/css">
.arial {
font-family: arial;
font-size: 12px
}
</style>
<p class="arial"> Абзац </p>
Данный тип селекторов применяется в тех случаях, когда на странице нескольким элементам требуется задать один и тот же стиль;
идентификаторов — произвольные слова, подобные именам переменных, перед которыми ставится #. Для применения параметров CSS с данными
селекторами к элементам последние должны иметь заданный атрибут id. Так
как значение атрибута id должно быть уникальным, то стилевые параметры
применяются к единственному элементу, например, к заголовку H1:
<style type="text/css">
#header {
font-family: arial;
font-size: 12px
}
</style>
<h1 id="header"> Заголовок </h1>
3.3.2. Псевдоклассы и псевдоэлементы
В CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа, из-за чего реализовать некоторые
виды форматирования невозможно. Например, в HTML нет элемента, который
бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS,
который бы мог указывать на нее.
108
Для решения этой проблемы в CSS существуют понятия псевдокласс
и псевдоэлемент. Они позволяют назначать стили структурам, существование
которых в документе необязательно, или классам, наличие которых зависит от
состояния элемента или документа в целом. Иначе говоря, стили применяются
к частям документа не на основании информации, содержащейся в структуре
документа, и способом, который не может быть определен путем простого изучения разметки документа. Все ключевые слова псевдоклассов и псевдоэлементов начинаются с двоеточия (:) и являются регистрозависимыми.
Псевдоклассы CSS подразделяются на:
статические — псевдоклассы, не меняющие стилевого оформления
документа во время его просмотра. К ним относятся следующие псевдоклассы:
:link — ссылается на любую гиперссылку (то есть имеющую элемент
HREF) и указывает на адрес, который не был посещен:
a:link {
color: blue
}
:link {
color: blue
}
:visited — ссылается на любую гиперссылку, указывающую на уже посещенный адрес:
a:visited {
color: red
}
:visited {
color: red
}
:first-child — сопоставляется элементу, который является первым дочерним элементом другого элемента. Рассмотрим правило, устанавливающее
каждому элементу P, который является первым дочерним по отношению к элементу DIV, размер шрифта 12:
div>p:first-child {
font-size: 12px
}
109
:lang — сопоставляется элементу на основании его языка. Например,
для выделения курсивом любого элемента на немецком языке можно воспользоваться правилом:
*:lang(de) {font-style: italic};
динамические — псевдоклассы, которые могут изменять внешний вид
документа в результате действий пользователя. К ним относятся следующие
псевдоклассы:
:hover — ссылается на любой элемент, над которым размещен указатель некоторого устройства (чаще всего курсор мыши):
a:hover {color: green};
:focus — ссылается на любой элемент, которому в настоящий момент
принадлежит фокус ввода (например, гиперссылка, по которой проводят курсором мыши):
a:focus {color: red};
:active — ссылается на любой элемент, который был активирован пользователем (например, зажатая гиперссылка):
a:active {color: navy}.
Динамические псевдоклассы также можно сочетать:
a:active:hover {background: yellow}.
CSS содержит также следующие псевдоэлементы:
:first-line — используется для применения стилей к первой строке абзаца:
p:first-line {color: red};
:first-letter — используется для стилевого оформления первой буквы
элемента. Например, сделать первую букву каждого элемента в два раза больше
можно следующим образом:
h1:first-letter {font-size: 300%};
:before и :after — предназначены для добавления генерируемого содержимого перед и после элемента соответственно. Так, для завершения документа строкой "Конец", можно воспользоваться правилом:
body:after {content: "Конец"}.
110
3.3.3. Правила @
В CSS помимо обычных правил существуют также так называемые правила @, которые позволяют настраивать параметры файла стилей. Все они
начинаются со знака @ и, как правило, пишутся в самом начале .css файла.
Рассмотрим основные правила @:
@charset — указывает на то, какую кодировку использует файл стилей. Например, правило для кодировки UTF-8 будет выглядеть так:
@charset "UTF-8";
@media — позволяет задавать правила CSS для различных устройств в
пределах одной таблицы стилей, разделенных запятыми.
Основные устройства (медиатипы), которые могут быть указаны в правиле @media:
all — любое устройство, используется по умолчанию;
braille — устройства, основанные на системе Брайля, предназначенные
для слепых людей;
handheld — карманные компьютеры, мобильные телефоны и аналогичные устройства;
print — устройства печати;
projection — проекторы;
screen — экран монитора;
tv — телевизоры;
Зададим размер шрифта 12 при просмотре документа на экране и 10 при
печати:
@media print {
body {
font-size: 10px
}
}
@media screen {
body {
font-size: 12px
}
}
@import — позволяет импортировать правила стилей из других
таблиц:
111
@import "style.css";
@import url("style.css");
Также можно задать правила @import, зависящие от устройства. Тогда в
правилах импортирования после URL задается список устройств, разделенных
запятыми:
@import url("style.css") handheld, screen;
3.3.4. Приоритеты CSS-правил
Если для одного и того же элемента определены одновременно несколько
правил форматирования из одной или нескольких таблиц, то они применяются
каскадно, по следующему алгоритму.
1. Наивысшим приоритетом обладают стили, заданные атрибутом style тега рассматриваемого элемента. Если он не задан, то рассматриваются все определения в правилах с селекторами, соответствующие рассматриваемому элементу. Если таковых нет, то используются значения, наследуемые от родительских
элементов. Если они не определены, то берется значение по умолчанию.
2. Если элементу соответствует несколько стилей, то они упорядочиваются по специфичности селектора, вычисляемой следующим образом. Подсчитываются три числа:
k1 — количество в селекторе значений атрибута id;
k2 — количество в селекторе классов;
k3 — количество в селекторе имен тегов.
Эти числа записываются как k1k2k3, и полученное таким образом число
представляет уровень специфичности (вес) селектора. Выбираются определения параметров с наибольшей специфичностью. Примеры специфичности селекторов приведены в табл. 3.1.
Таблица 3.1
Примеры специфичности селекторов
Селектор
p
div p
.myclass
p.myclass
#element
#element.myclass
Значения k
k1 = 0, k2 = 0, k3 = 1
k1 = 0, k2 = 0, k3 = 2
k1 = 0, k2 = 1, k3 = 0
k1 = 0, k2 = 1, k3 = 1
k1 = 1, k2 = 0, k3 = 0
k1 = 1, k2 = 1, k3 = 0
112
Специфичность
1
2
10
11
100
110
3. Если элементу все еще соответствуют несколько стилей, то они упорядочиваются по своему происхождению: принятые браузером по умолчанию,
пользовательские, авторские;
4. Если элементу все еще соответствует несколько стилей, то они сортируются по порядку их упоминания в таблице стилей. При этом стили в импортированной таблице (вызываемые правилом @import) считаются предшествующими стилям таблицы, в которую они были импортированы. Наибольший
приоритет имеет последний стиль.
Приоритетом правил можно управлять с помощью директивы !important.
Она записывается сразу после стилевого параметра, приоритет которого следует увеличить:
h1 {font-size: 12px !important; font-family: Arial}.
Параметр таблицы стилей пользователя, помеченный как !important, имеет более высокий приоритет, чем тот же параметр автора, заданный без этой
директивы. Авторский параметр с пометкой !important обладает более высоким
приоритетом, чем пользовательский, даже если он имеет такую же пометку.
3.4. Свойства CSS
CSS содержит несколько десятков свойств, позволяющих провести практически полную стилизацию каждого элемента в HTML-документе. Всех их
можно разделить на следующие категории:
свойства текста;
свойства шрифта;
свойства цвета и фона;
свойства блока;
свойства форматирования и позиционирования;
свойства анимации;
свойства теней и прозрачности;
свойства трансформации.
Многие из этих свойств принимают в качестве значений числа. В этом
случае для них необходимо указывать единицы измерения. В CSS имеются следующие единицы измерения:
абсолютные — единицы, не зависящие от типов устройств отображения. К таким единицам измерения относятся сантиметры (cm), миллиметры
(mm), дюймы (in), пункты (pt) и пики (pc);
113
относительные — единицы, определяющие размер элемента относительно какой-либо абсолютной величины. К ним относятся em, ex и %. 1 em равен размеру так называемого родительского шрифта, 1 ex — высоте строчной
буквы «х». Проценты же показывают отношение к величине некоторого другого элемента. Такой величиной может выступать, например, значение ширины
контейнера, содержащего данный элемент, или величина текущего шрифта;
пиксели (px) — размер элементарной единицы графического растрового изображения. Из-за того, что устройства отображения могут иметь различное
разрешение экрана, пиксели имеют относительный характер. Например, если
монитор настроен на отображение по горизонтали 1 024 точки (пикселей), то
отрезок длиной 512px займет половину экрана. Если же монитор настроен на
отображение 512 точек, то тот же отрезок займет всю ширину экрана;
Далее подробнее рассматриваются наиболее используемые в разработке
web-страниц свойства CSS.
3.4.1. Свойства текста
Изменять параметры текста позволяют следующие свойства CSS:
letter-spacing — устанавливает расстояние между символами:
h1 {letter-spacing: 1px};
line-height — устанавливает расстояние между линиями в элементе:
h2 {line-height: 2px};
text-decoration — позволяет задать один из следующих эффектов декорирования текста:
none — нет эффекта;
underline — подчеркивание;
overline — черта над текстом;
line-through — перечеркивание;
blink — мерцание.
Одновременно можно использовать несколько стилей, перечислив их через пробел:
.classtext {text-decoration: underline blink};
text-transform — изменяет регистр символов в элементе. Свойство
может иметь одно из следующих значений:
capitalize — первый символ каждого слова прописной;
uppercase — все буквы прописные;
114
lowercase — все буквы строчные;
p {text-transform: lowercase};
text-align — определяет горизонтальное выравнивание текста в пределах элемента. Возможны следующие значения:
center — выравнивание по центру;
left — выравнивание по левому краю;
right — выравнивание по правому краю;
justify — выравнивание по ширине, то есть одновременное выравнивание по левому и правому краю;
auto — без выравнивания;
#header {text-align: justify};
text-indent — устанавливает начальный отступ первой строки элемента:
p {text-indent: 10ex};
vertical-align — определяет вертикальное выравнивание текста относительно элемента, окружающего текста или ячейки таблицы. Свойство может
принимать одно из следующих значений:
baseline — выравнивание по базовой линии родительского элемента,
содержащего данный текст. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента;
bottom — выравнивание по нижней части элемента;
middle — выравнивание по базовой линии родительского элемента
плюс половина его высоты;
sub — отображение текста как подстрочного, в виде нижнего индекса;
super — отображение текста как надстрочного, в виде верхнего индекса;
text-bottom — выравнивание нижней границы текста по самому нижнему краю текущей строки;
text-top — выравнивание верхней границы текста по самому высокому
текстовому элементу текущей строки;
top — выравнивание верхнего края текста по верху самого высокого
элемента строки:
p {vertical-align: text-top};
word-spacing — устанавливает расстояние между словами, которые
определены как строки символов, разделенные пробелами:
h1 {word-spacing: 0.8em};
115
3.4.2. Свойства шрифта
Если в HTML-документе не задавать параметры шрифтов, то браузер
отобразит текст, установив общедоступные шрифты и их параметры, принятые
по умолчанию или заданные в настройках. Поэтому одна web-страница может
выглядеть по-разному на разных браузерах. Для достижения инвариантности
(идентичности) оформления текста желательно вручную задавать шрифты с
помощью CSS.
Каждый шрифт имеет свое название и отличается характером рисунка
символов, их размером и другими параметрами, которые можно задать с помощью следующих свойств CSS:
font-family — устанавливает семейство шрифта, которое используется
для оформления текста. Свойство принимает в качестве значения список шрифтов, разделенных запятой. Если в имени шрифта содержатся пробелы, оно
должно заключаться в кавычки. Заканчивается список шрифтов обычно ключевым словом, которое описывает тип шрифта:
serif — шрифты с засечками (Times);
sans-serif — рубленные шрифты (Arial);
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты (Courier);
p {font-family: Georgia, Times, "Times New Roman", serif};
font-style — определяет стиль шрифта. Возможно одно из следующих
значений:
normal — обычный стиль;
italic — курсивный стиль;
oblique — наклонный стиль;
h1 {font-style: italic};
font-variant — определяет, как нужно представлять строчные буквы:
оставлять без модификаций (normal) или делать их прописными уменьшенного
размера (small-caps):
p {font-variant: small-caps};
font-weight — устанавливает насыщенность шрифта. Значения устанавливаются в диапазоне от 100 (сверхсветлое начертание) до 900 (сверхжирное) с
шагом 100. Насыщенность также можно задать с помощью ключевых слов:
116
lighter — светлое начертание;
normal — нормальное начертание;
bold — полужирное начертание;
bolder — жирное начертание;
.myclass {font-weight: bolder};
font-size — определяет размер шрифта. Размер может быть установлен
с использованием единиц измерения CSS или с помощью набора абсолютных
(xx-small, x-small, small, medium, large, x-large, xx-large) и относительных констант (larger, smaller):
p {font-size: xx-large};
font — универсальное свойство, позволяющее одновременно задать все
вышеперечисленные характеристики шрифта. Они должны перечисляться в
следующем порядке: font-style font-variant font-weight font-size/line-height fontfamily. В качестве обязательных значений указывается размер шрифта и его семейство. Остальные значения являются опциональными:
h1 {font: italic small-caps bold 12px Helvetica, sans-serif}.
3.4.3. Свойства цвета и фона
CSS содержит следующие свойства для задания цвета и фона элементов:
color — устанавливает цвет элемента. Для текста устанавливается цвет
текста. Цвета задаются аналогичным с HTML способом:
p {font-size: 12px; color: red};
background-color — определяет цвет фона элемента (по умолчанию
устанавливается прозрачный фон (transparent)):
#myid {background-color: #336633};
background-image — устанавливает фоновое изображение для элемента. Если изображение не может быть загружено или показано, используется
предыдущее свойство. В качестве значения используется путь к графическому
файлу, который указывается внутри конструкции url():
body {background-image: url(image.jpg)};
background-repeat — определяет, как будет повторяться фоновое
изображение, установленное с помощью предыдущего свойства. Возможны
следующие варианты повторения:
117
no-repeat — без повторения;
repeat — повторение по горизонтали и вертикали;
repeat-x — повторение только по горизонтали;
repeat-y — повторение только по вертикали;
body {background-repeat: no-repeat};
background-position — задает начальное положение фонового изображения. Свойство содержит два значения — положение по горизонтали (left,
center, right) и вертикали (top, center, bottom). Например, разместить фоновое
изображение в левом верхнем углу экрана можно следующими способами:
body {background-position: top left};
body {background-position: 0 0};
background-size — масштабирует фоновое изображение согласно заданным размерам. Помимо обычных способов задания размеры могут задаваться с помощью значений:
auto — не масштабирует изображение, если задано одновременно для
ширины и высоты (auto auto). Если задано только для одной стороны (auto
10px), то масштабирует исходя из пропорций изображения;
cover — масштабирует изображение с сохранением пропорций так,
чтобы его ширина и высота равнялась ширине и высоте элемента, в котором
оно расположено;
contain — масштабирует изображение с сохранением пропорций так,
чтобы изображение полностью поместилось внутрь элемента;
body {background-size: cover};
background-clip — определяет, как фоновое изображение или фон выводится под границами. Возможны следующие варианты вывода:
padding-box — фон выводится внутри границ;
border-box — фон выводится под границами;
content-box — фон выводится только внутри контента;
body {background-clip: padding-box};
background-attachment — определяет, будет ли фоновое изображение
фиксироваться относительно окна просмотра браузера (fixed) или будет перемещаться вместе с документом в процессе его прокрутки (scroll):
body {background-attachment: scroll};
118
background — универсальное свойство, позволяющее одновременно
задать все вышеперечисленные характеристики фона и фонового изображения.
Значения могут быть записаны в произвольном порядке:
body {background: url(image.jpg) repeat-x border-box fixed}.
3.4.4. Свойства блока
Все элементы HTML-документа с точки зрения CSS представляются в
виде прямоугольных блоков, каждый из которых состоит из следующих областей:
content — информативная область, непосредственно содержащая контент (текст, изображение и прочее);
margin — поле блока. Определяет ширину каждой из четырех сторон
блока;
border — граница. Задает границы блока;
padding — отступ. Определяет ширину отступа информационной области от границ блока.
Структура блока показана на рис. 3.2.
Рис. 3.2. Структура блока CSS
Рассмотрим основные свойства CSS, позволяющих производить редактирование областей блока:
margin-top, margin-right, margin-bottom, margin-left — устанавливают ширину верхнего, правого, нижнего и левого полей соответственно. Размеры задаются стандартным для CSS способом и могут принимать отрицательные
119
значения. Если значение свойства задано как auto, то ширина поля будет задана
автоматически. Например, для задания блоку ширины нижнего поля в 5 пикселей можно использовать правило:
div {margin-bottom: 5px};
margin — задает ширину одновременно для всех полей блока. Если задано только одно значение свойства, то оно применяется ко всем полям. Если
задано два значения, то первое применяется к верхнему и нижнему полям, а
второе к правому и левому. Если задано три значения, то первое применяется к
верхнему, второе — к левому и правому, а третье — к нижнему полю. Если же
заданы все четыре значения, то они применяются к верхнему, правому, нижнему и левому полю соответственно. Рассмотрим пример:
div {margin: 5px 4px 3px}.
Данное правило установит ширину верхнего, правого, нижнего и левого
полей равной 5px, 4px, 3px и 4px соответственно;
padding-top, padding-right, padding-bottom, padding-left — устанавливают ширину верхнего, правого, нижнего и левого отступа соответственно.
Свойства не могут принимать отрицательные значения и значение auto:
.mydiv {padding-top: 2em; padding-left: 3em};
padding — задает ширину одновременно для всех отступов блока. Работает аналогично рассмотренному выше свойству margin. Зададим, например,
для класса mydiv ширину вертикальных и горизонтальных отступов равной 5 и
10 пикселей соответственно:
.mydiv {padding: 5px 10px};
border-top-width, border-right-width, border-bottom-width, borderleft-width — определяют значение ширины верхней, правой, нижней и левой
границы блока соответственно. Помимо стандартного задания размеров, свойства могут принимать одно из следующих значений:
thin — тонкая граница;
medium — граница средней толщины;
thick — толстая граница;
h1 {border-top-width: 2ex}.
Для задания ширины всей границы используется свойство border-width;
border-top-color, border-right-color, border-bottom-color, border-leftcolor — задают цвет верхней, правой, нижней и левой границы блока соответ120
ственно. Для всех этих свойств, помимо стандартного задания цветов, можно
использовать ключевое слово transparent, которое сделает границу прозрачной:
p {border-left-color: transparent}.
Для задания цвета всей границы используется свойство border-color;
border-top-style, border-right-style, border-bottom-style, border-leftstyle — определяют стиль линий верхней, правой, нижней и левой границы блока соответственно. Свойства могут принимать одно из следующих значений:
none — отсутствие границы;
hidden — подобно значению none;
dotted — пунктирные линии;
dashed — штрихпунктирные линии;
solid — сплошные линии;
double — две непрерывные линии;
groove — вдавленные линии;
ridge — выпуклые линии;
inset — вдавленный блок;
outset — выпуклый блок;
h1 {border-right-style: solid; border-bottom-style: groove}.
Для задания стиля всех линий границы используется свойство border-style;
border — универсальное свойство, позволяющее одновременно установить толщину, цвет и стиль границ блока. Значения могут перечисляться в
произвольном порядке. Рассмотрим правило, задающее блоку красные
штрихпунктирные границы шириной 2 пикселя:
div {border: red dashed 2px};
border-bottom-left-radius, border-bottom-right-radius, border-top-leftradius, border-top-right-radius — устанавливают радиус закругления левого
нижнего, правого нижнего, левого верхнего и правого верхнего угла рамки границы соответственно:
#iddiv {border-top-left-radius: 4em};
border-radius — универсальное свойство, позволяющее задать радиус
закругления одновременно для всех углов блока. Если задано только одно значение свойства, то оно применяется ко всем углам. Если задано два значения,
то первое задает радиус левого верхнего и нижнего правого угла, а второе —
правого верхнего и левого нижнего угла. Если задано три значения, то первое
задает радиус для левого верхнего угла, второе — одновременно для левого
121
нижнего и правого верхнего, а третье — для правого нижнего угла. Если же заданы все четыре значения, то они применяются к левому нижнему, правому
нижнему, левому верхнему и правому верхнему углу соответственно. Также
допускается писать два значения через слэш (/). В этом случае первое значение
будет задавать радиус по горизонтали, а второе — по вертикали (эллиптические
углы). Пример использования:
p {border-radius: 2px 3px 2px/4px};
border-collapse — устанавливает, как отображать границы вокруг ячеек таблицы. Свойство может принимать два значения: collapse и separate. В первом случае отображается только одна линия, во втором же вокруг каждой ячейки отображается своя собственная граница. Пример использования:
table {border-collapse: separate};
border-spacing — определяет расстояние между ячейками таблицы.
Свойство не работает, когда для таблицы задано свойство border-collapse со
значением collapse. Если задано значение, то устанавливается одновременно
расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное:
table {border-spacing: 3em 2em}.
3.4.5. Свойства форматирования и позиционирования
CSS позволяет настраивать общие параметры элементов web-страницы
(такие как длина, высота, видимость, обтекание и прочее), а также позиционировать их в пространстве. Все это реализуется следующими свойствами CSS:
display — определяет, как элемент будет показан в документе. Свойство может принимать целый ряд значений, но большая часть их них поддерживается не всеми браузерами. Рассмотрим только кроссбраузерные значения:
none — скрывает элемент в документе. Занимаемое им место удаляется, а web-страница формируется без учета этого элемент;
block — отображает элемент как прямоугольник, ширина которого занимает 100 % ширины родительского элемента;
inline — отображает элемент в виде прямоугольника, ширина которого
соответствует ширине данных внутри него;
list-item — отображает элемент как пункт списка;
p {display: inline}.
122
К примеру, чтобы запретить автоматический перенос на новую строку
для элемента P, можно отобразить его как встроенный, воспользовавшись правилом:
width — устанавливает ширину элемента. Она не включает толщину
границ вокруг блока, значение отступов и полей:
table {width: 80%};
height — устанавливает высоту элемента. Она не включает толщину
границ вокруг блока, значение отступов и полей:
tr {height: 2em};
position — определяет способ позиционирования элемента. CSS поддерживает следующие виды позиционирования:
static — позиционирует элемент как обычно, в соответствии с нормальным потоком документа;
absolute — указывает положение элемента с помощью свойств left, top,
right и bottom, при этом он вырывается из нормального потока, и другие элементы страницы отображаются, словно этот элемент отсутствует. Если у родительского элемента значение position установлено как static или родитель отсутствует, то отсчет координат ведется от края окна браузера. Во всех других случаях отсчет координат ведется от края родительского элемента;
relative — устанавливает положение элемента относительно его исходного места. Другие элементы страницы при этом отображаются, будто этот элемент остается в нормальном потоке. Добавление свойств left, top, right и bottom
сдвигает элемент в ту или иную сторону от первоначального расположения;
fixed — аналогично значению absolute, за тем исключением, что позиционируемый таким образом элемент не меняет своего положения при прокрутке web-страницы.
Непосредственно позиционирование осуществляется с помощью свойств
left, top, right и bottom, которые определяют позицию элемента относительно
левого, верхнего, правого и нижнего краев окна браузера или родительского
элемента:
h1 {
position: absolute;
left: 0;
top: 0;
bottom: 30px;
right: 50px;
}
123
z-index — определяет порядок, в соответствии с которым элементы
накладываются друг на друга при позиционировании на одно место. В качестве
значений свойство принимает целые числа. Чем больше значение, тем выше
будет находиться элемент по сравнению с другими. При равном значении zindex, на переднем плане будет находиться элемент, который описан в HTMLдокументе раньше. Кроме числовых значений также применяется значение auto.
Оно определяет порядок элементов автоматически, исходя из их положения в
HTML-документе и принадлежности к родителю:
.div2 {
position: fixed;
top: 40px;
left: 50px;
z-index: 3;
}
float — сдвигает элемент по горизонтали, при этом остальные элементы web-страницы будут обтекать его с других сторон. Свойство может принимать одно из этих значений:
left — сдвигает элемент к левому краю, а все остальные элементы обтекают его по правой стороне;
right — сдвигает элемент к правому краю, а все остальные элементы
обтекают его по левой стороне;
none — обтекание не задается;
#myp {float: left};
clear — запрещает обтекание элемента другими элементами страницы.
Они опускаются и располагаются под этим элементом. Свойство принимает
значения:
left — запрещает обтекание с левого края элемента;
right — запрещает обтекание с левого края элемента;
both — запрещает обтекание одновременно с правого и левого края
элемента;
none — отменяет действие свойства clear, а обтекание происходит согласно свойству float;
p {float: both};
overflow — управляет отображением содержимого элемента, если оно
целиком не помещается в нем. Свойство принимает следующие значения:
124
visible — показывает содержимое элемента полностью;
hidden — отображает только область внутри элемента, остальное
обрезает;
auto — добавляет полосы прокрутки, если содержимое выходит за пределы элемента;
scroll — всегда добавляет полосы прокрутки;
textarea {overflow: auto};
visibility — позволяет скрывать элементы, включая рамки вокруг них и
фон. Свойство принимает значения:
visible — отображает элемент как видимый;
hidden — скрывает элемент, делая его прозрачным. При этом остальные элементы нормального потока отображаются так, будто он виден;
inherit — отображает элемент, если виден его родительский элемент;
collapse — в общем случае аналогично значению hidden. При использовании для содержимого ячеек таблиц аналогично свойству display: none;
td {visibility: collapse};
clip — позволяет показать некоторую прямоугольную часть содержимого элемента, который абсолютно позиционирован. Данное свойство принимает значения:
auto — показывает элемент полностью. Значение по умолчанию;
rect(top right bottom left) — задает прямоугольную область содержимого элемента, которую требуется показать. В качестве верхней, правой, нижней и
левой координаты области используются значения top, right, bottom и left соответственно.
img {
position: absolute;
clip: rect(50px 100px 50px 100px);
}
3.4.6. Верстка web-страниц с помощью CSS
Использование display: inline-block
Блочная верстка подразумевает использование блочных элементов, чаще
всего <div>. Как отмечалось ранее, у блоков можно задавать любые размеры
(height, width, margin, padding), и они могут содержать другие компоненты. По125
этому блоки хорошо подходят в качестве контейнеров и позволяют организовывать расположение элементов сайта друг относительно друга по предполагаемому дизайну.
Но по умолчанию блоки располагаются один под другим и каждый с новой строки.
Чтобы расположить блочные элементы в строку, можно воспользоваться
возможностью смены типа элемента display: inline-block.
Рассмотрим пример верстки карточек с некоторой информацией:
<div>
<div class="card">
<div class="card__header">
Заголовок
</div>
<div class="card__body">
Контент
</div>
<div class="card__footer">
Информация
</div>
</div>
<div class="card">
<div class="card__header">
Заголовок
</div>
<div class="card__body">
Контент
</div>
<div class="card__footer">
Информация
</div>
</div>
<div class="card">
<div class="card__header">
Заголовок
</div>
<div class="card__body">
Контент
</div>
<div class="card__footer">
Информация
</div>
</div>
</div>
126
* {
box-sizing: border-box;
}
.card {
display: inline-block;
width: 200px;
height: 200px;
margin: 20px 20px 0 0;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 6px;
font-family: arial;
}
.card__header {
height: 20%;
padding: 6px 10px;
background-color: #fff;
border-radius: 6px 6px 0 0;
font-size: 14px;
font-weight: 600;
}
.card__body {
height: 60%;
padding: 6px 10px;
font-size: 14px;
}
.card__footer {
height: 20%;
padding: 6px 10px;
background-color: #fff;
border-radius: 0 0 6px 6px;
font-size: 12px;
}
Теперь блоки располагаются друг за другом, как показано на рис. 3.3.
При снижении разрешения экрана устройства (например, при просмотре на мобильном устройстве) верстка не разъедется. Не уместившиеся по ширине блоки
будут переходить вниз и располагаться друг под другом (рис. 3.4).
127
Рис. 3.3. Использование display: inline-block
Рис. 3.4. Использование display: inline-block: вид с мобильного устройства
128
Использование float
В HTML существует такое понятие, как поток документа (англ. flow) —
порядок расположения элементов в документе.
Естественный поток — это расположения элементов в порядке их использования в .html файле.
То есть если в .html блоки описаны так:
<div class="block">
Блок 1
</div>
<div class="block">
Блок 2
</div>
<div class="block">
Блок 3
</div>
то браузер отрисует эти элементы точно в таком же порядке (рис. 3.5).
Рис. 3.5. Расположения блоков в естественном потоке документа
Однако можно изменить естественный поток с помощью CSSсвойство float: left | right.
При использовании float на элементе, он изымается из естественного потока документа и смещается влево или вправо («всплывает», англ. float) в зависимости от значения свойства. Оставшиеся элементы смыкаются так, как будто
смещенного элемента и не было, и начинают обтекать его справа или слева.
Также float превращает элемент в блочный, даже если он таковым не являлся.
Использование float: left на всех элементах позволяет получить эффект,
схожий с использованием display: inline-block, то есть все элементы выстраиваются в строку и переносятся на следующую при ее заполнении (рис. 3.6):
129
.block {
float: left;
height: 50px;
width: 100px;
margin: 10px;
padding: 10px;
background-color: #ddd;
}
Рис. 3.6. Расположения блоков при использовании float: left
Для правильного отображения других элементов, которые располагаются
после float-группы, рекомендуется «очищать поток». Для этого необходимо использовать CSS свойство clear: both на следующем за этой группой элементе.
Float часто используется для создания адаптивной сетки сайта, когда требуется разделение на колонки и адаптация их расположения для различных
разрешений экрана. Например, на основе float построена сетка популярного
CSS-фреймворка Bootstrap [17].
Контрольные вопросы
1. Для чего применяются каскадные таблицы стилей?
2. Каким образом можно вставить CSS-код в HTML-документ?
3. Что такое правило CSS и какова его структура?
4. Что такое селектор CSS и какие селекторы существуют?
5. Что такое псевдокласс? В чем отличие между статическими и динамическими псевдоклассами?
6. Для чего предназначены правила @?
7. Какие правила CSS обладают наивысшим приоритетом, а какие
наименьшим?
8. На какие группы можно условно разделить все свойства CSS?
9. Какова структура блока CSS? Какие свойства блока позволяет изменять
CSS?
10. Какие виды позиционирования существуют в CSS и в чем их особенности?
130
ГЛАВА 4. ОСНОВЫ PHP
Как уже не раз отмечалось в предыдущих главах, любому современному
web-сайту присуща определенная динамичность. Она может заключаться в обработке пользовательских данных, автоматической генерации содержимого
страницы или же в работе со сторонними программами и файлами. Все это достигается с помощью языков web-программирования, наиболее популярным из
которых сегодня по праву считается PHP. Основные причины такой популярности языка — это его:
кроссплатформенность. Почти весь PHP-код можно без изменения
использовать на компьютерах, работающих под управлением различных операционных систем. Также при разработке PHP-скриптов не требуется учитывать
особенности web-браузеров, в которых эти скрипты будут отображаться;
HTML-совместимость. PHP-скрипты могут быть записаны непосредственно в файлы, содержащие HTML-код;
простота. PHP обладает простым и в то же время мощным объектноориентированным синтаксисом, предоставляющим все необходимые для разработки web-приложений любой степени сложности. Более того, синтаксис языка
PHP во многом схож с другими процедурными и объектно-ориентированными
языками программирования, что делает его изучение еще проще;
направленность. PHP изначально создавался и оптимизировался для
web-разработки. Это позволяет выполнять сложные задачи с помощью вызовов
всего нескольких функций, что на других языках может быть сделано только
при глубоких знаниях языка и с помощью громоздкого кода;
скорость. В отличие от других серверных языков web-программирования, PHP-скрипты могут компилироваться, оптимизироваться и кэшироваться в памяти, что позволяет серверу одновременно обрабатывать большое
количество PHP-скриптов без существенного снижения производительности;
доступность. PHP имеет открытый исходных код и распространяется
бесплатно;
функциональность. Язык имеет несколько сотен встроенных процедур и функций, а также поддерживает множество модулей от сторонних разработчиков.
Безусловно, язык обладает и целым рядом недостатков. Например, язык
имеет достаточно слабые по сравнению с другими языками программирования
объектно-ориентированные возможности, так как до пятой версии он был полностью процедурным. Стандартная библиотека PHP, наряду со своей функциональностью, достаточно перегружена бесполезными в большинстве случаев
процедурами и функциями. Многие проблемы были исправлены в седьмой вер131
сии языка, разработка которого продолжалась почти десять лет до 2015 г. На
данный момент последней версией языка является 7.4, выпущенная в 2019 г.
Хотя и современные разработчики начинают скептически относиться к PHP, но
тем не менее большая часть малых проектов в Интернете сегодня использует
именно этот язык. В конце 2020 г. увидела свет первая версия PHP 8. По заявлению разработчиков, PHP 8 должен перевернуть представление о серверных
языках программирования.
В данной главе учебника описываются общий синтаксис языка PHP 7, а
также рассматриваются его основные операторы и управляющие конструкции.
4.1. Общий синтаксис
PHP — встраиваемый язык. Поэтому его код, обрабатываемый интерпретатором, заключается в специальные блоки — PHP-теги, которые указывают,
когда начинать и заканчивать обработку кода между ними. Существует четыре
варианта тегов:
стандартные теги — используются в PHP-скриптах наиболее часто, не
требуют дополнительной настройки PHP:
<?php
Код 1 php;
?>
короткие теги – сокращенная форма стандартных тегов. Использование таких тегов возможно, когда они включены с помощью директивы
short_open_tag (значение равно on) в конфигурационном файле php.ini. При разработке переносимого кода использовать короткие теги не рекомендуется:
<?
Код 2 php;
?>
<?=
Код 3 php;
?>
Механизм тегов позволяет легко встраивать PHP-скрипты в HTML код:
<table>
<tr>
<td>Системное время</td>
<td><?= date("d.m.Y H:i") ?></td>
</tr>
</table>
132
Или, наоборот, встраивать HTML код в PHP-скрипты:
<?php
$a = rand(0, 1);
if ($a == 0) {
?>
Это число <b>"0"</b>
<?php }
if ($a == 1)
{ ?>
Это число <b>"1"</b>
<?php }
echo "($a)";
?>
Основой синтаксиса PHP является инструкция. Она может быть оператором, выражением или функцией. Как в любом C-подобном языке, каждая инструкция в PHP должна оканчиваться точкой с запятой. Однако PHP имеет ряд
особенностей:
Одну инструкцию можно записать в несколько строк:
инс
тр
укция;
А в одну строку можно записать несколько инструкций:
инструкция1; инструкция2;
Написание практически любого кода, в том числе и на PHP, не обходится
без комментариев. В PHP допустимы две разновидности комментариев:
однострочные:
<?php
# Комментарий 1
// Комментарий 2
?>
многострочные:
<?php
/* Многострочный комментарий.
Любая php-инструкция внутри него не сработает:
phpinfo();
*/
?>
Комментарии данного типа не могут быть вложенными.
133
4.2. Переменные и константы
Основными контейнерами для хранения данных в любом языке программирования являются переменные. Имена всех переменных в PHP должны
начинаться со знака $ — так интерпретатор определяет, что перед ним переменная, а не что-либо еще. Имена переменных чувствительны к регистру букв:
например, $var — не то же самое, что $Var или $VAR. Первым символом после
$ должна быть буква или символ подчеркивания. Далее в имени могут присутствовать буквы, цифры и символ подчеркивания.
В PHP переменные не обязательно объявлять и инициализировать, также
нет необходимости устанавливать для них тип данных, так как PHP является
языком со слабой типизацией. Переменная создается при включении ее имени в
инструкцию и одновременно присвоении ей какого-либо значения. Однако,
осуществление обращения к переменным, которые еще не инициализированы,
может вызвать предупреждение интерпретатора PHP. Во избежание этого
крайне желательно присваивать таким переменным какое-либо значение
(например, пустую строку или 0) перед их использованием в коде.
Присваивание значения переменной осуществляется с помощью символа
равенства «=». Слева от него указывается имя переменной, а справа — инструкция языка, возвращающее в результате вычисления некоторое значение:
$name = 'Mike';
$age = 40;
$sum = 2+2;
$login = $name;
При хранении в переменных больших объемов памяти рекомендуется
удалять неиспользуемые переменные с помощью функции unset
(имя_переменной). При этом происходит очистка значения переменной и занимаемой ею памяти, а сама переменная продолжает существовать:
$age = 40;
unset($age);
Значения переменных можно вывести на экран с помощью оператора echo. Этот оператор направляет вывод значений в выходной документ, отображаемый браузером:
echo $age // Выведет значение переменной $age
134
Значения некоторых типов оператор echo отображает не всегда так, как
они заданы в коде программы. Так, логическое значение true отображается как
1, а false — не отображается вообще, числовые значения выводятся в экспоненциальной или неэкспоненциальной форме в зависимости от их величины.
Следует помнить, что переменные PHP бывают глобальные и локальные.
Глобальные переменные создаются автоматически при запуске скрипта путем
импорта из среды сервера или при его интерпретации. В ранних версиях PHP
импортированные переменные хранились так же, как переменные скриптов, но
поскольку между этими группами могли возникнуть конфликты имен, то теперь все импортированные переменные размещаются в специальных суперглобальных массивах. Более подробно речь о них пойдет в гл. 6 учебника, здесь же
рассмотрим основные переменные web-сервера, расположенные в суперглобальном массиве $_SERVER:
PHP_SELF — файловое имя текущего исполняемого скрипта PHP относительно корневого каталога web-сервера;
SERVER_NAME — имя хоста сервера;
SERVER_SOFTWARE — информация о сервере и его программном
обеспечении;
DOCUMENT_ROOT — корневой каталог web-сервера;
SCRIPT_FILENAME — имя выполняемого скрипта, включающее абсолютный путь к нему;
SCRIPT_NAME — путь к текущему скрипту в web-каталогах;
REQUEST_URI — строка запроса скрипта.
PHP также позволяет использовать значение переменной в качестве имени. Это явление называется переменные переменных и реализуется с помощью
двойного оператора $. Рассмотрим пример:
<?php
$a = "ello";
$$a = "world";
echo "$a $hello";
?>
В этом примере первая строка присваивает значение переменной
$a = "hello", вторая же строка создает новую переменную $hello и присваивает
ей значение world. В результате выполнения третьей строки на экран выведется
строка «hello world».
Кроме переменных в PHP можно определять другой вид контейнеров
значений — константы. Они могут быть определены в программе однажды, а
135
их значения невозможно изменять, и они не могут быть неопределенными. В
начале имен у констант нет символа доллара. Они могут содержать только скалярные значения.
В PHP существует огромное множество предопределенных констант
(около 700 без учета дополнительных загружаемых модулей). Базовые константы перечислены в следующем списке:
__FILE__ — полное абсолютное имя сценария, интерпретируемого в
текущий момент;
__LINE__ — номер текущей интерпретируемой строки;
__FUNCTION__ — имя текущей функции;
__CLASS__ — имя класса;
__METHOD__ — имя метода класса;
PHP_VERSION — версия PHP-интерпретатора;
PHP_OS — название операционной системы, на которой работает PHP;
PHP_INT_MAX — максимальное значение для целых чисел. По умолчанию 2147483647;
PHP_INT_SIZE — размер целочисленных значений в байтах. По
умолчанию 4;
PHP_SAPI — тип серверного интерфейса PHP.
Определять собственные константы можно с помощью функции define(имя_константы, значение, [чувствительность к регистру]):
define(age, 40);
4.3. Типы данных
Несмотря на слабую типизацию, PHP поддерживает многие распространенные простые (скалярные) и структурированные типы данных. Простые типы
данных содержат диапазон значений, которые можно упорядочить в одном измерении (строки, числа и др.), а к числу структурированных типов данных относятся массивы и объекты. PHP поддерживает восемь типов данных:
скалярные:
boolean (булев);
integer (целый);
float (вещественный);
string (строковый);
структурированные:
array (массив);
object (объект);
136
специальные:
resource (ресурс);
NULL (нуль).
4.3.1. Скалярные типы
Скалярные типы — это простые типы данных, объекты (переменные или
константы) которых не имеют доступной программисту внутренней структуры.
Однако многие языки программирования, в том числе и в PHP, все же содержат
некоторые базовые (предопределенные) процедуры для доступа к элементам
таких типов. В PHP определены следующие скалярные типы:
boolean — простейший, логический тип. Выражает истинность значения — это может быть либо true, либо false. Определяется переменная булева
типа с помощью регистрнезависимого ключевого слова true или false:
$flag = true;
$foo = FaLSE.
Переменные логического типа наиболее часто применяются в операторах
сравнения. Результат сравнения будет считаться как FALSE, если для переменной сравнения выполняется одно из следующих условий:
непосредственно задано значение false;
целое или вещественное число имеет нулевое значение;
строка является пустой или содержит только один ноль;
массив не содержит ни одного элемента;
объект не имеет ни одного свойства;
указана не существующая или не имеющая значения переменная, либо
явно задано значение NULL.
Все остальные значения, в том числе и строки, содержащие слово false,
будут соответствовать истинному значению true;
integer — содержит целые числа из множества Z = {..., –2, –1, 0, 1, 2,
...}, обычно длиной 32 бита (от –2 147 483 648 до 2 147 483 647). Числа могут
указываться в десятичной, шестнадцатеричной или восьмеричной системе
счисления, по желанию, с предшествующим знаком (плюс или минус):
$a = 100; // десятичное число;
$b = –100; // отрицательное число;
$c = 0123; // восьмеричное число;
$d = 0x1A; // шестнадцатеричное число;
137
float — описывает числа с плавающей точкой (они же числа двойной
точности или действительные числа). Числа такого типа определяются при помощи любого из следующих синтаксисов:
$a = 1.23;
$b = 1.2e3;
$c = 3E-10;
string — строковый или символьный тип. Содержит набор символов
любой длины, в том числе и нулевой. Несмотря на то, что по своей сути строки
являются нумерованными массивами символов, то есть относятся
к структурированным типам данных, в языках программирования с высокой абстракцией, каким является PHP, их принято относить к скалярным типам.
Строка может быть определена тремя различными способами:
1) одинарными кавычками:
$str = "Hello";
echo 'Также вы можете вставлять в строки символ новой строки таким образом,
поскольку это нормально';
Чтобы использовать одинарную кавычку внутри строки, ее необходимо
предварить символом обратного слэша (\), то есть экранировать:
echo 'Однажды Арнольд сказал: "I\'ll be back"'; // Однажды Арнольд сказал: "I'll be
back"
Переменные и экранирующие последовательности для специальных символов, встречающиеся в строках, заключенных в одинарные кавычки, не обрабатываются:
$a =
echo
$a =
echo
'Арнольд';
'Однажды $a сказал: "I\'ll be back"'; // Однажды $a сказал: "I'll be back"
'Арнольд';
'Однажды $a сказал: "I\'ll be back"'; // Однажды $a сказал: "I'll be back"
2) двойными кавычками:
$str = "Hello";
echo "Простая строка";
echo "Переменная $a вставилась в текст";
138
Данный способ позволяет обрабатывать переменные внутри строки, а
также распознавать большое количество управляющих последовательностей
для специальных символов:
\n — новая строка;
\r — возврат каретки;
\t — горизонтальная табуляция;
\\ — обратный слэш;
\$ — символ доллара;
\" — двойные кавычки.
Однако при работе с переменными внутри двойных кавычек могут возникнуть проблемы, когда интерпретатор не может определить, переменная ли
перед ним:
$beverage = "Coca-cola";
echo "$beverage’s taste is great"; // Coca-cola’s taste is great
echo "He drank some $beverages"; // He drank some
Для решения такого рода проблем используют экранирование переменных с помощью символов { }:
echo "He drank some ${beverage}s";
echo "He drank some {$beverage}s";
3) синтаксисом heredoc (цитирование). После последовательности <<<
указывается открывающий идентификатор, и все последующие строки, вплоть
до закрывающего идентификатора, считаются текстом:
$str = <<<LABEL
Пример строки,
охватывающей несколько строчек,
с использованием heredoc-синтаксиса.
LABEL;
Строка с открывающим идентификатором не должна содержать после него никаких других символов, включая пробел. Закрывающий идентификатор
должен начинаться с первой позиции строки. Строка с закрывающим идентификатором не должна содержать других символов, кроме точки с запятой. Heredoc также позволяет обрабатывать переменные и использовать управляющие последовательности, однако экранирования кавычек не требуется.
139
К отдельным символам строки можно обращаться так, как и к элементам
массива:
$str = "football";
echo $str[3]; // Четвертый символ t
4.3.2. Структурированные типы
Структурированные типы — это составные типы данных, объекты (переменные или константы) которых имеют внутреннюю структуру, доступную
программисту. PHP поддерживает следующие структурированные типы:
array — определяет массивы данных. Под массивами в программировании принято понимать упорядоченные наборы данных, представляющие собой список элементов. Массивы могут быть как одномерными, так и многомерными, то есть вложенными. Инициализировать (то есть создавать первоначальные значения) массивы можно с помощью функции array, или завершая имя
переменной квадратными скобками. Написание имени переменной с пустыми
квадратными скобками указывает на то, что необходимо создать массив и начать
инкрементировать индекс с нуля, если элемент является в массиве первым:
$arr1 = array();
$arr2[] = array();
Доступ к элементам массивов осуществляется по их индексу:
$arr1[1] = 5+6;
echo $arr[1]; // 11
Существует два типа массивов, различающиеся по способу индексации
элементов:
простые. В таких массивах элемент определяется индексом в последовательности. При обращении к элементам простых индексируемых массивов используется целочисленный индекс, определяющий позицию заданного элемента:
//Одномерные простые массивы
$arr[0] = 0;
$arr[1] = 'one';
$arr[] = true; // Индекс 2
//Многомерные простые массивы
$arr[0][0] = 10;
$arr[0][1] = 'one';
$arr[1][5] = true;
140
object — описывает объекты или, другими словами, экземпляры класса. Объекты являются неотъемлемой частью объектно-ориентированного принципа программирования на PHP, речь о котором пойдет в последующих главах
учебника. Объекты создаются на основе заранее определенных классов при помощи оператора new:
class foo
{
var $value = 10;
}
$bar = new $foo;
echo $bar->value; // 10
4.3.3. Специальные типы
Специальные типы данных в отличие от описанных выше типов
не представляют какие-либо объекты реального мира, а являются исключительно компьютерными терминами. Такие типы данных непосредственно в
web-разработке применяются реже всего и содержат два типа:
NULL — указывает на отсутствие какого-либо значения. Переменная
будет иметь тип NULL в трех случаях:
если переменная не была инициализирована и ей не было присвоено
никакого явного значения;
если переменной было явно присвоено регистр независимое значение
NULL;
если значение переменной было явно очищено функцией unset().
$a =
echo
$b =
echo
null;
$a; // NULL
5;
unset($b); // NULL
resourse — определяет указатели на внешние ресурсы, с которыми
можно работать в PHP. Никаких операций с ресурсами проводить нельзя, так
как они используются только специальными функциями, например функциями
подключения к базам данных.
4.3.4. Приведение типов
PHP не требует явного определения типа при объявлении переменной,
тип переменной определяется согласно контексту, в котором она используется.
141
То есть если присвоить строковое значение переменной $var, $var станет строкой. Если затем присвоить $var целочисленное значение, она станет целым числом. Но, несмотря на это, существуют два способа приведения (преобразования) типов: автоматический (неявный) и явный.
Примером автоматического преобразования типа является оператор сложения '+'. Если любой из операндов является числом с плавающей точкой, то
все операнды интерпретируются как числа с плавающей точкой, результатом
будет также число с плавающей точкой. В противном случае операнды будут
интерпретироваться как целые числа, и результат также будет целочисленным:
$a = 5; // Целое число (5)
$a = $a + 1.3; // Вещественное число (6.3)
При преобразовании строки в числовое значение, если она содержит символ «.», «е» или «Е», результирующая переменная будет иметь тип вещественного числа, в противном случае переменная получит целочисленный тип. Значение такого преобразования определяется по начальным цифрам строки, а если она начинается с букв, то ее числовое значение будет равно нулю.
Правильное строковое представление числа достигается четким порядком символов. Сначала указывается знак «–» или «+», который может отсутствовать у
положительных чисел. После знака указывается последовательность чисел,
среди которых могут встречаться точка и (или) символ «е». Незначащий ноль
может быть пропущен. Рассмотрим примеры преобразования строк в числовые
значения:
$a
$a
$a
$a
$a
$a
$a
=
=
=
=
=
=
=
1 + "1.3е3"; // Вещественное число (1301)
1 + "-.3e3"; // Вещественное число (-299)
1 + "one500"; // Целое число (1)
1 + "10 Little Piggies"; // Целое число (11)
"0x10" + 1; // Целое число (17)
"0x\x41\x31" + 1; // Целое число (162)
"010" + 1; // Целое число (11)
Массивы также могут участвовать в автоматическом преобразовании типов:
$a = 1; // Целое число (1)
$a[0] = "b"; // Массив
Однако при таких преобразованиях могут возникать неоднозначности,
так как строки сами по себе также являются массивами символов:
142
$a = "1"; // Строка (1)
$a[0] = "b"; // Строка (b)
Во избежание такого рода неоднозначностей рекомендуется использовать
явное преобразование типов, когда тип переменной указывается перед исходной переменной аналогично всем С-подобным языкам:
$a = 1;
$a = (string) $a;
Типы обозначаются следующим образом:
(int), (integer) — целые числа;
(real), (double), (float) — вещественные числа;
(string) — строки;
(array) — массивы;
(object) — объекты;
(bool), (boolean) — логические значения.
Но нужно учитывать, что зачастую приведение искажает значение данных, а если приведение происходит несколько раз, то первоначальное значение
может быть утрачено.
4.4. Операторы
Для осуществления операций с переменными существуют различные
группы операторов. Оператором называется нечто, состоящее из одного или
более значений (выражений), которое можно вычислить как новое значение. В
PHP доступны следующие типы операторов:
арифметические — выполняют обычные арифметические операции.
Основные арифметические операторы PHP приведены в табл. 4.1.
Таблица 4.1
Арифметические операторы
Оператор
$a + $b
$a – $b
$a * $b
$a / $b
$a % $b
$a ** $b
Название
Сложение
Вычитание
Умножение
Деление
Остаток
Возведение в степень
143
Результат
Сумма $a и $b
Разность между $a и $b
Произведение $a и $b
Частное от деления $a на $b
Остаток от деления $a на $b
Возводит $a в степень $b
Операция деления (/) всегда возвращает вещественный тип, даже если оба
значения были целочисленными. Приоритет математических операций и изменение приоритетов при использовании скобок соответствуют обычным математическим правилам;
логические — предназначены исключительно для работы с логическими выражениями и возвращают значения FALSE или TRUE. В табл. 4.2
приведены логические операторы, присутствующие в языке PHP.
Таблица 4.2
Логические операторы
Оператор
$a AND $b
$a OR $b
$a XOR $b
! $a
$a && $b
$a || $b
Название
Логическое И
Логическое ИЛИ
Исключающее ИЛИ
Отрицание
Логическое И
Логическое ИЛИ
Результат
TRUE, если $a и $b равны TRUE
TRUE, если $a или $b равны TRUE
TRUE, если $a не равно $b
Логическая инверсия $a
Аналог AND
Аналог OR
Смысл двух разных вариантов для операторов логического И ИЛИ в том,
что они работают с различными приоритетами. Операторы && и || имеют более
высокий приоритет, чем операторы AND и OR соответственно;
битовые — выполняют операции над отдельными битами числа. Основные битовые операторы PHP приведены в табл. 4.3.
Таблица 4.3
Битовые операторы
Оператор
Название
Результат
$a & $b
Побитовое И
TRUE, если $a и $b равны TRUE
$a | $b
Побитовое ИЛИ
TRUE, если $a или $b равны TRUE
$a ^ $b
Побитовое исключающее ИЛИ
TRUE, если $a не равно $b
~ $a
Отрицание
Логическая инверсия $a
$a << $b
Побитовый сдвиг влево
Аналогично умножению на 2 $b раз
$a >> $b
Побитовый сдвиг вправо
Аналогично делению на 2 $b раз
144
В случае если и левый, и правый операнды — строки, битовые операции
будут работать с их ASCII-представлениями;
сравнения — сравнивают значения методом Буля и возвращают false или
true. В табл. 4.4 приведен список операторов сравнения, использующихся в PHP.
Таблица 4.4
Операторы сравнения
Оператор
$a == $b
$a === $b
$a ! = $b
$a <> $b
$a ! == $b
$a < $b
$a > $b
$a <= $b
$a > = $b
Название
Равенство
Тождественность
Неравенство
Неравенство
Нетождественность
Меньше чем
Больше чем
Меньше или равно
Больше или равно
Результат
TRUE, если $a равно $b
TRUE, если $a равно $b, и они одного типа
TRUE, если $a не равно $b
Аналог !=
TRUE, если $a не равно $b, или они разного типа
TRUE, если $a меньше $b
TRUE, если $a больше $b
TRUE, если $a меньше или равно $b
TRUE, если $a больше или равно $b
В случае, если сравнивается целое число со строкой, строка будет преобразована к числу. В случае, если сравниваются две числовые строки, они сравниваются как целые числа;
строковые — выполняют конкатенацию (объединение) строк:
$a = 'Hello';
echo $a . ', world!'; //Hello, world!
присвоения — присваивают значение переменной:
$a = 'A';
$a = ($b = 1) + 2;
В дополнение к базовому оператору присвоения имеются «комбинированные операторы» для всех арифметических и строковых операций, которые
позволяют использовать некоторое значение в выражении, а затем установить
его как результат данного выражения:
$a
$a
$b
$b
= 10;
*= 4; //40
= 'Hello';
.= ', world!'; //Hello, world!
145
инкрементные и декрементные — инкрементируют или декрементируют переменные. Операторы инкремента и декремента приведены в табл. 4.5.
Таблица 4.5
Операторы инкремента и декремента
Оператор
++$a
$a++
–$a
$a–
Название
Префиксный инкремент
Постфиксный инкремент
Префиксный декремент
Постфиксный декремент
Результат
Увеличивает $a на 1 и возвращает ее
Возвращает $a и увеличивает ее на 1
Уменьшает $a на 1 и возвращает ее
Возвращает $a и уменьшает ее на 1
К символьным переменным также можно применять операции инкремента и декремента. Инкрементирование или декрементирование булевых переменных не приводит ни к какому результату;
для работы с массивами — выполняют операции над массивами.
Оператор + присоединяет правый массив к массиву, размещенному слева,
не перезаписывая элементы с дублирующимися ключами. Также к массивам
можно применять операторы сравнения. При сравнении элементы массива считаются идентичными, если совпадает и ключ, и соответствующее значение.
4.5. Управляющие конструкции
Любой сценарий PHP сформирован из ряда конструкций. Конструкцией могут быть операторы, функции, циклы, условные операторы, конструкции включений и даже конструкции, которые не делают ничего (пустые конструкции). Конструкции обычно заканчиваются точкой с запятой. Кроме того, конструкции могут быть сгруппированы в группу при помощи фигурных скобок «{}». Группа
конструкций — это также отдельная конструкция, после которой не требуется
ставить точку с запятой. Основные группы управляющих конструкций PHP:
условные операторы;
циклы;
конструкции включений.
4.5.1. Условные операторы
Условные операторы (или операторы выбора) позволяют выполнять другие операторы в зависимости от условных значений. Это позволяет управлять
146
программой на основе определенных критериев. Существует два типа таких
операторов:
оператор if;
оператор switch.
Оператор if
Оператор if проверяет выражение. Если значение выражения ненулевое,
то выполняется следующий за ним оператор, иначе оператор не выполняется.
Общий синтаксис конструкции if:
if (логическое_выражение)
{оператор 1;
...
оператор N;}
Логическое выражение может состоять из нескольких выражений, сгруппированных с помощью операторов && или ||. Конструкция if может иметь неограниченную степень вложенности:
Пример 4.1. Использование оператора if.
<?php
$a = 5;
$b = 2;
$c = 1;
if ($a > 3)
{
if ($b == 2)
{
if (($c == 1) && ($b == 2))
{
$c = $b + 5;
$s = 0;
}
$c++;
}
$c = $c * 2;
}
echo $c;
?>
Часто возникает потребность исполнения операторов не только в теле
конструкции if, если выполнено какое-либо условие конструкции if, но и в слу147
чае, если условие конструкции if не выполнено. В данной ситуации используют
конструкцию if-else:
if (логическое_выражение)
{оператор 1;
...
оператор N;}
else
{оператор 1;
...
оператор N;}
Допускается любое количество операторов, вложенных в if. Однако все
операторы else должны соответствовать своим if.
Пример 4.2. Использование конструкции if-else.
<?php
$score = 93;
if ($score > 92)
{
$grade = "А";
$message = "Отлично";
}
else
if ($score <= 92 and $score > 83)
{
$grade = "B";
$message = "Хорошо";
}
else
if ($score <= 83 and $score > 74)
{
$grade = "C";
$message = "Удовлетворительно";
}
else
if ($score <= 74 and $score > 62)
{
$grade = "D";
$message = "Неудовлетворительно";
}
else
{
$grade = "F";
$message = "Без коментариев";
}
echo $message . "<br >";
echo "Ваша оценка: " . $grade;
?>
148
Комбинацией конструкций if и else является конструкция elseif. Для выполнения соответствующего блока кода этот оператор требует, чтобы основное
выражение if равнялось false, а его собственное выражение равнялось true. Эта
конструкция имеет следующий синтаксис:
if (логическое_выражение_1)
{оператор 1;
...
оператор N;}
elseif (логическое_выражение_2)
{оператор 1;
...
оператор N;}
else
{оператор 1;
...
оператор N;}
Пример 4.3. Использование конструкции elseif.
Изменим код из примера 4.2, заменив конструкцию if-else на конструкцию
elseif.
<?php
$score = 77;
if ($score > 92)
{
$grade = "А";
$message = "Отлично";
}
elseif ($score <= 92 and $score > 83)
{
$grade = "B";
$message = "Хорошо";
}
elseif ($score <= 83 and $score > 74)
{
$grade = "C";
$message = "Удовлетворительно";
}
elseif ($score <= 74 and $score > 62)
{
$grade = "D";
$message = "Неудовлетворительно";
}
else
{
$grade = "F";
$message = "Без коментариев";
}
149
echo $message . "<br>";
echo "Ваша оценка: " . $grade;
?>
Оператор switch
Часто вместо нескольких расположенных подряд инструкций if-else целесообразно воспользоваться специальной конструкцией выбора switch-case.
Данная конструкция предназначена для выбора действий, в зависимости от значения указанного выражения. Общий синтаксис конструкции switch-case:
switch (выражение)
{
case значение_1:
{оператор_1;
...
оператор_N;}
[break;]
...
case значение_N:
{оператор_1;
...
оператор_N;}
[break;]
[default: операторы_по_умолчанию; [break]]
}
В конструкции switch инструкции case проверяются одна за другой, и, когда обнаруживается соответствие переменной значению, указанному после слова case, исполняются все последующие строки, пока не встретится оператор
break. Необязательный оператор break осуществляет вывод из конструкции
switch и передает управление следующему за ее закрывающей скобкой оператору. Если слово break не указано, то выполнение будет продолжаться до конца
конструкции switch. Рассмотрим пример:
switch ($i)
{
case 0: echo "i = 0";
case 1: echo "i = 1";
case 2: echo "i = 2";
}
150
В этом примере, если переменная $i имеет нулевое значение, PHP выполнит все три оператора echo. Если $i равно 1, то будут выполнены два последних
оператора echo, и только если $i равно 2, будет выведено единственное сообщение i = 2.
При помощи необязательного ключевого слова default создается блок,
который выполняется по умолчанию. Он используется в том случае, когда ни
один из вариантов не соответствует условному выражению.
Пример 4.4. Использование конструкции switch-case.
Изменим код из примера 4.3, заменив конструкцию elseif на конструкцию switch-case.
<?php
$score = 87;
switch ($score)
{
case ($score > 92):
{
$grade = "А";
$message = "Отлично";
break;
}
case ($score <= 92 and $score > 83):
{
$grade = "B";
$message = "Хорошо";
break;
}
case ($score <= 83 and $score > 74):
{
$grade = "C";
$message = "Удовлетворительно";
break;
}
case ($score <= 74 and $score > 62):
{
$grade = "D";
$message = "Неудовлетворительно";
break;
}
default:
{
$grade = "F";
$message = "Без коментариев";
break;
}
}
echo $message . "<br>";
echo "Ваша оценка: " . $grade;
?>
151
4.5.2. Циклы
Циклы позволяют повторять определенное (и неопределенное — когда
работа цикла зависит от условия) количество раз различные операторы. Данные
операторы называются телом цикла. Проход цикла называется итерацией. PHP
поддерживает три вида циклов:
цикл с предусловием (while);
цикл с постусловием (do-while);
цикл со счетчиком (for);
цикл перебора массивов (foreach).
При использовании циклов есть возможность использования операторов
break и continue. Первый из них прерывает работу всего цикла, а второй —
только текущей итерации. Также можно использовать функции exit и die, позволяющие завершить выполнение всего скрипта и вывести на экран определенное сообщение.
Цикл while
Цикл проверяет выражение, и в том случае, если оно равно true, выражение выполняет операторы, находящиеся в теле цикла. Если условное выражение изначально ложно, то блок операторов выполняться не будет. Общий синтаксис цикла while:
while (логическое_выражение)
{оператор 1;
...
оператор N;}
Пример 4.5. Использование цикла while.
Рассмотрим скрипт, выводящий все числа от 1 до 10, не включая 5, и
сумму этих чисел.
<?php
echo "Числа от 1 до 10, не включая 5: </br>";
$summa = 0;
$i = 0;
while ($i < 10)
{
$i++;
if ($i == 5)
continue;
$summa = $summa + $i;
152
echo $i . " ";
}
echo "</br> Сумма всех чисел: $summa";
?>
Также существует альтернативный синтаксис цикла:
while (логическое_выражение):
оператор 1;
...
оператор N;
endwhile;
Цикл do while
В отличие от цикла while, этот цикл проверяет значение выражения не до,
а после каждого прохода (итерации). Таким образом, тело цикла выполняется
хотя бы один раз. Общий синтаксис цикла do while:
do
{оператор 1;
...
оператор N;}
while (логическое_выражение);
Пример 4.6. Использование цикла do while.
Изменим код из примера 4.5, заменив цикл while на цикл do while.
<?php
echo "Числа от 1 до 10, не включая 5: </br>";
$summa = 0;
$i = 0;
do
{
$i++;
if ($i == 5)
continue;
$summa = $summa + $i;
echo $i . " ";
}
while ($i < 10);
echo "</br> Сумма всех чисел: $summa";
?>
153
Цикл for
Цикл со счетчиком используется для выполнения тела цикла определенное число раз. Общий синтаксис цикла for:
for (начальное_выражение; условие; выражение_управления_циклом)
{оператор 1;
...
оператор N;}
Начальное выражение используется для инициализации (определения)
переменной, которая будет счетчиком цикла. Условие определяет условие выхода из цикла, а выражение управления циклом производит инкремент счетчика цикла.
Пример 4.7. Использование цикла for.
Изменим код из примера 4.6, заменив цикл do while на цикл for.
<?php
echo "Числа от 1 до 10, не включая 5: </br>";
$summa = 0;
for ($i=1; $i<=10; $i++)
{
if ($i == 5)
continue;
$summa = $summa + $i;
echo $i . " ";
}
echo "</br> Сумма всех чисел: $summa";
?>
Также существует альтернативный синтаксис:
for (начальное_выражение; условие; выражение_управления_циклом):
{оператор 1;
...
оператор N;}
endfor;
Допускается не указывать выражение управления циклом непосредственно в условной части, а задавать его в теле цикла. Также необязательным являет-
154
ся условие выхода из цикла — если оно пустое, то цикл становится бесконечным, и прервать его можно будет только при помощи оператора break.
Пример 4.8. Использование цикла for без условий.
Изменим код из примера 4.7, не указывая в условной части цикла выражение управления циклом и условие выхода.
<?php
echo "Числа от 1 до 10, не включая 5: </br>";
$summa = 0;
for ($i=0; ;)
{
$i++;
if ($i == 5)
continue;
if ($i > 10)
break;
$summa = $summa + $i;
echo $i . " ";
}
echo "</br> Сумма всех чисел: $summa";
?>
Цикл foreach
Цикл предназначен специально для перебора массивов. Общий синтаксис
цикла foreach:
foreach (массив as $ключ => $значение)
{оператор 1;
...
оператор N;}
Операторы циклически выполняются для каждого элемента массива, при
этом очередная пара ключ-значение оказывается в переменных $ключ и $значение.
Пример 4.9. Вывод меню.
Продемонстрируем работу цикла foreach на примере вывода меню, рассмотренного в п. 4.3.2.
<ul style="list-style-type:none">
<?php
$menu = array(
155
"Главная" => "index.php",
"ЛР1" => "lab_rab1.php",
"ЛР2" => "lab_rab2.php"
);
foreach ($menu as $link => $href) {
echo "<li><a href=\"$href\">", $link, '</a></li>';
}
?>
Также существует альтернативный синтаксис, который удобно использовать для перебора обычных, неассоциированных массивов:
foreach (массив as $значение)
{оператор 1;
...
оператор N;}
Цикл foreach оперирует не исходным массивом, а его копией. Это означает, что любые изменения, которые вносятся в массив, не могут быть видны из
тела цикла.
4.5.3. Конструкции включений
Большинство web-сайтов состоит из нескольких страниц. Все они, как
правило, имеют некие общие части (низ, верх, меню и прочее), которые имеет
смысл вынести в отдельные файлы и подключать ко всем страницам. Такой
подход облегчает написание кода, так как позволяет не описывать повторяющиеся части для всех страниц, а также упрощает редактирование этих частей,
позволяя редактировать только соответствующие файлы.
Подключение файлов в PHP реализуется с помощью конструкций включения. В PHP существуют две основные конструкции включений:
require;
include.
Конструкция require позволяет включать файлы в сценарий PHP до исполнения сценария PHP. Общий синтаксис require:
require имя_файла;
При запуске программы интерпретатор заменяет эту инструкцию на содержимое файла, указанного после ключевого слова require. Вместо имени
файла также можно указать его URI, если он располагается в сети.
156
В отличие от конструкции require конструкция include позволяет включать файлы в код PHP скрипта во время выполнения сценария. Синтаксис конструкции include:
include имя_файла;
В случае отсутствия включаемого файла при использовании конструкции
require интерпретатор выдаст фатальную ошибку, тогда как при использовании
конструкции include выполнение основного кода продолжится.
Файлы, которые подключаются при помощи указанных конструкций,
считаются HTML-файлами, поэтому, если они содержат PHP-код, должны присутствовать теги-ограничители (<?php и ?>), чтобы этот код выполнялся.
Включаемые файлы наследуют все переменные, доступные вызывающему сценарию, с теми значениями, которые они имеют в той строке, где встречается директива включения. Если включаемый файл создает глобальные переменные, то они также становятся доступны вызывающему сценарию.
В процессе написания программы могут возникнуть ситуации, когда файл
включается в код несколько раз, что приводит к ошибкам. Для предотвращения
этого применяются конструкции однократного включения require_once и
include_once. Работают они так же, как и require и include соответственно. Разница в их работе лишь в том, что перед включением файла интерпретатор проверяет, включен ли указанный файл ранее или нет. Если да, то файл не будет
включен вновь.
4.6. Отладка PHP-скриптов
Отладка скриптов — очень важный этап в разработке в целом и в webразработке в частности. Кроме основной задачи — поиска и удаления ошибок,
отладка прямо улучшает качество и работоспособность скрипта в целом.
Найденные ошибки, исправленная логика работы — все это делает
скрипт стабильнее в работе, что является немаловажным аспектом при его разработке.
При отладке PHP-скриптов ошибки принято делить на:
синтаксические ошибки — ошибки при написании кода. PHPинтерпретатор не может соответствующим образом проанализировать такой код
и поэтому генерирует сообщение об ошибке. Существует несколько широко распространенных причин возникновения синтаксических ошибок, например:
простые опечатки, например, написание вместо двоеточия или квадратной скобки точки с запятой или фигурной скобки;
157
неправильно закрытые операторы. Рекомендуется сразу вставлять все
необходимые скобки, даже если они не являются обязательными для работы
кода. Также для предотвращения неправильного закрытия скобок обычно применяются отступы в коде;
пропуск точки с запятой при закрытии оператора. Рекомендуется всегда завершать операторы точкой с запятой даже там, где делать это необязательно;
пропуск закрывающих кавычек в строках или неверное смешивание
одинарных и двойных кавычек. При создании длинных строк с большим количеством вставленных переменных легко забыть закрыть кавычки или ошибиться в количестве использованных одинарных кавычек, например:
<?php
echo "Это начало строки с " . $num . " кавычками, как с одинарными, например, \', т
ак и с двойными, например, \", а также кавычек в HTML, например, <img src=\"image.g
if\">";
?>
Здесь две первые кавычки (одинарная и двойная) экранированы правильно, а две последние в HTML-коде — неправильно. В дополнение к этому пропущена завершающая двойная кавычка. При обработке данного кода PHP сгенерирует синтаксическую ошибку;
логические ошибки — образуются, когда код выполняется, но не генерирует правильный результат. Некоторые логические ошибки проявляются
во время выполнения программы и только при определенных условиях. Например, когда код не имеет синтаксических ошибок и выполняется PHPинтерпретатором, но при выполнении скрипта возникают ошибки, в результате
которых скрипт преждевременно завершается. Такие ошибки называются
ошибками времени выполнения. К ним относят, например, деление на ноль и
использование бесконечных циклов.
Логические ошибки второго типа не останавливают скрипт, и он продолжается до завершения, но в конце возвращает некорректную информацию или
вообще не возвращает никаких данных. Такие ошибки можно охарактеризовать
как неожиданные ошибки вывода. Они могут возникать, например, при неправильном порядке аргументов функций или при использовании оператора «=»
присвоения вместо оператора сравнения «==».
Всякий раз, когда интерпретатор PHP сталкивается с ошибками, которые
влияют на его способность завершить обработку данных, он генерирует сообщение об ошибке. Серьезные синтаксические или логические ошибки приводят
158
к тому, что интерпретатор PHP останавливает выполнение скрипта, прекращает
обработку данных и отображает на экране сообщение о «неисправимой ошибке» («Fatal Error», если отображение ошибок было включено в конфигурационном файле PHP). Менее серьезные ошибки могут прерывать только небольшую часть общей обработки данных в PHP и в таком случае возможно появление «предупреждения» («Warning»). В случае если возникшие ошибки не
влияют на обработку данных, интерпретатор генерирует «уведомления»
(«Notice»). Также интерпретатор может при соответствующих настройках PHP
отображать «примечания» («Strict»), предлагающие замену исходного кода для
улучшения функциональной совместимости и совместимости исходного кода с
предыдущими версиями PHP.
Настройка отображения ошибок в окне браузера может осуществляться
как в конфигурационном файле php.ini, так и непосредственно в коде PHPскрипта с помощью встроенной функции error_reporting. Синтаксис:
error_reporting (уровень_сообщений)
Функция устанавливает уровень сообщений об ошибках. Параметр «уровень_сообщений» является или целым числом, или предопределенной константой. Рассмотрим основные PHP-константы, использующиеся для задания уровня отображения ошибок:
E_ERROR — фатальные ошибки, которые не могут быть устранены
(например, проблемы выделения памяти). Выполнение скрипта останавливается;
E_WARNING — нефатальные ошибки (предупреждения). Выполнение
скрипта не останавливается;
E_PARSE — ошибки разбора при интерпретации;
E_NOTICE — уведомления, указывающие, что при работе скрипта
возникло нечто, что может указывать на ошибку, но может также появиться и
при нормальном выполнении скрипта;
E_ALL — все ошибки, предупреждения и уведомления;
E_STRICT — примечания интерпретатора относительно кода скрипта.
Еще с PHP5, по умолчанию значение данной константы равно E_ALL &
~E_NOTICE. Данная установка не позволяет показывать ошибки уровня
E_NOTICE. Однако отображение ошибок такого уровня бывает очень полезно
при разработке и отладке PHP-скриптов. Так, сообщения (Notice) предупреждают разработчика о возможных ошибках в коде, например, при использовании неинициализированных переменных. Также сообщения предупреждают о
плохом стиле написания скрипта. Например, $arr[item] лучше записывать как
$arr['item'], так как PHP может принять item за константу.
159
Также в PHP5 появился доступ к новому уровню ошибок E_STRICT, который не включается в глобальный уровень E_ALL. Включение E_STRICT во
время исполнения скрипта также имеет некоторые преимущества. Strictсообщения помогают разработчикам использовать последний и самый большой
предложенный метод контроля, например, предупреждая их об использовании
нежелательных функций, которые не будут поддерживаться в более новых версиях PHP. Таким образом, для обеспечения удобства и качества отладки PHPскриптов целесообразно использовать наряду с E_ALL и уровень E_STRICT.
Для этого в начале скрипта следует записать:
error_reporting (E_ALL | E_STRICT)
Другим способом «отладки» ошибок является их подавление. Когда известно, что ошибки в PHP-скрипте есть и избавляться от соответствующих сообщений нежелательно, иногда необходимо просто проигнорировать их
или обработать ошибки особым образом. Для таких ситуаций в PHP используется специальная форма записи — @-нотация. Когда символ @ используется с
какой-либо функцией, PHP подавляет все сообщения об ошибках, возникающие
в данной функции. Например, следующая функция вызывается с предшествующим символом @:
function foo ($bar)
{
// обработка
}
@foo ($bar);
Благодаря такой записи любые ошибки внутри данной функции не отображаются. Однако если в функции есть ошибка, то все равно возвращается нулевое значение. Если эта ошибка критическая и в обычных условиях привела
бы к остановке скрипта, то она и в этом случае останавливает скрипт, но не выводит на экран каких-либо сообщений. И хотя подавление сообщений об ошибках может привести к некоторой путанице, оно, тем не менее, остается полезным средством, позволяет обработать ошибку отдельно внутри предназначенной для этого пользовательской функции, которая возвращает на экран
специальное сообщение.
Зачастую обнаружение ошибок затруднительно, а получение правильного
ответа является критичным, что делает их подавление невозможным. В таком
случае следует применять более сложные и всеобъемлющие программы тестирования, которые предназначены специально для проверки всех возможных ва-
160
риантов входных данных и имеют специальные журналы ошибок, содержащие
подробные данные об условиях возникновения каждой ошибки.
Контрольные вопросы
1. Каковы особенности языка PHP?
2. Каким образом PHP-код встраивается в HTML-документы?
3. Как происходит создание, удаление и вывод на экран переменной в
PHP?
4. Как в PHP создаются константы, и какие предопределенные константы существуют в языке?
5. В чем заключается особенность типизации PHP, и какие основные типы данных он поддерживает?
6. Каким образом в PHP задаются строки?
7. Что такое массив и какие типы массивов существуют в PHP?
8. Каким образом в PHP осуществляется приведение типов?
9. Что представляет собой оператор в PHP? Какие разновидности операторов существуют?
10. Какие условные конструкции имеются в PHP, и каковы их особенности?
11. Какие циклы имеются в PHP и каковы их особенности?
12. Какие конструкции включений поддерживает PHP и для чего они используются?
161
ГЛАВА 5. ФУНКЦИИ В PHP
К основным требованиям к любому языку программирования относится
наличие места для хранения данных, средства для направления процесса выполнения программы и ряда других мелочей, таких как вычисление выражений
и вывод текста. PHP обладает всем этим, и вдобавок у него имеется облегчающий работу инструментарий наподобие конструкций включения и инструкций
else и elseif. Но даже при наличии всего этого инструментария программирование может быть слишком нудным и утомительным занятием, особенно если регулярно будет возникать необходимость вновь и вновь набирать очень похожие
друг на друга фрагменты кода.
Для решения этой проблемы в PHP существует такой инструмент, как
функция. Под функцией понимается набор инструкций, который выполняет
конкретную задачу и в дополнение к этому может вернуть какое-нибудь значение. Можно извлечь фрагмент кода, который используется более одного раза,
поместить его в функцию и вызвать функцию по имени в тот момент, когда
этот код нужно будет выполнить.
По сравнению с непрерывным линейным кодом у функций есть масса
преимуществ:
экономия времени при наборе текста программы;
сокращение количества синтаксических и прочих ошибок при программировании;
сокращение времени загрузки файлов программы;
сокращение времени выполнения, поскольку каждая функция компилируется только один раз, независимо от частоты ее вызовов;
возможность использовать функции как в рядовых, так и в особенных
случаях, поскольку они воспринимают аргументы.
В этой главе учебника рассматривается общий синтаксис функций, описываются принципы создания и использования пользовательских функций, а
также обозреваются основные встроенные функции языка PHP.
5.1. Пользовательские функции
Любая создаваемая в PHP функция называется определенной пользователем (user-defined) или пользовательской функцией. Процесс работы с пользовательскими функциями в PHP можно условно разделить на несколько этапов:
162
описание функции — задание имени функции, ее аргументов и исполняемого ею кода;
вызов функции — запуск функции на выполнение. Для вызова функции необходимо написать ее имя и поставить круглые скобки;
передача аргументов — задание значений аргументам, которые используются в теле функции. Передача аргументов осуществляется при вызове функции путем записи их в круглые скобки;
возвращение значений — передача результатов работы функции обратно вызывающему коду.
Рассмотрим подробнее каждый из этих этапов.
5.1.1. Определение функции
Определение PHP-функции имеет следующий синтаксис:
function Имя (аргумент 1[=значение 1],...,аргумент N[=значение N])
{оператор 1;
...
оператор N;}
Определение функции начинается с ключевого слова function, после которого указывается имя функции. К нему применяются те же ограничения, что
и к именам других идентификаторов PHP. Кроме того, имена функций могут
содержать русские буквы, но не могут содержать пробелов и должны быть уникальны. После имени функции в круглых скобках через запятую перечисляются
аргументы функции. Затем в фигурных скобках следует блок кода функции. В
качестве кода может выступать даже определение других функций.
PHP не допускает перегрузку функций. Однажды определив функцию, ее
код нельзя изменить или удалить. Поэтому вторичное определение функции
вызовет ошибку.
Функции можно определять в любом месте программы. Обычно это делают в отдельном файле и просто подключают его в начале главного файла
сценария. Инициализировать переменные тем, как определяется функция, необязательно, однако необходимо убедиться, что они заданы или проинициализированы перед вызовом функции.
Переменные, задействованные в теле функции, являются локальными,
что не позволяет осуществлять к ним доступ из другой части скрипта. Чтобы
использовать локальную переменную вне функции, ее необходимо сделать глобальной. Это возможно сделать с помощью инструкции global или массива
163
$GLOBALS. В свою очередь, функциям также недоступны глобальные переменные скрипта. Для доступа к ним необходимо использовать суперглобальные
массивы.
Пример 5.1. Определение функции.
Рассмотрим принцип определения функции на примере функции, выводящей меню, описанное в п. 4.5.2.4.
<?php
$menu = array(
"Главная"=>"index.php",
"ЛР1"=>"lab_rab1.php",
"ЛР2"=>"lab_rab2.php");
function getMenu($menu)
{
echo '<ul style="list-style-type:none">';
foreach ($menu as $link=>$href)
{
echo "<li><a href=\"$href\">", $link, '</a></li>';
}
echo '</ul>';
}
getMenu($menu);
?>
Результатом вызова функции будет вывод на экран меню без маркеров
списка.
5.1.2. Передача функциям аргументов
Информация передается функциям через набор их аргументов, представленных последовательностью значений, разделенных запятыми. PHP поддерживает передачу значений аргументов несколькими способами. Самый распространенный из них — передача «по значению», когда необходимые значения
просто записываются в круглых скобках при вызове функции. Однако стоит
учитывать, что, в отличие от языков с жесткой типизацией, в PHP невозможно
указать, что для тех или иных аргументов допустимы только определенные типы. Поэтому в коде функции часто необходимо проверять тип полученных аргументов.
164
По умолчанию в функцию передаются значения аргументов, которые являются копиями значений выражений и переменных. Поэтому изменение значений аргументов имеет смысл только внутри функции, и после работы функции соответствующие переменные не будут изменены. Если же требуется изменять сами аргументы, то необходимо воспользоваться еще одним способом
передачи — передачей «по ссылке». В этом случае функция получит не значения, а ссылки переменных. Для этого перед переменной в определение функции
ставится знак амперсанта «&». Если необходимо передать аргумент по ссылке в
функцию, которая по умолчанию принимает аргументы по значению, то амперсант ставится перед переменной в строке вызова функции.
Еще одним полезным инструментом при работе с функциями является
использование аргументов по умолчанию. Такие аргументы передаются в случае, если при вызове функции не указываются конкретные значения аргументов. Значения по умолчанию должны быть константами, массивами или значением NULL. Также аргументы, имеющие значения по умолчанию, должны стоять в определении функций после аргументов их не имеющих.
Пример 5.2. Значения по умолчанию.
Изменим программу вывода меню из п. 5.1.1, добавив возможность менять направление вывода.
<?php
function getMenu($menu, $vertical=true)
{
$style = "";
if(!$vertical)
{
$style = "display:inline";
}
echo '<ul style="list-style-type:none">';
foreach ($menu as $link=>$href)
{
echo "<li style='$style'><a href=\"$href\">", $link, '</a></li>';
}
echo '</ul>';
}
?>
Здесь, в случае вызова функции без задания значения второму аргументу
$vertical, он примет значение по умолчанию, и на экран будет выведено верти-
165
кальное меню. Если же в качестве второго аргумента передать значение false,
функция выведет меню горизонтально.
5.1.3. Возвращение функциями значений
Значения возвращаются функциями при помощи оператора return. Возвращаться могут значения любого типа, включая массивы и объекты. Помимо
возвращения значений, оператор return прерывает выполнение функции подобно оператору break в условных конструкциях и циклах. Если необходимо просто прервать выполнение функции, не возвращая никакого значения, в операторе return можно не указывать аргумент.
Помимо локальных и глобальных переменных, в PHP существует еще
один тип — статические переменные, объявляемые инструкцией static. Они не
уничтожаются после завершения работы функции и сохраняют свое значение
на протяжении всего времени исполнения скрипта. Следует также помнить, что
статические переменные нельзя уничтожить. Уничтожается только локальная
копия значения.
Пример 5.3. Возвращение значения статической переменной.
Рассмотрим механизм использования оператора return на примере возврата значения статической переменной.
<?php
function foo()
{
static $bar = 0;
$bar++;
return $bar;
}
echo foo(); // 1
echo foo(); // 2
echo foo(); // 3
?>
Здесь переменная $bar объявляется как статическая и инкрементируется
при каждом вызове функции. В результате этого оператор return при каждом
вызове возвращает увеличенное на 1 значение. Если же не определять переменную $bar как статическую, всегда будет возвращаться значение 1.
166
5.2. Встроенные функции
PHP со всеми подключенными расширениями содержит около 4 000 самых разнообразных встроенных функций. Большинство из них редко используемы, а некоторые даже дублируют друг друга. Подробно с каждой функцией
можно ознакомиться в документации PHP, расположенной по адресу http://www.php.net/manual. Здесь же рассмотрим основные, наиболее часто
используемые группы функций, такие как:
функции для работы с переменными;
математические функции;
функции обработки строк;
функции для работы с массивами;
функции даты и времени.
5.2.1. Функции для работы с переменными
К таким функциям относятся следующие функции:
empty – определяет, пуста ли переменная. Синтаксис:
empty (имя_переменной).
Функция возвращает false, если переменная содержит непустое и ненулевое значение;
gettype — возвращает тип переменной. Синтаксис:
gettype (имя_переменной);
intval — возвращает целое значение переменной. Синтаксис:
intval (имя_переменной [, основание_СИ]).
Функция возвращает целое значение переменной, используя указанное
основание системы исчисления для преобразования, которое по умолчанию
равно 10;
is_array — определяет, является ли переменная массивом. Синтаксис:
is_array (имя_переменной);
is_bool — определяет, является ли переменная булевой. Синтаксис:
is_bool (имя_переменной);
is_float — определяет, является ли переменная числом с плавающей
точкой. Синтаксис:
167
is_float (имя_переменной);
is_int — определяет, является ли переменная целым числом. Синтаксис:
is_int (имя_переменной);
is_numeric — определяет, является ли переменная числом или числовой строкой. Синтаксис:
is_numeric (имя_переменной);
is_string — определяет, является ли переменная строкой. Синтаксис:
is_string (имя_переменной);
isset — определяет, установлена ли переменная. Синтаксис:
isset (имя_переменной [, имя_переменной …]).
Если переменная была удалена с помощью функции unset, то она больше
не считается установленной. Функция isset также вернет false, если проверяемая
переменная имеет значение NULL. Если функции были переданы несколько
параметров, то она вернет true только в том случае, если все параметры определены. Проверка происходит слева направо и заканчивается, как только будет
встречена неопределенная переменная;
print_r — выводит информацию о переменной в удобочитаемом виде.
Синтаксис:
print_r (выражение, [возврат_без_вывода]).
Если значение параметра «возврат_без_вывода» равно true, то функция
вернет результат вывода вместо вывода в браузер, который производится по
умолчанию;
settype — устанавливает тип переменной. Синтаксис:
settype (имя_переменной, тип_переменной);
unset — уничтожает созданную переменную. Синтаксис:
unset (имя_переменной).
Если переменная, объявленная глобальной или передаваемая по ссылке,
удаляется внутри функции, то будет удалена только локальная переменная. Если внутри функции удаляется статическая переменная, unset удалит переменную только в контексте дальнейшего выполнения функции. При последующем
вызове предыдущее значение переменной будет восстановлено;
168
var_dump — выводит информацию о переменной. Синтаксис:
var_dump (выражение).
Функция отображает структурированную информацию об одном или нескольких выражениях, включая их тип и значение. Массивы и объекты анализируются рекурсивно с разным отступом у значений для визуального отображения структуры.
5.2.2. Математические функции
Часто при написании кода разработчику приходится сталкиваться с осуществлением каких-либо математических операций, реализовать которые можно с помощью следующих функций:
abs — возвращает абсолютную величину (модуль) числа. Синтаксис:
abs (число);
acos — возвращает арккосинус числа в радианах. Синтаксис:
acos (число);
asin — возвращает арксинус числа в радианах. Синтаксис:
asin (число);
atan — возвращает арктангенс числа в радианах. Синтаксис:
atan (число);
ceil — округляет дробное число в большую сторону. Синтаксис:
ceil (число);
cos — возвращает косинус числа в радианах. Синтаксис:
cos (число);
exp — вычисляет экспоненту в степени. Синтаксис:
exp (число);
floor — округляет дробное число в меньшую сторону. Синтаксис:
floor (число);
log — вычисляет натуральный логарифм числа. Синтаксис:
log (число);
169
log10 — вычисляет десятичный логарифм числа. Синтаксис:
log10 (число);
max — находит наибольшее значение. Синтаксис:
max (массив / список чисел).
Если несколько параметров имеют одинаковое значение — будет возвращено значение того, который был указан первым. Если функции передано несколько массивов, будет возвращен массив, в котором большее количество
элементов. Если же несколько массивов имеют одинаковое количество элементов, то они будут сравниваться поэлементно, слева направо;
min — находит наименьшее значение. Синтаксис:
min (массив / список чисел).
Принцип работы min аналогичен функции max;
pi — возвращает число Пи. Синтаксис:
pi ()
pow — осуществляет возведение в степень. Синтаксис:
pow (основание, показатель_степени);
rad2deg — преобразует значение из радианов в градусы. Синтаксис:
rad2deg (радианы);
rand — генерирует псевдослучайное число из заданного интервала.
Синтаксис:
rand ([минимум], [максимум]).
Если функция вызывается без необязательных параметров, то она возвращает псевдослучайное число между 0 и максимально возможным случайным числом RAND_MAX;
round — округляет вещественное число. Синтаксис:
round (число [, точность]).
Точностью определяет количество цифр после запятой и может быть отрицательной или нулем;
sin — возвращает синус числа в радианах. Синтаксис:
sin (число);
170
sqrt — вычисляет квадратный корень числа. Синтаксис:
sqrt (число);
tan — возвращает тангенс числа в радианах. Синтаксис:
tan (число).
5.2.3. Функции обработки строк
Строки в PHP являются фундаментальным элементом разработки, поэтому язык обладает большим набором функций для работы с ними:
addslashes — экранирует спецсимволы в строке. Синтаксис:
addslashes (строка).
Функция возвращает строку, в которой перед каждым спецсимволом добавлен обратный слэш. Экранируются одиночная кавычка ('), двойная кавычка
("), обратный слэш (\) и NUL (байт NULL);
chr — возвращает символ по его ASCII-коду. Синтаксис:
chr (ASCII-код);
explode — разбивает строку на подстроки. Синтаксис:
explode (разделитель, строка [, лимит]).
Функция возвращает массив строк, созданный делением аргумента «строка» по границам, указанным аргументом «разделитель». Если «разделитель»
является пустой строкой, explode возвращает false. Если «разделитель» не содержится в «строка», и используется отрицательный лимит, то будет возвращен
пустой массив, иначе будет возвращен массив, содержащий строка. Пример:
<?php
$foo = "1,2:3,4,5";
$bar = explode(",", $foo);
echo $bar[0]; // 1
echo $bar[1]; // 2:3
?>
htmlspecialchars — преобразует специальные символы в HTMLсущности. Синтаксис:
htmlspecialchars (строка [, флаг [, кодировка]]).
171
Функция возвращает строку, над которой в соответствии с выбранной кодировкой произведены преобразования специальных символов в соответствующие escape-последовательности;
implode — объединяет элементы массива в строку. Синтаксис:
implode (соединитель, массив_строк).
Функция обратная explode. Возвращает строку, содержащую строковое
представление всех элементов массива в указанном порядке, со строкой соединитель между каждым элементом;
ord — возвращает ASCII-код символа. Синтаксис:
ord (символ);
print — выводит строку на экран. Синтаксис:
print (вводимые_данные).
Функция всегда возвращает 1, поэтому, в отличие от оператора echo, она
может использоваться для вывода данных в условных конструкциях. Однако,
по сути, print не является «настоящей» функцией (это конструкция языка), поэтому заключать аргументы в скобки необязательно;
str_replace — заменяет все вхождения строки поиска на строку замены. Синтаксис:
str_replace (строка_поиска, строка_замены, строка [, количество]).
Функция возвращает строку или массив, в котором все вхождения «строка_поиска» в «строка» заменены на «строка_замены». Если указан аргумент
количество, то в него будет записано число произведенных замен. Пример:
<?php
$foo = "учиться, учиться и еще раз учиться";
$bar = str_replace("учиться", "работать", $foo, $count);
echo $bar . "</br>Количество замен: " . $count;
?>
strip_tags — удаляет HTML и PHP теги из строки. Синтаксис:
strip_tags (строка [, список_неудаляемых_тегов]).
Список неудаляемых тегов не должен содержать пробелов. Пример:
<?php
$text = "<p>Параграф.</p><a href=Ссылка>Текст</a>";
echo strip_tags($text, "<p><a>");
?>
172
stripslashes — удаляет экранирование символов, произведенное функцией addslashes. Синтаксис:
stripslashes (строка);
strpos — возвращает позицию первого вхождения подстроки. Синтаксис:
strpos (строка, подстрока [, начало_поиска]).
Функция возвращает позицию в виде целого числа. Если подстрока не
найдена, strpos возвращает false;
strlen — возвращает длину строки. Синтаксис:
strlen (строка);
strrpos — возвращает позицию последнего вхождения подстроки. Син-
таксис:
strrpos (строка, подстрока [, начало_поиска]).
Функция возвращает позицию в виде целого числа. Если подстрока не
найдена, strrpos возвращает false;
strstr — находит первое вхождение подстроки. Синтаксис:
strstr (строка, подстрока [, флаг]).
Если флаг установлен в true, то strstr возвращает часть строки строка до
первого вхождения подстрока;
strtolower — преобразует строку в нижний регистр. Синтаксис:
strtolower (строка);
strtoupper — преобразует строку в верхний регистр. Синтаксис:
strtoupper (строка);
substr — возвращает подстроку. Синтаксис:
substr (строка, начало_подстроки [, длина_подстроки]).
Функция возвращает подстроку строки «строка», начинающейся с «начало_подстроки» символа по счету и длиной «длина_подстроки» символов. Если
«начало_подстроки» неотрицателен, возвращаемая подстрока начинается с позиции «начало_подстроки» от начала строки, считая от нуля. Если «начало_подстроки» отрицательный, возвращаемая подстрока начинается с позиции,
отстоящей на «начало_подстроки» символов от конца строки «строка»;
trim — удаляет пробелы из начала и конца строки. Синтаксис:
trim (строка [, список_символов]).
173
Если указан аргумент «список_символов», то функция помимо пробелов
удалит из «строка» все символы, указанные в этом списке. Для удаления пробелов только из начала строки или только из конца, необходимо воспользоваться
функциями ltrim и rtrim соответственно.
5.2.4. Функции для работы с массивами
К функциям, позволяющим работать с массивами, относятся следующие
функции:
array_chunk — разбивает массив на части. Синтаксис:
array_chunk (массив, размер_частей [, флаг]).
Возвращает многомерный массив с числовыми индексами, начинающимися с нуля, каждый элемент которого содержит size элементов из оригинального массива. Если флаг установлен в true, то ключи оригинального массива
будут сохранены;
array_key_exists — проверяет, присутствует ли в массиве указанный
ключ или индекс. Синтаксис:
array_key_exists (ключ, массив).
Функция возвращает true, если в массиве присутствует указанный ключ.
Аргумент «ключ» может быть любым значением, которое подходит для индекса массива;
array_pop — извлекает последний элемент массива. Синтаксис:
array_pop (массив).
Функция извлекает и возвращает последнее значение аргумента «массив», уменьшая размер «массив» на один элемент. Если массив пуст (или не является массивом), будет возвращен NULL;
array_rand – выбирает одно или несколько случайных значений из
массива. Синтаксис:
array_rand (массив [, число_значений]);
array_reverse — возвращает массив с элементами в обратном порядке.
Синтаксис:
array_reverse (массив [, флаг]).
Функция принимает массив и возвращает новый массив, содержащий
элементы исходного массива в обратном порядке. Если флаг установлен в true,
то ключи оригинального массива будут сохранены;
174
array_shift — извлекает первый элемент массива. Синтаксис:
array_shift (массив);
count — считает количество элементов массива. Синтаксис:
count (массив [, рекурсивное_вычисление]).
Функция возвращает количество элементов в массив. Если массив не является массивом, будет возвращена 1, если массив — NULL, то будет возвращен 0. Если необязательный аргумент «рекурсивное_вычисление» установлен в
COUNT_RECURSIVE (или 1), count будет рекурсивно подсчитывать количество элементов массива, что особенно полезно для подсчета всех элементов
многомерных массивов;
in_array — проверяет, присутствует ли в массиве значение. Синтаксис:
in_array (значение, массив [, флаг]).
Функция ищет в массиве значение. Если флаг установлен в true, будет
проверено также соответствие типов сравниваемых значений;
rsort — сортирует массив в обратном порядке. Синтаксис:
rsort (массив);
sort — сортирует массив. Синтаксис:
sort (массив).
5.2.5. Функции даты и времени
За работу с датой и временем в PHP отвечают следующие функции:
checkdate — проверяет правильность даты по грегорианскому календарю. Синтаксис:
checkdate (месяц, день, год).
Дата считается корректной, если все аргументы принимают допустимые
значения;
date — форматирует вывод системной даты/времени. Синтаксис:
date (формат [, метка_времени]).
Функция возвращает строку даты/времени, отформатированную в соответствии с указанным шаблоном формат (по умолчанию d.m.Y H:i). Если не задан аргумент «метка_времени», в качестве метки времени используется текущее системное время;
175
date_default_timezone_set — устанавливает временную зону по умолчанию для всех функций даты/времени в скрипте. Синтаксис:
date_default_timezone_set (временная_зона).
Московской временной зоне (часовой пояс +3) соответствует константа
«Europe/Moscow»;
getdate — возвращает информацию о дате/времени. Синтаксис:
getdate ([метка_времени]).
Функция возвращает ассоциативный массив, содержащий информацию о
дате, представленной меткой времени «метка_времени» или текущим системным временем, если «метка_времени» не был передан;
mktime — возвращает метку времени для заданной даты. Синтаксис:
mktime ([час [, минута [, секунда [, месяц [, день [, год]]]]]]).
Метка времени — это целое число, равное разнице в секундах между заданной датой/временем и началом Эпохи Unix (The Unix Epoch, 1 января 1970
00:00:00 GMT). Аргументы могут быть опущены в порядке справа налево. В
этом случае их значения по умолчанию равны соответствующим компонентам
локальной даты/времени;
time — возвращает текущую метку времени. Синтаксис:
time ().
Функция возвращает количество секунд, прошедших с начала Эпохи Unix
до текущего времени.
5.2.6. Функции для работы с файловой системой
Файл — это совокупность символов, имеющая свое расширение. Данная
совокупность не может повторяться, поэтому каждый файл имеет имя, отличное от других. Сегодня, получив широкое распространение, файлы заняли свое
место в компьютерном мире. Поэтому неотъемлемым атрибутом любого языка
программирования помимо всего прочего является также и способность как
можно более плотного взаимодействия с файлами. Под таким взаимодействием
понимается всевозможное преобразование, копирование, получение размера,
даты, чтение и прочее.
PHP обладает развитой системой функций для работы с файлами. Рассмотрим некоторые из этих функций:
basename — возвращает последний компонент имени из указанного
пути. Синтаксис:
176
basename (путь [, суффикс]).
При передаче строки с путем к файлу или каталогу, функция вернет последний компонент имени из данного пути (для файлов это имя файла и расширение). Если компонент имени заканчивается на суффикс, то он также будет
отброшен;
copy — копирует файл. Синтаксис:
copy (исходный_файл, целевой_путь).
Функция возвращает true в случае успешного копирования. В качестве
аргумента «исходный_файл» указывается путь с именем копируемого файла.
Если указывается только имя файла, то интерпретатор подразумевает, что копируемый файл находится в той же директории, что и файл скрипта. Аргумент
«целевой_путь» определяет путь, куда будет копироваться файл;
dirname — возвращает имя родительского каталога из указанного пути. Синтаксис:
dirname (путь);
file_exists — проверяет наличие указанного файла или каталога. Син-
таксис:
file_exists (путь);
filesize — возвращает размер файла. Синтаксис:
filesize (путь).
Функция возвращает размер указанного файла в байтах или false в случае
возникновения ошибки;
filetype — возвращает тип файла. Синтаксис:
filetype (путь);
fopen — открывает файл или URL. Синтаксис:
fopen (путь, тип_доступа).
Если аргумент «путь» начинается с http://, то открывается соединение
HTTP с заданным сервером и указатель файла возвращается на начало текста
ответа. Если путь начинается с ftp://, то открывается ftp-соединение с заданным
сервером и указатель возвращается на искомый файл. Иначе открывается файл
файловой системы, и указатель возвращается на открытый файл. Аргумент
«тип_доступа» в зависимости от поставленной задачи может принимать следующие значения:
177
r — открыть только для чтения, указатель помещается на начало файла;
r+ — открыть для чтения и записи, указатель помещается на начало
файла;
w — открыть только для записи, указатель помещается на начало файла, а содержимое файла удаляется;
w+ — открыть для чтения и записи, указатель помещается на начало
файла, а содержимое файла удаляется;
a — открыть только для записи, указатель помещается на конец файла;
a+ — открыть для чтения и записи, указатель помещается на начало
файла.
mkdir — создает директорию. Синтаксис:
mkdir (путь [, режим_доступа [, флаг]]).
Функция пытается создать директорию, заданную в аргументе «путь», и
возвращает true в случае успешного завершения. Аргумент «режим_доступа»
определяет права по отношению к создаваемой директории и по умолчанию равен 0777, что означает самые широкие права. Аргумент «режим_доступа» игнорируется в операционных системах семейства Windows. Аргумент «флаг»,
установленный в true, разрешает создание вложенных директорий, указанных в
«путь», и по умолчанию равен false;
move_uploaded_file — перемещает загруженный файл в новое место.
Синтаксис:
move_uploaded_file (исходный_файл, целевой_путь);
rename — переименовывает файл или директорию. Синтаксис:
rename (старое_имя, новое_имя);
rmdir — удаляет директорию. Синтаксис:
rmdir (путь).
Функция пытается удалить директорию с именем «путь». Директория
должна быть пустой и должны иметься необходимые для этого права. В случае
ошибки будет возвращено false и сгенерирована ошибка;
unlink — удаляет файл. Синтаксис:
unlink (путь).
178
Контрольные вопросы
1. Для чего в программировании применяются функции?
2. Что такое пользовательские функции, и каким образом осуществляется
работа с ними в PHP?
3. Каким образом определяются функции в PHP?
4. Как происходит передача параметров функциям в PHP? Для чего используются значения по умолчанию?
5. Чем передача «по значению» отличается от передачи «по ссылке»?
6. В чем заключается работа оператора return?
7. Для чего используются статические переменные?
8. Какие встроенные функции имеет PHP и где можно найти их подробное описание?
179
ГЛАВА 6. РАБОТА PHP И HTTP
Как известно любое взаимодействие клиента и сервера в web-службе
происходит по протоколу HTTP, рассмотренного в разд. 1.3. В данной главе
рассматривается непосредственно механизм этого взаимодействия на примере
работы HTTP с PHP-скриптами. Понимание происходящего между браузером
(клиентом) и сервером очень важно для PHP-программиста, так как внутри запросов и ответов, передаваемых от клиента к серверу и обратно, находятся полезные данные, которые можно использовать.
Каждый раз, когда пользователь нажимает на ссылку или кнопку отправки в форму, браузер отправляет web-серверу множество информации о себе и
операционной системе на компьютере пользователя. Аналогично во время ответа web-сервер отправляет множество данных о самом себе. Все эти данные
содержатся в предопределенных переменных, структурированных в виде ассоциативных массивов. Такие массивы называются суперглобальными, так как
доступ к их элементам можно осуществлять из любой точки PHP-скрипта. Помимо массива $_SERVER, рассмотренного в разд. 4.2, в PHP существуют следующие суперглобальные массивы:
$GLOBALS — содержит ссылки на все глобальные переменные
скрипта;
$_GET — ассоциативный массив переменных, посылаемых скрипту
методом GET;
$_POST — ассоциативный массив переменных, посылаемых скрипту
методом POST;
$_COOKIE — ассоциативный массив переменных, посылаемых
скрипту через Cookies;
$_REQUEST — совокупность переменных из массивов $_GET,
$_POST и $_COOKIES;
$_SESSION — массив, содержащий переменные, в текущий момент
зарегистрированные в сессии сценарии;
$_FILES — ассоциативный массив, содержащий информацию о файлах, загружаемых на web-сервер методом POST.
В данной главе издания рассматривается механизм использования этих
массивов на примере работы с HTML-формами, HTTP-заголовками, механизмом сессий и Cookies, а также при загрузке данных на сервер.
180
6.1. Работа с формами
HTML-форма, создаваемая элементом FORM, является стандартным
средством для отправки на web-сервер данных, которые пользователь ввел с
помощью клавиатуры или которые были сгенерированы скриптом (клиентским
или серверным). В атрибуте action элемента FORM указывается URI файла со
скриптом, который должен принять эти данные, и, возможно, их обработать. В
элементе FORM могут содержаться также различные управляющие элементы
(поля ввода, флажки, переключатели и прочее) и должна быть, по крайней мере,
одна специальная кнопка типа submit. Щелчок по такой кнопке, вставленной в
форму, приводит к отправке на сервер данных, содержащихся в элементах
формы. Получив данные от клиента, серверный скрипт может распорядиться
ими так или иначе, например, сохранить в файле или базе данных, обработать
каким-либо образом и в зависимости от результата послать клиенту некоторое
сообщение, сгенерировать HTML-документ или сделать что-либо иное.
Данные HTML-форм могут быть переданы на сервер методами GET и
POST и сохраняются в соответствующих суперглобальных массивах $_GET
и $_POST. Если в управляющих элементах форм (INPUT, TEXTAREA и прочих) были указаны значения атрибута name, то сервер получит соответствующие пары «имя-значение». При этом имя станет символьным индексом (ключом) массива $_GET или $_POST в зависимости от того, каким методом передавались данные. По индексу же можно получить значение его элемента, то
есть значение соответствующего элемента формы. Например, чтобы получить
содержимое элемента формы с именем item, достаточно обратиться к элементу
массива $_POST["item"] или $_GET["item"] в зависимости от заданного метода
передачи.
Рассмотрим подробнее механизм обработки данных, полученных из
HTML-форм методами GET и POST.
6.1.1. Метод GET
Метод GET передает все данные формы в заголовке HTTP-сообщения.
При отправке формы браузер добавляет в конце URL знак вопроса (?) и введенную в форму информацию как пару «имя-значение». Пример HTTP-запроса с
использованием метода GET:
GET /index.php?login=Vasya+Pupkin&password=1235 HTTP/1.1
Accept: */*
181
User-Agent: Chrome
Host: abonentplus.ru
Основные характеристики метода GET:
ограниченный объем передаваемой информации (4 Кб);
открытая передача введенный информации в обрабатывающий сценарий и вывод ее в адресную строку браузера;
возможность работы с поисковыми машинами.
Из-за незащищенности (все передаваемые данные отображаются в адресной строке браузера) и ограниченности в передаваемом объеме данных непосредственно для обработки форм метод GET практически никогда не
используется. Основное его предназначение – обеспечение доступа к общедоступным страницам и передача данных в адресной строке.
Пример 6.1. Одностраничный интерфейс
Продемонстрируем реализацию метода GET на примере создания одностраничного интерфейса сайта. Создадим три файла: index.php, 1.html и 2.html.
В первом файле реализуем меню сайта и сам одностраничный интерфейс. В два
других запишем контент сайта.
<?php
$page = "";
echo 'Это – главная страница</br>';
$menu = array(
"Страница 1" => "index.php?page=1",
"Страница 2" => "index.php?page=2"
);
function getMenu($menu, $vertical = true)
{
$style = "";
if (!$vertical)
$style = "display:inline";
echo '<ul style="list-style-type:none">';
foreach ($menu as $link => $href) {
echo "<li style='$style'><a href=\"$href\">", $link, '</a></li>';
}
echo '</ul>';
}
getMenu($menu);
if (!empty($_GET['page']))
$page = $_GET['page'];
switch ($page) {
case 1:
include '1.html';
break;
182
case 2:
include '2.html';
break;
}
?>
// Файл 1.html
<table width="150" border="1" align="left" bgcolor="white" height="60">
<tr>
<td>Это – страница 1</td>
</tr>
</table>
// Файл 2.html
<table width="150" border="1" align="left" bgcolor="white" height="60">
<tr>
<td>Это – страница 2</td>
</tr>
</table>
Результат выполнения скриптов показан на рис. 6.1.
Рис. 6.1. Одностраничный интерфейс
Рассмотрим механизм работы этого примера:
пользователь, находясь на странице index.php, хочет открыть первую
страницу и нажимает на соответствующую ссылку «Страница 1»;
PHP-интерпретатор,
обрабатывая
URI
этой
страницы
(index.php?page=1), обнаруживает знак «?», определяет следующие за ним данные (page=1) как пару «имя-значение» и записывает ее в массив $_GET;
значение элемента page массива $_GET присваивается переменной
$page ($page = $_GET['page']);
в зависимости от значения переменной $page скрипт подключает файл
1.html или 2.html.
Таким образом, данный скрипт позволяет, используя параметры GETзапроса, выводить на экран данные разных страниц, находясь при этом на стра183
нице index.php. Другими словами, скрипт реализует одностраничный интерфейс сайта. Такой подход уменьшает время загрузки страниц (так как изменяется только часть документа) и упрощает разработку сайта (так как весь внешний вид сайта фактически задается на одной странице).
6.1.2. Метод POST
Метод POST передает все данные формы в теле HTTP-сообщения. Пример HTTP-запроса с использованием метода POST:
POST /index.php HTTP/1.1
Accept: */*
User-Agent: Chrome
Host: abonentplus.ru
login=Vasya+Pupkin&password=1235
Основные характеристики метода POST:
большой объем передаваемой информации;
большая безопасность и функциональность запросов с помощью форм
методом POST;
невозможность работы с поисковыми машинами.
Передать данные методом POST можно только с помощью формы. Как
только форма отправлена, PHP заносит всю введенную информацию в суперглобальный массив $_POST. Однако напрямую брать значения для обработки из
этого массива не рекомендуется, так как на сервер через форму может быть передан вредоносный код. Во избежание этого принято фильтровать введенные
данные. Базовая фильтрация заключается в использовании функций strip_tags()
и trim().
Пример 6.2. Добавление и удаление записи
Продемонстрируем реализацию метода POST на примере добавления и
удаления записи. Создадим два файла add.php и catalog.php. В первом разместим форму, а во втором ее обработчик. Передачу данных между файлами будем осуществлять с помощью сессии.
// Файл add.php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!empty($_POST['name']) && !empty($_POST['age'])) {
session_start();
184
$_SESSION['Item']['name'] = strip_tags(trim($_POST['name']));
$_SESSION['Item']['age'] = strip_tags(trim($_POST['age']));
header("Location: catalog.php");
} else echo 'Полностью заполните форму';
}
?>
<form method='POST'>
<p>Имя:<input type='text' name='name'></p>
<p>Возраст:<input type='text' name='age'></p>
<p><input type='submit' value='Добавить'></p>
</form>
// Файл catalog.php
<?php
//Инициализация переменных
$name = "";
$age = "";
session_start();
if (isset($_POST['delete']) && isset($_POST['cbs'])) {
unset($_SESSION['Item']); //Удаление сессионной записи
}
if (!empty($_SESSION['Item']['name'])) {
$name = $_SESSION['Item']['name'];
$age = $_SESSION['Item']['age'];
}
echo "<table border='1' width='300'>
<tr>
<th width='70%'>Имя</th>
<th width='20%'>Возраст</th>
<th width='10%'></th>
</tr>
<tr>
<td>$name</td>
<td>$age</td>
<td>
<form method='POST'>
<input type='checkbox' name='cbs[]' value=$name>
</td></tr>
</table><input id='delete' type='submit' class='button' name='delete' value='Удали
ть' style='position:relative;bottom:-25px;left:150px;'></form>";
?>
<br>
<button onclick="location.href='add.php';" style="marginleft:20px">Добавить</button>
Результат выполнения скриптов показан на рис. 6.2 и 6.3.
185
Рис. 6.2. Добавление данных
Рис. 6.3. Отображение и удаление данных
Рассмотрим механизм работы этого примера:
на странице add.php выводится форма добавления данных;
пользователь, заполнив форму и нажав кнопку «Добавить», отправляет
запрос web-серверу методом POST, содержащий информацию о добавляемой
записи;
так как в описании формы не указан атрибут action, PHP-интерпретатор
отдает данные из формы на обработку файлу, в котором эта форма задана, то
есть add.php;
в файле add.php проверяется POST методом ли передаются данные
(SERVER['REQUEST_METHOD'] == 'POST') и все ли поля формы заполнены
(!empty($_POST['name']) && !empty($_POST['age']));
в случае успешной проверки создается новая сессия, а переменным
сессии присваиваются очищенные от PHP, HTML тегов и лишних пробелов
значения, полученных из формы полей name и age ($_SESSION['Item']['name'] =
strip_tags(trim($_POST['name']))). Если не все поля формы заполнены, выводится соответствующее предупреждение, и сессия не создается;
после создания сессии и ее переменных происходит переадресация на
страницу catalog.php (header("Location: catalog.php"));
в файле catalog.php переменным $name и $age присваиваются соответствующие сессионные значения и выводятся на экран в виде таблицы. Также
отображаются кнопки «Удалить» и «Добавить». При нажатии на первую, если
установлен флажок cbs (isset($_POST['delete']) && isset($_POST['cbs'])), проис186
ходит удаление сессии и соответственно переданной записи, а при нажатии на
вторую снова вызывается страница add.php.
6.1.3. Загрузка файлов на сервер
Загрузка файла на сервер осуществляется с помощью multipart-формы,
состоящей из поля выбора файла и кнопки для загрузки. Общий синтаксис такой формы:
<form action="действие" method="POST" enctype="multipart/form-data">
<input type="file" name="имя_файла">
<input type="submit" value="Загрузить">
</form>
Перед обработкой данных с multipart-формы необходимо отредактировать конфигурационный файл php.ini. За загрузку на сервер отвечают три параметра:
file_uploads — разрешает загрузку файлов на сервер по протоколу
HTTP (по умолчанию ON);
upoad_tmp_dir — устанавливает каталог для временного хранения загруженных файлов (по умолчанию /tmp);
upload_max_filesize — устанавливает максимальный объем загружаемых файлов (по умолчанию 5M).
Загруженный через форму файл сохраняется во временный каталог, указанный в параметре upload_tmp_dir, а имя файла выбирается случайным образом. После этого PHP автоматически создает пять переменных суперглобального массива $_FILES:
$_FILES['имя_файла']['name'] — имя файла до его отправки на сервер;
$_FILES['имя_файла']['size'] — размер загруженного файла в байтах;
$_FILES['имя_файла']['type'] — MIME-тип принятого файла (если
браузер смог его определить), например image/gif, text/html;
$_FILES['имя_файла']['tmp_name'] — имя файла во временном каталоге;
$_FILES['имя_файла']['error'] — код ошибки, которая может возникнуть при загрузке файла.
После завершения работы скрипта временный файл удаляется. Это означает, что файл необходимо поместить в другое место до завершения работы
187
скрипта, скопировав (с помощью функции copy) или переместив (функция
move_uploaded_file) его.
Пример 6.3. Upload изображений.
Продемонстрируем механизм загрузки файлов на сервер на примере
upload’а изображения. Для этого создадим файл image.php и запишем в него
скрипт, реализующий масштабирование передаваемого через multipart-форму
изображение, а также его загрузку на сервер и вывод на экран. Помимо этого,
для хранения временного и итогового изображений создадим папки
tmp и Images, которые должны находиться в одном каталоге с файлом
image.php. Для корректной работы скрипта необходимо подключить также графическую библиотеку GD2, расскомментировав строку extension=php_gd2.dll в
файле php.ini и перезагрузив сервер Apache.
// Файл image.php
<?php
//Функция изменения размера изображения
function resize($file)
{
global $tmp_path;
//Ограничение по ширине в пикселях
$max_size = 250;
//Cоздание исходного изображения на основе исходного файла
$src = imagecreatefromjpeg($file['tmp_name']);
//Определение ширины и высоты изображения
$w_src = imagesx($src);
$h_src = imagesy($src);
if ($w_src > $max_size) {
//Вычисление пропорций
$ratio = $w_src / $max_size;
$w_dest = round($w_src / $ratio);
$h_dest = round($h_src / $ratio);
//Создание пустого изображения
$dest = imagecreatetruecolor($w_dest, $h_dest);
//Копирование старого изображения в новое с изменением параметров
imagecopyresampled($dest, $src, 0, 0, 0, 0, $w_dest, $h_dest, $w_src, $h_src);
//Вывод изображения и очистка памяти
imagejpeg($dest, $tmp_path . $file['name']);
imagedestroy($dest);
imagedestroy($src);
return $file['name'];
} else {
//Вывод изображения без изменения и очистка памяти
imagejpeg($src, $tmp_path . $file['name']);
imagedestroy($src);
188
return $file['name'];
}
}
if (!empty($_FILES['uploadfile']['name'])) {
$tmp_path = 'tmp/';
$file_path = 'Images/';
$name = resize($_FILES['uploadfile']);
$uploadfile = $file_path . $name;
if (@copy($tmp_path . $name, $file_path . $name))
$uploadlink = "Images/" . $name;
unlink($tmp_path . $name);
echo "Изображение загружено!</br>
Имя файла: " . $_FILES['uploadfile']['name'] . "</br>
Тип файла: " . $_FILES['uploadfile']['type'] . "</br>
Размер файла: " . $_FILES['uploadfile']['size'] . "</br>
<img src='$uploadlink'>";
}
?>
<form method='POST' ENCTYPE='multipart/form-data'>
<input type='file' name='uploadfile'>
<input type='submit' value='Загрузить'>
Результат выполнения скрипта показан на рис. 6.4.
Рис. 6.4. Пример загрузки изображения на сервер
Рассмотрим механизм работы этого скрипта:
пользователь загружает в multipart-форму изображение, и, так как не
задан атрибут формы action, оно отсылается на обработку самому файлу
image.php;
в файле image.php задаются директории для хранения временного и
итогового изображений ($tmp_path = 'tmp/' и $file_path = 'Images/') и вызывается
189
функция масштабирования загруженного изображения (resize($_FILES
['uploadfile'])), результат работы которой записывается в переменную $name;
функция resize принимает загруженное изображение и производит его
масштабирование в соответствии с требуемой шириной;
скрипт пробует скопировать масштабированное изображение из временной папки в папку Images (@copy($tmp_path. $name, $file_path. $name)) и, в
случае успеха, создает ссылку на него и записывает ее в переменную
($uploadlink = "Images/". $name);
временный файл удаляется (unlink($tmp_path . $name)), а само изображение и сведения о нем выводятся на экран.
Стоит, однако, помнить, что загрузка файлов без обеспечения надлежащего контроля приводит к образованию ошибок и уязвимостей. Чтобы их избежать, необходимо проводить проверки загружаемых файлов: на тип, размер,
разрешение и пр.
6.2. Работа с Cookies
Cookies (куки) — это механизм хранения данных браузером удаленного
компьютера для идентификации возвращающихся посетителей и хранения параметров web-страниц. Наиболее распространенные примеры использования
cookie-файлов:
хранение пользовательских настроек для определенного сайта;
хранение ключей, которые можно использовать для связи пользователей с их персональными данными;
обеспечение квазипостоянного идентификатора сеанса, позволяющего
пользователю оставаться зарегистрированным на сайте до тех пор, пока он явно
не покинет сайт или не закроет браузер.
Во время визита клиента на сайт, использующий cookie-файлы, сервер
инструктирует браузер сохранить у себя определенную информацию для последующего использования. Поддерживающие cookie браузеры сохраняют данные в файле, названном по имени сайта, которому принадлежит cookie, в специальном каталоге.
Рассмотрим пример, иллюстрирующий работу Cookies. Пользователь авторизуется на сайте abonentplus.ru, послав серверу соответствующий запрос,
содержащий его логин и пароль:
POST /index.php HTTP/1.1
User-Agent: Chrome
190
Host: abonentplus.ru
login=admin&password=123
В ответ сервер выдает пользователю запрашиваемую страницу, а также
соответствующие куки:
HTTP/1.1 200 OK
Date: Thu, 17 Dec 2020 11:22:33 GMT
Server: Apache/2.2
Content-Type: text/html; charset=utf-8
Set-cookie: login=admin&password=123
Пользователь получает куки и сохраняет их в специальном файле с именем abonentplus.ru. Теперь до тех пор, пока на его компьютере присутствует
данный файл, ему не потребуется при обращении к этому сайту заново вводить
логин и пароль. Пользователь будет отправлять серверу простой GET-запрос,
указав при этом содержимое своего куки-файла:
GET /index.php HTTP/1.1
User-Agent: Chrome
Host: abonentplus.ru
Cookie: login=admin&password=123
Сервер в ответ будет выдавать запрашиваемую страницу, считая пользователя авторизованным:
HTTP/1.1 200 OK
Date: Thu, 17 Dec 2020 11:22:33 GMT
Server: Apache/2.2
Content-Type: text/html; charset=utf-8
Данные на клиентской стороне остаются постоянными в течение заданного срока действия cookie, по истечении которого файл удаляется. Срок действия
задается сервером. Пользователи могут самостоятельно редактировать и удалять cookie-файлы.
Для установки Cookies используется функция setcookie. Для этой функции можно указать шесть аргументов, один из которых (name) является обязательным:
name — имя cookie;
value — значение cookie;
expire — время жизни cookie;
191
path — путь к cookie;
domain — имя хоста, с которого был установлен cookie;
secure — передача cookie через защищенное HTTPS-соединение.
Если параметр expire не указан, то cookie будут жить до конца сессии.
Пример установки cookie:
setcookie("admin","123"); // cookie до конца сессии
setcookie("admin","123",0x7FFFFFFF); // «постоянные» cookie
Стоит помнить, что куки передаются в HTTP-заголовках, поэтому должны устанавливаться до первого вывода информации в браузер (оператор echo,
вывод функции или HTML-кода).
Все куки хранятся в суперглобальном массиве $_COOKIE. Доступ к значениям осуществляется по имени установленных Cookies:
echo $_COOKIE['admin'];
Удалить Cookies можно тремя способами:
удалив его значение:
setcookie("admin");
setcookie("admin", " ");
изменив его временную метку:
$newtime = time() - 3600;
setcookie("admin","25",$newtime);
удалив переменную из массива $_COOKIE:
unset($_COOKIE['admin']);
6.3. Работа с HTTP-заголовками
Если требуется определить только информацию заголовка о файле или
ресурсе, то используется метод HEAD. Он аналогичен методу GET, за исключением того, что сервер ничего не посылает в теле ответа:
HEAD /index.php HTTP/1.1
Accept: */*
192
User-Agent: Chrome
Host: abonentplus.ru
HTTP/1.1 200 OK
Date: Thu, 17 Dec 2020 11:22:33 GMT
Server: Apache/2.2
Content-Type: text/html; charset=utf-8
Практически на все заголовки, возвращаемые сервером, можно повлиять — допослать заголовки, которые он не посылает, или изменить значение
посылаемого заголовка.
Все заголовки посылаются с помощью функции header:
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
Функция header обязана вызываться до отправки любого вывода: код
HTML, пустые строки в файле, функции include и require. В противном случае
PHP сгенерирует ошибку «headers already sent». Для ее устранения следует использовать буферизацию вывода, вызвав функции ob_start и ob_end_flush в
начале и конце документа соответственно или установив равной ON директиву
конфигурации output_buffering в файле php.ini.
Проверить, отправлены ли HTTP-заголовки клиенту, можно с помощью
функции headers_sent.
Основные заголовки, передаваемые между браузером и сервером, были
рассмотрены в подразд. 1.3.1. Здесь же описывается механизм работы с некоторыми из них:
location — URI, по которому клиенту следует перейти или URI созданного ресурса. Заголовок используется для переадресации (редиректа) пользователей на другие страницы:
header("Location: http://www.abonentplus.ru"); // редирект на страницу abonentplus.
ru
refresh — перезапрос ресурса с определенным интервалом времени:
header("Refresh: 1"); // перезапрос страницы каждую секунду
Перезапрос можно осуществлять одновременно с переадресацией:
header("Refresh: 3; url=http://www.abonentplus.ru"); // перезапрос страницы через 3
секунды с редиректом на страницу abonentplus.ru
193
content-type — формат и способ представления ресурса;
header("Content-type: text/html"); // вывод ресурса как html-страницы
header("Content-type: text/plain"); // вывод ресурса как текст
Помимо MIME-типа можно также указать кодировку ресурса:
header("Content-type: text/html; charset=utf-8"); // вывод ресурса как htmlстраницы в кодировке utf-8
сontent-disposition — способ вывода ресурса. Заголовок может принимать два значения:
inline — выводит ресурс в окне браузера. Если в браузере нет средств
просмотра этого ресурса, то будет выведен его код;
attachment — выводит ресурс в сторонний файл, предлагая пользователю сохранить его или открыть в соответствующей программе:
header("ContentDisposition:attachment; filename=\"file.pdf\""); // вывод страницы в pdf-файл
cache-control — директива для управления кэшированием:
header("Cache-control: no-store"); // запрет кэширования
header("Cache-control: public"); // разрешение кэширования
set-cookie — директива для управления куки. Аналогична функции
setcookie:
header("Set-cookie:login=admin; password=123");
6.4. Работа с сессиями
Сессии позволяют передавать произвольное количество переменных и хранить их между запросами. Все они хранятся на сервере, а доступ к ним осуществляется с помощью уникального номера, присвоенного при старте сессии. Номер
сессии (SID) выглядит подобным образом «e591e8ab5892a486f60f208487152348».
Каждый пользователь получает уникальный номер сессии, по этой причине в
сессиях можно хранить данные, относящиеся к конкретному пользователю, не
боясь, что эти данные увидит кто-то другой.
194
При посещении страницы клиенту присваивается уникальный номер и
сохраняется в куки браузера. Вместе с этим на сервере создается файл с номером этой сессии. Когда пользователь перемещается по страницам сайта, его
браузер передает на сервер этот номер, и с помощью PHP можно получать доступ к файлу с этим номером, в котором и хранятся все переменные сессий.
Номер сессии в куки будет жить, пока пользователь осуществляет серфинг по сайту или пока не закроет браузер (настройка по умолчанию). При
следующем посещении этому пользователю будет выделен уже другой номер
сессии.
Для начала работы с сессиями требуется в начале каждого файла, в котором используются сессии, вызвать функцию session_start:
session_start();
Когда сессия запущена, можно сохранять в ней переменные, которые будут доступны только этому посетителю во время перемещений по сайту. Эти
переменные хранятся в суперглобальном массиве $_SESSION:
$_SESSION['login'] = $login;
Закрыть сессию и удалить файл сессии можно двумя способами:
вызвав функцию session_destroy:
session_destroy();
удалив переменную из массива $_SESSION:
unset($_SESSION['login']);
Пример 6.4. Авторизация
Продемонстрируем механизм работы сессий на примере пользовательской авторизации. Для этого создадим страницу авторизации auth.php, на которой будет производиться проверка введенных пользователем данных и непосредственно авторизация, и защищенную страницу test.php, требующую от
пользователя авторизации:
// файл auth.php
<?php
if (isset($_POST['login']) && isset($_POST['password']))
{
$login = $_POST['login'];
$password = $_POST['password'];
session_start();
$_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];
$_SESSION['user_login'] = $login;
header("Location: http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
195
exit;
}
if (isset($_GET['logout']))
{
session_start();
session_destroy();
header("Location: index.php");
exit;
}
if (isset($_REQUEST[session_name()]))
if (isset($_SESSION['user_login']) and $_SESSION['ip'] == $_SERVER['REMOTE_ADDR'])
return;
else
{
?>
<table align="center" style="margin-left:40px">
<tr><td>
<h3>Вход:</h3>
<form method="POST">
<p>Логин:<input type="text" name="login"><br>
<p>Пароль:<input type="password" name="password"><br>
<p><input type="submit"><br>
</form>
</td></tr></table>
<?php
}
exit;
?>
// файл index.php
<?php
ob_start();
session_start();
?>
<table>
<tr>
<td colspan="2" class="top_left">
<?php
if (!empty($_SESSION['user_login']))
echo "Привет, <b>{$_SESSION['user_login']}</b> <a href='index.php?l
ogout=true'>(Выход)</a><br><br>";
echo "Ваш ip - <b>{$_SESSION['ip']}</b>";
?>
</td>
</tr>
</table>
<form method="POST">
<h2>Авторизация</h2>
<p>Логин:<input type="text" name="login"><br>
<p>Пароль:<input type="password" name="password"><br>
<p><input type="submit" value="Войти"><br>
</form>
<?php
require 'auth.php';
ob_end_flush();
?>
196
Результат выполнения примера показан на рис. 6.5 и 6.6.
Рис. 6.5. Неавторизованный вход на страницу
Рис. 6.6. Авторизованный вход на страницу
Рассмотрим механизм работы этого примера:
при попытке пользователя зайти на страницу test.php происходит автоматический вызов файла auth.php (require 'auth.php');
скрипт файла auth.php сравнивает IP-адрес пользователя с сессионной
переменной ip ($_SESSION['ip'] == $_SERVER['REMOTE_ADDR']) и, так как
сессия не создана, выводит форму авторизации;
если пользователь полностью заполняет форму, введенные им значения
очищаются от PHP-, HTML-тегов и лишних пробелов и записываются в переменные $login и $password;
создается сессия, и задаются сессионные переменные: в ip записывается
текущий
IP-адрес
пользователя
($_SESSION['ip']
=
$_SERVER['REMOTE_ADDR']), а в login — его введенный логин
($_SESSION['login'] = $login);
происходит переадресация на предыдущую страницу, которой в данном
случае
является
test.php
(header("Location:
http://".$_SERVER
['HTTP_HOST'].$_SERVER['REQUEST_URI']));
при переходе на страницу test.php снова срабатывает директива require
и обрабатывается содержимое файла auth.php;
скрипт проверяет наличие сессии (isset($_REQUEST[session_name()])),
а также снова сравнивает IP-адрес пользователя с сессионной переменной ip;
197
если проверка проходит успешно, обработка файла auth.php завершается (с помощью оператора return) и продолжается вывод файла test.php;
когда пользователь нажимает на кнопку «Выход», это фиксируется
скриптом файла auth.php (isset($_GET['logout'])) и сессия удаляется.
Таким образом, подключая файл auth.php к другим файлам сайта, можно
легко создавать страницы, недоступные неавторизованным пользователям.
Контрольные вопросы
1. Каково назначение суперглобальных массивов и какие суперглобальные массивы существуют в PHP?
2. В каких случаях для передачи данных используется метод GET и каковы его особенности?
3. В каких случаях для передачи данных используется метод POST и каковы его особенности?
4. Каким образом осуществляется загрузка данных на сервер?
5. Что такое Cookies и где они применяются?
6. Каким образом не допустить ошибку «headers already send»?
7. В чем заключается механизм работы PHP-сессий?
198
ГЛАВА 7. РАБОТА PHP И FIREBIRD
При разработке любого web-приложения встает вопрос о необходимости
хранения данных. В случае простых приложений, а также при относительно небольшом объеме данных и интенсивности запросов к ним последние можно
хранить в обычных текстовых файлах или в сессиях. Однако если приложение
предполагает наличие тысяч и более записей, высокую интенсивность запросов,
защиту данных, выборку нужных сведений по различным критериям, а также
их анализ, то целесообразнее использовать базы данных.
База данных представляет собой хранилище информации, представленное
одним или несколькими файлами. В настоящее время наиболее широко используются так называемые реляционные базы данных, в которых информация организована в виде таблиц, состоящих из строк и столбцов. Таблицы могут быть
связаны между собой, образуя сложную систему. Создание баз данных и доступ
к ним обеспечивает система управления базами данных (СУБД). Вместе с тем
доступ к базам данных через СУБД возможен и из приложений, написанных на
том или другом языке программирования.
PHP имеет наборы специальных функций для работы со многими СУБД,
такими как Microsoft SQL Server (MS SQL), MySQL, Oracle, Interbase, Firebird,
PostgreeSQL, Informix, Sybase, Ingres и IBM DB2. Кроме того, PHP соответствует стандарту ODBC (Open Database Connectivity — открытый интерфейс доступа к базам данных), что позволяет обращаться к таким СУБД, как MS Access. В
настоящем учебнике рассматривается работа PHP с СУБД Firebird.
В настоящей главе рассматривается язык запросов SQL, описываются
функции, позволяющие осуществлять взаимодействие PHP с СУБД Firebird, а
также приводятся практические примеры их совместной работы.
7.1. Основы SQL
Перед началом изучения работы PHP и СУБД Firebird стоит рассмотреть
язык, который лежит в основе всех современных реляционных СУБД — SQL.
SQL (Structured Query Language — язык структурированных запросов) —
стандартный набор команд (операторов), который используется для обмена
данными с системой управления базами данных на любой платформе.
Любая задача, такая как создание баз данных или таблиц, а также сохранение, получение, удаление и обновление данных в таблицах, решается посредством SQL-операторов. Кроме того, они позволяют выполнять обработку дан199
ных и осуществлять администрирование баз данных — определять пользователей (имя и пароль), устанавливая их права (привилегии) на использование базы
данных. Реализация SQL-операторов отличается в разных СУБД, но базовые
идеи абсолютно идентичны. Запросы к базе данных, составленные из SQLоператоров, могут возвращать, а могут и не возвращать данные. Например, запрос на выборку данных по некоторому критерию возвращает данные, а запрос
на создание новой таблицы или удаление записи — нет [2].
Рассмотрим основной синтаксис использующегося в Firebird диалекта
языка SQL. Более подробно он рассмотрен в пособии «Построение запросов и
программирование на SQL».
7.1.1. Типы данных
При создании таблицы базы данных необходимо определить тип и размер
каждого поля. Поля аналогичны PHP-переменным за исключением того, что в
каждом поле могут храниться только данные определенного типа и размера.
Следовательно, в отличие от PHP-переменных записать символьные данные в
целочисленное поле невозможно. В Firebird диалекте языка SQL поддерживается три распространенные группы типов данных:
числовой тип — целые и вещественные числа:
SMALLINT — малые целые числа (от –32 768 до 32 767);
31
31
INTEGER — целые числа (от –2 до 2 –1);
63
63
BIGINT – большие целые числа (от –2 до 2 –1);
FLOAT — числа с плавающей запятой с обычной точностью (от
1,175×10–38 или –3,402×1038 до 3,402×1038);
DOUBLE PRECISION — числа с плавающей запятой с двойной точностью (от 2,225×10–308 или –1,797×10308 до 1,797×10308);
NUMERIC и DECIMAL — масштабируемые числовые типы, сохраняемые как строки;
тип даты и времени:
DATE — дата без времени. Формат YYYY-MM-DD. Диапазон от 000101-01 до 9999-12-31;
TIME — время без даты. Формат hh:mm:ss. Диапазон от —838:59:59 до
838:59:59;
TIMESTAMP — дата и время. Формат YYYY-MM-DD hh:mm:ss. Диапазон от 0001-01-01 00:00:00 до 9999-12-31 23:59:59;
200
символьный тип — строки различной длины:
CHAR — строки фиксированной длины. Диапазон от 0 до 32 767 сим-
волов;
VARCHAR — строки переменной длины. Диапазон от 0 до 32 765 сим-
волов;
объекты и массивы:
BLOB — большой двоичный объект. Двоичные данные от 0 до 65 535
байтов;
ARRAY — массив данных.
7.1.2. Операторы
Каждое предложение SQL — это запрос или обращение к базе данных,
которое приводит к ее изменению. Для создания запросов используются SQLоператоры. Посредством запроса приложение обращается к СУБД, которая затем возвращает приложению записи, удовлетворяющие заданным в запросе
критериям. Хотя оператор не является запросом, пока он не передан серверу,
термины «запрос» и «оператор» зачастую используются одинаково.
Запросы возвращают массив записей, удовлетворяющих заданным условиям и содержащих информацию из выбранных полей. PHP и другие языки
программирования, которые поддерживают подключение к базам данных, могут обрабатывать возвращаемый массив. Этот массив называется результирующим множеством и является ответом СУБД на данный запрос.
SQL-операторы делятся на:
операторы определения данных;
операторы манипуляции данными;
операторы определения доступа к данным;
операторы управления транзакциями.
Рассмотрим первые две группы операторов.
Операторы определения данных
Операторы определения данных отвечают за создание и удаление объектов (баз данных и таблиц) и включают следующие операторы:
1. CREATE DATABASE — создает базу данных с указанным именем.
Если база данных уже существует, и не определено IF NOT EXISTS, возникает
ошибка. Синтаксис:
201
CREATE DATABASE [IF NOT EXISTS] имя_бд
2. DROP DATABASE — удаляет все таблицы в базе данных и саму базу
данных. Можно использовать ключевые слова IF EXISTS, чтобы предотвратить
ошибку, если база данных не существует. Синтаксис:
DROP DATABASE [IF EXISTS] имя_бд
3. CREATE TABLE — создает таблицу с заданным именем в текущей
базе данных. Если не имеется никакой текущей базы данных, или если таблица
уже существует, возникает ошибка. Если указано ключевое слово
TEMPORARY, то создается временная таблица, удаляемая после завершения
подключения к базе данных. Синтаксис:
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] имя_таблицы
(определение_столбца [, определение_столбца | ограничение_таблицы ...])
При создании таблицы основная задача — определить различные атрибуты и ограничении для каждого столбца этой таблицы. Синтаксис определения
столбца:
определение_столбца = имя_столбца
{тип_данных | COMPUTED [BY] (выражение) | домен}
[DEFAULT {| NULL | USER}]
[NOT NULL] [ограничение_столбца]
[COLLATE порядок_сортировки]
При создании таблицы для столбца можно описать требуемые и необязательные атрибуты. Требуемые атрибуты:
идентификатор столбца (имя), уникальный среди столбцов этой таблицы;
одно из следующих:
тип данных SQL;
выражение для вычисляемого столбца. Вычисляемые столбцы используются только для вывода и чтения. Включение их в операторы INSERT или
UPDATE вызовет исключение;
имя домена для столбцов, основанных на доменах.
Необязательные атрибуты:
DEFAULT — значение по умолчанию. Это значение должно быть совместимым с типом данных столбца и должно согласовываться с любыми другими ограничениями этого столбца или лежащего в основе домена. Значение по
умолчанию может быть:
константой;
контекстной переменной;
202
предварительно определенным литералом даты;
значением NULL;
COLLATE — перекрывает последовательность сортировки для набора
символов столбца в домене, на котором основывается столбец;
NOT NULL — указывает недопустимость пустого значения.
Любое условие, налагаемое на формат, диапазон значений, содержание
или зависимости структуры данных, называется ограничением. SQL предоставляет несколько способов для реализации ограничений:
PRIMARY KEY — ограничение целостности (набор поддерживаемых
правил), которое формально отмечает столбец или группу столбцов как уникальный идентификатор для каждой строки в таблице;
CHECK — проверяет достоверность вводимых значений данных. Оно
реализует условия или требования, которым должно удовлетворять значение
для успешного добавления данных. Ограничение CHECK может:
проверять, что вводимое значение находится в указанном диапазоне;
проверять, что значение присутствует в списке допустимых значений;
сравнивать значение с константой, выражением или со значением данных другого столбца из этой же строки;
UNIQUE — гарантирует, что никакие две строки не будут иметь то же
значение указанного столбца или группы столбцов. Ограничение фактически
создает уникальный ключ, которые виртуально имеет те же возможности, что и
первичный ключ.
4. ALTER TABLE — позволяет изменять структуру существующей таблицы. Синтаксис:
ALTER TABLE имя_таблицы
ALTER [COLUMN] имя_столбца {TO новое_имя | TYPE новый_тип | POSITION новая_позиция}
ADD определение_столбца
DROP имя_столбца
5. DROP TABLE — удаляет одну или более таблиц. Синтаксис:
DROP TABLE [IF EXISTS] имя_таблицы [,имя_таблицы,...]
[RESTRICT | CASCADE]
Ключевые слова RESTRICT и CASCADE ничего не делают и нужны
лишь для совместимости с другими СУБД.
203
Операторы манипуляции данными
Все запросы, составленные из операторов манипуляции данными, обращаются к данным, постоянно хранящимся в базе данных в виде строк в таблицах. Запрос задает набор данных и одну или более операций, которые должны
быть выполнены над этим набором. Он может использовать выражения для
преобразования данных для поиска или сохранения или для предоставления
специальных условий поиска для наборов данных.
Для создания таких запросов используются следующие операторы:
1. SELECT — возвращает набор данных (выборку) из базы данных, удовлетворяющий заданному условию. Синтаксис:
SELECT [FIRST m] [SKIP n] [[ALL] | DISTINCT]
список_столбцов [, [имя_столбца] | выражение | константа]
AS псевдоним]
FROM имя_таблицы
[{[[INNER] | [{LEFT | RIGHT | FULL} [OUTER]] JOIN] имя_таблицы
ON условие_соединения
[WHERE условие_поиска]
[GROUP BY список_группируемых_столбцов]
[HAVING предикат_группирования]
[UNION выражение выбора [ALL]]
[PLAN выражение_плана]
[ORDER BY список_столбцов]
Большинство предложений запроса является необязательным, при этом
важно их использование в правильном порядке:
ALL — значение по умолчанию режима выборки для выходного списка. Возвращает все строки, соответствующие условиям в спецификации;
DISTINCT — режим выборки, подавляющий вывод всех дубликатов
строк в выходной набор;
FIRST m SKIP n — режим выбора первых m строк в упорядоченном
наборе и игнорирования первых n строк в упорядоченном наборе соответственно;
FROM — источник данных, который может быть таблицей, просмотром или процедурой;
JOIN — позволяет соединять записи из двух таблиц базы данных. Используется для вывода связной информации, хранящейся в нескольких таблицах, в одном запросе:
204
INNER — внутреннее соединение. Объединяет две таблицы, где каждая строка обеих таблиц в точности соответствует условию;
OUTER — внешнее соединение. Присоединение таблицы с необязательным присутствием записи в таблице;
RIGHT OUTER — правое внешнее соединение. Присоединяет к правой
таблице все записи из левой, соответствующие условию, плюс все не вошедшие
записи из правой таблицы. Поля левой таблицы заполняются значениями
NULL;
LEFT OUTER — левое внешнее соединение. Присоединяет к левой
таблице все записи из правой, соответствующие условию, плюс все не вошедшие записи из левой таблицы. Поля правой таблицы заполняются значениями
NULL;
FULL OUTER — полное внешнее соединение. Целиком объединяет записи двух таблиц. Поля, не соответствующие условию, заполняются значениями NULL;
WHERE — условие поиска, ограничивающее выводимые строки. Условия могут изменяться от условия простого соответствия для одного столбца до
сложных условий, включающих выражения, предикаты AND, OR и NOT, преобразование типов, условия наборов символов и последовательностей сортировки;
GROUP BY — используется вместе с функциями агрегирования данных для того, чтобы последние действовали на определенные группы строк результирующей таблицы данных. На месте имен полей могут быть использованы
их порядковые номера в списке полей результирующей таблицы;
HAVING — используется вместе со спецификацией группирования для
включения или исключения строк или групп, как это делает предложение
WHERE, ограничивая набор строк;
UNION — объединяет два или более спецификаций запросов, которые
могут использовать разные таблицы, в один выходной набор. Выходные столбцы в каждой выходной спецификации должны соответствовать по степени, типу и размеру;
PLAN — позволяет включить план запроса в спецификацию запроса.
План является инструкцией по использованию отдельных индексов, порядка
соединения и методов доступа для запроса;
ORDER BY — сортирует выходной набор.
205
2. INSERT – вставляет новые строки в существующую таблицу. SQL не
позволяет в одном операторе INSERT добавлять строки более чем в одну таблицу. Синтаксис:
INSERT INTO имя_таблицы (список_столбцов)
VALUES (список_значений)
3. UPDATE — модифицирует столбцы в существующих строках таблиц с
новыми значениями. SQL не позволяет одному оператору UPDATE обращаться
к строкам нескольких таблиц. Предложение SET указывает, какие столбцы изменять, и значения, которые им должны быть заданы. Предложение WHERE,
если задано, определяет, какие строки должны модифицироваться. Иначе модифицируются все строки. Если определено предложение ORDER BY, строки
будут модифицироваться в том порядке, который определен. Синтаксис:
UPDATE имя_таблицы
SET имя_столбца = значение [, имя_столбца = значение …]
[WHERE условие_поиска]
Значение в предложении SET может быть:
константой;
идентификатором другого столбца в той же таблице;
выражением;
контекстной переменной сервера;
вызовом определенной пользовательской функции.
4. DELETE – удаляет строки, которые удовлетворяют условию, и возвращает число удаленных записей. SQL не позволяет одному оператору
DELETE удалять строки более чем из одной таблицы. Если не указано предложение WHERE, то будут удалены все строки таблицы. Синтаксис:
DELETE FROM имя_таблицы
[WHERE условие_поиска]
7.1.3. Выражения
Выражения SQL представляют формальные компактные методы для вычисления, преобразования и сравнения значений. Простое выражение, которое
утверждает некоторый факт о значении, называется предикатом. Предикат может быть истинным, ложным и неопределенным (трактуется как ложь). SQLоператоры обычно проверяют предикаты во фразах WHERE и в выражениях
206
CASE. Решения принимаются в соответствии с результатом вычисления
предиката.
Выражения SQL используются для:
преобразования найденных данных в выходные столбцы;
задания условий поиска в предложении WHERE операторов SELECT,
UPDATE и DELETE;
задания условий проверки данных в ограничителях CHECK;
определения вычисляемых столбцов в операторах CREATE TABLE
и ALTER TABLE;
преобразования или создания входных данных в процессе их сохранения в таблице при использовании операторов INSERT или UPDATE;
упорядочивания или группирования выходных наборов;
при установке во время выполнения условий определенного вывода.
Выражения могут включать в себя, помимо имен столбцов, констант, литералов дат и круглых скобок, следующие операторы:
арифметические операторы — символы «+», «–«, «*» и «/». Используются для вычисления значений;
логические операторы — слова NOT, AND и OR. Используются в простых условиях поиска или при комбинировании простых условий поиска для
создания сложных предикатов;
операторы сравнения — «<», «>», «<=», «>=», «=», «!>», «!<» и «<>».
Используются для сравнения утверждений;
другие операторы сравнения:
BETWEEN … AND … — значение попадает во включающий диапазон
значений;
CONTAINING — строковое значение содержит указанную строку.
Сравнение является независимым от регистра;
IN — значение присутствует в указанном наборе;
LIKE — равенство указанной строке с шаблонными подстановками
(«%» — замена любой строки символов, «_» — замена одиночного символа);
STARTING WITH — строковое значение начинается с указанной
строки;
операторы существования — предикаты, используемые для проверки
существования значения в наборе:
ALL — проверяет, является ли сравнение истинным для всех значений,
возвращенных подзапросом;
207
[NOT] EXISTS — существует ли (или нет) по крайней мере одно значение в выходном результате подзапросе;
[NOT] SINGULAR — проверяет, возвращает ли подзапрос в точности
одно значение. Если возвращается NULL или более одного значения, то
SINGULAR дает ложь;
SOME — проверяет, является ли сравнение истинным по крайней мере
для одного значения, возвращает подзапросом;
ANY — проверяет, является ли сравнение истинным по крайней мере
для одного значения, возвращает подзапросом;
оператор конкатенации — пара вертикальных черт (||). Используется
для соединения символьных строк.
7.2. Функции PHP для работы с Firebird
При взаимодействии PHP-скрипта с СУБД обычно выполняются следующие действия:
1) подключение к серверу базы данных;
2) передача SQL-запроса, который должен быть выполнен СУБД. Он
оформляется в виде обычной строки и передается специальной PHP-функции в
качестве параметра;
3) получение от СУБД набора данных, соответствующих переданному
SQL-запросу;
4) обработка полученных данных. Они могут быть отформатированы или
подвергнуты анализу и преобразованию;
5) отключение от базы данных, если не предполагается повторно выполнить этапы 2–4. Отключаться от базы данных рекомендуется всякий раз после
завершения работы с ней.
Все эти действия выполняются посредством совокупности соответствующих PHP-функций. Рассмотрим основные из них:
ibase_connect — создает соединение с Firebird-сервером. Синтаксис:
ibase_connect (имя_узла, имя_пользователя, пароль_пользователя). Функция в
качестве аргументов принимает следующие параметры:
имя узла — доменное имя или IP-адрес компьютера, на котором расположена база данных. Если она находится на том же компьютере, что и модуль
PHP, то достаточно указать localhost. При необходимости можно указать через
символ «/» порт, который использует СУБД;
208
имя пользователя — строка символов, соответствующая имени пользователя, под которым он может получить доступ к базе данных;
пароль пользователя — строка символов, которая вместе с именем
пользователя служит для обеспечения доступа к базе данных. Пароль так же,
как и имя пользователя, можно узнать у администратора базы данных.
Как правило, эти параметры выносят в отдельный файл и подключают его
ко всем файлам, которые осуществляют взаимодействие с базой данных. В случае успешного подключения к серверу функция возвращает идентификатор соединения (или NULL в случае ошибки). Пример подключения:
<?php
$host = "localhost";
$username = "SYSDBA";
$password = "masterkey";
ibase_connect($host, $username, $password);
?>
ibase_pconnect — создает постоянное соединение с Firebird-сервером,
которое не закрывается по окончании выполнения скрипта. Синтаксис:
ibase_pconnect (имя_узла, имя_пользователя, пароль_пользователя);
ibase_close – закрывает соединение с Firebird-сервером. Синтаксис:
ibase_close ([идентификатор_соединения]). Функция в качестве аргумента
«идентификатор_соединения» принимает идентификатор соединения, создаваемый функцией ibase_connect. Если он опущен, то используется открытое ранее
соединение;
ibase_query —
выполняет запрос к базе данных. Синтаксис:
ibase_query (идентификатор_соединения, строка_запроса). Функция принимает
два аргумента: идентификатор соединения, создаваемый при подключении к
СУБД и строку SQL-запроса. Если запрос терпит неудачу, возвращается false.
Если он выполнен успешно и имеется результирующий набор данных, возвращается идентификатор результата. Если результирующего набора нет, возвращает true. Пример выполнения запроса:
<?php
$dbh = ibase_connect($host, $username, $password);
$query = "SELECT * FROM ITEMS";
Ibase_query($dbh, $query);
?>
209
ibase_errcode — возвращает код ошибки, возникшей вследствие не-
удачного взаимодействия с базой данных. Синтаксис: Ibase_errcode ();
ibase_errmsg — возвращает сообщение об ошибке. Синтаксис:
Ibase_errmsg ().
Пример вывода сообщения об ошибке:
<?php
Ibase_query($dbh, $query)
or die("Сбой при доступе к БД: " . ibase_errmsg());
?>
ibase_affected_rows — возвращает число строк, на которые повлиял
предыдущий запрос. Синтаксис: Ibase_affected_rows ();
ibase_drop_db — удаляет базу данных. Синтаксис: ibase_drop_db
([идентификатор_соединения]). В случае успешного завершения функция возвращает true, соединение закрывается, а база данных удаляется с сервера. В
случае возникновения ошибки возвращается false. Если значение аргумента
«идентификатор_соединения» не указывается, удаляется база данных, с которой ранее было установлено соединение;
ibase_fetch_row — возвращает массив, соответствующий извлеченной
строке базы данных. Синтаксис: ibase_fetch_row (идентификатор_результата).
Функция извлекает одну строку данных из результата запроса, ассоциированного со специфицированным идентификатором результата. Каждый результирующий столбец хранится в смещении массива, начиная со смещения 0. Последующий вызов ibase_fetch_row возвращает следующую строку результирующего набора или false, если строк больше нет. Пример извлечения данных из базы
данных:
<?php
$dbh = ibase_connect($host, $username, $password);
$query = "SELECT * FROM ITEMS";
$result = Ibase_query($dbh, $query);
while ($row = ibase_fetch_row($result))
{
echo $row[0];
echo $row[1];
}
?>
ibase_trans — начинает новую транзакцию. Синтаксис: ibase_trans().
Транзакция в базах данных — это группа последовательно выполняемых SQL
210
операторов, которые либо должны быть выполнены все, либо не должен быть
выполнен ни один из них. Главная задача транзакций —обеспечить целостность
данных в случаях, когда несколько SQL-операторов выполняют зависящие друг
от друга изменения данных;
ibase_commit — подтверждает транзакцию, которая была создана
функцией ibase_trans. Синтаксис: ibase_commit(). Сочетание функций
ibase_trans и ibase_commit помогает упорядочить осуществление запросов к базам данных, объединяя их в транзакции. Это позволяет реализовать в одном
PHP-скрипте, например, создание базы данных, выборку данных и ее удаление.
7.3. Практическое использование Firebird в PHP-приложениях
В качестве иллюстрации работы PHP с СУБД Firebird рассмотрим создание сайта-каталога. Работа с каталогом предполагает добавление записей в каталог, их просмотр, редактирование, удаление и поиск. Также, так как все записи каталога хранятся в базе данных, требуется создать базу данных и соответствующую таблицу. Значения полей таблицы зависит от предметной области
сайта-каталога, но в общем случае таблица должна содержать поле идентификатора (ключевое поле) записи и поле ее названия.
Рассмотрим PHP-скрипты, реализующие данные операции.
7.3.1. Создание базы данных и таблиц
Сгенерировать базу данных и таблицы Firebird можно двумя способами — с помощью различных Firebird-клиентов и сред разработки (таких как
IBExpert, FlameRobin, Blaze Top, Database Master) или непосредственно из PHPскрипта. Рассмотрим второй вариант.
Пример 7.1. Создание базы данных и таблиц.
Создадим в директории C:\base\ базу данных кинофильмов c именем
Base.fdb, содержащую одну таблицу Films. В ней четыре столбца: идентификатор (id), название (name), жанр (genre) и год выпуска (release_year):
<?php
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
ibase_query(IBASE_CREATE, "CREATE DATABASE '$host' USER '$user' PASSWORD '$pass
' DEFAULT CHARACTER SET UTF-8");
211
ibase_close();
$dbh = ibase_connect($host, $user, $pass);
ibase_trans();
ibase_query($dbh, "CREATE TABLE FILMS (ID INTEGER NOT NULL, NAME VARCHAR(40) NO
T NULL, GENRE VARCHAR(30) NOT NULL, RELEASE_YEAR SMALLINT)") or die ("Сбой при дост
упе к БД: " . ibase_errmsg());
ibase_commit();
?>
Рассмотрим механизм работы этого скрипта:
задается имя узла ($host = "localhost:C:\base\Base.fdb";), имя пользователя ($user = "SYSDBA") и пароль ($pass = "masterkey");
выполняется запрос на создание базы данных. Помимо ранее перечисленных параметров, запрос содержит предложение, задающее кодировку создаваемой базы данных (DEFAULT CHARACTER SET UTF-8");
созданное предыдущим запросом соединение к базе данных закрывается (ibase_close()) и создается новое с прежними параметрами ($dbh =
ibase_connect($host, $user, $pass));
создается новая транзакция (ibase_trans());
выполняется запрос на создание таблицы. При этом поля id, name
и genre указываются как обязательные для заполнения (NOT NULL);
транзакция подтверждается (ibase_commit()).
Результатом выполнения данного скрипта будет созданная на физическом
диске C в папке base база данных Base.fdb, содержащая таблицу Films с заданной структурой полей.
7.3.2. Получение системных данных
Все объекты, определенные в базе данных, называются метаданными или
ее схемой. Firebird хранит метаданные в множестве таблиц, которые он создает
прямо в базе данных, — в системных таблицах. Идентификаторы всех системных таблиц начинаются с символов «RDB$». Например, таблица
RDB$RELATION_FIELDS хранит информацию и описание всех полей
в каждой таблице.
Возможно изменение данных в системных таблицах посредством обычных SQL-операторов, но делать это обычным пользователям не рекомендуется.
В то же время запросы на выборку данных SELECT к системным таблицам являются очень полезными, когда необходимо посмотреть метаданные базы данных без использования специального инструментария и сред разработки.
212
Пример 7.2. Получение метаданных.
Продемонстрируем механизм получения метаданных средствами PHP на
примере базы данных, созданной в прошлом примере. Создадим скрипт, выводящий на экран в виде HTML-таблицы метаданные базы данных Base.fdb —
названия таблиц, названия полей, их тип, длину и позицию, ограничения на
NULL:
<?php
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
function getTableInfo($host, $user, $pass)
{
$dbh = ibase_connect($host, $user, $pass);
$query = "SELECT R.RDB\$RELATION_NAME AS RELATION_NAME, R.RDB\$FIELD_NAME AS FIELD_NAME
, F.RDB\$FIELD_LENGTH AS FIELD_LENGTH, T.RDB\$TYPE_NAME AS TYPE_NAME, CASE R.RDB\$N
ULL_FLAG WHEN 1 THEN 'TRUE' ELSE 'FALSE' END AS NULL_FLAG, R.RDB\$FIELD_POSITION AS
FIELD_POSITION
FROM RDB\$FIELDS F, RDB\$RELATION_FIELDS R, RDB\$TYPES T
WHERE (F.RDB\$FIELD_NAME = R.RDB\$FIELD_SOURCE) AND (R.RDB\$SYSTEM_FLAG = 0
) AND (F.RDB\$FIELD_TYPE = T.RDB\$TYPE) AND (T.RDB\$FIELD_NAME = 'RDB\$FIELD_TYPE')
ORDER BY RELATION_NAME;";
$result = ibase_query($dbh, $query);
echo "<table border='1' width='60%'><tr>
<th width='20%'>Таблица</th>
<th width='20%'>Поле</th>
<th width='10%'>Тип</th>
<th width='10%'>Длина</th>
<th width='30%'>Ограничение на NULL</th>
<th width='10%'>Позиция</th></tr>";
while ($rows = ibase_fetch_object($result))
{
echo "<tr><td>$rows->RELATION_NAME</td><td>$rows>FIELD_NAME</td><td>$rows->TYPE_NAME</td><td>$rows->FIELD_LENGTH</td><td>$rows>NULL_FLAG</td><td>$rows->FIELD_POSITION</td></tr>";
}
echo "</table>";
}
getTableInfo($host, $user, $pass);
?>
Результат выполнения скрипта показан на рис. 7.1.
213
Рис. 7.1. Получение метаданных
Рассмотрим механизм работы этого скрипта:
задаются параметры подключения к базе данных;
определяется функция getTableInfo, которая в качестве аргументов
принимает значения этих параметров (getTableInfo($host, $user, $pass));
создается соединение с базой данных и формируется запрос на выборку;
в запросе производится выборка следующих метаданных:
из
таблицы RDB$FIELDS, имеющей псевдоним F (FROM
RDB\$FIELDS
F)
—
длина
полей
таблиц
FIELD_LENGTH
(F.RDB\$FIELD_LENGTH);
из таблицы RDB$RELATION_FIELDS, имеющей псевдоним R (FROM
RDB\$RELATION_FIELDS R) — имена таблиц RELATION_NAME
(R.RDB\$RELATION_NAME),
имена
полей
таблиц
FIELD_NAME
(R.RDB\$FIELD_NAME), наличие пустых значений в полях NULL_FLAG
(R.RDB\$NULL_FLAG) и позиция полей в таблицах FIELD_POSITION
(R.RDB\$FIELD_POSITION);
из таблицы RDB$TYPES, имеющей псевдоним T (RDB\$TYPES T) —
тип полей таблиц TYPE_NAME (T.RDB\$TYPE_NAME).
На запрос выражением WHERE накладываются следующие условия:
имена полей и доменов, на которых они основаны, должны совпадать
(F.RDB\$FIELD_NAME=R.RDB\$FIELD_SOURCE);
выборка производится только среди объектов, созданных пользователем (R.RDB\$SYSTEM_FLAG = 0);
идентификатор перечисляемого типа TYPE должен совпадать с типом
полей таблиц FIELD_TYPE (F.RDB\$FIELD_TYPE = T.RDB\$TYPE);
выборка производится среди полей, для которых определен перечисляемый тип FIELD_TYPE (T.RDB\$FIELD_NAME = 'RDB\$FIELD_TYPE');
результаты выборки должны сортироваться по именам таблиц (ORDER
BY RELATION_NAME);
выполняется запрос на выборку, а результаты записываются в переменную $result ($result = ibase_query($dbh, $query));
214
результат выполнения запроса обрабатывается как массив (($rows =
ibase_fetch_object($result)), а элементы массива в цикле while выводятся в
HTML-таблицу;
вызывается созданная функция (getTableInfo($host, $user, $pass)).
7.3.3. Создание автоинкрементных полей
Поскольку строки в таблице не упорядочены, то нельзя выбрать строку по
ее номеру в таблице. В таблице нет «первой» или «пятой» строки. Поэтому для
идентификации каждой строки в таблицу используются специальные ключевые
поля. Такие поля должны быть в каждой таблице и называются первичными
ключами. Первичный ключ, состоящий из одного поля, называется простым, а
представляющий группу полей — составным. Так, для таблицы сотрудников
предприятия первичным ключом можно считать поле, содержащее номер их
паспорта, так как оно единственным образом идентифицирует их в таблице.
Если в таблице нет полей, значения которых уникальны, для создания
первичного ключа в нее обычно вводят дополнительное поле, значениями которого СУБД может распоряжаться по своему усмотрению — автоинкремент.
Такое поле увеличивает свое значение всякий раз, когда в таблицу добавляется
новая запись, тем самым гарантировано является уникальным.
Firebird поддерживает типы автоинкремента, которые можно встретить в
других СУБД. Вместе с тем для получения уникальных значений можно использовать числовые генераторы. Механизм работы числовых генераторов лежит вне рассмотрения настоящего учебника, поэтому скажем только, что поля,
используемые в качестве автоинкрементных, должны быть целочисленного типа (INTEGER, SMALLINT, BIGINT).
Пример 7.3. Создание автоинкрементного поля.
Рассмотрим механизм создания автоинкрементных полей на примере поля ID базы данных Base.fdb, созданной в примере 7.1:
<?php
$tablename = 'FILMS';
$primarykey = 'ID';
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
$dbh = ibase_connect($host, $user, $pass);
ibase_query($dbh, 'CREATE GENERATOR GEN_' . $tablename . '_PK;');
ibase_query($dbh, 'CREATE TRIGGER INC_' . $primarykey . ' FOR ' . $tablename
215
.
.
.
.
.
chr(13)
chr(13)
chr(13)
chr(13)
chr(13)
.
.
.
.
.
'ACTIVE BEFORE INSERT POSITION 0'
'AS'
'BEGIN'
'IF (NEW.' . $primarykey . ' IS NULL) THEN'
'NEW.' . $primarykey . '= GEN_ID(GEN_' . $tablename . '_PK, 1);
'
. chr(13) . 'END');
?>
Рассмотрим механизм работы этого скрипта:
в переменную $tablename записывается название таблицы, для которой
создается автоинкрементное поле ($tablename = 'FILMS'), а в $primarykey
название этого поля ($primarykey = 'ID');
задаются параметры соединения с базой данных, и осуществляется
подключение к ней с этими параметрами;
выполняется запрос на создание числового генератора для таблицы
FILMS (ibase_query($dbh, 'CREATE GENERATOR GEN_' . $tablename . '_PK;'));
выполняется запрос на создание триггера для поля ID. Триггер реагирует на событие BEFORE INSERT, проверяя каждый раз при вставке новой записи в таблицу поле ID на значение NULL ('IF (NEW.' . $primarykey . ' IS NULL)
THEN') и генерируя для этого поля новое значение с помощью созданного ранее
генератора ('NEW.' . $primarykey . '= GEN_ID(GEN_' . $tablename . '_PK, 1);').
В результате выполнения данного скрипта поле ID таблицы FILMS станет
автоинкрементным и будет увеличиваться на 1 всякий раз при вставке новых
значений в таблицу.
7.3.4. Добавление данных
Процесс добавления данных в базу данных посредством PHP-скрипта заключается в получении данных от пользователя (как правило, через HTMLформу) и выполнении запроса на добавление, содержащего оператор INSERT.
Однако стоит помнить, что при добавлении данных в таблицу, для которой существуют триггеры, автоматически заполняющие некоторые поля (например,
рассмотренные ранее автоинкрементные поля), нельзя задавать эти поля во
входном списке оператора INSERT.
Пример 7.4. Добавление записи
Продемонстрируем принцип добавления данных в базу данных с помощью PHP, создав для нашего сайта-каталога файл add.php и записав в него
216
скрипт, выводящий форму для добавления записи и осуществляющий ее добавление в базу данных Base.fdb:
<?php
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!empty($_POST['name']) && !empty($_POST['genre']) && !empty($_POST['year'])
) {
$name = strip_tags(trim($_POST['name']));
$genre = strip_tags(trim($_POST['genre']));
$year = strip_tags(trim($_POST['year']));
$dbh = ibase_connect($host, $user, $pass);
ibase_query($dbh, "INSERT INTO FILMS (NAME,GENRE,RELEASE_YEAR) VALUES ('$na
me','$genre','$year')") or die("Сбой при доступе к БД: " . ibase_errmsg());
} else echo 'Полностью заполните форму';
}
?>
<form method='POST'>
<p>Название:<input type='text' name='name'></p>
<p>Жанр:<input type='text' name='genre'></p>
<p>Год выпуска:<input type='text' name='year'></p>
<p><input type='submit' value='Добавить'></p>
</form>
Результат выполнения скрипта показан на рис. 7.2.
Рис. 7.2. Добавление записи в каталог
Рассмотрим механизм работы этого скрипта:
на экран выводится форма для добавления записи, значения которой
передаются в тот же скрипт методом POST (<form method='POST'>);
задаются параметры соединения с базой данных;
если
страница
запрашивается
методом
POST
($_SERVER['REQUEST_METHOD'] == 'POST'), а также полностью заполнены
все поля формы (!empty($_POST['name']) && !empty($_POST['genre']) &&
!empty($_POST['year'])), введенные в форму значения обрабатываются и запи217
сываются в соответствующие переменные $name, $genre и $year. Если форма
заполнена не полностью, выводится предупреждающее сообщение (else echo
'Полностью заполните форму');
осуществляется подключение к базе данных и выполнение запроса на
добавление в базу данных записи, значения которой задаются переменными
$name, $genre и $year (ibase_query($dbh, "INSERT INTO FILMS
(NAME,GENRE,RELEASE_YEAR) VALUES ('$name','$genre','$year')")).
Однако добавлять данные в базу данных в открытом виде не всегда безопасно, так как при возможном взломе базы злоумышленник получит полный
доступ к ним. Поэтому для хранения особо важных данных, таких как, например, пароли пользователей сайта или номера их кредитных карт, используется
механизм хеширования.
Хеширование — преобразование входного массива данных произвольной
длины в выходную битовую строку фиксированной длины. Такое преобразование также называются хеш-функцией или функцией свертки, а его результаты
называют хешем.
Самой распространенной на сегодняшний день хеш-функцией является
MD5. Свойства MD5-хеширования:
MD5-хеш содержит 32 символа;
MD5-хеш уникален для каждой строки;
процесс MD5-хеширования необратим и достаточно медлителен.
MD5-хеширование в PHP реализуется функцией md5:
<?php
$str = "password";
echo md5($str); // 5f4dcc3b5aa765d61d8327deb882cf99
?>
MD5 не всегда обеспечивает должный уровень безопасности, так как
данные, захешированные этой функцией, можно относительно быстро получить
методом перебора, используя заранее подготовленные таблицы. Поэтому вместо обычного хеширования зачастую используют так называемое хеширование
«с солью». В этом случае к каждой строке, которая подвергается хешированию,
добавляется несколько случайных символов (так называемая «соль» или «salt»),
а результат еще раз хешируется:
<?php
$str = "password";
echo md5(md5($str) . 'salt'); // d514dee5e76bbb718084294c835f312c
?>
218
Хеширование «с солью» значительно усложняет результирующую символьную последовательность и практически исключает возможность получения
исходных данных методом перебора.
7.3.5. Выборка данных
Выборка данных из базы данных в PHP-скрипте осуществляется с помощью выполнения запроса, содержащего оператора SELECT. Результат выборки, как правило, обрабатывается как массив и выводится в HTML-таблицу.
Пример 7.5. Просмотр каталога.
Продемонстрируем механизм выборки данных из базы данных с помощью PHP. Для этого создадим файл catalog.php и запишем в него скрипт, реализующий просмотр всех записей базы данных нашего сайта-каталога:
<button onclick="location.href='add.php';" style="marginleft:20px">Добавить</button>
<br ><br >
<table border="1" width="400">
<tr>
<th width="10%">ID</th>
<th width="40%">Название</th>
<th width="30%">Жанр</th>
<th width="20%">Год</th>
</tr>
<?php
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
$dbh = ibase_connect($host, $user, $pass);
$query = "SELECT * FROM FILMS ORDER BY ID";
$result = ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg())
;
while ($row = ibase_fetch_row($result)) {
echo "<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
</tr>";
}
?>
</table>
Результат выполнения скрипта показан на рис. 7.3.
219
Рис. 7.3. Просмотр каталога
Рассмотрим механизм работы этого скрипта:
выводится кнопка «Добавить», позволяющая перейти на созданную в
прошлом
примере
страницу
добавления
add.php
(<button
onclick="location.href='add.php';">Добавить</button>) и заголовки таблицы, в
которой будут отображаться результаты;
задаются параметры соединения с базой данных и осуществляется подключение к ней с этими параметрами;
определяется запрос на выборку всех записей из таблицы FILMS, отсортированных по полю ID ($query = "SELECT * FROM FILMS ORDER BY
ID"), а результат выполнения записывается в переменную $result ($result =
ibase_query($dbh, $query));
каждая строка результата обрабатывается как массив ($row =
ibase_fetch_row($result)), а элементы этих массивов выводятся в HTML-таблицу
(<td>$row[0]</td>).
7.3.6. Удаление данных
Удаление всех данных или отдельных строк из таблицы в PHP-скриптах
осуществляется выполнением запроса, содержащего оператор DELETE. Удаление строки в таблице, содержащей автоинкрементные поля, не влияет на нумерацию этих полей. Другими словами, если содержащей автоинкрементное поле
ID удалить последнюю строку с ID=4, то следующая добавленная строка будет
иметь ID=5.
Пример 7.6. Удаление записи.
Продемонстрируем механизм удаления данных из базы данных с помощью PHP. Для этого отредактируем скрипт файла catalog.php, созданного в
предыдущей главе, реализовав в нем возможность удаления выделенных записей из базы данных нашего сайта-каталога:
220
<button onclick="location.href='add.php';" style="marginleft:20px">Добавить</button>
<br><br>
<table border="1" width="400">
<tr>
<th width="5%">ID</th>
<th width="40%">Название</th>
<th width="30%">Жанр</th>
<th width="20%">Год</th>
<th width="5%"></th>
</tr>
<?php
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
$dbh = ibase_connect($host, $user, $pass);
if (isset($_POST['delete'])) {
$cbs = $_POST['cbs'];
$count = count($_POST['cbs']);
for ($i = 0; $i < $count; $i++) {
$del = $cbs[$i];
$query = "DELETE FROM FILMS WHERE ID='$del'";
ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errm
sg());
}
}
$query = "SELECT * FROM FILMS ORDER BY ID";
$result = ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg())
;
while ($row = ibase_fetch_row($result)) {
echo "<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>
<form method='POST'>
<input type='checkbox' name='cbs[]' value=$row[0]>
</td></tr>";
}
echo "</table><input id='delete' type='submit' class='button' name='delete' va
lue='Удалить' style='position:absolute;bottom:650px;left:150px;'></form>";
?>
</table>
Результат выполнения скрипта показан на рис. 7.4.
221
Рис. 7.4. Удаление записи из каталога
Механизм работы этого скрипта в целом аналогичен предыдущему, но
имеет некоторые различия:
в цикле помимо значений результатов выборки выводится форма, содержащая массив флажков с именами каждой записи (<input type='checkbox'
name='cbs[]' value=$row[0]>) и кнопка удаления (<input id='delete' type='submit'
class='button' name='delete' value='Удалить'>);
в случае нажатия на кнопку «Удалить» (isset($_POST['delete'])) в переменную $cbs записывается массив выделенных флажков формы ($cbs =
$_POST['cbs']), а в $count количество этих флажков ($count =
count($_POST['cbs']));
задается цикл по всем выделенным флажкам (for ($i = 0; $i < $count;
$i++)). На каждой итерации цикла в переменную $del записывается ID выделенной записи ($del = $cbs[$i]) и выполняется запрос на ее удаление (DELETE
FROM FILMS WHERE ID='$del).
7.3.7. Обновление данных
Обновление значений как отдельных строк, так и всей таблицы в PHPскриптах осуществляется выполнением запроса, содержащего оператор
UPDATE.
Пример 7.7. Редактирование записи.
Продемонстрируем механизм обновления данных из базы данных с помощью PHP. Создадим файл edit.php и запишем в него скрипт, реализующий
вывод формы редактирования и само редактирование записи таблицы FILMS
базы данных нашего сайта-каталога:
<?php
$id = strip_tags(trim($_GET['id']));
$host = "localhost:C:\base\Base.fdb";
222
$user = "SYSDBA";
$pass = "masterkey";
$dbh = ibase_connect($host, $user, $pass);
$query = "SELECT * FROM FILMS WHERE ID='$id'";
$result = ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg())
;
$row = ibase_fetch_row($result);
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (!empty($_POST['name']) && !empty($_POST['genre']) && !empty($_POST['year'])
) {
$name = strip_tags(trim($_POST['name']));
$genre = strip_tags(trim($_POST['genre']));
$year = strip_tags(trim($_POST['year']));
$query = "UPDATE FILMS SET NAME='$name', GENRE='$genre', RELEASE_YEAR='$year' WHERE ID=
'$id'";
ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg()
);
header('Location: catalog.php');
} else echo 'Полностью заполните форму';
}
?>
<form method='POST'>
<p>Название:<input type='text' name='name' value='<?= $row[1] ?>'></p>
<p>Жанр:<input type='text' name='genre' value='<?= $row[2] ?>'></p>
<p>Год выпуска:<input type='text' name='year' value='<?= $row[3] ?>'></p>
<p><input type='submit' value='Изменить'></p>
</form>
Результат выполнения скрипта показан на рис. 7.5 и 7.6.
Рис. 7.5. Редактирование записи каталога
223
Рис. 7.6. Результат редактирования
Механизм работы этого скрипта аналогичен скрипту добавления записи,
но имеет некоторые различия:
для работы скрипта требуется запрашивать страницу параметризированным GET-запросом, содержащим ID редактируемой записи (edit.php?id=1);
в переменную $id записывается ID редактируемой записи ($id =
strip_tags(trim($_GET['id'])));
перед выводом формы редактирования записи создается запрос к базе
данных на выборку редактируемой записи (SELECT * FROM FILMS WHERE
ID=’$id’), а результат выполнения запроса записывается в переменную $result
($result = ibase_query($dbh, $query));
результат запроса обрабатывается как массив $row ($row =
ibase_fetch_row($result)), а поля формы заполняются элементами этого массива
(<p>Название:<input type='text ' name='name' value='<?=$row[1]?> '></p>).
7.3.8. Сортировка данных
Результирующий набор записей, полученный после выполнения запроса
на выборку, по умолчанию отображается в соответствии с расположением этих
записей в таблице. Часто при отображении данных для пользователя или при
печати отчетов требуется упорядочивать результирующие записи, то есть проводить сортировку. Например, каталог фильмов будет более наглядным, если
названия будут находиться в алфавитном порядке.
Для сортировки данных в PHP-скриптах используется запрос на выборку,
содержащий предложение ORDER BY.
Пример 7.8. Сортировка записей.
Продемонстрируем механизм сортировки данных. Для этого отредактируем файл catalog.php, созданный в предыдущих разделах, реализовав в нем
возможность сортировки записей по одному из столбцов:
224
<button onclick="location.href='add.php';" style="marginleft:20px">Добавить</button>
<br><br>
<table border="1" width="400">
<tr>
<th width="5%">ID</th>
<th width="40%"><a href='catalog.php?sort=1'>Название</a></th>
<th width="30%"><a href='catalog.php?sort=2'>Жанр</a></th>
<th width="20%"><a href='catalog.php?sort=3'>Год</a></th>
<th width="5%"></th>
</tr>
<?php
//Инициализация переменных
$order_by = "";
$where = "";
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
$dbh = ibase_connect($host, $user, $pass);
if (isset($_GET['sort'])) {
$sort = $_GET['sort'];
switch ($sort) {
case '1':
$order_by = 'ORDER BY NAME';
break;
case '2':
$order_by = 'ORDER BY GENRE';
break;
case '3':
$order_by = 'ORDER BY RELEASE_YEAR';
break;
}
}
if (isset($_POST['delete'])) {
$cbs = $_POST['cbs'];
$count = count($_POST['cbs']);
for ($i = 0; $i < $count; $i++) {
$del = $cbs[$i];
$query = "DELETE FROM FILMS WHERE ID='$del'";
ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errm
sg());
}
}
$query = "SELECT * FROM FILMS " . $order_by;
$result = ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg())
;
while ($row = ibase_fetch_row($result)) {
echo "<tr>
<td>$row[0]</td>
<td>$row[1]</td>
225
<td>$row[2]</td>
<td>$row[3]</td>
<td>
<form method='POST'>
<input type='checkbox' name='cbs[]' value=$row[0]>
</td></tr>";
}
echo "</table><input id='delete' type='submit' class='button' name='delete' va
lue='Удалить' style='position:absolute;top:9px;left:140px;'></form>";
?>
</table>
Результат выполнения скрипта показан на рис. 7.7.
Рис. 7.7. Сортировка записей каталога
Рассмотрим механизм работы этого скрипта:
заголовки таблицы представляются в виде ссылок, содержащих соответствующий параметр, по которому проводится сортировка (<a
href='catalog.php?sort=2'>);
при нажатии на одну из ссылок в заголовках (isset($_GET['sort'])) параметр сортировки записывается в переменную $sort ($sort = $_GET['sort']);
в зависимости от значений переменной $sort (switch($sort)) формируется соответствующее предложение ORDER BY ($order_by = 'ORDER BY');
при формировании запроса на выборку данных к нему добавляется полученное предложение ORDER BY ($query = "SELECT * FROM FILMS ".
$order_by).
7.3.9. Постраничный вывод данных
Базы данных современных web-приложений, как правило, хранят огромное количество записей. Поэтому отображение всех данных на одной странице
226
является нецелесообразным с точки зрения быстродействия системы и удобства
для пользователей. Гораздо более рационально использовать постраничный вывод данных, когда на одной странице выводится лишь часть записей, а доступ к
остальным записям осуществляется через навигационное меню.
Постраничный вывод данных в PHP-скриптах реализуется с помощью запроса на выборку, содержащего конструкцию FIRST…SKIP. Для использования этой конструкции данные должны быть упорядочены, то есть запрос на выборку должен содержать также предложение ORDER BY.
Результат выполнения скрипта показан на рис. 7.8.
Рис. 7.8. Постраничный вывод записей
Рассмотрим механизм работы этого скрипта:
объявляется
функция
формирования
навигационного
меню
getNavigationMenu, принимающая следующие аргументы:
$num — количество записей на одной странице;
$total_items — общее количество записей;
$n — номер текущей страницы;
$param — дополнительные параметры, передающиеся в GET-запросе;
в переменную $total записывается общее количество страниц ($total =
intval(($total_items[0] - 1) / $num) + 1);
если номер страницы превышает общее число страниц (if($n > $total)),
выводится последняя страница ($n = $total);
в зависимости от значений переменной $n генерируется соответствующий HTML-код навигационного меню;
непосредственно в самом теле скрипта задается количество записей на
одной странице ($num = 2), номер текущей страницы ($n =
strip_tags(trim($_GET['n']))), номер первой отображаемой записи ($start = $n *
227
$num - $num) и определяется общее количество записей ($total_items =
ibase_fetch_row(ibase_query("SELECT COUNT(*) FROM FILMS")));
вызывается созданная функция getNavigationMenu с определенными
ранее аргументами (getNavigationMenu ($num,$total_items,$n, 'sort='.$sort));
выполняется запрос на выборку $num записей, начиная с записи $start
("SELECT FIRST $num SKIP $start * FROM FILMS " . $order_by).
7.3.10. Поиск в базе данных
Любой каталог, помимо хранения и редактирования записей, подразумевает возможность поиска необходимой пользователю информации. Поиск в
PHP-скриптах, как правило, реализуется с помощью запросов на выборку, содержащих выражения CONTAINING или LIKE.
Пример 7.10. Поиск записей.
Реализуем возможность поиска записей в созданном ранее файле каталога catalog.php:
<table>
<tr>
<td>
<form method='GET' action='catalog.php'>
<p>Название:<input type='text' name='keyword' style='marginleft:20px'></input></p>
<p>Жанр:<input type='text' name='genre' style='marginleft:45px'></input></p>
<input type='submit' value='Поиск' style='position:absolute;top:99px;left:250px;'>
</form>
</td>
</tr>
</table>
<button onclick="location.href='add.php';" style="marginleft:20px">Добавить</button>
<br ><br >
<?php
function getNavigationMenu($num, $total_items, $n, $param)
{
//Инициализация переменных
$pervpage = "";
$page2left = "";
$page1left = "";
$page1right = "";
$page2right = "";
$nextpage = "";
228
$total = intval(($total_items[0] - 1) / $num) + 1;
$n = intval($n);
if ($n > $total) $n = $total;
if ($n != 1) $pervpage = '<a href= ./catalog.php?' . $param . '&n=1><<</a><a hr
ef= ./catalog.php?' . $param . '&n=' . ($n - 1) . '><</a>';
if ($n != $total) $nextpage = '<a href= ./catalog.php?' . $param . '&n=' . ($n
+ 1) . '>></a><a href= ./catalog.php?' . $param . '&n=' . $total . '>>></a>';
if ($n 2 > 0) $page2left = ' <a href= ./catalog.php?' . $param . '&n=' . ($n 2) . '>' . ($n - 2) . '</a> | ';
if ($n - 1 > 0) $page1left = '<a href= ./catalog.php?' . $param . '&n=' . ($n 1) . '>' . ($n - 1) . '</a> | ';
if ($n + 2 <= $total) $page2right = ' | <a href= ./catalog.php?' . $param . '&n
=' . ($n + 2) . '>' . ($n + 2) . '</a>';
if ($n + 1 <= $total) $page1right = ' | <a href= ./catalog.php?' . $param . '&n
=' . ($n + 1) . '>' . ($n + 1) . '</a>';
echo '<div style="marginleft:40px">' . $pervpage . $page2left . $page1left . '<b>' . $n . '</b>' . $page1ri
ght . $page2right . $nextpage . '</div>';
}
//Инициализация переменных
$order_by = "";
$where = "";
$sort = "";
$keyword = "";
$genre = "";
$host = "localhost:C:\base\Base.fdb";
$user = "SYSDBA";
$pass = "masterkey";
$dbh = ibase_connect($host, $user, $pass);
if (isset($_GET['sort'])) {
$sort = $_GET['sort'];
switch ($sort) {
case '1':
$order_by = 'ORDER BY NAME';
break;
case '2':
$order_by = 'ORDER BY GENRE';
break;
case '3':
$order_by = 'ORDER BY RELEASE_YEAR';
break;
}
}
if (isset($_POST['delete'])) {
$cbs = $_POST['cbs'];
$count = count($_POST['cbs']);
for ($i = 0; $i < $count; $i++) {
$del = $cbs[$i];
$query = "DELETE FROM FILMS WHERE ID='$del'";
ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg()
229
);
}
}
if (!empty($_GET['keyword']) or !empty($_GET['genre'])) {
$where = "WHERE ";
if (!empty($_GET['keyword'])) {
$keyword = strip_tags(trim($_GET['keyword']));
if (!preg_match("/.{2,}/", $keyword)) {
echo '<h3>Строка для поиска должна состоять из 2 или более символов</h3
>';
exit;
}
$conditions[] = "UPPER (NAME) LIKE UPPER ('%" . $keyword . "%')";
}
if (!empty($_GET['genre'])) {
$genre = strip_tags(trim($_GET['genre']));
$conditions[] = "UPPER (GENRE) LIKE UPPER ('%" . $genre . "%')";
}
} else $conditions[] = '';
$num = 2;
if (!empty($_GET['n']))
$n = strip_tags(trim($_GET['n']));
if (empty($n) or $n < 0) $n = 1;
$start = $n * $num - $num;
$total_items = ibase_fetch_row(ibase_query("SELECT COUNT(*) FROM FILMS " . $where . im
plode(' AND ', $conditions)));
if ($total_items[0] == 0) {
echo '<h3>Ничего не найдено</h3>';
exit;
}
getNavigationMenu($num, $total_items, $n, 'sort=' . $sort . '&keyword=' . $keyword . '&genre=' .
$genre);
$query = "SELECT FIRST $num SKIP $start * FROM FILMS " . $where . implode(' AND ', $con
ditions) . " " . $order_by;
$result = ibase_query($dbh, $query) or die("Сбой при доступе к БД: " . ibase_errmsg())
;
echo "<table border='1' width='400'><tr>
<th width='5%'>ID</th>
<th width='40%'><a href='catalog.php?sort=1&keyword=$keyword&genre=$genre'>Название
</a></th>
<th width='30%'><a href='catalog.php?sort=2&keyword=$keyword&genre=$genre'>Жанр</a>
</th>
<th width='20%'><a href='catalog.php?sort=3&keyword=$keyword&genre=$genre'>Год</a><
/th>
<th width='5%'></th></tr>";
while ($row = ibase_fetch_row($result)) {
echo "<tr>
230
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>
<form method='POST'>
<input type='checkbox' name='cbs[]' value=$row[0] >
</td></tr>";
}
echo "</table><input id='delete' type='submit' class='button' name='delete' value=
'Удалить' style='position:absolute;top:99px;left:140px;'></form>";
?>
</table>
Результат выполнения скрипта показан на рис. 7.9.
Рис. 7.9. Поиск записей
Рассмотрим механизм работы этого скрипта:
формируется форма поиска. Данные, полученные с формы, пересылаются в GET-запросе и обрабатываются в том же файле catalog.php (<form
method='GET' action='catalog.php'>). В качестве параметров для поиска выбраны
названия кинофильмов и их жанр;
если
в форму поиска введено какое-либо значение (if
(!empty($_GET['keyword']) or !empty($_GET['genre'])), создается переменная
$where, содержащее предложение WHERE, которое в дальнейшем будет добавлено к запросу на выборку данных ($where = "WHERE ");
если
поиск
осуществляется
по
названию
фильма
(if
(!empty($_GET['keyword']))), то в переменную $keyword записывается введенное название, а в массив $conditions — SQL-предложение для его поиска
($conditions[] = "UPPER (NAME) LIKE UPPER ('%".$keyword."%')"). Так как
231
поиск с помощью выражения LIKE является регистр зависимым, необходимо
переводить все поисковые строки к одному регистру, как правило, верхнему.
Аналогичным образом осуществляется формирование поискового запроса при
задании жанра фильма;
если же форма поиска не заполнена, массив поисковых предложений
обнуляется (else $conditions[]='');
при формировании навигационного меня для постраничного вывода
записей в виде GET-параметров запоминаются поисковые строки
(&keyword='.$keyword.'&genre='.$genre);
к запросу на выборку добавляются сформированные ранее поисковые
предложения ($where . implode(' AND ', $conditions)). Функция implode переводит массив $conditions в строку, а в качестве разделителей использует
строку AND. Это позволяет осуществлять поиск одновременно по названию
и по жанру;
если записей, удовлетворяющих поисковому запросу, не найдено (if
($total_items[0] == 0)), выводится соответствующее сообщение и скрипт прекращает работу. Иначе выводятся найденные записи и общее число записей.
Таким образом, если форма поиска не заполнена, скрипт работает как
обычный каталог, выводя все записи. Если же в форме заданы поисковые значения, скрипт реализует поиск по каталогу и выводит только соответствующие
этим значениям записи.
Однако данный скрипт реализует простейший поиск по двум критериям
без каких-либо ограничений на поисковые значения. Для реализации поиска,
учитывающего, например, длину поисковой строки, ее содержание или регистр,
необходимо использовать систему регулярных выражений, речь о которых
пойдет в следующей главе учебника.
Контрольные вопросы
1. Каковы типы данных поддерживает SQL?
2. Перечислите все группы SQL-операторов и основные операторы из
каждой группы.
3. Каким образом происходит взаимодействие PHP-скриптов с СУБД?
4. Какие аргументы принимает функция ibase_connect?
5. Чем отличается работа функций ibase_connect и ibase_pconnect?
6. Каким образом в PHP-скриптах реализуется извлечение данных из БД?
7. Что такое транзакция и какие PHP-функции реализуют работу с транзакциями?
232
ГЛАВА 8. РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В PHP
Регулярные выражения — это мощный инструмент сравнения и обработки текста. Они не так быстры, как обычные операции сравнения строк, но отличаются чрезвычайной гибкостью, позволяя создавать шаблоны сравнения для
практически любой комбинации символов при помощи довольно простого, хотя и до некоторой степени трудного для понимания синтаксиса.
Регулярные выражения могут применяться для сравнения введенного
текста с заданным шаблоном; поиска внутри текста большого объема фрагмента, соответствующего шаблону; замещения текста другим текстом или переупорядочивание фрагмента совпавшего текста; разбития блоков текста на списки более мелких фрагментов и многого другого. При грамотном использовании
регулярные выражения способны упростить задачи программирования и обработки текстов, а также обеспечить решение многих задач, которые вообще не
могли бы быть решены без использования регулярных выражений.
Не существует официального стандарта, который точно определял бы,
какой текстовый шаблон является регулярным выражением, а какой — нет.
Каждый, кто проектирует свой язык программирования, и каждый разработчик
приложений, обрабатывающих тексты, имеет свое представление о том, какими
должны быть регулярные выражения. Поэтому вместо официального стандарта
существует множество различных диалектов регулярных выражений.
Однако, несмотря на огромное разнообразие диалектов регулярных выражений, почти все из них ведут свою историю от языка программирования Perl
и называются регулярными выражениями в стиле языка Perl. Одним из таких
диалектов (а точнее группы диалектов) является библиотека PCRE (Perl
Compatible Regular Expressions — Perl-совместимые регулярные выражения).
Она полностью поддерживает стиль языка Perl, но имеет некие отличия в работе с кодировкой Юникод и не допускает внедрение программного кода на языке
Perl в регулярные выражения. Благодаря свободной лицензии и надежности
библиотека PCRE применяется во многих языках программирования, в том
числе и в PHP.
В данной главе учебника рассматривается базовый синтаксис регулярных
выражений библиотеки PCRE, а также описываются основные PHP-функции по
работе с регулярными выражениями.
233
8.1. Синтаксис регулярных выражений
Основы регулярных выражений довольно просты для понимания. Последовательность символов заключается в шаблон, а затем строки текста сравниваются с шаблоном и определяются совпадения. Таким образом, базовым элементом в регулярных выражениях является понятие шаблона, синтаксис построения которого будет рассмотрен в этой главе учебника.
Шаблоны регулярных выражений можно сравнить с файловыми глобами,
использующимися в операционных системах UNIX или Windows. Так, например, для выборки всех текстовых файлов можно использовать глоб вида *.txt.
Здесь, наряду со строкой расширения txt, используются символы, имеющие
особый смысл. Звездочка (*) означает любую последовательность символов, а
вопросительный знак (?) — один произвольный символ. Таким образом, данный глоб будет означать выборку всех файлов, имена которых начинаются с
любой последовательности символов и заканчиваются символами .txt. Аналогичным образом работают и шаблоны регулярных выражений.
Каждый шаблон состоит из двух типов символов. Специальные символы
(вроде «*» в файловых глобах) называются метасимволами. Все остальные, то
есть обычный текст, называются литералами. Шаблоны отличаются от файловых глобов в первую очередь большими выразительными возможностями своих
метасимволов. В файловых глобах используется малое количество метасимволов, предназначенных для ограниченных целей, синтаксис же регулярных выражений содержит богатый набор метасимволов для различных областей применения.
Регулярные выражения можно рассматривать как самостоятельный язык,
в котором литералы выполняют функцию слов, а метасимволы — функции
грамматических элементов. Слова по определенным правилам объединяются с
грамматическими элементами и создают конструкции, выражающие некоторую
мысль, иногда на первый взгляд не имеющую смысла, например:
/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?(d+)?/?/i
Но зная эти правила, прочтение и построение регулярных выражений не
составит труда.
8.1.1. Основные метасимволы
Любое регулярное выражение должно содержать, по крайней мере, одну
группу метасимволов — разделители, использующиеся для задания начала и
234
конца регулярного выражения. В качестве разделителей используются символы
«/», «~» или «#». Таким образом, простейшее регулярное выражение может выглядеть, например, как /word/ и будет соответствовать строке, содержащей слово «word».
Также к основным метасимволам относятся следующие символы:
точка (.) – обозначает один любой символ. Выражение /w.rd/ будет соответствовать словам «word», «ward» и пр.;
циркумфлекс (^) — задает начало проверяемой строки. Так, выражение /^word/ соответствует любой строке, начинающейся со слова «word»;
доллар ($) – задает конец проверяемой строки. Выражение /^word$/
будет соответствовать строке, содержащей лишь слово «word»;
перечеркивание (|) — конструкция выбора. Обозначает одно из разделяемых слов и может располагаться только в круглых скобках. Например, выражение /(word$|^symbol)/ соответствует любой строке, заканчивающейся словом «word» или начинающейся со слова «symbol»;
круглые скобки () — служат для логического объединения частей регулярного выражения.
Еще одним важным метасимволом является символ «\». Если в строке
встречается этот символ, то интерпретатор рассматривает символ, непосредственно следующий за ним двояко:
если следующий символ является метасимволом, то он теряет свое специальное значение и рассматривается как символьный литерал. Это необходимо для того, чтобы экранировать метасимволы и вставлять их в строку как литералы. Например, выражение /./ определяет любой единичный символ, а /\./
соответствует просто точке. Также можно экранировать и сам этот метасимвол: /\\/;
если следующий символ является символьным литералом, то он может
стать метасимволом. Существует несколько символов, которые образуют метасимволы в паре с обратным слэшем:
\a — сигнал;
\b — забой;
\n — перевод строки;
\r — возврат каретки;
\t — обычная табуляция;
\v — вертикальная табуляция.
235
Как правило, подобные пары используются для того, чтобы показать, что
на этом месте в строке должен находиться символ с кодом, который не имеет
соответствующего ему изображения.
8.1.2. Символьные классы
Механизм регулярных выражений позволяет перечислять символы, которые могут находиться в данной позиции текста, создавая так называемые символьные классы. Для этого список допустимых символов записывается в квадратных скобках. Количество символов в классе может быть любым,
и расположены они могут в любом порядке. Например, выражение /<H[4132]>/
будет соответствовать одному из HTML-тегов заголовка: <H1>, <H2>, <H3>
или <H4>.
Помимо литералов символьные классы могут содержать три типа метасимволов:
дефис (-) — используется для задания набора символов из одного промежутка. Так, для определения строки, содержащей цифру в шестнадцатеричной системе счисления, можно использовать выражение /[0-9A-Fa-f]/;
циркумфлекс (^) — используется как символ отрицания, если расположен первым в классе, иначе рассматривается как простой литерал. Например,
выражение /[^0-9]/ задает символьный класс, содержащий любые символы,
кроме цифр;
обратный слэш (\) — задает сокращенное обозначение классов:
\d — цифра. Эквивалентно [0-9];
\D — не цифра. Эквивалентно [^\d] или [^0-9];
\w — символ, входящий в слово. Обычно это все буквы и цифры, а
также символ подчеркивания (_). Эквивалентно [a-zA-Z0-9_];
\W — символ, не входящий в слово. Аналогично [^\w];
\s — пустой символ (пробел, возврат каретки, символ табуляции). Эквивалентно [\n\r\t\v];
\S — не пустой символ. Аналогично [^\s].
Таким образом, интерпретация некоторых метасимволов зависит от того,
принадлежат ли они символьному классу или нет. Например, метасимвол «^»
вне символьного класса обозначает начало проверяемой строки, внутри же
класса используется как отрицание.
236
8.1.3. Квантификаторы
Символ точки, а также квадратные скобки всегда обозначают лишь один
символ. Для задания количества повторений символа используются квантификаторы. Каждый из описанных ниже квантификаторов определяет количественную характеристику символа, который находится непосредственно перед
ним. Например, выражение /^[\d]{5,}/ будет соответствовать строке, начинающейся, по крайней мере, с пяти цифр.
Основные квантификаторы:
знак вопроса (?) — символ входит в строку ноль или один раз;
звездочка (*) — символ входит в строку любое число раз, в том числе
и ноль;
плюс (+) — символ входит в строку один или более раз;
{n} — символ входит в строку n раз;
{n,} — символ входит в строку n и более раз;
{n, m} — символ входит в строку от n до m раз.
Обычно регулярные выражения стремятся найти как можно более длинное соответствие, в связи с чем указанные выше квантификаторы стремятся
вернуть всю строку — такое поведение называется «жадным». Рассмотрим,
например, выражение /.*word/. Здесь квантификатор «*» будет выполняться дословно, и интерпретатор сначала покроет этим выражением всю строку, сохраняя на каждом символе точку возврата. Увидев, что выражение не закончено,
интерпретатор возвратится обратно, пока не найдет совпадение. В результате
скорость выполнения выражения заметно упадет. Наличие же дополнительных
квантификаторов «*» на порядок снизит производительность.
Для решения такого рода проблем используются «нежадные» («ленивые») квантификаторы «*?», «+?», «??» и «{n,m}?» Такие квантификаторы покрывают минимально возможную подстроку, что позволяет избежать проблем с
излишним покрытием. Например, выражение /.+.+/ покроет всю подстроку от
первой встретившейся в тексте скобки до последней. В то же время выражение
/.+?.+?/ остановится на первой закрывающей скобке.
Еще одной разновидностью квантификаторов являются так называемые
«сверхжадные» («ревнивые») квантификаторы «*+», «++», «?+» и «{n,m}+». Их
особенностью является то, что они ведут себя как жадные, то есть покрывают
как можно большую подстроку, а также не дают на проверку покрытую подстроку другим частям регулярного выражения. Например, применение выражения /".*"/ к строке a"b"c"d" приведет к нахождению подстроки "b"c"d", так как
237
жадный квантификатор «*» покроет как можно большую подстроку, а затем отдаст обратно. При использование же выражения /".*+"/ соответствия вообще не
будет найдено, поскольку сверхжадный квантификатор «*+» после того, как
доберется до последней кавычки (признак «жадности»), не будет откатываться
назад (признак «сверхжадности»). На практике «ревнивые» квантификаторы
используются редко, в основном для быстрого отсева заведомо неподходящих
строк.
8.1.4. Модификаторы
Механизм регулярных выражений поддерживает несколько режимов интерпретации и применения выражений. Режимы могут применяться ко всему
регулярному выражению или к отдельным подвыражениям. Глобальное применение реализуется при помощи различных модификаторов, располагаемых после закрывающего знака разделителя, например «/i». Частичное применение
обеспечивается конструкциями вида «?i» (включение модификатора) и «?-i»
(отключение модификатора).
К основным модификаторам относятся:
i — режим поиска без учета регистра. Например, выражение /num\d/i
будет соответствовать строкам Num1, nUm5 и пр.;
m — режим привязки к границам строк. В этом режиме соответствие
ищется в интервале между двумя переводами строк, а не во всем тексте;
s — режим совпадения точки со всеми символами. В данном случае соответствие ищется во всем тексте, а не в интервале между двумя переводами
строк;
x—
режим свободного форматирования. В данном режиме
все неэкранируемые пробелы и символы табуляции игнорируются, если они
находятся вне квадратных скобок;
U — «ленивый» режим. Модификатор делает все квантификаторы
«нежадными» по умолчанию, то есть будет осуществляться поиск минимальной
по длине подстроки.
8.1.5. Подшаблоны
Подшаблоном называется часть регулярного выражения, заключенная в
круглые скобки. Сами по себе подшаблоны не влияют на функционирование
238
регулярных выражений и могут служить только для удобства группировки. Они
также могут быть вложенными.
Подшаблоны нумеруются по порядку открывающей круглой скобки, и
для доступа к фрагменту текста, совпавшему с подшаблоном, используются так
называемые обратные ссылки. Они состоят из символа слэша «/» и числа от 1
до 99, указывающего, к какому подшаблону относится ссылка.
Следует отметить, что вместо ссылки подставляется фрагмент текста, а не подшаблон. Так, выражение /слов(о|а) и числ\1/ будет сопоставляться строкам
«слово и число» и «слова и числа», но не строке «слова и число».
Если сохранять совпавший с подшаблоном текст не требуется, используют группирующие круглые скобки вида (?:). Это исключает подшаблон из
списка ссылок. Например, выражение /a((b+)(?:c*))(d?)/ будет иметь три ссылки. Ссылка \1 указывает на подшаблон ((b+)(c*)), ссылка \2 — на (b+), а ссылка
\3 — на (d?).
В подшаблонах также можно использовать последовательности, блокирующие дальнейший перебор повторений после того, как уже было найдено
первое соответствие. Такие подшаблоны записываются в виде (?>). Использование таких подшаблонов накладывает на выражение ограничение, указывающее, что после того, как найдено совпадение подшаблона с фрагментом текста,
все дальнейшие проверки проводятся относительно этого места совпадения.
Например, необходимо определить, оканчивается ли текст символами «Дд».
При использовании выражения /Дд$/ проверка будет проходить от начала текста, что отрицательно скажется на производительности — сначала будет разыскивается символ, а затем определяться, стоит ли он в конце текста. Если же использовать выражение /^(?>.*)(Дд)$/, то первый подшаблон сразу же покроет
весь текст целиком, а затем будет проверено окончание.
Еще одной разновидностью подшаблонов являются условные подшаблоны, позволяющие выбирать подходящий подшаблон в зависимости от результатов поиска. Они записываются как (?(условие)подшаблон1) или как (?(условие)подшаблон1|подшаблон2). При выполнении условия используется первый
подшаблон, в противном случае используется второй подшаблон.
Если условием является числовая последовательность, то условие считается верным, если подшаблон с указанным номером был найден и существует
непустая ссылка с таким номером.
Однако не стоит забывать, что если найдено совпадение с какимлибо подшаблоном, но в целом шаблон не соответствует фрагменту текста, то
поиск завершается неудачей.
239
8.1.6. Позиционные проверки
Для определения расположения проверяемой подстроки в тексте механизм регулярных выражений предоставляет, помимо обычных круглых скобок
и метасимволов «^» и «$», четыре типа позиционных проверок:
(?=) — подстрока располагается справа от совпадения;
(?!) — подстрока не располагается справа от совпадения;
(?<=) — подстрока располагается слева от совпадения;
(?<!) — подстрока не располагается слева от совпадения.
Их отличие от простых подшаблонов заключается в том, что фрагмент
совпадения не возвращается в результирующем значении. Например, выражение /(?<=)\w+(?=)\w+(?=)/ возвращает любую строку, стоящую в скобках без
пробелов, но сами скобки не возвращаются.
В позиционных проверках можно указывать альтернативы и все, что может использоваться в обычных шаблонах. Допустимо использовать последовательности позиционных проверок. Например, выражение /(?<=\d{3})(?<!000)\w/
соответствует строке, которой предшествует три цифры, не являющиеся одновременно нулями.
Также возможны вложенные позиционные проверки. Например, выражение /(?<=(?<!вв)ББ)аа/ будет соответствовать подстроке ББаа, но не ввББаа. На
позиционные проверки ссылки не указываются.
8.2. Функции PHP для работы с регулярными выражениями
За несколько лет функциональное назначение регулярных выражений
сильно расширилось по сравнению с их базовыми возможностями и теперь
включает в себя множество очень полезных характеристик. В результате PHP в
современном виде предлагает два различных набора функций для работы с регулярными выражениями. Первый набор включает традиционные (POSIX)
функции, которые начинаются с префикса ereg (extended regular expressions —
расширенные регулярные выражения). Другой набор включает в себя функции
Perl-диалекта с префиксом preg (Perl-compatible regular expressions — Perlсовместимые регулярные выражения).
Работа функций preg основана на библиотеке PCRE, что позволяет реализовывать с помощью регулярных выражений поглощающие сравнения, опережающие и ретроспективные проверки, рекурсивные подшаблоны и многое другое. Функции ereg же обладают меньшими возможностями и более медленны,
чем функции preg, поэтому на сегодняшний день не используются.
240
Рассмотрим основные preg-функции:
preg_match — реализует одиночный регулярный поиск. Синтаксис:
preg_match (регулярное_выражение, текст [, совпадения]).
Функция ищет в тексте, указанном аргументом текст, соответствие регулярному выражению, указанному в параметре «регулярное_выражение». Если
совпадение найдено, функция возвращает true, иначе — false. При указании в
аргументе совпадения одномерного массива он заполняется найденными фрагментами совпадения. Переменная $совпадения[0] будет содержать фрагмент,
совпадающий с полным шаблоном, $совпадения[1] — совпадение с первым
подшаблоном и т.д.
Рассмотрим выражение, реализующее проверку номера телефона:
<?php
$phone = '+7926123567';
if (preg_match('/^((8|\+7)[\- ]?)?(?\d3?\d3?[\- ]?)?[\d\]{7,10}$/', $phone, $match))
echo "Телефон $match[0] - верный";
else echo "Телефон неверный";
?>
preg_match_all — реализует полный регулярный поиск. Синтаксис:
preg_match_all (регулярное_выражение, текст [, совпадения]).
Функция ищет в тексте, указанном аргументом текст, все возможные соответствия регулярному выражению, записанному в параметре «регулярное_выражение». Поиск последующих совпадений производится от места последнего совпадения. Функция возвращает число совпадений с полным шаблоном или значение false, если совпадений не было.
Рассмотрим выражение, реализующее поиск всех значений заданного
тега:
<?php
$text = "<td>word</td><td>symbol</td>";
$tag = "td";
if (preg_match_all('/<'.$tag.'[^>]*>(.*?)<\/'.$tag.'>/', $text, $match))
print_r($match[0]);
else echo "Тег не найден";
?>
preg_replace — реализует регулярный поиск с заменой. Синтаксис:
preg_replace (регулярное_выражение, замена, текст [, лимит]).
241
Функция ищет в тексте все фрагменты, соответствующие выражению
«регулярное_выражение» и заменяет их на «замена». При этом возвращается
измененный текст. Если совпадений не находится, возвращается исходный
текст. Аргумент лимит указывает на количество заменяемых фрагментов. Если
он не указан, то заменяются все найденные фрагменты.
Рассмотрим выражение, удаляющее все ссылки из текста:
<?php
$text = "this http://spam.net/ is spam";
$text = preg_replace("~(?:(?:https?|ftp|telnet)://(?:[a-z0-9_-]{1,32}"."(?::[az0-9_-]{1,32})?@)?)?(?:(?:[a-z0-9]{1,128}\.)+(?:com|net|"."org|mil|edu|arpa|gov|biz|info|aero|inc|name|[az]{2})|(?!0)(?:(?"."!0[^.]|255)[0-9]{1,3}\.){3}(?!0|255)[0-9]{1,3})(?:/[a-z09.,_@%&"."?+=\~/-]*)?(?:#[^ '\"&<>]*)?~i",'',$text);
echo $text;
?>
preg_split — разделяет строку с помощью регулярного выражения. Синтаксис: preg_split (регулярное_выражение, текст [, лимит]).
Функция возвращает массив, содержащий части текста текст, находящиеся между фрагментами, соответствующими шаблону «регулярное_выражение».
Аргумент «лимит» задает максимальное число фрагментов в возвращаемом
массиве. Если число фрагментов больше лимита, то остаток исходной строки,
не разделенной на фрагменты, возвращается в последнем элементе.
Рассмотрим выражение, разделяющее текст на части пробельными символами:
<?php
$text = "number 1 number 2 word A2";
$text = preg_split('/[\s]+/', $text);
print_r($text);
?>
preg_grep — фильтрует элементы массива в соответствии с шаблоном.
Синтаксис: preg_grep (регулярное_выражение, массив).
Функция возвращает массив массив, в котором оставлены только элементы, соответствующие указанному в аргументе «регулярное_выражение» выражению.
Рассмотрим выражение, которое фильтрует массив из предыдущего примера, оставляя в нем лишь элементы, имеющие, по крайней мере, одну букву:
242
<?php
$text = "number 1 number 2 word A2";
$text = preg_split('/[\s]+/', $text);
$text = preg_grep('/[\D]{1,}/', $text);
print_r($text);
?>
preg_quote — экранирует строку. Синтаксис: preg_quote (строка). Функция возвращает строку, в которую вставлены слэши перед каждым символом,
который в регулярных выражениях является метасимволом.
Контрольные вопросы
1. Для чего применяются регулярные выражения?
2. В чем заключается принцип работы регулярного выражения?
3. Прочитайте регулярное выражение, записанное в примере в п. 8.1.
4. Перечислите основные метасимволы регулярных выражений.
5. Какие метасимволы могут применяться в символьных классах?
6. Перечислите основные квантификаторы регулярных выражений.
7. Чем различаются «жадные», «ленивые» и «сверхжадные» квантификаторы?
8. Перечислите основные модификаторы регулярных выражений.
9. Для чего применяются подшаблоны и какие разновидности подшаблонов используются в регулярных выражениях?
10. Какие виды позиционных проверок используются в регулярных выражениях?
11. Перечислить основные функции PHP по работе с регулярными выражениями.
243
ГЛАВА 9. ЛАБОРАТОРНЫЙ ПРАКТИКУМ
Лабораторная работа № 1. Изучение HTML и CCS
Цель работы: приобретение практических навыков в разработке валидных web-страниц на языке гипертекстовой разметки HTML и в их верстке с помощью каскадных таблиц стилей CSS.
Лабораторное задание: изучить теоретическую часть. Создать двухстраничный сайт-каталог для предварительно выбранной предметной области. Создать главную страницу сайта самостоятельно или воспользовавшись учебным
шаблоном. Произвести верстку созданной страницы. Создать вторую страницу
сайта в соответствии с индивидуальным заданием. Защитить лабораторную работу.
Описание лабораторной установки: web-браузер, текстовый редактор
или IDE. Структура страниц разрабатываемого web-сайта представлена на
рис. 9.1.
Рис. 9.1. Структура страниц web-сайта
Здесь файл index.html реализует главную страницу web-сайта, состоящую из четырех блоков — верхней и нижней частей, меню и области основного
контента. Файл style.css представляет собой связанную каскадную таблицу стилей, осуществляющую настройку внешнего вида страницы. В файле index.html
также осуществляется вызов по ссылке файла второй страницы сайта lab_rab1.html, содержащего коды скриптов, реализующих индивидуальное
задание в области основного контента. В данной и последующих работах, для
корректного отображения страниц на разных компьютерах, все ссылки в них
должны быть относительными.
244
Порядок выполнения работы.
1. На физическом диске C:\ создать каталог WEB\LAB1.
2. В каталоге C:\WEB\LAB1 создать файл главной страницы сайта index.html и файл таблиц стилей style.css.
3. Открыть файлы index.html и style.css в текстовом редакторе или
фреймворке и записать в них соответствующий код учебного шаблона. Рекомендуется использовать Visual Studio Code. Инструкция по скачиванию и установке находится в приложении Б настоящего учебника. Установить плагины
для работы с HTML и CSS.
4. Средствами языка HTML реализовать вывод на главной странице
(файл index.html):
а) логотип (изображение, соответствующее тематике разрабатываемого
сайта-каталога) в верхней части страницы;
б) меню сайта, содержащее два пункта — «Главная» и «Работа № 1»;
в) мультимедийных элементов (фото, аудио или видео) и информации о
сайте (основные сведения о предметной области) в области основного контента.
5. Настроить внешний вид главной страницы, выбрав и установив цвет
фона, размер, типы шрифтов, отступы, границы и т.д. путем соответствующего
редактирования файла style.css.
6. В каталоге C:\WEB\LAB1 создать файл lab_rab1.html, реализующий
вторую страницу сайта.
7. Открыть файл lab_rab1.html и записать в него разработанный код, выполняющий индивидуальное задание согласно варианту (рис. 9.2). Каждое индивидуальное задание состоит из двух частей:
a) сформировать заданную структуру с помощью HTML-таблицы;
б) создать заданную форму, используя максимальное число управляющих
элементов (переключателей, полей ввода и т.д.).
8. В меню главной страницы (пункт «Работа № 1») разрабатываемого
сайта (файл index.html) добавить ссылку на lab_rab1.html (вторую страницу).
Реализовать возврат со второй страницы (файл lab_rab1.html) на главную
страницу.
9. Проверить созданные web-страницы на соблюдения стандартов, отформатировать программный код (для Visual Studio Code по умолчанию комбинация клавиш Shift+Alt+F). Исправить все ошибки в случае их возникновения.
10. Защитить лабораторную работу.
Содержание отчета:
1. Описание предметной области.
2. Постановка задачи.
245
3. Структура страниц web-сайта и список реализующих их файлов.
4. Код и изображение разработанных web-страниц.
5. Файлы, реализующие разработанный сайт
Варианты индивидуальных заданий представлены на рис. 9.2.
Рис. 9.2. Варианты индивидуальных заданий
246
Лабораторная работа № 2. Работа с web-сервером Apache.
Изучение синтаксиса PHP
Цель работы: приобретение практических навыков работы с webсервером Apache, изучение основ синтаксиса языка PHP.
Лабораторное задание: изучить теоретическую часть, изложенную в
гл. 5. Установить и настроить Open Server согласно приложению В настоящего
издания. Для обеспечения удобства редактирования разделить файл главной
страницы разрабатываемого сайта-каталога на четыре файла в соответствии с ее
структурой и записать в них скрипты, соответствующие заданию. Выполнить
индивидуальное задание. Защитить лабораторную работу.
Описание лабораторной установки: web-браузер, текстовый редактор
или фреймворк, web-сервер Apache, модуль PHP.
Структура разрабатываемого web-сайта представлена на рис. 9.3.
Рис. 9.3. Структура разрабатываемого web-сайта
Здесь файл index.php реализует главную страницу web-сайта, содержащую область основного контента. Вывод верхней, нижней части страницы и
меню
осуществляется
подключением
соответствующих
файлов top.inc.php, bottom.inc.php и menu.inc.php, содержащих эти блоки. Помимо них подключаются файл каскадной таблицы стилей style.css и
файл lib.inc.php, представляющий собой библиотеку пользовательских функций. В файле index.php также осуществляется вызов по ссылке файлов
lab_rab1.html и lab_rab2.php, содержащих коды скриптов, реализующих индивидуальное задание в области основного контента.
Порядок выполнения работы:
1. Установить и настроить Open Server согласно руководству, представленному в приложении В.
247
2. Установить расширение PHP для Visual Studio Code (если используется) аналогично плагинам для HTML и CSS в лабораторной работе № 1.
3. В директории …/OpenServer/domains создать директорию LAB2.
4. Скопировать туда все файлы, созданные в результате выполнения
первой лабораторной работы.
5. Переименовать файл index.html в index.php.
6. В рабочем каталоге …/OpenServer/domains/LAB2 создать файлы top.inc.php, bottom.inc.php и menu.inc.php, соответствующие верхней,
нижней части и меню сайта.
7. Выделить в файле главной страницы index.php блоки верхней, нижней части и меню сайта и перенести их код в соответствующие файлы, созданные в предыдущем пункте.
8. Подключить файлы top.inc.php, bottom.inc.php и menu.inc.php к
файлу главной страницы сайта index.php.
9. Открыть на редактирование файл bottom.inc.php и реализовать в нем
вывод системного времени и информации о сервере.
10. В каталоге …/OpenServer/domains/LAB2 создать файл библиотеки
функций lib.inc.php и подключить его к файлу index.php.
11. Записать в файл lib.inc.php код функции отрисовки меню, приведенной в п. 5.1.2.
12. Открыть файл menu.inc.php и заменить вывод меню средствами
HTML вызовом соответствующей функции PHP.
13. В каталоге …/OpenServer/domains/LAB2 создать файл lab_rab2.php.
14. Открыть на редактирование файл lab_rab2.php и записать в него коды разработанных скриптов, выполняющих индивидуальное задание согласно
варианту (табл. 9.1). Каждое индивидуальное задание состоит из двух частей.
Вывод исходных данных и результата оформить в виде HTML-таблицы.
15. Добавить в меню разрабатываемого сайта (пункт «Работа № 2»)
ссылку на файл lab_rab2.php.
16. Защитить лабораторную работу.
Содержание отчета:
1. Описание предметной области. Постановка задачи.
2. Структура страниц web-сайта и список реализующих их файлов.
3. Код и изображение разработанных web-страниц.
4. Файлы, реализующие разработанный сайт.
Варианты индивидуальных заданий представлены в табл. 9.1.
248
Таблица 9.1
Варианты заданий
249
Пример главной страницы сайта представлен на рис. 9.4.
Рис. 9.4. Пример главной страницы сайта
Пример выполнения индивидуального задания:
Задание:
а) реализовать конвертацию заданного натурального числа в заданную
систему счисления;
б) реализовать функцию, выводящую таблицу умножения. Параметры:
число столбцов, число строк, цвет заголовков.
250
Результат выполнения представлен на рис. 9.5.
Рис. 9.5. Пример выполнения индивидуального задания
Лабораторная работа № 3. Изучение работы PHP и HTTP
Цель работы: изучение взаимодействия PHP с протоколом HTTP. Приобретение практических навыков в разработке одностраничного интерфейса,
работе с заголовками, формами, куки и сессиями.
Лабораторное задание: Изучить теоретическую часть, изложенную в гл.
6. Создать одностраничный интерфейс сайта-каталога. Для этого создать страницу каталога и реализовать возможность просмотра, добавления, удаления и
редактирования записей каталога, создав соответствующие страницы. Реализо251
вать авторизацию пользователей сайта-каталога. Выполнить индивидуальное
задание. Защитить лабораторную работу.
Описание лабораторной установки: web-браузер, текстовый редактор
или фреймворк, web-сервер Apache, модуль PHP.
Структура разрабатываемого web-сайта представлена на рис. 9.6.
Рис. 9.6. Структура разрабатываемого web-сайта
Главная страница сайта (index.php) имеет структуру, описанную в работе
№ 2, но включает также подключение следующих файлов:
файл авторизации (auth.php), блокирующий доступ к страницам неавторизованным пользователям;
файл каталога (catalog.php), отображающий все записи каталога и позволяющий удалять выбранные записи;
файл, реализующий добавление записи (add.php);
файл, реализующий редактирование записи (edit.php);
файл, реализующий просмотр записи (item.php);
файл выполнения индивидуального задания (lab_rab3.php).
Так как сайт имеет одностраничный интерфейс, вывод страниц
lab_rab1.html, lab_rab2.php и lab_rab3.php осуществляется непосредственно в
области основного контента главной страницы (index.php), а не по ссылке на
соответствующие файлы.
Схема данных разрабатываемого web-сайта представлена на рис. 9.7.
252
Рис. 9.7. Схема разрабатываемого web-сайта
Файл add.php выводит форму добавления новой записи (фильма, студента или прочее в зависимости от предметной области сайта-каталога), получает
методом POST, введенные пользователем данные и создает сессию с соответствующими переменными. Файл catalog.php отображает список записей, считывая соответствующие переменные сессии, а также позволяет удалить выбранную запись или просмотреть запись, отправив всю информацию о ней методом GET (через гиперссылку с параметрами) файлу item.php. Файл item.php
обрабатывает полученный GET-запрос, определяя информацию о записи из параметров запроса, и выводит ее на экран. Также item.php позволяет редактировать просматриваемую запись, послав по ссылке информацию о записи файлу
edit.php, принцип работы которого аналогичен add.php.
Порядок выполнения работы:
1. В директории …/OpenServer/domains создать каталог LAB3.
2. Скопировать в LAB3 все файлы, созданные в результате выполнения
второй лабораторной работы.
3. Открыть на редактирование файл lib.inc.php и записать в него две
разработанные функции:
а) функцию, осуществляющую удаление HTML, PHP тегов и лишних
пробелов, которая в дальнейшем должна использоваться при получении данных
из POST, GET-запросов и сессий;
б) функцию, осуществляющую масштабирование до заданных размеров
переданного ей изображения.
4. Реализовать формирование одностраничного интерфейса сайта согласно примеру 6.1.
253
5. Создать файл add.php и записать в него код, реализующий форму для
добавления записи, и скрипт, осуществляющий добавление записи в каталог.
Предусмотреть возможность загрузки изображений на сервер. Загруженное
изображение должно проверяться (на тип, размер, разрешение) и в случае необходимости масштабироваться до нужного размера посредством соответствующей пользовательской функции.
6. Создать файл catalog.php и записать в него разработанный скрипт,
реализующий вывод списка записей, а также позволяющий удалять выбранную
запись и вызывать страницу добавления новой записи. Предусмотреть удаление
изображения, соответствующего удаляемой записи, с жесткого диска.
7. Добавить ссылку на файл catalog.php в меню разрабатываемого сайта
(пункт «Каталог»).
8. Создать файл item.php и записать в него скрипт, реализующий просмотр записи. Страница, определяемая этим файлом, также должна содержать
ссылку на страницу редактирования записи.
9. Создать файл edit.php и записать в него код, реализующий форму для
редактирования записи, и скрипт, осуществляющий редактирование записи.
Предусмотреть автоматическое заполнение полей формы значениями редактируемой записи во время вывода формы на экран.
10. Создать постоянные Cookies, содержащие время последнего посещения пользователя, и вывести их содержимое в файле bottom.inc.php.
11. Отобразить страницу lab_rab1.html как текст и перенаправить ее вывод в текстовый файл.
12. Заменить мета-тег http-equiv в файле index.php на соответствующий
ему HTTP-заголовок.
13. Полностью запретить кэширование на сайте с помощью соответствующего HTTP-заголовка.
14. Создать файл auth.php и записать в него скрипт, реализующий авторизацию пользователей на сайте с помощью сессий. Подключить этот файл к
файлу главной страницы index.php. В соответствующем месте файла top.inc.php вывести имя авторизованного пользователя и кнопку выхода,
приводящей к отмене авторизации.
15. Создать файл lab_rab3.php и записать в него код скрипта, выполняющий индивидуальное задание согласно варианту (табл. 9.2). Вывод результата
оформить в виде HTML-таблицы.
16. В меню разрабатываемого сайта (пункт «Работа № 3») добавить ссылку на созданный файл lab_rab3.php.
254
Варианты заданий представлены в табл. 9.2
Таблица 9.2
Варианты заданий
255
Пример выполнения общего задания лабораторной работы представлен
на рис. 9.8–9.12.
Рис. 9.8. Пример выполнения общего задания
256
Рис. 9.9. Пример выполнения общего задания
Рис. 9.10. Пример выполнения общего задания
257
Рис. 9.11. Пример выполнения общего задания
Рис. 9.12. Пример выполнения общего задания
258
Пример выполнения индивидуального задания.
Задание:
С помощью форм реализовать калькулятор. Программа должна фиксировать неверно введенные данные и выводить результаты в том же окне.
Результат выполнения представлен на рис. 9.13.
Рис. 9.13. Пример выполнения индивидуального задания
Содержание отчета:
1. Описание предметной области. Постановка задачи.
2. Структура страниц web-сайта и список реализующих их файлов.
3. Код и изображение разработанных web-страниц.
4. Файлы, реализующие разработанный сайт.
Лабораторная работа № 4. Изучение работы PHP
и СУБД Firebird
Цель работы: изучение взаимодействия PHP с СУБД Firebird (допускается использование СУБД Mysql). Приобретение практических навыков в разработке SQL-запросов и их выполнении средствами PHP.
Лабораторное задание. Изучить теоретическую часть, изложенную в
гл. 7. Создать базу данных сайта-каталога. Реализовать просмотр, добавление,
удаление и редактирование записей каталога через соответствующие запросы в
259
базу данных. Реализовать регистрацию пользователей сайта-каталога. Выполнить дополнительное задание. Защитить лабораторную работу.
Описание лабораторной установки: web-браузер, текстовый редактор
или фреймворк, web-сервер Apache, модуль PHP, СУБД Firebird.
Структура разрабатываемого web-сайта представлена на рис. 9.14.
Рис. 9.14. Структура разрабатываемого web-сайта
Главная страница сайта (index.php) имеет структуру, описанную в работе
№ 3, но включает также следующие файлы:
файл регистрации (registration.php), позволяющий пользователям регистрироваться на сайте и получать доступ к авторизации;
файл, реализующий выход из системы (logout.php);
файл регистрации базы данных (base_registration.php), хранящий
настройки подключения к базе данных;
файл выполнения дополнительного задания (lab_rab4.php).
Схема данных разрабатываемого web-сайта представлена на рис. 9.15.
260
Рис. 9.15. Схема разрабатываемого web-сайта
Файл base.fdb представляет собой базу данных сайта-каталога, состоящую из двух таблиц: таблицу пользователей (USERS) и таблицу записей каталога (ITEMS). Запросы к базе данных выполняются из следующих файлов:
registration.php — запрос на выборку, проверяющий наличие имени регистрируемого пользователя в базе данных, и запрос на добавление пользователя в базу данных;
auth.php — запрос на выборку, осуществляющий поиск введенного
пользователем имени в базе данных;
add.php — запрос на выборку, проверяющий наличие записи с заданным названием в базе данных, и запрос на добавление записи в базу данных;
edit.php — запрос на выборку данных, осуществляющий поиск выбранной записи в базе данных для вывода информации о ней в форму редактирования, и запрос на обновление записи в базе данных;
catalog.php — запрос на выборку данных, выводящий все записи каталога, и запрос на удаление выбранных записей из базы данных;
item.php — запрос на выборку данных, реализующий вывод информации о выбранной записи из базы данных.
При вызове файла item.php со страницы каталога через гиперссылку передается только идентификатор записи (ID), которую требуется просмотреть.
Аналогичным образом реализуется вызов файла edit.php.
261
Порядок выполнения работы:
1. Установить и настроить СУБД Firebird согласно инструкции, представленной в приложении Г настоящего издания (либо самостоятельно настроить
для работы СУБД Mysql).
2. В директории …/OpenServer/domains создать новую папку LAB4, соответствующую четвертой работе.
3. Скопировать в нее все файлы, созданные в результате выполнения третьей лабораторной работы.
4. Разработать структуру базы данных сайта-каталога согласно
его предметной области. База данных должна содержать две таблицы: таблицу
пользователей и таблицу записей. Таблица пользователей должна содержать
поля логина, пароля и электронной почты пользователя. Таблица записей
должна содержать поле, хранящее изображение (по ссылке в каталоге) и не менее четырех полей в соответствии с сущностью предметной области. Обе таблицы должны содержать поле автоинкрементного идентификатора, однозначно
определяющее запись таблицы. Также в таблице пользователей предусмотреть
поле для адреса электронной почты, а в таблице записей — поля для хранения
изображений (в виде их адресов в файловой системе) и описания записи.
5. Создать в каталоге C:\base базу данных сайта-каталога согласно примеру 7.1.
6. Создать файл base_registration.php и записать в него параметры подключения к базе данных. Подключить этот файл к файлу главной страницы index.php.
7. Создать файл registration.php и записать в него код, реализующий
форму регистрации пользователей и скрипт, осуществляющий регистрацию.
Реализовать хранение паролей пользователей в захешированном виде.
8. Отредактировать файлы auth.php, add.php, catalog.php, item.php и
edit.php, реализовав их работу через запросы к базе данных. Пример такой реализации приведен в примерах 7.4–7.7.
9. Создать файл lab_rab4.php и записать в него код скрипта, последовательно реализующий следующие действия:
а) создание базы данных и двух таблиц заданной структуры;
б) изменение структуры таблиц;
в) добавление записей в таблицы;
г) выполнение запросов к базе данных;
д) удаление всех таблиц и базы данных.
262
Скрипт должен выводить на экран все промежуточные результаты (метаданные базы данных до и после изменений, данные из таблиц, результаты запросов), а также комментарии к выполняемым операциям. Для вывода метаданных можно использовать функцию из примера 7.2. Информация в базе данных должна соответствовать предметной области сайта.
10. В меню разрабатываемого сайта (пункт «Работа № 4») добавить ссылку на созданный файл lab_rab4.php.
Пример выполнения общего задания представлен на рис. 9.16.
Рис. 9.16. Пример выполнения общего задания
Пример выполнения индивидуального задания.
Задание:
263
Результат выполнения индивидуального задания представлен на рис. 9.17.
Рис. 9.17. Пример выполнения индивидуального задания
264
Содержание отчета:
1. Описание предметной области. Постановка задачи.
2. Структура страниц web-сайта и список реализующих их файлов.
3. Код и изображение разработанных web-страниц.
4. Файлы, реализующие разработанный сайт.
Лабораторная работа № 5. Регулярные выражения.
Цель работы: Дальнейшее изучение взаимодействия PHP с СУБД
Firebird. Приобретение практических навыков в разработке регулярных выражений средствами PHP.
Лабораторное задание. Изучить теоретическую часть, изложенную в
лекции 11. Реализовать на сайте-каталоге функции сортировки, постраничного
вывода и поиска записей. Разработать предложенные регулярные выражения.
Выполнить индивидуальное задание. Защитить лабораторную работу.
Описание лабораторной установки: web-браузер, текстовый редактор
или IDE, web-сервер Apache, модуль PHP, СУБД Firebird. Структура разрабатываемого сайта-каталога и схема данных аналогичны описанным в предыдущей
работе.
Порядок выполнения работы:
1. В Open Server в директории …\OpenServer\domains создать папку
LAB5.
2. В созданную папку скопировать все файлы, имеющиеся в результате
выполнения четвертой лабораторной работы.
3. Отредактировать файл catalog.php, реализовав в нем функции сортировки, постраничного вывода и поиска записей. Сортировка и поиск должны
производиться минимум по двум критериям.
4. С помощью регулярных выражений модернизировать поиск по каталогу согласно следующим критериям:
а) минимальная поисковая строка — 2 символа;
б) поисковая строка не должна состоять только из цифр;
в) если поисковая строка состоит из нескольких слов, разделенных пробелами, осуществляется поиск каждого из этих слов;
г) если слово в поисковой строке состоит только из цифр, оно не должно
учитываться в поиске.
5. Разработать регулярное выражение, проверяющее правильность ввода
пользователем адреса электронной почты при регистрации. Использовать разработанное выражение в файле registration.php.
265
6. Разработать регулярное выражение, проверяющее введенное пользователем название записи согласно следующим критериям:
а) минимальная длина названия — 2 символа;
б) максимальная длина названия равна размеру поля в таблице БД;
в) название может содержать только буквы, цифры, знаки «–», «_» и «:»;
г) название должно начинаться с буквы.
7. Разработать регулярное выражение, удаляющее все URI-ссылки из вводимого пользователем описания записи. Использовать разработанные в п. 6 и 7
выражения в файлах add.php и edit.php.
8. Создать файл lab_rab5.php и записать в него разработанный код
скрипта, реализующий проверку знаний консольных команд Windows. Описание заданий и правильная команда берутся согласно варианту индивидуального
задания. Проверка осуществляется с помощью регулярных выражений, определяющих соответствие между введенной пользователем и правильной командой.
Скрипт должен выводить на экран введенные пользователем команды и результаты их проверки;
9. В меню разрабатываемого сайта (пункт «Работа № 5») добавить ссылку
на созданный файл lab_rab5.php.
Варианты индивидуальных заданий
Вариант
Задание
1
1. Восстановить файл prog1.pas, находящийся в каталоге C:\PROGRAMS
(recover c:\programs\prog1.pas, RECOVER c:\PROGRAMS\prog1.PAS).
2. Перейти из текущего каталога в каталог C:\DATA\TEXT
(cd c:\data\text,
chdir c:\data\text).
3. Проверить носитель данных в дисководе А: на наличие ошибок с выводом на экран информации по каждому из проверенных файлов и информации об обнаруженных дефектах диска. Ошибки должны исправляться после соответствующего запроса (chkdsk a:/f/v, chkdsk А: /v /f).
4. Сравнить файл prog1.pas в каталоге D:\PASCAL\ с файлом prog2.pas,
находящимся в текущем каталоге. Воспользоваться командой, не отображающей различия между файлами (comp d:\pascal\prog1.pas prog2.pas,
comp prog2.pas d:\pascal\prog1.pas).
5. Сравнить два диска при наличии одного дисковода A: сравниваться
должны только первые стороны дисков (diskcomp a: a:/1, diskcomp a: b:/1,
diskcomp b: a:/1)
266
Вариант
2
3
4
Задание
1. Выполнить дублирование диска при наличии одного дисковода A: с
проверкой записанных данных (diskcopy a: a:/v, diskcopy A: /v).
2. Удалить все файлы с расширением BAK в текущем каталоге с выдачей
запроса
на
удаление
для
каждого
удаляемого
файла
(del *.bak/p, erase *.bak/p).
3. Задать носителю данных в дисководе A: метку SYSTEM
(label a: system, label a: system).
4. Создать подкаталог TEXT в каталоге D:\EDIT (md d:\edit\text, mkdir
d:\edit\text).
5. Присвоить всем файлам с расширением TXT, находящимся в каталоге
C:\EDIT, новое расширение BAK (ren c:\edit\*.txt *.bak, rename c:\edit\*.txt
*.bak).
1. Удалить подкаталог TEXT, который находится в каталоге D:\DATA, если текущим является диск D: (rd \data\text, rmdir \data\text).
2. Назначить каталогу D:\TEXT виртуальный диск с именем F: (subst f:
d:\text, SUBST f: d:\Text).
3. Вывести на монитор структуру каталогов диска в дисководе А, исходя
из корневого каталога, и список имен файлов, содержащихся в каталогах.
Структура должна отображаться на экране дисплея постранично (tree a:\
/f|more, Tree A:\/F |More).
4. Вывести в файл VOL.TXT метку тома для диска С: (vol c:>vol.txt, VOL
C: >vol.txt).
5. Скопировать в корневой каталог диска в дисководе В: все файлы каталога D:\PROGRAMM и, возможно, файлы имеющихся там подкаталогов, у
которых установлен бит «архивный», без сброса после копирования этого
бита в исходное состояние (xcopy d:\programm b:\/s/a, xcopy d:\programm\*
b:\/s/a)
1. Выполнить команду jump на удаленном компьютере с IP-адресом
10.2.31.100. В качестве имени пользователя удаленного компьютера используйте Personal (rexec 10.2.31.100 -l Personal 1 jump).
2. Сделать текущим каталогом каталог F:\TEXT (cd f:\text, chdir f:\text /d,
chdir /d f:\text).
3. Вывести на монитор список всех файлов с расширением TXT, находящихся в каталоге D:\TEXT (dir d:\text\*.txt, Dir D:\TEXT\*.TXT).
4. Удалить в текущем каталоге файлы, в имени которых встречается строка for (del *for*.*, ERASE *for*).
5. Задать носителю данных с именем D: метку DATA (label d: data, LABEL
D:DATA)
267
Вариант
5
6
7
8
Задание
1. Перейти из текущего каталога в каталог D:\USER (cd d:\user, Chdir
D:\User).
2. Вывести на монитор список всех файлов текущего каталога с именами,
начинающимися с буквы t и имеющих расширение DOC (dir t*.doc, DIR
t*.DOC).
3. Создать подкаталог PROGRAMS в текущем каталоге (md
programs,Mkdir PROGRAMS).
4. Назначить каталогу E:\USER виртуальный диск с именем G: (subst g:
e:\user, SUBST G: E:\USER).
5. Вывести на монитор содержимое файла prog1.cpp, находящегося в текущем каталоге (type prog1.cpp, more prog1.cpp, more < prog1.cpp)
1. Создать подкаталог PASCAL в каталоге D:\PROG (md d:\prog\pascal,
mkdir D:\PROG\PASCAL).
2. Выяснить метку тома с именем E: (vol e:, LABEL E:).
3. Вывести на монитор содержимое файла prg1.pas, находящегося в текущем каталоге, по частям размером в один экран (More < prg1.pas, TYPE
prg1.pas |more).
4. Сделать видимыми все файлы с расширением SYS текущего и подчиненных ему каталогов и установите у них разряд «Архивный» (Attrib +a -h
*.sys /s, attrib -h +a *.sys /s).
5. Установить текущей датой 12 декабря 2010 г. (date 12-12-2010, date
12/12/2010, date 12.12.2010)
1. Вывести на монитор список всех файлов в текущем каталоге с расширением TXT в обратном алфавитном порядке имен. Вывод списка файлов
должен приостанавливаться, когда заполняется экран дисплея (dir *.txt/o:n/p, dir *.txt/o-n/p, dir *.txt/p/o:-n).
2. Загрузить таблицу набора символов с номером 863 цветного графического адаптера (graftabl 863).
3. Произвести сортировку содержимого файла text1.txt, находящегося в текущем каталоге, с записью отсортированных данных в новый файл
textsort.txt (sort text1.txt /o textsort.txt, sort /o textsort.txt text1.txt).
4. Вывести на монитор информацию о состоянии всех модулей в памяти и
внутренних драйверов (Mem /d, mem /debug).
5. Вывести на стандартное устройство печати содержимое файла book.txt
(Print /d:prn book.txt)
1. Получить номер кодовой страницы, используемой для ввода расширенных символов (Graftabl /status).
2. Изменить системный приглашающий символ таким образом, чтобы выдавались текущие диск, путь и текущая дата (prompt $d$p, prompt $p $d).
3. Получить серийный номер диска D: (vol d:, label d:).
4. Вывести на принтер содержимое файла text1.txt, находящегося в каталоге
268
Вариант
9
10
Задание
F:\TEXT (type f:\text\text1.txt>prn, type f:\text\text1.txt > prn).
5. Отсортировать данные текстового файла stu.txt, находящегося на диске D,
в обратном порядке, сравнение сортируемых записей должно начинаться со
второго символа (sort d:\stu.txt /r /+2, sort d:\stu.txt /+2 /r, sort /+2 /r
D:\stu.txt, sort /r /+2 d:\stu.txt)
1. Изменить приглашение командной строки таким образом, чтобы после
текущего диска и каталога в скобках указывалась текущая дата, а затем
знак «>» (Prompt $p $c $d $f $g).
2. Зашифровать все файлы каталога doc, имена которых начинаются на te
(Cipher /a /e doc\te*, Cipher /e /a doc\te*, Cipher doc\te* /e /a).
3. Задать для фона командной строки серый цвет отображения, а для текста — черный (Cmd /t:80, Color 80).
4. Скопировать список всех ранее использованных команд в файл
temp.bat, находящийся в каталоге common на диске D (Doskey /h >
d:\common\temp.bat, Doskey /history > d:\common\temp.bat).
5. Установить путь поиска исполняемых файлов таким образом, чтобы система сначала искала программу в текущем каталоге, затем в корневом каталоге диска C, после чего в каталоге Doc, расположенном на диске D
(path c:\; d:\doc;).
1. Установить двухстрочное приглашение для командной строки таким
образом, чтобы в первой строке отображалось приветственное слово hello,
а во второй строке — текущая дата и знак «больше» (>) (Prompt hello $_
$D $G, Prompt "hello" $_ $D $G).
2. Загрузить драйвер устройства ANSI.SYS в обычную память. Драйвер
расположен в папке Program на диске E (Device = E:\program\ansi.sys, Device=e:\program\ansi.sys).
3. Записать справочную информацию о команде dir в текстовый файл
dirhelp. txt (Dir /? > dirhelp.txt, help dir > dirhelp.txt).
4. Дать команду, которая обеспечит автоматическое повторение соответствующего символа с частотой 30 раз в секунду, если удерживать клавишу
на клавиатуре более половины секунды (mode con rate=32 delay=2, mode
con: rate = 32 delay = 2).
5. Изменить системное время на полдень (Time 12:00:00.00P, Time 12, Time
12:00:00.00, Time 12:00P, Time 12P)
Пример выполнения общего задания представлен на рис. 9.18.
269
Рис. 9.18. Пример выполнения общего задания
Пример выполнения индивидуального задания.
Задание:
1. Вывести команду для отправки сообщения с эхо-запросом точке назначения 145.80.55.112 и задания строгой маршрутизации для точек назначения
145.77.21.14 и 145.20.32.14 (ping -k 145.77.21.14 145.20.32.14 145.80.55.112).
2. Отформатировать диск в дисководе A, выполнив быстрое форматирование. По завершении форматирования на диск должны быть скопированы
файлы операционной системы (format a:/q/s, format a:/s/q).
3. Защитить все файлы с расширением SYS текущего и подчиненных ему
каталогов от случайного удаления или перезаписи, а также сделайте их скрытыми (attrib +r +h *.sys /s, attrib +h +r *.sys /s).
4. Вывести на монитор содержимое файла WORK.TXT, находящегося в
каталоге D:\EDIT. Содержимое файла должно отображаться на экране дисплея
постранично (type d:\edit\work.txt|more, TYPE D:\Edit\WORK.TXT|MORE).
5. Отобразить данные о групповой политике пользователя worker удаленного компьютера comtec. Данные должны отображаться в подробном виде и
только о пользователе (Gpresult /s comtec /user worker /scope user /v).
Решение может быть таким:
<form method="post">
<b>Вопрос №1.</b><br>
Введите команду для отправки сообщения с эхозапросом точке назначения 145.80.55.112 и задания строгой маршрутизации для точек назнач
ения 145.77.21.14 и 145.20.32.14.<br ><br >
Ответ: <input name="answer1" type="text" size="100" maxlength="255"><br ><br >
<b>Вопрос №2.</b><br>
Отформатируйте диск в дисководе a:, выполнив быстрое форматирование. По завершении форматирован
270
ия на диск должны быть скопированы файлы операционной системы.<br ><br >
Ответ: <input name="answer2" type="text" size="100" maxlength="255"><br ><br >
<b>Вопрос №3.</b><br>
Защитите все файлы с расширением sys текущего и подчиненных ему каталогов от случайного у
даления или перезаписи, а также сделайте их скрытыми.<br ><br >
Ответ: <input name="answer3" type="text" size="100" maxlength="255"><br ><br >
<b>Вопрос №4.</b><br>
Выведите на экран дисплея содержимое файла WORK.TXT, находящегося в каталоге D:\EDIT. Сод
ержимое файла должно отображаться на экране дисплея постранично.<br ><br >
Ответ: <input name="answer4" type="text" size="100" maxlength="255"><br ><br >
<b>Вопрос №5.</b><br>
Отобразите данные о групповой политике пользователя worker удаленного компьютера comtec. Да
нные должны отображаться в подробном виде и только о пользователе.<br ><br >
Ответ: <input name="answer5" type="text" size="100" maxlength="255"><br ><br >
<input type="submit" value="Ответить" style="margin:10px">
</form><br >
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$correct = 0;
for ($i = 1; $i <= 5; $i++) {
$answer[] = stripslashes($_POST["answer" . $i]);
}
if (preg_match("/^ping +k +145\.77\.21\.14 +145\.20\.32\.14 +145\.80\.55\.112$/i", $answer[0])) {
$correct++;
} {
$correct++;
} {
$correct++;
}
if (preg_match('/^type +d:\\\\edit\\\\work\.txt *\| *more$/i', $answer[3])) {
$correct++;
}
if (preg_match("/^gpresult +(?: *\/(?!\1)(s +comtec|user +worker|scope +user|v)
){4}$/i", $answer[4])) {
$correct++;
}
switch ($correct) {
case '5':
$estimation = 5;
break;
case '4':
$estimation = 4;
break;
case '3':
$estimation = 3;
break;
default:
271
$estimation = 2;
}
echo "<table border='1'><tr>
<th>Правильных ответов </th>
<td>$correct</td></tr>
<tr><th>Оценка </th>
<td>$estimation</td>
</tr></table><br>";
}
?>
Результат выполнения представлен на рис. 9.19.
Рис. 9.19. Пример выполнения индивидуального задания
Содержание отчета:
1. Описание предметной области. Постановка задачи.
2. Структура страниц web-сайта и список реализующих их файлов.
3. Код и изображение разработанных web-страниц.
4. Файлы, реализующие разработанный сайт.
272
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. HTML5BOOK [Электронный ресурс]. — URL: https://html5book.ru (дата
обращения: 17.12.2020).
2. Маркин, А. В. Программирование на SQL. В 2 частях. Ч. 1 : учебник и
практикум для бакалавриата и магистратуры. — Москва : Юрайт, 2019. —
403 с. — Серия: Бакалавр и магистр. Академический курс.
3. Организация разработки web-стандартов W3C. — URL: https://www.w3.org
(дата обращения: 17.12.2020).
4. Доля браузеров на мировом рынке. Statcounter, Browser Market
Share. — URL: https://gs.statcounter.com/browser-market-share (дата обращения:
19.12.2020).
5. Яндекс браузер. — URL: https://browser.yandex.ru (дата обращения:
19.12.2020).
6. Рейтинг CMS iTrack (оф. Представитель Microsoft). — URL:
https://itrack.ru/research/cmsrate (дата обращения: 19.12.2020).
7. Open Server. — URL: https://ospanel.io (дата обращения: 19.12.2020).
8. USB WebServer. — URL: https://usbwebserver.yura.mk.ua/ru.php (дата
обращения: 19.12.2020).
9. WampServer. — URL: https://www.wampserver.com (дата обращения:
19.12.2020).
10. Аmpps. — URL: https://www.ampps.com (дата обращения: 19.12.2020).
11. UwAmp. — URL: https://www.uwamp.com (дата обращения: 19.12.2020).
12. XAMPP. — URL: https://www.xampp.ru (дата обращения: 19.12.2020).
13. Notepad++. — URL: https://notepad-plus-plus.org (дата обращения:
19.12.2020).
14. Visual Studio Code. — URL: https://code.visualstudio.com/docs (дата
обращения: 19.12.2020).
15. Atom. — URL: https://atom.io (дата обращения: 19.12.2020).
16. Google Chrome. — URL: https://www.google.ru/chrome (дата обращения: 20.12.2020).
17. Bootstrap. — URL: https://getbootstrap.com (дата обращения: 20.12.2020).
18. Laravel. — URL: https://laravel.com (дата обращения: 20.12.2020).
19. Symphony. — URL: https://symfony.com (дата обращения: 20.12.2020)
20. Code Igniter. — URL: https://codeigniter.com (дата обращения 20.12.2020).
21. Yii2. — URL: https://www.yiiframework.com (дата обращения: 20.12.2020)
22. Foundation. — URL: https://get.foundation (дата обращения: 20.12.2020).
273
ПРИЛОЖЕНИЯ
Приложение А
Методические указания к курсовой работе
A.1. Общие положения
Курсовая работа — самостоятельная учебная работа учащегося, выполняемая в течение учебного года (семестра) по одной из актуальных тем изучаемой дисциплины.
Целью выполнения курсовой работы является закрепление навыков и
пройденного материала по изучаемой дисциплине, углубление теоретических и
прикладных знаний, развития навыка работы с документами на основе государственных стандартов и получения первого опыта публикации.
A.2. Содержание курсовой работы
Курсовая работа должна включать в себя:
I. Программный документ «Пояснительная записка».
В свою очередь, пояснительная записка должна включать в себя:
1. Содержание.
2. Введение.
3. Анализ предметной области.
4. Постановка задачи (цель разработки системы и т.д.).
5. Разработка структуры базы данных (логическая и физическая модели
БД, описание структуры БД, назначение каждой таблицы и ее столбцов, связи
между таблицами).
6. Архитектура системы. Описание логической структуры системы.
7. Состав и описание файловой структуры системы, описание используемых алгоритмов (добавления, редактирования, удаления и т.д.).
8. Экспериментальная часть. Демонстрация работы системы на контрольном примере.
9. Инструкция по развертыванию, настройке и запуску сайта.
10. Заключение.
11. Список используемых источников.
II. Программный документ «Текст программы».
III. Диск с файлами сайта и всей программной документацией.
274
A.3. Детализация задания на курсовую работу
Задачей курсовой работы является создание информационной системы в
виде сайта-каталога предметной области. Сайт-каталог должен состоять из двух
подсистем, формально называемых «Пользователь» и «Администратор».
Подсистема «Пользователь» должна выполнять следующие функции.
1. Просмотр каталога.
2. Сортировка записей каталога.
3. Поиск записей каталога.
4. Возможность регистрации.
5. Возможность авторизации в подсистему «Администратор».
Подсистема «Администратор» должна выполнять следующие функции.
1. Просмотр каталога.
2. Сортировка записей каталога.
3. Поиск записей каталога.
4. Добавление записей в каталог.
5. Редактирование записей каталога.
6. Удаление записей из каталога.
7. Просмотр списка всех пользователей.
8. Возможность выхода из подсистемы «Администратор».
Пользователь не может добавлять, удалять, редактировать записи в каталоге, этим непосредственно занимается администратор. Вход в подсистему
«Администратор» осуществляется при помощи ввода логина и пароля в указанные поля. Логин и пароль должны храниться в конфигурационном файле системы.
По согласованию с научным руководителем допускается оформление
курсовой работы на основе объединения результатов выполнения лабораторных работ.
A.4. Порядок выполнения работы
Для выполнения курсовой работы необходимо выполнить следующие
этапы:
1) выбрать тему работы (предметную область для сайта каталога), согласовать ее с преподавателем, заполнить лист задания;
2) произвести анализ предметной области, поставить задачу перед системой, необходимую выполнить для данной области;
275
3) разработать структуру базы данных, создать модель разработанной БД;
4) разработать структуру всей системы, составить ее архитектуру, описать
используемые алгоритмы;
5) разработать сайт-каталог, реализующий все требования к функционалу,
указанные в п. 3;
6) произвести проверку работоспособности сайта при помощи контрольного примера и зафиксировать результаты;
7) оформить пояснительную записку и текст программы в соответствии со
всеми стандартами;
8) защитить курсовую работу.
Выбор темы происходит строго по согласованию с преподавателем. В отсутствие подписанного преподавателем листа задания с выбранной темой переходить к следующим этапам выполнения курсовой работы не рекомендуется.
Защита курсовой работы происходит после факта полного выполнения
курсовой работы, подтвержденного преподавателем.
A.5. Требования к оформлению курсовой работы
Курсовая работа, как и любой технический документ, должна быть
оформлена по всем государственным стандартам. Основные из них представлены в списке:
- Межгосударственный стандарт. ГОСТ 19.001-77 «Единая система программной документации. Общие положения» (введен постановлением Государственного комитета стандартов Совета Министров СССР от 20 мая 1977 г.
№ 1268);
- Межгосударственный стандарт ГОСТ 19.005-85 «Единая система программной документации. Р-схемы алгоритмов и программ. Обозначения условные графические и правила выполнения» (введен в действие постановлением
Госстандарта СССР от 27 марта 1985 г. № 893);
- Межгосударственный стандарт ГОСТ 19.101-77 «Единая система программной документации. Виды программ и программных документов» (введен
постановлением Государственного комитета СССР по стандартам от 20 мая
1977 г. № 1268);
- Межгосударственный стандарт ГОСТ 19.105-78 «Единая система программной документации. Общие требования к программным документам»
(введен постановлением Государственного комитета СССР по стандартам от 18
декабря 1978 г. № 3350)
276
- Межгосударственный стандарт ГОСТ 19.106-78 «Единая система программной документации. Требования к программным документам, выполненным печатным способом» (утв. постановлением Государственного комитета
СССР по стандартам от 18 декабря 1978 г. № 3350);
- Межгосударственный стандарт ГОСТ 19.202-78 «Единая система программной документации. Спецификация. Требования к содержанию и оформлению» (введен постановлением Государственного комитета СССР по стандартам от 18 декабря 1978 г. № 3351);
- Межгосударственный стандарт ГОСТ 19.401-78 «Единая система программной документации. Текст программы. Требования к содержанию и
оформлению» (введен постановлением Государственного комитета СССР по
стандартам от 18 декабря 1978 г. № 3350);
- Межгосударственный стандарт ГОСТ 19.402-78 «Единая система программной документации. Описание программы» (введен постановлением Государственного комитета СССР по стандартам от 18 декабря 1978 г. № 3350);
- Межгосударственный стандарт ГОСТ 19.404-79 «Единая система программной документации. Пояснительная записка. Требования к содержанию и
оформлению» (введен в действие постановлением Государственного комитета
СССР по стандартам от 11 декабря 1979 г. № 4753);
- Межгосударственный стандарт ГОСТ 19.701-90 (ИСО 5807-85) «Единая
система программной документации. Схемы алгоритмов, программ, данных и
систем. Обозначения условные и правила выполнения» (утв. постановлением
Государственного комитета СССР по управлению качеством продукции и стандартам от 26 декабря 1990 г. № 3294);
A.6. Задание на курсовую работу
ЗАДАНИЕ
на курсовую работу по дисциплине
«WEB-пpогpаммиpование»
Студент –_________________________________ группа – _______
1. Тема –
Разработка сайта-каталога ___________________________
(предметная область)
2. Срок представления работы к защите – ____________________
277
3. Исходные данные для проектирования:
Язык программирования — PHP
СУБД — Firebird
Веб-сервер — Apache
4. Содержание курсовой работы
4.1. Задание
4.2. Программный документ «Пояснительная записка» (ГОСТ 19.404-79)
4.3. Программный документ «Текст программы» (ГОСТ 19.401-78)
4.4. Файлы сайта-каталога и базы данных
Руководитель работы ____________ ___________ ___________________.
(подпись)
(дата)
(ФИО)
Задание принял к исполнению ______________ ___________
(подпись)
(дата)
278
Приложение Б
Установка и настройка Microsoft Visual Studio Code
Для установки и настройки установки редактора кода Microsoft Visual
Studio Code необходимо выполнить следующие действия.
1. Скачать с официального сайта: https://code.visualstudio.com файлустановщик .exe.
2. Запустить установщик, в ходе выполнения которого рекомендуется выставить параметры, представленные на рис. Б-1.
Рис. Б-1. Параметры установки Visual Studio Code
3. Дождаться установки и перейти к настройке редактора.
4. Для знакомства и удобства работы с программным интерфейсом рекомендуется установить пакет русского языка (по умолчанию редактор имеет
279
только английский язык), установить его можно в меню слева, введя в поисковую строку необходимый запрос (рис. Б-2).
Рис. Б-2. Установка пакета русского языка
5. Точно по такому же принципу необходимо установить расширения для
HTML и CSS (позднее понадобится и для PHP). Расширение можно выбрать
любое, у каждого есть свои преимущества и недостатки. Позднее расширения
можно удалять и переустанавливать, попробовав чуть ли не все, но для начинающих разработчиков можно остановиться на данном варианте (рис. Б-3).
Рис. Б-3. Расширение для HTML и CSS
Подробно о том, как работать с Visual Studio Code, а также решения возможных проблем при установке, настройке или эксплуатации, можно найти в
статье: https://habr.com/ru/post/490754 или в официальной документации Microsoft: https://code.visualstudio.com/docs.
280
Приложение В
Установка и настройка Open Server
В данной инструкции рассматривается пример установки и настройки,
для работы с материалом настоящего учебника, среды запуска локального вебсервера Open Server.
1. Необходимо загрузить дистрибутив Open Server с официального сайта
разработчика: https://ospanel.io/. Достаточно Basic версии, она занимает меньший объем памяти.
2. Распаковать загруженный архив в папку на локальном диске. Рекомендуется использовать пути без кириллицы в названиях папок, например
C:/OpenServer).
3. Из распакованной папки запустить OpenServer.exe. Иконка Open Server
появится в трее (красный флажок на панели задач). Основные действия можно
совершать через контекстное меню этого флажка (рис. 1.7).
4. Для запуска всех основных сервисов (PHP-сервер, MySQL-сервер и
т.д.) нажать на «Запустить». Если все запустилось успешно, то флажок на иконке станет зеленым. Если возникли проблемы, решение можно поискать здесь:
https://ospanel.io/docs/#reshenie-problem.
5. Необходимо зайти в «Настройки» Open Server и убедиться, что в разделе «Модули» PHP выбрана версия 7.1. Все примеры, приведенные в настоящем
издании, исправно работают на версии PHP 7.1. При выборе другой версии PHP
могут возникнуть ошибки.
6. Сервер PHP ищет файлы приложения в …/OpenServer/domains. Эту
папку можно открыть через пункт «Папка с сайтами» контекстного меню. Все
разрабатываемые сайты необходимо помещать в папку domains (название папок
с сайтом не должно содержать в себе любые символы, кроме латинских букв).
7. Сервер MySQL также стартует вместе со всеми сервисами. Для администрирования БД используется phpMyadmin — web-приложение, написанное
на PHP. Найти его можно по адресу: http://localhost/openserver/phpmyadmin/
index.php (или «Дополнительно» > phpMyadmin в контекстном меню Open
Server).
Больше информации по компонентам комплекса Open Server можно
найти в официальной документации: https://ospanel.io/docs/.
281
Приложение Г
Установка и настройка СУБД Firebird
Внимание!!! Перед установкой Firebird 3.0 х64 для работы с Open Server
необходимо:
иметь настроенный Open Server (по руководству из приложения В данного учебника);
удалить все предыдущие версии Firebird, Interbase, Ред База Данных и
других СУБД, использующих открытый код Firebird.
1. Загрузить дистрибутив Firebird 3.0 с сайта https://www.firebirdsql.org/en/
downloads в виде исполняемого файла .exe версии для 64-разрядных систем.
2. Выполнить установку Firebrid. Для этого в окне выбора дополнительных задач выбирать пункты, помеченные на рис. Г-1. Все остальные параметры
установки использовать по умолчанию.
3.
Рис. Г-1. Окно выбора дополнительных задач
282
4. Далее необходимо перезагрузить ПК и убедиться в работоспособности
процесса Firebird при помощи диспетчера задач (рис. Г-2).
Рис. Г-2. Работающая СУБД Firebird
5. Далее
зайти
в
папку
Open
Server,
по
умолчанию
…/OpenServer/userdata/config, и открыть файл .ini, соответствующий PHP 7.1 и
разрядности системы. В этом файле в строках:
;extension=php_interbase.dll
;extension=php_pdo_firebird.dll
убрать комментарии (удалить точку с запятой в начале строки).
6. Затем необходимо перезагрузить Open Server и убедиться, что изменения в файле .ini сохранились. Для этого перейти в phpinfo(), где должна появиться информация, представленная на рис. Г-3.
Рис. Г-3. Информация о работающей СУБД Firebird
7. В качестве проверки работы СУБД можно создать следующий скрипт и
запустить его при помощи Open Server:
<?php
// get server version and implementation strings
if (($service = ibase_service_attach('localhost', 'sysdba', 'masterkey')) != FA
LSE) {
$server_info = ibase_server_info($service, IBASE_SVC_SERVER_VERSION)
. ' / '
. ibase_server_info($service, IBASE_SVC_IMPLEMENTATION);
ibase_service_detach($service);
} else {
$ib_error = ibase_errmsg();
}
echo $server_info;
?>
283
В качестве результата в окне браузера должно отобразиться сообщение,
представленное на рис. Г-4.
Рис. Г-4. Результат работы скрипта
При получении аналогичного результата можно сделать вывод, что установка и настройка СУБД Firebird для работы с Open Server произведена успешно.
284
Приложение Д
Учебный шаблон сайта
Для выполнения лабораторных работ можно использовать учебный
шаблон сайта. В учебном шаблоне приведен пример блочной верстки сайта и
небольшой настройке его параметров при помощи таблицы стилей. Шаблон состоит из двух файлов: index.html (содержит минимальную информацию для
корректной работы документа) и файл-таблицы стилей style.css.
Содержимое файла index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
<meta name="description" content="Шаблон учебного сайта">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div
<div
<div
<div
</body>
class="top">Шапка</div>
class="menu">Меню</div>
class="content">Блок с контентом</div>
class="bottom">Подвал</div>
</html>
Содержимое файла style.css:
html,
body {
font: 14px arial;
}
.top {
text-align: center;
border: 1px solid #000;
height: 5%;
border-radius: 8px 8px 8px 8px;
padding: 5px 20px;
}
.menu {
text-align: center;
border: 1px solid #000;
285
height: 100px;
width: 24%;
float: left;
margin-top: 15px;
padding-top: 5%;
border-radius: 8px 8px 8px 8px;
}
.content {
text-align: left;
height: 500px;
border: 1px solid #000;
width: 75%;
margin-left: 25%;
margin-top: 15px;
margin-bottom: 15px;
text-indent: 5%;
border-radius: 8px 8px 8px 8px;
padding-top: 10px;
}
.bottom {
text-align: center;
border: 1px solid #000;
height: 5%;
border-radius: 8px 8px 8px 8px;
padding: 5px 20px;
}
286