Метка: Bootstrap

Предисловие…………………………………………………………………………………………… 11

Структура книги………………………………………………………………………………………………………………………… 12

О примерах кода……………………………………………………………………………………………………………………….. 14

Глава 1. Макетирование HTML-страниц с фреймворком Bootstrap 5…….. 15

1.1. Что нового в Bootstrap 5?……………………………………………………………………………………………………. 16

1.1.1. Наиболее важные изменения…………………………………………………………………………………… 16

Библиотека jQuery больше не является зависимостью…………………………………………. 16

Изменение поддержки браузеров……………………………………………………………………………. 17

Изменение атрибутов данных…………………………………………………………………………………. 17

Что было удалено?…………………………………………………………………………………………………… 18

1.1.2. Наиболее важные дополнения………………………………………………………………………………… 19

Адаптивные размеры шрифтов теперь включены по умолчанию……………………….. 19

Поддержка написания справа налево……………………………………………………………………. 19

Новая точка останова……………………………………………………………………………………………… 19

Темная и светлая тема……………………………………………………………………………………………… 19

Создание модальных окон через атрибуты данных…………………………………………….. 20

1.1.3. Новые компоненты……………………………………………………………………………………………………. 20

Аккордеон…………………………………………………………………………………………………………………. 20

Offcanvas……………………………………………………………………………………………………………………. 20

Плавающая этикетка……………………………………………………………………………………………….. 20

1.1.4. Прочие улучшения и изменения………………………………………………………………………………. 20

1.2. Получение файлов фреймворка Bootstrap………………………………………………………………………… 21

1.2.1. Использование сети CDN…………………………………………………………………………………………. 22

1.2.2. Скачивание файлов Bootstrap………………………………………………………………………………….. 24

1.3. Контейнеры и сетка Bootstrap……………………………………………………………………………………………. 24

1.3.1. Адаптивные контейнеры………………………………………………………………………………………….. 25

Адаптивно-фиксированный контейнер…………………………………………………………………… 26

Адаптивно-подвижный, или «резиновый», контейнер…………………………………………… 27

1.3.2. Ряды, или строки (row)……………………………………………………………………………………………… 27

1.3.3. Адаптивные блоки (col)……………………………………………………………………………………………. 28

1.3.4. Адаптивные блоки без указания числа колонок……………………………………………………. 29

1.3.5. Расположение адаптивных блоков…………………………………………………………………………. 30

1.4. Верстка макета HTML-страниц………………………………………………………………………………………… 30

1.4.1. Выравнивание адаптивных блоков…………………………………………………………………………. 31

Вертикальное выравнивание адаптивных блоков………………………………………………… 31

Горизонтальное выравнивание адаптивных блоков…………………………………………….. 31

1.4.2. Смещение адаптивных блоков………………………………………………………………………………… 32

Смещение с помощью классов offset………………………………………………………………………. 32

Смещение с помощью классов margin……………………………………………………………………. 33

1.5. Простейшая HTML-страница с подключением фреймворка Bootstrap…………………………. 36

1.6. Задание цвета элементам HTML-страниц……………………………………………………………………….. 38

1.7. Задание отступов элементам макета HTML-страниц…………………………………………………….. 41

1.8. Выравнивание содержимого в адаптивных блоках HTML-страниц……………………………… 45

1.9. Обозначение границ элементов макета HTML-страниц…………………………………………………. 47

1.10. Пример использования адаптивных контейнеров…………………………………………………………. 53

1.11. Таблицы Bootstrap……………………………………………………………………………………………………………. 56

1.12. Адаптивные таблицы в Bootstrap (с полосами прокрутки)…………………………………………… 64

1.13. Краткие итоги……………………………………………………………………………………………………………………. 69

Глава 2. Статичные элементы Bootstrap в шаблонах Django………………….. 71

2.1. Задание произвольного цвета элементам Bootstrap………………………………………………………… 71

2.2. Тег include для встраивания шаблонов Django………………………………………………………………… 75

2.3. Подключение значков к элементам Bootstrap………………………………………………………………….. 77

2.4. Разделение страницы на вкладки компонентом Tabs………………………………………………………. 81

2.4.1. Традиционные горизонтальные вкладки Tabs фреймворка Bootstrap…………………. 81

2.4.2. Традиционные вертикальные вкладки Tabs фреймворка Bootstrap…………………….. 85

2.4.3. Горизонтальные вкладки Tabs с использованием тега Django
для организации циклов…………………………………………………………………………………………………….. 88

2.4.4. Вертикальные кнопки для навигации по вкладкам Tabs фреймворка
Bootstrap………………………………………………………………………………………………………………………………. 90

2.5. Компонент Bootstrap Ofcanvas…………………………………………………………………………………………… 92

2.6. Компонент для выдачи подсказок Tooltip………………………………………………………………………… 97

2.7. Использование атрибута href в шаблонах Django для создания ссылок
на URL-адреса…………………………………………………………………………………………………………………….. 98

2.7.1. Ссылки на внешние URL-адреса……………………………………………………………………………… 99

2.7.2. Ссылки на внутренние URL-адреса………………………………………………………………………. 101

2.7.3. Ссылки на внутренние динамичные URL-адреса………………………………………………… 103

2.7.4. Использование атрибута href для обмена параметрами между шаблонами и представлениями     108

