Web на практике. CSS, HTML, JavaScript, MySQL, РНР для
fullstасk-разработчиков - СПв.: НАУКА и ТЕхникА, 2021. - 432 с., ил.
ISBN 978-5-94387-271-6
Разработка многофункционального сайта, как правило, требует нескольких
разных специалистов, но в данной книге мы расскажем, как все сделать са
мому! Fullstack-paзpaбoтчик - это разработчик, который обладает знани
ями всех технологий (полным стеком) для создания пощюценных много
функциональных веб-сайтов. Данная книга посвящена Fullstack-paзpaбoткe
сайта. В книге рассмотрен полный цикл создания полноценных сайтов и
Интернет-порталов:
• Идея или постановка целей и задач сайта.
• Создание макета дизайна сайта.
• Верстка. Создание frontend'a.
• Программирование backend'a.
• Базовое наполнение контентом.
• Разворачивание на хостинге.
В книге приведено описание всех ключевых технологий wеЬ-разработки
(HTMLS, CSS3, JavaScript, РНР, MySQL), знание которых необходимо
fullstасk-разработчикам.
Также приведен и разобран реальный пример разработки полноценного
образовательного Интернет-портала (его фронтенда и бэкенда), исходные
коды которого можно скачать с сайта издательства.
Все првва защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения
владельцев авrорских прав .
Издапльство не несе т отве тс твенности за возможный ушерб, причи ненный в ходе использования материалов д анн ой книm, а также за
доступносrь материалов, ссылки на которые вы можете найти в :этой книге. На момент подготовки книги к юданию все ссылки на интернет
ресурсы 6Ь1Ли действующими.
ГЛАВА 2. ОСНОВЫ HTML 5 ..................................... 29
2. 1. ЯЗЫК HTML И НТМL-ДОКУМЕНТЫ КАК СОСТАВНЫЕ
ЭЛЕМЕНТЫ ИНТЕРНЕТ-САЙТОВ ............................................ 30
2.2. ТЕГИ (ЭЛЕМЕНТЫ) HTML - ОСНОВНЫЕ СТРУКТУРНЫЕ
ЕДИНИЦЫ HTML ................................................................. 32
2.3. СТРУКТУРА ДОКУМЕНТА HTML ................................................... 35
2.4. ЗАГОЛОВОК ДОКУМЕНТА HTML .................................................. 36
Тег TITLE - задаем название интернет-страницы ....................... 36
Тег BASE ....................................................................................38
Тег LINK - подключение каскадных таблиц стилей
CSS к НТМL-документу ..............................................................39
Тег МЕТА - задаем ключевые слова для индексации
поисковиками и кодировку.........................................................40
Тег SТYLE - задание стилевых настроек CSS3
непосредственно в НТМL-документе .........................................42
•
...
Тег SCRIPT - задание и подключение скриптов
Javascript к НТМL-документу (интернет-странице) .................... 45
2.5. ТЕЛО НТМL-ДОКУМЕНТА. ТЕГ BODY ............................................ 46
Web на практике
2.6. ПЕРСОНАЛИЗАЦИЯ И СЕГМЕНТАЦИЯ НТМL-ТЕГОВ. АТРИБУТЫ ID И
CLASS - ГОТОВИМ БАЗУ ДЛЯ ПРИМЕНЕНИЯ СSS-СТИЛЕЙ ......... 46
2.7. ФОРМАТИРОВАНИЕ ТЕКСТА ДОКУМЕНТА HTML ............................. 48
Подходы форматирования текста в HTML ..................................48
Теги структурного форматирования текста ................................49
2.8. СТРОКИ И АБЗАЦЫ .................................................................. 50
Тег Р........................................................................................... 51
Тег BR ........................................................................................ 51
2.9. ЗАГОЛОВКИ - ТЕГИ
Н1, Н2, НЗ, Н4, Н5, Н6 ......................................................... 52
2.1О. СПИСКИ НА ИНТЕРНЕТ-СТРАНИЦАХ. ТЕГИ UL И OL ....................... 52
2.11. ТАБЛИЦЫ НА ИНТЕРНЕТ -СТРАНИЦАХ ....................................... 54
Создание таблицы. Тег TABLE .................................................... 54
Строки и ячейки таблицы. Теги ТА, ТН, TD .................................. 57
Семантическая разметка таблицы .............................................60
2.12. ВСТАВКА ИЗОБРАЖЕНИЙ В ИНТЕРНЕТ-СТРАНИЦУ ....................... 62
2.13. БАЗОВЫЕ АБСТРАКЦИИ РАЗМЕТКИ. ВЕРСТКА
НА ОСНОВЕ БЛОКОВ DIV ...................................................... 63
2.14. СЕМАНТИЧЕСКИЕ ТЕГИ HTML5. ВЕРСТКА НА ОСНОВЕ С
ЕМАНТИЧЕСКОЙ РАЗМЕТКИ ........••••.••.••.....•....••..•••••••.•••..•.•• 64
2.15. ГЛОБАЛЬНЫЕ АТРИБУТЫ HTML5............................................... 69
ГЛАВА 3. ОСНОВЫ CSSЗ ........................................ 71
3.1. ПРАВИЛА CSS ......................................................................... 73
3.2. СЕЛЕКТОР КЛАССОВ ................................................................ 74
3.3. СЕЛЕКТОР ID-ИMEH ................................................................. 76
3.4. РАЗМЕТКА И ФОРМАТИРОВАНИЕ ДОКУМЕНТА СРЕДСТВАМИ CSSЗ .. 77
Размеры ....................................................................................77
Границы ..................................................................................... 78
Цвет и фон .................................................................................80
3.5. ФОРМАТИРОВАНИЕ ТЕКСТА СРЕДСТВАМИ CSSЗ ........................... 81
Web на практике
Операторы break и continue...................................................... 110
Вложенность циклов ................................................................ 111
4.7. ВВЕДЕНИЕ В МАССИВЫ .......................................................... 111
4.7.1. Инициализация массива ................................................. 112
4.7.2. Изменение и добавление элементов массива ................ 112
4.7.3. Многомерные массивы................................................... 113
4.7.4. Пример обработки массива ............................................ 113
4.8. ФУНКЦИИ JAVASCRIPT. ОСНОВНЫЕ ПОНЯТИЯ ............................. 116
4.8.1. Расположение функций внутри сценария ....................... 118
4.8.2. Область видимости переменной: глобальные
и локальные переменные ......................................................... 120
4.9. ОСНОВНЫЕ КОНЦЕПЦИИ ОБЪЕКТНО-ОРИЕНТИРОВАННОГО
ПРОГРАММИРОВАНИЯ ...................................................... 122
4.9.1. Создание пользовательских классов и объектов............. 123
4.1О. ПРАКТИКА JS....................................................................... 127
4.10.1. Работа с объектной моделью документа HTML ............. 127
4.10.2. Глобальный объект window ............................................ 128
4.10.3. Глобальный объект document ........................................ 128
4. 11. ОСНОВНЫЕ МЕТОДЫ ДЛЯ РАБОТЫ С ЭЛЕМЕНТАМИ
DОМ-ДЕРЕВА .................................................................. 129
4.11.1. Ключевое слово querySelector() .................................... 129
4.11.2 Ключевое слово querySelectorAll().................................. 130
4.11.3. Ключевое слово addEventlistener.................................. 130
4.11.4. Ключевое слово' classlist............................................... 131
4;12. ПРИМЕРЫ СКРИПТОВ .......................................................... 132
4.12.1. Скрипт фиксированного меню ...................................... 133
4.12.2. Скрипт подключения слайдера ..................................... 134
4.12.3. Скрипт отправки форм .................................................. 138
ГЛАВА 5. ОСНОВЫ ЯЗЫКА РНР . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
ВВЕДЕНИЕ В РНР ......................................................................... 143
5.1. СИНТАКСИС РНР ......................................................·.............. 146
Лексическая структура ............................................................ 146
Чувствительность к регистру ................................................... 146
------
,
Пробелы и разрывы строк ....................................................... 147
Содержание
Литералы ................................................................................149
Идентификаторы ..................................................................... 150
Имена переменных .................................................................150
Имена функций ........................................................................151
Имена классов ........................................................................ 151
Константы ............................................................................... 151
5.1.1. КЛЮЧЕВЫЕ СЛОВА ............................................................. 151
5.1.2. ТИПЫ ДАННЫХ .................................................................. 153
Целые числа ............................................................................153
Числа с плавающей точкой ......................................................154
Строки .................................................................................... 155
Логические (булевые) значения ..............................................156
Массивы ................................................................................. 157
Объекты ................................................................................... 158
Ресурсы ..................................................................................159
NULL ............. , .........................................................................160
5.1.3. ПЕРЕМЕННЫЕ .................................................................... 160
СаllЬасk-функции ....................................................................160
Переменные переменных ........................................................161
Переменные-ссылки ................................................................161
Области видимости переменных..............................................162
Локальная область видимости ................................................ 162
Глобальная область видимости ...............................................163
Статические переменные ............................. ; ..........................164
Параметры функции ................................................................ 164
5.1.4. ВЫРАЖЕНИЯ И ОПЕРАТОРЫ.................................................. 165
Количество операндов ............................................................. 167
Приоритет операторов............................................................. 167
Порядок выполнения операторов............................................. 168
Неявное приведение типа ........................................................ 169
Арифметические операторы .................................................... 170
Оператор конкатенации строки ................................................ 171
Операторы инкремента и декремента ...................................... 171
Операторы сравнения .............................................................. 173
Поразрядные (побитовые) операторы ...................................... 176
Логические операторы ............................................................. 178
Операторы приведения типов .................................................. 179
Web на практике
Оператор присваивания .......................................................... 181
Присваивание ..........................................................................181
Присваивание с операцией...................................................... 182
Разные операторы: подавление ошибок и другие .................... 183
5.1.5. ОПЕРАТОРЫ УПРАВЛЕНИЯ ВЫПОЛНЕНИЕМ ............................. 184
Оператор if...............................................................................184
Оператор switch .......................................................................187
Оператор match ....................................................................... 189
Оператор while ......................................................................... 190
Цикл с предусловием ............................................................... 190
Цикл с постусловием ............................................................... 192
Цикл for. Цикл со счетчиком ...................................................... 193
Оператор foreach ..................................................................... 195
Конструкция tгу...catch ............................................................. 195
Операторы exit и return ............................................................. 196
Оператор goto............... : .......................................................... 197
5.1.6. ВКЛЮЧЕНИЕ КОДА .............................................................. 197
5.1.7. ВНЕДРЕНИЕ РНР В WЕВ-СТРАНИЦЫ ....................................... 200
Стандартный (XML) стиль ......................................................... 200
Стиль SGML ............................................................................. 203
АSР-стиль ................................................................. :.............. 203
Использование .............................. , ............................ 204
Использование echo для вывода контента ............................... 204
5.2. ФУНКЦИИ ............................................................................. 205
Вызов функции ........................................................................ 205
Определение функции ............................................................. 207
Область действия переменной ................................................ 209
Глобальные переменные .......................................................... 210
Статические переменные......................................................... 211
Параметры функции................................................................. 212
Передача параметров-значений .............................................. 212
Передача параметров-ссылок ................................................. 212
Параметры по умолчанию ........................................................ 213
Переменное число параметров ................................................ 214
Отсутствующие параметры ...................................................... 216
Контроль типа ......................................................................... 216
Возвращаемые значения ......................................................... 217
Содержание
Переменные функции. Обращение к функциям
через переменные ................................................................... 219
5.3. СТРОКИ ............ ................................................................... 220
5.3.1. Кодирование и экранирование ....................................... 220
В формат HTML ........................................................................ 221
Экранирование всех специальных символов............................ 221
Экранирование только символов синтаксиса HTML ................. 222
Удаление НТМL-тегов .............................................................. 224
Извлечение МЕТА-тегов ........................................................... 224
Конвертирование в URL ........................................................... 225
Кодирование и декодирование по RFC 3986 ............................ 225
Кодирование строки параметров ............................................. 226
В формат SQL .......................................................................... 226
Кодирование С-строк............................................................... 227
5.3.2. Сравнение строк............................................................. 228
Точные сравнения. Операторы== и=== ................................... 228
Приблизительное сравнение ................................................... 231
5.4. МАССИВЫ ............................................................................ 233
5.4.1. Индексированные и ассоциативные массивы ................. 233
5.4.2. Идентификация элементов массива ............................... 234
5.4.3. Хранение данных в массивах .......................................... 235
5.4.4. Добавление значений в конец массива...........................237
5.4.5. Присваивание диапазона значений ................................ 237
5.4.6. Получение размера массива ·········································.·238
5.4.7. Заполнение массива ...................................................... 238
5.4.8. Многомерные массивы................................................... 239
5.4.9. Извлечение нескольких значений ................................... 239
5.4.10. "Вырезка" из массива ................................................... 241
5.4.11. Разделение массива на несколько массивов ................ 241
5.4.12. Ключи и значения.......................................................... 242
5.4.13. Проверка существования элемента массива ................ 243
5.4.14. Удаление и вставка элементов в массив .......................244
5.4.15. Преобразование между массивами и переменными ..... 246
5.4.16. Создание переменных из массива................................247
5.4.17. Создание массива из переменных................................ 247
5.4.18. Обход массивов............................................................. 248
Web на практике
Использование цикла for.......................................................... 251
5.4.19. Вызов функции для каждого элемента массива ............ 251
5.4.20. Сокращение массива.................................................... 253
5.4.21.Поиск значений ............................................................. 254
5.4.22. Сортировка................................................................... 256
5.4.23. Работа со всем массивом ............................................. 262
5.5. ОБРАБОТКА ФОРМ................................................................. 265
5.5.1. Методы........................................................................... 265
5.5.2. Параметры ..................................................................... 266
5.5.3. Самообработка страниц ................................................. 267
5.5.4. Липкие формы ................................................................ 269
5.5.5. Многозначные параметры .............................................. 270
5.5.6. Липкие многозначные параметры ................................... 272
5.5.7. Загрузка файлов............................................................. 274
5.5.8. Проверка формы ............................................................ 276
5.6. БАЗЫ ДА1:1НЫХ ...................................................................... 279
5.6.1. Последовательность работы с базой данных ..................279
5.6.2. Подключение к базе данных............................................ 280
5.6.3. Выполнение запроса к базе данных ................................ 281
5.6.4. Получение данных .......................................................... 282
5.6.5. Закрытие соединения.....·................................................ 284
5.6.6. Получение суммы колонки .............................................. 284
ГЛАВА б.ОСНОВЫ MYSQL . . . . . . . . . . . . . .· . . . . . . . . . . . . . . . . . . . . . . 285
6. 1. ЗНАКОМСТВО С MYSQL .......................................................... 286
6.1.1. Основная информация о MySQL ..................................... 286
6.1.2. Терминология ................................................................. 287
6.1.3. Что такое SQL ................................................................. 289
6.1.4. Как выглядят запросы и как их передать базе данных ..... 290
Создание базы данных............................................................. 292
6.2. СОЗДАНИЕ ТАБЛИЦ ............................................................... 296
6.2.1. Типы данных ................................................................... 296
Символьные данные ................................................................ 296
--
Числовые данные ..................................................................... 299
Временные данные .................................................................. 299
Сводная таблица типов данных ................................................ 301
6.2.2. Оператор CREATE ........................................................... 306
Web на практике
8.2.2. Шаблонизатор template.php ........................................... 403
8.2.3. Файл autoloader.php - подключение
необходимых файлов ............................................................... 404
8.2.4. Основной сценарий index.php ......................................... 404
8.2.5. Сценарий about .............................................................. 406
8.2.6. Сценарий ar ticle.php - отображение статьи .................... 407
8.2.7. Вывод страниц - articles.php........................................... 409
8.2.8. Сценарий callback.php .................................................... 413
8.2.9. Сценарий news.php ........................................................ 413
8.2.1 О. Сценарий set_vars.php .................................................. 415
8.2.11. Сценарий sub.php ......................................................... 416
8.2.12. Библиотека функций library.php .................................... 416
8.2.13. Парсинг новостей RSS .................................................. 419
ГЛАВА 9. РАЗВОРАЧИВАНИЕ АРХИВА
НАХОСТИНГЕ ................................ . . ......... 421
9. 1. ПОДГОТОВИТЕЛЬНЫЕ МЕРОПРИЯТИЯ ...................................... 422
9.1.1. Выбор хостинга .............................................................. 422
9.1.2. Во сколько обойдется хостинг? ...................................... 425
9.1.3. Установка дополнительного программного
обеспечения ............................................................................ 425
9.2. ПОДРОБНАЯ ИНСТРУКЦИЯ ...................................................... 426
Шаг 1: Создание базы данных .................................................. 426
Шаг 2: Распаковка архива на локальный компьютер ................. 428
Шаг 3: Параметры доступа к БД ............................................... 428
Шаг 4: Загрузка файлов на хостинг ..........................................429
Шаг 5: Импорт базы данных ..................................................... 429
Шаг 6: Правим адрес сайта ...................................................... 430
Глава 1.
Общая методика
Fullstack-paзpaбoтки
сайта
ИТМL
J!i
1:11
Web на практике
Данная книга посвящена Fullstack-paзpaбoткe сайта. Данная книга и прак
тический пример написаны коллективом (сотрудниками) ООО "Цифровые
Бизнес-Платформы". Книга состоит из нескольких глав, в которых дается
описание технологий полного стека wеЬ-разработки. При их рассмотрении
приводятся либо небольшие примеры, либо фрагменты большого практи
ческого примера - проекта образовательного веб-портала. Скриншоты пор
тала можно посмотреть на страницах 319-322. Полностью· данному проек
ту посвящены главы 7 (разработка фронтенда) и 8 (разработка бэкэнда).
К книге, на сайте издательства прилагается программный код примера. В
главе 9 описано, как развернуть практический пример (или ваш сайт) на
хостинге. Обратите, пожалуйста, внимание, что код примера распространя
ется в учебных целях (не для коммерческого использования), а контентное
оформление (изображения и т.п.) либо исключено из кода, либо принадле
жит их правообладателям.
В этой части мы поговорим об этапах разработки сайта, о том, какие тех
нологии вам понадобятся и о том, как стать Fullstасk-разработчиком. В
следующих частях будет приведено описание ключевых технологий wеЬ
разработки (HTMLS, CSS3, JavaScript, РНР, MySQL), а также будет при
веден и разобран реальный пример сайта (его фронтенда и бэкенда), исход
ные коды которого можно скачать с сайта http://nit.com.ru.
1 . 1 . Этапы разработки сайта
Разработка сайта состоит из следующих этапов:
1. Идея или постановка целей и задач сайта.
2. Создание технического задания (далее - ТЗ).
3. Создание макета дизайна сайта.
4. Верстка.
5. Программирование.
6. Базовое наполнение контентом.
7. Тестирование.
8. Сдача готового сайта клиенту.
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
Как правило, для практически каждого из этих этапо11 должен быть отдель
ный специалист. На первом этапе пригодятся знания маркетолога, дизайнер
и верстальщик должны реализовать третий и четвертый этапы. Пятый этап
- за программистом. Контент-менеджер будет заниматься шестым этапом,
тестировщик - седьмым. Руководитель - восьмым. Но поскольку речь идет
о Fullstack-paзpaбoтчикe - эдаком универсальном солдате, которых в мире
фриланса очень много, ему придется самостоятельно заниматься каждым
этапом и быть чуть-чуть маркетологом, верстальщиком, дизайнером,
программистом и тестировщиком. Казалось бы, все это сложно, но невы
полнимых задач нет! Рассмотрим эти этапы подробнее.
1.1.1. Идея
. Все начинается с идеи. Заказчик ( или вы сами, если создаете сайт для себя)
должен четко понимать, для чего сайт нужен, какие функции он должен вы
полнять, и что должно получиться на выходе. Далеко не каждый заказчик
может самостоятельно определить его цели и задачи. Разработчик или его
представитель/помощник должны помочь определиться с целями и функ
ционалом. В этом прямая заинтересованность разработчика - он должен
максимально точно понимать, что хочет заказчик, чтобы не получилось, что
заказчик хотел одно, а разработчик сделал другое. Такие ситуации, к сожа
лению, бывают чаще, чем можно себе представить. Они приводят к недораз
умениям и спорным ситуациям. Затем все равно приходится переделывать
проделанную работу, а это время и нервы. Во избежание таких ситуаций
нужно четко понимать, чего хочет заказчик. Если заказчик сам не знает, что
он хочет, нужно помочь ему определиться.
Для этого нужно произвести подготовительный этап: проанализировать,
какие задачи должен решать сайт, и вообще, зачем сайт нужен заказчику.
Будет ли это Интернет-магазин или же сайт-визитка? А может это будет
лидогенератор для Интернет-магазина - сайт, который будет заманивать
потенциальных клиентов в Интернет-магазин - такие сайты набирают по
пулярность в последнее время и способны в несколько раз повысить прода
жи. Все это оговаривается с заказчиком. Он должен сам понимать зачем ему
сайт, в чем он поможет его компании и с чем справиться не сможет.
После постановки задачи нужно определиться с целевой аудиторией. 1-Jуж
но понимать, для кого создается ресурс, что может предложить заказчик, и
как на его предложение отреагирует целевая аудитория. От целевой аудито
рии зависит структура сайта, контент, дизайн и функционал.
В заключение этого этапа проводится маркетинговый анализ, который
включает анализ конкурентов, сезонности товаров и услуг заказчика, опре
деляются всевозможные "фичи" (от англ. feature - особенность), способ
ные привлечь внимание посетителей. Вся эта информация также согласо
вывается с заказчиком.
Казалось бы, этот этап занимает достаточно много времени, но от того,
насколько качественно он будет проделан, зависит вся дальнейшая работа.
1. 1.2. Техническое задание
На основании собранной на первом этапе информации составляется тех
ническое задание, Звучит абсурдно, но техническое задание для себя же
составляет сам разработчик. По-хорошему, заказчик должен прийти к раз
работчику с уже готовым техническим заданием. Но на практике заказчик
не всегда приходит даже с четким пониманием задач сайта, не говоря уже о
техническом задании.
Поэтому техническое задание составляется вместе с клиентом. Данный до
кумент включает детальные характеристики ресурса:
• Пожелания по дизайну (цветовое оформление, применение
фирменного стиля или его разработка, соотношение графиче
ских элементов к текстовым);
• Семантическое ядро;
• Структуру сайта, количество страниц, категорий, блоков;
• Функционал сайта (только стандартный или разработка допол
нительных модулей, подробное их описание и цели);
• Применяемые технологии;
• Технические требования к ресурсу.
Техническое задание - это основа, на которую полагается каждый специ
алист, участвующий в разработке. Поэтому участие заказчика в составле
нии ТЗ - необходимо. ТЗ оговаривается и редактируется до тех пор, пока
клиент не даст согласие и не подпишет документ. Только после этого проект
переходит в стадию создания. Важно, чтобы заказчик подписал техническое
задание. Если возникнет ЧП и заказчик будет говорить, что разработчик
создал не то, что нужно, рассудить сможет только техническое задание.
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
Если в не_м оговорено, что кнопки на сайте должны быть зелеными, а за
казчик утверждает, что хотел красные кнопки - всегда можно прикрыться
техническим заданием. В этой книге мы не будем учить вас, как составлять
техническое задание. Необходимую информацию всегда можно найти в
Интернете.
1.1.3. Создание макета сайта
Разработка макета сайта - один из главных этапов разработки. На данном
этапе разрабатывается макет дизайна сайта. А дизайн имеет ключевую важ
ность - ведь это то, что видит посетитель в первую очередь, оценивает и
принимает решение, остаться на этом сайте или перейти на другой.
Проблема в том, что создать уникальный сайт в наше время практически
нереально. Сайтов уже миллиарды, и вряд ли у вас будет что-то принци
пиально новое. Но дизайн сайта и его эргономика (удобство работы с ним)
все равно имеют значение. Если человеку будет неудобно работать с вашим
Интернет-магазином, он купит товар у конкурентов. Конечно, можно по
спорить, что решает цена, но если на вашем сайте будет неудобный и за
путанный чекаут, клиент просто не сможет оформить заказ, плюнет и за
кажет данный товар на другом сайте. Да и не всегда можно снижать цену,
поскольку есть определенные наценки, гарантирующие бизнесу рентабель
ность: если снизить цену, упадет доход и бизнес уже не.будет рентабельным.
Демпингование может помочь только в самом начале - при старте проекта,
дальше оно будет только вредить бизнесу.
При создании макета дизайнер, на основании ТЗ, рисует кнопки, баннеры
и другие графические элементы. Другими словами, тот прототип, который
был создан на первом этапе разработки сайта, получает эстетичный внеш
ний вид, воспроизводится в цветах, выбранными заказчиком. Если компа
ния имеет корпоративный стиль, то дизайн разрабатывается в соответствии
с ним. Бывает, сначала разрабатывается фирменный стиль, а после - дизайн
на его основе.
При создании макета дизайнер создает дизайн не каждой страницы, а толь
ко нескольких основных. Например, если речь идет об Интернет-магазине,
то, как правило, рисуются три страницы - главная (витрина), страница ка
талога (список продуктов) и карточка товара. Если необходимы доработки,
дизайнер выполняет их и снова показывает макет заказчику. Дизайн дора
батывается до тех пор, пока он не будет утвержден.
В последнее время широко распространена практика динамического про
тотипирования при разработке макетов сайта - когда создаются не просто
картинки страниц сайта, но их делают кликабельными, то есть смена кар
тинок происходит в зависимости от того, по какой части изображения про
изошел щелчок мыши. Таким образом, уже на этапе создания макета ·сайта
имитируется его реальная работа. Для этого широко используется такие
инструменты как FIGMA, Axure и т.п.
1.1.4. Верстка
Верстка - это процесс "оживления" макета. При создании макета дизайнер
использует редактор для работы с изображениями, например, Photoshop
или Illustrator, возможно с использованием инструментов динамического
прототипирования (Figma, Axure и т.п.). На этапе верстки верстальщик с
помощью языка HTML и таблицы стилей CSS переводит дизайн в рабо
чий проект. Грубо говоря, верстка - это процесс преобразования рисунка,
созданного в Photoshop, в НТМL-документ, который при его открытии в
браузере выглядит максимально подобно рисунку-макету.
На этом же этапе разрабатывается и адаптивная версия сайта, нормально
отображающаяся на устройствах с разными размерами экрана. Наличие
такой версии очень важно в последнее время, так как если сайт не адапти
ровать для мобильных устройств, Google и другие поисковики не будут от
правлять трафик с мобильных устройств на такой сайт. Еще в 2019 году 52%
мирового Интернет-трафика приходилось на мобильные устройства, то
есть смартфоны по популярности у конечных пользователей обогнали на
стольные компьютеры. В 2021 году данный показатель только увеличится.
1.1.5. Программирование
Итак, у нас есть НТМL-документ, который сам по себе ничего не делает он отображает только лишь статический контент, заполненный дизайнером.
Как минимум, программисту нужно написать код, который бы получал
реальный контент из базы данных и выводил бы его в дизайне сайта. Также
нужно разработать ряд сложных функций: подключить возможность опла-
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
ты с помощью банковских карт, интегрировать сайт с бухучетом (с той же
1С), разработать панель управления сайтом. Все это занимает достаточно
много времени, но без этого сайт так и останется макетом, хоть и конверти
рованным в формат HTML.
Очень часто код, выполняющий все эти сложные задачи, пишется на РНР.
Также для некоторых функций вам понадобится знание J avaScript - как
правило, когда нужно выполнить какие-то операции прямо в браузере поль
зователя, без их передачи на сервер. Или наоборот, когда нужно получить
данные с сервера (или отправить данные на сервер) без перегрузки страни
цы. Мы еще поговорим о необходимых знаниях.
1.1.6. Наполнение контентом
Следующий этап - базовое наполнение контентом. Никто не наполняет
сайт контентом полностью (если иное не оговорено договором и техниче
ским заданием). Как правило, создаются базовые материалы, добавляется
несколько продуктов, загружаются кое-какие фото и видео. В больших ко
мандах этим занимается контент-менеджер, в Fullstack-paзpaбoткe эта за
дача ложится на плечи программиста. Впрочем, размещение контента по
зволяет совместить еще одну задачу - тестирование. Если вы добавляете
контент и происходит какая-то ошибка (например, не загружается фото
статьи), то вы сразу можете ее исправить. Так что подобная организация
даже чем-то ускоряет разработку.
1 . 1 . 7. Тестирование
После создания сайта происхЬдит его тестирование. Существуют различ
ные методы тестирования, рассмотрение которых выходит за рамки этой
книги, поскольку этому вопросу можно посвятить отдельную книгу и даже
не одну. Минимальное тестирование заключается хотя бы в том, чтобы про
верить, работает ли каждая кнопка сайта так, как от нее требует ТЗ. Если
все кнопки работают, контент добавляется и отображается нормально, мож
но сказать, что сайт готов. Конечно, можно провести еще нагрузочное тести
рование и посмотреть, как будет себя вести сайт при большом количестве
t!iдновременных посетителей.
1. 1.8. Жизнь после сдачи проекта
При сдаче проекта исполнитель передает заказчику все необходимые до
ступы к сайту. Если не произошло критических ситуаций и разработчик с
заказчиком не разругались до этого момента, сотрудничество не заканчива
ется. Ведь есть еще много задач:
1. Обновление статей, каталога товаров.
2. Обучение работе с сайтом.
3. Поддержка сайта.
4. Продвижение ресурса.
Нужно отметить, что поэтапное создание сайта контролируется заказчиком.
По окончании каждого этапа готовый результат демонстрируется клиенту и
согласовывается с ним. Это помогает заказчику контролировать работу ис
полнителя, а исполнителю понимать, доволен ли клиент результатами его
работы.
1.2. Стек WЕВ-технол гий llstасk
разработчика разного уровня
Универсальный солдат, он же Fullstack-paзpaбoтчик, должен быть знаком
со множеством технологий. Попробуем разобраться, что же ему понадо
бится. Мы не будем плодить уровни - можно придумать сколько хочешь
уровней, добавляя к каждому из них новое знаний. Мы рассмотрим лишь
базовый и продвинутый уровень. Базового уровня хватит для разработки
простенького сайта, а продвинутый позволит разработать сайт практически
любой сложности.
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
1 . 2. 1 . Базовый уровень
·вам необходимо разбираться в следующих технологиях:
• HTML и CSS - ведь нарисованный макет нужно "порезать", то
есть создать НТМL-документ, который в браузерс будет ото
бражаться, как макет, нарисованный в графическом редакторе.
• Основы языка РНР. Основной код движка сайта вам придется
писать на РНР, поэтому без знаний этого языка программиро
вания, увы, никак.
• Объектно-ориентированный подход в проrраммировании.
Это основы основ. Вы вряд ли будете писать тот же РНР код
полностью с нуля, для ускорения работы вам придется исполь
зовать сторонние классы, а они вряд ли напишутся без ООП. В
процедурном стиле уже давно никто не программирует. Даже
класс подключения к базе данных реализован в ООП-стиле.
• Концепция MVC (Model View Controller). Концепция MVC
позволяет разделить модель данных (реальные данные, хра
нящиеся в БД), представление (дизайн сайта) и контроллер
(функционал).
• Основы SQL. Для работы с базой данных вам придется изучить
основы языка SQL.
• OcнoвыJavaScript. В современном мире редко какой фронтенд
(дизайн) обходится без функций JavaScript, поэтому без пони
мания хотя бы основ этого языка вам не обойтись.
Все эти технологии описаны в этой книге. Во второй части будет рассмо
трен язык разметки HTML, в третьей - CSS, в четвертой - JavaScript. Пятая
часть раскрывает тайны программирования на РНР, в ней же объясняет
ся объектно-ориентированное программирование (ООП). В шестой части
книги мы поговорим о MySQL.
1.2.2. Продвинутый уровень
Здесь уже понадобятся следующие знания:
• Система контроля версий - работать над проектом даже сред
ней сложности без системы контроля версий (даже если рабо
таете над проектом сами) - дело неблагодарное. Ведь можно
внести ненароком неправильные изменения в код, и вернуть
как было уже не получится. А вот система контроля версий как
раз позволяет сделать это: вы всегда сможете откатиться к пре
дыдущей версии кода, сравнить две версии кода и т.д. А когда
над проектом работает несколько человек, система контроля
версий просто must have. Стандартом де-факто является Git пр,�ктически все серьезные разработчики используют именно
Git (если не считать некоторых софтверных гигантов, которые
используют собственные разработки).
• WebSockets. Это технология, которая позволяет создавать ин
терактивное соединение между клиентом (браузером) и сер
вером для обмена сообщениями в режиме реального времени.
Веб-сокеты, в отличие от НТТР, позволяют работать с двуна
правленным потоком данных. Предлагаю смотреть на это как
на AJAX нового поколения. Основная фишка - это отсутствие
необходимости постоянно запрашивать новые данные с серве
ра. При необходимости сервер сам отправит данные, а браузер
их получит.
• Перекомпиляторы. Пусть само слово компилятор в контексте
интерпретируемых языков программирования звучит странно,
но здесь речь идет о программах, которые позволяют собрать все
используемые стили в один файл перед заливкой в production.
Очень популярны перекомпиляторы во фронтенде, так как для
бэкенда используются полноценные ООП-языки, и переком
пиляторы используются для других целей - для ускорения и
кэширования (пример такого компилятора Zend OPcache).
--
• Composer - пакетный менеджер уровня приложений для язы
ка программирования РНР, который предоставляет средства
по управлению зависимостями в РНР-приложении. Простыми
словами - это скрипт, написанный на РНР, который скачива-
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
ет необходимые вам библиотеки и автоматически формирует
единственный специальный файл, подключив который, Вы
подключите к проекту _все скачанные библиотеки и фреймвор
ки.
• Основные фронтеIЩ библиотеки JavaScript - jQuery и jQueri
UI. Данные библиотеки предоставляют множество полезных
при разработке интерфейса пользователя компонентов, в том
числе и визуальных. Использование данных библиотек суще
ственно ускорить разработку интерфейса пользователя.
• НТМL-фреймворк Bootstrap. Разметка НТМL-документа
в современном мире выполняется с использованием стилей
Bootstrap. Это настолько удобно, что один раз попробовав, вы
больше не сможете от него отказаться - это как наркотик! Да и
множество проектов создано с использованием Bootstrap. По
нимая его разметку и стили, вы без проблем разберетесь в про
ектах сторонних разработчиков.
• БаIЩЛер (bundler). Это инструмент для сборки модулей в еди
ные пакеты, имеющий доступ к файловой системе. БандJ1ер
ищет все выражения require (имеющих ошибочный, с точки
зрения браузера, синтаксис) и меняет их на настоящее содер
жимое каждого требуемого файла.
• Основы администрирования Linux/UNIX. Рано или поздно
ваши проекты перекочуют с хостинга на виртуальный сервер
(VPS/VDS). Если нахостинге все ПО настроено провайдером,
то на VDS вам придется все делать самостоятельно. А это озна
чает, что вы должны уметь развернуть (установить и настроить)
веб-сервер Apache/nginx, сервер баз данных MySQL, интерпре
татор РНР и еще много другого софта. Также вы должны иметь
знания по работе в командной строке, разбираться с правами
доступа к файлам и каталогам, уметь диагностировать возника
ющие при работе серверов неисправности - читать логи и по
нимать, что в них написано.
,_.
• Тестирование. Отдельная и большая (или больная!) тема.
Существуют различные методы тестирования, чаще всего ис
пользуется модульное тестирование (unit testing), как самый
дешевый вид тестирования. Суть идеи легко понять на простом
примере. Создавая тест, вы пишете некую обёртку, которая вы-
полнит одну из функций и проверит ожидаемый результат.
Если вы поменяете что-либо в другой функции, от которой за
висит первая функция, то чтобы проверить, что изменение ни
чего не сломало - вам достаточно запустить созданные ранее
тесты. Надеюсь понятно, насколько это может быть полезно в
большом проекте. К сожалению, рассмотрение методов тести
рования выходит за рамки этой книги, как уже было отмечено.
• Фреймворки РНР. Фреймворк позволяет существенно уско
рить разработку, поскольку предоставляет разработчику уже
готовые инструменты для выполнения рутинных задач. На се
годняшний день можно выделить наиболее популярные РНР
фреймворки (приводятся в порядке убывания популярности):
» Laravel - один из самых популярных фреймов, по данным некоторых изданий - самый популярный. Ключевые
функции, доступные "из коробки": шаблонизатор "Blade",
Eloquent О RM для работы с БД и создания моделей (речь
про модели из концепции MVC), механизм автоматиче
ской загрузки классов РНР без необходимости подклю
чать файлы из определений в include, миграции (система
управления версиями БД), есть свой формат пакетов, кото
рые позволяют создавать и подключать модули Composer к
приложению на Laravel. Многие дополнительные возмож
ности уже доступны в виде таких модулей. Очень гибкий
и, в целом, понятный инструмент. Будет хорошим стартом
для дальнейшего изучения - при понимании используемых
технологий, многие концепции других фреймворков будут
понятнее. Также немаловажно, что данный фреймворк ис
пользует множество компонентов следующего фреймворка
- Symfony, что тоже послужит хорошим подспорьем при
дальнейшем расширении кругозора.
» Syrnfony - в качестве ключевых плюсов упоминаются уни
версальность, стабильность, однако тут достаточно высокий
порог вхождения. Из коробки имеет два О RМ-инструмента:
Propel и Doctrine. Более сложный и более тяжелый фрейм
ворк по сравнению с Laravel.
» Zend - самый высокий порог вхождения, взамен высокая
стабильность и минимальные зависимости между частями
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
проекта. Создан для разработки больших приложений кор
поративного уровня (enterprise). Интересно, что Zend соз
дан и поддерживается разработчиками РНР, а, например,
виртуальная машина в интерпретаторе языка РНР имену
ется не иначе как Zend Engine. Очень "тяжелый" движок,
поэтому при разработке средних по сложности сайтов при
нято использовать Laravel - он попросту работает быстрее.
Монстрообразный Zend принято применять для сложных
сайтов, где низкая производительность компенсируется
предоставляемыми функциями и масштабируемостью.
» Yii - считается одним из наиболее производительных и при
этом простых фреймворков, хотя однозначных подтвержде
ний этому нет. У него огромное сообщество и высок� попу
лярность. Имеется множество расширений, например, для
работы со Sphinx. Одна из основных функций - генератор
кода Gii, разумеется также есть миграции БД.
» Codelgniter - достаточно старый фреймворк, постепенно
уходящий на задний план. Постепенно он затухает и усту
пает место более молодым продуктам. Ключевые функции
- это собственный гибкий шаблонизатор, шаблоны для ра
боты с БД (очень похожи на синтаксис SQL) и мощные воз
можности кэширования на стороне сервера. Считается, что
это самый минималистичный и легкий фреймворк с одной
из лучших документаций.
• JаvаSсriрt-фреймворки. Подобно РНР-фреймворкам, данные
фреймворки позволяют создавать полноценные серверные
приложения, но написанные нaJavaScript (TrueScript), а не на
РНР. Рассмотрим основные продукты:
'
» React. Библиотека для "реактивного" взаимодействия
между элементами интерфейса и предоставляющая шабло
низаторJSX, позволяющий описывать компоненты интер
фейса с помощью синтаксисаJS. Основная идея, пожалуй,
в использовании собственной системы событий, которая и
обеспечивает эту самую "реактивность". React придумали
ребята из Facebook.
....
» Angular. Мощнейший фреймворк, предоставляющий
огромные возможности для разработки приложений, на
нём можно реализовывать как "классические" небольшие
SPA, так и действительно огромные проекты. Этот фрейм в
полной мере соответствует концепции MVC: предоставляет
возможность использовать компоненты, имеет свою удоб
ную систему событий и вообще, по моему субъективному
мнению, всячески хорош. Если вы планируете разрабаты
вать большой серьезный проект, я бы рекомендовал изучать
именно его. С выходом версии 2.0. проект разделился на два
независимых - это AngularJS и просто Angular (нумерация
версий начинается с двойки), не следует их путать.
» Vue. Популярный ныне фреймворк. Он так же, как и React,
использует !3Иртуальный DOM, а вторая его версия под
держивает шаблонизатор JSX. Судя по всему, это попытка
упростить чрезмерно сложные фреймворки типа React или
Backbone, выбросив лишнее. Поскольку, например, для ре
ализации своей системы событий тут необходимо подклю
чать дополнительный модуль (Vuex), а ядро фреймворка
используется в первую очередь как шаблонизатор и селек
тор элементов.
1.2.3. Если нет таланта дизайнера
Как разработать дизайн сайта, если таланта дизайнера нет? В этом случае
помогут сайты, содержащие платные и бесплатные шаблоны сайтов.
Иногда можно попросту модифицировать имеющийся шаблон и показать
его заказчику. Это проще, нежели создавать новый шаблон с нуля. Стои
мость разработки нового макета у дизайнера (если это не вы), может соста
вить несколько десятков тысяч рублей, поэтому за хороший макет не жалко
отдать 10-50 долларов (средняя стоимость шаблона, шаблоны продаются
обычно в долларах, поэтому и цена тоже в долларах). Сайты с шаблонами
вы можете найти по запросам (не хочется рекламировать какой-то сайт):
free html templates
html templates
site templates
Глава 1. Общая методика Fullstack-paзpaбoтки сайта
Пора приступить к следующей части книги, в которой мы рассмотрим язык
разметки HTML. Это основа основ в веб-разработке. Ведь ваш РНР-скрипт
должен сгенерировать именно НТМL-документ и отправить его в браузер
пользователя. Без знания HTML вы просто не будете знать, что именно
нужно сгенерировать в ответ на запрос пользователя. Именно поэтому зна
ние HTML, можно сказать, является краеугольным камнем веб-разработки.
2" 1 � Язык t·iTML и НТIV1L-документы
как составные элементы ин"rернет
сайтов
Сеть Интернет (World Wide Web) - сеть глобального пользования, и по
этому вся информация в сети должна быть представлена на универсаль
ном языке, который понимали бы все пользователи. Языком публикации,
используемым в World Wide Web, является HTML (Hyper Text Markup
Language - язык разметки гипертекста). Техническую информацию об этом
языке (его спецификацию) на английском языке можно найти на сайте
World Wide Web Consorcium - wЗc.com
Все интернет-сайты и интернет-страницы по своей сути представляют со
бой НТМL-документы или наборы html-документов. В простейшем слу
чае, html-документ хранится на сервере, и при обращении к нему по адресу
из браузера он загружается и отображается в окне браузера. В то же вре
мя существуют языки программирования и скрипты, написанные на них,
которые позводяют не хранить html-страницу на сервере, а динамиче
ски формировать эти страницы, исходя из различных данных и действий
пользователя. Такой возможностью обладает язык РНР, основы которого
мы также рассмотрим в данной книге. Кроме того, существуют языки про
граммирования для написания скриптов, которые выполняют различные
функции. Скрипты встраивают в НТМL-документ. Таким языком является
языкJavaScript, которому посвящен отдельный раздел книги. В итоге html
документ представляет собой некий каркас, который определяет, что есть
в документе и в виде каких структурных элементов в него включено. При
этом содержимое этих структурных элементов может находиться непосред
ственно в самом html-документе (например, текст), а может подгружаться
из какого-либо источника: например, из файла изображения, если в html
документе указано, что на этом месте должна быть картинка. Язык HTML
позволяет задавать только структуру и не позволяет программировать алго
ритмы, поэтому HTML является языком разметки.
Итак, HTML - язык разметки, предлагающий разработчикам следующие
возможности:
• Представлять информацию в сети в виде электронных доку
ментов, с информационным содержимым в виде форматиро
ванного текста, таблиц, списков, фотографий;
• Включать в документы звуковые фрагменты, видеоклипы,
электронные таблицы и другие приложения и элементы муль
тимедиа;
• Осуществлять загрузку документов посредством активизации
гипертекстовой ссылки;
• Разрабатывать формы для осуществления взаимодействия с
удаленными службами (поисковыми роботами, онлайн-магази
нами и т.п.)
Разметка документов заключается в том, что документ представляется в
виде последовательности элементов. Например, чтобы отобразить в окне
браузера простейшую текстовую информацию
НТМL-документ должен иметь следующий вид:
Для создания html-документа достаточно набрать его текст в каком-либо
простом текстовом редакторе и сохранить его в файле с расширением .html
(например, example1.html). Чтобы открыть его, щелкните по нему дважды
мышкой, и содержимое html-фaйлa откроется в браузере.
