Новинка: “Мастер веб-разработки на Python, Django и 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