2.8. Всплывающие модальные окна………………………………………………………………………………………. 115

2.8.1. Простое модальное окно………………………………………………………………………………………… 119

2.8.2. Модальное окно с полосой прокрутки…………………………………………………………………. 121

2.8.3. Широкое модальное окно………………………………………………………………………………………. 124

2.9. Компонент Bootstrap Accordion («Аккордеон»)……………………………………………………………… 126

2.9.1. Класс accordion………………………………………………………………………………………………………. 126

2.9.2. Класс accordion-flush……………………………………………………………………………………………… 130

2.10. Компонент Bootstrap card («Карточки»)………………………………………………………………………. 134

2.10.1. Карточка с параметрами по умолчанию……………………………………………………………. 134

2.10.2. Карточка с параметрами цвета…………………………………………………………………………… 135

2.10.3. Группы карточек…………………………………………………………………………………………………… 138

2.11. Компонент Bootstrap Carousel («Карусель»)……………………………………………………………….. 140

2.11.1. Статичная карусель с фиксированным контентом……………………………………………. 140

2.12. Краткие итоги………………………………………………………………………………………………………………….. 145

Глава 3. Динамичные элементы Bootstrap в шаблонах Django……………… 147

3.1. Динамичный «Аккордеон» с заполнением вкладок через административную
панель Django……………………………………………………………………………………………………………………. 147

3.2. Динамичный аккордеон с заполнением вкладок через интерфейс пользователя……….. 151

3.2.1. Программные модули для создания динамичных элементов «Аккордеон»………. 156

3.2.2. Модули для вывода динамичных аккордеонов на страницы сайта………………….. 168

3.2.3. Пример создания динамичного аккордеона через интерфейс пользователя…….. 174

3.2.4. Пример вывода динамичного аккордеона на страницу сайта…………………………… 177

3.3. Динамичные карточки с заполнением контента через административную панель…… 181

3.4. Динамичные карточки с заполнением контента через интерфейс пользователя……….. 186

3.4.1. Программные модули для создания динамичных карточек……………………………….. 190

3.4.2. Пример формирования динамичных карточек через интерфейс пользователя… 198

3.4.3. Модули для вывода динамичных карточек на страницы сайта………………………… 200

3.4.4. Пример отображения динамичных карточек на страницах сайта…………………….. 205

3.5. Динамичная карусель с заполнением контента через административную панель……. 207

3.6. Динамичная карусель с заполнением контента через интерфейс пользователя………… 212

3.6.1. Программные модули для создания слайдов динамичной карусели………………… 214

3.6.2. Пример формирования слайдов динамичной карусели через интерфейс пользователя      221

3.6.3. Модули для вывода динамичных каруселей на страницы сайта………………………. 222

3.6.4. Примеры отображения динамичных каруселей на страницах сайта……………….. 225

3.7. Краткие итоги……………………………………………………………………………………………………………………. 226

Глава 4. Древовидные структуры в шаблонах Django………………………….. 227

4.1. Использование Django-mptt для создания древовидных структур………………………………. 227

4.2. Формирование дерева категорий продуктов с использованием административной панели Django           231

4.2.1. Отображение статичного дерева категорий продуктов в шаблонах Django……. 233

4.2.2. Отображение динамичного дерева категорий продуктов в шаблонах Django…. 236

4.3. Формирование дерева категорий продуктов с использованием интерфейса пользователя           239

4.3.1. Модель для категорий продуктов…………………………………………………………………………. 240

4.3.2. Модули для отображения дерева категорий продуктов…………………………………….. 241

4.3.3. Модули для добавления корня к дереву категорий продуктов………………………….. 245

4.3.4. Модули для добавления дочерних категорий продуктов…………………………………… 249

4.3.5. Модули для обновления категорий продуктов……………………………………………………. 255

4.3.6. Модули для удаления категорий продуктов………………………………………………………… 256

4.4. Создание списков объектов с фильтрацией через древовидные каталоги………………….. 258

4.4.1. Модель для хранения категорий продуктов………………………………………………………… 258

4.4.2. Модель для хранения сведений о продуктах……………………………………………………….. 260

4.4.3. Форма для ввода сведений о продуктах……………………………………………………………….. 262

4.4.4. Редактор продуктов………………………………………………………………………………………………… 262

4.4.5. Модули для добавления в БД продуктов (товара)………………………………………………. 268

4.4.6. Модули для обновления сведений о продуктах…………………………………………………… 271

4.4.7. Модули для удаления продукта из БД…………………………………………………………………. 273

4.4.8. Модули для показа подробностей о продуктах………………………………………………….. 274

4.5. Фильтрация сведений о продуктах с использованием статичного древовидного каталога категорий продуктов 276

4.6. Фильтрация сведений о продуктах с использованием динамичного древовидного каталога категорий продуктов     284

4.7. Создание древовидных меню с использованием плагина megamenu-js……………………… 293

4.7.1. Плагин megamenu-js: подготовка к работе………………………………………………………….. 293

4.7.2. Создание мегаменю на основе плагина megamenu-js…………………………………………. 295

4.8. Фильтрация продуктов с использованием панели инструментов и древовидного каталога категорий     300

4.9. Краткие итоги……………………………………………………………………………………………………………………. 314

