Кириченко А.В., Никольский А.П., Дубовик Е.В. - Web на практике. CSS, HTML, JavaScript, MySQL, PHP для fullstack-разработчиков [2021, PDF, RUS]

Примеры страниц

Оглавление

ГЛАВА 1 .ОБЩАЯ МЕТОДИКА FULLSTACK-PAЗPAБOTKИ САЙТА . . . . . 13
1.1. ЭТАПЫ РАЗРАБОТКИ САЙТА ....................................................... 14
1.1.1. Идея ................................................................................. 15
1.1.2. Техническое задание ........................................................ 16
1.1.3. Создание макета сайта ..................................................... 17
1.1.4. Верстка ............................................................................ 18
1.1.5. Программирование .......................................................... 18
1.1.6. Наполнение контентом ..................................................... 19
1.1.7. Тестирование ................................................................... 19
1.1.8. Жизнь после сдачи проекта .............................................. 20
1.2. СТЕК WEB-ТЕХНОЛОГИЙ FULLSТАСК-РАЗРАБОТЧИКА
РАЗНОГО УРОВНЯ .............................................................. 20
1.2.1. Базовый уровень .............................................................. 21
1.2.2. Продвинутый уровень ....................................................... 22
1.2.3. Если нет таланта дизайнера ............................................. 26
ГЛАВА 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
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.0. СПИСКИ НА ИНТЕРНЕТ-СТРАНИЦАХ. ТЕГИ UL И OL ....................... 52
2.1.1. ТАБЛИЦЫ НА ИНТЕРНЕ Т -СТРАНИЦАХ ....................................... 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
Отступы ..................................................................................... 81
Выравнивание ........................................................................... 81
Визуальные характеристики ...................... , ............................... 82
Внутритекстовые интервалы ...................................................... 82
Регистр ...................................................................................... 83
3.6. НАСТРОЙКА ШРИФТА СРЕДСТВАМИ CSS3 .................................... 83
Стиль шрифта ............................................................................ 84
Размер шрифта .......................................................................... 84
Жирность шрифта ...................................................................... 85
ГЛАВА 4. ОСНОВЫ JAVASCRIPT ............................... 87
4.1. ОБЪЕКТНАЯ МОДЕЛЬ JAVASCRIPT .............................................. 88
4.2. КОММЕНТАРИИ В JAVASCRIPT .................................................... 90
4.3. ДИАЛОГОВЫЕ ОКНА ................................................................. 90
4.3.1. Метод alert() - простое окно с сообщением и к
нопкой ок .................................................................................. 91
4.3.2. Метод confirm() - окно с кнопками ОК и Cancel ................. 92
4.3.3. Метод prompt() - диалоговое окно для ввода данных ........ 93
4.4. ПЕРЕМЕННЫЕ В JAVASCRIPT ...................................................... 94
4.4.1. Объявление переменной .................................................. 94
4.4.2. Типы данных и преобразование типов .............................. 94
4.4.3. Локальные и глобальные переменные .............................. 97
4.5. ВЫРАЖЕНИЯ И ОПЕРАТОРЫ JAVASCRIPT ...................................... 97
4.5.1. Типы выражений ............................................................... 97
4.5.2. Операторы присваивания ................................................ 98
4.5.3. Арифметические операторы ............................................. 98
4.5.4. Логические операторы ..................................................... 99
4.5.5. Операторы сравнения .................................................... 100
4.5.6. Двоичные операторы ...................................................... 100
4.5.7. Слияние строк ................................................................ 101
4.5.8. Приоритет выполнения операторов ................................ 101
4.6. ОСНОВНЫЕ КОНСТРУКЦИИ ЯЗЫКА JAVASCRIPT .......................... 102
4.6.1. Условный оператор if ...................................................... 102
4.6.2. Оператор выбора switch ................................................. 105
4.6.3. Циклы ............................................................................. 107
Цикл for .................................................................................... 108
Цикл while ................................................................................ 108
Операторы 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.0. ПРАКТИКА 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
Комментарии .......................................................................... 148
Литералы ................................................................................ 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
Оператор присваивания .......................................................... 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
Конструкция foreach ................................................................. 248
Функции-итераторы ................................................................. 249
Использование цикла 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
6.3. ОСНОВНЫЕ SQL-ЗАПРОСЫ ..................................................... 308
6.3.1. Оператор INSERT -вставка записей в таблицу ............... 309
6.3.2. Оператор SELECT -выбор данных из таблицы ................ 310
6.3.3. Оператор UPDATE -обновление записи ......................... 315
6.3.4. Оператор DЕLЕТЕ-удаление записей ............................ 317
ГЛАВА 7. ПРАКТИЧЕСКИЙ ПРИМЕР.
РАЗРАБОТКА FRONTEND'A .......................... 318
7.1. СОЗДАНИЕ ФАЙЛОВОЙ СТРУКТУРЫ ......................................... 323
7.2. ВЕРСТКА ГЛАВНОЙ СТРАНИЦЫ ................................................ 326
7.3. ВЕРСТКА ОСНОВНЫХ БЛОКОВ ГЛАВНОЙ СТРАНИЦЫ: .................. 328
7.4. ВЕРСТКА ОСНОВНЫХ БЛОКОВ СТРАНИЦЫ
"НАПРАВЛЕНИЯ ОБУЧЕНИЯ" ............................................... 344
7.5. СТ ИЛИЗАЦИЯ СТРАНИЦ САЙТА ................................................ 353
7.6. АДАПТИВНАЯ ВЕРСТА САЙТОВ ................................................. 362
7.6.1. Определение ключевых точек ......................................... 363
7.6.2. CSS стили адаптивной верстки ....................................... 364
7.6.3. Примеры адаптивных селекторов ................................... 364
ГЛАВА 8. ПРАКТИЧЕСКИЙ ПРИМЕР. РАЗРАБОТКА
BACKEND"A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
8.1. ПЛАНИРОВАНИЕ .................................................................... 369
8.1.1. Основные функции сайта ................................................ 369
Принцип работы движка ........................................................... 370
Генерирование страниц сайта .................................................. 371
Понятие профиля сайта ........................................................... 371
Управление меню ..................................................................... 372
Управление заголовками и футерами ...................................... 373
Управление наборами кнопок и SЕО-данных ............................ 375
8.1.2. Модельданных ............................................................... 376
8.1.3. Структура проекта .......................................................... 395
8.1.4. Шаблоны сайта ............................................................... 396
8.2. РАЗРАБОТКА САЙТА ............................................................... 402
8.2.1. Назначение основных сценариев .................................... 402
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.10. Сценарий 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