Глава 5. Библиотека HTMX: модальные окна для ввода
и корректировки данных……………………………………………………………………… 315

5.1. Библиотека HTMX……………………………………………………………………………………………………………. 315

5.2. Ввод и редактирования сведений о клиентах сайта с модальными окнами
на основе библиотеки HTMX…………………………………………………………………………………………… 317

5.2.1. Модель и форма для ввода данных………………………………………………………………………. 317

5.2.2. Модули для создания редактора списка клиентов……………………………………………… 319

5.2.3. Модули для добавления клиентов в БД………………………………………………………………… 325

5.2.4. Программируем кнопку Изменить — для корректировки в БД сведений о клиентах……….. 327

5.2.5. Программируем кнопку Удалить — для удаления из БД сведений
о клиентах…………………………………………………………………………………………………………………………. 328

5.2.6. Программируем модули для показа подробных сведений о клиентах……………… 330

5.2.7. Испытание программных модулей для редактирования сведений
о клиентах в модальных окнах……………………………………………………………………………………….. 332

5.3. Краткие итоги……………………………………………………………………………………………………………………. 338

Глава 6. Интернет-магазин…………………………………………………………………… 339

6.1. Обмен данными между представлениями и шаблонами……………………………………………….. 340

6.1.1. Обмен данными через сессии…………………………………………………………………………………. 340

6.1.2. Обмен данными через контекстный процессор……………………………………………………. 341

6.2. Модели для корзины и заказов клиентов магазина электронной торговли………………… 342

6.3. Контекстный процессор для магазина электронной торговли…………………………………….. 344

6.4. Создаем магазин пользователя……………………………………………………………………………………….. 347

6.4.1. Вывод категорий продуктов в левой боковой панели магазина
(дерево свернуто)……………………………………………………………………………………………………………… 350

6.4.2. Проверка работы модулей магазина пользователя с фильтрацией данных по свернутому дереву категорий продуктов………………………………………………………………………………………………………………………….. 357

6.4.3. Вывод категорий продуктов в левой боковой панели магазина
(дерево раскрыто)…………………………………………………………………………………………………………….. 361

6.4.4. Проверка работы модулей магазина пользователя с фильтрацией данных по раскрытому дереву категорий продуктов………………………………………………………………………………………………………………………….. 364

6.4.5. Вывод категорий продуктов в центральной панели в виде мегаменю………………. 368

6.4.6. Проверка работы модулей магазина пользователя с фильтрацией данных по дереву категорий продуктов в виде мегаменю…………………………………………………………………………………………………………………………… 371

6.5. Модули формирования корзины (предварительного заказа)……………………………………….. 375

6.5.1. Добавление продуктов (товаров) в корзину…………………………………………………………. 375

6.5.2. Вывод содержимого корзины (предварительного заказа)………………………………….. 378

6.5.3. Корректировка количества товара в корзине………………………………………………………. 382

6.5.4. Удаление товара из корзины…………………………………………………………………………………. 387

6.5.5. Формирование заказа для оплаты на основе набора продуктов,
помещенных в корзину…………………………………………………………………………………………………….. 389

6.5.6. Удаление корзины или активного заказа……………………………………………………………… 395

6.5.7. Проверка работы модулей для перевода корзины в предварительный заказ…… 397

6.5.8. Интеграция интернет-магазина с платежной платформой Robokassa………………. 402

6.5.9. Обработка сбоя оплаты заказа пластиковой картой………………………………………….. 406

6.5.10. Обработка успешной оплаты заказа банковской картой…………………………………. 407

6.5.11. Обработка реальной оплаты заказа банковской картой на платежной платформе Robokassa     409

6.6. Проверка работы модулей оплаты предварительного заказа……………………………………… 410

6.7. Модули для показа оплаченных заказов (покупок)………………………………………………………. 414

6.8. Проверка работы модулей для показа оплаченных заказов (покупок)……………………….. 418

6.9. Краткие итоги……………………………………………………………………………………………………………………. 420

Глава 7. Полезные советы……………………………………………………………………. 421

7.1. Показываем на сайте документ PDF……………………………………………………………………………….. 421

7.1.1. Создание документа в формате PDF……………………………………………………………………… 422

7.1.2. Вывод документа формата PDF из представления………………………………………………. 424

7.1.3. Вывод документа формата PDF из шаблона Django…………………………………………… 426

7.1.4. Вывод PDF-документа в формате флеш-анимации……………………………………………… 428

7.2. Переводим страницы сайта на другие языки…………………………………………………………………. 434

7.3. Отправляем с сайта почтовые сообщения……………………………………………………………………… 437

7.3.1. Регистрация в почтовом сервисе Timeweb……………………………………………………………. 438

7.3.2. Программные модули для отправки почтовых сообщений………………………………… 440

7.3.3. Проверка работы модулей отправки почтовых сообщений……………………………….. 443

7.4. Используем скрипты в шаблонах Django……………………………………………………………………….. 445

7.4.1. Скрипты для придания страницам сайта новогоднего стиля…………………………….. 446

7.4.2. Скрипты для анимации кнопок……………………………………………………………………………… 453

7.5. Используем фреймворк PyScript в шаблонах Django…………………………………………………….. 456

7.5.1. PyScript: отображение в шаблоне Django содержимого символьной переменной и списка                457

7.5.2. PyScript: импорт дополнительных библиотек, создание функции
и выполнение обращений к ним………………………………………………………………………………………. 459

7.5.3. PyScript: работа с пакетами NumPy и pandas………………………………………………………. 461

7.5.4. PyScript: работа с внешними библиотеками для обработки и визуализации данных           463

7.6. Используем пакет Brython для создания программ на Python для HTML-страниц……. 466

7.6.1. Brython: вывод на HTML-страницу обычной символьной строки…………………….. 467

7.6.2. Brython: игра «Змейка» (создание окон, функций и обращений к ним)……………… 468

7.7. Откатываем миграцию……………………………………………………………………………………………………… 474

7.8. Краткие итоги……………………………………………………………………………………………………………………. 475

Глава 8. Визуализация данных в Django………………………………………………. 477

8.1. Визуализация данных с библиотекой plotly.py: двумерная графика (2D)…………………… 477

8.1.1. Создание статичных графиков (одна линия)……………………………………………………….. 481

8.1.2. Создание статичных графиков (несколько линий)………………………………………………. 484

8.1.3. Отображение двух графиков в одном окне макета………………………………………………. 487

8.1.4. Отображение четырех графиков в одном окне макета………………………………………… 489

8.1.5. Создание 2D-диаграммы рассеяния……………………………………………………………………… 492

8.1.6. Создание круговой диаграммы……………………………………………………………………………… 495

8.1.7. Создание столбчатой гистограммы………………………………………………………………………. 497

8.1.8. Создание столбчатой гистограммы и сглаживающей кривой……………………………. 500

8.1.9. Создание графиков с тепловой картой…………………………………………………………………. 502

8.1.10. Создание пузырьковой диаграммы…………………………………………………………………….. 505

8.1.11. Пузырьковая диаграмма с цветными маркерами………………………………………………. 507

8.1.12. Пузырьковая диаграмма с масштабируемыми маркерами………………………………. 509

8.1.13. Пузырьковая диаграмма с поясняющим текстом на маркерах………………………… 512

8.1.14. Пузырьковая диаграмма с тепловой картой………………………………………………………. 514

8.1.15. Отображение статичных элементов на географических картах……………………… 516

8.2. Визуализация данных с библиотекой plotly.py: трехмерная графика (3D)…………………. 520

8.2.1. Создание 3D-графика линии по точкам………………………………………………………………… 520

8.2.2. Создание 3D-графика с указанием параметров линии……………………………………….. 522

8.2.3. Создание 3D-графика плавной витой линии………………………………………………………… 525

8.2.4. Создание 3D-графика линии с ключевыми точками……………………………………………. 527

8.2.5. Создание 3D-графика плоской поверхности………………………………………………………… 530

8.2.6. Создание 3D-графика изогнутой поверхности с использованием функций………. 533

8.2.7. Создание 3D-графика изогнутой поверхности с контурами
по вертикальной оси…………………………………………………………………………………………………………. 536

8.2.8. Создание 3D-графика поверхности с контурами по всем осям………………………….. 539

8.2.9. Создание 3D-графика поверхности с указанием параметров сцены и положения камеры 542

8.2.10. Создание 3D-графика поверхности с контурной сеткой…………………………………… 546

8.2.11. Создание 3D-диаграммы рассеяния точек…………………………………………………………. 549

8.3. Визуализация интерактивных графиков с библиотекой plotly.py………………………………… 551

8.3.1. Создание интерактивного 2D-графика со слайдером…………………………………………. 552

8.3.2. Комбинирование интерактивного графика с анимированными
изображениями…………………………………………………………………………………………………………………. 556

8.3.3. Вывод двух интерактивных графиков в одну координатную сетку…………………… 562

8.3.4. Вывод статичных и интерактивных графиков в одну координатную сетку……… 567

8.3.5. Анимация графиков с исчезновением элементов…………………………………………………. 571

8.3.6. Анимация графиков с появлением элементов………………………………………………………. 576

8.3.7. Анимация графиков с использованием фреймов и кнопок………………………………….. 583

8.3.8. Анимация графиков с использованием фреймов, кнопок и слайдера………………… 587

8.3.9. Анимация пузырьковой диаграммы………………………………………………………………………. 591

8.3.10. Анимация объемных 3D-срезов на примере снимков МРТ……………………………….. 598

8.3.11. Географические карты с анимацией данных пользовательских форм……………. 602

8.3.12. Географические карты с анимацией данных кнопками и слайдером……………… 608

8.4. Краткие итоги……………………………………………………………………………………………………………………. 612

Глава 9. Визуализация данных в Django с анимацией на JavaScript…….. 613

9.1. Включение JavaScript в шаблон Django………………………………………………………………………….. 613

9.1.1. Анимация диаграмм формата 2D………………………………………………………………………….. 614

Подключение библиотеки plotly.js………………………………………………………………………… 620

Тег <style>………………………………………………………………………………………………………………. 620

Теги для визуализации объектов…………………………………………………………………………… 620

Тег для кода на языке Java…………………………………………………………………………………….. 621

9.1.2. Анимация трехмерной диаграммы формата 3D…………………………………………………… 625

Подключение библиотеки plotly.js………………………………………………………………………… 631

Тег <style>………………………………………………………………………………………………………………. 631

Теги для визуализации объектов…………………………………………………………………………… 631

Тег для кода на языке Java…………………………………………………………………………………….. 632

9.2. Краткие итоги……………………………………………………………………………………………………………………. 635

Послесловие…………………………………………………………………………………………. 637

Приложение 1. Порядок работы с интерактивной цифровой платформой 639

Просмотр карточек с загруженными книгами………………………………………………………………………. 640

Просмотр вкладок цифровой книги………………………………………………………………………………………… 643

Вкладка Текст PDF………………………………………………………………………………………………………….. 645

Вкладка Листинги……………………………………………………………………………………………………………. 646

Вкладка Показ примеров…………………………………………………………………………………………………. 647

Приложение 2. Регистрация интернет-магазина на сайте платформы Robokassa  651

Предметный указатель…………………………………………………………………………. 655

Предисловие…………………………………………………………………………………………….. 9

Глава 1. Инструментальные средства для разработки веб-приложений…. 15

1.1. Интерпретатор Python………………………………………………………………………………………………………… 16

1.1.1. Установка Python в Windows…………………………………………………………………………………… 17

1.1.2. Установка Python в Linux………………………………………………………………………………………… 20

1.1.3. Проверка интерпретатора Python…………………………………………………………………………… 20

1.2. Интерактивная среда разработки программного кода PyCharm…………………………………… 21

1.2.1. Установка PyCharm в Windows……………………………………………………………………………….. 22

1.2.2. Установка PyCharm в Linux…………………………………………………………………………………….. 24

1.2.3. Проверка PyCharm……………………………………………………………………………………………………. 25

1.3. Установка пакетов в Python с использованием менеджера пакетов pip………………………… 28

1.3.1. Репозиторий пакетов программных средств PyPI…………………………………………………. 28

1.3.2. pip — менеджер пакетов в Python……………………………………………………………………………. 29

1.3.3. Использование менеджера пакетов pip…………………………………………………………………… 30

1.4. Фреймворк Django для разработки веб-приложений………………………………………………………. 31

1.5. Менеджер баз данных SQLiteStudio………………………………………………………………………………….. 35

1.6. Краткие итоги……………………………………………………………………………………………………………………… 37

Глава 2. Веб-технологии и базовые сведения об HTML………………………….. 39

2.1. Базовые сведения о веб-технологиях………………………………………………………………………………… 39

2.1.1. Технологии клиентского программирования…………………………………………………………. 41

2.1.2. Технологии серверного программирования…………………………………………………………… 42

2.1.3. Фреймворки Django и Bootstrap для разработки веб-приложений………………………. 43

2.2. Базовые сведения о HTML…………………………………………………………………………………………………. 45

2.2.1. Теги для представления текста на HTML-страницах…………………………………………… 47

2.2.2. Списки……………………………………………………………………………………………………………………….. 49

2.2.3. Таблицы…………………………………………………………………………………………………………………….. 51

2.2.4. Тег div………………………………………………………………………………………………………………………… 55

2.2.5. Гиперссылки……………………………………………………………………………………………………………… 56

2.3. Каскадные таблицы стилей (CSS)……………………………………………………………………………………… 56

2.4. Возможности использования JavaScript……………………………………………………………………………. 58

2.5. Краткие итоги……………………………………………………………………………………………………………………… 60

Глава 3. Макетирование HTML-страниц с фреймворком Bootstrap……….. 61

3.1. Технологические возможности фреймворка Bootstrap……………………………………………………. 61

3.2. Получение файлов фреймворка Bootstrap………………………………………………………………………… 63

3.3. Контейнеры и сетка Bootstrap……………………………………………………………………………………………. 66

3.3.1. Адаптивные контейнеры………………………………………………………………………………………….. 67

3.3.2. Ряды или строки (row)………………………………………………………………………………………………. 69

3.3.3. Адаптивные блоки (col)……………………………………………………………………………………………. 69

3.3.4. Адаптивные блоки без указания числа колонок……………………………………………………. 71

3.3.5. Расположение адаптивных блоков…………………………………………………………………………. 71

3.4. Верстка макета HTML-страниц………………………………………………………………………………………… 72

3.5. Подключение файлов фреймворка Bootstrap к проекту………………………………………………….. 75

3.6. Задание цвета элементам HTML-страниц……………………………………………………………………….. 77

3.7. Задание отступов элементам макета HTML-страниц…………………………………………………….. 80

3.8. Выравнивание содержимого в адаптивных блоках HTML-страниц……………………………… 84

3.9. Обозначение границ элементов макета HTML-страниц…………………………………………………. 86

3.10. Пример использования адаптивных контейнеров…………………………………………………………. 93

3.11. Таблицы Bootstrap……………………………………………………………………………………………………………. 97

3.12. Краткие итоги………………………………………………………………………………………………………………….. 102

Глава 4. Знакомимся с фреймворком Django………………………………………… 103

4.1. Общие представления о Django……………………………………………………………………………………….. 103

4.2. Структура приложений на Django………………………………………………………………………………….. 105

4.3. Первый проект на Django…………………………………………………………………………………………………. 107

4.4. Первое приложение на Django…………………………………………………………………………………………. 115

4.5. Краткие итоги……………………………………………………………………………………………………………………. 121

Глава 5. Представления и маршрутизация…………………………………………… 123

5.1. Обработка запросов пользователей……………………………………………………………………………….. 123

5.2. Маршрутизация запросов пользователей в функциях path и re_path…………………………. 126

5.3. Очередность маршрутов………………………………………………………………………………………………….. 129

5.4. Основные элементы синтаксиса регулярных выражений…………………………………………….. 129

5.5. Параметры представлений………………………………………………………………………………………………. 130

5.5.1. Определение параметров через функцию re_path()…………………………………………….. 130

5.5.2. Определение параметров через функцию path()………………………………………………….. 134

5.5.3. Определение параметров по умолчанию в функции path()………………………………… 136

5.6. Параметры строки запроса пользователя………………………………………………………………………. 137

5.7. Переадресация и отправка пользователю статусных кодов………………………………………… 140

5.7.1. Переадресация………………………………………………………………………………………………………… 140

5.7.2. Отправка пользователю статусных кодов…………………………………………………………… 142

5.8. Краткие итоги……………………………………………………………………………………………………………………. 144

Глава 6. Шаблоны в Django…………………………………………………………………. 145

6.1. Создание простейшего шаблона…………………………………………………………………………………….. 145

6.2. Создание каталога для шаблонов приложений…………………………………………………………….. 152

6.3. Класс TemplateResponse…………………………………………………………………………………………………… 155

6.4. Язык шаблонов (DTL)……………………………………………………………………………………………………….. 156

6.5. Передача данных в шаблоны через переменные…………………………………………………………… 158

6.6. Передача в шаблон сложных данных……………………………………………………………………………. 161

6.7. Использование тегов в шаблонах Django……………………………………………………………………….. 163

6.8. Статические файлы в шаблонах Django…………………………………………………………………………. 172

6.8.1. Основы каскадных таблиц стилей………………………………………………………………………… 172

6.8.2. Использование статических файлов в шаблонах Django…………………………………… 176

6.9. Использование класса TemplateView для вызова шаблонов HTML-страниц……………… 182

6.10. Наследование шаблонов……………………………………………………………………………………………….. 187

6.11. Создание многостраничного сайта на основе шаблонов Django………………………………. 190

6.12. Формирование URL-адресов в шаблонах Django……………………………………………………….. 197

6.13. Интеграция шаблонов Django с фреймворком Bootstrap…………………………………………….. 200

6.14. Использование специальных тегов в шаблонах Django……………………………………………… 203

6.14.1. Тег для вывода текущей даты и времени……………………………………………………………. 203

6.14.2. Теги Bootstrap для вывода информации в адаптивных блоках……………………….. 205

6.14.3. Теги Bootstrap и Django для представления списков в виде таблицы……………… 207

6.15. Краткие итоги………………………………………………………………………………………………………………….. 209

Глава 7. Формы……………………………………………………………………………………. 211

7.1. Процесс управления формами в Django………………………………………………………………………….. 211

7.2. Определение форм…………………………………………………………………………………………………………….. 214

7.3. Использование полей в формах Django………………………………………………………………………….. 220

7.3.1. Настройка среды для изучения полей разных типов………………………………………….. 220

7.3.2. Типы полей в формах Django и их общие параметры…………………………………………. 222

7.3.3. Поле BooleanField для выбора решения: да/нет…………………………………………………. 225

7.3.4. Поле CharField для ввода текста………………………………………………………………………….. 226

7.3.5. Поле ChoiceField для выбора данных из списка…………………………………………………. 228

7.3.6. Поле DateField для ввода даты……………………………………………………………………………… 229

7.3.7. Поле DateTimeField для ввода даты и времени……………………………………………………. 230

7.3.8. Поле DecimalField для ввода десятичных чисел…………………………………………………. 230

7.3.9. Поле DurationField для ввода промежутка времени…………………………………………… 232

7.3.10. Поле EmailField для ввода электронного адреса………………………………………………. 233

7.3.11. Поле FileField для выбора файлов……………………………………………………………………… 234

7.3.12. Поле FilePathField для создания списка файлов………………………………………………. 235

7.3.13. Поле FloatField для ввода чисел с плавающей точкой…………………………………….. 238

7.3.14. Поле GenericIPAddressField для ввода IP-адреса……………………………………………… 238

7.3.15. Поле ImageField для выбора файлов изображений…………………………………………… 239

7.3.16. Поле IntegerField для ввода целых чисел…………………………………………………………… 240

7.3.17. Поле JsonField для данных формата JSON………………………………………………………… 241

7.3.18. Поле MultipleChoiceField для выбора данных из списка…………………………………. 243

7.3.19. Поле NullBooleanField для выбора решения: да/нет………………………………………… 244

7.3.20. Поле RegexField для ввода текста………………………………………………………………………. 245

7.3.21. Поле SlugField для ввода текста…………………………………………………………………………. 246

7.3.22. Поле TimeField для ввода времени……………………………………………………………………… 246

7.3.23. Поле TypedChoiceField для выбора данных из списка……………………………………… 247

7.3.24. Поле TypedMultipleChoiceField для выбора данных из списка……………………….. 248

7.3.25. Поле URLField для ввода универсального указателя ресурса (URL)……………… 250

7.3.26. Поле UUIDField для ввода универсального уникального идентификатора UUID 251

7.4. Встроенные классы для создания сложных полей………………………………………………………… 252

7.4.1. Поле ComboField для ввода текста с проверкой соответствия заданным форматам……….. 252

7.4.2. Поле MultiValueField для создания сложных компоновок из нескольких полей 253

7.4.3. Поле SplitDateTimeField для раздельного ввода даты и времени………………………. 254

7.5. Настройка формы и ее полей…………………………………………………………………………………………… 255

7.5.1. Изменение внешнего вида поля с помощью параметра widget………………………….. 255

7.5.2. Задание начальных значений полей с помощью свойства initial……………………… 257

7.5.3. Задание порядка следования полей на форме…………………………………………………….. 258

7.5.4. Задание подсказок к полям формы……………………………………………………………………….. 259

7.5.5. Настройки вида формы………………………………………………………………………………………….. 260

7.5.6. Проверка (валидация) данных………………………………………………………………………………. 262

7.5.7. Детальная настройка полей формы……………………………………………………………………… 267

7.5.8. Присвоение стилей полям формы………………………………………………………………………….. 270

7.6. Использование в формах POST-запросов для отправки данных на сервер…………………. 275

7.7. Краткие итоги……………………………………………………………………………………………………………………. 278

Глава 8. Модели данных Django…………………………………………………………… 279

8.1. Создание моделей и миграции базы данных………………………………………………………………….. 280

8.2. Типы полей в модели данных Django……………………………………………………………………………… 284

8.3. Манипуляция с данными в Django на основе CRUD……………………………………………………… 287

8.3.1. Добавление данных в БД……………………………………………………………………………………….. 287

8.3.2. Чтение данных из БД……………………………………………………………………………………………… 288

Метод get()……………………………………………………………………………………………………………… 288

Метод get_or_create()……………………………………………………………………………………………. 288

Метод all()………………………………………………………………………………………………………………. 289

Метод count()………………………………………………………………………………………………………….. 289

Метод filter()…………………………………………………………………………………………………………… 289

Метод exclude()………………………………………………………………………………………………………. 289

Метод in_bulk()………………………………………………………………………………………………………. 289

8.3.3. Обновление данных в БД……………………………………………………………………………………….. 290

8.3.4. Удаление данных из БД…………………………………………………………………………………………. 291

8.3.5. Просмотр строки SQL-запроса к базе данных…………………………………………………….. 291

8.4. Общие принципы взаимодействия форм с моделями данных и шаблонами Django…… 292

8.4.1. Создание форм на основе классов Form и ModelForm………………………………………… 293

8.4.2. Связывание форм с представлениями (view)………………………………………………………… 294

8.4.3. Связывание представлений (view) с шаблонами форм……………………………………….. 295

8.5. Организация связей между таблицами в БД через модели данных……………………………… 296

8.5.1. Организация связей между таблицами «один ко многим»………………………………….. 296

8.5.2. Организация связей между таблицами «многие ко многим»………………………………. 301

8.5.3. Организация связей между таблицами «один к одному»……………………………………. 305

8.6. Пример работы с объектами модели данных (чтение и запись информации в БД)……. 308

8.7. Пример работы с объектами модели данных: редактирование и удаление информации из БД   315

8.8. Работа с изображениями и файлами в формах Django………………………………………………….. 321

8.8.1. Загрузка изображений……………………………………………………………………………………………. 321

8.8.2. Загрузка и отображение файлов PDF в формах Django………………………………………. 332

8.8.3. Загрузка и отображение видеофайлов в формах Django……………………………………. 339

8.8.4. Загрузка и озвучивание аудиофайлов в формах Django…………………………………….. 348

8.9. Краткие итоги……………………………………………………………………………………………………………………. 356

Глава 9. Пример создания веб-сайта на Django…………………………………….. 357

9.1. Создание структуры сайта при помощи Django……………………………………………………………. 357

9.2. Установка дополнительных пакетов и настройка параметров сайта «Мир книг»…….. 366

9.3. Разработка структуры моделей данных сайта «Мир книг»………………………………………….. 370

9.4. Основные элементы моделей данных в Django……………………………………………………………… 373

9.4.1. Поля и их аргументы в моделях данных………………………………………………………………. 373

9.4.2. Метаданные в моделях Django……………………………………………………………………………… 376

9.4.3. Методы в моделях Django……………………………………………………………………………………… 377

9.4.4. Методы работы с данными в моделях Django…………………………………………………….. 377

9.5. Формирование моделей данных для сайта «Мир книг»………………………………………………… 379

9.5.1. Модель для хранения жанров книг……………………………………………………………………….. 380

9.5.2. Модель для хранения языков книг………………………………………………………………………… 381

9.5.3. Модель для хранения наименования издательства…………………………………………….. 381

9.5.4. Модель для хранения авторов книг………………………………………………………………………. 382

9.5.5. Модель для хранения книг…………………………………………………………………………………….. 382

9.5.6. Модель для хранения отдельных экземпляров книг и их статуса……………………… 387

9.6. Административная панель Django Admin………………………………………………………………………. 391

9.6.1. Регистрация моделей данных в Django Admin…………………………………………………….. 391

9.6.2. Работа с данными в Django Admin……………………………………………………………………….. 392

9.7. Изменение конфигурации административной панели Django………………………………………. 402

9.7.1. Регистрация класса ModelAdmin…………………………………………………………………………… 403

9.7.2. Настройка отображения списков………………………………………………………………………….. 404

9.7.3. Добавление фильтров к спискам…………………………………………………………………………… 407

9.7.4. Формирование макета с подробным представлением элемента списка…………… 409

9.7.5. Разделение страницы на секции с отображением связанной информации……….. 411

9.7.6. Встроенное редактирование связанных записей………………………………………………… 412

9.8. Работа с файлами и изображениями в административной панели Django…………………. 416

9.9. Краткие итоги……………………………………………………………………………………………………………………. 422

Глава 10. Пример создания веб-интерфейса для пользователей сайта
«Мир книг»………………………………………………………………………………………….. 423

10.1. Последовательность создания пользовательских страниц сайта «Мир книг»…………. 423

10.2. Определение перечня и URL-адресов страниц сайта «Мир книг»……………………………… 424

10.3. Создание главной страницы сайта «Мир книг»…………………………………………………………… 425

10.3.1. Создание URL-преобразования………………………………………………………………………… 425

10.3.2. Создание упрощенного представления (view)…………………………………………………. 427

10.3.3. Изменение представления (view) главной страницы сайта…………………………….. 432

10.3.4. Модификация шаблона главной страницы сайта «Мир книг»………………………. 433

10.4. Создание страницы со списком книг на основе класса ListView………………………………… 438

10.5. Создание страницы с детальной информацией о книге на основе класса DetailView 443

10.6. Постраничный вывод большого числа записей из БД (класс Paginator)………………….. 448

10.7. Создание страницы со списком авторов на основе класса ListView………………………….. 453

10.8. Создание страницы с детальной информацией об авторе книги на основе
класса DetailView……………………………………………………………………………………………………………. 456

10.9. Создание страниц О компании и Контакты…………………………………………………………………. 460

10.10. Краткие итоги……………………………………………………………………………………………………………….. 468

Глава 11. Расширение возможностей администрирования сайта
«Мир книг» и создание пользовательских форм…………………………………… 469

11.1. Сессии в Django………………………………………………………………………………………………………………. 470

11.2. Аутентификация и авторизация пользователей в Django……………………………………………. 474

11.2.1. Немного об аутентификации пользователей в Django……………………………………. 474

11.2.2. Создание отдельных пользователей и групп пользователей…………………………. 475

11.2.3. Создание страницы регистрации пользователя при входе на сайт………………. 481

11.2.4. Создание страницы для сброса пароля пользователя……………………………………. 486

11.3. Настройка почты для отправки сообщения о смене пароля на реальный электронный адрес  494

11.4. Поверка подлинности входа пользователя в систему…………………………………………………. 499

11.5. Формирование страниц сайта для создания заказов на книги…………………………………… 502

11.6. Работа с формами…………………………………………………………………………………………………………… 512

11.6.1. Краткий обзор форм в Django……………………………………………………………………………. 512

11.6.2. Управление формами в Django………………………………………………………………………….. 514

11.6.3. Форма для ввода и обновления информации об авторах книг на основе класса Form() 515

11.6.4. Форма для обновления информации об авторах книг на основе класса ModelForm()     527

11.6.5. Форма для ввода и обновления информации о книгах на основе класса ModelForm()    533

11.7. Краткие итоги………………………………………………………………………………………………………………….. 545

Глава 12. Публикация сайта в сети Интернет………………………………………. 547

12.1. Подготовка инфраструктуры сайта перед публикацией в сети Интернет………………… 547

12.1.1. Окружение развертывания сайта в сети Интернет………………………………………….. 548

12.1.2. Выбор хостинг-провайдера………………………………………………………………………………. 549

12.2. Подготовка веб-сайта к публикации…………………………………………………………………………….. 550

12.3. Размещение веб-сайта на хостинге timeweb…………………………………………………………………. 552

12.3.1. Регистрация аккаунта пользователя………………………………………………………………… 552

12.3.2. Административная панель хостинга timeweb………………………………………………….. 555

12.3.3. Создание на сервере папки для нового сайта………………………………………………….. 559

12.3.4. Создание на сервере виртуального окружения и приложения Django для нового сайта               567

12.3.5. Перенос сайта с рабочего компьютера на удаленный сервер……………………….. 574

12.3.6. Смена временного доменного имени на постоянное………………………………………. 579

12.4. Краткие итоги………………………………………………………………………………………………………………….. 581

Глава 13. Приложения Django и MySQL………………………………………………. 583

13.1. Подготовка инфраструктуры сайта для перехода на MySQL……………………………………. 583

13.2. Инсталляция сервера MySQL………………………………………………………………………………………… 584

13.3. Создание базы данных…………………………………………………………………………………………………… 584

13.4. Создание проекта Django с базой данных MySQL на локальном компьютере………… 588

13.5. Создание инфраструктуры на удаленном сервере для сайта с базой данных на MySQL……….. 591

13.6. Создание базы данных MySQL на удаленном сервере………………………………………………. 599

13.7. Перенос сайта с локального компьютера на публичный сервер……………………………….. 603

13.8. Краткие итоги………………………………………………………………………………………………………………….. 611

Послесловие…………………………………………………………………………………………. 613

Список источников и литературы………………………………………………………… 614

Приложение. Описание электронного архива………………………………………. 617

Предметный указатель…………………………………………………………………………. 618