Мастер веб-разработки на Python, Django и Bootstrap - Постолит А.В.

Author: Постолит А.В.
Tags: программные средства компьютерные технологии программирование язык программирования python веб-разработка
ISBN: 978-5-9775-2056-0
Year: 2025
Similar
Разработка веб-приложений на WordPress
Разработка веб-приложений на Python
Разработка кроссплатформенных мобильных и настольных приложений на Python: Практическое пособие
Django 2.1. Практика создания веб-сайтов на Python
Text
                    

АНАТОЛИЙ ПООТОЛИТ

МАСТЕР

ВЕБ-РАЗРАБ0ТК1Л
на Руйтоп, Щапдо
и ВооЕз1тар

Макетирование НТМС-страниц с использованием
новых элементов ВооОЕгар

Модальные окна в шаблонах О]апдо

и на основе библиотеки НТМХ

Динамичные элементы Воо1з1гар в шаблонах 0]апдо

Древовидные структуры пользовательского интерфейса
с библиотекой 0]апдо-МРТТ

Интернет-магазин с управлением каталогом продуктов
и сменой интерфейса без изменения программного кода

Статичные и интерактивные 20- и ЭО-графшки

с библиотекой Р1оЦу.ру

Анимированные 20- и 30-графики с библиотекой Р1о11у.]з

+ интерактивная цифровая книга
Анатолий Постолит

МАСТЕР

ВЕБ-РАЗРАБ0ТК1Л
на Ру^оп, ЕЦапдо
ш ВооЕзЕгар

Санкт-Петербург
«БХВ-Петербург»
2025
УДК 004.4

ББК 32.973.26-018.2

П63

Постолит А. В.

П63 Мастер веб-разработки на РуЙюп, Ц|ап§о и Воо1§1гар. — СПб.:
БХВ-Петербург, 2025. — 656 с.: ил.

18ВИ 978-5-9775-2056-0

Книга представляет собой практическое руководство по интеграции фреймвор-
ка Воо181гар 5 с шаблонами Э)ап^о для разработки на языке РуШоп современных
и динамичных веб-приложений. Рассматриваются основы макетирования НТМБ-
страниц, создание статичных элементов (кнопки, панели, модальные окна, аккор-
деоны) и разработка динамичных компонентов, управляемых через администра-
тивную панель П)ап§о. Описаны технологии работы с древовидными структурами,
создание модальных окон с использованием библиотеки НТМХ, а также базовые
модули для разработки интернет-магазина, включая корзину и оплату. Приведены
полезные советы по работе с РПР, анимацией, переводами на другие языки и поч-
товыми сообщениями. Отдельное внимание уделено визуализации данных с по-
мощью библиотек Р1о11у.ру и Р1о11у.)8 для создания интерактивных 2П- и ЗП-гра-
фиков.

Книга имеет интерактивный цифровой аналог, позволяющий запускать на вы-
полнение программные модули всех примеров, скачивать листинги программ, а
также смотреть цветные иллюстрации.

Для профессиональных программистов

УДК 004.4

ББК 32.973.26-018.2

Группа подготовки издания:

Руководитель проекта
Зав. редакцией
Редактор
Компьютерная верстка
Дизайн обложки

Евгений Рыбаков
Людмила Гауль
Григорий Добин
Ольги Сергиенко
Зои Канторович

"БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20

18ВХ 978-5-9775-2056-0

© ООО "БХВ", 2025

© Оформление. ООО "БХВ-Петербург", 2025
Оглавление

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

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

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

Глава 1. Макетирование НТМЬ-страниц с фреймворком ВооШгар 5................15

1.1.	Что нового в Воо1з1гар 5?.............................................16

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

Библиотека ]Риегу больше не является зависимостью.................16

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

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

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

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

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

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

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

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

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

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

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

О//сапха8.........................................................20

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

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

1.2.	Получение файлов фреймворка Воо!з1гар..................................21

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

1.2.2.	Скачивание файлов Воо1з!гар.....................................24

1.3.	Контейнеры и сетка Воо!з1гар..........................................24

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

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

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

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

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

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

1.3.5.	Расположение адаптивных блоков..................................30
1.4.	Верстка макета НТМЬ-страниц...........................................30

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

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

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

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

Смещение с помощью классов о//8е1.................................32

Смещение с помощью классов таг&п..................................33

1.5.	Простейшая НТМЬ-страница с подключением фреймворка Воо1з1гар..........36

1.6.	Задание цвета элементам НТМЬ-страниц..................................38

1.7.	Задание отступов элементам макета НТМЬ-страниц........................41

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

1.9.	Обозначение границ элементов макета НТМЬ-страниц......................47

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

1.11.	Таблицы Воо1з1гар.....................................................56

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

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

Глава 2. Статичные элементы ВооШгар в шаблонах Б]ап§о......................71

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

2.2.	Тег теките для встраивания шаблонов О)агщо............................75

2.3.	Подключение значков к элементам Воо181гар.............................77

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

2.4.1.	Традиционные горизонтальные вкладки Так8 фреймворка ВооНТгар....81

2.4.2.	Традиционные вертикальные вкладки ТаЬ8 фреймворка ВооНТгар......85

2.4.3.	Горизонтальные вкладки ТаЪ8 с использованием тега О)ап§о
для организации циклов.................................................88

2.4.4.	Вертикальные кнопки для навигации по вкладкам ТаЪ8 фреймворка
ВооНТгар...............................................................90

2.5.	Компонент ВооНТгар О/сапха8...........................................92

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

2.7.	Использование атрибута кге/в шаблонах О)ап§о для создания ссылок
на ИКЬ-адреса..............................................................98

2.7.1.	Ссылки на внешние ИКЬ-адреса....................................99

2.7.2.	Ссылки на внутренние ПКГ-адреса................................101

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

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

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

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

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

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

2.9.	Компонент ВооТзТгар АссогсНоп («Аккордеон»)..........................126

2.9.1.	Класс ассогАюп.................................................126

2.9.2.	Класс ассог(Иоп-/1и8к..........................................130

2.10.	Компонент ВооТзТгар саг А («Карточки»)..............................134

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

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

2.10.3.	Группы карточек...............................................138
2.11.	Компонент Воо1з1гар Сагои$е1 («Карусель»)............................140

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

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

Глава 3. Динамичные элементы ВооШгар в шаблонах Б]ап§о.....................147

3.1.	Динамичный «Аккордеон» с заполнением вкладок через административную
панель Ц]ап§о.............................................................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. Древовидные структуры в шаблонах Б]ап§о...........................227

4.1.	Использование Ц]ап§о-тр11 для создания древовидных структур...........227

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

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

4.2.2.	Отображение динамичного дерева категорий продуктов в шаблонах П)ап§о.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.	Создание древовидных меню с использованием плагина ше§ашепи-)8.........293

4.7.1.	Плагин ше§ашепи-)8: подготовка к работе..........................293

4.7.2.	Создание мегаменю на основе плагина ше§ашепи-)8..................295

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

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

Глава 5. Библиотека НТМХ: модальные окна для ввода
и корректировки данных......................................................315

5.1.	Библиотека НТМХ........................................................315

5.2.	Ввод и редактирования сведений о клиентах сайта с модальными окнами
на основе библиотеки НТМХ...................................................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.	Интеграция интернет-магазина с платежной платформой КоЬоказза.....402

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

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

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

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

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

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

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

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

7.1.	Показываем на сайте документ РВЕ........................................421

7.1.1.	Создание документа в формате РОГ..................................422

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

7.1.3.	Вывод документа формата РОЕ из шаблона О)ап§о........................426

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

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

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

7.3.1.	Регистрация в почтовом сервисе ТппедуеЬ...........................438

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

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

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

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

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

7.5.	Используем фреймворк Ру8спр1 в шаблонах Ц]ап§о..........................456

7.5.1.	Ру8спр1: отображение в шаблоне В)ап§о содержимого символьной
переменной и списка.........................................................457

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

7.5.3.	Ру8спр1: работа с пакетами Шт Ру и рапйаз............................461

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

7.6.	Используем пакет ВгуЙтоп для создания программ на РуЙюп для НТМЬ-страниц...466

7.6.1.	ВгуЙтоп: вывод на НТМЬ-страницу обычной символьной строки.........467

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

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

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

Глава 8. Визуализация данных в	Б]ап§о....................................477

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

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

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

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

8.1.5.	Создание	2П-диаграммы рассеяния.................................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.	Визуализация данных с библиотекой р1о!1у.ру: трехмерная графика (ЗБ)..520

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

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

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

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

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

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

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

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

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

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

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

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

8.3.1.	Создание интерактивного 2Б-графика со слайдером.................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.	Анимация объемных ЗЭ-срезов на примере снимков МРТ.............598

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

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

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

Глава 9. Визуализация данных в Б]ап§о с анимацией на 1ауа8спр1................613

9.1.	Включение Зауа8спр1 в шаблон О)ап§о...................................613

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

Подключение библиотеки р1о!1у.) 8.................................620
Тег <$1у1е>.....................................................620

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

Тег для кода на языке Зауа......................................621

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

Подключение библиотеки р1о!1у.]8................................631

Тег <81у1е>.....................................................631

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

Тег для кода на языке Зауа......................................632

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

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

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

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

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

Вкладка Текст РИТ....................................................645

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

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

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

Предметный указатель....................................................655
Предисловие

Специалисты 1Т-технологий уже много лет занимают первые позиции в рейтингах кад-
ровых агентств как представители наиболее востребованных профессий на отечествен-
ном и мировом рынке труда. Постоянная нехватка квалифицированных программистов
дает высокий шанс молодым и целеустремленным новичкам для входа в эту профес-
сию. В ближайшие несколько лет дефицит 1Т-специалистов будет только нарастать, так
как они нужны повсеместно. Если раньше ими интересовались сугубо профильные
компании (разработчики софта и онлайн-платформ), то сейчас квалифицированные
кадры 1Т-профилей требуются практически везде. И речь здесь идет не о дефиците, а
о катастрофическом дефиците. Уже много лет подряд сервис по поиску работы Ыз.ги
фиксирует огромный неудовлетворенный спрос на 1Т-специалистов.

Рассматриваемый в этой книге язык программирования РуЙюп является самым попу-
лярным и востребованным языком программирования в мире по индексу ТЮВЕ, и об-
ласти его применения только расширяются. Используя РуЙюп, можно решать множест-
во научных проблем и задач в области бизнеса. К нему обращаются ученые (математи-
ки, физики, биологи), так как изучить его не слишком сложно. Он используется при
реализации нейронных сетей, для написания веб-сайтов и мобильных приложений.
В целом это универсальный язык, входящий в тройку языков для анализа больших дан-
ных. У РуЙюп много обширных библиотек, которые постоянно обновляют разработчи-
ки из сообщества. Благодаря этому писать код не нужно с нуля, всегда можно найти
готовые фрагменты и отредактировать их под конкретные задачи. Еще одна причина,
по которой следует обратить внимание на язык РуЙюп, — это его использование для
веб-разработки совместно с фреймворками Р]ап§о и ВооЫгар. Здесь Р]ап§о обеспечи-
вает разработку серверной части, а ВооЫгар — клиентской части веб-приложений. На
В)ап§о созданы такие сайты, как УоиТпЬе, ЕасеЬоок, 1п81а§гаш, а ВооЫгар — это дети-
ще компании ТхуЩег.

Перед теми, кто решил освоить специальность веб-программиста, встает непростой
выбор: с чего же нужно начать? Конечно, всегда существует возможность получить
1Т-образование в одном из ведущих технических вузов ранга МГУ, МГТУ им. Н. Бау-
мана, СПбГУ, МФТИ, ИТМО. Но обучение в них обойдется в круглую сумму от 60 до
350 тыс. рублей в год. Существует и более быстрый вариант стать веб-разработчиком
«с нуля», пройдя краткосрочные онлайн-курсы, которые тоже стоят немалых денег.
Однако практикующие программисты уверяют, что самый правильный, а главное,
практически бесплатный способ обучиться веб-программированию — это освоить его
самостоятельно. Так можно не только избежать серьезных расходов, но и получить
только те практические навыки, которые пригодятся в будущей работе.

Эта книга предназначена не для начинающих программистов, а для специалистов
с опытом, которые уже занимались разработкой веб-приложений с использованием
РуЙюп и В)ап§о. Начинающим программистам сначала нужно получить базовые зна-
ния, изучив материалы такой, например, книги, как «РуЙюп, Р]ап§о и ВооЫгар для на-
чинающих»1. Сразу следует отметить, что веб-программирование требует от разработ-
чиков больших знаний, умений и усилий, чем программирование традиционных при-
ложений. Здесь, кроме основного языка, который реализует логику приложения,
необходимо знание структуры НТМЬ-документов, основ работы с базами данных,
принципов взаимодействия удаленных пользователей с веб-приложением.

Книга, как уже отмечено, предназначена для программистов, имеющих практику соз-
дания приложений на РуЙюп, Р]ап§о и ВооЫгар. В ней раскрываются некоторые осо-
бенности Э]ап§о и Воо181гар, которые позволяют создать набор сервисов, обеспечи-
вающих модификацию дизайна и содержания веб-страниц готового сайта без измене-
ния его программного кода. Когда сайт уже выложен на публичный сервер,
администратор сайта (и даже пользователи с правами администратора) через личный
кабинет будут иметь возможность добавлять или удалять элементы интерфейса, менять
дизайн страниц сайта, структуру древовидных каталогов продуктов и услуг, содержи-
мое базы данных, не затрагивая программный код сайта. При разработке такого типа
сайтов вам придется затратить больше усилий на написание программного кода, однако
сопровождать работу готового сайта будет в десятки раз проще.

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

Глава 1 книги посвящена макетированию НТМЬ-страниц с использованием новых эле-
ментов фреймворка Воо181гар 5. В ней рассказывается о наиболее важных и новых ком-
понентах Воо181гар 5. Эти материалы станут основой для разработки программных мо-
дулей, обеспечивающих удаленное управление дизайном шаблонов В)ап§о без измене-
ния программного кода.

В главе 2 книги описываются параметры и способы создания статичных элементов
Воо181гар для шаблонов В)ап§о: управление цветом элементов Воо181гар, применение
тега 1пс1ис1е для встраивания одних шаблонов в другие, использование значков и вкла-
док в шаблонах В)ап§о, а также кнопок и панелей для навигации по сайту. Рассмотрены
особенности использования атрибута ЬгеГ в шаблонах Э)ап^о для создания ссылок на
интернет-адреса (ЦКЬ), создание всплывающих модальных окон. Приведены про-
граммные коды для создания таких статичных компонентов, как аккордеоны, карточки
и карусели.

В главе 3 представлены технологии программирования динамичных элементов Воо1-
81гар для шаблонов П)ап§о. Дизайн и наполнение таких элементов можно менять либо
через административную панель Р]ап§о, либо через специально разработанный интер-
фейс личного кабинета административного персонала сайта. В качестве примеров взя-
ты следующие динамические элементы: аккордеон, карточки, карусели. Эти элементы

1 См. ЬПрз^/ЬЬу.ги/ргоаис^руЩоп-сЦап^о-ьЬооЫгар-сПуа-пасЬтауизЬЫЬ/.
можно удаленно добавлять (удалять) на различные страницы сайта, менять содержимое
элементов, их дизайн (размер, цвет фона, цвета и размеры шрифта, размеры и цвета
рамок и т. и.). Все эти операции допускается делать удаленно через личный кабинет
административного персонала сайта, не затрагивая программный код.

Глава 4 посвящена использованию древовидных структур в шаблонах Р]ап§о на основе
специализированного пакета Р]ап§о-шрй. Древовидные структуры рассматриваются на
примере дерева категорий продуктов (товаров) — наиболее распространенного элемента,
широко применяемого на сайтах интернет-торговли. В главе описываются соответст-
вующие модели и возможности формирования дерева категорий продуктов с использо-
ванием административной панели р)ап§о, приводятся программные коды для форми-
рования дерева категорий продуктов на основе возможностей интерфейса пользовате-
ля, рассматриваются технология и программные модули создания списков объектов, а
также показаны программные модули для фильтрации сведений о продуктах с приме-
нением статичных и динамичных древовидных каталогов категорий продуктов. Приве-
дены примеры создания древовидных меню с использованием плагина ше^ашепи

Глава 5 содержит примеры создания модальных окон при вводе и корректировке дан-
ных с использованием библиотеки НТМХ. В ней приведены примеры добавления, об-
новления и удаления данных из БД с интерфейсными формами в виде модальных окон.
Программный код для создания модальных окон более сложен, чем создание традици-
онных шаблонов Э)ап§о. Однако интерфейс пользователя, построенный на модальных
окнах, выглядит более привлекательно, а главное, более удобен для конечного пользо-
вателя.

В главе 6 приведен базовый набор программных модулей для создания интернет-
магазина. Здесь описывается технология обмена данными между представлениями и
шаблонами на основе переменных сессии и контекстными процессорами, показана
структура моделей для категорий продуктов, продуктов, корзины, заказов и покупок,
приводятся примеры программных кодов для формирования разного вида шаблонов
с категориями продуктов и с карточками продуктов, рассмотрены примеры программ-
ных кодов для формирования и корректировки содержания корзины, предварительного
заказа, создания заказа и его оплаты банковскими картами через платежную платформу
КоЬоказза.

В главе 7 приводятся некоторые полезные советы, которые пригодятся при разработке
собственных проектов. Эти советы получены на основе обзора и использования опыта
сообщества программистов на РуЙюп и Р]ап§о. В частности, на примерах показано, как
в шаблонах Э)ап§о можно отобразить РЭР-документы и флеш-анимации, как реализо-
вать динамичный перевод страниц сайта на сотни других языков, как с сайта отправ-
лять почтовые сообщения, как использовать в шаблонах Э)ап§о 1ауа-скрипты и скрип-
ты, написанные на РуЙюп.

В главе 8 представлены материалы, связанные с выводом данных в шаблоны Р]ап§о
в виде статичных и интерактивных 2Э-графиков, а также в виде трехмерных ЗЭ-диа-
грамм точек, линий и поверхностей с элементами анимации. Рассмотрены возможности
отображения данных на географических картах, анимации элементов географических
карт, сделан разбор функциональной сущности наиболее значимых фрагментов про-
граммного кода, построенного с использованием библиотеки Р1оЙу.ру.

Глава 9 посвящена использованию библиотеки Р1оЙу.)з для визуализации данных
в шаблонах Э)ап§о в виде статичных и интерактивных 2Э- и ЗЭ-диаграмм с учетом
того, что анимация диаграмм будет выполняться с помощью 1ауа-скриптов, встроенных
в шаблоны В]ап§о. Такой подход позволяет сократить программный код в представле-
ниях (ухеду) и перенести его в шаблоны. Рассмотрены возможности создания «живых»
интерактивных диаграмм на основе 1ауа-скриптов, встроенных в шаблоны В]ап§о,
а также на примерах показана технология взаимодействия шаблонов Р]ап§о с 1ауа-
скриптами. Этот подход оправдан для той группы программистов, которые имеют на-
выки и опыт работы с языком программирования 1ауа.

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

На протяжении всей книги раскрываемые вопросы сопровождаются по возможности
упрощенными, но полностью законченными примерами. Ход решения той или иной
задачи показан на большом количестве иллюстративного материала. Желательно изу-
чение тех или иных разделов осуществлять, сидя непосредственно за компьютером, —
тогда вы сможете последовательно повторять выполнение тех шагов, которые описаны
в примерах, и тут же видеть результаты своих действий, что в значительной степени
облегчит восприятие материала книги.

Некоторые фрагменты программного кода этой книги могут показаться сложными, но
они взяты с реально работающих сайтов, развернутых на публичных серверах. В них
гарантированно нет ошибок и использованы разработанные сообществом действующих
программистов приемы, о которых ничего не сказано в официальной документации.
Абсолютно все примеры сопровождающей книгу интерактивной цифровой платформы
(см. приложение 7) можно запустить на выполнение в рамках самой книги, так как она
содержит весь необходимый инструментарий. Когда вы увидите результаты работы
программного кода, появится ясность — как работает тот или иной элемент изучаемого
фреймворка. Мало того, зарегистрированные пользователи платформы могут скачать
листинги ее программных кодов и использовать их в своих проектах.

^Интерактивная цифровая платформа

Работать с интерактивной цифровой платформой можно, зайдя в нее по адресу гиттк.ги.
Демоверсию платформы можно найти в опции Каталог ее главного меню. Полная версия
платформы будет доступна в разделе Мои книги личного кабинета зарегистрированного
пользователя после ее приобретения в магазине сайта.

Более того, использование полной версии платформы избавляет вас от прибретения
«бумажной» версии книги — если вам это покажется более удобным...

Наилучший способ обучения — это практика. Все листинги программ приведены на
языке РуЙюп с элементами 1ауа-скриптов, а шаблоны веб-страниц — в виде НТМЬ-
файлов. Любой пример, приведенный в интерактивной цифровой платформе, можно
запустить на выполнение и посмотреть, как выглядит конечный результат.

Итак, если вас заинтересовали вопросы создания эффективных веб-приложений с ис-
пользованием Руйюп, Э]ап^о и Воо1з1гар в среде РуСйагш, то самое время перейти
к изучению материалов этой книги и ее цифровой интерактивной платформы.
ГЛАВА 1

Макетирование НТМ1_-страниц
с фреймворком Воо1в1гар 5

Что такое фреймворк? Можно сказать, что фреймворк — это некий конструктор или
набор готовых компонентов и правил, с помощью которых страницы сайта можно соз-
дать проще и быстрее, чем весь код писать с нуля. Воо181гар — это фреймворк для соз-
дания видимого интерфейса страниц сайтов. Главное, за что программисты любят
Воо181гар, — это простота использования и адаптивность разработанных страниц сай-
тов к экранам разного разрешения. На нем можно создать сайт, который будет выгля-
деть одинаково хорошо на экранах компьютеров, планшетов и смартфонов. Кроме того,
это бесплатный фреймворк, который подключается к страницам сайта всего несколь-
кими строчками кода.

Воо181гар 5 (текущая основная версия, выпущенная в мае 2021 года) принес с собой
массу изменений и улучшений, включая добавление новых компонентов, новых клас-
сов, новый стиль для старых компонентов, обновленную поддержку браузеров, удале-
ние некоторых старых компонентов и многое другое. Можно с уверенностью сказать,
что это самый популярный в мире фреймворк с открытым исходным кодом, который
разработан командой Т\уЩег. Он упрощает реализацию сложных многостраничных
сайтов и предоставляет множество компонентов, которые, вероятно, понадобятся вам
в различных проектах.

Из материалов этой главы вы узнаете:

♦	о наиболее важных изменениях и новых компонентах, которые появились в Воо1-
81гар 5;

♦	как можно получить файлы фреймворка Воо181гар;

♦	что такое контейнеры и сетка Воо181гар;

♦	как можно сверстать макет НТМЬ-страниц;

♦	как подключить файлы фреймворка Воо181гар к проекту;

♦	как задать цвет элементам НТМЬ-страниц;

♦	как задать отступы в элементах макета НТМЬ-страниц;

♦	как выровнять содержимое в адаптивных блоках НТМЬ-страниц;

♦	как можно обозначить границы элементов в макете НТМЬ-страниц;

♦	как использовать адаптивные контейнеры при макетировании НТМЬ-страниц;

♦	как создать таблицы в Воо181гар и подключить к ним полосы прокрутки.
1.1.	Что нового в ВооЫгар 5?

Воо181гар — одна из самых популярных библиотек С88. Она позволяет разработчикам
легко применять красивые стили и компоненты и создавать адаптивные веб-сайты. Ис-
пользование Воо181гар может сэкономить время разработчиков, особенно в работе
с компонентами, которые присутствуют практически в каждом проекте.

Воо181гар позиционирует себя как «самая популярная в мире платформа для создания
адаптивных сайтов, ориентированных на мобильные устройства», и его использова-
ние — это отличный способ начать создавать современные и понятные веб-сайты, осо-
бенно для новичков. Он упрощает реализацию сложных проектов, ориентированных на
мобильные устройства, и предоставляет множество компонентов, которые, вероятно,
понадобятся вам в нескольких проектах.

Воо181гар не предполагает сложного обучения и хорошо подходит для статичных веб-
сайтов, не требующих этапа сборки, поскольку вы можете просто сослаться на библио-
теку из СЭИ Воо181гар. В этом его отличие от некоторых других популярных фрейм-
ворков С88, которые можно оптимизировать для использования с упаковщиком или
средством запуска задач.

В версии Воо181гар 5 имеется масса изменений и улучшений, включая добавление но-
вых компонентов, новых классов, новых стилей для старых компонентов, обновленную
поддержку браузеров, удаление некоторых старых компонентов и многое другое.

Выполнить обновление с Воо181гар 4 до версии 5, как правило, довольно просто. Боль-
шинство компонентов, которые имелись в Воо181гар 4, по-прежнему доступны и
в Воо181гар 5. Главное, на чем вам следует сосредоточиться при миграции, — уточнить,
были ли удалены используемые вами ранее классы или компоненты. Если они были
удалены, то существуют замены или способы достижения того же результата с помо-
щью служебных классов. Второе, на что вам следует обратить внимание, — это пере-
ключение с атрибутов аага-* на компоненты аага-ьз-*, для работы которых требуется
1ауа8спр1.

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

Библиотека ]Оиегу больше не является зависимостью

]Риегу — это бесплатная 1ауа8спр1-библиотека с открытым исходным кодом. Она
заметно упрощает веб-разработку, позволяя писать меньше кода, чем на «чистом»
1ауа8спр1.

Начиная с версии Воо181гар 5, библиотеку ] (^иегу можно не подключать к Воо181гар. Те-
перь вы можете использовать Воо181гар во всей красе и без этой библиотеки, хотя
Роррег.]8 вам всё равно понадобится. Это изменение упрощает применение Воо181гар
в проектах, которые не требуют или не задействуют ]Риегу, — например, при исполь-
зовании Воо181гар с КеасТ

Программисты по-прежнему могут применять библиотеку ]Риегу в работе с Воо181гар,
если она является частью веб-сайта. Когда Воо181гар обнаружит ]Риегу в улпс1оау-
объекте, он автоматически добавит все компоненты в систему плагинов ] (^пегу. Итак,
если вы переходите с версии 4 на версию 5, вам не нужно беспокоиться об этом изме-
нении, и вы все равно можете задействовать ]Риегу с Воо181гар при необходимости.
Но что если вы применяете )Риегу на своем веб-сайте, однако не хотите, чтобы
Воо181гар использовал ]Риегу? Вы можете сделать это, добавив атрибут ТаГа-Ьз-по^диегу
в элемент Ьойу документа:

<Ьос1у скГа-Ьз-по-дс[иегу=''Ггие''>

</Ьос1у>

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

Вплоть до версии 4 Воо181гар поддерживал I Щегле! Ехр1огег (1Е) 10 и 11. Начиная с вер-
сии Воо181гар 5, поддержка 1Е полностью прекращена. И если вам нужна поддержка 1Е
на вашем веб-сайте, то следует воздержаться от перехода на версию 5. Другие измене-
ния в поддержке браузеров включают:

♦	поддержку ЕпеГох и Сйгоше теперь — начиная с версии 60;

♦	поддержку 8аГап и Ю8 теперь — начиная с версии 12;

♦	поддержка браузера АпбгоИ и АУеЬУ1еду начинается с версии 6.

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

Воо181гар 5 изменил названия атрибутов данных, которые обычно используются его
компонентами с подключением 1ауа8спр! (как части своей функциональности). Раньше
большинство компонентов, задействующих некоторые функции 1ауа8спр1, имели атри-
буты данных, начинающиеся с аага-. Например, чтобы создать компонент всплываю-
щей подсказки, в Воо181гар 4 применялся следующий код:

<ЬиГГоп

Гуре="ЬиГГоп"

с1азз="ЬГп ЬГп-зесопйагу"

с!аГа-Годд1е="Гоо1Г1р"

с!аГа-р1асетепГ=”Гор"

Г1Г1е=’’Тоо1Г1р"

Тоо1Г1р

</ЬиГГоп>

Обратите внимание на использование аага-годд1е и аага-р1асетепг. В Воо181гар 5 атрибуты
данных для этих компонентов теперь начинаются с атрибутов ааГа-Ьз пространства
имен Воо181гар. Например, чтобы создать компонент всплывающей подсказки в Воо!-
81гар 5, нужно применить следующий код:

<ЬиГГоп

Гуре="ЬиГГоп"

с1азз=”ЬГп ЬГп-зесопйагу”

с1аГа-Ьз-Годд1е="Гоо1Г1р"

(кГа-Ьз-р1асетепГ="Гор"

Г1Г1е=”Тоо1Г1р"

Тоо1Г1р

</ЬиГГоп>
То есть вместо с!ака-кодд1е И Йака-р1асетеп1 теперь НЯДО писать с!ака-Ьз-кодд1е И йака-Ьз-
р1асетепр. Если для создания компонентов в Воо181гар вы используете 1ауа8спр1, воз-
можно, и нет необходимости вносить какие-либо изменения, однако если для функцио-
нирования ваших компонентов задействуются только атрибуты данных, вам необходи-
мо изменить все атрибуты данных, которые начинаются с аака на аака-Ьз.

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

Изменения могут стоить дорого. При выходе новой версии, вносящей изменения и
улучшения, из нее удаляются некоторые старые функции, которые поддерживались
ранее. Так и в этом, обновленном выпуске Воо181гар некоторые его компоненты, слу-
жебные классы и ряд других функций были удалены.

Причиной исключения из ВооЫгар 5 большинства таких элементов явилась возмож-
ность достичь тех же результатов, используя служебные классы вместо того, чтобы
делать их отдельным компонентом.

Вот список некоторых элементов, удаленных из Воо181гар 5:

1.	Полностью прекращена поддержка 1Е.

2.	Цветовые классы значков (например, .Ьааде-ргтагу) удалены в пользу служебных
классов цветов (например, .Ьд-ргтагу).

3.	Класс .Ьайде-рШ значка, который придавал значку стиль таблетки, удален в пользу
класса . гоипаеа-рш, который дает тот же результат.

4.	Класс .Ькп-Ыоск кнопок удален, поскольку того же результата можно достичь, ис-
пользуя служебные классы отображения .а-Ыоск.

5.	Ранее доступный макет карты .сага-со1шшз исключен, поскольку он имел множество
побочных эффектов.

6.	Опция Шр для раскрывающихся компонентов удалена в пользу конфигураций
Поппера.

7.	Компонент ллпЬокгоп удален, поскольку того же результата можно добиться, исполь-
зуя служебные классы.

8.	Некоторые из порядковых классов полезности (.огаег-*) исключены, поскольку
раньше они находились в диапазоне от 1 до 12. Теперь они варьируются от 1 до 5.

9.	Медиакомпонент удален, поскольку того же результата можно достичь с помощью
служебных классов.

10.	Классы .кЬеаа-ИдЬк И . ккеай-аагк удалены, ПОСКОЛЬКУ варианты КЛаССОВ .каЫе-* мож-
но применять ко всем элементам таблицы.

11.	Класс .рге-зсго11аЬ1е исключен, т. к. он мало используется.

12.	Класс .кехк-дизкИу удален из-за проблем с реагированием, как и сам класс .кехк-ыае,
поскольку его метод устарел и не должен использоваться. И классы .кехк-* больше
не добавляют к ссылкам состояния наведения или фокуса — эти классы .кехк-* сле-
дует заменить классами .Ипк-*.
1.1.2.	Наиболее важные дополнения

В версии 5 Воо181гар вносит в свою библиотеку множество интересных дополнений.
Некоторые из них включают новые функции, новые поддерживаемые концепции, но-
вые компоненты, новые служебные классы и многое другое.

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

Адаптивные размеры шрифтов (Кезропзхуе Бон! 81хе, КБ8) присутствовали в предыду-
щих версиях Воо181гар, но по умолчанию были отключены. Воо181гар 5 по умолчанию
включает ВР8, что делает шрифты в Воо181гар более отзывчивыми.

ВР8 — это побочный проект, созданный Воо181гар для первоначального оперативного
масштабирования и изменения размеров шрифтов. Теперь он способен делать то же
самое с такими свойствами, как поля, отступы, тень блока и т. д. И если вы используете
для Воо181гар файлы За88, то можете задействовать параметры, созданные КР8, включая
Гопг-зтхе, тагд1п, расШпд и другие, — те, которые позволяют вам убедиться, что ваши
компоненты и стили адаптивны.

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

Воо181гар 5 добавляет поддержку написания текста как «слева направо», так и «справа
налево». Поскольку Воо181гар используется во всем мире — это большой и важный шаг:
сделать такую поддержку доступной «из коробки». По этой причине ВооЫгар 5 отка-
зался от конкретных имен для направлений (например, использование 1ей и г1дЬк)
в пользу зкагк и епа. Это делает Воо181гар достаточно гибким для работы с веб-сайтами
с письмом в разных направлениях: ЬТК и КТЬ.

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

Воо181гар 5 обеспечивает поддержку новых ХХЬ-устройств, нацеленных на точки оста-
нова, ширина которых больше или равна 1400 пикселов (рх). Раньше самой высокой
точкой останова была х1, которая предназначалась для устройств с шириной экрана
больше или равной 1200 рх. Это изменение позволяет улучшить реагирование на уст-
ройствах с большими экранами, поскольку точки останова х1 стало недостаточно.

Использование новой точки останова аналогично применению всех других точек оста-
нова. Например, чтобы задействовать отступы для устройств, ширина которых больше
или равна 1400 рх, вы можете сделать это с помощью класса .р-хх1-2.

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

В версии Воо181гар 5.3 появилась новая функция — возможность создавать для проекта
светлую и темную темы. Больше не нужно писать кастомные С88-стили для создания
нескольких тем — всё настраивается через переменные.

В Воо181гар 5.3 светлая и темная темы включены по умолчанию — для них всё готово,
и нужно лишь научиться их переключать. Это можно сделать с помощью НТМЬ-
атрибута с1а^а-Ьз-^Ъете, который принимает одно из двух значении.

♦	ИдЬк — светлая тема (используется по умолчанию);

♦	аагк — темная тема.
Задать атрибут можно на любом теге НТМЬ, но чаще всего его ставят на весь <Ьос1у>, —
это позволяет применить тему сразу для всего проекта.

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

В Воо181гар 5 через атрибуты данных можно активировать модальное окно, установив
для элемента, например кнопки, атрибут аага-ьз-годд1е="тос1аг’. Мы также можем пере-
ключить определенное модальное ОКНО, используя с!аГа-Ьз-ГагдеГ="Шо" ИЛИ Ьге^=”#^оо".
Примеры:

♦	аага-ьз-годд1е=птос1а1’' — сообщает кнопке, что мы будем активировать модальное
окно при нажатии на элемент;

♦	с1аГа-Ьз-гагдег="#1с1” — сообщает кнопке идентификатор модального окна, которое
необходимо активировать.

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

Аккордеон

Раньше АссогсПоп был частью компонента соЫарзаЫе, а не отдельным компонентом.
В Воо181гар 5 АссогсПоп — новый компонент. Вместе с АссогсНоп появился новый класс —
.ассогсПоп, который содержит внутри себя список элементов аккордеона. Кроме того,
у аккордеонов теперь новый стиль, отличный от предыдущего стиля в Воо181гар 4.

ОНсапуаз

Еще один новый компонент — оггсаютз, который позволяет создавать всплывающую
панель, которая обычно организуется на веб-сайтах для отображения меню на неболь-
ших устройствах. Вы можете поместить такую панель на любой стороне страницы,
применив атрибут .о^сат/аз-згагг слева в ЬТК, .оггсашгаз-гор сверху, .оГГсатгаз-епс! справа
в ЬТК и .оГГсапуаз-ЬоШяп СНИЗу. Вы также можете указать, должен ОГГсашгаз иметь фон
или нет.

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

Плавающая этикетка (метка) — это новая составная часть компонентов формы. Она
позволяет создать поле ввода, метка которого сначала выглядит как заполнитель поля,
а затем, когда ввод получает фокус, метка перемещается в верхнюю часть ввода над
значением. Этот компонент также работает с элементами <зе1есг> и <гехгагеа>.

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

Помимо новых компонентов, добавлены новые классы для существующих компонен-
тов, новые служебные классы, новые вспомогательные классы и многое другое. На-
пример:

♦	добавлен класс .гом-со1з-аиго, который позволяет столбцам принимать естественную
ширину;

♦	с помощью новой утилиты «желоб» теперь можно устанавливать промежутки меж-
ду строками и столбцами макета страницы. Для установки горизонтального желоба
используется класс .дх-*, для установки вертикального — .ду-*. Чтобы установить
желоб как по горизонтали, так и по вертикали, служит класс . д-*;

♦	добавлен новый ввод (выбор) цвета с использованием класса . Гогт-сопгго1-со1ог.
Здесь пользователь может визуально подобрать нужный цвет из палитры КОВ:

<1аЬе1 ^ог="со1ог" с1азз="^огш-1аЬе1">Со1ог</1аЬе1>

<1приГ Гуре=”со1ог" с1азз=”^огш-соп11го1 ^огш-соп11го1-со1ог” 1с1=”со1ог” уа1ие=”#563с!7с'’
Г1Г1е=”СЪоозе уоиг со1ог”>

♦	добавлен новый тип ввода списков данных, который имитирует поле выбора с опе-
режением ввода;

♦	добавлены новые классы для удобного центрирования абсолютных элементов по
ГОрИЗОНТалИ (.ГгапзЗаГе-тМсПе-х) И вертикали (.Ггапз1аГе-т1сШе-у);

♦ в раскрывающемся списке появилась новая опция автоматического закрытия, кото-
рая может изменить поведение по умолчанию при закрытии раскрывающегося ме-
ню. По умолчанию раскрывающиеся меню закрываются при щелчке за пределами
раскрывающегося списка или одного из его элементов. Вы можете изменить это по-
ведение, установив ДЛЯ атрибута данных с!аГа-Ьз-аиГо-с1озе значение 1П31(1е, при кото-
ром раскрывающийся список закрывается при щелчке на одном из элементов рас-
крывающегося списка, но не при щелчке за его пределами. Вы также можете уста-
новить для этого атрибута значение оиГзМе, при котором раскрывающийся список
будет закрываться только при щелчке за пределами раскрывающегося списка. Нако-
нец, вы можете настроить его как Га1зе — чтобы он закрывался только при повтор-
ном нажатии кнопки раскрывающегося списка. Если же вы инициализируете рас-
крывающийся СПИСОК С ПОМОЩЬЮ 1аУа8спр1, ТО МОЖете ИСПОЛЬЗОВатЬ ОПЦИЮ аиГоС1озе
вместо атрибута данных.

* * *

Воо181гар является одной из ведущих библиотек С88 на протяжении большей части по-
следнего десятилетия. Это позволяет разработчикам легко создавать адаптивные веб-
сайты и обеспечивать удобство работы. Благодаря дополнениям и изменениям
Воо181гар 5 этот процесс станет еще проще и позволит улучшить дизайн веб-сайтов и
обеспечить для их посетителей дополнительные удобства.

Если вы используете Воо181гар 4 и подумываете о переходе на ВооЕйар 5, миграция
будет простой, и вам, вероятно, не потребуется вносить много изменений.

1.2.	Получение файлов фреймворка Воо($(гар

Есть несколько способов использовать фреймворк Воо181гар в своих приложениях:

♦	подключить свое приложение (сайт) к коду фреймворка через сеть доставки контен-
та (СПИ, Соп1еп1 Эейуегу ИеЕуогкз);

♦	скачать готовые (скомпилированные) файлы и подключить их к своему прило-
жению;

♦	скачать исходные файлы и скомпилировать (собрать) свой собственный пакет, кото-
рый будет содержать только необходимые компоненты С88 и плагины 18.

Мы рассмотрим первые два варианта как наиболее простые и доступные.
1.2.1.	Использование сети СОМ

Наиболее простой способ — подключение приложения (сайта) к фреймворку через сеть
доставки контента (СОИ).

СЭЛ/

СОМ — это географически распределенная сетевая инфраструктура, обеспечивающая бы-
струю доставку контента пользователям веб-сервисов и сайтов. Входящие в состав СОМ
серверы географически располагаются таким образом, чтобы сделать время ответа для
пользователей сайта (сервиса) минимальным.

Для такого подключения ВооЫгар страницы сайта в заголовке должны содержать
ссылку на С88- и 18-файлы. Далее приведен код НТМЬ-страницы, которая содержит
эти ссылки на файлы ВооЫгар 5.3.2:

<ЮОСТУРЕ Ылп1>

<Ыдп1 1апд="еп">

<Ьеас1>

<Е1Е1е>ВооЕзЕгар 5</Г1Г1е>

<теЕа сЬагзеЕ="иЕЕ-8">

<теЕа пате="ч1емрогЕ” сопЕепЕ=”Щ(1ЕЬ=с1еч1се-м1скЬ, 1п1Г1а1-зса1е=Г'>

<!— Подключение ВооГзТгар из интернета через СОМ —>

<Ипк ЬгеЕ=”ЬЕЕрз: //сс!п.дзйеИчг.пеВ/прт/ЬооВзВгар@5.3.3/сИзВ/сзз/ЬооТзТгар.ттп. сзз"

ге1="зВу1езЬееВ"

1пГедг1Ру="зЬа384-ТЗс6Со11биЬгА9ТпеМЕоа7НхпаГг]сВ5Ст61МХх8В1СА5ХЕУ/Вш/укс2МРК8М2Н1М"
сгоззог1д1п=”апопутоиз”>

<зсг1рр згс="ЬРРрз: //сс!п. ] зсАеНчг. пеТ/прт/ЬооТзТгарбЗ. 3.2/сИзГ/з з/ЬооЕзЕгар .ЬипсПе .т1п. д з”
1пГедг1Ру=’'зЬа384-СбН2зупМ9кТОгМПеТ87ЬЬ95ОСПу2Р]1сТЫХз 1Ш7КиВСзуМ/о0д1рс780уд46сОЕЬ"
сгоззог1д1п=”апопутоиз”х/зсг1р11>

</Ьеас1>

<Ьос1у>

</Ьос1у>

/ЬРт1>

Здесь в теге <Ьеаа> заголовка сайта присутствуют пять строчек. Первые три строки не
имеют отношения в ВооЫгар, но для начинающих изучать основы веб-програм-
мирования поясним их назначение:

♦	тег <Ш1е> служит для вывода информации, которая появится на самой верхней
вкладке интернет-браузера. Далее следуют две строки с метатегами — разберемся,
что это за теги <тева> и для чего они нужны;

Тег <мета>

Тег <теЕа> (от англ. те!а 1пГогта1юп, метаинформация) определяет данные, которые пред-
назначены для браузеров и поисковых систем. Например, механизмы поисковых систем
обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Разрешается использовать более чем один метатег, все они размещаются в заголовке
НТМЬ-страницы — в теге <Ьеас1>.

♦	метатег <тета сЬагзеЕ=”птЕ-8”> определяет кодировку символов, которая будет принята
на сайте. В приведенном коде этот метатег означает, что на сайте будет использо-
ваться 8-битовый формат преобразования Ишсобе, который является стандартной
кодировкой символов в последней версии НТМЕ 5. Такая строка должна быть
включена в каждую созданную веб-страницу, поскольку она обеспечивает правиль-
ное отображение символов любого языка в любом браузере. Указанная здесь коди-
ровка ИТР-8 гарантирует, что символы нелатинских языков искажаться не будут.
Браузер Сгоо§1е Сйгоше автоматически установил кодировку ИТР-8, поэтому вам не
придется беспокоиться об этом при разработке дизайна для этого браузера. Но вам
все равно нужно включать <теба сЬагзеб=”итЕ-8”> в каждый файл НТМЕ на случай,
если эта функция не поддерживается другими браузерами;

♦	метатег <пате="у1емрогб"> определяет, как нужно настроить параметры окна браузера
для конкретного устройства, — главным образом это актуально для мобильных
смартфонов. В настоящее время важно, чтобы веб-страницы хорошо отображались
на всех устройствах: на настольных компьютерах, ноутбуках, планшетах и — осо-
бенно — на мобильных смартфонах. Для этого и нужно включить метатег
<пате=”у1емрогЕ”> в каждый файл НТМЕ. Этот тег определяет, как страницы сайта
станут отображаться на экранах разного размера и сколько визуальной области
браузера будет доступно пользователю. Каждое устройство имеет разные размеры и
разрешение экрана. Как правило, у мобильных устройств видимая область экрана
меньше, а у настольных компьютеров — больше. Использование параметра
сопЕепЕ=”м1аЕЬ=аеу1се-м1с11± — первый шаг к тому, чтобы страницы сайтов хорошо вы-
глядели на мобильных устройствах. Он не позволяет страницам сайта, который про-
сматривается на мобильном устройстве, выглядеть так, как если бы он отображался
на ноутбуке — т. е. сильно уменьшенным, с мелкими и плохо читаемыми символа-
ми. Это гарантирует, что НТМЕ-страницы будут автоматически адаптированы под
размеры экрана устройства. Параметр 1п1иа1-зса1е=1.о устанавливает начальный
масштаб при первой загрузке страницы браузером — т. е. разворачивает его на пол-
ный экран.

Затем следуют два тега: <Ипк .. .> и <зсг1рв .. .> — которые и обеспечивают подключе-
ние приложения к файлам С88 фреймворка Воо1зйар через сеть доставки контента
СОИ:

♦	<Ипк ЬгеЕ=птрз://сап... — подключение приложения к файлам С88;

♦	<зсг1рЕ згс=’ъирз://сс1п... — подключение приложения к файлам 18.

В дополнение к метатегам, приведенным в этом примере, на странице можно размес-
тить еще четыре полезных метатега:

♦	метатег <х-ПА-сотраб1Ые> — отвечает за браузеры Мюгозой 1Е8, 1Е9, 1Е10, 1ЕП. Он
говорит о том, что страница будет адаптирована к последней версии 1Щегпе1
Ехр1огег. Всегда выбирайте последнюю версию Тибете! Ехр1огег — т. е. 1Е=ебде. Вот
пример строки с этим метатегом:

<теба Ьббр-еди1у=”Х-ПА-Сотра111Ые"сопепб=" 1Е=ес1де">

♦	метатег <теба пате=”с1езсг1рЕ1оп">. Наличие этого метатега помогает поисковым систе-
мам ранжировать ваш сайт по сравнению с другими сайтами. Он предназначен
в основном для целей 8ЕО (поисковой оптимизации). Метатег описания позволяет
кратко и лаконично объяснить, о чем ваш сайт, и может выглядеть примерно так:
стеба пате=”с1езсг1рЕ1оп" сопЕепЕ="Разработка меЬ-приложений: РуЬЬоп, Е^апдо, Вообзбгар, НТМЬ.
Программирование на РубЬоп.">
При описании вашего сайта в этом метатеге необходимо учитывать следующие тре-
бования:

•	описание должно быть коротким, не превышающим 160 символов;

•	в описании должны присутствовать ключевые слова, по которым люди ищут
услуги, предоставляемые вашим сайтом;

•	оно должно четко указывать на ваши преимущества перед конкурентами;

♦	метатег <тека пате="кеумогс1з'’ — служит для задания ключевых слов, которые исполь-
зуются поисковыми серверами для ранжирования вашего сайта в списке других сай-
тов. Далее приведен пример задания набора ключевых слов:

стека пате=”кеумогс!з” сопкепк="РукИоп, Вдапдо, Воокзкгар, меЬ-приложение">

♦	метатег стека пате=”аикког”> — еще один полезный метатег, который следует вклю-
чить в описание сайта, — это имя автора:

стека пате=”аикког” сопкепк="Семенов Алексей">

Эта информация показывает, кто является владельцем веб-сайта или кому принад-
лежат авторские права.

1.2.2. Скачивание файлов Воо1з1гар

Второй путь использования фреймворка Воо181гар — скачать готовые файлы и подклю-
чить их к своему приложению. Этот путь тоже не представляет особых трудностей.
Скачать готовые файлы можно с официального сайта фреймворка1.

После скачивания вы получите архивированный ар-файл, в имени которого будет от-
ражена текущая версия фреймворка, — например, Ьоо181гар-5.3.2-с1|81.21р. После распа-
ковки архива на вашем компьютере будут созданы две папки: С88 — с файлами стилей,
и ]8 — с 1ауа-скриптами. Эти две папки нужно перенести в ваш проект.

1.3. Контейнеры и сетка Воо(з(гар

Сначала разберемся с тем, что такое адаптивный макет сайта. Адаптивный макет —
это такой макет, вид которого может изменяться в зависимости от того, какую ширину
(укемрогк) имеет браузер. Это означает, что при одних значениях ширины укемрогк адап-
тивный макет может выглядеть одним образом, а при иных — совершенно по-другому.

В Воо181гар изменение вида макета реализовано через медиазапросы. Каждый медиа-
запрос в Воо181гар строится на основании минимальной ширины окна браузера. В ме-
диазапросе Воо181гар ключевое значение ширины у1емрогк называется Ьгеакрошс (кон-
трольной точкой, или классом устройства). На рис. 1.1 приведены основные контроль-
ные точки, которые в Воо181гар 5 назначены по умолчанию.

Цифры на этом рисунке означают, что при ширине видимой области браузера до 576 рх
макет сайта будет отображаться одним образом, от 576 до 768 рх — другим, и т. д.

1 См. ЬПр‘>://цсЧЬ()()^1гар.с()т/с1ос^/5.2/цеШп^-^Ы1Тес1/с1о\уп1оас1/.
ЕхНа екНа Загде

ЕхНа 1агде



Рис. 1.1. Контрольные точки для Воо1з1гар4 и ВооЫгарб

Иными словами, можно создать макет, который на каждом из этих участков видимой
области браузера станет выглядеть по-разному.

Контрольные точки (ьгеакроапг) обозначаются следующим образом. Первая контрольная
точка не имеет обозначения (т. е. хз не указывается), вторая обозначается зт, третья —
та, четвертая — 1д, пятая — х1 и шестая — хх1. Эти обозначения необходимо запомнить,
поскольку они используются в классах, которые мы будем добавлять к элементам. Та-
кие обозначения в имени класса будут указывать на то, с какой ширины угемрогг стили,
определенные в нем, станут применяться к вложенным элементам. При этом контроль-
ные точки задают только минимальную ширину. Например, если вы определили макет,
указав в нем классы без обозначения контрольной точки (хз) и с использованием пара-
метра та, то на устройстве зт страница будет иметь такую же структуру, как и на уст-
ройстве хз, а на устройствах с большим экраном 1д, х1 и х11 — как на та. Пример исполь-
зования контрольных точек при макетировании страниц сайта будет приведен немного
позже, после разделов с описанием сетки НТМЬ-страниц.

Теперь разберемся с сеткой НТМЬ-страницы в ВооЫгар — она состоит из следующих
элементов:

♦	оберточных контейнеров (элементов С классом сопГаапег, сопГагпег-ПиМ ИЛИ сопГагпег-
{ЬгеакроЩГ});

♦	рядов или строк (элементов с классом г ом);

♦	адаптивных колонок или блоков, имеющих один или несколько классов со1.

Все части сетки — это обычные элементы НТМЬ, к которым просто добавлены опреде-
ленные классы.

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

Адаптивный (или оберточный) контейнер — это элемент сетки Воо181гар, с которого
обычно начинается создание макета страницы или ее части. Другими словами, это
базовый элемент, в котором необходимо размещать все другие элементы сетки (ряды и
адаптивные блоки). Его основная цель — установить шаблону ширину и выровнять его
по центру страницы (рис. 1.2).

Контейнеры в Воо181гар являются основным элементом макетирования страниц — они
служат для вкладывания в них других элементов интерфейса, формирования отступов
и выравнивания или центрирования их содержимого. Хотя контейнеры могут быть
вложенными, для большинства макетов вложенный контейнер не требуется.

Оберточный контейнер

Рис. 1.2. Оберточный контейнер

Воо181гар поставляется с двумя базовыми контейнерами:

♦	адаптивно-фиксированный контейнер (класс сопгагпег) — устанавливает максималь-
ную ширину (тах-м1со) для каждой контрольной точки;

♦	адаптивно-подвижный («резиновый») контейнер (класс сопШпег-ПиМ), который
устанавливает максимальную ширину (™1сгьь: 100%) во всех контрольных точках.

Для адаптивно-фиксированного контейнера можно указать контрольную точку
(сопГа!пег-{Ьгеакро1пГ}), при ЭТОМ будет установлена максимальная ширина (ихсНД: 100%)
до указанной контрольной точки.

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

Адаптивно-фиксированный контейнер предназначен для создания контейнера с посто-
янной шириной, но которая будет оставаться постоянной только в пределах действия
определенной контрольной точки. Например, на контрольной точке зт до действия кон-
трольной точки та он будет иметь одну фиксированную ширину, а на та до действия
1д— другую фиксированную ширину. Единственная контрольная точка, на которой
этот контейнер не будет иметь фиксированную ширину, — это Ьгеакрсппг без обозначе-
ния. Здесь контейнер будет занимать 100%-ную ширину видимой области браузера.
Пример расположения адаптивно-фиксированного контейнера в окне браузера пред-
ставлен на рис. 1.3.

Адаптивно-фиксированный контейнер будет иметь следующие значения ширины:

♦	100%-ную ширину при ширине угемрогг до 576 рх;

♦	540 рх при ширине угемрогг от 576 до 768 рх;

♦	720 рх при ширине угемрогг от 768 до 992 рх и т. д.

В горизонтальном направлении контейнер располагается по центру окна браузера.
Определяется ЭТО посредством установки ему С88-СВОЙСТВ тагд!п-1еГГ:аиГо И тагдгп-
г1дьг:аиго в файле Ьоо181гар.с88. Создать адаптивно-фиксированный контейнер можно
так:

<сПу с1азз=”сопГа!пег”>.. .</с!1у>
Адаптибно-

I фиксированный
контейнер
фиксированная ширина
________на ат, тс1,1д, х1, хх!

Адаптивно-подвижный
контейнер

100% ширина

ширина У1еу/рог1 браузера

ширина у|е^рог|- браузера

Рис. 1.3. Расположение адаптивно-фиксированного
контейнера в окне браузера

Рис. 1.4. Расположение адаптивно-подвижного
контейнера в окне браузера

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

Второй вид контейнера — это адаптивно-подвижный контейнер, или «резиновый». Он
применяется тогда, когда необходимо создать полностью гибкий макет целой стра-
ницы или ее части. Этот контейнер на любых контрольных точках занимает полную
(100%-ную) ширину видимой области браузера (рис. 1.4).

Создать адаптивно-подвижный контейнер можно так:

<сПу с1аз5=’'сопГа1пег-Г1и1(1">.. .</сПу>

* * *

Контейнеры класса сопта1пег и согЛаГпег-ПиШ имеют внутренние отступы слева и справа
по 15 рх. Установка внутренних отступов контейнеров задается в файле Ьоо181гар.с88
посредством С88-свойств раашпд-1еа:15рх и раасппд-г1дьг:15рх. При верстке макета стра-
ницы не следует одни оберточные контейнеры помещать внутрь других.

1.3.2.	Ряды, или строки (гош)

Ряд. или строка — это элемент сетки страницы, который выступает в роли контейнера
для адаптивных блоков (колонок). Он представляет собой дочерний элемент контейне-
ра и родительский элемент для адаптивных блоков (рис. 1.5).

Рис. 1.5. Расположение ряда (строки) в теле адаптивно-фиксированного контейнера
Для создния ряда используется следующий код:

<сПу с1азз=’’гом">.. .</с1гу>

В Воо181гар ряды играют очень важную роль. Это связано с тем, что сетка НТМЬ-
страниц построена на С88 ПехЬох — адаптивных блоках. В этой сетке ряд выступает
в роли Пех-контейнера для Вех-элементов (адаптивных блоков). Если адаптивные бло-
ки окажутся вне ряда, то они работать не будут, поэтому в ВооЫгар адаптивные блоки
должны обязательно находиться в блоке с классом гсж. Компенсация внутренних отсту-
пов (райсПпд) осуществляется за счет отрицательных левых и правых внешних отступов,
равных 15 рх (тагд!п-1еГГ:-15рх И тагд!п-г1дЪГ:-15рх).

1.3.3.	Адаптивные блоки (со/)

Адаптивные блоки — это основные строительные элементы сетки. Именно от них зави-
сит то, как макет веб-страницы будет отображаться в видимой области браузера на раз-
ных контрольных точках. Адаптивные блоки располагаются внутри ряда — т. е. ряд
является контейнером для адаптивных блоков (рис. 1.6).

ширина У1еырог^ браузера

Рис. 1.6. Расположение адаптивных блоков в контейнере ряд (в строке)

аи1*о

Ширина адаптивных блоков на разных контрольных точках (Ьгеакрот!) может быть
различной (в процентном отношении от родительского контейнера). Например, адап-
тивный блок в браузере смартфона (зт) может иметь ширину, равную 50% от родитель-
ского элемента, а на планшете (та) — 25%.

Адаптивный блок достаточно просто создать посредством добавления одного или не-
скольких классов со1-?-? к НТМЬ-элементу, расположенному в ряду. В классе со1-?-?
вместо первого знака вопроса указывается название контрольной точки («пусто», зт, та,
1д, х1 или хх1). Вместо второго знака вопроса задается ширина адаптивного блока, кото-
рую он должен иметь на указанной контрольной точке. Ширина адаптивного блока
назначается в относительной форме либо по умолчанию, либо с помощью числа от 1
до 12 (по количеству колонок).

Число, которое стоит при инициализации класса со1, определяет, какую часть ширины
родительского контейнера (т. е. ряда) будет занимать адаптивный блок, начиная с ука-
занной контрольной точки. При этом ширина ряда в числовом выражении (в колонках
Воо181гар) по умолчанию равна 12. Например, блок с классом со1-та-4, начиная с кон-
трольной точки та, будет занимать 4/12 ширины ряда, т. е. 4/12-100% = 33,3%.

Адаптивные блоки, как и оберточные контейнеры, имеют слева и справа внутренние
отступы по 15 рх. Эти отступы адаптивным блокам в фреймворке Воо181гар устанавли-
ваются с помощью С88-свойств рас1с1шд-1еП:15рх и расШпд-г1дЬ^: 15рх. Размещать адап-
тивные блоки необходимо в ряду (в строке) — т. е. у любого адаптивного блока в каче-
стве родителя обязательно должен быть элемент гсж

Рассмотрим на примерах, какую ширину будут иметь следующие адаптивные блоки.

1.	с1азз= "со1-12" задает ширину блока по умолчанию. Ширина блока будет равна
12 колонкам Воо181гар (т. е. 12/12-100% = 100% от ширины ряда), эту ширину блок
получит, начиная с контрольной точки хз.

2.	с1азз=,,со1-зт-9" задает ширину блока с контрольной точки зт. Ширина блока будет
равна 9 колонкам Воо181гар (т. е. 9/12-100% = 75% от ширины ряда), эту ширину
блок получит, начиная с контрольной точки зт.

3.	с1азз=”со1-тс1-7" задает ширину блока с контрольной точки та. Ширина блока будет
равна 7 колонкам Воо181гар (т. е. 7/12-100% = 58,3% от ширины ряда), начиная с кон-
трольной точки та.

4.	с1азз=,,со1-1д-5" задает ширину блока с контрольной точки 1д. Ширина блока будет
равна 5 колонкам Воо181гар (т. е. 5/12-100% = 41,6% от ширины ряда), начиная с кон-
трольной ТОЧКИ 1д.

5.	с1азз=’'со1-х1-3" задает ширину блока с контрольной точки х1. Ширина блока будет
равна 3 колонкам Воо181гар (т. е. 3/12-100% = 25% от ширины ряда), начиная с кон-
трольной точки х1.

6.	с1азз="со1-хх1-б” задает ширину блока с контрольной точки больше хх1. Ширина бло-
ка будет равна 2 колонкам Воо181гар (т. е. 6/12-100% = 50% от ширины ряда).

При задании ширины адаптивному блоку мы указываем класс, содержащий контроль-
ную точку, начиная с которой эта ширина станет действовать. Такую ширину этот блок
будет иметь до тех пор, пока она не окажется переопределена с помощью другого клас-
са, действие которого начинается с наибольшей ширины у1емрогг.

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

В сетке Воо181гар имеются специальные классы: со1, со1-зш, сот-та, со1-1д, со1-х1, со1-хх1
со1-аиГо, со1-зт-аиГо, со1-тс!-аиГо, со1-1д-аиГо, со1-х1-аиГо И со1-хх1-аиГо.

Первая группа классов (со1, со1-зт, со1-та, со1-1д, со1-х1, со1-хх1) предназначена для созда-
ния адаптивных блоков, ширина которых будет зависеть от свободного пространства
в ряду (строке). Незанятая ширина (свободное пространство) в ряду между всеми таки-
ми блоками распределяется равномерно. Кроме того, эти адаптивные блоки перед рас-
пределением свободного пространства ряда (по умолчанию) имеют нулевую ширину.
1.3.5.	Расположение адаптивных блоков

Адаптивные блоки по умолчанию располагаются в ряду горизонтальными линиями,
при этом они выстраиваются последовательно слева направо. В одну горизонтальную
линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12.
Адаптивные блоки, которые не помещаются в текущую строку, переходят на следую-
щую строку. Колонки можно объединять в адаптивные блоки произвольным образом.
Пример различных вариантов расположения колонок в адаптивных блоках в ряду при-
веден на рис. 1.7.

Рис. 1.7. Возможные варианты формирования адаптивных блоков из 12 колонок

1.4. Верстка макета НТМЬстраниц

Основной принцип верстки макета веб-страницы на сетке Воо181гар заключается во
вкладывании адаптивных блоков в ряды, а рядов — в контейнеры. При этом ширина
адаптивных блоков — это всегда относительная величина, которая задается в колонках
Воо1з1гар и зависит только от ширины родителя — т. е. от ряда. Размещать контент веб-
страницы следует только в адаптивных блоках. Вот пример формирования макета стра-
ницы:

<сПу с1аз8="сопГа1пег">

<сЦу с1азз="гом”>

<сЦу с1азз=со1-8>Блок 1</сПу>

<сПу с1азз=со1-4>Блок 2</сПу>

</с!гц>

</сПу>

В ЭТОМ примере создан контейнер (с1азз=”сопБа1пег"), в него вложена строка (с1азз="гом"),
и уже в эту строку вложены два адаптивных блока: шириной 8 колонок (с1азз=со1-8)
и шириной 4 колонки (с1азз=со1-4).

Если предполагается, что блоки будут одинаковой ширины, то число колонок для них
можно не указывать, например:
<сИу с1азз=”сопБа1пег">

<с11у с1азз=”гом”>

<сНу с1азз=”со1”> Блок 1 </сИу>

<сИу с1азз=”со1”> Блок 2 </сИу>

<сИу с1азз="со1"> Блок 3 </сИу>

<сНу с1азз="со1"> Блок 4 </сИу>

<сНу с1азз="со1"> Блок 5 </сИу>

</сНу>

</сНу>

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

Выравнивание адаптивных блоков в горизонтальном и вертикальном направлении
осуществляется с помощью служебных Вех-классов.

В пределах ряда по горизонтали адаптивные блоки выравнивают посредством одного
из следующих классов, который необходимо дополнительно добавить к гом:

♦	аИдп-лГетз-зБагг — выравнивание относительно начала ряда (по левому краю);

♦	аИдп-лБетз-сегЛег — ПО центру ряда;

♦	аИдп-1Бетз-епс1 — относительно конца ряда (по правому краю).

Например, в следующем коде адаптивные блоки выровнены по центру ряда:

<сИу с1азз=”гом аИдп-1Бешз-сепБег">

<сНу с1азз="со1">Блок 1</сНу>

<сИу с1азз="со1">Блок 2 </сИу>

</сНу>

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

По умолчанию адаптивные блоки занимают всю высоту ряда, в котором они располо-
жены. Выравнивание какого-то определенного адаптивного блока по вертикали в пре-
делах ряда может осуществляться одним из следующих классов:

♦	аИдп-зеИ-зБагг — выравнивание относительно начала ряда (по верху ряда);

♦	аИдп-зе1Б-сепБег — ПО центру ряда;

♦	аИдп-зеИ-епа — относительно конца ряда (по низу ряда).

Эти классы необходимо добавлять к адаптивным блокам, а не к ряду. Например, так мы
выравниваем адаптивный блок 2 по нижнему краю ряда:

<сИу с1азз=”гом аИдп-1Бетз-сепБег">

<сИу с1азз="со1”>Блок 1</сИу>

<сНу с1азз=”со1 аИдп-зе1Б-епсГ>Блок 2</сИу>

</с1гу>

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

Для выравнивания адаптивных блоков в горизонтальном направлении можно также
использовать следующие классы:
♦	зизБББу-сопБепг-зБагг — относительно начала ряда (по левому краю), установлено по
умолчанию;

♦	дизБББу-сопБепБ-сепБег — ПО центру ряда;

♦	дизБББу-сопБепг-егк! — относительно конца ряда (по правому краю);

♦	зизБББу-сопгепг-агоипа — равномерно, с учетом пространства перед первым и послед-
ним адаптивными блокамм;

♦	зизШу-сопипс-ЬеГыееп — равномерно, с одинаковым пространством между адаптив-
ными блоками.

Например, распределим адаптивные блоки в горизонтальном направлении равномерно:

<сПу с1азз=”гом дизБББу-сопБепБ-агоипс1">

<сПу с1азз=”со1-4">Блок 1</сПу>

<сПу с!азз="со1-4">Блок 2</сИу>

</сИу>

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

Смещение адаптивных блоков в Воо181гар можно выполнить с помощью следующих
классов:

♦	классов оББзеБ — на определенное число колонок;

♦	служебных (утилитных) классов тагдБп.

Смещение с помощью классов оНзе1

Классы оББзеБ предназначены для смещения адаптивных блоков вправо на определен-
ное число колонок. Эти классы имеют следующий синтаксис:

♦	оББзеБ-{1};

♦	оББзеБ-{ЬгеакроБпБ}-{1}.

Здесь {ЬгеакроБпБ} — контрольная точка, начиная с которой к блоку будет применено
смещение. Если она не указана, то смещение применяется, начиная с самых крохотных
устройств (смартфоны). Второй параметр {1} — это величина смещения (число коло-
нок). Рассмотрим следующий код:

<с!Бу с1азз=”гом">

<с!Бу с!азз="со1-4">Блок 1</сИу>

<с!Бу с!азз="со1-4 оББзеБ-4">Блок 1</сИу>

</с!Бу>

<с!Бу с1азз="гом">

<с!Бу с!азз="со1-3 оББзеБ-3">Блок 3 </сИу>

<с!Бу с!азз="со1-3 оББзеБ-3">Блок 4</с1Бу>

</с!Бу>

<с!Бу с1азз=”гом”>

<с!Бу с!азз="со1-6 оББзеБ-3">Блок 5</с1Бу>

</с!Бу>

В этом случае смещение адаптивных блоков будет выглядеть так, как показано на
рис. 1.8.
Блок 1

□Н5е1-4

Блок 2

□Н$е1-3

Блок 3

оКзеГ-З

Блок 4

о(1$е!-3

Блок 5

Рис. 1.8. Пример смещения адаптивных блоков с использованием класса оББзеБ

Смещение с помощью классов тагд'т

В Воо181гар устанавливать смещение адаптивным блокам также можно с помощью от-
ступов тагдБп (тагдБп-1еББ:аиБо И тагдБп-гБдЬБ аиБо). ЭТОТ вариант Смещения ПОЯВИЛСЯ бла-
годаря тому, что сетка в новых версиях Воо181гар основывается на С88 ПехЬох. Такой
вариант удобен, когда блоки необходимо сместить относительно друг друга на некото-
рую переменную величину. Для более удобного задания блокам отступов тагдБп мож-
но указать сокращенное обозначение классов: т1-аиБо, тг-аиБо, тБ-{ЬгеакроБпБ}-аиБо и
тг-{Ьгеакро1пг}-аиГо. Рассмотрим следующий код:

<сИу с1азз="гом">

<сНу сБазз="соБ-4">Блок 1</сИу>

<сНу сБазз="соБ-4 тБ-аиБо">Блок 2</<±еу>

</сИу>

<сИу с1азз="гом">

<сИу с1азз="со1-3">Блок 3</сНу>

<сИу с1азз=”со1-3 тБ-аиБо тг-аиБо">Блок 4</сНу>

<сИу с1азз="со1-3">Блок 5</с1Бу>

</сИу>

<сИу с1азз=”гом">

<сИу с1азз=”со1-4 тБ-аиБо тг-аиБо">Блок 6</сИу>

<сИу с1азз="со1-4 тБ-аиБо тг-аиБо">Блок 7</сИу>

</сНу>

В этом случае смещение адаптивных блоков будет выглядеть так, как показано на
рис. 1.9.

Рис. 1.9. Пример смещения адаптивных блоков с использованием класса тагдБп

* * *

Итак, мы познакомились с основными «строительными блоками», из которых создают-
ся макеты НТМЬ-страниц. Рассмотренные нами адаптивные блоки являются конечны-
ми элементами макета, в которые и размещается основной контент страницы.
Разберемся с использованием контрольных точек, рядов и колонок на простом примере
и создадим для этого страницу с двумя панелями: левой боковой панелью (на которой
может располагаться боковое меню) и центральной панелью с основным контентом.
Назовем эту страницу Ьоо1_ро1п1.И1т1 (листинг 1.1).

Листинг 1.1. Программный код страницы Ьоо(_ро1п(.Мт1

{% ехбепбз "зЬор/Ьазе.Ылп!” %}

<сИу с1азз=’’сопба1пег-Б1и1с1 Бех11-сеп11ег">

{% Ыоск йеабег %}

<сИу с1азз="гом бехб-сепбег">

<Ь4Жонтрольные точки в Вообзбгар 5</И4>

</сИч>

{% епбЫоск йеабег %}

<сИч с1азз=”гом бехб-сепбег">

<!— Это начало боковой панели —>

«ИV с1азз=”со1-12 001-зш-б со1-т6-6 со!-1д-4 со!-х1-3 со1-хх1-2”>

{% Ыоск зЫеЬаг %}

<Ъ5>Боковая панель</115>

<61ч с1азз=”гом ту-2 бех1:-мЫ1:е">

<61ч с1азз="со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 1</сИч>

<61ч с1азз=”со1 тх-2 ту-2 Ьд-ргтагу бех11-сепбег">Блок 2</с11ч>

</сПч>

{% епсЫоск зЫеЬаг %}

<	/сИч>

<	!— Конец боковой панели —>

<	!— Это начало центральной панели —>

<61ч с1азз=”со1-12 со1-зт-6 со!-т6-6 со!-1д-8 со!-х1-7 со1-хх1-10"
збу1е=”Ьаскдгоипс1-со1ог :гдЬ (224, 224, 224) ;">

{% Ыоск сопбепЫ}

<Ь5>Центральная панель</115>

<6Ы Ыазз="гом ту-2 бехб-^Ыбе">

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег'’>Блок 3</сИч>

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 4</Ыч>

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 5</сИч>

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 6</сИч>

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 7</Ыч>

<6Ы с1азз="со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 8</сИч>

<6Ы с1азз="со1 тх-2 ту-2 Ьд-ргтагу бехб-сепбег”>Блок 9</Ыч>

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргттагу бехб-сепбег”>Блок 10</сИч>

<6Ы с1азз=”со1 тх-2 ту-2 Ьд-ргттагу бехб-сепбег”>Блок 11</Ыч>

<6Ы с1азз="со1 тх-2 ту-2 Ьд-ргттагу бехб-сепбег”>Блок 12</сИч>
</сНч>

{% епсЫоск сопбепб %}

</сНч>

<!— Конец центральной панели —>

</61Ч>

</аы>
Контрольные точки в Воо1$1гар 5

Боковая панель Центральная панель

Ц23Ш1 Е2ЕЕН Е15ЕН ВЁ23Я Н32ЕН ЕЕЗОВ

Контрольные точки в ВооЫгар 5

Боковая	Центральная панель

панель	н

Блок

1

НИМ &то*  ь*0* I Ьлох  Блок  Блок  Блок  Блок  Блок  блох
Блок  з|4Н5Нб|7На|9|юНи

Боковая панель

Контрольные точки в ВооШгар 5

Центральная панель

Блок!  Блок2	 Блок  Блом  Блок  Блок  Блок

ЫнЫ 5	4	, I 6 I 7

Блок Н Блок I Блок
8 I	9	I	10

Блок 11

Блок 12

Боковая панель

Блок 1 Н Блок 2

Боковая панель

Контрольные точки в ВооШгар 5

Центральная панель

Блок  Блок  Блок  Блок  Блок  Блок  Блок

Блок 10 Н Блок 11 Н Блок 12

Контрольные точки в Вооиггар 5

Центральная панель

Блах 1	 Блох 2

Блок
4

Блох

5

Блок

9

Блок
10

Контрольные точки в ВооЫгар 5

Боковая панель

Центральная панель

Блок 1

Блок 2

Рис. 1.10. Адаптация НТМЬ-страницы к разным разрешениям экрана
Рассмотрим структуру этого программного кода. Здесь создан «резиновый» контейнер
(сопШпег-ПиМ) и в него вложена строка (гом). Эта строка с использованием контроль-
ных точек разбита на два блока, или на две панели:

♦	левую боковую панель с адаптивной шириной:

<сИу с1азз=”со1-12 со1-зт-6 со!-тс1-6 со!-1д-4 со!-х!-3 со1-хх1-2’’>

♦	центральную панель с адаптивной шириной:

<сИу с1азз=”со1-12 со1-зт-6 со!-тс1-6 со!-1д-8 со!-х!-7 со1-хх1-10”

При минимальном размере экрана обе панели будут занимать все 12 колонок сетки,
т. к. для них заданы контрольные точки со1-12 (т. е. одна панель будет располагаться
под другой). При ширине экрана в контрольных точках зт и та обе панели будут зани-
мать по 6 колонок сетки и располагаться рядом друг с другом (для обеих панелей зада-
ны контрольные точки со1-зт-б и со1-та-б). А вот при больших разрешениях экрана левая
боковая панель будет занимать либо 4, либо 3, либо 2 колонки сетки (со1-1д-4 со1-х1-з
со1-хх1-2). При этом центральная панель будет занимать либо 8, либо 7, либо 10 колонок
сетки (со!-1д-8 со1-х1-7 со!-хх1-10).

В левую боковую панель вложено 2 адаптивных блока (со1), а в центральную панель —
10 адаптивных блоков (со1). То есть адаптивные блоки будут занимать весь ряд, но
в зависимости от разрешения экрана их расположение и размеры будут меняться.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница Ьоо(_рот(.Мт1.

Если открыть эту страницу (Ьоо1_ро1п1.И1т1) в рамках интерактивной цифровой плат-
формы и менять ширину окна браузера (имитировать устройства с разным размером
и разрешением экрана), то мы получим следующие результаты (рис. 1.10).

Как можно здесь видеть, при любом размере и разрешении экрана в левой боковой па-
нели присутствуют два адаптивных блока, а на центральной панели — 10 адаптивных
блоков. По мере уменьшения ширины экрана размеры и положение встроенных в пане-
ли адаптивных блоков меняется, при этом информация в каждом блоке отображается
корректно и без искажений. Такая страница будет хорошо читаться как на экране ком-
пьютера, так и на экране смартфона.

1.5. Простейшая НТМЬстраница

с подключением фреймворка Воо($(гар

Чтобы процесс создания макетов страниц был более понятен, расмотрим несколько
простых примеров. В этих примерах к шаблонам страниц подключаются локальные
файлы Воо1з1гар — т. е. в текущем проекте была создана папка 81аИс и в нее перенесены
две папки со скачанными файлами Воо1з1гар: С88 и ]8.

Для начала создадим контейнер фиксированной ширины с одним рядом (строкой),
в котором находится один адаптивный блок из 12 колонок, — т. е. он будет занимать
всю ширину ряда (листинг 1.2, страница 81ай_1 .К1т1).
Листинг 1.2. Программный код страницы 8(а11_1.Гйт1

{% ехбепбз "зйор/Ьазе.ЫтГ’ %}

{% Ыоск йеабег %}

«Нч Ыазз="гом бехЫсепбег">

<Ъ4>Простейшая страница в Воокзкгар 5</Ь4>

</сЫ>

{% епсЫоск йеабег %}

{% Ыоск сопкепЫ}

<6Ы с1азз=”сопка1пег">

<6Ы Ыазз="гом”>

<(Ы с1азз=”со1”>

<Ы>Это страница Вообзбгар</Ы>

<р>На странице создан контейнер фиксированной ширины с1азз=”сопка1пег.”</р>

<р>В контейнер вложена одна строка Ыазз="гом".</р>

<р>В строке находится один адаптивный блок с1азз=”со1”.</р>

<р>С изменением размера окна браузера ширина элементов контейнера будет
меняться в разных контрольных точках.</р>

</бЫ>

</бЫ>

</сНч>

{% епсЫоск сопбепб %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 81аН_1.Ыт1.

При минимальном размере окна браузера эта страница будет выглядеть так, как пока-
зано на рис. 1.11.

Простейшая страница в ВооШгар 5

Это страница Воо1з1гар

На странице создан контейнер фиксированной ширины с!аа -"соп1а1пег.

8 контейнер вложена одна строка с1а55="гою".

В строке находится один адаптивный блок с1а$5= 'соГ'.

С изменением размера окна браузера ширина элементов контейнера будет меняться в разных
контрольных точках.

Рис. 1.11. Простейшая НТМЬ-страница, созданная на основе ВооЫгар

Как здесь можно видеть, с параметрами по умолчанию текст на странице показан чер-
ным цветом, при этом отсутствуют какие-либо признаки, по которым можно опреде-
лить размер и положение адаптивного блока — например, рамки или выделение блока
цветом. Для того чтобы наглядно продемонстрировать возможности макетирования
страниц, необходимо явно показать границы блока. Это можно сделать либо с по-
мощью цветного фона, либо созданием ограничительной рамки.

1.6. Задание цвета элементам НТМЬ-страниц

Для задания цвета в Воо181гар предусмотрено несколько полезных классов. Класс Ьд
позволяет задать 9 цветов для фона:

♦	с1азз=”Ьд-рг1тагу";	♦	с1азз="Ьд-1пБо";
♦	с!азз="Ьд-зесопс1агу”;	♦	с1азз=”Ьд-11дЪк'г
♦	с!азз="Ьд-зиссезз";	♦	с!азз="Ьд-с1агк";
♦	с!азз=”Ьд-с1апдег”;	♦	с1азз="Ьд-^Мке"
♦	с1азз="Ьд-шгп1пд";		

Пример кода НТМЬ-страницы, в которой показано использование класса Ьд для задания
цвета фону, приведен в листинге 1.3 (страница со1ог_Ьд.И1т1).

Листинг 1.3. Страница со1ог_Ьд.Ыт1

{% ехкепйз "зЬор/Ьазе.ЬБт!" %}

{% Ь1оск кеайег %}

<сИу с1азз="гом кехк-сепкег">

<Б4>Задание цвета фона элементами НТМЬ страниц</Б4>

</сПу>

{% епбЫоск кеайег %}

{% Ыоск сопкепк%}

<сИу с1азз=”сопка1пег”>

<сЦу с1азз=”гом”>Первая строка</сИу>

<сПу с1азз="гом">

<сИу с1азз=”со1 Ьд-рг1тагу">Блок 1</сПу>

<сИу с1азз=”со1 Ьд-зесопс1агу">Блок 2</<Пу>

<сИу с1азз=”со1 Ьд-зиссезз">Блок 3</сИу>

<сИу с1азз=”со! Ьд-с1апдег">Блок 4</сПу>

<сПу с1азз=”со! Ьд-магп1пд">Блок 5</сПу>

<сИу с1азз="со! Ьд-1пБо">Блок 6</сИу>

<сИу с1азз="со! Ьд-ИдЫ1">Блок 7</сИу>

<сПу с1азз=”со! Ьд-с1агк">Блок 8</сПу>

<сИу с1азз=”со! Ьд-мЫБе">Блок 9</сПу>

</сИу>

</сИу>

{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница со1ог_Ьд.Ыт1
В окне браузера эта страница будет выглядеть так, как показано на рис. 1.12.

Текст Блок 8 здесь не виден, т. к. и шрифт, и фон имеют одинаковый (черный) цвет.

Для изменения цвета текста служит класс Рехр, который позволяет задать 10 цветов:

♦	с1азз="БехР-рг1тагу”;	♦	с1азз="Бехк-1пБо”;
♦	с1азз="Бехк-зесопс1агу";	♦	с1азз="БехР-11дкк'г
♦	с1азз="Бехк-зиссезз";	♦	с1азз="Бехк-с1агк";
♦	с1азз="Бехк-с1апдег";	♦	с1азз="кехк-тикесГг
♦	с1азз=”Бехк-магп1пд”;	♦	с1азз=”кехк-мЫке”.

Задание цвета фона элементам НТМЬ страниц

Первая строка

Блок 5	Блок 5

Блок 7

Блок 9

Рис. 1.12. Образцы цвета фона в Воо1з1гар

Пример кода НТМЬ-страницы, в которой показано использование класса техт для зада-
ния цвета шрифту, приведен в листинге 1.4 (страница со1ог-1ех1.К1т1).

Листинг 1.4. Страница со1ог-1ехТ.Ыт1

{% ехкепбз "зЬор/Ьазе.ЫдпГ’ %}

{% Ь1оск кеайег %}

<сИу с1азз=”гом кехк-сепкег">

<Б4>Задание цвета текста</Б4>

</сИу>

{% епбЫоск кеайег %}

{% Ь1оск сопкепк%}

<сИу с1азз=”сопка1пег”>

<сИу с1азз=”гом”>Первая строка</сИу>

<сЦу с1азз=”гом”>

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

</сИу>

</сИу>

{% епбЫоск сопкепк %}

кехк-рг1шагу">Блок 1</сИу>
кехк-зесопс!агу">Блок 2</сИу>
БехР-зиссезз">Блок 3</сИу>
БехР-с1апдег">Блок 4</с1гу>
РехР-магп1пд">Блок 5</сНу>
БехР-1пБо">Блок 6</сИу>
БехР-11дЫ1">Блок 7</сИу>
БехР-с1агк">Блок 8</сИу>
РехР-ти11есГ>Блок 9</сИу>
РехР-мЫке">Блок 10</сИу>
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница со1ог-1ехТ.Ыт1

В окне браузера эта страница будет будет выглядеть так, как показано на рис. 1.13, —
текст Блок 7 и Блок 10 здесь почти не виден, поскольку и шрифт, и фон имеют похо-
жий цвет.

Задание цвета текста			
Первая строка  Блок 1 Блок 2	Блок 3 Блок	Блок 8	Блок 9

Рис. 1.13. Образцы цвета текста в ВооЫгар

Для того чтобы текст элемента всегда был виден, он должен иметь цвет, отличный от
цвета фона. Пример НТМЬ-кода страницы, в которой показано использование двух
классов: кехк и Ьд — для одновременного задания цвета для шрифта и для фона, приве-
ден в листинге 1.5 (страница со1ог_1ех!_Ьд.И1т1).

Листинг 1.5. Страница со1ог_1ех1_Ьд.Ыт1

{% ехкепбз "зЪор/Ьазе.Ъкт!" %}

{% Ыоск кеайег %}

«Цу с1азз=”гом кехк-сепкег">

<Ъ4>Задание цвета тексту и фону элементам НТМЬ страниц</И4>

</сИу>

{% епбЫоск кеайег %}

{% Ыоск сопкепк%}

<сИу с1азз=”сопка1пег">

<сИу с1азз="гом”>Первая строка</сИу>

<сИу с1азз=”гом”>

<сИу с1азз=”со1

<сИу с1азз="со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

«Цу с1азз=”со1

<сИу с1азз="со1

<сИу с1азз=”со1

<сИу с1азз=”со1

<сИу с1азз=”со1

</сИу>

</сИу>

{% епбЫоск сопкепк %}

кехк-ргтшагу Ьд-1пко">Блок1</с11У>
кехк-зесопс!агу">Блок2</с11У>
кехк-зиссезз Ьд-1пко">БлокЗ</сИу>
кехк-с!апдег">Блок4</с11У>

кехк-магптпд Ьд-1пко">Блок5</(Цу>
кехк-1пко">Блокб</сИу>

кехк-Идкк Ьд-рг1тагу">Блок7</сИу>
кехк-с!агк">Блок8</с11У>

кехк-тикес! Ьд-1пко">Блок9</сИу>
кехк-мМке Ьд-рг1тагу">Блок10</сИу>
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница со1ог_1ех1_Ьд.Ыт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 1.14. Теперь
текст во всех блоках стал видимым.

Задание цвета тексту и фону элементам НТМ1_ страниц

Первая строка

| Блок2

| Блок4

Блок?

БлокЗ

Рис. 1.14. Использование классов ТехТ и Ьд для задания цвета тексту и фону

1.7.	Задание отступов элементам макета НТМЬ-страниц

По умолчанию все адаптивные блоки «прилипают» друг к другу, однако достаточно
часто требуется отделить их друг от друга дополнительным пространством. Особенно
это актуально в тех случаях, когда они имеют рамки обрамления различных типов.

Для задания отступов (разрывов) между элементами НТМЬ-страниц и их содержимым
в Воо181гар предусмотрены два элемента, представляющие собой уникальные свойства
С88: тагд1п (имеет сокращение т) и расШпд (имеет сокращение р). Свойство тагд1п добав-
ляет отступы за пределами элемента, а расШпд — внутри элемента (например, контей-
нера). Синтаксис для задания отступов:

{ргорегЬу} {з1с1ез}-{з12е}

Здесь приняты следующие обозначения:

♦	ргорегЬу — СВОЙСТВО;

♦	зМез — сторона;

♦	з12е — размер.

Для свойства (ргорегьу) в коде программ допустимы следующие сокращения:

♦	т — для классов тагд1п, которые устанавливают отступы за пределами элемента.

♦	р — для классов расШпд, которые устанавливают отступы внутри элемента.

Параметр сторона (зЫез) может принимать сокращенные значения, которые устанав-
ливают следующие отступы:

♦	Ь — отступ В верхней части элемента (тагд!п-Ьор ИЛИ расШпд-Ьор);

♦	Ь — В НИЖНеЙ части элемента (тагд!п-ЬоЬЬот ИЛИ расШпд-ЬоЬЬот);

♦	з — В стартовой части элемента (зьагь), Т. е. слева (тагд!п-1еЬЬ ИЛИ рас!с11пд-1еьь);

♦	е — В конечной части элемента (епб), Т. е. справа (тагд!п-г1дЬЬ ИЛИ расШпд-пдМ);

♦	х — с двух сторон элемента по горизонтали (*-1еГь и *-г1дЬь);

♦	у — с двух сторон элемента по вертикали (*-ьор и *-Ьоььот);

♦	Ыапк — отступ со всех четырех сторон элемента.
Параметр размер (зЫе) может принимать следующие значения:

♦	о — нет отступов;

♦	1 — отступ, равный $зрасег * .25;

♦	2 — отступ, равный $зрасег * .5;

♦	3 — отступ, равный $зрасег;

♦	4 — отступ, равный $зрасег * 1.5;

♦	5 — отступ, равный $зрасег * 3;

♦	аи!о — отступ, равный авто.

Пояснение

Здесь $зрасег = 1гет. Кет— это единица типографики, равная корневому (базовому) значе-
нию размера шрифта (БопЫзЫе). Это значит, что 1гет всегда будет равен значению 1опы
заге, которое определено в НТМ1_. Для большинства браузеров размер шрифта по умол-
чанию 16 рх до тех пор, пока его не поменяют в настройках браузера (редко кто подобным
занимается). Поэтому, как правило, $зрасег = 1гет = 16 рх.

Пример НТМЬ-кода страницы, в которой показано использование отступов для раз-
деления адаптивных блоков, приведен в листинге 1.6 (страница врасе_1 .И1т1).

Листинг 1.6. Страница 8расе_1.Ыт1

{% ехТеМз "зкор/Ьазе.Ыт!" %}

{% Ыоск кеайег %}

<сПу с1азз=”гом кехк-сепкег">

<Ъ4>Использование отступов в Воокзкгар 5</Ь4>

</сПу>

{% епбЫоск кеайег %}

{% Ыоск сопкепЫ}

«Цу с1азз=”сопка1пег">

<сИу с1азз="гом Ьд-зиссезз кехк-мЫке">Первая строка</сПу>

<сПу с1азз=”гом”>

<сПу с1азз=”со1 тх-2 Ьд-ргттагу кехк-^Ыке">Блок 1</сПу>

<скЫ с1азз=”со1 тх-2 Ьд-ргтагу кехк-^Ыке">Блок 2</сПу>

«Цу с1азз=”со1 тх-2 Ьд-ргтагу кехк-мЬ1ке">Блок 3</сЫт>

</сПу>

</сПу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница зрасе_1.Ыт1.

Здесь для адаптивных блоков вставлены горизонтальные отступы в две позиции (тх-2).

В окне браузера эта страница будет выглядеть так, как показано на рис. 1.15.
Рис. 1.15. Использование горизонтальных отступов между адаптивными блоками

Как здесь можно видеть, между адаптивными блоками появились горизонтальные от-
ступы, однако между рядами (строками) нет разрывов и они вплотную примыкают друг
к другу. Исправим это и вставим отступы между рядами (листинг 1.7, страница
8расе_2.И1т1).

Листинг 1.7. Страница 8расе_2.Ыт1

{% ехкепбз "зЪор/Ьазе.Ъкт!" %}

{% Ыоск кеайег %}

<ску с1азз=”гом кехк-сепкег">

<Ъ4>Использование отступов в Воокзкгар 5</Н4>

</сЫ>

{% епсЫоск кеайег %}

{% Ыоск сопкепк%}

<(Ы с1азз=”сопка1пег”>

<Ы Ыазз="гом Ьд-зиссезз кехк-мЫке">Первая строка</скЫ>

<Ы Ыазз="гом ту-2">

<Ы с1азз=”со1 тх-2 Ьд-ргтагу кехк-мЫке">Блок 1</сЫт>

<(Ы с1азз=”со1 тх-2 Ьд-ргтагу кехк-мЫке">Блок 2</Ыу>

<Ы с1азз=”со1 тх-2 Ьд-ргтагу кехк-мЫке">Блок 3</сЫт>

</сЫ>

</сЫ>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 8расе_2.Ыт1

Здесь для второго ряда вставлен вертикальный отступ в две позиции (ту-2). В окне
браузера эта страница будет выглядеть так, как показано на рис. 1.16, — между рядами
появился вертикальный отступ.

Теперь посмотрим, как можно создать отступы внутри элемента. Пример НТМЬ-кода
страницы, в которой показано использование отступов в теле адаптивных блоков, при-
веден в листинге 1.8 (страница 8расе_З.И1т1).

Рис. 1.16. Использование вертикальных отступов между рядами
Листинг 1.8. Страница зрасе З.Ыт!

{% ехкепбз "зЬор/Ьазе.ЫтГ' %}

{% Ыоск кеайег %}

<(Ы с1азз=”гом кехк-сепкег">

<Ъ4>Использование отступов в Воокзкгар 5</Ь4>

</сНу>

{% епсЫоск кеайег %}

{% Ыоск сопкепЫ}

<(Ы с1азз=”сопка1пег”>

<(Ы с1азз=”гом Ьд-зиссезз Техк-мЫке">11ервая строка</скЫ>

<(Ы с1азз=”гом ту-2”>

<сИу с1азз=”со1 тх-2 ру-5 Ьд-рЫтагу Техк-мЫке">Блок 1</Ыу>

<(Ы с1азз=”со1 тх-2 ру-5 Ьд-ргтагу Техк-мЫке">Блок 2</сИу>

<сИу с1азз=”со1 тх-2 ру-5 Ьд-ргтагу Техк-мЫке">Блок 3</Ыу>

</сЫ>

</сЫ>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница зрасеЗ.Ыт!

Здесь для адаптивных блоков вставлены горизонтальные отступы в две позиции (тх-2)
и внутренний вертикальный отступ (между текстом и внешней границей) в пять пози-
ций (ру-5). В окне браузера эта страница будет выглядеть так, как показано на
рис. 1.17, — между текстом внутри адаптивных блоков и их внешней границей появи-
лись отступы.

Рис. 1.17. Использование внутренних отступов в теле адаптивных блоков

Обратите внимание, что на всех этих НТМЬ-страницах текст внутри адаптивных бло-
ков по умолчанию прижимается к левому краю — т. е. к началу блока. Разберемся
теперь, как можно выравнивать содержимое блоков НТМЬ-страниц.
1.8.	Выравнивание содержимого
в адаптивных блоках НТМЬ-страниц

Начнем с самого простого — выравнивания текста по горизонтальной оси (х). Для это-
го нужно использовать класс техт, который обеспечивает следующие варианты вырав-
нивания:

♦	зыы (по умолчанию) — по левой стороне;

♦	епа — по правой стороне;

♦	сепБег — ПО центру.

В программном коде горизонтальное выравнивание текста реализуется так:

♦	с1азз=”ТехЫзкагЫ;

♦	с1азз=”Техк-сепкег”;

♦	с1азз=”Техк-епсГ.

Пример НТМЬ-кода страницы, в которой показано выравнивание текста в теле адап-
тивных блоков, приведен в листинге 1.9 (страница аНдптеп1_1 .И1т1).

Листинг 1.9. Страница аНдптегй_1.Гйт1

{% ехЁепаз "зкор/Ьазе.ЫтГ' %}

{% Ыоск йеайег %}

<сЫ Ыазз=”гом кехк-сепкег">

<Б4>Вьфавнивание содержимого адаптивных блоков</В4>

</сИу>

{% епсЫоск кеайег %}

{% Ыоск сопкепЫ}

<Ы с1азз="сопка1пег БехЫсепкег">

<Ы Ыазз="гом Ьд-зиссезз Техк-мЫке">

<сЫ с1азз=”со1”>Блок в первой строке</скЫ>

</сы>

<Ы Ыазз="гом ту-2 БехЫмЫТе">

<Ы с1азз=”со1 тх-2 Ьд-рг1тагу">Блок 1</сИу>

<Ы с1азз=”со1 тх-2 Ьд-рг1тагу">Блок 2</сЫу>

<сЫ с1азз=”со1 тх-2 Ьд-рг1тагу">Блок 3</сИу>

</сЫ>

</ы>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница аНдптеЫ_1 .Мт!

Здесь выравнивание текста задано в родительском классе сопышег (ыхысеыег). В этом
случае во всех дочерних элементах текст будет выровнен по центру. В окне браузера
Выравнивание содержимого адаптивных блоков

Блок!

Блок в первой строке

Блок 2

Блок 3

Рис. 1.18. Центрирование текста во всех адаптивных блоках

эта страница будет выглядеть так, как показано на рис. 1.18, — во всех дочерних эле-
ментах контейнера текст выровнен по центру адаптивного блока.

Немного изменим код этого примера и во втором ряду поменяем параметры выравни-
вания текста (листинг 1.10, страница аНдптеп1_2.И1т1).

Листинг 1.10. Страница аНдптеп1_2.Ыт1

{% ехкепбз "зйор/Ьазе.йкт!" %}

{% Ыоск йеайег %}

<ску с1азз="гом кехк-сепкег">

<Ъ4>Вьфавнивание содержимого адаптивных блоков</И4>

</сЫ>

{% епсЫоск йеайег %}

{% Ыоск сопкепЫ}

<Ы с1азз=”сопка!пег кехк-сепкег">

<(Ы Ыазз=”гом Ьд-зиссезз кехк-мЫке">

<(Ы с1азз=”со1”>Блок в первой строке</сПу>

</Ы>

<(Ы Ыазз="гом ту-2 РехР-мЫке">

<Ы с1азз=”со1 тх-2 Ьд-ргтагу кехк-зкагк">Блок 1</Ыу>

<Ы с1азз=”со1 тх-2 Ьд-рг1тагу">Блок 2</Ыу>

<Ы с1азз=”со1 тх-2 Ьд-ргтагу кехк-епсГ>Блок 3</сИу>

</сЫ>

</сЫ>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница аНдптепТ_2.Ыт1

Здесь выравнивание текста по центру определено в родительском классе сопышег (ыхы
сепрег). Однако во второй строке для первого блока задано выравнивание по левому
краю (кехызыы), а для третьего блока — по правому краю (кехыепа). В окне браузера
данная страница будет выглядеть так, как показано на рис. 1.19, — в адаптивных бло-
ках текст выровнен по-разному: по центру, по левому и по правому краю.

Выравнивание содержимого адаптивных блоков

Блок в первой строке

Блок 1

Блок 2

Блок 3

Рис. 1.19. Варианты выравнивания текста в адаптивных блоках
1.9.	Обозначение границ элементов макета НТМЬ-страниц

В Воо181гар есть утилиты для формирования границ элементов макета, которые позво-
ляют создать рамку, радиус закругления рамки, ее толщину и цвет. Рамки отлично под-
ходят для явного выделения блоков, для изображений, кнопок или любых других эле-
ментов интерфейса. Рамка может обрамлять элемент полностью или только одну из его
сторон (рис. 1.20).

Рис. 1.20. Различные варианты обозначения границы элемента

Для добавления границ применяются следующие классы:

♦	с1азз="Ьогс1ег” — граница с четырех сторон;

♦	с1азз=”Ьогс1ег-гор” — граница сверху;

♦	с1азз="Ьогс1ег-епсГ — граница справа;

♦	с1азз="Ьогс1ег-Ьоттот" — граница снизу;

♦	с1азз=пьогс1ег-зтагг” — граница слева.

Ширину рамки можно задать с помощью следующих классов:

♦	с!азз="Ьогс1ег Ьогс1ег-1";

♦	с!азз="Ьогс1ег ЬогЬег-2”;

♦	с!азз=”Ьогс1ег ЬогЬег-З”;

♦	с!азз=”Ьогс1ег Ьогс1ег-4”;

♦	с!азз="Ьогс1ег Ьогс1ег-5".

Пример НТМЬ-кода страницы, в которой показано создание границ вокруг адаптивных
блоков, приведен в листинге 1.11 (страница Ьогс1ег_1 .К1т1).

Листинг 1.11. Страница Ьогс1ег_1.Щт1

{% ехЬепЬз ’’зЬор/Ьазе.ЫтГ’ %}

{% Ыоск ЬеаЬег %}

«ГЫ с1азз=”гом кехЫсепЬег">

<Ь4>Создание рамок для адаптивных блоков</Н4>

</(±Ы>

{% епсЫоск ЬеаЬег %}

{% Ыоск сопкепЫ}

<сНу с1азз=”сопка1пег кехк-сепкег Ьд-рг1шагу">

<сЦу Ыазз="гом Ьд-зиссезз кехк-^Ыке">
<<±Ы с1азз=”со1”>0бозначение границ вокруг адаптивных 6локов</сИу>

</сИу>

<сИV с1азз="гом ту-2">

<сНу с1азз=”со1 тх-2 Ьд-гпБо Ьогс1ег Ьогс1ег-5">Блок 1</сИу>

<сНу с1азз="со1 тх-2 Ьд-гпБо Ьогс1ег-кор Ьогс1ег-5">Блок 2</сНу>

<сИу с1азз=”со1 тх-2 Ьд-гпБо Ьогс1ег-ЬоЫот Ьогс1ег-5”>Блок 3</с11у>

<сНу с1азз=”со1 тх-2 ЬдЫпБо ЬоЫег-зБагБ Ьогс1ег-5”>Блок 4</<±Ы>

<сНу с1азз=”со1 тх-2 Ьд-гпБо Ьогс1ег-епс1 Ьогс1ег-5">Блок 5</Ыу>

</сИу>

<сНу с1азз=’’гом”></с11у>

</41у>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке
Ьогбег_1 .Ыт1

Здесь созданы границы вокруг адаптивных блоков с разных сторон, цвет линии задан
по умолчанию, а толщина — Ьогйег-5. В окне браузера эта страница будет выглядеть
так, как показано на рис. 1.21, — адаптивные блоки имеют ограничительные линии,
расположенные с разных сторон.

Создание рамок для адаптивных блоков

Рис. 1.21. Различные варианты обозначения границы вокруг адаптивного блока

Есть еще один способ обрамления адаптивных блоков, позволяющий убирать границу
с одной из сторон. Для этих целей используется следующий класс:

♦	с1азз=”Ьогс1ег-0" — убирается ограничительная линия с четырех сторон;

♦	с1азз="Ьогс1ег-тор-0” — убирается ограничительная линия сверху;

♦	с1азз="Ьогс1ег-епс1-0” — убирается ограничительная линия справа;

♦	с1азз="Ьогс1ег-ЬоШ)т-0” — убирается ограничительная линия снизу;

♦	с1азз="Ьогс1ег-зТагБ-0’' — убирается ограничительная линия слева.

Пример НТМЬ-кода страницы, в которой показано создание границ вокруг адаптивных
блоков при удалении ограничительной линии с одной из сторон, приведен в листин-
ге 1.12 (страница Ьогс1ег_2.К1т1).

Листинг 1.12. Страница Ьогс1ег_2.Ыт1

{% ехБепйз "зБор/Ьазе.ББт!" %}

{% Ыоск кеайег %}

«ТЫ с1азз=”гом БехЫсепкег">

<Б4>Создание рамок для адаптивных блоков</Ь4>
</с1гу>

{% епсЫоск кеайег %}

{% Ыоск сопкепкк}

<сИу с1азз="сопка1пег кехк-сепкег Ьд-рг1шагу">

<Ыу с1азз="гом Ьд-зиссезз кехк-мЫке">

<сИу с1азз=”со1”>0бозначение границ вокруг адаптивных блоков</скЫ>

</Ыу>

<сИу с1азз="гом ту-2”>

<сИу с1азз=”со1 тх-2 Ьд-гпко ЬоЫег Ьогс1ег-0">Блок 1</Ыу>

<сИу с1азз=”со1 тх-2 Ьд-гпко ЬогсЫ Ьогс1ег-5 Ьогс1ег-кор-0">Блок 2</сЫт>

<сИу с1азз=”со1 тх-2 Ьд-гпБо ЬоЫег Ьогс1ег-5 Ьогс1ег-епс1-0”>Блок 3</с1гу>

<сИу с1азз=”со1 тх-2 Ьд-гпБо ЬогсЫ Ьогс1ег-5 Ьогс1ег-Ьоккот-0”>Блок 4</сЫт>

<сИу с1азз=”со1 тх-2 Ьд-гпко ЬоЫег Ьогс1ег-5 Ьогс1ег-зкагк-0">Блок 5</сЫ>

</сИу>

<с11у с1азз="гом”х/сИу>

</Ыу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница Ьогс!ег_2.Щт1

Здесь заданы границы вокруг адаптивных блоков с разных сторон. Цвет линии уста-
новлен по умолчанию, а толщина — ЬогсЫ-5. В окне браузера эта страница будет вы-
глядеть так, как показано на рис. 1.22, — ограничительную линию можно удалить либо
со всех сторон адаптивного блока, либо с одной из его сторон.

Создание рамок для адаптивных блоков

Обозначение границ вокруг аддитивных блоков

Рис. 1.22. Различные варианты обозначения границы вокруг адаптивного блока путем удаления
ограничительной линии с одной из сторон

Изменить цвет границы вокруг адаптивного блока можно с помощью следующих клас-
сов:

♦	с1азз="Ьогс1ег	Ьогс1ег-рг1тагу ”;	♦	с1азз=”Ьогс1ег	Ьогс1ег-1пБо";
♦	с1азз=”Ьогс1ег	Ьогс1ег-зесопс1агу ";	♦	с1азз=”Ьогс1ег	Ьогбег-ИдЬк”
♦	с1азз="Ьогс1ег	ЬогсЫ-зиссезз";	♦	с1азз=”Ьогс1ег	Ьогс1ег-с1агк";
♦	с1азз=”Ьогс1ег	Ьогйег-йапдег";	♦	с1азз=”Ьогс1ег	Ьогбег-тикесГ.
♦	с1азз="Ьогс1ег	Ьогбег-маыппд";	♦	с1азз=”Ьогс1ег	Ьогбег-мМке”.

Пример НТМЬ-кода страницы, в которой показано создание границ вокруг адаптивных
блоков разного цвета, приведен в листинге 1.13 (страница Ьогс1ег_со1ог.К1т1).
Листинг 1.13. Страница Ьогс1ег_со1ог.Гйт1

{% ехкепЬз "зЬор/Ьазе.ЫтГ’ %}

{% Ыоск ЬеаЬег %}

<(Ы с1азз=”гом кехк-сепкег">

<Ъ4>Задание цвета рамок для адаптивных блоков</Н4>

</сЫ>

{% епсЫоск ЬеаЬег %}

{% Ыоск сопкепЫ}

<Ы с1азз=”сопка1пег кехк-сепкег">

<(Ы Ыазз=”гом Ьд-зиссезз Ьехк-мЫке">

<Ы с!азз=”со1”>0бозначение границ вокруг адаптивных 6локов</сНу>
</(Ы>

<(Ы Ыазз=”гом ту-2”>

<Ы с1азз=”со! тх-2 Ьд-гпЬо ЬоЫег ЬогЬег-5 Ьогс1ег-рг1тагу">Блок 1</сИу>

<Ы с1азз=”со! тх-2 Ьд-гпБо ЬогЬег ЬогЬег-5 ЬогЬег-зесопс1агу”>Блок 2</сИу>

<(Ы с1азз=”со! тх-2 Ьд-гпБо ЬоЫег ЬогЬег-5 ЬогЬег-зиссезз”>Блок 3</Ыу>

<Ы с1азз=”со! тх-2 Ьд-гпБо ЬогЬег ЬогЬег-5 ЬогЬег-с1апдег”>Блок 4</Ыу>

<Ы с1азз=”со! тх-2 Ьд-гпБо ЬогЬег ЬогЬег-5 ЬогЬег-магп1пд”>Блок 5</(±Ы>
<Ы с1азз="со! тх-2 Ьд-ргтагу ЬоЫег ЬогЬег-5 Ьогс1ег-1пБо”>Блок 6</с1гу>
<Ы с1азз=”со! тх-2 Ьд-гпБо ЬогЬег ЬогЬег-5 Ьогс1ег-11дЫ”>Блок 7</сЫт>
<Ы с1азз=”со! тх-2 Ьд-гпБо ЬоЫег ЬогЬег-5 Ьогс1ег-с1агк">Блок 8</Ыу>
<Ы с1азз=”со! тх-2 Ьд-гпБо ЬогЬег ЬогЬег-5 Ьогс1ег-тиЬесГ>Блок 9</Ыу>
<с11У с1азз=”со! тх-2 Ьд-гпБо ЬоЫег ЬоЫег-5 Ьогс1ег-Ы1Ье”>Блок 10</Ыу>
</Ы>

<41тс с1азз="гом”></Ыу>

</с11у>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница Ьогбег_со1ог.Ыт1

Здесь заданы цвета рамок границы вокруг адаптивных блоков с разных сторон толщи-
ной линии ЬогЬег-5. В окне браузера эта страница будет выглядеть так, как показано на
рис. 1.23, — для ограничительных рамок можно задавать разные цвета.

Обратите внимание на Блок 9, где почти не видно ограничительных рамок. Это связано
с тем, что ограничительная рамка имеет цвет, близкий к цвету фона.

Задание цвета рамок для адаптивных блоков

Обозначение границ вокруг адаптивных блоков

Блок

1

Блок

Блок

5

Блок

4

Блок

5

Блок

Блок

8

Блок
9

Блок 10
Углы ограничительных рамок можно скруглить — для этого предусмотрены следую-
щие классы:

♦	Ыазз=”гоипс1есГ;	♦	Ыазз="гоипс1ес1-зкагЫ;
♦	с1аз з=” гоипсЫ-Бор ”;	♦	Ыазз=”гоипс1ес1-с1гс1е”
♦	с1аз з=” гоипсЫ-епсГ;	♦	с1аз з=” гоипсЫ-рШ".
♦	с1аз з=” гоипсЫ-ЬоЫот";		

Пример НТМЬ-кода страницы, в которой показано создание рамок со скругленными
углами, приведен в листинге 1.14 (страница Ьогс1ег_гас1|и8.К1т1).

Листинг 1.14. Страница Ьогс1ег_гас1|и§.Гйт1

{% ехГеМз "зЬор/Ьазе.ЫтГ' %}

{% Ыоск кеайег %}

«ГЫ с1азз=”гом кехк-сепкег">

<Б4>Скругление рамок адаптивных блоков</Ь4>

</сПу>

{% епсЫоск кеайег %}

{% Ыоск сопкепЫ}

<сПу Ыазз="сопка1пег БехЫсепкег">

«Пу Ыазз=”гом Ьд-зиссезз Гех1с-мМ1се">

<скЫ с1азз=”со1”>0бозначение границ вокруг адаптивных 6локов</сИу>

</Щу>

<(±Ы Ыазз=”гом ту-2”>

<(±Ы	с1азз=”со1	тх-2	Ьд-шгпгпд	ЬогсЫ ЬогсЫ-З ЬогсЫ-рЫтагу			гоипс1есГ>Блок 1</сЫл>
<(±Ы	с1азз="со1	тх-2	Ьд-магпгпд	ЬоЫег	ЬоЫег-3	ЬоЫег-рЫтагу	гоипс!ес1-кор">Блок 2</Ыу>
<(±ы	с1азз="со1	тх-2	Ьд-шгпгпд	ЬоЫег	Ьогс1ег-3	ЬогсЫ-рЫтагу	гоипс!ес1-епсГ>Блок 3</сПу>
<(±Ы	с1азз="со1	тх-2	Ьд-шгпгпд	ЬоЫег	Ьогс1ег-3	Ьогс1ег-рг1тагу	гоипс!ес1-ЬоЫот">Блок 4</сПу>
<(±Ы	с1азз="со1	тх-2	Ьд-шгпгпд	ЬоЫег	Ьогс1ег-3	Ьогс1ег-рг1тагу	гоипс!ес1-зЫЫ">Блок 5</сИу>
<(±ы	с1азз="со1	тх-2	Ьд-шгпгпд	ЬоЫег	Ьогс1ег-3	ЬогсЫ-рЫтагу	гоипс!ес1-с1гс1е’’>Блок 6</сПу>
<скЫ	с1азз=”со1	тх-2	Ьд-магпгпд Ьогс1ег Ьогйег-			3 Ьогс1ег-рг1тагу гоипс!ес1-р1Н”>Блок 7</сПу>	

</с1гу>

<сИу с1азз=”го^"></сПу>

</с1гу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница Ьогс1ег_гас1|и8.№т1.

Здесь заданы рамки вокруг адаптивных блоков с толщиной линии ЬогсЫ-з, при этом
реализованы разные варианты скругленных углов. В окне браузера эта страница будет
выглядеть так, как показано на рис. 1.24.

Для задания радиуса скругления углов ограничительных рамок используются следую-
щие классы:
Рис. 1.24. Различные варианты скругленных углов рамок вокруг адаптивного блока

♦ с!азз="гоипс1ес1-0”;

♦ с1азз="гоипс!ес1-1”;

♦ с1азз="гоипс!ес1-2";

♦ с1азз="гоипс!ес1-3”;

♦ с1азз="гоипс!ес1-4”;

♦ с1азз="гоипс!ес1-5".

Пример НТМЬ-кода страницы, в которой показано создание рамок с разными радиуса-
ми скругления углов, приведен в листинге 1.15 (страница Ьогс1ег_гас1|и8_1.К1т1).

Листинг 1.15. Страница Ьогс1ег_гас1ш8_1.Мт1

{% ехЬепЬз ’’зЬор/Ьазе.ЫтГ' %}

{% Ыоск ЬеаЬег %}

<(Ы с1азз=”гом кехк-сепкег">

<Ъ4>Скругление рамок адаптивных блоков</Н4>

</сЫ>

{% епсЫоск ЬеаЬег %}

{% Ыоск сопкепЫ}

<Ыу с1азз=”сопка1пег кехк-сепкег">

<(Ы Ыазз=”гом Ьд-зиссезз кехк-мЫке">

<Ы с!азз=”со1”>0бозначение границ вокруг адаптивных 6локов</сИу>

</(Ы>

<ЬЫ Ыазз=”гом ту-2”>

<Ы с1азз=”со!

<Ы с1азз=”со!

<Ы с1азз=”со!

<Ы с1азз="со!

<Ы с1азз=”со!

<Ы с1азз=”со!

</сЫ>

тх-2 Ьд-магпгпд ЬогЬег
тх-2 Ьд-магпгпд ЬогЬег
тх-2 Ьд-магЫпд ЬогЬег
тх-2 Ьд-магпгпд ЬогЬег
тх-2 Ьд-магпгпд ЬогЬег
тх-2 Ьд-магпгпд ЬогЬег

ЬогЬег-З ЬоЫег-ргнпагу
ЬогЬег-З ЬогсЫ-рглпагу
ЬогЬег-З ЬоЫег-ргнпагу
ЬогЬег-З Ьогбег-рЫтагу
ЬогЬег-З Ьогбег-рЫтагу

ЬогЬег-З Ьогс1ег-рг1тагу

гоипс!ес1-0">Блок 1</Ыу>
гоипЬес1-1’’>Блок 2</Ыу>
гоипс!ес1-2”>Блок 3</сЫ>
гоипс!ес1-3”>Блок 4</Ыу>
гоипс!ес1-4">Блок 5</Ыу>
гоипс!ес1-5">Блок 6</сИу>

<Ыу с1азз="гом”х/Ыу>

</Ыу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница Ьогс1ег_гас1|и8_1 .Ыт1

Здесь созданы рамки вокруг адаптивных блоков с толщиной линии ЬоЫег-з, при этом
заданы разные радиусы скругленных углов. В окне браузера эта страница будет выгля-
деть так, как показано на рис. 1.25.
Скругление рамок адаптивных блоков

Обозначение границ вокруг адаптивных блоков

Рис. 1.25. Различные варианты радиусов скругления углов рамок вокруг адаптивного блока

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

На НТМЬ-странице могут присутствовать несколько адаптивных контейнеров. Для
создания адаптивного контейнера с фиксированной шириной предусмотрен класс
сопгагпег. В качестве примера создадим НТМЬ-страницу с двумя адаптивными контей-
нерами с фиксированной шириной (листинг 1.16, страница соп1а1пег_1 .И1т1).

Листинг 1.16. Страница соп1атег_1 .Ыт1

{% ехбепбз "зЬор/Ьазе.ЬЬт!" %}

{% Ыоск Ьеабег %}

<Ыч с1азз=”гом кехк-сепкег">

<	Ь4Жонтейнеры с фиксированной шириной</Ь4>

</сЫ>

{% епсЫоск Ьеабег %}

{% Ыоск сопкепЫ}

<Ыч с1азз=”сопЫ1пег р-3 Ьд-ргтагу Ьехб-мЫбе ЬехЬ-сепбег’'>

<Ы>Это страница Воокзкгар</Ы>

<р>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</р>
</Ыч>

<сНч Ыазз=”сопба1пег ЬехЬ-сепбег Ьогбег Ьогс1ег-3">

<сНч с1азз=”гом”>

<сНч с!азз=”со1-зт-4 ”>
сЬЗЖолонка 1</ЬЗ>
<р>Это содержимое</р>
<р>первой колонки</р>

<	/Ыч>

<сНч с!азз="со1-зт-4 ”>
сЬЗЖолонка 2</ЬЗ>
<р>Это содержимое</р>
<р>второй колонки</р>

<	/Ыч>

<сНч с!азз=”со1-зт-4 ”>
сЬЗЖолонка Зс/ЬЗ>
<р>Это содержимое</р>
<р>третьей колонки</р>
</с1гу>

</сЦу>

</Ыу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница соп!атег_1 .Ыт1

На этой странице имеются два контейнера класса сопкатпег. В первом контейнере нахо-
дится текст, во втором — создан один ряд, в котором содержатся три адаптивных блока
с вложенным в них текстом. В окне браузера эта страница будет выглядеть так, как по-
казано на рис. 1.26.

	Контейнеры с фиксированной шириной  Колонка 1	Колонка 2	Колонка 3  Это содержимое	Это содержимое	Это содержимое  первой колонки	второй колонки	третьей колонки

Рис. 1.26. Страница с двумя контейнерами с фиксированной шириной класса сопкатпег

Обратите внимание, что при изменении ширины окна браузера меняется ширина кон-
тейнеров и их содержимого, при этом окно браузера всегда шире, чем ширина контей-
неров (слева и справа остается свободное пространство).

Теперь создадим НТМЬ-страницу с двумя адаптивными подвижными, или «рези-
новыми», контейнерами на основе класса сопкаГпег-ПиШ (листинг 1.17, страница
соп1а1пег_2.К1т1).

Листинг 1.17. Страница соп(атег_2.№т1

{% ехкепйз "зйор/Ьазе.йкт!" %}

{% Ыоск йеайег %}

<(Ы с1азз=”гом кехк-сепкег">

<МЖонтейнеры с адаптивной шириной</й4>

</Ы>

{% епсЫоск йеайег %}

{% Ыоск сопкепк%}

<(Ы с1азз=”сопка1пег-к1иЫ р-3 Ьд-рЫшагу кехк-мЫке кехк-сепкег”>

<Ы>Это страница Воокзкгар</Ы>
<р>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</р>
</сНу>

«Пу с1азз="сопба1пег-Ь1и1с1 шб-3 бехб-сепбег Ьогбег Ьогс1ег-3”>

<сПу с1азз="гом">

<сИу с1азз=”со1-зт-4 ”>
сЬЗЖолонка 1</ЬЗ>

<р>Это содержимое</р>

<р>первой колонки</р>

</сНу>

СсНу с1азз="со1-зт-4 ”>
сЬЗЖолонка 2с/ЬЗ>
ср>Это содержимоес/р>
ср>второй колонкис/р>

с/сНу>

СсИу с1азз="со1-зт-4 ”>
сЬЗЖолонка Зс/ЬЗ>
ср>Это содержимоес/р>
ср>третьей колонкис/р>

</сПу>

с/сНу>

с/сШ»

{% епбЫоск сопбепб %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница соп1а1пег_2.Ыт1

На этой странице имеются два контейнера класса сопбаФпег-ПиМ. В первом контейнере
находится текст, во втором — создан один ряд, в котором содержатся три адаптивных
блока с вложенным в них текстом. В окне браузера эта страница будет выглядеть так,
как показано на рис. 1.27.

Контейнеры с адаптивной шириной

Это страница ВооШгар

Измените размер этой адаптивной страницы, нгобы увидеть эффект!

Колонка 1

Это содержимое
первой колонки

Колонка 2

Это содержимое
второй колонки

Колонка 3

Это содержимое
третьей колонки
Обратите внимание, что при изменении ширины браузера меняется ширина контейне-
ров и их содержимого, при этом ширина контейнеров всегда соответствует ширине
окна браузера (слева и справа нет свободного пространства). При минимальной ширине
браузера колонки трансформируются в три строки.

* * *

На этом мы закончим знакомство с макетированием НТМЬ-страниц на основе фрейм-
ворка Воо181гар. Конечно, в Воо181гар имеется множество различных визуальных эле-
ментов для создания привлекательного веб-интерфейса, о которых вы можете узнать
в специальной литературе. Некоторые из этих элементов мы будем применять в шабло-
нах НТМЬ-страниц и более детально познакомимся с ними в следующих главах на кон-
кретных примерах.

1.11. Таблицы Воо<8<гар

Таблицы Воо181гар можно использовать как для вывода данных, так и для макетирова-
ния страниц. В базовом варианте таблицы имеют небольшие отступы и горизонтальные
разделители. Для того чтобы создать таблицу, понадобятся следующие теги:

<1аЫе с1азз="баЬ1е">

<ХЬеас1>

<Гг>

<	1±>... </ш>

<ш>.. .</ш>

</бг>

</1±еас1>

<СЬобу>

<бг>

<	Ы>. . .</бб>

<	Ы>. . . /бб>

</Сг>

</СЬобу>

Таблица

<- Заголовок таблицы

<- Строка заголовка

<- Колонка заголовка

<- Колонка заголовка

<- Колонка заголовка

4- Тело таблицы

<- Строка в теле таблицы

<- Колонка в теле таблицы

<- Колонка в теле таблицы

<- Колонка в теле таблицы

</баЫе>

Как здесь можно видеть, таблицу создают с помощью тегов:

♦	<баЫе> — создает собственно таблицу;

♦	<бЬеаб> — заголовок таблицы;

♦	<ббобу> — тело таблицы;

♦	<бг> — строку;

♦	<ы> — колонку.

В качестве примера создадим НТМЬ-страницу с таблицей, состоящей из трех строк и
трех колонок (листинг 1.18, страница 1аЫе.И1т1).
Листинг 1.18. Страница 1аЫе.К1т1

{% ехкепйз "зкор/Ьазе.ЫтГ’ %}

{% Ыоск кеайег %}

<(Ы с1азз=”гом кехЫсепкег">

<Ъ4>Простая таблица</Ъ4>

</сЫ>

{% епсЫоск кеайег %}

{% Ыоск сопкепЫ}

<ЫЫе Ыазз="каЫе">

<Ыеас1>

<кг>

<Ы>№</Ы>

<Ы>Фамилия</Ы>

<Ы>Имя</Ы>

<Ы>Е-таН</Ы>

</кг>

</Ыеас1>

<Ыос1у>

<Ы>

<Ы>1</Ы>

<Ы>Иванов</кс1>

<Ы>Иван</Ы>

<Ы>1уап@таН. ги</Ы>

</кг>

<ЁГ>

<Ы>2</Ы>

<Ы>Петров<Дс1>

<Ы>Петр</Ы>

<Ы>реЫ@таН. ги</Ы>

</кг>

<кг>

<Ы>3</Ы>

<Ы>Сидоров< / Ы>

<Ы>Семен</Ы>

<Ы>зЫ@та11. ги</Ы>

</Ег>

</кЬос1у>

</ЕаЫе>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе.Ыт1
Здесь нет контейнеров, и таблица находится непосредственно в теле НТМЬ-страницы.
В окне браузера эта страница будет выглядеть так, как показано на рис. 1.28.

Как здесь можно видеть, с параметрами по умолчанию таблица имеет выделенный
заголовок (жирный шрифт), строки и колонки таблицы явно не выделены, цвет фона
таблицы соответствует цвету фона основной страницы.

ы*	Простая таблица		
	Фамилия	Имя	Е-гпаИ
1	Иванов	Иван	|\/ап@та||.ш
2	Петров	Петр	ре1г@таП.ги
5	Сидоров	Семен	51с1@таН.ги

Рис. 1.28. Таблица ВооЫгар

Считается хорошим тоном, когда четные и нечетные строки таблицы выделены альтер-
нативными цветами. В Воо181гар это можно сделать с помощью класса баЫе-збгбреб.
В качестве примера создадим НТМЬ-страницу с таблицей, состоящей из трех строк и
трех колонок с выделением цветом четных и нечетных строк (листинг 1.19, страница
1аЫе_1.И1т1).

Листинг 1.19. Страница 1аЫе_1.Гйт1

{% ехбепбз "зкор/Ьазе.ЫтГ’ %}

{% Ыоск кеабег %}

<6Ы с1азз="гом кехк-сепкег">

<Ь4>Простая таблица с выделением строк</Ь4>

</бЫ>

{% епсЫоск кеабег %}

{% Ь1оск сопкепЫ}

<баЬ1е с1азз=”баЬ1е СаЬ1е-з11г1реб">

<Ыеаб>

<Тг>

<Ы>№</Ы>

< Ы>Фамилия< / Ы>

<Ы>Имя</Ы>

<Ы>Е-таН</Ы>

</бг>

</Ыеаб>

<СЬобу>

<Гг>

<бб>1</бб>

<Хб>Иванов</кб>

<бб>Иван</бб>

<Сб>1уап@таН. ги</бб>

</бг>
<бг>

<Ы>2</Ы>

<Ы>Петров</Ы>

<Ы>Петр</Ы>

<Хб>реЫ@таН. ги</Ы>

</"Ьг>

<Сг>

<ы>з</ы>

<Ы>Сидоров< / Ы>

<Ы>Семен</Ы>

<Ы>з1б@та11. ги</Ы>

</бг>

</бЬобу>

</Ше>

{% епсЫоск сопбепб %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе_1.Ыт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 1.29, — с клас-
сом таЫе-зкг1рес1 таблица имеет выделенный жирным шрифтом заголовок, а четные и
нечетные строки выделены разными цветами.

Простая таблица с выделением строк

№	Фамилия	Имя	Е-таН
1	Иванов	Иван	|уап@ Глазго
2	Петров	Петр	ре1:г@та||..пи
3	Сидоров	Семен	5Й@таП.ги

Рис. 1.29. Таблица Воо1з1гар, где строки выделены альтернативными цветами

Для того чтобы создать для таблицы границы ячеек, используется класс таЫе-
Ьогаегеа, — при этом цвет границ задается с помощью класса Ьогбегеб <цвет>. В качестве
примера создадим НТМЬ-страницу с таблицей, состоящей из трех строк и трех колонок
с рамками для выделения ячеек цвета <рг1тагу> (листинг 1.20, страница 1аЫе_2.И1т1).

Листинг 1.20. Страница 1аЫе_2.Ыт1

{% ехбепбз "зкор/Ьазе.ЫтГ’ %}

{% Ыоск кеабег %}

<6Ы с1азз=”гом кехк-сепкег">

<Ь4>Простая таблица с выделением строк и с границами ячеек</Н4>

</бЫ>

{% епсЫоск кеабег %}
{% Ыоск сопкепЫ}

<иЫе с!азз="каЫе ЫЫе-зкгарес! каЫе-ЬоЫегес! Ьогс1ег-рг1тагу”>

<Ыеас1>

<кг>

<Ы>№</Ы>

<Ы>Фамилия</Ш>

<кк>Имя</Ш>

<Ы>Е-таН</Ы>

</кг>

</Ыеас1>

<ЕЬос1у>

<кг>

<Ы>1</Ы>

<Ы>Иванов</кс1>

<Ы>Иван</Ы>

<Ы>1уап@таН. ги</Ы>

</кг>

<ы>

<Ы>2</Ы>

<Ы>Петров</Ес1>

<Ы>Петр</Ы>

<Ы>рекг@таН. ги</Ы>

</кг>

<Ег>

<ы>з</ы>

<Ы>Сидоров</Ы>

<Ы>Семен</Ы>

<Ы>з1с1@та11. ги</Ы>

</кг>

</кЬос!у>

</ЕаЫе>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе_2.Ыт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 1.30.

Простая таблица с выделением строк и с границами ячеек

№	Фамилия	Имя	Е-таП
1	Иванов	Иван	1Уап@таИ.ги
2	Летров	Петр	ре1г@та<1ш
3	Сидоров	Семен	
Если таблица используется для макетирования страницы, то все границы можно явно
удалить, для чего предусмотрен класс <Ше с1азз=”баЫе ыые-Ьогбег1езз'’>. В качестве
примера создадим НТМЬ-страницу с таблицей, состоящей из трех строк и трех колонок
с явно удаленными границами ячеек (листинг 1.21, страница 1аЫе_З.И1т1).

Листинг 1.21. Страница 1аЫе_З.Мт1

{% ехбепбз "зЬор/Ьазе.ЬГт!" %}

{% Ыоск кеабег %}

<сПу с1аз8="гом кехЫсепкег">

<Ь4>Простая таблица с удаленными границами ячеек</Ь4>

</бЫ>

{% епсЫоск кеабег %}

{% Ыоск сопкепЫ}

<баЫе с1азз=”баЫе ЕаЫе-Ьогбег1езз">

<Ыеаб>

<Ьг>

<Ы>№</Ы>

< Ы>Фамилия< / Ы>

<Ы>Имя</Ы>

<Ы>Е-таН</Ы>

</Ы>

</Ыеаб>

<ЕЬобу>

<Ы>

<Хб>1</кб>

<Хб>Иванов</кб>

<бб>Иван</бб>

<Ы>Ыап@та11. ги</бб>

</бг>

<кг>

<Ы>2</Ы>

<Ы>Петров</Ы>

<Ы>Петр</Ы>

<Ы>реЫ@таН. ги</Ы>

</бг>

<Ы>

<ы>з</ы>

<Ы>Сидоров< / Ы>

<Ы>Семен</Ы>

<Ы>31б@та11. ги< Дб>

</Ы>

</ЕЬобу>

</баЫе>

{% епсЫоск сопкепк %}
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе_З.Ыт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 1.31.

Простая таблица с удаленными границами ячеек		
№	Фамилия	Имя	Е-гпаИ
1	Иванов	Иван	|уап@та,1.ш
2	Петров	Петр	ре1,г@таЛ.ги
3	Сидоров	Семен	51б@та||.ги

Рис. 1.31. Таблица Воо1з1гар без границ ячеек

В таблицах можно использовать контекстные классы для окрашивания всей таблицы
(<таЫе>), строк таблицы (<тг>) или ячеек таблицы (<ы>):

♦	таЫе-ргтагу — синий, указывает на важное действие;

♦	таЫе-зиссезз — зеленый, указывает на успешное или положительное действие;

♦	таЫе-йапдег — красный, указывает на опасное или потенциально негативное дейст-
вие;

♦	ыые-шы — голубой, указывает на нейтральное информативное изменение или дей-
ствие;

♦	РаЫе-маггппд — оранжевый, указывает на предупреждение;

♦	баЫе-асбЫе— серый, применяется при наведении курсора мыши на строку или
ячейку таблицы;

♦	РаЫе-зесопйагу — серый, указывает на менее важное действие;

♦	баЫе-ИдЫ — светло-серый фон таблицы или строки таблицы;

♦	РаЫе-йагк — черный фон таблицы или строки таблицы.

В качестве примера создадим НТМЬ-страницу с таблицей, в которой показаны классы
с основными цветами (листинг 1.22, страница 1аЫе_4.И1т1).

Листинг 1.22. Страница 1аЫе_4.Гйт1

{% ехбепбз "зйор/Ьазе.ЫтГ’ %}

{% Ыоск йеабег %}

<6Ы с1азз=”гом кехк-сепкег">

<Ь4>Простая таблица с разноцветными ячейками</Н4>

</сЫ>

{% епсЫоск йеабег %}
{% Ыоск сопкепЫ}

<иЫе с!азз="каЫе">

<Ыеас1>

<Ы>

<Ы>Цвет</Ы>

<Ы>Класс</Ы>

</кг>

</Ыеас1>

<Ыос1у>

<Ы>

<Ы>ВЫаи1к</Ы>

<Ы>ВЫаи1к</Ы>

</кг>

<кг с1азз=”каЫе-рг1тагу">

<Ы>Рг1тагу</Ы>

<Ы>с1азз="ЫЫе-рг1тагу"</кс1>

</кг>

<кг с1азз="ЫЫе-зиссезз">

<Ы>8иссезз</Ы>

<Ы>с1азз="ЫЫе-зиссезз"<Дс1>

</кг>

<Ы с1азз=”каЫе-с1апдег">

<Ы>Вапдег</Ш>

<Ы>с1азз="каЫе-с1апдег"</кс1>

</кг>

<кг с1азз="ЫЫе-1пРо”>

<Ы>1Ыо</Ш>

<Рс1>с1азз="каЫе-1пРо"</кс1>

</кг>

<кг с1азз=”каЫе-шгп1пд">

<Ы>ДОагп1пд</кс1>

<Ы>с1азз=”каЫе-шгп1пд"</11с1>

</кг>

<кг с1азз="ЫЫе-асЫуе">

<Ы>АсЫуе</Ы>

<Рс1>с1азз="каЫе-аскЫе"</кс1>

</кг>

<Ы с1азз=”ЫЫе-зесопс1агу">

<Ш>8есопс1агу</Ы>

<Ы>с1азз="ЫЫе-зесопс1агу</кс1>

</кг>

<кг с1азз=”каЫе-11дМ">

<Ы>ЫдЫ</Ы>

<Рс1>с1азз="каЫе-11дМ"</кс1>

</кг>

<кг с1азз="ЫЫе-с1агк">

<Ы>Вагк</Ш>

<Ы>с1азз="каЫе-с1агк"</кс1>

</Ы>
</ГЬос1у>

</Ше>

{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе_4.Ыт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 1.32.

Простая таблица с разноцветными ячейками

Цвет

□еГаик

Рптагу
Зиссеза
□апдег
1Ыо

Класс

ОеГаиИ

с1аз5="(а Ые-рптагу"
с!аз5:="1:аЫе-5иссе5Б
йа55=ЧаЫе-с1апдег"
€1а55="1:аЬ(е-1пГс"

\Л/агп1пд

Асйуе

с1а55="^а Ые- и/а ггн п д

с1а5Б=ДаЫе-ас11Уе"

Бесопс1агу

ЫдМ

<1355- "^а Ые- Бесоп са гу

с1а55='ТаЫе-||д1111

Оагк

<1аи="1аЫе^1агк"

Рис. 1.32. Таблица Воо1з1гар со строками разного цвета

1.12. Адаптивные таблицы в ВооЫгар

(с полосами прокрутки)

На странице сайта может присутствовать таблица с большим количеством колонок или
строк. На больших экранах компьютера такая таблица может вписываться в размер
страницы, и все ее ячейки находятся в пределах видимости. Но на устройствах с мень-
шим разрешением, — например, на планшетах и смартфонах, часть ячеек выйдет за
пределы видимости. В этом случае для больших таблиц необходимо использовать
полосы прокрутки. Для того чтобы таблица имела полосы прокрутки, ее нужно помес-
тить в тег с указанием стиля оуегПо^:зсго11:

<сИу зку1е="оуегНом: зсго11; ">

</сИу>
При этом полосы прокрутки рядом с таблицей будут видны постоянно. В качестве при-
мера создадим НТМЬ-страницу с таблицей, состоящей из трех строк и четырех колонок
с полосами прокрутки (листинг 1.23, страница 1аЫе_5.И1т1).

Листинг 1.23. Страница 1аЫе_5.Гйт1

{% ехбепбз "зЬор/Ьазе.Ыт!" %}

{% Ыоск Иеабег %}

<сПч с1азз=”гом кехк-сепкег">

<И4>Болыпая таблица с полосами прокрутки</И4>

</сЫ>

{% епсЫоск кеабег %}

{% Ыоск сопкепЫ}

<61V збу1е=”оуегБ1ом:зсго11;">

<баЫе с1азз="баЫе баЫе-збгбреб баЫе-Ьогбегеб Ьогбег-рг1тагу">

<Ыеаб>

<бг>

<Ш>№</Ы>

<Ы>Фамилия</Ы>

<Ы>Имя</Ш>

<Ы>Е-таН</Ы>

<Ы>Место работы</Ы>

</бг>

</Ыеаб>

<ЕЬо6у>

<Ы>

<Ы>1</Ы>

<Ы>Иванов</Ы>

<Ы>Иван</Ы>

<Ы>Ыап@таН. ги</Ы>

<Ы>000 "Транспортно-логистические системы"</М>

</бг>

<рг>

<Ы>2</Ы>

<Ы>Петров</Ы>

<Ы>Петр</Ы>

<Ш>реЫ@таН. ги</Ы>

<Ы>000 "Навигационно-информационные системы"</М>

</бг>

<бг>

<Ы>3</Ы>

<Ы>Сидоров<Дс1>

<Ы>Семен</Ы>

<Ы>316@та11. ги</Ы>

<Ы>000 "Интеллектуальные транспортные системы"</Ы>

</Ы>
</1±ос1у>

</Ше>

</сНу>

{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе_5.Ыт1

Если таблица сможет поместиться в границы страницы, то полосы прокрутки будут
видны, но не будут активными (рис. 1.33).

Большая таблица с полосами прокрутки

№	Фамилия	Имя	Е-таП	Место работы
1	Иванов	Иван	^ап@пта!1.ги	ООО Транспортно-логистические системы
2	Петров	Петр	ре1г@та||.ш	ООО ‘Навигационно-информационные смстемь
3	Сидоров	Семен	5к1@таН.ги	ООО ‘Интеллектуальные транспортные системы

Рис. 1.33. Таблица Воо1з1гар с неактивными полосами прокрутки

Если же таблица не сможет поместиться в границы страницы, то полосы прокрутки
станут активными, — т. е. на них будет виден бегунок для скроллинга таблицы
(рис. 1.34).

№	Фамилия	Имя	Е-таИ	М|
1	Иванов	Иван	17ап@таН.ги	ОС Т( ЛО си
2	Петров	Петр	ре1г@таН.ги	ос "Н ин си
3	Сидоров	Семен	яб@таН.ги	ОС ГИ тр си
ч |	►				
Для привязки к таблице полос прокрутки можно использовать специальный класс «±ы
с1азз="баЫе-гезропзЫе">:

<сИу с1азз=”баЫе-гезропз1уе">

</сИу>

При этом если таблица полностью помещается в пределы страницы, то полосы про-
крутки рядом с таблицей вовсе не будут видны. Если же таблица не будет вписываться
в размеры страницы, то полосы прокрутки автоматически появятся. В качестве примера
создадим НТМЬ-страницу с таблицей, состоящей из трех строк и четырех колонок
с полосами прокрутки на основе класса ыые-гезропзЫе (листинг 1.24, страница
1аЫе_6.И1т1).

Листинг 1.24. Страница 1аЫе_6.Мт1

{% ехбепбз "зЬор/Ьазе.ЫлпГ* %}

{% Ыоск Иеабег %}

«Цу с1азз="гом бехЫсепбег">

<И4>Болыпая таблица с полосами прокрутки</И4>

</сПу>

{% епсЫоск кеабег %}

{% Ыоск сопкепЫ}

<сИч с1азз=”каЫе-гезропз1Уе">

<баЫе с1азз="баЫе баЫе-збгтреб РаЫе-Ьогбегеб Ьогс1ег-рг1тагу">

<Ыеаб>

<Ы>

<Ш>№</Ы>

<Ы>Фамилия</Ы>

<Ш>Имя</Ш>

<Ы>Е-таН</Ы>

<Ы>Место работы</БИ>

</Ы>

</Ыеаб>

<ГЬобу>

<рг>

<Ы>1</Ы>

<Ы>Иванов</Ы>

<Ы>Иван</Ы>

<Ы>1уап@таН. ги</Ы>

<Ы>000 "Транспортно-логистические системы"</Ы>

</бг>

<Хг>

<Ы>2</Ы>

<Ы>Петров</Ы>

<Ы>Петр</Ы>

<Ы>реЫ@таН. ги</Ы>

<Ы>000 "Навигационно-информационные системы"</бс1>

</Ы>
<кг>

<ы>з</ы>

<Ы>Сидоров</Ы>

<Ы>Семен</Ы>

<Ы>з1с1@та11. ги</Ы>

<Ы>000 "Интеллектуальные транспортные системы"</Ы>

</"Ьг>

</ТЬос1у>

</Ше>

</сНу>

{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 1 и перейти по ссылке Стра-
ница 1аЫе_6.Ыт1

Если таблица сможет поместиться в границы страницы, то полосы прокрутки не будут
видны (рис. 1.35).

Большая таблица с полосами прокрутки

№	Фамилия	Имя	Е-гпэН	Место работы
1	Иванов	Иван	1Уап@таН.ги	ООО "Транспорно-логистические системы"
2	Петров	Петр	реТг@та||.ги	ООО "Навигационно-информационные системы"
5	Сидоров	Семен	ысЗ@та11.гп	ООО "Интеллектуальные транспортные системы"

Рис. 1.35. Таблица ВооЫгар с невидимыми полосами прокрутки

Если же таблица не сможет поместиться в границы страницы, то полосы прокрутки
станут видимыми (рис. 1.36).

№	Фамилия	Имя	Е-таН	Мест
1	Иванов	Иван	гуап@таП.ги	ООО ' Тран логис систе
2	Петров	Петр	ре!г@та||.ги	ООО  "Нав1 инфо систе
3	Сидоров	Семен	зк1@та||.ги	ООО  'Инге транс систе
1.13. Краткие итоги

Итак, мы познакомились с некоторыми базовыми элементами фреймворка ВооЫгар,
которые нам пригодятся при формировании шаблонов НТМЬ-страниц. Но прежде чем
приступить к их использованию в веб-приложениях, нужно узнать о некоторых важных
параметрах элементов ВооЫгар и способах их подключения к шаблонам Р]ап§о.
В частности, нам предстоит разобраться с тем:

♦	как менять цветовое оформление элементов ВооЫгар;

♦	как встраивать одни шаблоны В]ап§о в другие;

♦	как работает механизм подключения значков к элементам Воо181гар;

♦	как сделать разбивку НТМЬ-страницы на горизонтальные и вертикальные вкладки
и организовать навигацию по ним;

♦	какие есть варианты использования атрибута ЬгеГ в шаблонах В)ап§о для создания
ссылок на интернет-адреса (ИКЬ);

♦	как создавать и использовать всплывающие модальные окна;

♦	как отобразить в шаблонах В)ап§о статичные компоненты ВооЫгар (на примере
аккордеона, карточек и карусели).

Рассмотрению этих вопросов и посвящена следующая глава.

ГЛАВА 2

Статичные элементы Воо&1гар
в шаблонах О)апдо

Дизайн практически всех современных сайтов строится с использованием элементов
Воо181гар. Обращение к этому фреймворку обеспечивает адаптивность страниц сайта
к экранам разного разрешения, а главное — сокращает время, затрачиваемое програм-
мистами, на разработку программного кода. Статичные элементы ВооЫгар достаточно
просто встраиваются в шаблоны Р]ап§о и имеют множество параметров для настройки
внешнего вида. Однако эти элементы статичны, и если возникнет потребность изме-
нить их содержание или внешний вид (размер, цвет, форму), то приходится менять про-
граммный код и обновлять его на публичных серверах. Из материалов этой главы вы
узнаете:

♦	как изменить цветовое оформление элементов ВооЫгар;

♦	как использовать тег 1пс1ис1е для встраивания одних шаблонов В)ап§о в другие;

♦	как подключать значки к элементам ВооЫгар;

♦	как выполнять разделение НТМЬ-страницы на горизонтальные и вертикальные
вкладки компонентом таЬз;

♦	как с элементами ВооЫгар связать подсказки тооШр;

♦	какие есть варианты использования атрибута ЬгеГ в шаблонах И)ап§о для создания
ссылок на интернет-адреса (ИКЬ);

♦	как на НТМЬ-страницы вывести всплывающие модальные окна;

♦	как создать программные модули для отображения в шаблонах Р]ап§о статичных
элементов ВооЫгар (на примере аккордеона, карточек и карусели).

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

Для задания цвета элементам ВооЫгар используются 8 базовых классов (рис. 2.1):

ГехГ-ргшагу — СИНИЙ;

ГехГ-зесоМагу — серый;

ГехГ-зиссезз — зеленый;

ГехГ-йапдег — красный;

ГехГ-маггппд — Оранжевый;

ГехГ-1П^о — ГОЛубоЙ;

ГехГ-ИдЬГ — светло-серый;

ГехГ-йагк — черный.
Рис. 2.1. Образцы базовых цветов в Воо1з1гар

Пример НТМЬ-кода страницы, в которой показано использование базовых цветов для
одновременного задания цвета для шрифта и для фона, приведен в листинге 2.1 (стра-
ница Ьа8е_со1ог.Ыт1).

Листинг 2.1. Страница Ьа8е_со1ог.Мт!

{% ехкепбз "зЬор/Ьазе.ЬБт!" %}

{% Ыоск кеайег %}

<сПу с1азз=”гом кехк-сепкег">

<Ь4>Базовые цвета элементов Воокзкгар 5</Ь4>

</сИу>

{% епбЫоск Ьеайег %}

{% Ь1оск сопкепк%}

<сИу с1азз=”сопка1пег">

<сИу с1азз=”гом”>Базовые цвета</сИу>

<сИу с1азз=”гом кехк-сепкег">

<сИу с1азз=”со1 ру-5 Бехк-ИдЫ Ьд-рг1шагу">Блок1</сПу>

<сИу с1азз=”со1 ру-5 Бехк-ИдМ Ьд-зесопс1агу">Блок2</с11у>

<сПу с1азз=”со1 ру-5 ЬехЬ-ИдЬЬ Ьд-зиссезз">БлокЗ</сПу>

<сИу с1азз="со! ру-5 ГехЬ-ЦдЪЬ Ьд-с1апдег">Блок4</с11у>

<сНу с1азз=”со! ру-5 РехБ-йагк Ьд-магп1пд”>Блок5</сПу>

<сИу с1азз=”со! ру-5 РехЬ-йагк Ьд-1пБо">Блок6</сПу>

<сИу с1азз="со! ру-5 РехБ-йагк Ьд-ИдЬ.С”>Блок7</с11У>

<сИу с1азз=”со! ру-5 ЬехЬ-ИдНЬ Ьд-с1агк">Блок8</с11У>

</сИу>

</сИу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница Ьа8е_со1ог.Ыт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 2.2.
При создании страниц сайтов можно не ограничиваться базовыми цветами ВооЫгар, а
использовать полную палитру цветов КОВ. Для этого элементу ВооЫгар надо изменить
стиль. Пример НТМЬ-кода страницы, в которой показано использование стилей
для задания цвета фона адаптивным блокам, приведен в листинге 2.2 (страница 81у1е_
со1ог.К1т1).

Базовые цвета элементов ВооЫгар 5

Базовые цвета

Блок!

Блок2

БлокЗ

Блок4

Блок5

Блоюб

Блок?

БлокВ

Рис. 2.2. Образцы базовых цветов для фона и текста в Воо1з1гар

Листинг 2.2. Страница 8(у1е_со1ог.Мт1

{% ехкепбз "зЬор/Ьазе.ЫтГ' %}

{% Ыоск Веас1ег %}

<(Ы с1азз=”гом кехк-сепкег">

<Ь4 Произвольные цвета КЗВ элементов Воокзкгар 5</В4>

</(Ы>

{% епсЫоск Веас1ег %}

{% Ыоск сопкепЫ}

<(Ы с1азз=”сопка1пег">

<(Ы с1азз="гом”>Произвольные цвета КСВ</сИу>

<(Ы Ыазз="гом РехЫсепкег">

<сИу с1азз="со1 ру-5 кехк-Идкк" зку1е="Ьаскдгоипс1-со1ог: гдЬ (123, 104, 238);">гдЬ(123, 104, 238)</сЫ>

<сИу с1азз="со1 ру-5 кехк-ИдШ" зку1е="Ьаскдгоипс1-со1ог: гдЬ (160, 82, 45);">гдЬ(160, 82, 45)</сЫ>

<сНу с1азз="со1 ру-5 ОехО-ИдкО" зку1е="Ьаскдгоипс4-со1ог: #008В8В; ">#008В8В</сЫ>

<сЫ с1азз="со1 ру-5 Еехк-ИдЫ" зку1е="Ьаскдгоипс1-со1ог: гдЬ (0, 100, 0);">гдЬ(0, 100, 0)</сЫ>

<сЫ с1азз="со1 ру-5 кехк-с!агк" зку1е="Ьаскдгоипс1-со1ог:#ЕЕЕЕ00;">#ЕЕЕЕ00</с41у>

<сЫ с1азз="со1 ру-5 кехОЫагк" зку1е="ЬаскдгоипЦ-со1ог:гдЬ(0, 255, 255);">гдЬ(0, 255, 255)</сЫ>

<сЫ с1азз="со1 ру-5 кехОЫагк" зку1е="Ьаскдгоипс1-со1ог:гдЬ(0, 255, 0);">гдЬ(0, 255, 0)</сЫ>

<сЫ с1азз="со1 ру-5 ЕехЕ-ИдЫ" зку1е="Ьаскдгоипс1-со1ог: #2Е4Е4Е; ">#2Е4Е4Е</сЫ>

</Ы>

</Ы>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 81у1е_со1ог.Ыт1

Как показано в этом листинге, цвет можно задать с помощью стиля либо в десятичном
виде— например: гдЬ(1б0, 82, 45), либо в шестнадцатеричном — например: #ееееоо.
В окне браузера эта страница будет выглядеть так, как показано на рис. 2.3.
В Воо181гар 5 есть возможность менять оттенки базового цвета за счет использования
такого параметра, как прозрачность, а вернее, непрозрачность: орасЫу. Параметр непро-
зрачности может принимать значения: 100 (по умолчанию), 75, 50 и 10%. Пример
НТМЬ-кода страницы, в которой показано использование параметра непрозрачности
для задания оттенка базового цвета фона адаптивных блоков, приведен в листинге 2.3
(страница орасИу.К1т1).

	Произвольные цвета кСВ элементов ВооЫгар 5  Произвольные цвета КОЕ			
	пдЬ(123, гдЬ(160, #008В8В	гдЬ(О,  104,238)	82.45)	100,0)		гдЬ(О, 255 2551	255 0)	#2Е4Е4Е

Рис. 2.3. Образцы произвольных цветов РОВ для фона адаптивных блоков

Листинг 2.3. Страница орасйу.Ыт!

{% ехкепбз "зЬор/Ьазе.ЫтГ' %}

{% Ыоск ЬеаЬег %}

<(Ы с1азз="гом ЬехЫсепЬег">

<Ь4>Цвета элементов Воокзкгар 5 с разной степенью непрозрачности</Ь4>

</сЫ>

{% епсЫоск ЬеаЬег %}

{% Ыоск сопкепЫ}

<(Ы с1азз=”сопка1пег”>

<(Ы Ыазз="гом”>Изменение цвета параметром ораЫку</сИу>

<Ыу Ыазз="гом ЬехЫсепЬег">

<(Ы с1азз=”со1 ру-5 ЬехЬ-ИдЫ Ьд-рг1шагу">Ьд-рг1тагу</Ыу>

<Ы с1азз=”со1 ру-5 ЬехЬ-ИдЫ Ьд-ргтшагу Ьд-орас1Ьу-75”>Ьд-орас1Ьу_75</с1Ы>

<Ы с1азз=”со1 ру-5 ЬехЬ-ИдЫ Ьд-ргтшагу Ьд-орас1Ьу-50’'>Ьд-орас1Ьу_50</с1Ы>

<(Ы с1азз=”со1 ру-5 РехЫЫгк Ьд-рЫшагу Ьд-ораЫку_25">Ьд-ораЫЬу_25</с1Ы>

<(Ы с1азз=”со1 ру-5 ЬехЬ-Ьагк Ьд-ргтшагу Ьд-орас1Ьу-10”>Ьд-орас1Ьу-10</с1Ы>

</сЫ>

<(Ы Ыазз="гом ЬехЫсепЬег шу-2">

<Ы с1азз=”со! ру-5 ЬехЬ-ИдЫ Ьд-зиссезз">Ьд-зиссезз</сИу>

<Ы с1азз=”со1 ру-5 ЬехЬ-ИдЫ Ьд-зиссезз Ьд-орасЫу-75">Ьд-орас1Ьу_75</сИу>

<(Ы с1азз=”со! ру-5 Ьехк-ИдЫ Ьд-зиссезз Ьд-орас1Ьу-50">Ьд-орас1Ьу-50</Ыу>

<(Ы с1азз=”со! ру-5 ЬехЬ-Ьагк Ьд-зиссезз Ьд-орас1Ьу-25”>Ьд-орас1Ьу-25</Ыу>

<Ы с1азз="со! ру-5 ЬехЬ-Ьагк Ьд-зиссезз Ьд-орас1Ьу-10”>Ьд-орас1Ьу-10</с1Ы>

</сЫ>

</сЫ>

{% епсЫоск сопкепЬ %}
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница орасйу.Ыт!

В окне браузера эта страница будет выглядеть так, как показано на рис. 2.4.

Цвета элементов Воо^гар 5 с разной степенью непрозрачности

Изменение цвета параметром орасгГу

Ьд-орас11у-25

Ьд-орасИу-10

Ьд-орасЦу-25

Ьд-орасгёу-10

I

Рис. 2.4. Изменение цвета фона адаптивных блоков с использованием параметра оразгбу

2.2.	Тег 1пс1ис1е для встраивания шаблонов О]апдо

В элементах Воо181гар (в строках и адаптивных блоках) можно писать любой код
НТМЕ. Однако при большом количестве строк и высокой степени вложенности эле-
ментов программный код страницы плохо читается и его трудно отлаживать. Поэтому
целесообразно сложные НТМЬ-страницы разбивать на более простые и вкладывать
одну страницу в другую. Кроме того, такой подход позволяет содержимое одной
НТМЬ-страницы использовать в качестве фрагмента во множестве других НТМЬ-
страниц. Для этого в В)ап§о есть специальный тег 1пс1ис1е, который имеет следующий
формат:

{% 1пс1ибе "ту_раде. ЪбтГ' %},

Здесь ту_раде.Ылп1 — имя встраиваемой страницы. При этом в то место сетки ВооЫгар,
где находится тег 1пс1ис1е, будет вставлен полный код страницы ту_раде.Ылп1.

Пример НТМЬ-кода страницы, в которой показано использование тега 1пс1ис1е для
встраивания шаблонов В)ап§о в другие страницы сайта, приведен в листинге 2.4 (стра-
ница 1Пс1ис1е.И1т1).

Листинг 2.4. Страница тс1ис1е.Мт1

{% ехбепбз ”зЬор/Ьазе.Ылп1” %}

{% Ыоск кеабег %}

«Цу с1азз="гом кехк-сепкег">

<Ь4 Использование тега бпсТибе в шаблонах Вдапдо</к14>

</сИу>

{% епбЫоск кеабег %}
{% Ыоск сопкепк%}

<(Ы с1азз="сопка!пег">

<(Ы с1азз="гом кехк-сепкег'^Использование тега 1пс1ис1е</с11у>

<(Ы с1азз="со1 кехк-сепкег">

{% 1пс1ыс1е "тазкег/д1ауа_2/Ьпс_раде.Ькт!" %}

</Ы>

</Ы>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1Пс1ис1е.Ыт1

В этом программном модуле тег шс1ис1е находится в адаптивном блоке со1, а в самом

этом блоке указан путь к странице орасИу.К1т1 (ее ИКТ-адрес):

<(Ы с1азз="со! кехк-сепкег">

{% 1пс1ис1е "тазкег/д1ауа_2/1пс_раде.Икт!" %}

</сПу>

Программный код страницы 1пс_раде.И1т1 приведен в листинге 2.5.

Листинг 2.5. Страница тс_раде.Ыт1

<(Ы с!азз="сопка1пег">

<(Ы с1азз="гом кехк-сепкег">

<(Ы с1азз="со! ру-5 кехк-Идкк Ьд-рг1тагу">Ьд-рг1тагу</сПу>

<(Ы с1азз="со! ру-5 кехк-Идкк Ьд-ргтагу Ьд-ораЫку-75">Ьд-орас1ку-75</с1гу>

<(Ы с1азз="со! ру-5 кехк-Идкк Ьд-ргтагу Ьд-орас1ку-50">Ьд-орас1ку-50</сПу>

<Ы с1азз="со! ру-5 кехкЫагк Ьд-рЫтагу Ьд-ораЫку-25">Ьд-орас1ку-25</с1гу>

<Ы с1азз="со! ру-5 кехкЫагк Ьд-рЫтагу Ьд-ораЫку-10">Ьд-орас1ку-10</с1гу>

</(Ы>

<(Ы с1азз="гом кехк-сепкег ту-2">

<(Ы с1азз="со! ру-5 кехк-Идкк Ьд-зыссезз">Ьд-зыссезз</сПу>

<(Ы с1азз="со! ру-5 кехк-Идкк Ьд-зыссезз Ьд-орас1ку-75">Ьд-орас1ку-75</сПу>

<(Ы с1азз="со! ру-5 кехк-Идкк Ьд-зыссезз Ьд-орас1ку-50">Ьд-орас1ку-50</сИу>

<(Ы с1азз="со! ру-5 кехк-Ьагк Ьд-зыссезз Ьд-орас1Ьу-25">Ьд-орас1Ьу-25</сИу>

<(Ы с1азз="со! ру-5 кехкЫагк Ьд-зыссезз Ьд-орас1ку-10">Ьд-орас1Ьу-10</с11У>

</сИу>

</сИу>

Теперь при вызове шаблона 1пс1ис1е.И1т1 О]ап^о на место тега ЬпЫыйе поместит код из
другого шаблона с именем 1пс_раде.И1т1. В итоге в окне браузера страница 1пс1ис1е.И1т1
будет выглядеть так, как показано на рис. 2.5.

Таким образом, с использованием тега ЬпЫыйе можно многострочный код громоздкого
шаблона разбить на простые фрагменты, отладить работу каждого фрагмента, а итого-
вую страницу показывать как единое целое.
Использование тега тс1ис1е в шаблонах О]апдо

Использование тега 1лс1ис1е

Ьд-рптагу

Ьд-орасНу-75

Ьд-срасИу-

Ьд-орасйу-10

Ьд-ыюоезЕ Ьд-ораа1у-75

Ьд-орасгёу-:

Ьд-орэсИу-10

Рис. 2.5. Результаты встраивания шаблона орасИу.Мт! в шаблон 1пс1ис1е.Н1т1

2.3.	Подключение значков к элементам Воо($(гар

Фреймворк Воо181гар предлагает коллекцию, содержащую порядка двух тысяч значков
(иногда называемых иконками) в формате 8УО, которые можно использовать в своих
проектах. В зависимости от необходимости допускается менять цвет этих значков —
через свойство С88 со1ог и их размер — через свойство С88 ыы-зЫе. Подключить
значки к проекту можно по следующей ссылке:

<Ипк ЪгеЫ’ЪЫрз: //сс!п. д зсЫЫг. пеТ/прш/ЬооТзТгар-1сопз@1.10.5/1опГ/ЬооТзТгар-1сопз. сзз"
ге1=”зГу1езкееГ”>

Эту ссылку рекомендуется поместить в базовый шаблон сайта — тогда значки можно
будет использовать на всех дочерних шаблонах. Как выглядят значки и какой код надо
применять для их подключения к элементу страницы, можно посмотреть на официаль-
ном сайте коллекции1. Фрагмент страницы этого сайта представлен на рис. 2.6.

Чтобы узнать код для подключения значка к элементу сайта, нужно щелкнуть левой
кнопкой мыши на изображении значка — откроется новая страница, на которой будут
показаны параметры подключения. Например, если щелкнуть мышью на значке с име-
нем Ьайегу, мы увидим страницу со следующими параметрами подключения (рис. 2.7).

Пример НТМЬ-кода страницы, в которой показано использование значков на кнопках
Воо181гар, приведен в листинге 2.6 (страница юоп_1.И1т1).

Листинг 2.6. Страница !соп_1.Мт1

{% ехГепбз "зкор/Ьазе.ЫтГ’ %}

{% Ыоск кеайег %}

<сИу с1азз="гом ЫхЫзРаЫ тх-2">

<М Подключение иконок к элементам ВооРзЫар</114>

</сЫ>

{% епсЫоск кеайег %}

1 См. ЬНр8://коп8.§е1;Ьоо1;81;гар.сот.
{% Ыоск сопкепк%}

<(Ы с1азз=”сопка1пег”>

<(Ы с1азз=”гом”>Иконки на кнопках</сНу>

<(Ы с!азз="со1-4 кехк-зкагк">

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-рг1гоагу"><1 с1азз=”Ы-зеагск”></1> Поиск</Ьиккоп>

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-с1апдег">Внимание <1 с1азз=”Ы-Ье11"></1></Ьиккоп>

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-зиссезз"><1 с1азз=”Ы Ы-аггом-1еЫ-с1гс1е"></1>

Назад</Ьиккоп>

</Ыу>

</Ыу>

{% епсЫоск сопкепк %}

Рис. 2.6. Фрагмент официального сайта коллекции значков ВооЫгар

1соп

и$1пд кНе у/еЬ к»пк? Сору, агк! до.

<1 с1а55="Ь1 Ы-Ьаккегу”></1>

Рис. 2.7. Фрагмент кода для подключения значка к элементу Воо1з1гар
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке
Страница 1С0п_1.Ыт1

В этом шаблоне созданы три кнопки разного цвета с расположением значков (иконок)
слева и справа от текстовой надписи. В итоге в окне браузера страница юоп_1 .И1т1 будет
будет выглядеть так, как показано на рис. 2.8.

Подключение иконок к элементам Воо(51гар

Иконки на кнопках

СХПоиск I Внимание О I ©Назад

Рис. 2.8. Значки на кнопках Воо1з1гар

Значки можно поместить в любое место страницы сайта, указав их нужный цвет и раз-
мер. Пример НТМЬ-кода страницы, в которой показано отображение значков разного
цвета и размера в адаптивных блоках, приведен в листинге 2.7 (страница юоп_2.И1т1).

Листинг 2.7. Страница 1С0П_2.Ыт1

{% ехкеМз "зйор/Ьазе.Ыдп!” %}

{% Ыоск йеайег %}

<сНу с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Вывод иконок на страницы сайта</к4>

</сНу>

{% епбЫоск йеайег %}

{% Ь1оск сопкепк%}

<сНу с1азз=”сопка1пег">

<сНу с1азз=”гом”>Иконки разного цвета и размера</сНу>

<сИу с1азз=”гом”>

<сНу с1азз="со1-2">

<Ъ5>Синяя Згет</Ъ5><1 с1азз="Ы-зеагсй кехк-ргтагу” зку1е="копк-312е: Згет;"></1>

</сИу>

<сНу с1азз=”со1-2”>

<Ь5>Красная 5гет</Ъ5><1 с1азз="Ы-Ье!1 кехк-йапдег” зку1е=”копк-з12е: 5гет; "></!>

</сНу>

<сНу с1азз=”со1-2">

<Ъ5>Зеленая 7гет</Ъ5><1 с1азз="Ы-аггом-1екк-с1гс1е кехк-зиссезз"

зку1е="копк-з1хе: 7гет; "></!>

</сНу>

</сНу>

</сНу>

{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1С0П_2.Ыт1
В этом шаблоне созданы три значка (иконки) разного цвета (цвет задан классами кехк-
ргтагу, кехк-йапдег И кехк-зиссезз) И разного размера (размер задан СТИЛЯМИ Гопк-згхе: Згет,
Гопг-захе: 5гет и Гопк-з1хе: 7гет). В итоге в окне браузера страница 1СОП_2.И1т1 будет вы-
глядеть так, как показано на рис. 2.9.

Вывод иконок на страницы сайта

Рис. 2.9. Значки разного цвета и размера на странице сайта

Нужный цвет и размер значкам можно задать и с помощью стилей. Пример НТМЬ-кода
страницы, в которой показано задание цвета и размера значков с помощью стилей, при-
веден в листинге 2.8 (страница 1соп_З.И1т1).

Листинг 2.8. Страница 1СОП_З.Ыт1

{% ехкепйз "зйор/Ьазе.ЬктГ' %}

{% Ыоск йеайег %}

<сЦу с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Вывод иконок на страницы сайта</В4>

</сПу>

{% епбЫоск йеайег %}

{% Ыоск сопкепк%}

<сПу с1азз=’’сопка1пег">

<сНу с!азз="гом”>Иконки разного цвета и размера</сНу>

<сИу с1азз=”гом”>

<сПу с1азз=”со1-2”>

<В5>Красная 48рх</Ъ5><1 с1азз="Ы Ы-еагЬис1з"
зку1е="копк-з1хе: 48рх; со1ог: гес1;"></!>

</сПу>

<сПу с1азз=”со1-2”>

<В5>Синяя 64рх</й5><1 с1азз="Ы Ы-еагЬис1з"
зку1е=”копк-з1хе: 64рх; со!ог: Ыие;"></!>

</сПу>

<сПу с1азз=”со1-2”>

<Ъ5>Зеленая 76рх</й5><1 с1азз="Ы Ы-еагЬис1з"

зку1е=”Гопк-з1хе: 76рх; со1ог: дгееп;"></!>

</сНу>

</сПу>

</сПу>

{% епбЫоск сопкепк %}
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1С0п_З.Ыт1

В этом шаблоне созданы три значка (иконки) разного размера (размер задан стилями
ГопГ-512е: 48рх, Гопр-захе: 64рх И ГопЬ-зГхе: 7брх) И раЗНОГО Цвета (цвет Задан СТИЛЯМИ со1ог:
геф со1ог: Ыие и со1ог: дгееп). В итоге в окне браузера страница 1соп_З.И1т1 будет выгля-
деть так, как показано на рис. 2.10.

Вывод иконок на страницы сайта

Иконки разного цвета и размера

Красная 48рх Синяя 64рх

Зеленая 76рх

Рис. 2.10. Значки разного цвета и размера с параметрами, заданными через стили

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

Компонент таЬз фреймворка Воо181гар предназначен для добавления на страницу вкла-
док. Вкладки используются тогда, когда контент нужно показывать не сразу весь цели-
ком, а определенными порциями. Переключение между этими порциями осуществля-
ется с помощью вкладок.

Какие преимущества дает использование вкладок? Во-первых, вкладки улучшают орга-
низацию данных на странице и ее внешний вид: доступ к информации становится более
простым и понятным. Во-вторых, занимая определенную часть страницы, они позво-
ляют разместить на ней намного больше информации: страница становится более ком-
пактной и в ней намного проще ориентироваться. Мы рассмотрим несколько вариантов
использования вкладок:

♦	традиционные горизонтальные вкладки;

♦	вкладки, созданные с использованием циклов В)ап§о;

♦	вертикальные вкладки с использованием кнопок.

2	.4.1. Традиционные горизонтальные вкладки ТаЬз
фреймворка ВооЫгар

Реализация вкладок начинается с создания списка и1 с классами пау и пау-гаЬз. Затем в и1
нужно поместить определенное количество элементов и с классом пау-1гет — это коли-
чество должно соответствовать количеству вкладок, которые мы хотим создать. При-
мер НТМЬ-кода страницы, в которой показано создание трех горизонтальных вкладок,
приведен в листинге 2.9 (страница 1аЬз_1 .И1т1).
Листинг 2.9. Страница 1аЬ8_1.Ыт1

{% ехкепйз "зкор/Ьазе.кктГ’ %}

{% Ыоск кеайег %}

<(Ы с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Простые горизонтальные вкладки ТаЬз</Н4>

</сЫ>

{% епсЫоск кеайег %}

{% Ыоск сопкепк%}

<!— Заголовки вкладок —>

<Ы с!азз=”пау пау-каЬз”>

<	!— Заголовки вкладки 1 —>

<11 с1азз=”пау-1кет”>

<а Ьгек=”#каЬ_1" Ыазз="пау-Ипк аскЫе" (1ака-Ьз-кодд1е=”каЬ”>Вкладка 1</а>
</11>

<	!— Заголовки вкладки 2 —>

<11 с1азз=”пау-1кет”>

<а Ыек=”#каЬ_2” с1азз="пау-Ипк" с!ака-Ьз-кодд1е="каЬ">Вкладка 2</а>

</И>

<	!— Заголовки вкладки 3 —>

<11 с1азз=”пау-1кет”>

<а Ыек="#каЬ_3" с1азз="пау-Ипк" с!ака-Ьз-кодд1е="каЬ">Вкладка 3</а>

<	/И>

</Ы>

<!— Содержимое вкладок —>

<Ы с1азз=”каЬ-сопкепк”>

<!— Содержимое вкладки 1 —>

<Ы с1азз=”каЬ-рапе Вайе зкюм аскЫе" 1с1="каЬ_1">

<(Ы Ыазз=”гом ту-1”>

<Ы с1азз=”со1-12 кехк-сепкег">

{% 1пс1ис1е ”тазкег/д1ауа_2/каЬ_1 .ккт!" %}

</Ы>

</Ы>

</Ы>

<!— Содержимое вкладки 2 —>

<Ы с1азз="каЬ-рапе кайе" 1с1="каЬ_2">

<Ы Ыазз=”гом ту-1”>

<Ы с1азз=”со1-12 кехк-сепкег">

{% 1пс1ис1е ”тазкег/д1ауа_2/каЬ_2.ккт!" %}

</Ы>

</Ы>

</Ы>

<!— Содержимое вкладки 3 —>

<Ы с1азз=”каЬ-рапе Вайе” Ы="каЬ_3">

<Ы Ыазз=”гом ту-1”>

<Ы с1азз=”со1-12 кехк-сепкег">
{% ВпсВийе ’’тазВег/д1ауа_2/ВаЬ_З.ЬВтГ' %}

</сНу>

</сНу>

</сНу>

</сНу>

{% епйЫоск сопВепВ %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1аЬ8_1.Мт1.

В ЭТОМ программном модуле созданы три вкладки С заголовками: Вкладка 1, Вкладка 2
И Вкладка 3. ДЛЯ СОЗДанИЯ группы ЗагОЛОВКОВ вкладок использовался класс с1азз=”пау пау-
ваЬз. Каждый заголовок сформирован на основе класса с1азз="пау-ввет" и оформлен
в виде ссылки с указанием идентификатора вкладки: ЬгеВ=”#ваЬ_1, ЬгеВ=,,#ваЬ_2" и
ЬгеВ="#ваЬ_3". Для первой вкладки указано, что при открытии блока с вкладками она
будет активной: с1азз="пау-11пк аскдуе”.

Для создания группы С содержимым вкладок использовался класс с1азз="ВаЬ-сопВепВ".
Формирование содержимого каждой отдельной вкладки реализовано на основе класса
с1азз="ВаЬ-рапе Вайе". Для содержимого каждой вкладки указывается тот же идентифика-
тор, который был задан в соответствующем заголовке: ва="ваь_г', ва="ваь_2" и ва=’'ваь_зп.
При этом при открытии группы вкладок будет отображаться содержимое первой
(активной) вкладки:

с1азз=”ВаЬ-рапе Вайе зйом асВВуе" 1й="ВаЬ_1".

В качестве содержимого каждая вкладка содержит ссылку на другую страницу сайта
с использованием тега В)ап§о ВпсВийе. Эти страницы находятся по следующим ИКЬ-
адресам (в папках, вложенных в папку 1етр1а1е8 сайта):

♦	{%	ВпсВийе	"тазВег/д!ауа_2/ВаЬ_1.НВт!"	%};

♦	{%	ВпсВийе	"тазВег/д!ауа_2/ВаЬ_2.НВт!"	%};

♦	{%	ВпсВийе	"тазВег/д!ауа_2/ВаЬ_3.ЬВт!"	%}.

Указанные страницы содержат код, приведенный в листингах 2.9.1-2.9.3.

Листинг 2.9.1. Страница 1аЬ_1.Гйт1

<сИV с!азз=”гом тх-2”>Изменение цвета параметром орасВВу</сПу>

<сИу с1азз=”гом тх-2 ВехВ-сепВег">

<сйу с1азз=”со! ру-5 ВехВ-ИдЬВ Ьд-ргВтагу">Ьд-ргВтагу</сПу>

<сИу с1азз=”со! ру-5 ВехВ-ИдЬВ Ьд-ргВтагу Ьд-орас1Ву-75">Ьд-орас1Ву-75</с1гу>

<сЦу с1азз="со! ру-5 ВехВ-ИдЬВ Ьд-ргВтагу Ьд-орасВВу-50”>Ьд-орасВВу-50</й1У>

<сИу с1азз=”со1 ру-5 ВехВ-йагк Ьд-ргВтагу Ьд-орас1Ву-25">Ьд-орасВВу-25</с1гу>

<сПу с1азз=”со! ру-5 ВехВ-йагк Ьд-ргВтагу Ьд-орасВВу-10”>Ьд-орасВВу-10</сПу>

</сПу>

«Пу с1азз=”гом тх-2 ВехВ-сепВег ту-2">

<сИу с1азз="со! ру-5 ВехВ-ИдЬВ Ьд-зиссезз">Ьд-зиссезз</сПу>
<сИу с1азз="со1 ру-5 ЬехЬ-ИдЫ: Ьд-зиссезз Ьд-орас1Ьу-75”>Ьд-орас1Ьу-75</с11У>

<с11у с1азз="со! ру-5 ЬехЬ-ИдЬЬ Ьд-зиссезз Ьд-орасИу-50">Ьд-орас1Ьу-50</с11у>

<с11у с1азз="со! ру-5 ЬехЬ-с1агк Ьд-зиссезз Ьд-орас1Ьу-25”>Ьд-орас1Ьу-25</с11у>

<с11у с1азз="со! ру-5 ЬехЬ-Ьагк Ьд-зиссезз Ьд-орас1ку-10">Ьд-орас1Ьу-10</с11у>

</сИу>

Листинг 2.9.2. Страница 1аЬ_2.Ыт1

<с11У с!азз="гом тх-2”>Базовые цвета</сПу>

<сНу с1азз=”гом тх-2 ЬехЬ-сепкег">

<с11У с1азз=”со1 тх-2 ру-5 кехк-Идкк Ьд-рг1тагу">Ьд-рг1тагу</с11у>

<с!1У с1азз=”со! тх-2 ру-5 Ьехк-ИдкЬ Ьд-зесопЬагу">Ьд-зесопс1агу</с1гУ>

<с11у с1азз="со! тх-2 ру-5 Гехк-ИдЬк Ьд-зиссезз">Ьд-зиссезз</с11у>

<с11у с1азз="со! тх-2 ру-5 Гехк-ИдЬк Ьд-с1апдег">Ьд-с1апдег</с11у>

<сНу с1азз=”со! тх-2 ру-5 Ьехк-Ьагк Ьд-магп1пд">Ьд-дагп1пд</сИу>

</сИу>

Листинг 2.9.3. Страница 1аЬ_З.Ыт1

<с!1У с!азз="гом тх-2 ту-2”>

<сНу с1азз="со1 тх-2	Ьд-ЬпБо	ЬогЬег ЬогЬег-5	Ьогс1ег-рг1тагу”>Блок 1</сИу>
<сПу с1азз="со1 тх-2	Ьд-ЬпБо	ЬогЬег ЬогЬег-5	Ьогс1ег-зесопс1агу">Блок 2</сПу>
<сНу с1азз=”со! тх-2	Ьд-ЬпБо	ЬогЬег ЬогЬег-5	Ьогс1ег-зиссезз”>Блок 3</сИу>
СсИу с1азз="со1 тх-2	Ьд-ЬпБо	ЬогЬег ЬогЬег-5	Ьогс1ег-с1апдег">Блок 4</сПу>
<сИу с1азз=”со! тх-2	Ьд-ЬпБо	ЬогЬег ЬогЬег-5	Ьогс1ег-шгп1пд”>Блок 5</сИу>

</Ыу>

В итоге в окне браузера страница 1аЬ8_1.И1т1 будет выглядеть так, как представлено на
рис. 2.11-2.13.

Как показано на этих рисунках, в одной и той же области экрана на одной странице за
счет использования вкладок можно отображать совершенно разную информацию.

Простые горизонтальные вкладки ТаЬз

Вкладка 1

Вкладка 2 Вкладка 3

Изменение цвета параметром орасНу

Ьд-орасйу-.

Ьд-орасйу-;

Ьд-орасНу-10

Ьд-орасйу-10
Простые горизонтальные вкладки ТаЬз

Вкладка 1 Вкладка 2 Вкладка 3

БаарЕп е цвета

Ьд-рптагу

Ьд-5есогк1агу И Ьдвиссек И Ьд-<1алдег

Ьд-шаттд

Рис. 2.12. Страница 1аЬз_1.Н1т1 с открытой вкладкой Вкладка 2

Простые горизонтальные вкладки ТаЬз

Вкладка 1 Вкладка 2 Вкладка 1

ьтос 1	1 Блок 2 I Блок 5 I I Елок 4	1 БЙйсЗ

Рис. 2.13. Страница 1аЬз_1.Н1т1 с открытой вкладкой Вкладка 3

2.4.2. Традиционные вертикальные ькладки ТаЬз
фреймворка Воо<8<гар

Реализация вертикальных вкладок практически не отличается от реализации горизон-
тальных — нужно просто создать два адаптивных блока гои, при этом в левый блок по-
местить заголовки вкладок, а в правом блоке отобразить их контент. Пример НТМЬ-
кода страницы, в которой показано создание трех вертикальных вкладок, приведен
в листинге 2.10 (страница 1аЬ8_2.И1т1).

Листинг 2.10г Страница 1аЬ8_2.Ыт1

{% ехкепйз "зЬор/Ьазе.ЫтГ' %}

{% Ыоск кеайег %}

<(Ы с1азз="гом кехЫзкаЫ тх-2">

<Ъ4>Простые вертикальные вкладки ТаЬз</Ь4>

</(Ы>

{% епсЫоск кеайег %}

{% Ыоск сопкепЫ}

<(Ы с1азз="гом">

<(Ы с!азз=”со1-тс1-2”>

<!— Заголовки вкладок —>

<и! с!азз="пау пау-ЫЬз”>

<!— Заголовки вкладки 1 —>

<11 с1азз=”пау-Ыет”>

<а ЪгеГ=”#РаЬ_1” Ыазз="пау-Ипк аскЫе" с!ака-Ьз-кодд1е=”каЬ”>Вкладка 1</а>

</И>
<	!— Заголовки вкладки 2 —>

<И с1азз="пау-1Вет">

<а ВгеВ="#ВаЬ_2" с1азз="пау-Ипк" йака-Ьз-Водд1е="каЬ">Вкладка 2</а>

</И>

<	!— Заголовки вкладки 3 —>

<И с1азз="пау-1Вет">

<а ВгеВ="#ВаЬ_3" с1азз="пау-Ипк" йака-Ьз-Водд1е="каЬ">Вкладка 3</а>

</И>

</и1>

</(И'\7>

<сНу с1азз="со1-тй-10">

<!— Содержимое вкладок —>

<сИу с1азз="ВаЬ-сопВепР">

<	!— Содержимое вкладки 1 —>

<сНу с1азз=”ВаЬ-рапе Вайе зком асИуе" 1й="1:аЬ_1">

«Ну с1азз="гом ту-1”>

<сНу с1азз=”со1-12 ВехВ-сепкег">

{% 1пс1ийе "тазВег/д1ауа_2/ВаЬ_1.ВВш!" %}

</Й1У>

</Й1У>

</Й1У>

<	!— Содержимое вкладки 2 —>

<сИу с1азз="ВаЬ-рапе Вайе" 1й="ВаЬ_2">

<й1у с1азз="гом ту-1">

<й1у с1азз="со1-12 ВехВ-сепкег">

{% 1пс1ийе "тазВег/д1ауа_2/ВаЬ_2.кВт!" %}

</Й1У>

</Й1У>

</Й1У>

<	!— Содержимое вкладки 3 —>

<й1у с1азз="ВаЬ-рапе Вайе" 1й="ВаЬ_3">

<й1у с1азз="гом ту-1">

<й1у с1азз="со1-12 РехВ-сепВег">

{% 1пс1ийе "тазВег/д1ауа_2/ВаЬ_3.ВВт!" %}

</Й1У>

</Й1У>

</Й1У>

</Й1У>

</Й1У>

</Й1У>

{% епйЫоск сопВепВ %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1аЬ8_2.Ыт1 На больших экранах для того, чтобы вертикальные кнопки отобразились
с левой стороны экрана, необходимо уменьшить размер окна браузера.
Шаблон этой НТМЬ-страницы имеет следующую структуру:

<сНу с1азз=’’гом">

<сИу с1азз=”со1-тс1-2">

<!— Заголовки вкладок —>

</сИу>

<сИу с1азз="со1-тс!-10">

<!— Содержимое вкладок —>

</сИу>

</сИу>

В этом шаблоне создана строка гож в которую вложены два адаптивных блока: первый
блок размером В две КОЛОНКИ (<сИу с1азз=”со1-тс!-2”>) и второй блок размером 10 колонок
(<сНу с1азз="со1-тс1-10’'>). В первом блоке находится класс для создания заголовков вкла-
док, во втором блоке — класс для создания контента вкладок. В итоге в окне браузера
страница 1аЬ8_2.Ыт1 будет выглядеть так, как показано на рис. 2.14-2.16.

Простые вертикальные вкладки ТаЬз  Вкладка 1	Изменение цвета параметром орасПу				
Вкладка 2  Вкладка 3	Ьд-рптагу	Ьд-орасйу-75		Ьд-ораа1у-25	Ьд-орасйу-10
	Ьд-Енссеаз	Ьд-орасйу-75		Ьд-орао1у-25	Ьд-орасйу-10

Рис. 2.14. Страница 1аЬ8_2.Ыт1 с открытой вкладкой Вкладка 1

Простые верт  Вкладка 1  Вкладка 2  Вкладка 3	икальные в  азсвые цвета	Ю	тадки ТаЬз						Ьд-игагппд

Рис. 2.15. Страница 1аЬ8_2.Ыт1 с открытой вкладкой Вкладка 2

Простые вертикальные вкладки ТаЬз

Вкладка 1

Вкладка 2

Г а |	।

Блок 5

Вкладка В
2.4.3.	Горизонтальные вкладки ТаЬз

с использованием тега Г^апдо для организации циклов

Достаточно часто при разработке сайтов возникает необходимость создания динамич-
ных вкладок. Например, когда загружаются несколько записей из БД, каждую из кото-
рых необходимо показать в отдельной вкладке. При этом могут различаться количество
вкладок, их заголовки и содержимое контента. Такие вкладки можно создавать дина-
мически с использованием тега В)ап§о для организации циклов.

Для создания динамичных вкладок потребуется согласованная работа сразу нескольких
модулей: модуля с определением имени ПВЪ-маршрута, самого ПВЪ-маршрута с ука-
занием имени представления (ухеду), представления, в котором загружаются динамич-
ные данные и указывается имя шаблона, и, наконец, самого шаблона для отображения
данных.

В следующем примере приведены коды этих модулей, которые задействованы в рамках
нашей интерактивной цифровой платформы. В ваших проектах имена файлов и пути их
размещения будут совершенно другими, но код итогового шаблона можно взять за
основу для подключения к собственным проектам.

Итак, начнем с модуля, в котором определяется имя ИВЪ-маршрута (ссылка на ИКП
маршрут):

<а ЪгеТ="{% иг1 'тазЬег:ЬаЬз_3' %}" 1загде1з ="_Ыапк">Страница ЬаЬз_З.Ылп1</а>

По этой ссылке из приложения тазьег вызывается маршрут с именем гаЬз З.

Сам маршрут в файле иНз.ру имеет следующий код:

раЫ( 'д1ауа_2/ГаЬз_3/', У1емз. ЬаЬз_3, паше='ЬаЬз_3')

По этому маршруту будет активировано представление с именем ьаЪз_з.

Представление с именем ьаЬз_з имеет следующий упрощенный код:

(ЛеГ каЬз_3 (гедиезЬ) :

ЬаЬ = ['Вкладка 1', 'Вкладка 2', 'Вкладка 3']

сопЬепЬ = {'ЬаЬ': ЬаЬ}

геЬигп гепЬег(гедиезЬ, ’тазкег/д1ауа_2/ГаЬз_3 .Ыш1', сопЬепЬ)

В этом представлении наименования вкладок ТаЬз сформированы в виде простого спи-
ска ьаь. В реальных проектах имена вкладок (как и их содержимое) могут быть подгру-
жены из БД, и все эти данные упакованы в списки или кортежи.

На следующем шаге полученные динамичные данные упаковываются в словарь с име-
нем сопгепг, и этот словарь передается в шаблон с именем 1аЬ8_З.К1т1.

Упрощенный пример НТМЬ-кода страницы, в которой показано создание трех дина-
мичных горизонтальных вкладок, приведен в листинге 2.11 (страница 1аЬ8_З.И1т1).

Листинг 2.11. Страница 1аЬ8_З.Ыт1

{% ехЬепЬз "зкор/Ьазе.ЬртГ’ %}

{% Ыоск ЬеаЬег %}

«ТЫ с1азз=”гом ЬехЫзЫгк тх-2">

<Ь4^Горизонтальные вкладки ТаЬз с использованием циклов В^апдо</Ь4>
</сИу>

{% епсЫоск кеайег %}

{% Ыоск сопкепкк}

<!— Заголовки вкладок —>

<и1 с1азз=”пау пау-каЬз”>

<!— Заголовки вкладки 1 —>

{% ког оЬд 1п каЬ %}

<11 с1азз=”пау-1кет ">

<а ЪгЫ=”#у{ { 1ог1оор.соипкег }}"

с1азз=”пау-Ипк {% И 1ог1оор. Ыгзк %}аскгуе{% епсПГ %}”

с!ака-Ьз-кодд1е="каЬ">{ {оЬд} }</а>

</И>

{% епЫог %}

</и1>

<!— Содержимое вкладок —>

<сИу с1азз=”каЬ-сопкепк”>

{% ког оЬд 1п как %}

<сИу с1азз=”каЬ-рапе 1ас1е {% 11 1ог1оор. Ыгзк %}зкюм аскЫе{% епсП1 %}”

1с1="у{ { 1ог1оор.соипкег }}”>

<<±Ы с1аз8="гом ту-1”>

<сИу с1азз=”со1-12 кехк-зкагк">

{% И 1ог1оор.соипкег == 1 %}

{% 1пс1ис1е "тазкег/д1ауа_2/каЬ_1.ккт!" %}

{% еШ 1ог1оор.соипкег == 2 %}

{% 1пс1ис1е ”тазкег/д1ауа_2/каЬ_2.ккт!" %}

{% еШ коЫоор.соипкег == 3 %}

{% 1пс1ис1е ”тазкег/д1ауа_2/каЬ_3.ккт!" %}

{% епсН! %}

</сНу>

</сИу>

</скЫ>

{% епЫог %}

</сИу>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1а Ь 8_3. Мт I

Рассмотрим более детально код этого шаблона, в котором, собственно, и будут сфор-
мированы динамичные вкладки.

Сразу следует отметить, что при использовании циклов программный код значительно
короче, чем коды предыдущих примеров, где они также формируют три вкладки.

Формирование заголовков вкладок здесь выполняется с использованием тегов В]ап§о
для создания циклов со следующей структурой:
{% Вог оЬд 1п каЬ %}

{% епйВог %}

В этом цикле идентификаторы вкладок формируются на основе счетчика циклов
ЬгеВ="М { ВогВоор.сошЛег }}". При первоначальной загрузке страницы активной будет
первая вкладка, что обеспечивает следующий класс:

сВазз="пау-ВВпк {% 1В ВогВоор.ВВгзк %}аск1Уе{% епсИВ %}"

Имена заголовков вкладок создаются из объекта окт), который получает значения из
элементов списка ваь (в представлении этот список имеет следующие значения:
ВаЬ = ['Вкладка 1', 'Вкладка 2', 'Вкладка 3']) — за ЭТО Отвечает параметр йака-Ьз-коддВе=
"ВаЬ">({оЬд}}.

Содержимое вкладок (контент) также отображается в цикле со следующей структурой:

{% Вог оЬд 1п ВаЬ %}

{% 1В ВогВоор.соипкег == 1 %}

{% ВпсВийе "<имя файла> .ЫдпВ" %}

{% еИВ ВогВоор.соипкег == 2 %}

{% ВпсВийе "<имя файлах ИктВ" %}

{% еИВ ВогВоор.соипкег == 3 %}

{% ВпсВийе "<имя файлах ИктВ" %}

{% епЩВ %}

{% епйВог %}

В теле цикла для активации содержимого той или иной вкладки используется следую-
щий класс:

<сПл сВазз="каЬ-рапе Вайе {% ВВ ВогВоор.ВВгзк %} зком аск1ле{% епсЛВ %}"
Щ="у{ { ВогВоор. соипкег }} ">

В итоге в окне браузера страница 1аЬ8_З.И1т1 будет выглядеть так же, как показано
ранее на рис. 2.14-2.16.

2.4.4. Вертикальные кнопки для навигации
по вкладкам ТаЬз фреймворка Воо^гар

Реализация вертикальных вкладок с кнопками достаточно сильно отличается от реали-
зации обычных горизонтальных и вертикальных вкладок. Для их формирования
используется класс рввв (таблетка, капсула). Пример НТМЬ-кода страницы, в которой
показано создание трех вертикальных вкладок с кнопками, приведен в листинге 2.12
(страница 1аЬ8_4.И1т1).

Листинг 2.12. Страница 1аЬ8_4.Гйт1

{% ехкепйз "зйор/Ьазе.йктВ" %}

{% ЬВоск йеайег %}

<Й1У сВазз="гом ВехВ-зкагк тх-2">

<Ъ4>Вертикальные вкладки ТаЬз с кнопками</Ъ4>

</Й1У>

{% епйЬВоск йеайег %}
{% Ыоск сопкепЫ}

<Ыу с!азз="й-В1ех а1Вдп-ВВешз-зВагВ">

<!— Кнопки —>

<ййу с1азз=”пау В1ех-со1тп пау-рВПз те-3"

Вй="у-рВ11з-ВаЬ" го1е=”1:аЫ1з1:" агВа-огВепВаВВоп="уегВВсаГ’>

сЬиййоп с1азз=”пау-Ипк асВЫе" 1й="у-1-1:аЬ"

йаВа-Ьз-Водд1е="рВН" йака-Ьз-Вагдек="#у-1"

Вуре="Ьиййоп" го1е="ВаЬ" агВа-зе1ескей="Вгие">Кнопка 1

</ЬиЫоп>

<ЬиВВоп с1аз8="пау-Ипк" 1й="у-2-ВаЬ"

йака-Ьз-Водд1е="рВ11" йаВа-Ьз-ВагдеВ="#у-2"

Вуре="Ьиййоп" го1е=”ВаЬ" агВа-зе1есВей="Ва1зе">Кнопка 2

</ЬиЫоп>

<ЬиВйоп с1азз="пау-Ипк” 1й="у-3-ВаЬ"

йака-Ьз-Водд1е="рВ11" йаВа-Ьз-ВагдеВ="#у-3"

Вуре="Ьиккоп" го1е="ВаЬ" аг!а-зе1ес1:ей="Ва1зе">Кнопка 3

</ЬиЫоп>

</ййу>

<!— Вкладки —>

<сИу с1азз="ВаЬ-сопкепк" Вй="у-рВ11з-ВаЬСопВепВ">

<ййу с1азз="ВаЬ-рапе Вайе зкюм асВЫе" 1й="у-1"

го1е="ВаЬрапе1" >{% ВпсВийе "тазВег/д1ауа_2/ВаЬ_1ЫВт!" %}</Ыу>

<ЙЫ с1азз="ВаЬ-рапе Вайе" 1й="у-2"

го1е="ВаЬрапе1" >{% ВпсЫйе "тазВег/д1ауа_2/ВаЬ_2ЫВт!" %}</йВу>

<й1у с1азз="ВаЬ-рапе Вайе" 1й="у-3"

го1е="ВаЬрапе1" >{% ВпсЫйе "тазВег/д1ауа_2/ВаЬ_3ЫВт!" %}</йВу>

</Й1У>

</Й1У>

{% епйЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1аЬ8_4.Ыт1

В ЭТОМ программном коде созданы три КНОПКИ С текстовой надписью: Кнопка 1, Кнопка 2 и
Кнопка 3. Каждая кнопка имеет СВОЙ идентификатор: Вй="у-1-ВаЬ", Вй="у-2-ВаЬ", Вй="у-2-ВаЬ",
а также связанный С КНОПКОЙ идентификатор вкладки: йаВа-Ьз-Вагдек="#у-1", йаВа-Ьз-
ВагдеВ="#у-2", йака-Ьз-Вагдек="#у-3". Первая кнопка является активной: с!азз="пау-1Впк
асЫуе".

Каждая вкладка также имеет свой идентификатор для связи с кнопкой: вй="у-1", вй="у-2",
вй="у-3". Первая вкладка является активной: с1азз="ваь-рапе Вайе зЬом асЫуе". В каждую
вкладку встроена другая НТМЬ-страница с использованием тега ВпсЫйе.

В итоге в окне браузера страница 1аЬ8_4.К1т1 будет будет выглядеть так, как показано на
рис. 2.17-2.19.
Рис. 2.18. Страница 1аЬ8_4.Н1т1 с открытой по кнопке Кнопка 2 вкладкой

Вертикальные вкладки ТаЬз с кнопками

Кнопка 1

Кнопка 2

| Кнопка 3

Рис. 2.19. Страница 1аЬ8_4.Н1т1 с открытой по кнопке Кнопка 3 вкладкой

2.5.	Компонент Воо(§<гар ОГсапуаз

В Воо181гар 5 появился еще один новый компонент — сжеатлаз, который позволяет соз-
давать выплывающую панель. Такая панель обычно используется в веб-сайтах для ото-
бражения меню на небольших устройствах. Выплывающую панель можно поместить
на любую сторону страницы, используя следующие параметры:

♦	о^сат/аз-зтагт — панель выплывает слева;

♦	о^сат/аз-тор — панель выплывает сверху;
♦	оллсапуаз-епа — панель выплывает справа;

♦	оЫсат/аз-Ьоккот — панель выплывает снизу.

В программном коде также можно указать, должен элемент оГГсат/аз иметь фон или нет.
Пример НТМЬ-кода страницы, в которой показано создание элемента оГГсатгаз, приве-
ден в листинге 2.13 (страница оЯсапуа8_1 .И1т1).

Листинг 2.13. Страница оГСсапуаз_1.Мт1

{% ехкепйз "зйор/Ьазе.йктГ’ %}

{% 1оас1 зкакЛс %}

{% Ыоск йеайег %}

<Ыу с1азз=”гом кехк-зкагк тх-2">

<В4>Элемент Воокзкгар 0Ысапуаз</Н4>

</сЫ>

{% епсЫоск кеайег %}

{% Ыоск сопкепк%}

<Ыу Ыазз="сопка1пег">

<!— Левая выплывающая панель —>

СскЫ с1азз="гом”>Панель выплывает слева</с11У>

<Ьиккоп Ыазз=”Ып Ып-рЫшагу" куре="Ьыккоп" аака-Ьз-кодд1е="оЫсапуаз"
с!ака-Ьз-кагдек="#оЫсапуаззкагк"

аг1а-сопкго1з="оЫсапуаззкагк">Кнопка левой панели

</Ьиккоп>

<Ыу с1азз=”оЫсапуаз оЫсашлаз-зкагк" каЫпс!ех="-Г’

Ы="оЫсапуаззкагк" аг1а-1аЬе11ес1Ьу="оЫсапуаззкагкЬаЬе1">

<(Ы Ыазз=”оЫсапуаз-йеас1ег">

<Ъ5 Ы="оЫсапуаззкагкЬаЬе1">Левая панель</Н5>

<Ьиккоп куре="Ьиккоп" с1азз="Ып-Ыозе кехк-гезек”

Лака-Ьз-сИзт1зз=”оЫсапуаз" аг1а-1аЬе1="С1озе”>

</Ьиккоп>

</Ы>

<Ыу с1азз=”оЫсапуаз-Ьос1у">

<Ы Ыазз="гом">

<Ыу с!азз=”со1-зт-4”>

<1тд згс="{% зкаЫс ' 1тадез/АР_400.рпд' %}"
с1азз=”1тд-к1иЫ" а1к="СГС">

</Ы>

</Ы>

</Ы>

</(Ы>

<!— Верхняя выплывающая панель —>

<Ыу Ыазз=”гом”>Панель выплывает сверху</сИу>

<Ьиккоп с!азз="Ькп Ькп-рглтагу" куре="Ьиккоп" Лака-Ьз-кодд1е="оЫсапуаз"
Лака-Ьз-кагдек="#оЫсапуазТор"

аг1а-сопкго1з=”оЫсапуазТор">Кнопка верхней панели

</Ьиккоп>
<сНу с1азз="оРРсапуаз оРРсапуаз-кор к-50" ВаЫпс1ех="-1"
1с1="оРРсапуазТор" аг1а-1аЬе11еН1эу="оРРсапуазТорЬаЬе1">

<сЦу с1азз="оРРсапуаз-Неас1ег">

<Н5 1с1="оРРсапуазТорЬаЬе1">Верхняя панель</П5>

сЬиккоп куре="Ьиккоп" с1азз="Ькп-с1озе кехк-гезек"
с!ака-Ьз-с11зт1зз="оРРсапуаз" аг!а-1аЬе1="С1озе">

</Ьиккоп>

</сНу>

<сНу с1азз="оРРсапуаз-Ьос1у">

<сНу с1азз="гом">

<сНу с1азз="со1-зт-4">

<1тд згс="{% зкакас '1тадез/АР_400.рпд' %}"
с1азз="1тд-Г1ц1сГ’ а1к="СЕС">

</сИу>

</сНу>

</сНу>

</сНу>

<!— Правая выплывающая панель —>

<сИу с1а83="гом">Панель выплывает справа</сИу>

сЬиккоп с1азз="ЬЕп Ыт-ргнпагу" куре="Ьи1±оп" с!ака-Ьз-кодд1е="оРРсапуаз"

с1ака-Ьз-кагдек="#оРРсапуазК1дЫ1"

аг1а-сопкго1з="оРРсапуазК1дЫ1">Кнопка правой панели

</ЬиВВоп>

<с11у с1азз="оРРсапуаз оРРсапуаз-епс! м-50" каЫпс1ех="-Г’ 1с1="оРРсапуазК1дЬк"
аг1а-1аЬе11ес1Ьу="оРРсапуазК1дЫ1ЬаЬе1">

<сНу с1азз="оРРсапуаз-Ьеас1ег">

<Ь5 1с1="оРРсапуазК1дЬкЬаЬе1">Правая панель</П5>

<ЬиШ)п Пуре="ЬикЬэп" с1азз="Ыт-с1озе кехк-гезек"
с!ака-Ьз-с11зт1зз="оРРсапуаз" аг1а-1аЬе1="С1озе">

</ЬиВВоп>

</(Цу>

<сНу с1азз="оРРсапуаз-Ьос1у">

<сНу с1азз="гом">

<сИу с1азз="со1-зт-4">

<1тд згс="{% зкакас '1тадез/АР_400.рпд' %}"
с1аз5="1тд-Г1ц1сГ а1П="СГС">

</сИу>

</сНу>

</сИу>

</сНу>

<!— Нижняя выплывающая панель —>

<сИу с1азз="гом">Панель выплывает снизу</сПу>

<ЬиШэп с1азз="ЬВп ЬВп-рглпагу" Руре="ЬиШ)п" с!ака-Ьз-кодд1е="оРРсапуаз"
с1ака-Ь8-кагдек="#оРРсапуазВо’Ыют"
аг1а-сопВго1з="оРРсапуазВо-Ы1от">Кнопка нижней панели

</ЬиВВоп>
<сИу с1азз="оГГсагтуаз оГГсатлаз-Ьоккош к-50" ГаЫпс1ех="-Г’
1с1="окксапуазВоккот" аг1а-1аЬе11ес&у="окксапуазВоккотЪаЬе1">

<сИу с1азз="окксапуаз-кеас1ег">

<Ъ5 с1азз="окксапуаз-В1111е" 1(1="окксапуазВо1111отЬаЬе1">Нижняя панель</И5>

сЬиккоп куре="Ьиккоп" с1азз="Ыт-с1озе кехк-гезек"
с1ака-Ьз-с11зт1зз="окксапуаз" аг1а-1аЬе1="С1озе">

</Ьиккоп>

</с11у>

<сНу с1аз8="окксапуаз-Ьос1у">

<сИу с1азз="гом">

<сИу с1азз="со1-зт-4">

<1тд згс="{% зкаПс ’1тадез/АР_400.рпд' %}"
с1аз8="1тд-Р1и1сГ а1к="СГС">

</сНу>

</сНу>

</Щу>

</сНу>

</сНу>

{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница о№апуаз_1.Ыт1.

В этом программном коде созданы четыре выплывающие панели:

♦	с1азз="оввсапуаз оРРсапуаз-зТагт" — левая панель с размером по умолчанию;

♦	с1азз="оРРсапуаз оРРсапуаз-тор н-50" — верхняя панель с высотой 50% экрана;

♦	с1азз="оРРсапуаз оРРсапуаз-епс! ^-50" — правая панель с шириной 50% экрана;

♦	с1азз="оРРсапуаз оГГсапуаз-ЬоЫзош Н-50" — НИЖНЯЯ панель С ВЫСОТОЙ 50% Экрана.

Каждая панель имеет кнопку для ее открытия (ьиггоп). Сама панель состоит из двух
блоков: блока заголовка панели (с1азз="оРРсапуаз-Ьеас1ег") с меткой или текстовой надпи-
сью (с1азз="оГГсапуаз-Ш1е") И КНОПКОЙ Закрытия панели В виде крестика (с1азз="ЬГп-с1озе
вехв-гезев") и блока тела панели, в который может быть вставлен любой контент. В при-
веденнном примере в качестве контента использовано изображение АР_400.рпд. Для
того чтобы изображение адаптировалось к размеру экрана, к нему добавлен класс
С1азз="1шд-Г1и1с1" а1Г="СГС".

В итоге в окне браузера страница оЯсапуа8_1.К1т1 будет будет выглядеть так, как пока-
зано на рис. 2.20-2.24.

Для закрытия выплывающей панели необходимо нажать на кнопку с крестиком в пра-
вом верхнем углу панели либо щелкнуть левой кнопкой мыши в любом месте основной
страницы.
Элемент Воо^гар СМТсагп/аБ

Панель выплывает слева

Кнопка левой панели

Панель выплывает сверху

Кнопка верхней панели

Панель выплывает справа

Кнопка правой панели

Панель выплывает снизу

Кнопка нижней панели

Рис. 2.20. Страница оЯсапуа8_1.Мт1 с кнопками для открытия выплывающих панелей

Рис. 2.21. Страница оЯсапуа8_1.Мт1 с открытой левой боковой панелью

Рис. 2.22. Страница оГГсат/а8_1.Мт1 с открытой верхней панелью
"УМНИК" -
Методически
Интерактив!

X

Правая панель

Элемент ВооЫгар СЖсапуаэ

Пзнель выл ль Езе~ слева

Рис. 2.23. Страница о(Тсапуаз_1.Мт1 с открытой правой панелью

Элемент Боо1з±гар ОИсапиак

Плейль выплывет слева

Кнопко левой

___Дании* аыплыиаы сяиий _________________________________

Нижняя панель	X

Рис. 2.24. Страница оГГсат/а8_1.Мт1 с открытой нижней панелью

2.6.	Компонент для выдачи подсказок ТооШр

Подсказки тоо1т1р отображают текстовые подсказки рядом с рассматриваемым элемен-
том, когда пользователи наводят на элемент курсор, фокусируются на нем или нажи-
мают его. Один из способов инициализировать всплывающие подсказки для элемента
на Странице — добавить К нему атрибут йаГа-Ьз-ГоддТе.

Пример НТМЬ-кода страницы, в которой показано создание подсказок тоо11Др, приве-
ден в листинге 2.14 (страница 1ооШр.И1т1).
Листинг 2.14. Страница 1ооШр.Ыт1

{% ехкепйз "зЬор/Ьазе.Ыт!" %}

{% Ыоск йеайег %}

<(Ы с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Всплывающие подсказки Тоо1Ыр</й4>

</сЫ>

{% епсЫоск йеайег %}

{% Ыоск сопкепЫ}

<!— Кнопка с подсказкой —>

<а ЬгеГ="#">

<ЬиЫоп куре="ЬиЫоп" Ыазз="Ыт ЬВп-ргнпагу тх-2"
сЫа-Ьз-кодд1е="коо1Ыр"

ЫЫе="Подсказка для кнопки"Жнопка

</ЬиЫоп>

</а>

<!— Ссылка с подсказкой —>

<а ЫЫ="#" Ы="коо1Ыр_1сГ с!а1са-1содд1е="1соо1Ыр"
ЫЫе="Подсказка для ссылки">Ссылка

</а>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница 1ооШр.Ыт1

В ЭТОМ программном модуле ДЛЯ элементов кнопка И ссылка добавлен атрибут с!ака-
кодд1е="коо1Ыр", а текст подсказки задан атрибутом ыые. В итоге в окне браузера стра-
ница 1ооШр.И1т1 будет выглядеть так, как показано на рис. 2.25.

Всплывающие подсказки ТооШр

Ссылка

Подсказка для кнопки СорупдЫ © 5

Кнопка

Всплывающие подсказки Тоо1йр

Кнопка

[ Подсказка для ссыпки )пдН| © 5

Рис. 2.25. Кнопка и ссылка с всплывающими подсказками при наведении на них курсора мыши

2.7.	Использование атрибута Ьге7в шаблонах О]апдо
для создания ссылок на ОКЬ-адреса

Атрибут Ыек обычно используется в НТМЬ для определения гиперссылки на другую
веб-страницу (в сочетании с тегом <ах/а>). Его можно задействовать для предоставле-
ния навигации по веб-сайту или для ссылки на внешние источники (для создания ссы-
лок перехода на страницы других сайтов). Однако применение атрибута ЬгеГ в шабло-
нах В)ап§о может привести к проблемам, если с ним не обращаться должным образом.
В этом разделе мы рассмотрим несколько методов использования атрибута ЬгеГ в шаб-
лонах В)ап§о (с текстовыми ссылками и кнопками Воо181гар).

2.7.1.	Ссылки на внешние ОКЬ-адреса

Кнопка Воо181гар или текстовая ссылка могут ссылаться на внешние ЦВЪ-адреса, пре-
доставляя пользователям возможность переходить на другие веб-сайты или ресурсы за
пределами вашего приложения. Для этого нужно использовать абсолютный ИКЪ-адрес
внешнего ресурса в качестве значения ЬгеГ в теге <а>, который обертывает вашу кнопку
или текстовую ссылку. Пример НТМЬ-кода страницы, в которой показано создание
ссылок на внешние ИКЪ-адреса, приведен в листинге 2.15 (страница Нпк_1 .И1т1).

Листинг 2.15. Страница Нпк_1.Мт1

{% ехкепйз "зЬор/Ьазе.ЬТтГ' %}

{% Ыоск кеайег %}

<сПу с1азз="гом кехк-зкагк тх-2">

<Ъ4>Ссылки на внешние ресурсы</Ь4>

</сИу>

{% епбЫоск кеайег %}

{% Ыоск сопкепк%}

<!— Кнопка —>

<а ЫеЫ'Ъккрз: /Лллм. дгзтекео.ги/">

<Ьиккоп куре="Ьиккоп"

с!азз=”Ькп Ькп-ргтагу тх-2">Прогноз погоды

</Ьиккоп>

</а>

<!— Текстовая ссылка —>

<а Ыек=’Ъккрз:/Ллл\^д1зтекео.ги/">11рогноз погоды</а>
{% епбЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница Нпк_1.Мт1.

Внимание! Новые страницы откроются на той же вкладке браузера, поэтому для возвраще-
ния к цифровой книге воспользуйтесь стрелкой возврата на прежнюю страницу.

В этом программном модуле элементы кнопка и ссылка содержат ссылку на внешний сайт
прогноза погоды, который имеет абсолютный ИКП-адрес Ыйр8:/Лууууу.§18те1:ео.ги/.

В итоге в окне браузера страница Нпк_1.Ыт1 будет выглядеть так, как показано на
рис. 2.26.

По нажатию на кнопку Прогноз погоды или соответствующую текстовую ссылку
пользователь будет перенаправлен на внешний сайт с абсолютным адресом ййр8://
5У5У5У.§18ше1ео.ги/, при этом браузер отобразит страницу этого сайта, фрагмент которой
представлен на рис. 2.27.

Достаточно часто требуется, чтобы внешний ресурс открывался не в текущей, а в новой
вкладке браузера. Для этого нужно использовать ссылку с атрибутом кагдек="_Ь1апк".
Пример НТМЬ-кода страницы, в которой показано создание ссылок на внешние ИКЬ-
адреса с переходом на новую вкладку браузера, приведен в листинге 2.16 (страница
Нпк_2.И1т1).

Ссылки на внешние ресурсы

Прогноз ПОГОДЫ

Рис. 2.26. Элементы интерфейса со ссылками на внешние ресурсы

Рис. 2.27. Фрагмент страницы сайта у\ллл/у.д1зте1ео.ги

Листинг 2.16. Страница Нпк_2.Мт1

{% ехкепйз ”зЬор/Ьазе.Ькт1” %}

{% Ыоск кеайег %}

<сИу с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Ссылки на внешние ресурсы</Н4>

</сИу>

{% епбЫоск кеайег %}

{% Ыоск сопкепк%}

<!— Кнопка —>

<а Ъгек=’Ъккрз:/Л\ЛлЛлг.д1зтекео.ги/" кагдек="_Ыапк">
<Ьиккоп куре="Ьиккоп"
с1азз="Ькп Ькп-ргшагу тх-2">Прогноз погоды
</Ьиккоп>
</а>

<!— Текстовая ссылка —>

<а ЫеТ="Ыкрз:/Ллл\пд1зтекео.ги/" кагдек="_Ыапк">Прогноз погоды</а>
{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница Нпк_2.Мт1

По нажатию на кнопку Прогноз погоды или соответствующую текстовую ссылку
пользователь будет перенаправлен на внешний сайт с абсолютным адресом ййрз://
уууууу.§18те€ео.ги/, при этом браузер отобразит страницу этого сайта в новой вкладке.

2.7.2.	Ссылки на внутренние 1Ж1_-адреса

Кнопка Воо181гар или текстовая ссылка могут ссылаться и на внутренние 1ЖЬ-адреса
сайта, предоставляя пользователям возможность переходить на другие веб-страницы
или ресурсы в пределах вашего приложения. Для этого нужно использовать 1ЖЬ-
маршрут внутреннего ресурса в качестве значения ЫеТ в теге <а>, который обертывает
вашу кнопку или текстовую ссылку. Пример НТМЬ-кода страницы, в которой показано
создание ссылок на внутренние ИКЬ-адреса, приведен в листинге 2.17 (страница
Нпк_З.И1т1).

Листинг 2.17. Страница 1тк_З.Гйт1

{% ехкепйз "зЬор/Ьазе.ЬктГ' %}

{% Ыоск кеайег %}

<сИV с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Ссылки на внутренние ресурсы</Н4>

</сПу>

{% епсЫоск кеайег %}

{% Ыоск сопкепк%}

<!— Кнопка —>

<а Ыек="{% иг! ’тазкег:1соп_11 %}"

с1азз=’’Ькп Ып-рЫтагу тх-2" кагдек="_Ыапк">Кнопка</а>

<!— Текстовая ссылка —>

<а ЫеТ="{% иг! ’тазкег:1соп_11 %}"

кагдек="_Ыапк">Текстовая ссылка</а>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница Нпк_З.Мт1.
В этом программном модуле элементы кнопка и ссылка содержат ссылку на маршрут
с именем 1соп_1 приложения тазкег. В приложении тазкег в файле иНз.ру нужно создать
этот маршрут 1соп_1 с использованием кода, приведенного в листинге 2.18.

Листинг 2.18. Маршрут 1соп_1 в файле иНз.ру приложения таз!ег

ракЩ'д1ауа_2/1соп_1/', чаемз.1соп_1, пате='1соп_1'),

По этому маршруту будет активировано представление у1ем с именем 1соп_1 — в лис-
тинге 2.19 приведен его код для простейшего случая.

Листинг 2.19. Представление 1соп_1 в файле У1еш.ру приложения та$1ег

с!еГ 1соп_1 (гедиезк) :

гекигп гепйег(гедиезк, ’тазкег/д!ауа_2/1соп_1.Икт!')

Из этого представления будет отображен шаблон с именем юоп_1.Ыт1. Мы уже исполь-
зовали этот шаблон в предыдущих разделах — он имеет следующий код (листинг 2.20).

Листинг 2.20. Шаблон 1СОП_1.Мт1 приложения таз(ег

{% ехкепйз "зЬор/Ьазе.ЬртГ’ %}

{% Ыоск кеайег %}

<сНу с1азз=”гом кехк-зкагк тх-2">

<Ь4 Подключение иконок к элементам Воокзкгар</В4>

</сИч>

{% епсЫоск кеайег %}

{% Ыоск сопкепк%}

<сПч с1азз=”сопка1пег”>

<сЫ с1азз=”гом”>Иконки на кнопках</сПу>

<сИу с1азз="со1-4 кехк-зкагк">

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-рг1тагу"><1 с1азз=”Ы-зеагск”></1> Поиск</Ьиккоп>

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-с1апдег">Внимание <1 с1азз=”Ы-Ье1Г'х/1></ЬиЫоп>

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-зиссезз"><1 с1азз=”Ы Ы-агго'м-1еЫ-с1гс1е"></1>

Назад</Ьиккоп>

</сПу>

</сПч>

{% епсЫоск сопкепк %}

В итоге в окне браузера страница Нпк_З.И1т1 будет выглядеть так, как показано на

рис. 2.28.

Ссылки на внутренние ресурсы

Кнопка

Текстовая ссылка

Рис. 2.28. Элементы интерфейса со ссылками на внутренние ресурсы
Подключение иконок к элементам Всо151гар

Иконки на кнопках

О,Поиск I Внимание О I ©Назад

Рис. 2.29. Страница текущего сайта 1соп_1.Н1т1

По нажатию на кнопку или текстовую ссылку браузер отобразит страницу 1соп_1.К1т1

этого сайта, представленную на рис. 2.29.

2.7.3.	Ссылки на внутренние динамичные ШК1_-адреса

В приложениях В]ап§о достаточно часто необходимо использовать динамичные ИКЬ-
адреса— например, для показа на сайте интернет-магазина информации о товарах,
сведения о которых хранятся в базе данных. Количество товаров в БД может насчиты-
вать десятки тысяч, и это количество может постоянно меняться. В этом случае невоз-
можно обойтись без динамичных 1ЖЬ-адресов.

Динамичный ИВЪ-адрес состоит из двух элементов: постоянного адреса и переменного
параметра. В качестве переменного параметра может выступать идентификатор товара
в БД.

Пример НТМЬ-кода страницы, в которой показано создание ссылок на внутренние
динамичные ИКЪ-адреса, приведен в листинге 2.21 (страница Нпк_4.И1т1).

Листинг 2.21. Страница Нпк_4.Ыт1 приложения таз(ег

{% ехкепс!з "зкор/Ьазе.кктГ’ %}

{% Ыоск ЪеасЫ %}

<(Ы с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Ссылки на внутренние ресурсы</Н4>

</сЫ>

{% епсЫоск кеайег %}

{% Ыоск сопкепк%}

<!— Кнопка —>

<	а Ыек=”{% иг! 'зЬор:Ьоок_меЬ' Ы=5 %}"
с!азз=”Ькп Ып-рЫтагу тх-2"
кагдек="_Ыапк">Книга демоверсия</а>

<	!— Текстовая ссылка —>

<	а ЫеТ="{% иг! ’зЬор:Ьоок_меЬ' Ы=5 %}"
кагдек="_Ыапк">Книга демоверсия</а>

<	!— Кнопка —>

<	а ЫеТ='7Ьоок_меЬ/5" с!азз="Ькп Ькп-зиссезз"
кагдек="_Ыапк">Книга демоверсия</а>

{% епсЫоск сопкепк %}

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница Нпк_4.Мт1.
В этом программном модуле созданы два элемента кнопка и один элемент ссылка, кото-
рые содержат атрибут ЬгеГ со ссылкой на маршрут с именем Ьоок_меЬ Приложения зЬор.
Здесь после имени маршрута указан еще один параметр — идентификатор книги в базе
данных (5), причем для кнопок этот параметр задан двумя синтаксическими вариан-
тами:

ЬгеГ="{% иг1 ’зЬор:Ьоок_меЬ' 1(1=5 %}"

ЬгеГ=’7Ьоок_меЬ/5"

Совет

Если в вашем проекте несколько приложений, то для адресации надежнее использовать
синтаксис {% иг1 '<имя_приложения>:<имя_маршрута>1 1с1=<1(1_объекта> %}. В этом случае га-
рантированно не будет коллизий, а пользователь будет направлен на нужную страницу.

В приложении зЬор в файле иНв.ру нужно создать этот маршрут с использованием сле-
дующего кода (листинг 2.22).

Листинг 2.22. Маршрут Ьоок_шеЬ в файле иг1з.ру приложения зЬор

#		 Открыть меЬ-книгу ----

ракй(’Ьоок_меЬ/<1пЬ :!(!>/', чхемз.Ьоок_меЬ, паше=' Ьоок_юеЬ'),

Этот маршрут принимает параметр «идентификатор книги в БД» как целое число
(<1пк:1с1>), которое будет передано в представление у1емз.ьоок_меь.

В приложении зЬор в файле У1е\л/.ру нужно создать представление с использованием сле-
дующего кода (листинг 2.23).

Листинг 2.23. Представление Ьоок_шеЬ в файле У1еш.ру приложения зЬор

########################################

#	Горизонтальные вкладки с книгами меЬ #

########################################

(1еГ Ьоок_меЬ (гедиезк, 1(1) :

#	здесь 1(1 - идентификатор книги

#	текущий пользователь

изег = гедиезк.изег

#	текущая книга (здесь 1с1 - идентификатор книги)
гериезк.зезз1оп[ ’Ьоок_1сГ ] = 1(1

Ьоок = дек_оЬдеск_ог_404 (РгоЬыскз, 1с1=1с1)

Ьоок_пате = Ьоок.пате

#	увеличить счетчик просмотров книги

п = Ьоок.п_зйом

и += 1

Ьоок.п_зЬом = п

Ьоок.заче()

#	Открыть все разделы книги

гагЬе! = МосШе.о^есЬз.ГПЬег (рго(1иск_1(1=Ьоок. 1(1)

ко!_гаг = 1еп(га2<1е1)
ко1_гаг == 0: # в книге нет разделов, есть только рбк

каЬ = ['Текст РВЕ', ]

сопкепк = {'каЬ': каЬ, 'Ьоок_паше': Ьоок_паше, 'гагбе!': га/6е1, ’Ьоок': Ьоок}
гекигп гепбег(гедиезк, 'Ьоок/Ьоок_^еЬ.Икш1', сопкепк)

е1зе: # в книге есть разделы

1Е изег.16 13 Попе: # вошел анонимный пользователь

1Г гедиезк.зеззлоп['Е1ад_чхоб'] == 1: # первый вход анонимного пользователя

#	Открыть первый раздел книги

гаг1 = Мобибе.оЬдескз.Шкег(ргобиск_16=Ьоок.16) .Игзк()

#	запоминаем 1с1 активного раздела

гедиезк.зеззйоп['гах_1сГ ] = гаг1.16

еШ гедиезк. зезз!оп[' Е1ад_ухосГ ] == 2: # второй вход анонимного пользователя
гаг_16 = гедиезк.зеззгоп['гах_1с1']

е!зе: # вошел зарегистрированный пользователь

# Проверить, есть ли запись для активного раздела активного читателя
аск_га2 = АскКагбеТ.оЬдескз. Шкег (изег_16=изег.16, ргобиск_16=Ьоок.16)
#рг1пк('---------------аск_гах', аск_гах)

И 1еп(аск_гаг) == 0:

#	Открыть первый раздел книги

гаг1 = Мобибе.оЬдескз.Шкег(ргобиск_16=Ьоок.16) .Игзк()

#рг1пк('---------------1еп(гах1)', гах1)

#	Добавляем в БД активный раздел

аск_гаг = АскКахбе!.оЬдескз.сгеаке(гахбе1_16=гах1.66, ргобиск_16=Ьоок.66,
изег_16=изег.16)

#	запоминаем 16 активного раздела

гедиезк.зеззлоп['га2_16'] = аск_гах.гах6е1_16
е1зе:

#	Получаем запись активного раздела

аск_гаг = АскКагбе!.об]ескз.дек(ргобиск_16=Ьоок.16, изег_16=изег.16)

#	запоминаем 16 активного раздела

гедиезк.зеззлоп['га2_16'] = аск_гах.гахбе1_16

#	получить 16 активного раздела

гаг_16 = гедиезк.зеззлоп['га2_16']

#	Открыть активный раздел

аск1ч_гаг = Мо6и1е.обдескз.дек(16=гах_16)

гаг_к1к1е = аск1ч_гаг.к!к1е

#	Загрузить объекты активного раздела

кек_Изк!пд = Попе

кек_ч16ео = Попе

кек_аи61о = Попе

кек_дИ = Попе

кек_ап!таке = Попе

1Е гаг_16:

кек_Изк!пд = Ызкгпд.оЬдескз. Шкег (гахбе1_16=га2_16)
кек_у1с1ео = УЫео.оЬдескз. ЕПкег (гагс1е1_1с1=гах_1с1)

кек_аисНо = АисПо.оЬдескз. ЕНкег (гагс1е1_1с1=гах_1с1)

Ьек_д1Е = СЛЕ.оЬдескз. ЕНкег (гагс!е1_1с1=га2_1с1)

кек_ап!таке = Аплпаке. оЬдескз. кПкег (гахс1е1_1с1=га2_1с1)

# формируем заголовки вкладок

РаЬ = ['Текст РВЕ’]

1Е ко!_гаг > 0:

ЕаЬ. аррепс! (’ Разделы книги1)

1Е Ьоок.1з_ИзЫпд:

ЕаЬ. аррепс! (’ Листинги1)

ЕаЬ. аррепс! (’ Редактор 11)

ЕаЬ. арреМ (’ Редактор 2')

ЕаЬ. аррепс! (’ Редактор 31)

1Е Ьоок.1з_у1с1ео:

ЕаЬ. аррепс! (’ Видео')

1Е Ьоок.1з_аисПо:

ЕаЬ. арреМ (’ Аудио ')

1Е Ьоок.1з_ап1таЕе:

ЕаЬ. аррепс! (' Анимация')

1Е Ьоок.1з_1тд:

ЕаЬ. арреМ (’ Рисунки')

ЕаЬ. аррепЬ (' Редактор ЭДеЬРагпЬ')

ЕаЬ. аррепс! (' Раскраски')

сопкепР = {’ЕаЬ': ЕаЬ, ’Ьоок_пате' : Ьоок_пате, 'гахЬе!': гахс!е1л 'ко1_гах’: ко!_гах,
’Ьоок’: Ьоок, ' гах_ЫХ1е ’: гах_ЫЫе, ’Еек_11зЫпд': кек_ИзЫпд,
Чек_У1с1ео' : Ьек_угс1ео, ’кек_аисНо': Ьек_аисИо, 'Ьек_ап1таке': Ьек_ап1таке,
’кек_д1Е’: Ьек_д1Е}

гекигп гепЬег(гедиезк, 'Ьоок/Ьоок_^еЬ.Икт1', сопкепк)

Это достаточно большой программный модуль, и мы не станем рассматривать его
структуру, т. к. цель раздела не в этом, а остановимся только на деталях, связанных
с динамической адресацией.

Созданное представление принимает идентификатор книги (та) в базе данных, передан-
ный из маршрута ЬеЕ ЬоокугеЬ (гедиезк, Ш). Затем в объект Ьоок из БД загружается инфор-
мация О книге: Ьоок = дек_о^еск_ог_404(Ргос1исЬз, 1с!=1с1). Объект Ьоок через СЛОВарь сопкепк
вместе с другими параметрами передается в шаблон ьоок/ьоок меь.ьш В этом шаблоне
и будет выведена информация о книге, которая в БД имеет идентификатор ьа=5.

Примечание

Здесь не приводится код этого шаблона, поскольку он достаточно большой (это один из
элементов сайта гиттк.ги), однако будет показан внешний вид этого шаблона в окне
браузера, полученный при выполнении этого примера.

Итак, мы привели код цепочки всех модулей, которые участвуют в динамической адре-
сации. В итоге в окне браузера страница Нпк_4.И1т1 будет выглядеть так, как показано на
рис. 2.30.
Ссылки на внутренние ресурсы

Книга демо версия	Книга демо-версия

Рис. 2.30. Страница текущего сайта Ппк_4.П1т1

На этой странице имеются две кнопки и текстовая ссылка, которые содержат динамич-
ный адрес внутреннего ресурса текущего приложения. По нажатию на эти кнопки или
при переходе по текстовой ссылке пользователь будет перенаправлен на страницу сай-
та Ьоок_меЬ.ьтт/5, которая откроется в новой вкладке браузера (рис. 2.31).

В
Назад

Основы программирования на Ру^Воп
(интерактивное цифровое пособие). Демо-
версия

Текст РОЕ Разделы книги Листинги Редактор 1 Редактор 2 Редактор 3

1 /289	-	+	[С]

Рис. 2.31. Страница текущего сайта с динамичным адресом Ьоок_меЬ.ЪТт/5

Если по всей цепочке представленных здесь модулей задать другой идентификатор
объекта в базе данных, то на конечной НТМЬ-странице будет выдана информация
именно о нем. В этом и заключается сущность динамической адресации, когда с ис-
пользованием неизменного программного кода пользователь может получить инфор-
мацию о совершенно разных объектах.
2.7.4.	Использование атрибута йге7для обмена параметрами
между шаблонами и представлениями

Достаточно часто возникают ситуации, когда из шаблона в представление надо пере-
дать идентификатор нажатой кнопки, а из представления в шаблон вернуть некое
сообщение. Например, в шаблоне удаления информации из БД имеются две кнопки:
Удалить и Отмена. В представлении нужно определить, какая кнопка была нажата,
выполнить соответствующие действия и в шаблон вернуть сообщение о результатах
этих действий. Попробуем проиграть эту ситуацию на упрощенном примере: создадим
модули для вывода информации из БД и для удаления одной из записей. Для этого по-
надобится создать несколько ИКЬ-маршрутов, представлений и шаблонов.

Для начала на одной из НТМЬ-страниц создадим ссылку для обращения к маршруту,
который обеспечит вызов модуля для редактирования объектов в БД. А в приложении
тазгег в одном из шаблонов создадим ссылку на маршрут с именем еспг_ргос1исГ8 с ис-
пользованием следующего кода (листинг 2.24):

Листинг 2.24. Ссылка на маршрут ес1й_ргос!ис(з в шаблоне приложения таз1ег

<а БгеБ="{% иг1 'тазГег:есПГ_рго(1ис113' %}" ГагдеГ ="_Ыапк" Представление есИБ_ргос!исБз</а>

По этой ссылке в файле иНз.ру приложения тазгег будет активирован следующий ЦКЬ-
маршрут (листинг 2.25).

Листинг 2.25. Маршрут ес1й_ргос1ис(8 в файле иг1з.ру приложения тазкег

раГЪ (' д1ауа_2 /есПГ_ргос1ис1:з /', утемз. есПГ_ргос1ис115, пате=' есИ11_ргос1ис113'),

По этому маршруту будет активировано представление еспг_ргос1исгз в приложении
тазгег, имеющее следующий код (листинг 2.26):

Листинг 2.26. Представление ес1й_ргос1ис(8 в файле У1еш.ру приложения тазкег

###########################
# Редактировать продукты #
###########################

йеР есПБ_ргос1исБз (гедиезБ) :

# Список продуктов из БД

ргосЬсГз = РгойисБз .оЬдесГз .а!1

сопБехБ = {"ргосЬсГз”: ргоскюГз}

геБигп гепйег(гедиезБ, птаз11ег/д1ауа_2/ес1111_ргос1ис113.ЫдпГ’, сопБехБ)

В этом модуле в объект ргойисгз из БД загружаются все записи о продуктах (в нашем
случае продуктами являются цифровые книги). Для работы этого модуля и модуля уда-
ления продуктов из БД нужно импортировать в файл У1е\л/.ру некоторые библиотеки:

Бгот зБор.тос1е1з лпрогБ РгосАисГз

Бгот сЦапдо. зБогБсиБз лпрогГ гепйег, деБ_оЬдес11_ог_404Л гесЛгесГ

Бгот сГ)апдо.иг1з лпрогр геуегзе
Ргот сЦ апдо.сопбгРЬ трог б теззадез

трогН Ыте

Через словарь соыехб информация о продуктах передается в шаблон еаы_ргос1исбз.ыт1,
имеющий следующий код (листинг 2.27).

Листинг 2.27. Шаблон ес1й_ргос1ис(8.Мт1 приложения таз(ег

{% ехбепбз "зЬор/Ьазе.ЫдпГ’ %}

{% Ыоск сопкепк %}

<сПу с1азз=”гом ту-2”>

<сЦу с1азз="со1-8">

<сПу зку1е=”оуеЫ1ом: зсго11; ">

<каЬ1е с1азз=”каЫе каЫе-зкЫрес! каЬ1е-Ьогс1егес1 кехк-зкагк">

<Ыеас1>

<Ы>

<Ш>№пп</Ш>

<Ш>Автор (авторы) </кк>

<РИ>Название</Ы>

<Ы>Фото обложки</РН>

<Ы>Редактировать<АН>

</бг>

</Ыеас1>

<НЬобу>

{% Рог оЬдесб 1п ргобисбз %}

<Ы>

<	М> {{Рог1оор. соипбег}} </Ш>

<	Ы> {{оЬз есб. аиЫюг}} </Рс1>

<	!— Название книги—>

<Ы><а ЬгеГ=’7ргос1ис1:_с1е1:а11/{ {оЬдеск.гс!} }">

<1 с1азз="Ы-зеагсИ"></1> {{оЬдеск.паше} }</а></М>

<!— Обложка —>

{% 1Р оЬ} есб. шаде %}

<Ы><1тд згс=”{{ оЬдесР.гтаде.иг! }}" а1Р=”соппесб”
збу1е="тах-Ие1дЫ: 100рх"х/Рс1>

{% е!зе %}

<М> Нет изображения</бс1>

{% епсНР %}

<Ы>

<а ИгеР="{% иг! 'тазбег:Не1_ргобисб' РЫоЬдесб.Ш %}"
с!азз=”Ып Ьбп-бапдег Ыт-зт">

<1 с1азз="Ы-бгазНЗ"х/1> Удалить</а>

</Ы>

</бг>

{% епЫог %}

<НЬобу>
</Ше>

</61ч>

</сНу>

</61ч>

<!— Сообщение начало —>

{% 16 теззадез %}

<и1 с1азз=”теззадез бехб-збагб бехб-6апдег">
{% бог теззаде бп теззадез %}

<ЬЗ с1азз=”{{ теззаде.бадз }}">

{{ теззаде| забе }}

<а Ьгеб="{% иг1 'тазбег:е61б_ргобисбз1%}"

с1азз=”Ьбп Ьбп-бапдег Ьбп-зт"х-Скрыть сообщение</а>

</ЬЗ>

{% епббог %}

</и1>

{% епббб %}

<!— Конец сообщения —>

{% И ргобисбз %}

{% е!зе %}

<б1ч с1азз="гом">

В базе данных нет записей о товарах данной категории

</61Ч>

{% епббб %}

{% епбЫоск сопбепб %}

В этом шаблоне создана таблица с данными о цифровых книгах, взятыми из БД. Здесь
следует обратить внимание на блок кода в теге {% 16 теззадез %}, который обеспечивает
вывод сообщений, переданных из представления.

В последней колонке таблицы находится кнопка Удалить, по нажатию на которую будет
активирован маршрут С именем ргобисб_6е1 приложения тазбег. Этому маршруту будет
передан идентификатор удаляемой записи (бб=оЬдесб.бб). Сам маршрут имеет следую-
щий код:

рабб('д1ача_2/6е1_ргобисб' /<бпб: 1с1>', чбемз .6е1_ргобисб, пате=6е1_ргобисб'),

По этому маршруту будет активировано представление ргобисб_6е1 В приложении тазбег,
имеющее следующий код (листинг 2.28):

Листинг 2.28. Представление ргос1ис(_с1е1 в файле У1е\л/.ру приложения та$(ег

###########################
# Удалить продукт (товар) #
###########################
беб бе1_ргобисб(гедиезб, 16):

#	загрузить текущий объект по 16

оЬд = деб_оЬдесб_ог_404(Ргобисбз, 16=16)
#	возврат из формы

Ы гедиезб.тебЬоб == "РО8Т":

Ы 'уез' 1п гедиезк.РО8Т:

#	удаление сведений об объекте из БД

#	В реальном приложении снять комментарий со следующей строки

#	Ргобисбз.оЬдеЫз.деб(16=16).6е1ебе()

Ыте.збеер(3) # Сон в 3 секунды

теззадез.зиссезз(гедиезк, 'Продукт удален из БД')
е!зе:

теззадез.зиссезз(гедиезк, 'Удаление продукта отменено')
гекигп гебФгеск(геуегзе('тазкег:е61к_ргобискз'))

#	загрузка в сопкепк сведений об объекте

кхк1 = 'Будет удален продукт'

6е1_рго6 = обз.пате

сопкепк = {"кхк1": кхк1, "6е1_рго6": 6е1_рго6}

#	вызов шаблона подтверждения/отмены удаления

гекигп гепбег(гедиезк, "тазкег/6е1_уезпо.Ыт1", сопкепк)

Примечание

В реальном приложении нужно снять комментарий со строки:

Ргобискз.оЬдеЫз.дек(16=16).6е1еке()

Это представление принимает идентификатор удаляемой записи (16) и загружает в объ-
ект оЬд информацию из БД об удаляемом объекте. Имя удаляемого объекта (беб ргоб =
о^.пате) через словарь сопкепк передается в шаблон та81ег/с1е1_уе8по.111т1, имеющий сле-
дующий код (листинг 2.29).

Листинг 2.29. Шаблон 6е1_уе8по.Ыт1 приложения таз(ег

{% ехкепбз "зЬор/Ьазе.Ькт!" %}

{% Ыоск сопкепк %}

<когт асЫоп="" текЬоб="розк">

{% сзгк_кокеп %}

<6Ы с!азз="кехк-зкагк">

<Ь6>{{ кхк1 }}</Ь6>

<Ь6>{{ кхк2 }}</Ь6>

<Ь6>{{ 6е1_рго6 }}</Ь6>

<Ь5>Удалить запись из БД?</Н5>

</61У>

<61V с!азз="со1-3 бехб-збагб тх-2">

<ЬиЫоп с!азз="Ып Ып-зиссезз Ыт-зт" пате="по" опс11ск="Ызбогу.Ьаск() ">
<-0тмена

</ЬиЫоп>

<!— Простая кнопка для удаления—>

<1приб Руре="зиЬт1б" пате="уез" с1азз="Ыт Ыт-ргнпагу Ып-зт" уа!ие="Удалить">

<!— Кнопка для удаления с крутящимся спином—>

<ЬиЫоп Руре="зиЬт1б" с1азз="Ыт Ып-зиссезз Ып-зт боддбеЫехб" пате="уез">
<зрап><1 с!азз="Ы Ы-БгазНЗ"></1> Удалить</зрап>

<зрап с1азз="Ыс1с1еп зраппег-Ьогйег зртппег-ЬогсАег-зт"

го1е="зкакиз" аг1а-Ыс1с1еп="Ргие"></зрап>

</Ьиккоп>

</сНу>

</Богт>

<!— Скрипт для вращения спина на кнопке —>

<зсг1рр>

$ ('. МскЗеп') . гетоуеСХазз (' Ыс1с1еп') . ЫсХе ();

$ (’. БоддХе-БехБ') . сХХск (ГипскХоп () {

$ (кМз) . БХпЩ ’зрап’) .еасН(БипскХоп() { $ (БНХз) ЛоддХе (); });

});

</зсгХрк>

{% епбЫоск сопкепк %}

Этот шаблон представляет собой форму <Гогт аскХоп="" текЬоа="розк">, в которой выво-
дится имя удаляемого объекта {{ аеХ ргоа }} и имеются три кнопки:

♦	отмена — кнопка с именем пате="по" для отмены удаления (типовая кнопка ВооХзХгар);

♦	Удалить -- простая КНОПКа ДЛЯ удаления типа зиЬтХБ С именем пате=”уез” для подтвер-

ждения удаления;

♦	Удалить --кнопка ДЛЯ удаления С крутящимся СПИНОМ типа зиЬтХБ С именем пате="уез"

для подтверждения удаления.

Пояснение

Вторая кнопка Удалить приведена в качестве примера того, как можно отобразить ожидание
завершения длительного процесса. К этой кнопке добавлен скрипт, который покажет на
кнопке в процессе удаления записи из БД вращающийся спин.

По нажатию на любую из кнопок выполняется возврат к представлению ргобиск_бех
с методом розт, а в представление передается имя нажатой кнопки. В этом представле-
нии в теле блока хх гедиезг.теНюа == "розт” анализируется имя нажатой кнопки. Если из
формы получено имя нажатой кнопки уез (хг ’уез’ Хп гедиезт.розт), значит, была нажата
кнопка Удалить, и будет выполнена процедура удаления записи из БД:

# РгойисБз.оЬдескз.дек(1с1=1с1) .с!е1еке()

В приведенном здесь примере эта строка закомментирована для предотвращения
удаления информации из БД сайта гишп1к.ги. При этом добавлена строка кХте.Хеер(З)
(засыпание приложения на 3 секунды) — для имитации длительного удаления записи
из БД, чтобы показать, как работает кнопка с вращающимся спином. Здесь же форми-
руется текст сообщения об успешном удалении записи, которое будет передано в шаб-
лон есПГ_ргос1иск:

теззадез.зиссезз(гедиезк, 'Продукт удален из БД')

Если из формы получено имя нажатой кнопки по, значит, была нажата кнопка Отмена,
и команда удаления записи из БД будет пропущена. Здесь же формируется текст сооб-
щения об отмене удаления записи, которое будет передано в шаблон еспг ргоаисг:

теззадез.зиссезз(гедиезк, 'Удаление продукта отменено')
Эти сообщения будут возвращены в шаблон есПб_ргос1исбз.Ьбт1 и отображены там в теге
{% И теззадез %}. В ЭТОМ теге имеется КНОПКа С именем Скрыть сообщение, по нажатию на
которую произойдет обновление шаблона ес11б_ргос1исбз и текст сообщения исчезнет
с экрана.

Итак, мы рассмотрели код группы модулей, в которых реализован обмен параметрами
между шаблонами и представлениями. Для запуска в работу этой группы модулей надо
в рамках интерактивной цифровой платформы активировать следующую ссылку:

<а Ьгеб=’’{% иг1 'тазбег :есПб_ргос!исбз' %}" багдеб ="_Ыапк”Представление есИб_ргос1исбз</а>

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Пред-
ставление ес1й_ргос1ис(8.

По этой ссылке будет показан шаблон есШ_ргос1ис18.К1т1 (рис. 2.32).

№пп

Автор (авторы)

Название

Анатолий Посто-лит

Д Основы протравмирования на Руйтоп
(интерэктиЕнсе цифровое пособие).

2 Анатолий Постелит

Д Разработка щеЬ-приложении на РИЬоп.
Р|апдо и Воо^Егао (интерактивное цифровое
пособие).

Редактировать

Ж Удалить

Ж Удалить

3 Филиппова Н.А,
Саломзода ЕС.,
Бабаев ЕМ.

Д ТРАНСПОРТНЫЕ ХАРАКТЕРИСТИКИ И
ПРАВИЛА ПЕРЕВОЗКИ ОТДЕЛЬНЫХ ВИДРЕ)
ГРУЗОВ (учебное пособие)

4 Анатолий По столит Д Книга о птицах

Ж Удалить

Ж Удалить

Рис. 2.32. Внешний вид шаблона ес1И_ргос1ис18.Н1т1

По нажатию на кнопку Удалить в одной из строк таблицы с данными о цифровых
книгах (например, в строке с номером 1) будет выполнен переход к шаблону
ргос1ис1_с1е1.И1т1 с передачей в него идентификатора текущей записи (рис. 2.33).

Будет удален продукт

Основы программирования на Ру^юп (интерактивное цифровое пособие).

Удалить запись из БД?

<-Отмена. I Удалить I © Удалить

Рис. 2.33. Внешний вид шаблона ргос!ис(_с1е1.Н1т1
Здесь мы видим имя удаляемого объекта — цифровая книга «Основы программирова-
ния на Руйюп (интерактивное цифровое пособие)» и три кнопки: Отмена (зеленого
цвета), Удалить (синего цвета) и Удалить (зеленого цвета).

По нажатию на кнопку Отмена в представление ргосЬсг ае! будет передан идентифика-
тор удаляемой записи и имя нажатой кнопки по, после чего система инструкцию удале-
ния записи пропустит и сформирует сообщение с текстом Удаление продукта отмене-
но, которое через представление еслг ргоаисгз будет передано в шаблон есП_ргос1ис18.К1т1
и показано в нижней части этого шаблона (рис. 2.34). По нажатию на кнопку Скрыть
сообщение оно будет удалено с экрана.

4 Анатолий Постелит О. Книга о птицах

Анатолий Постелит ч Основы программирования на Ру*Иоп
Синтерактивнсе циороЕое пособие). Демо-
версия

Ц Удалить

Ц Удалить

Удаление продукта отменено

<-Скрыть сообщение

Рис. 2.34. Внешний вид фрагмента шаблона ес1И_ ргос1ис18.Н1т1 с тестом сообщения

По нажатию на кнопку Удалить (синего цвета) в представление ргоаисг ае! будет пере-
дан идентификатор текущей записи и имя нажатой кнопки уез, после чего выполнится
инструкция удаления текущей записи и сформируется сообщение с текстом Продукт
удален из БД, которое через представление еслт ргоаисгз будет передано в шаблон
есП_ргос1ис18.И1т1 и показано в нижней части этого шаблона (рис. 2.35).

4	Анатолий По стол ит	О, Книга о птицах

Анатолий По стол и г Основы программирования на РуЕбоп
(инте^активное цифровое пособив). Демо-
версия

Продукт удален из БД

< -Скрыть сообщение

Рис. 2.35. Внешний вид фрагмента шаблона ес1И_ ргос1ис18.Н1т1 с тестом сообщения

Эта страница появится с задержкой 3 с, которая искусственно создана в инструкции
Пте.з1еер(з). По нажатию на кнопку Скрыть сообщение оно будет удалено с экрана.

По нажатию на кнопку Удалить (зеленого цвета) в представление ргоаист ае! будет
передан идентификатор текущей записи и имя нажатой кнопки уез, после чего выпол-
нится инструкция удаления текущей записи и сформируется сообщение с текстом Про-
дукт удален из БД, которое через представление еснл_рго(1ис±5 будет передано в шаблон
ес1||_ргос1ис18.И1т1. При этом в процессе удаления записи из БД текст на кнопке Удалить
будет заменен вращающимся индикатором (рис. 2.36).

Пояснение

Напомним, что в шаблоне ргобис!_с1е1.Мт1 (см. рис. 2.33) для примера показаны два вариан-
та кнопки Удалить: с синим фоном — простая кнопка для удаления, с зеленым фоном —
кнопка для удаления с крутящимся спином.

Будет удален продукт

Основы программирования на РуЕЬоп (интерактивное цифровое пособие).

Удалить запись из БД?

Индикатор процесса

<-От йена



Рис. 2.36. Вращающийся спин для индикации процесса удаления записи из БД

Индикатор на кнопке будет отображаться до тех пор, пока выполняется процесс удале-
ния записи, причем появляться он станет лишь в том случае, если база данных доста-
точно большая и процесс удаления записи из нее занимает продолжительное время (как
вы знаете, в нашем примере для показа этого индикатора введена искусственная за-
держка процесса удаления записи на 3 с с помощью инструкции Т1те.з1еер(3)). После
удаления текущей записи и сформируется сообщение с текстом Продукт удален из
БД, которое через представление еаи_ргос1ис±5 будет передано в шаблон ес1К_ргос1ис18.И1т1
и показано в нижней части этого шаблона.

* * *

Итак, мы с вами рассмотрели возможности р)ап§о по передаче из шаблонов в пред-
ставления (через параметры) имен нажатых кнопок и идентификаторов объектов, а
также по передаче сообщений из представлений в шаблоны.

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

Всплывающее модальное окно является частью текущей страницы. Когда происходит
вызов модального окна, то текущая страница остается на экране, а модальное окно по-
является поверх текущей страницы, при этом текущая страница частично затеняется,
и все ее управляющие элементы (меню, кнопки и т. п.) блокируются. Текущее окно
остается заблокированным до тех пор, пока пользователь не выполнит определенные
действия в модальном окне или не закроет его. Модальное окно создается с помощью
Воо181гар, причем ему не нужны дополнительные скрипты. Принципиальная схема
взаимодействия между представлением у1ем (Ьоог_тос1а1), загруженным из представления
шаблоном (страница Ьоо1_тос1а1.И1т1), и модальными окнами (тос1а1_81тр1е.И1т1, тос1а1_
8сго11.И1т1) приведена на рис. 2.37.

Как здесь можно видеть, представление аег Ьоо^ тосШ вызывает шаблон Ьоо1_тос1а1.И1т1.
В этом шаблоне, кроме основного содержания, имеются две кнопки для вызова мо-
дальных окон и два тега, предусматривающие всплытие модальных окон поверх основ-
ной страницы. Когда пользователь нажимает одну из кнопок, то на фоне основной
страницы всплывает модальное окно. При этом в то место, где предусмотрена вставка
модальных окон, производится вставка содержимого одного из шаблонов (либо
тос1а1_81тр1е.И1т1, либо тос1а1_8сго11.И1т1). После закрытия модального окна происходит
возврат к содержимому базовой страницы.

Рис. 2.37. Всплывающие модальные окна Воо1з1гар

Программный код модальных окон может быть расположен непосредственно в теле
шаблона Ьоо1_тос1а1.И1т1, либо вынесен в отдельные файлы. Вынос в отдельные файлы
предпочтительнее, т. к., во-первых, упрощается код основной страницы, во-вторых,
шаблоны модальных окон могут быть многократно использованы другими страницами
сайта.

Для модальных окон Воо181гар можно задать ширину окна — это определяется классом-
модификатором в элементе тосШ-сЛаТод. Значения этого параметра классов-модифика-
торов тос1а1-с11а1од приведены в табл. 2.1.

Таблица 2.1. Значения параметра классов-модификаторов тос1а1-(Иа1од
для модальных окон разной ширины

Размер	Класс-модификатор	Максимальная ширина (тах-млсШ1)
Маленький (8та11)	.тос!а1-зт	ЗООрх
Стандартный (ОеТаиК)	Мопе	500рх
Большой (1_агде)	.тос!а1-1д	800рх
Очень большой (Ех1га 1агде)	,тос1а1-х1	1140рх
Для демонстрации работы модальных окон создадим группу модулей. Ссылка, которая
обеспечит открытие модальных окон, может находиться в одном из шаблонов или
в одном из элементов меню сайта и иметь следующий код (листинг 2.30).

Листинг 2.3о. Ссылка на доступ к представлению Ьоо(_тос1а1 приложения таз(ег

<а ЬгеВ="{% иг1 'тазкег:Ьоок_тоба1' %}"Представление Ьоок_тоба1</а>

По этой ссылке активируется следующий ИКЬ-маршрут (листинг 2.31).

Листинг 2.31. Маршрут с именем Ьоо1_тос1а1 приложения тазкег

ракй. (’ д1ауа_2 /Ьоок_тоба1/', угемз. Ьоок_тоба1, пате= ’ Ьоок_тоба1'),

Этот маршрут обращается к представлению Ьоок_тоба1, которое имеет следующий код
(листинг 2.32).

Листинг 2.32. Представление (у|еш) Ьоо1_тос1а1 приложения таз(ег

с!еГ Ьоок_тоба1 (гедиезк) :

тзд = 'Это текстовое сообщение передано из представления'

сопкепк = {'тзд': тзд}

гекигп гепбег(гедиезк, 'тазкег/д1ауа_2/Ьоок_тоба1.Ькт1', сопкепк)

В этом представлении сформировано текстовое сообщение, которое через словарь
сопкепк передается в шаблон Ьоо1_тос1а1.И1т1, имеющий следующий код (листинг 2.33).

Листинг 2.33. Шаблон Ьоо(_тос1а1.Мт1 приложения таз(ег

{% ехкепбз "зЬор/Ьазе.Ькт!" %}

{% 1оаб зкакЬс %}

{% Ыоск Ьеабег %}

<61V с1азз="гом кехк-зкагк тх-2">

<	Ь4Демонстрация модальных окон Воокзкгар</Ь4>

</б1У>

{% епбЫоск Ьеабег %}

{% Ь1оск сопкепк %}

<61у с!азз="гом ту-1">

<	!— кнопка открытия простого модального окна —>

<61V с1азз="со1-2 кехк-сепкег тх-2">

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-Ыоск Ькп-рггтагу тЬ-3"

бака-Ьз-кодд1е="тоба1"

бака-Ьз-кагдек="#тоба1-бекаи1к">Простое модальное окно

</Ьиккоп>

<	/б1У>

<	!— кнопка открытия модального окна с полосой прокрутки —>

<61у с1азз="со1-2 кехк-сепкег">

<Ьиккоп куре="Ьиккоп" с!азз="Ькп Ькп-Ыоск Ькп-ргнпагу тЬ-3"

бака-Ьз-кодд!е="тоба1"
Ыаба-Ьз-багдеб="#то(1а1-зсго11">Модальное окно с прокруткой
</Ьиббоп>

</бгч>

<!— кнопка открытия широкого модального окна —>

<сИу с1азз="со1-2 бехб-сепбег'й

сЬийюп Нуре="Ьи1йоп" с1азз="Ыт Ыт-Ь1оск Ыт-ргнпагу гоЬ-З”

Ыаба-Ьз-бодд1е="тоба1"

Ыаба-Ьз-багдеб="#тос1а1-1агде">Широкое модальное окно

</Ьиббоп>

</сНу>

</с11у>

<!— Это встроенное простое модальное окно —>

{% 1пс1ис1е "тазбег/д1ача_2/шос!а1_з гтр1е .Н1дп1" %}

<!— Это встроенное модальное окно с прокруткой —>

{% 1пс1ис1е ”таз1:ег/д1ауа_2/тос1а1_зсго11.Ылп1" %}

<!— Это широкое модальное окно —>

{% 1пс1ис1е "тазбег/д1ача_2/тос1а1_1агде .Нбт1" %}

<сНV с!азз="гом тх-2">

<ИЗ>Сайты "Академия РубИоп" и "УМНИК"</НЗ>

<сИч с1азз="со1-3 бехб-сепбег">

<бтд згс="{% збаббс 'бтадез/АР_400.рпд' %}” с1азз="1тд-Р1и1сГ' а1б="СЕС">

</сНч>

</сНу>

<сНу с!азз="гом">

<сЫч с1азз="со1-10 бехб-сепбег">

<И2>Добро пожаловать на сайты "Академия РубНоп" и "УМНИК"</И2>

</сНч>

</сПч>

<сНч с!азз="гом">

<сНч с1азз="со1-10 РехР-зкагк тх-2">

<р>

На сайте "Академия РуРИоп" вы можете найти автономные
интерактивные цифровые книги и инструменты для их создания и чтения.
На сайте "УМНИК" вы можете найти меЬ-версии интерактивных
цифровых книг и учебно-методических пособий.

Мы РАДЫ видеть Вас в числе НАШИХ пользователей!

</р>

</сНч>

</сНч>

<сНч с1азз="гом">

<сНч с1азз="со1-1"х/Ы1ч>

<сНч с1азз="со1-8 Ьд-бапдег Нехб-мЫбе бехб-сепбег">
<Ь4>Нас легко найти</Ь4>

<Ь5>Сайт "Академия Руцкой" находится по адресу: арукйоп.ги</Н5>

<Ь5>Сайт "УМНИК" находится по адресу: гшппгк.ги</И5>

</сНу>

</сНу>

{% епбЫоск сопкепк %}

Основная страница Ьоо1_тос1а1.И1т1, в которой предусмотрена возможность показа
модальных окон, будет выглядеть так, как показано на рис. 2.38.

Демонстрация модальных окон Воо151гар

Простое
модальное окно

Модальное окно
с прокруткой

Широкое
модальное окно

Сайты "Академия РуТЬоп" и "УМНИК"

Добро Пожаловать на сайты "Академия Ру1Ьоп" и "УМНИК"

На сайте Академия Ру1.Ьоп" бы можете найти автономные интерактивные цифровые книги и инструменты для их
создания и чтения. На сайте 'УМНИК' вы можете найти меЬ-версии интерактивных цифровых книги и учебно-
методических пособий. Мы РАДЫ видеть Вас в числе НАШИХ пользователей!

Нас легко найти

Сайт "Академия РуЖоп" находится по адресу: аруЖоп.гы
Сайт "УМНИК" находится по адресу штгпк.ги

Рис. 2.38. Внешний вид шаблона Ьоо1_тос1а1.Н1т1

В шаблоне Ьоо1_тос1а1.И1т1 имеются три кнопки:

♦	для вызова простого модального окна;

♦	для вызова модального окна с полосой прокрутки;

♦	для вызова широкого модального окна.

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

Простое модальное окно вызывается по нажатию на соответствующую кнопку
с использованием следующего кода:

<Ьиккоп куре="Ьиккоп" с1азз="Ькп Ькп-Ыоск Ькп-ргшагу гоЬ-З" с!ака-Ьз-кодд1е="тос1а1"
с!ака-Ьз-кагдек="#тос1а1-с1екаи1к">11ростое модальное окно</Ьиккоп>
Гпава 2

Здесь целевое модальное окно идентифицируется с использованием следующего фраг-
мента кода:

баба-Ьз-багдеб="#тоба1-бебаи1б"

Место вставки модального окна резервируется с использованием следующего фрагмен-
та кода:

<	!— Это встроенное простое модальное окно —>{% гпсбыбе "тазбег/д1ача_2/тоба1_з1тр1е .ббт!" %}

Само модальное окно находится в шаблоне тос1а1_81тр1.И1т1, который имеет следующий
код (листинг 2.34).

Листинг 2.34. Шаблон тос1а1_81тр1.Ыт1 приложения таз(ег

<	!— Это начало модального окна —>

<сИч с1азз=”тоба1 бабе” бб="тоба1-бебаи1б" баЫпбех="-Г’
го1е="бба1од" аг1а-1аЬе11ебЬу="тоба1-бебаи1б"

аг1а-Ыббеп="бгие">

<сИу с1азз="тоба1-бба1од тобаб-ббабод-сепбегеб" го1е="босытепб">

<ббч сбазз="тобаб-сопбепб">

<ббч сбазз="тобаб-Ьеабег">

<62 сбазз="Ь6 тобаб-ббббе">Тема сообщения</62>

<Ьиббоп буре="Ьиббоп" сбазз="Ьбп-сбозе"
баба-Ьз-ббзтбзз="тобаб"
агба-баЬеб="Сбозе">

</Ьиббоп>

</сИч>

<ббч сбазз="тобаб-Ьобу">

<р>Это текст сообщения из модального окна.</р>

<р>{{ тзд }}</р>

</сИч>

<ббч сбазз="тобаб-бообег">

<а Ьгеб="#" сбазз=”Ьбп-соттбб Ьбп-ргбтагу Ьбп-зт’’>Принять</а>

<Ьиббоп буре=”Ьиббоп" сбазз="Ьбп Ьбп-зесопбагу бехб-дгау тз-аибо”
баба-Ьз-ббзтбзз="тобаб">Закрыть

</Ьиббоп>

</ббч>

</ббч>

</сНч>

</ббч>

<	!— Это конец модального окна —>

Здесь В первой строке присутствует идентификатор модального окна (бб="тобаб-бебаибб"),
который совпадает С целевым именем окна В кнопке вызова (баба-Ьз-багдеб="#тобаб-
бебаибб").

Таким образом, по нажатию на кнопку Простое модальное окно соответствующее мо-
дальное окно будет отображено поверх текущей страницы (рис. 2.39).

Для закрытия модального окна нужно нажать на кнопку Закрыть, на кнопку с крести-
ком в правом верхнем углу модального окна, или щелкнуть левой кнопкой мыши в лю-
бом месте родительского окна.
Демонстрация модальных окон Воогзиар

про™?

моральнее оо«

с прокруткой

11ЛфО<ЛР
мсдапиное окно

Сайты "Академия Ру1Ьоп" и "УМНИК"

Нас легко найти

Сайт "Академия РугЬогГ находится по адресу аруЖоп ти
Сайт "УМНИК" находится по адресу гшпп(к.ги

Рис. 2.39. Простое модальное окно на фоне шаблона Ьоо1_тос1а1.Н1т1

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

Модальное окно с полосой прокрутки вызывается по нажатию на соответствующую
кнопку с использованием следующего кода:

<Ьи1±оп Суре=’’ЬикСоп" с1азз="Ы:п Ыт-Ыоск Ызп-ргшагу гоЬ-3" с!ака-Ьз-кодд1е=’'тос1а1'’
с!ака-Ьз-кагдек="#тос1а1-зсго11">Модальное окно с прокруткой</Ьиккоп>

Здесь целевое модальное окно идентифицируется с использованием следующего фраг-
мента кода:

с!ака-Ьз-кагдек="#тос1а1-зсго11"

Место вставки модального окна резервируется с использованием следующего фрагмен-
та кода:

<!— Это встроенное модальное окно с прокруткой —>

{% 1пс1ис1е ”тазкег/д1ача_2/шос1а1_зсго11 .Ыдп1" %}

Само модальное окно находится в шаблоне тос1а1_8сго11.И1т1, который имеет следующий
код (листинг 2.35).

Листинг 2.35. Шаблон тос1а1_8Сго11.Гйт1 приложения таз(ег

<!— Это начало модального окна —>

<сПч с1азз=”тос!а1 ^айе” 1с1="тос1а1-зсго11" 1:аЫпс1ех="-1"

го1е=”сИа1од”
аг1а-1аЬе11ебЬу=”тоба1-зсго11"
аг1а-Ыббеп="бгие">

<сНу с1азз="тоба1-б1а1од тос1а1-с11а1од-зсго11аЫе" го1е="боситепб"> <!— прокрутка —>

<сНу с1азз=”тоба1-сопбепб"> <!— контент окна —>

<сНу с1азз=”тос1а1-кеас1ег"> <!— заголовок окна —>

<Ъ2 с1азз='Ъ6 тоба1-б1б1е">Тема сообщения</Ь2>

сЬиббоп буре=”Ьиббоп" с1азз="Ыт-с1озе"

баба-Ьз-б1зт1зз="тоба1"

аг1а-1аЬе1="С1озе">

</Ьиббоп>

</сНу>

<сНу с1азз=”тоба1-Ьобу"> <!— тело окна —>

<	р>Это текст в шаблоне шос!а1.</р>

<	р>Это тоже текст сообщения в шаблоне шоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<	р>Это тоже текст сообщения в шаблоне тоба1.</р>

<р>{{ тзд }}</р>

</б1У>
<сПу с1азз=”тос!а1-^оо11ег"> <!— подвал окна —>

<а Ъге^=”#” с1азз=”Ыт-сотт111 Ыт-рггтагу Ыт-зт’’>Принять и вернуться</а>

<Ьи1±оп Гуре="ЬиГГоп" с1азз="Ыт Ызп-зесопбагу ТехТ-дгау тз-аиГо"
баГа-Ьз-Щзтзз="шос1аГ'>Закрь1ть

</Ьи1±оп>

С/С11У>

</с11у>

</сНу>

</сНу>

<!— Это конец модального окна —>

Здесь в первой строке присутствует идентификатор модального окна (1а="тос1а1-зсго1Г’),
который совпадает С целевым именем окна В кнопке вызова (с!аТа-Ьз-ГагдеГ=”#тос1а1-зсго11 ").
Таким образом, по нажатию на кнопку Модальное окно с полосой прокрутки соот-
ветствующее модальное окно будет отображено поверх текущей страницы (рис. 2.40).

Темз сообщения

УМНШ

ьучные

____________________________________________________________________________________I л

I



Это текст е шаблоне тос!а1.



Демонстрация мод аль и

Это тоже текст сообщения в шаблоне тос!а1.

Простое
модальное окно

Сгрпгр

Это тоже текст сообщения в шаблоне тос!а1.

Это тоже текст сообщения в шаблоне тойа1.

Сайты "Академия Ру

Это тоже текст сообщения в шаблоне тос!а1.

Это тоже текст сообщения в шаблоне тос1а1.

Это тоже текст сообщения в шаблоне тоба1.

Это тоже текст сообщения в шаблоне тоба!.

Это тоже текст сообщения в шаблоне тос!а1.

Это тоже текст сообщения в шаблоне тос!а1.

Это тоже текст сообщения в шаблоне тос1а1.

Добро Пожаловать

Это тоже текст сообщения в шаблоне тодак

У1НИК”

сй*те дкад

И м+5’

Это тоже текст сообщения в шаблоне тода1.

Это тоже текст сообщения в шаблоне тос!а1.

ь РДД^1 31-

Принять и вернуться

ЭТО тоже текст сообщения в шаблоне тойа1.

Это тоже текст сообщения в шаблоне тос1а1.

Это тоже текст сообщения в шаблоне тос!а1.

Закрыть



Рис. 2.40. Модальное окно с полосой прокрутки на фоне шаблона Ьоо1_тос1а1.Н1т1
Для закрытия модального окна нужно нажать на кнопку Закрыть, на кнопку с крес-
тиком в правом верхнем углу модального окна, или щелкнуть левой кнопкой мыши
в любом месте родительского окна.

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

Широкое модальное окно вызывается по нажатию на соответствующую кнопку с ис-
пользованием следующего кода:

<ЬиСГоп Гуре=”ЬиШ)п" с!азз="Ы:п Ыт-Ыоск Ьбп-ргшагу гоЬ-3"

баба-Ьз-бодд1е="тоба1"

с!ака-Ьз-кагдек=”#тос1а1-1агде">111ирокое модальное окно

</ЬиГГоп>

Здесь целевое модальное окно идентифицируется с использованием следующего фраг-
мента кода:

баба-Ьз-багдеб="#тоба1-1агде"

Место вставки модального окна резервируется с использованием следующего фрагмен-
та кода:

<!— Это широкое модальное окно —>

{% 1пс1ибе ”тазкег/д1ауа_2/шос1а1_1агде.Ылп1" %}

Само модальное окно находится в шаблоне тос1а1_1агде.И1т1, который имеет следующий
код (листинг 2.36).

Листинг 2.36. Шаблон тос1а1_1агде.Мт1 приложения таз(ег

<!— Это начало модального окна —>

<сПч с1азз=”тоба1 ^абе” 1б="тоба1-1агде" ГаЫпбех="-1"

го1е=”б1а1од"

аг1а-1аЬе11ебЬу=”тоба1-бе^аи111"

аг1а-Ыббеп=”бгие">

<сПч с1азз=”тоба1-б1а1од тобаЗ-бгабод-сепбегеб тоба1-х1” го1е=”босытепб”>

<сПч с1азз=”тоба1-сопбеп11">

<61V с1азз="тос1а1-кеас1ег">

<Ъ2 с1азз=”Ъ6 тос!а1-111111е">Тема сообщения</Ь2>

<ЬиШэп Гуре="ЬиШ)п" с1азз="Ыт-с1озе"

6аба-Ьз-61зт1зз="тоба1"

аг1а-1аЬе1="С1озе">

</ЬиГГоп>

</сИч>

<61V с1азз=”тоба1-Ьобу">

<р>Это текст сообщения из модального окна.</р>

<р>{{ тзд }}</р>

</6гу>

<сПч с1азз=”тоба1-боо11ег">

<а Ъгеб=”#” с1азз=”Ыт-сотт111 Ыт-рггтагу Ыт-зт”>Принять</а>

<ЬиШ)п Гуре="ЬиШ)п" с1азз="Ыт Ыт-зесопбагу

бехб-дгау тз-аибо” 6аба-Ьз-61зт1зз="то6а1">Закрыть

</Ьиббоп>
</с1гу>

</сИу>

</сНу>

</с11у>

<!— Это конец модального окна —>

Здесь В первой строке присутствует идентификатор модального окна (1с1='’тос1а1-1агде'’),
который совпадает С целевым именем окна В кнопке вызова (с!аГа-Ьз-ГагдеГ="#тос1а1-
1агде”). Размер модального окна определяется с использованием следующего фрагмента
кода:

<сНу с1азз=”тос1а1-с11а1од тос!а1-с11а1од-сеп11егес1 тос!а1-х1” го1е="с1оситепТ"

Таким образом, по нажатию на кнопку Широкое модальное окно соответствующее
модальное окно будет отображено поверх текущей страницы (рис. 2.41).

Демонстрация модальных окон Воо1з(гар

ПрОСЛИ

Моральное ОкмС

МСДЙЯьКЧг ОЛНО
С. прукруггзпй



Сайты "Академия РуТИоп" и "УМНИК

Темз сообщения

Это текст сообщения из модального окна.

Принять

Добро П

АКЗДг

х

Это текстовое сообщение передано из представления

Закрыть

1ГГ ш*.< чсж₽те н^Зти ячтонс*1нь* ннтррактн^нь'^ ииоровь е кинги и йнстр,.'1

 чКрчш пасай'е	ьы 'скрг? Найгн 1\еЬ-веосин иь-ерлкп'Е-як 'сск1еы। «ы-цг.1

:т«Х пособий Мь< РАДу видеть Йас в - АШИХ гюлыиЕэтег-??

Нас легко найти

Сайт "Академия Ру1Ьоп’ находится по адресу: аруИюп.ш
Сайт ' УМНИК™ находится по адресу гшппЛсга

Рис. 2.41. Широкое модальное окно с полосой прокрутки на фоне шаблона Ьоо(_тос1а1.Н1т1

Для закрытия модального окна нужно нажать на кнопку Закрыть, на кнопку с крес-
тиком в правом верхнем углу модального окна, или щелкнуть левой кнопкой мыши
в любом месте родительского окна.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Пред-
ставление Ьоо1_тос1а1.
2.9.	Компонент Воо(§<гар АссогсНоп («Аккордеон»)

Компонент АссогсНоп формирует содержимое фрагмента НТМЬ-страницы в виде склад-
ных панелей, обеспечивая компактное представление информации в ограниченном
пространстве экрана. В результате пользователи могут оперативно переключаться меж-
ду панелями, открывая различный контент в одном и том же месте экрана.

Ранее (в Воо181гар 4) АссогсНоп был частью компонента соПарЫЫе, а не отдельным ком-
понентом. В Воо181гар 5 АссогсНоп - НОВЫЙ компонент. Вместе С АссогсНоп появился

новый класс ассогсНоп, который содержит внутри себя список элементов аккордеона.
Кроме того, для аккордеонов предусмотрен новый стиль, отличный от предыдущего
стиля в Воо181гар 4.

2.9.1.	Класс ассогсНоп

В качестве примера сформируем шаблон ассогс1юп_1.И1т1, в котором будет создан ком-
понент АссогсНоп на основе класса ассогсНоп (ЛИСТИНГ 2.37).

Листинг 2.37. Шаблон ассогсПоп_1.Гйт1

{% ехкепсИ "зИор/Ьазе.ИктГ’ %}

{% 1оас1 зкаЫс %}

{% Ыоск ИеаНег %}

«Ну с1азз="гом кехк-зкагк тх-2">

<И4>Аккордеон на основе класса ассогсНоп</И4>

</сНу>

{% епсЫоск ИеаНег %}

{% Ыоск сопкепкк}

<сИч Ыазз="гом кехк-зкагк тх-2">

<сИу с!азз=”со1-4 кехк-зкагк тх-2">

<!— Начало аккордеона —>

<сИч с!азз=”ассогсИоп” 1с1="ассогсНопЕхатр1е">

<!— Вкладка 1 —>

<сИч с1азз=”ассогсНоп-1кет">

<!— Кнопка в заголовке вкладки 1 —>

«12 с1азз=”ассогсНоп-Ьеас1ег" 1с1='ЪеасНпд0пе">

«эиккоп Ыазз="ассогсИоп-Ьиккоп" куре="Ьиккоп"

с!ака-Ьз-кодд1е=”со11арзе"

Нака-Ьз-кагдек=”#со11арзе0пе"

аг!а-ехрапс1ес1=”кгие" аг!а-сопкго1з="со11арзе0пе”>

Вкладка 1

</Ьиккоп>

</И2>

<!— Тело (содержимое) вкладки 1 —>

<сНу Ы=”со11арзе0пе” с!азз="ассогсНоп-со11арзе соНарзе зИом”

аг1а-1аЬе11ес1Ьу=”ИеасИпд0пе ”

с!ака-Ьз-рагепк=”#ассогсНопЕхатр1е">
<сИу с1азз="ассогб1оп-Ьобу">

<збгопд>Это содержимое вкладки 1.</збгопд>

В этой вкладке находится обычный текст.

</б1У>

</б1У>

</ббу>

<!— Вкладка 2 —>

<6гу с1азз="ассогб1оп-1беш">

<!— Кнопка в заголовке вкладки 2 —>

<В2 с1а55="ассогб1оп-Ьеабег" 1б='Ъеаб1пдТ1лго">

сЬиббоп с1азз="ассогб1Оп-ЬиРРоп соИарзеб" буре="Ьиббоп"

баба-Ьз-бодд1е="со11арзе"

баба-Ьз-багдеб="#со11арзеТмо"

аг1а-ехрапбеб=”ТаТзе"

аг1а-сопбго1з=”со11арзеТмо">

Вкладка 2

</Ьиббоп>

</В2>

<!— Тело (содержимое) вкладки 2 —>

<6гу 1б="со11арзеТмо" с1азз="ассогб1оп-со11арзе соНарзе"

аг1а-1аЬе11ебЬу=”йеаб1пдТмо"

баба-Ьз-рагепР=”#ассогб1опЕхашр1е">

<61у с1азз="ассогб1оп-Ьобу">

<збгопд>Это содержимое вкладки 2.</збгопд>

В этой вкладке находится ссылка на другую страницу.

{% ТпсТибе ”тазбег/д1ауа_2/1пс_раде.Ибт!" %}

<собе>.ассогб1оп-Ьобу</собе>А РйоидВ 1±е РгапзгбТоп боез Итбб оуегТТом.

</сНу>

</б1У>

</б1У>

<!— Вкладка 3 —>

<61у с1азз=”ассогб1оп-1Рет">

<!— Кнопка в заголовке вкладки 3 —>

<В2 с1азз=”ассогб1оп-йеабег" 1б="йеаб1пдТк1гее">

<ЬиШ)п С1азз="ассогб1оп-Ьиббоп соИарзеб" Вуре="ЬиШ)п”

баба-Ьз-бодд1е=”со11арзе"

баба-Ьз-багдеб="#со11арзеТк1гее"

аг1а-ехрапбеб=”ТаТзе"

аг1а-сопРго1з=”со11арзеТк1гее">

Вкладка 3

</Ьиббоп>

</Ь2>

<!— Тело (содержимое) вкладки 3 —>

<61у 1б=”со11арзеТйгее" с1азз="ассогб1оп-со11арзе соИарзе”

аг1а-1аЬе11ебЬу="йеаб1пдТк1гее ”

баба-Ьз-рагепб=”#ассогб1опЕхатр1е">
<сНу с1азз=”ассогб1оп-Ьобу">

<збгопд>Это содержимое вкладки 3.</збгопд>

В этой вкладке находится ссылка на изображение.

<сПч с1азз=”со1-3 Рехб-сеп11ег">

<1тд згс="{% зВабтс '1шадез/АР_400.рпд' %}" с1азз=”1тд-Р1и1сГ а1б=”СГ(3”>

</сИч>

</б1Ч>

</б1Ч>

</сНу>

</б1Ч>

</сНу>

</сНу>

{% епбЫоск сопбепР %}

В этом шаблоне с использованием класса ассогсИоп созданы три вкладки аккордеона:

<!— Начало аккордеона —>

<сИч с1азз="ассогсИоп" 1б="ассогб1опЕхашр1е">

Каждая вкладка представляет элемент аккордеона, который создается на основе класса
ассогсПоп-ббет:

<61V с1азз=»ассогсПоп-1бе1п»>

При этом каждая вкладка имеет заголовок с идентификатором (ш) и с кнопкой для
открытия (закрытия) вкладки:

<ЬиШ)п с1азз=”ассогсПоп-Ьи1:1:оп" Вуре="Ьи1111оп"

6аба-Ьз-бодд1е="со11арзе"

6аба-Ьз-багдеб=”#со11арзе0пе"

аг!а-ехрапс1ес1="бгие" аг1а-сопРго1з="со11арзе0пе">
Вкладка 1

</Ьиббоп>

Тело каждой вкладки создается на основе класса с1азз=”ассог(Поп-со11арзе соЫарзе". Если
требуется, чтобы вкладка при загрузке страницы была открыта, то ее нужно создавать
С использованием класса ассогсИоп-соИарзе соИарзе зйош:

с1азз=”ассогсИоп-со11арзе соИарзе зИом"

Содержимое тела вкладки (контент) создается на основе класса ассогсПоп-Ьобу:

<сПч с1азз=”ассогсПоп-Ьос1у">

В теле вкладки можно отобразить совершенно разный контент. В приведенном примере
вкладки отображают следующий контент:

♦	Вкладка 1 — обычный текст;

♦	Вкладка 2 — на основе тега 1пс1ибе демонстрирует другую страницу сайта;

♦	Вкладка 3 — представляет рисунок.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница ассогс!юп_1.Гйт1.
Аккордеон на основе класса ассогсНоп

Вкладка 1

Это содержимое вкладки 1. В этом вкладке находится обычный
текст.

Вкладка 2

Вкладка 3

Рис. 2.42. Внешний вид шаблона ассогс1юп_1.П1т1 с открытой вкладкой 1

После загрузки шаблона ассогс1юп_1.И{т1 в окне браузера эта страница будет выглядеть
так, как показано на рис. 2.42.

Как здесь можно видеть, при первоначальном показе шаблона в окне браузера вклад-
ка 1 открыта, и в ней показана текстовая информация.

Если щелкнуть левой кнопкой мыши в любом месте заголовка вкладки 2, то она откро-
ется (вкладка 1 при этом автоматически закроется), и в ней будет показана информация
из другого шаблона сайта— 1пс_раде.И1т1 (рис. 2.43).

Аккордеон на основе класса ассогсПоп

Вкладка 1

Вкладка 2

Это содержимое вкладки 2. В этой г кладке находится ссылка на
другую страницу.____

Ьд-
орао1у-25

Ьд-
орасг1у-10

Ьд-
орас1Ёу-25

Ьд-
орзсгГу-10

.ассагсНсп-Ьо^у, ПюидНДИе ДапыНол боез НтИ отеШом.

Вкладка 3
Если щелкнуть левой кнопкой мыши в любом месте заголовка вкладки 3, то она откро-
ется (ранее открытая вкладка при этом автоматически закроется) и в ней будет показан
рисунок (рис. 2.44).

Аккордеон на основе класса ассогсйоп

Вкладка 1

Вкладка 2

Вкладка 3

Это содержимое вкладки 3. В этой вкладке находится ссылка на
изображение.

Рис. 2.44. Внешний вид шаблона ассогс1юп_1.Н1т1 с открытой вкладкой 3

Если щелкнуть левой кнопкой мыши на заголовке открытой вкладки, то она закроется
и аккордеон станет занимать минимальную площадь экрана (рис. 2.45).

Аккордеон на основе класса ассогсНоп

Вкладка 1

Вкладка 2

Вкладка 3

Рис. 2.45. Внешний вид шаблона ассогс1юп_1.П1т1 с закрытыми вкладками

2.9.2. Класс ассогсИоп-11и811

Класс ассогсНоп-ПизЬ создает элемент «аккордеон», у которого удаляется цвет фона и
границы с закругленными углами, что делает этот элемент похожим на родительский
контейнер. В качестве примера сформируем шаблон ассогс1юп_2.И{т1, в котором будет
создан компонент «Аккордеон» на основе класса ассогсНоп-ПизЬ, добавив при этом воз-
можность держать открытыми сразу несколько вкладок (листинг 2.38).

Листинг 2.38. Шаблон ассогсНоп_2.Щт1

{% ехТепйз "зЬор/Ьазе.ЫлпГ’ %}

{% 1оаб зТаТтс %}
{% Ыоск ИеаНег %}

<Ыч с1азз="гом кехк-зкагк тх-2">

<И4>Аккордеон на основе класса ассогсИоп-Т1изИ</И4>

</сЫ>

{% епсЫоск ИеаНег %}

{% Ыоск сопкепЫ}

<Ыч с!азз=”гом ЫхЫзкаЫ тх-2">

<Ыч с!азз=”со1-4 кехЫзкаЫ тх-2">

<!— Начало аккордеона —>

<сНч с1азз=”ассогЫоп ассогсНоп-ТЫзИ" Ы="ао-ассогс11оп’’>

<!— Вкладка 1 —>

<Ыч с1азз="ассогсИоп-11сет">

<!— Кнопка в заголовке вкладки 1 —>

<И2 Ыазз=”ассогсНоп-Иеас1ег"

1с1=”рапе1з8кау0реп-ИеаЫпд0пе">

<ЬиЫоп с1азз="ассогЫоп-ЬиЫоп"

Вуре="ЬиЫоп"

с!аЫ-Ьз-Ыдд1е="со11арзе"

сЫа-Ьз-ЫгдеЫ"#рапе1зЗВау0реп-со11арзе0пе"

аг!а-ехрапс1ес1="11гие"

аг1а-сопЫо1з=”рапе1зЗЫу0реп-со11арзе0пе">

Вкладка 1

</ЬиЫоп>

</И2>

<!— Тело (содержимое) вкладки 1 —>

<сНч Ы="рапе1зЗкау0реп-со11арзе0пе"

с1азз=”ассогЫоп-со11арзе"

аг!а-1аЬе11ес1Ьу="рапе1з311ау0реп-ИеаЫпд0пе”>

<сНч с1азз="ассогЫоп-Ьос1у">

<зЫопд>Это содержимое вкладки 1.</зВгопд>

В этой вкладке находится ссылка на другую страницу.

{% 1пс1ис1е "тазкег/д1ача_2/1пс_раде .Ыт1" %}

</Ыч>

</сИч>

</Ыч>

<!— Вкладка 2 —>

<сНч с1азз="ассогЫоп-111ет">

<!— Кнопка в заголовке вкладки 2 —>

<И2 с1азз=”ассогсНоп-]эеас1ег"

Ы="рапе1з ЗРауОреп-ИеаЫпдТмо " >

<ЬиЫоп с1азз="ассогЫопЧэиЫоп соНарзесГ

Вуре="ЬиЫоп"

с!аЫ-Ьз-Ыдд1е="со11арзе"

с!ака-Ьз-кагдек="#рапе1зЗкау0реп-со11арзеТш”

аг!а-ехрапс1ес1=”Та1зе"

аг1а-сопЫо1з="рапе1зЗВау0реп-со11арзеТж)”>

Вкладка 2
</Ьиббоп>

</Ь2>

<!— Тело (содержимое) вкладки 2 —>

«Ич 1б="рапе1зЗбау0реп-со11арзеТмо"

с1азз="ассогсНоп-со11арзе соИарзе"

аг!а-1аЬе11ес1Ьу="рапе1з811ау0реп-]1еасНпдТмо">

«Ич с1азз="ассогб1оп-Ьос1у">

<збгопд>Это содержимое вкладки 2.</збгопд>

В этой вкладке находится ссылка на изображение.

<сНч с!азз="со1-3 Рех11-сеп11ег">

<1тд згс="{% збабтс '1шадез/АР_400.рпд' %}"
с1азз="1тд-В1и1сГ а1б="СГС">

</сНч>

</сНч>

</сНч>

</сНч>

</сНч>

</сНч>

</сНч>

{% епбЫоск сопбепР %}

В этом шаблоне созданы две вкладки аккордеона. Для создания компонента «Аккорде-
он» использован класс ассогсНоп-ПизЬ:

<!— Начало аккордеона —>

<сНч с1азз="ассогсНоп ассогсНоп-НизИ" 1с1="ао-ассогсНоп">

Каждая вкладка представляет элемент аккордеона, который создается на основе класса

ассогсНоп-ТбепГ.

<сНч с1азз=»ассогсНоп-1Рет»>

При этом каждая вкладка имеет заголовок с идентификатором (та) и с кнопкой для от-
крытия (закрытия) вкладки:

сЬиббоп с1азз="ассогсНоп-Ьи1:1:оп соПарзесГ

буре="Ьиббоп"

баба-Ьз-бодд1е="со11арзе"

с!аба-Ьз-багдеб="#рапе1з311ау0реп-со11арзеТмо"

аг1а-ехрапбеб="Та1зе"

аг1а-сопбго1з="рапе1зЗбау0реп-со11арзеТмо">

Вкладка 2

</Ьиббоп>

В параметрах кнопки задана возможность панели оставаться открытой: рапеТззвауОреп.

Тело каждой вкладки создается на основе класса с1азз="ассога1оп-со11арзе соИарзе". При
этом параметры тела элемента аккордеона также содержат свойство, позволяющее
вкладке оставаться открытой: рапе1зЗбау0реп.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница ассогс!юп_2.№п1.
После загрузки шаблона ассогс1юп_2.И{т1 в окне браузера эта страница будет выглядеть
так, как показано на рис. 2.46.

Как здесь можно видеть, компонент «Аккордеон», созданный на основе класса
ассогсПоп-ПизЬ, не имеет внешней рамки, а цвет его фона аналогичен цвету фона роди-
тельской страницы. Пользователю также предоставлена возможность держать откры-
тыми сразу несколько вкладок.

Аккордеон на основе класса ассогсПоп-Ли^Н

Вкладка 1

Вкладка 2

Рис. 2.46. Внешний вид шаблона ассогс1юп_2.Н1т1 с закрытыми вкладками

Шаблон ассогс1|Оп_2.И1т1 при всех открытых вкладках будет выглядеть так, как показано
на рис. 2.47).

Аккордеон на основе класса ассогсНоп-НизГ]

Вкладка 1

Эта содержимое вкладки 1. В этой вкладке находится ссылка на

другую страницу.

Ьд- рптагу	Ьд- о расПу-7 5	Ьд- орао!у-50	
Ьд- 5ИССе55	Ьд- орасг1у-75	Ьд- ораст!у-50	

Ьд-
орас^у-10

Ьд-
орапИу-Ю

Вкладка 2

Это содержимое вкладки 2. В этой вкладке находится ссылка на
2.10.	Компонент Воо(з(гар сагс! («Карточки»)

Карточка — это гибкий и расширяемый контейнер для размещения в нем различного
контента. Карточка состоит из заголовка, подвала и контента. Для карточек доступно
множество вариантов оформления — таких как выравнивание элементов, цвета элемен-
тов и многое другое. Структуру элементов карточки можно представить в следующем
виде:

сПу с1азз="сагсГ>

<сПу с1азз=”сагс1-кеас1ег”>Шапка</(11ч>

<сИу с1азз=”сагс1-к1к1е”>Заголовок</(11У>

«11V с1азз="сагс1-зиЬк1к1е">Подзаголовок</с11ч>

<сПу с1азз=”сагс1-Ьос1у”>Контент</с11у>

<сИч с1азз="сагс1-кехк’’>Текст</с11у>

<сИу с1азз="сагс1-коокег">Подвал</с11ч>

</сНу>

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

В качестве примера сформируем шаблон сагс1_1.Ыт1, в котором будет создана простая
карточка (листинг 2.39).

Листинг 2.39. Шаблон сагс1_1.111т1

{% ехкепйз "зкор/Ьазе.НктГ' %}

{% Ыоск кеаНег %}

СсПч с1азз=”гом кехк-зкагк тх-2">

<Н4>Простая карточка Воокзкгар</Н4>

</сИч>

{% епсЫоск кеаНег %}

{% Ь1оск сопкепк%}

<сПч с1азз=”гом кехк-зкагк тх-2">

<сПч с!азз="со1-4 кехк-зкагк тх-2">

<!— Начало карточки —>

<сИч с1азз=”сагс! кехк-сепкег" зку!е="Ы.с1кк: 18гет;">

<сПч с1азз=”сагс!-кеас1ег">

<к5>Шапка карточки</к5>

</сПч>

<сИч с1азз=”сагс1-к1к1е">

<к5>3аголовок тела карточки</к5>

</сПч>

<сЦч с1азз=”сагс!-зиЬк1к1е">

<кб>Подзаголовок тела карточки</кб>

</сПч>

<сПч с!азз="сагс1-Ьос1у">

<р с!азз=”сагс1-кехк”>Текст в теле карточки.</р>

<а НгеВ=”#" с1азз=”сагс1-11пк">Ссылка 1</а>

<а НгеВ=”#" с1азз=”сагс1-11пк">Ссылка 2</а>

</сПч>
<сИу с1азз="сагс1-коокег">

<кб>Подвал карточки</кб>

</сПу>

</сНу>

</сИу>

</с1гу>

{% епбЫоск сопкепк %}

В этом коде создана простая карточка ВооЫгар со всеми элементами: шапка, заголо-
вок, подзаголовок, тело, текст, подвал. В стиле задана ширина карточки (зку1е="Щс1кк:
18гет;). В тело карточки включены две ссылки на другие ресурсы на основе класса сага-
Ипк.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница сагсМ.Гйт!.

Шаблон сагс1_1 .И1т! в окне браузера будет выглядеть так, как показано на рис. 2.48.

Простая карточка Воо1з1гар

Шапка карточки

Заголовок тела карточки
Подзаголовок тела карточки

Текст в теле карточки.

Ссылка 1 Ссылка 2

Подвал карточки

Рис. 2.48. Внешний вид шаблона сагс1_1.Н1т1

Здесь можно видеть, что по умолчанию карточка обрамлена серой рамкой со скруглен-
ными краями и с цветом фона таким же, что и у родительской страницы. В этом приме-
ре ссылки не рабочие, а чисто декоративные, т. к. для нах указан пустой ИВЬ-адрес
(Ъгек="#").

Пояснение

Прием указания пустого адреса (Ьгек="#”) достаточно часто используется при отладке
работы программных модулей в тех случаях, когда страница, на которую предполагается
сослаться, еще не создана.

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

В качестве примера создания простой карточки с заданием цвета для ее элементов
сформируем шаблон сагс1_2.К1т1. В частности, зададим цвет фона, цвет текста, цвет рам-
ки и толщину рамки (листинг 2.40).
Листинг 2.40. Шаблон сагс1_2.Г1(т1

{% ехкепЬз "зЬор/Ьазе.ЬктГ' %}

{% Ыоск ЬеаЬег %}

<Ыч с1азз=”гом кехк-зкагк тх-2">

<М>Карточки Воокзкгар с параметрами цвета</Ь4>

</Ыч>

{% епсЫоск ЬеаЬег %}

{% Ыоск сопкепк%}

<Ыч Ыазз="гом кехк-зкагк тх-2">

<Ыч с!азз=”со1-2 кехк-зкагк тх-2">

<	!— Карточка 1 —>

<сНч с1азз=”сагс! кехк-мЫке Ьд-ргтагу тЬ-З
ЬогЬег-Ьапдег ЬоЫег Ьогс1ег-5"

зку!е=”тах-Ыс1кЫ 18гет;">

<Ыч с1азз=”сагс1-Ьеас1ег">Шапка карточки 1</Ыч>

<Ыч с1азз=”сагс1-Ьос1у">

<Ь5 Ыазз="сагс1-к1к1е">3аголовок карточки</Ь5>

<р с1азз=”сагс1-кехк">

Текстовое содержимое карточки. Цвет фона ргтшагу.
Цвет текста мЫке.

</р>

</Ыч>

<	/Ыч>

</сИч>

<скч с!азз="со1-2 кехк-зкагк тх-2">

<	!— Карточка 2 —>

<Ыч с1азз=”сагс! кехк-мЫке Ьд-зесопс1агу шЬ-3
ЬоЫег-Ьагк ЬогЬег Ьогс1ег-5"

зку1е=”тах-Ыс!кЬ: 18гет;">

<Ыч с!азз=”сагс1-Ьеас1ег”>Шапка карточки 2</сИч>

<сИч с!азз="сагс1-Ьос1у">

<Ь5 с!азз=”сагс1-к1к1е">3аголовок карточки</Н5>

<р с!азз="сагс1-кехк">

Текстовое содержимое карточки. Цвет фона зесопЫгу.
Цвет текста мЫке.

</Ыч>

<	/Ыч>

</Ыч>

</Ыч>

<Ыч Ыазз=”гом кехк-зкагк тх-2">

<Ыч с!азз=”со1-2 кехк-зкагк тх-2">

<!— Карточка 3 —>

<Ыч с1азз=”сагс! кехк-мЫке Ьд-зиссезз тЬ-З
ЬоЫег-магЫпд ЬогЬег ЬогЬег-5"

зку!е=”тах-Ыс1кЬ: 18гет;">
<сИу с!азз=”сагс1-Ьеас1ег">Шапка карточки 3</сИч>

<с!1ч с1азз=”сагс!-Ьос1у">

<Ь5 с1азз=”сагс!-Р1Р1е">Заголовок карточки</Н5>

<р с1азз="сагс1-кехк">

Текстовое содержимое карточки. Цвет фона зиссезз.

Цвет текста мЫРе.

</р>

</сНч>

</сИч>

</сНч>

<сНч с!азз="со1-2 РехР-зкагР тх-2">

<!— Карточка 4 —>

<сНч с1азз="сагс! РехР-йагк Ьд-магпФпд шЬ-3

Ьогйег-ргФтагу ЬогсЗег Ьогс1ег-5"

зку1е="тах-м1с1кЬ: 18гет;">

<сНч с1азз=”сагс1-Ьеас1ег">Шапка карточки 4</сНч>

<сНч с!азз=”сагс1-Ьос1у">

<Ь5 с1азз="сагс1-к1к1е">3аголовок карточки</Н5>

<р с!азз="сагс1-кехк">

Текстовое содержимое карточки. Цвет фона магптпд.

Цвет текста (Загк.

</р>

</сНч>

</сИч>

</сНч>

</сНч>

{% епбЫоск сопкепк %}

Карточки Воогзггар с параметрами цвета

Шапка карточки 1

Заголовок карточки

Текстовое содержимое
карточки. Цвет фона рпгпагу.
Цвет текста шЬйе.

Шапка карточки 2

Заголовок карточки

Текстовое содержимое
карточки. Цвет фона
Бесоп^агу. Цвет текста л-Ьне.

Шапка карточки 3

Заголовок карточки

Текстовое содержимое
карточки. Цвет фона бисссбб,
Цвет текста мЛ1Це.

Шапка карточки 4

Заголовок карточки

Текстовое содержимое
карточки. Цвет фона
^агшпд. Ивет текста С1агк
В этом коде созданы четыре карточки с разными параметрами цвета:

♦	цвет текста задан в параметрах кехк-^Ыке и кехк-аагк;

♦	цвет фона задан В параметрах Ьд-рглпагу, Ьд-зесопс1агу, Ьд-зиссезз И Ьд-магп1пд;

♦	цвет рамок задан В параметрах ЬогЬег-Ьапдег, ЬогЬег-Ьагк, ЬогЬег-шггНпд И ЬогЬег-рглпагу;

♦	толщина рамок задана параметром Ьогаег Ьогаег-5 (5 пикселов).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница сагс!_2.Ыт1

Шаблон сагб_2.111т1 в окне браузера будет выглядеть так, как показано на рис. 2.49.

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

Если на странице много карточек, то их можно отобразить как единую группу с одина-
ковой шириной и высотой столбцов. В качестве примера сформируем шаблон
сагс1_3.111т1, в котором создадим группу карточек, которые, кроме текстовой информа-
ции, будут содержать и изображения. Код этого шаблона приведен в листинге 2.41.

Листинг 2.41. Шаблон сагс1_3.111т1

{% ехкеМз "зЬор/Ьазе.ЬктГ' %}

{% 1оас1 зкаклс %}

{% Ыоск ЬеаЬег %}

<сИV с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Группа карточек с изображениями</к4>

</сИч>

{% епЬЫоск ЬеаЬег %}

{% Ыоск сопкепк%}

<сПV с1азз=”гом кехк-зкагк тх-2">

<сПу с!азз=”со1-8 кехк-зкагк тх-2">

<!— Группа карточек —>

<сПч с1азз=”сагЬ-дгоир”>

<!— Карточка 1 —>

<сПч с1азз="сагсГ>

<1тд згс="{% зкактс '1шадез/АР_400.рпд' %}" с1азз=”1тд-Г1и1с1” а!к=”СЕС”>

<сНч с1азз=”сагЬ-ЬоЬу">

<Ь5 с!азз=”сагс1-к1к1е">3аголовок карточки 1</Ь5>

<р с1азз=”сагЬ-кехк">Текст в теле карточки 1,</р>

</сЦу>

<сПч с1азз=”сагс1-Гоокег">

<зта!1 с1азз="кехк-Ьос1у-зесопс1агу">11одвал карточки 1</зша11>

</сПч>

</сПч>
<!— Карточка 2 —>

<сНу с1азз="сагсГ>

<сИч с1азз=”сагс!-Ьо(1у">

<Ь5 с1азз=”сагс!-^1111е">3аголовок карточки 2</Ь5>

<шд згс="{% зкаПс '1шадез/АР_400.рпд' %}" с1аз8=”1тд-Р1и1сГ а1К=”СЕС">

<р с!азз=”сагс1-Еех11">Текст в теле карточки 2.</р>

</сНч>

<сНч с!азз=”сагс1-Еоо11ег">

<зта!1 с1азз=’ЧехЕ-Ьос1у-зесопс1агу">Подвал карточки 2</зша11>

</сНч>

</с!1ч>

<!— Карточка 3 —>

<сНч с1азз="сагсГ>

<сНч с1азз=”сагс1-Ьос1у">

<Ь5 с1азз=’’сагс1-Е1Е1е">Заголовок карточки 3</Ь5>

<р с1азз=”сагс1-ЕехЕ">Текст в теле карточки 3.</р>

</сНч>

<сНч с!азз=”сагс1-Еоо11ег">

<1тд згс="{% зкаПс '1шадез/АР_400.рпд' %}" с1азз=”1тд-Е1и1сГ а!Е=”СЕС”>

<зта!1 с1аз8=”ЕехЕ-Ьос1у-зесопс1агу">11одвал карточки 3</зта11>

</сНч>

</сИч>

</сИч>

</сНч>

</сНч>

{% епбЫоск сопкепЕ %}

В этом коде создан блок из трех карточек. Каждая карточка содержит изображение,
которое встроено в разные фрагменты карточек: перед заголовком, в теле карточки,
в подвале.

Группа карточек с изображениями

Заголовок карточки 1

Заголовок карточки 2

Текст в теле карточки 2.

Текст в теле карточки 1.

Заголовок карточки 3

Текст в теле карточки 3.

Чс^вал карточки 3

Похвал картечки 1

Похвал карточки 2

Рис. 2.50. Внешний вид шаблона сагс1_з.Н1т1 (группа карточек с изображениями)
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница сагбЗ.Ыт!

Шаблон сагс1_З.И1т1 в окне браузера будет выглядеть так, как показано на рис. 2.50.

Как здесь можно видеть, группа карточек имеет одинаковые размеры по высоте и
ширине, а изображение встроено в разные фрагменты карточек.

2.11.	Компонент ВооЫгар Сагоизе! («Карусель»)

Карусель — это компонент Воо181гар, предназначенный для реализации слайд-шоу, т. е.
для создания окна, в котором происходит циклическая смена контента. Карусель рабо-
тает с серией изображений, блоков текста или с изображениями с наложенным на них
текстом. Карусель также имеет элементы управления принудительной смены слайдов.

В шаблоне НТМЬ-страницы можно создать статичную карусель — с фиксированным
программным кодом и с фиксированным контентом, заранее загруженным на сервер.
Однако с использованием возможностей В]ап§о можно создать и динамичную карусель.
В этом случае фиксированный программный код даст пользователю возможность уда-
ленно загружать в БД сайта различный контент, который станет отображаться в окне
карусели. При этом пользователь сможет менять как количество слайдов карусели, так
и их содержание.

В этой главе мы рассмотрим только первый вариант — статичную карусель, а создани-
ем динамичной карусели займемся уже в следующей.

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

Статичная карусель имеет фиксированное число слайдов и фиксированный контент,
который отображается на каждом слайде. Создадим элемент «Карусель» в виде слайд-
шоу, которое обычно располагается в верхней части страницы сайта, — например, ин-
тернет-магазина.

Пример НТМЬ-кода страницы, в которой показано создание фиксированной карусели
из трех слайдов, приведен в листинге 2.42 (страница сагоизеМ .И1т1).

Листинг 2.42. Страница сагоизеМ.Шт!

{% ехкепйз "зйор/Ьазе.йкт!" %}

{% 1оас1 зкаклс %}

{% Ыоск кеайег %}

<сПу с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Статичная карусель с фиксированными слайдами</Н4>

</сПу>

{% епбЫоск йеайег %}

{% Ыоск сопкепк%}

<сИу 1с1=”сагоизе1Ехатр1еСопкго1з" с1азз="сагоизе! зИс!е” (1ака-Ьз-г1с1е=’’сагоизеГ’>
<!— Слайды карусели —>

<сНу с1азз="сагоизе1-1ппег">

<сИу с1азз="сагоизе1-1кет аск!уе">

<1тд згс=”{% зкакгс ’1тадез/Ко1Ьаза.дрд' %}"

зку1е="йе1дйк: 200рх;" с1азз="с!-Ыоск м-100" а1к="1таде">

</сНу>

<сНу с1азз="сагоизе1-1кет">

<1тд згс="{% зкаккс ’1тадез/Мо1око.дрд' %}"

зку1е="Ье1дЬк: 200рх;" с1азз="с!-Ыоск м-100" а1к="1таде">

</сНу>

<сНу с1азз="сагоизе1-1кет">

<1тд згс="{% зкаккс ’тадез/Кгира.дрд’ %}"

зку1е="йе1дйк: 200рх;" с1азз="с!-Ыоск м-100" а1к="1таде">

</с11у>

</сНу>

<!— Кнопка прокрутки слайдов (предыдущий) —>

сЬиккоп с1азз="сагоизе1-сопкго1-ргеу" куре="Ьиккоп"

с1ака-Ьз-кагдек="#сагоизе1Ехащ.р1еСопкго1з" (1ака-Ьз-з11с1е="ргеу">

<зрап с1азз="сагоизе1-сопкго1-ргеу-1соп" аг1а-Ыс1с1еп="кгие"></зрап>

<зрап с1азз="у1зиа11у-Ыс1с1еп">Ргеу1оиз</зрап>

</Ьиккоп>

<!— Кнопка прокрутки слайдов (следующий) —>

сЬиккоп с1азз="сагоизе1-сопкго1-пехк" куре="Ьиккоп"

с1ака-Ьз-кагдек="#сагоизе1Ехатр1еСопкго1з" с!ака-Ьз-з11с1е="пехк">

<зрап с1азз="сагоизе1-сопкго1-пехк-1соп" аг1а-й1с1с1еп="кгие"></зрап>

<зрап с1азз="у1зиа11у-111с1с1еп">Еехк</зрап>

</Ьиккоп>

</сНу>

{% епбЫоск сопкепк %}

В ЭТОМ программном модуле создана карусель (с1азз="сагоизе1 зИйе"), в которой имеют-
ся три слайда (с1азз="сагоизе1-1ппег"). Каждый слайд содержит только изображения
(Ко1Ьаза.]рд, Мо1око.]рд, Кгира.]рд), которые находятся в папке з^айсЛтадез. Для изобра-
жений В СТИЛЯХ задано ограничение ПО высоте В 200 пикселов (зку1е=’Ъе1дкк: 200рх;").
Для принудительной смены слайдов предусмотрены две кнопки: для возврата к преды-
дущему слайду (ргеутоиз) и для перехода к следующему (ыехк).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница сагоизе1_1 .Ыт1

В окне эта страница будет выглядеть так, как показано на рис. 2.51-2.53.

Как здесь можно видеть, на слайдах имеются по две кнопки в виде стрелок: стрелка «<»
обеспечивает возврат к предыдущему слайду, а стрелка «»> позволяет выполнить пере-
ход к следующему слайду. Если эти кнопки не трогать, то по умолчанию принудитель-
ная смена слайдов будет происходить через каждые 5000 миллисекунд.
Рис. 2.51. Слайд карусели с изображением Ко1Ьаза.]рд

Рис. 2.52. Слайд карусели с изображением Мо!око.]рд

Рис. 2.53. Слайд карусели с изображением Кшра.]рд

А теперь создадим элемент «Карусель» в виде слайд-шоу, на котором, кроме изображе-
ний, будет еще и поясняющий текст. Пример НТМЬ-кода страницы, в которой показано
создание фиксированной карусели из трех слайдов с изображениями и поясняющим
текстом, приведен в листинге 2.43 (страница сагои8е1_2.К1т1).

Листинг 2.43. Страница сагои8е!_2.Щт1

{% ехкепбз "зйор/Ьазе.йктГ’ %}

{% 1оас1 зкаЫс %}

{% Ыоск йеайег %}

<сПу с1азз=”гом кехк-зкагк тх-2">

<Ъ4>Статичная карусель с фиксированными слайдами</Н4>

</сИу>

{% епсЫоск йеайег %}

{% Ыоск сопкепк%}

<сПу 1с1="сагоизе1Ехатр1еСопкго1з" с1азз="сагоизе1 зИбе"
бака-Ьз-1пкегуа1="2000" бака-Ьз-г1бе="сагоизе1">
<!— Слайды карусели —>

<ббч с1азз="сагоизе1-1ппег">

<ббч с1азз="сагоизе1-1бет асб1че">

<	!— Изображение—>

<1тд згс="{% збаблс ’1тадез/Ко1Ьаза.дрд' %}"

збу1е="йе1дйб: 200рх;" с1азз="с!-Ыоск м-100" а1б="1таде">

<	!— Текст над изображением—>

<б!ч с1азз="сагоизе1-сарб1оп б-попе б-тб-Ыоск">

<Ы с1азз="бехб-мЫбе">Колбаса вареная и копченая</И1>

<	/б1Ч>

</б1Ч>

<б!ч с1азз="сагоизе1-1бет">

<!— Изображение—>

<1тд згс="{% збабТс 'бтадез/МоТоко.дрд' %}"

збу1е="йе1дйР: 200рх;" с1азз="б-Ыоск м-100" а1б="1таде">

<!— Текст над изображением—>

<ббч с1азз="сагоизе1-сарб1оп б-попе б-тб-Ыоск">

<Ы с1азз="бехб-мЫбе">Молоко и молочные продукты</И1>

<Ы с1азз="бехб-мЫРе"> (сыр твердый и мягкий) </Ы>

</б1Ч>

</б1Ч>

<б1ч с1азз="сагоизе1-1бет">

<!— Изображение—>

<1тд згс="{% збабТс ’бтадез/Кгира.дрд' %}"

збу1е="йе1дйб: 200рх;" с1азз="б-Ыоск м-100" а1б="1таде">

<!— Текст над изображением—>

<б1ч с1азз="сагоизе1-сарб1оп б-попе б-тб-Ыоск">

<Ы с1азз="бехб-мЫРе">Крупы и макаронные изделия</И1>

<Ы с1азз="бехб-мЫРе">из пшеницы твердых сортов</М>

<Ы с1азз="бехб-мЫРе"> (на развес и в упаковке) </И1>

</б1Ч>

</б1Ч>

</б1Ч>

<!— Кнопка прокрутки слайдов (предыдущий) —>

<ЬиШ)п с1азз="сагоизе1-сопбго1-ргеу" буре="Ьиббоп"

баба-Ьз-багдеб="#сагоизе1Ехатр1еСопбго1з" баба-Ьз-з11бе="ргеч">

<зрап с1азз="сагоизе1-сопбго1-ргеу-1соп" аг1а-1т1ббеп="Ргие"></зрап>

<зрап с1азз="ч1зиа11у-111ббеп">Ргеу1оиз</зрап>

</Ьиббоп>

<!— Кнопка прокрутки слайдов (следующий) —>

<ЬиШ)п с1азз="сагоизе1-сопбго1-пехб" буре="Ьиббоп"

баба-Ьз-багдеб="#сагоизе1Ехатр1еСопбго1з" баба-Ьз-з11бе="пехб">

<зрап с1азз="сагоизе1-сопбго1-пехб-1соп" аг!а-111ббеп="Ргие"></зрап>

<зрап с1азз="ч1зиа11у-111ббеп">Иехб</зрап>

</Ьиббоп>
</с1гу>

{% епбЫоск сопкепк %}

В этом программном модуле создан элемент «Карусель» (с1азз="сагоизе1 зШе"), к кото-
рому добавлен параметр, задающий принудительное время смены слайдов (аака-Ьз-
1пкегуа1=”2000”), т. е. автоматическая смена слайдов будет происходить через каждые
2000 миллисекунд.

Карусель имеет три слайда (с1азз="сагоизе1-1ппег"). Каждый слайд содержит не только
изображения, НО И ПОЯСНЯЮЩИЙ текст (с1азз="сагоизе1-сарк1ОП й-попе б-тб-Ыоск"). Первый
слайд несет одну строку текста, второй — две, а третий — три текстовые строки.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 2 и перейти по ссылке Стра-
ница сагои8е1_2.Мт1

В окне браузера эта страница будет выглядеть так, как показано на рис. 2.54-2.56.

Статичная карусель с фиксированными слайдами

Колбаса вареная и копченая

Рис. 2.54. Слайд карусели с изображением Ко1Ьаза.)рд и с одной строкой текста

Статичная карусель с фиксированными слайдами

Рис. 2.55. Слайд карусели с изображением Мо!око.]рд и с двумя строками текста

Молоко и

(сыр твердый и мягкий) -

Статичная карусель с фиксированными слайдами

Крупы и макаронные изделия
из.пшеницы твердых сортов

а-



;(йа развес и в упаковке)
МсЧ* Л

Рис. 2.56. Слайд карусели с изображением Кшра.)рд и стремя строками текста
2.12. Краткие итоги

В этой главе мы познакомились с базовыми сведениями о статичных элементах
Воо181гар, их параметрах и способах отображения в шаблонах Р]ап§о. Они достаточно
просто программируются и размещаются в этих шаблонах. Статичные элементы
Воо181гар чаще используются на тех страницах сайта, которые относительно постоянны
и не требуют частого обновления. Но если страница сайта «живая» — например, ново-
стной сайт, то статичные элементы — это головная боль для его административного
персонала. Ведь любое изменение элемента интерфейса (внешнего вида или содержа-
ния) потребует модификации программного кода с его переносом на публичный сервер.
Однако можно значительно упростить обновление элементов сайта, если использовать
динамичные элементы Воо181гар. Для их создания придется потрудиться, т. к. про-
граммный код в этом случае будет и сложнее, и длиннее. Но вы получите колоссальный
выигрыш при обновлении страниц сайта, поскольку и обновление контента, и измене-
ние дизайна элементов сайта, а также добавление новых элементов и удаление старых
можно будет выполнять удаленно без переписывания программного кода. С этими воз-
можностями вы и познакомитесь в следующей главе.

ГЛАВА 3

Динамичные элементы Воо&кар
в шаблонах О|апдо

В предыдущей главе мы получили базовые сведения о статичных элементах Воо181гар,
их параметрах и способах отображения в шаблонах Р]ап§о. Теперь можно перейти
к изучению методов создания динамичных элементов Воо^гар. В этой главе показаны
программные коды на примере трех элементов (аккордеон, карточки и карусель), но
аналогичный подход можно использовать и для других элементов ВооЫгар.

Из материалов этой главы вы узнаете:

♦	как создать динамичный «Аккордеон» с заполнением вкладок через административ-
ную панель И)ап§о;

♦	как создать динамичный «Аккордеон» с заполнением вкладок через интерфейс
пользователя;

♦	как создать динамичные карточки с заполнением контента через административную
панель;

♦	как создать динамичные карточки с заполнением контента через интерфейс пользо-
вателя;

♦	как создать динамичную карусель с заполнением контента через административную
панель;

♦	как создать динамичную карусель с заполнением контента через интерфейс пользо-
вателя.

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

В главе 2 было рассказано, как на основе фреймворка Воо181гар создать компонент «Ак-
кордеон». Если использовать традиционный подход к созданию этого элемента, то на
странице сайта будет показан статичный элемент «Аккордеон». Статичный в том
смысле, что для изменения количества вкладок и их содержимого понадобится пере-
программировать этот элемент и обновить несколько программных модулей на пуб-
личном сервере.

Однако при проектировании сайта можно создать аккордеон с динамичной загрузкой
данных в раскрывающиеся вкладки. В этом случае администраторы сайта через адми-
нистративную панель смогут изменить как количество вкладок аккордеона, так и их
содержание. При этом в программный код модулей сайта не придется вносить никаких
изменений. Чтобы этого добиться, необходимо все элементы аккордеона хранить в базе
данных. Посмотрим на упрощенном примере, как это можно сделать.

Сначала в приложении в файле тос1е18.ру создадим модель АссогсНоп со следующими по-
лями (листинг 3.1).

Листинг 3.1. Модель АссогсНоп

Егот сЦапдо.бЬ ЕгпрогЕ тойеЕз

#######################################

#	Модель для формирования аккордеона #

#	######################################

сЕазз АссогсНоп (тойеЕз .Мос1е1) :

Е1Е1е = тос!е1з .СЬагЕ1е1с1(тах_1епд1±1=100,

пи!1=Тгие, Ыапк=Тгые,
уегЬозе_пате=”Заголовок кнопки")

зЕгопд_ЕехЕ = тос!е1з .СЬагЕ1е1с1(тах_1епд1±1=100,

пи!1=Тгие, Ыапк=Тгые,
уегЬозе_пате="Заголовок вкладки")

ЕехЕ = тос!е1з .СЬагЕ1е1с1(тах_1епд1±1=1000,

пи!1=Тгие, Ыапк=Тгые,
уегЬозе_пате="Содержание вкладки")

оЬдесЕз = тойеЕз.Мападег

йеЕ __зЕг___(зеЕЕ) :

геЕигп зеЕЕ.ЕЕЕЕе

Здесь поле ЕЕЕЕе предназначено для хранения надписи на кнопке аккордеона, а поля
зЕгопд Еехр и Рехр — для хранения содержания тела аккордеона (заголовок тела выделен-
ным шрифтом и содержание тела обычным шрифтом). При этом нужно не забыть
выполнить процедуру миграции:

руЕЬоп тападе.ру такетЕдгаЕЕопз

рукЬоп тападе.ру тЕдгаке

Для того чтобы персонал мог удаленно менять содержимое аккордеона через админи-
стративную панель, модель АссогсНоп надо зарегистрировать в файле ас1т1п.ру (лис-
тинг 3.2).

Листинг 3.2. Регистрация модели АссогсНоп в файле ас1тт.ру

Егот сЦ апдо.сопЕгЕЬ ЕтрогЕ айлНп

Егот .тойеЕз ЕтрогЕ АссогсНоп

#	Регистрация модели АссогсНоп

айтЕп. зЕЕе. гедЕзЕег (АссогсНоп)

Для демонстрации динамичного аккордеона в меню или в теле одного из шаблонов
нужно создать ссылку для вызова страницы, содержащей аккордеон (листинг 3.3).
| Листинг 3.3. Ссылка для вызова динамичного аккордеона

<а ЬгеЕ=’’{% иг1 'тазкег Ы_ассогсИоп_1' %}" кагдек ="_Ыапк’’>Страница с1_ассогсИоп_1 .Ькт1</а>

По этой ссылке будет инициирован ИКП-маршрут с именем ь_ассогЫоп_1 (листинг 3.4).

Листинг 3.4. ЫНЬ-маршрут для вызова динамичного аккордеона

# Показать аккордеон

ракЬ (' д!ача_3/с!_ассогс11оп_1 /', члемз. с!_ассогс11оп_1, пате=' 6_ассогсНоп_1'),

При адресации к этому маршруту будет инициировано представление а_ассогЫоп_1 (лис-
тинг 3.5).

Листинг 3.5. Представление (у|еллл) ассогсПоп_1

с!еГ с!_ассогс11оп_1 (гедиезк) :

каЬз = АссогсНоп.оЬдескз.а!1()

гекигп гепс!ег(гедиезк, ’тазкег/д1ауа_3/с1_ассогс11оп_1.Ькт1', {'каЬз': каЬз})

В этом представлении создается объект каЬз, в который загружаются все записи из мо-
дели Ассогскоп (т. е. все вкладки аккордеона). Затем загруженные вкладки через словарь
передаются в шаблон с именем с1_ассогс1юп_1 .И1т1 (листинг 3.6).

Листинг 3.6. Шаблон с1_ассогс1юп_1.ГЦт1

{% ехкепНз "зЬор/Ьазе.ЬктГ’ %}

{% Ыоск Ьеабег %}

<Ы с1азз=”гом кехк-зкагк тх-2">

<Ь4>Динамичный аккордеон</Ь4>

</Ы>

{% епсЫоск Ьеабег %}

{% Ыоск сопкепк%}

<61V Ыазз=”гом кехк-зкагк тх-2">

<61V с!азз=”со1-4 кехк-зкагк тх-2">

<!— Аккордеон начало блока —>

<61V Ыазз="ассогсИоп" 16="ассог61опЕхатр1е"> <!— Класс Аккордеон —>

<сНч Ыазз=”ассогсНоп-1кет"> <!— Аккордеон элемент —>

{% Еог каЬ 1п каЬз %} <!— Цикл по элементам аккордеона —>

<Ь2 с1азз="ассог61оп-Ьеабег" Ы="НеаЫпдОпе{ { ЕогХоор.соипкег }}” >
сЬиккоп с1азз="ассогскоп-Ьиккоп Ьд-тпЕо Ьд-ораЫку-50” куре=”Ьиккоп”

Ьака-Ьз-кодд1е="со11арзе"

бака-Ьз-кагдек="#со11арзе0пе {{ когТоор. соипкег }} "
аг1а-ехрапбеб="кгие" аг1а-сопкго1з="со11арзе0пе”>{ { каЬ.ЫЫе }}

</Ьиккоп>

</Ь2>

<скч Ы=”со11арзе0пе{{ Еог1оор.соипкег }}"
с1азз=”ассогЫоп-со11арзе соНарзе"
аг1а-1аЬе11ебЬу="ЬеасИпдОпе {{ Еог1оор. соипбег }}"
баба-Ьз-рагепб="#ассог(ИопЕхатр1е">

<<Цу с1азз="ассогсИоп-Ьос1у">

<збгопд>{{ ГаЬ. збгопд_1:ех1: }}</з1агопд> {{ ГаЬЛехб }}

</сИу>

</сНу>

{% епсИог %} <!— Конец цикла по элементам аккордеона —>

</сНу> <!— Аккордеон конец элемента —>

</сИу> <!— Конец класса Аккордеон —>

<!— Аккордеон конец блока —>

</сИу>

</с11у>

{% епбЫоск сопбепР %}

Здесь на основе тега {% Еог баб 1п гаЬз %} создан цикл, в тело которого вложены элемен-
ты аккордеона. Каждый элемент аккордеона имеет идентификатор (1а). Для того чтобы
в теле цикла каждый идентификатор аккордеона имел уникальное значение, к его тек-
стовому содержанию добавлен счетчик циклов: {{ ЕогТоор.соипгег }}. То же самое сдела-
но с другими уникальными атрибутами аккордеона, которые теперь имеют следующий
вид:

♦ с1азз="ассогсИоп-Ьеас1ег" 1с1='Ъеас11пд0пе{ { Еог1оор.соипбег }}";

♦ баба-Ьз-багдеб=”#со11арзе0пе{{ Еог1оор.соипбег }}";

♦ аг1а-1аЬе11ебЬу=’Ъеас!1пд0пе{ { Еог1оор.соипбег }}".

При этом содержимое каждого элемента аккордеона выбирается из БД:

♦	заголовок кнопки: {{ гаь.ппе }};

♦	заголовок вкладки (жирный шрифт): {{ ТаЬ.збгопд_бехб }};

♦	содержание вкладки (обычный шрифт): {{ баЬЛехб }}.

Теперь заполнить вкладки аккордеона текстовой информацией можно в администра-
тивной панели В)ап§о (рис. 3.1).

Администрирование Э]апдо

ДОБРО ПОЖАЛОВАТЬ, АНАТОЛИЙ СТ^ЫТс

Начало Майег ДесопЛопе

Добавить



Рис. 3.1. Заполнение таблицы АссогсИоп в административной панели Щапдо
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Стра-
ница с1_ассогс1юп_1 .Мш1.

После загрузки шаблона с1_ассогс1юп_1 .И1т1 элемент «Аккордеон» в закрытом виде будет
выглядеть так, как показано на рис. 3.2, а с открытой вкладкой — как на рис. 3.3.

Динамичный аккордеон

Кнопка 1

Кнопка 2

Кнопка 3

Динамичный аккордеон

Кнопка 1

Заголовок вкладки 1 Садержанле
вкладки 1. С использованием РугИол
достаточно просто строить нейронные
сети я системы искусственного
интеллекта, для этого достаточно
подключкггь набор необходимых
библиотек, использовать
предварительно обученные нейронные
сети или обучить собственную
нейронную сеть.

Кнопка 2

Кнопка 3

Рис. 3.2. Вкладки динамичного аккордеона
в закрытом виде

Рис. 3.3. Вкладка динамичного аккордеона
в открытом виде

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

В предыдущем разделе было показано, как с использованием фреймворка ВооЫгар
создать динамичный компонент «Аккордеон». Для динамичного аккордеона не нужно
менять код страницы, однако недостатком этого метода является то, что такой аккорде-
он обычно привязан к одной странице сайта.

Тем не менее при проектировании сайта можно создать такую модель для элемента
«Аккордеон», которая обеспечит создание неограниченного количества этих элемен-
тов, позволит добавить их на любую страницу сайта или удалить оттуда, разместить
в заданном месте страницы и изменять как содержимое, так и внешний интерфейс эле-
мента. При этом все эти действия можно будет выполнять не только через администра-
тивную панель сайта, но и через его интерфейс в личном кабинете администраторов
сайта. Правда, для этого понадобится создать на сайте личный кабинет для админист-
ративного персонала и набор программных модулей, необходимых для редактирования
динамичных элементов «Аккордеон».

Посмотрим на упрощенном примере, как это можно сделать, опустив для простоты из-
ложения реализацию личного кабинета, а показав только формирование модели дина-
минного аккордеона и модулей для ее редактирования. Для этого в приложении в файле
тос1е18.ру создадим несколько моделей.

Чтобы элементы аккордеона можно было разместить на разных страницах сайта, необ-
ходимо создать модель Радез, которая будет хранить наименования страниц сайта (лис-
тинг 3.7).

Листинг 3.7. Модель Радез

#	#################################

#	Модель для имен страниц сайтов #

#	#################################

с1азз Радез(тобеЬз.Мобе!):

пате = тобе!з .СйагЕ!е1б(тах_1епдкй=100,

пи!1=Тгие, Ь1апк=Тгие,
уегЬозе_пате="Имя страницы")
оЬдескз = тобе!з.Мападег

бек __зкг__(зекк) :

гекигп зекк.пате

В этой модели создано всего одно поле: пате — для хранения имени страницы сайта.

Чтобы на одной странице сайта можно было создать несколько элементов «Аккорде-
он», надо создать модель Ассогбкоп_к — она и будет хранить эти элементы (листинг 3.8).

Листинг 3.8. Модель Ассогс1юп_1

#	модель для формирования аккордеона (три блока) #
###################################################
с!азз АссогсПоп_1(тобекз.Мобек):

раде = тобекз.ГогекдпКеу(Радез,

уегЬозе_пате="Страница сайта",
пи!1=Тгие, Ыапк=Тгие,
оп_бекеке=тобекз.САЗСАОЕ)

Ьох = тобекз.СЬагЕкекб(тах_кепдкЬ=1,

пи!1=Тгие, Ыапк=Тгие,
уегЬозе_пате="Блок (Ь,С,К)")
оЬдескз = тобекз.Мападег

бек __зкг__(зекк) :

гекигп зекк.раде

В этой модели созданы два поля:

♦	раде — для связи по первичному ключу с моделью Радез (со страницами сайта);

♦	Ьох — для указания блока (раздела) страницы, в котором будет размещен аккордеон.

В нашем примере поле Ьох будет принимать только три значения: ь — левый блок (ле-
вая панель) страницы, с — центральный блок (центральная панель) страницы, к — пра-
вый блок (правая панель) страницы.
С использованием модели АссогсИоп_1 в любой панели на любой странице сайта можно
будет создавать неограниченное количество элементов «Аккордеон».

Чтобы элементы «Аккордеон» могли иметь несколько вкладок, нужно создать модель
таЬз ассога для хранения вкладок аккордеонов и функцию гепате гаь для изменения име-
ни изображения, загружаемого на вкладку.

Пояснение

Поскольку публичные серверы не принимают имена изображений на кириллице, наша
модель сопровождается функцией автоматического изменения имени файла загружае-
мого изображения, которая создает на сайте удаленного сервера папку с именем 1а1э8,
в которую будут сохраняться загружаемые файлы изображений с именами 1аЬ_<1с1 записи
в БД>.<расширение>.

Программный КОД функции гепате_баЬ И МОДСЛИ ТаЬз_ассог6 приведен В ЛИСТИНГС 3.9.

Листинг 3.9. Функция гепате_(аЬ и модель ТаЬз_ассогс1

^гот бдапдо.бЬ лпрогб тобе!з
лпрогб оз

^гот ииЫ трог Г ии!64

#######################################################

# Функция изменения имени изображения для аккордеона #
#######################################################
6е^ гепате_баЬ (Фпзбапсе, Н1епате) :

ир1оаб_бо = 'ТаЬз'

ехб = ГИепате.зрИб ('.') [-1]

п_гес = 1еп(ТаЬз_асогб.оЬдесбз.а!1())

# получить 16 последней записи из модели

1Г п_гес == 0:
тах_гес = О
е!зе:

тах_гес = ТаЬз_асог6.оЬдес11з .а!1 () . 1азб() .16

тах_16 = тах_гес +1 #16 следующей записи
рйобо = 'ГаЬ_' + збг(тах_16)
И Фпзбапсе.рк: # текущий Ю

Шепате = '{}{}•{}' .^огтаб ( ЧаЬ_', апзбапсе .рк, ехб)
еНГ рйобо: # имя файла - текущий Ю + 1

ГПепате = ’{}.{}’. ^огтаб (рИоТо, ехб)
е!зе: # случайное имя файла

Шепате = ’{}{}•{}' .^огтаб ( ЧаЬ_', иш.64 () .Нех, ехб)
# возвращает полный путь к файлу
гебигп оз.рабй.до1п(ир1оаб_1:о, Шепаше)

##############################################
# модель для формирования вкладок аккордеона #
##############################################
с!азз ТаЬз_асог6(то6е1з.Мобе!):
ассогсНоп = тоЬеЬз .ЕогелдпКеу (АссогсИоп_1,

уегЬозе_пате="Аккордеон",
пи!1=Тгие, Ыапк=Тгие,
оп_с1е1еЕе=тос1е1з .САЗСАОЕ)

ЫЕ1е_ЬЕп = тоЬеЬз .СкагЕ1е1с1(тах_1епд1±1=100,

пи!1=Тгие, Ь1апк=Тгие,

уегЬозе_пате="Заголовок кнопки")

ЫЕ1е_ЕаЬ = тоЬеЬз .СЬагЕ1е1с1(тах_1епд1±1=100,

пи!1=Тгие, Ыапк=Тгие,

уегЬозе_пате="Заголовок вкладки")

ЕехЕ_ЕаЬ = тоЬеЬз .ТехЕЕ1е1с1(тах_1епд1±1=500,

пи!1=Тгие, Ыапк=Тгие,
уегЬозе_пате="Текст вкладки")
шаде = тоЬеЬз. 1тадеЕ1е1с1 (ир1оас1_ко=гепате_ЕаЬ,
пи!1=Тгие, Ыапк=Тгие,
уегЬозе_пате="Изображение ")

зек_ЬЕп = тоЬеЬз .СкагПеМ (тах_1епд1±=50,

ЬеЕаи1Е=’Ьд-1пЕо Ьд-орасИу-25 ЕехЕ-Ьагк Гз-6',

пи!1=Тгие, Ыапк=Тгие,
уегЬозе_пате="Параметры кнопки" )
зек_ЕехЕ = тоЬеЬз .СкагЕ1е1с1(тах_1епд1±1=50,

ЬеЕаи1Е='Ьд-зиссезз Ьд-орас1Ьу-25 Гехк-мЫЬе Ез-6’,

пи!1=Тгие, Ыапк=Тгие,
уегЬозе_пате="Параметры текста")
Ипк = тоЬеЬз .СЬагЕ1е1с1(тах_1епд1±1=300,
пи!1=Тгие, Ь1апк=Тгие,
уегЬозе_пате="Ссылка")

оЬдескз = тоЬеЬз.Мападег

ЬеЕ __зкг__(зеИ) :

гекигп зеИ.ЕИ1е_ЬЕп

В модели таЬз асогь созданы следующие поля:

♦	ассогсНоп---поле ДЛЯ СВЯЗИ ПО первичному ключу С моделью АссогсНоп_1;

♦	ыые ььп — текст заголовка кнопки аккордеона;

♦	ыые ьаь — текст заголовка вкладки аккордеона;

♦	Еехь ьаь — текст вкладки аккордеона;

♦	шаде — изображение на вкладке аккордеона;

♦	зеь ььп — параметры внешнего вида кнопки;

♦	зеь ьехЕ — параметры внешнего вида текста;

♦	Ипк — ссылка для обращения к внешним ресурсам Интернета.

Обратите внимание на импорт дополнительных модулей оз и ии1с14 — они необходимы
ДЛЯ работы функции гепате ЕаЬ.

В примере нашей модели мы покажем на вкладке аккордеона текст, изображение и
ссылку на внешние ресурсы Интернета. Надо также иметь в виду, что у этой модели —
в зависимости от характера разрабатываемого приложения — может быть и совершен-
но другой набор полей.

Не забудьте выполнить процедуру миграции:

руГЬоп тападе.ру такетгдгакгопз
руккоп тападе.ру тгдгаке

Чтобы созданные модели можно было заполнять данными через административную
панель В)ап§о, их нужно зарегистрировать в файле ас1гп1п.ру текущего приложения:

Ргот сЦ апдо.сопкггЬ ттрогк абтгп

Ргот .тойеФз трогк АссогсИоп_1, Радез, ТаЬз_асогс1

#	Регистрация модели АссогсИоп_1
аатгп.згке.гедгзкег(Радез)

#	Регистрация модели АссогсИоп_1

асЗтгп. злке. гедгзкег (АссогсИоп_1)

#	Регистрация модели ТаЬз_асогс1

асЗпап. злке. гедгзкег (ТаЬз_асогс1)

Впрочем, если планируется заполнять эти модели данными только через интерфейс
пользователя, то их можно и не регистрировать в файле ас1т1п.ру.

Чтобы заполнять аккордеон данными через интерфейс пользователя, нам понадобятся
две формы: для заполнения сведений об аккордеоне и для заполнения данными вкладок
аккордеона. Для этого в файле Гоггпз.ру создадим формы Ассогагогт и таЬ асога гогт (лис-
тинг 3.10).

Листинг 3.10. Формы Ассогс1Еогт и ТаЬ_асогс1_Еогт

Ргот сЦапдо гтрогк Рогтз

Ргот .тос!е1з трогк АссогсИоп_1, ТаЬз_асогс1

#	##########################################

#	Форма для создания/изменения аккордеона #
###########################################
с!азз Ассогагогт(когтз .Мос1е1Гогт) :
с!азз Мека:

тос!е1 = АссогсИоп_1
# Исключить поле из ввода
ехс!ис1е = [' раде' ]

#	Форма для создания/изменения вкладки аккордеона #

с!азз ТаЬ_асога_Гогт(когтз .Мос1е1Гогт) :
с!азз Мека:

тос!е1 = ТаЬз_асогс1

#	Исключить поле из ввода

ехс!ис1е = [ ’ассогсИоп’ ]
#	назначаем полю другой виджет

мЫдекз = {'к1к1е_Ыт' : Рогшз.Техкагеа (а-Ыдгз={1 гомз’: 1, ’со1з’: 50}),
Т1С1е_ЬаЬ': Рогтз.Техкагеа (аТ11гз={1 гомз1 : 1, ’со1з’: 50}),
'Гехк_каЬ': Рогтз .Техкагеа (а-Ыггз={1 гомз1 : 10, ’со1з’: 50}),
'зеГ_ЬГп': Рогтз .Техкагеа (аТ11гз={' гомз' : 1, ’со1з’: 50}),
’зеГ_ГехГ': Рогтз .Техкагеа (а-Ыдгз={' гомз': 1, ’со1з’: 50})}

Эти формы используют модели АссогсПоп_1 И ТаЬз асогй, при ЭТОМ ПОЛЯ раде И ассогсПоп
исключаются из полей, доступных для ввода и корректировки.

Откроем административную панель и для текущего приложения создадим страницу
с именем Примеры — на ней мы станем размещать динамичные элементы интерфейса
«Аккордеон» (рис. 3.4).

Рис. 3.4. Создание страницы Примеры в административной панели

3.2.1. Программные модули

для создания динамичных элементов «Аккордеон»

Чтобы получить возможность в интерфейсе сайта создавать элементы «Аккордеон»,
необходимо сформировать следующий набор модулей:

♦	для редактирования динамичного аккордеона;

♦	для добавления динамичного аккордеона;

♦	для обновления динамичного аккордеона;

♦	для удаления динамичного аккордеона.

Код представления (у1еду) ассогй еспг для редактирования динамичного аккордеона при-
веден в листинге 3.11.

Листинг 3.11. Представление (у|еуу) ассогб есШ

#################################

#	Создание/изменение аккордеона #

#	################################

йе! ассогс!_ес11Г (гедиезГ) :

#	1(1 текущей страницы и сама страница

1с1_раде = 1

Гек_раде = Радез. оЬд ескз. дек (1с1=1с1_раде)
#	получить аккордеоны текущей страницы

ассогбз = Ассогббоп_1 .оЬдескз. Ы1кег (раде_1б=1б_раде)

#	показать таблицу с аккордеонами

сопкехк = {"ассогбз": ассогбз, "кек_раде": кек_раде}

гекигп гепбег(гедиезк, "тазкег/д1ача_3/ассогб_еб1к.Ькт1", сопкехк)

В этом представлении в объект кек раде загружена текущая страница на основе ее иден-
тификатора в БД (м раде), а в объект ассогбз из БД загружены все аккордеоны текущей
страницы. Эти объекты через словарь сопкехк передаются в шаблон ассогс1_ес1И.И{т1, код
которого приведен в листинге 3.12.

Листинг 3.12. Шаблон ассогс!_есШ:.Ыт1

{% ехкепбз "зЬор/Ьазе.Ькт!" %}

{% Ыоск Ьеабег %}

<61V с1азз=”гом кехк-зкагк тх-2">

<ЬЗ>Динамичный аккордеон</ЬЗ>

</бЫ>

{% епбЫоск Ьеабег %}

{% Ыоск сопкепк%}

<61V Ыазз=”гом кехк-зкагк тх-2">

<Ь4>Редактор аккордеонов</Ь4>

<р>Выбрана страница сайта: {{кек_раде.паше}}</р>

</бЫ>

<61V Ыазз=”гом кехк-зкагк 1Ь-2 тх-2">

<6Ы с1азз="со1-2">

<а Ьгек=”{% иг! 'тазкег:ассогб_абб' %}" с1азз="Ькп Ькп-рг1тагу”>

<1 с1азз=”Ы Ы-бакаЬазе-абб кз-5"></1> Добавить аккордеон</а>

</бЫ>

</б1Ч>

<61V Ыазз="гом кехк-зкагк тх-2">

<6Ы с!азз="со1-6">

<р>Параметры аккордеона</р>

<61V зку1е="очегЬ1ом: зсго11; ">

<каЫе с!азз="каЫе каЫе-гезропзЫе
каЫе-зкЫреб каЫе-Ьогбегеб кехк-зкагк каЫе-зиссезз">
<кЬеаб>

<кг>

<кЬ>1б</кЬ>

<кЬ>Страница сайта</кЬ>

<кЬ>Блок (Ь,С,К)</кЬ>

<кЬ>Редактировать</кЬ>

</кг>

</кЬеаб>
{% бог оЬд 1п ассогбз %}

<бЬобу>

<бг>

<бб> {{оЬз . бб }}</бб>

<бб>{{ оЬд.раде }}</бб>

<бб>{{ оЬд.Ьох }}</бб>

<бб>

<а Ьгеб="{% иг1 'тазбег:ассогб_ырб' 1с1=оЬз. 1с1 %}"
с!азз="Ьбп Ьбп-зиссезз Ьбп-зт ту-1">

<1 с1азз="Ы Ы-гереаб"></1> Изменить</а>

<а Ьгеб="{% иг1 'тазбег:ассогб_бе1' 1с1=оЬз. 1с1 %}"
с1азз="Ьбп Ьбп-бапдег Ьбп-зт ту-1">

<1 с1азз="Ы-бгазИЗ"></1> Удалить</а>

<а Ьгеб="{% иг1 'тазбег:ас_баЬз_еб1б' 1б=оЬд.1б %}"
с1азз=”Ыт Ьбп-ргбтагу Ыт-зт ту-1">

<1 с1азз=”Ы Ы-гереаб"></1> Редактор вкладок</а>

</бб>

</бг>

</бЬобу>

{% епббог %}

</Ше>

</сЫу>

</66у>

</66у>

{% епбЫоск сопбепб%}

В этом шаблоне создана кнопка добавить аккордеон, которая активирует представление
с именем ассогб_абб по следующей ссылке:

<а Ьгеб="{% иг1 'тазбег:ассогб_абб' %}" с!азз="Ьбп Ьбп-ргбтагу">

<1 с1азз="Ы Ы-бабаЬазе-абб Рз-5"></1> Добавить аккордеон</а>

После этой кнопки идет таблица, в которой отображается информация о созданных
аккордеонах, — в каждой ее строке имеются три кнопки:

♦	изменить — для изменения сведений об аккордеоне;

♦	Удалить — для удаления аккордеона;

♦	Редактор вкладок — для редактирования вкладок аккордеона (добавления, изменения,
удаления).

Эти КНОПКИ активируют представления С именами ассогб ирб, ассогб бе!, ассогб ирб И
ас_баь_еб1б по следующим ссылкам:

<а Игеб="{% иг1 'тазбег:ассогб_ирб' 1б=оЬд.1б %}"

с1азз="Ьбп Ьбп-зиссезз Ьбп-зт ту-1">

<1 с1азз="Ы Ы-гереаб"></1> Изменить</а>

<а Ьгеб="{% иг1 'тазбег:ассогб_бе1' 1б=оЬд.1б %}"

с1азз="Ьбп Ьбп-бапдег Ьбп-зт ту-1">

<1 с1азз="Ы-бгазЬЗ"></1> Удалить</а>
<а ЬгеР="{% иг1 ’тазРег :ас_РаЬз_есИР' 1с1=оЬз. 1с1 %}"
с!азз="ЬРп ЬРп-ргтагу ЬРп-зт ту-1">

<1 с1азз=”Ы Ы-гереаР"></1> Редактор вкладок</а>

Код представления ассогй ааа приведен в листинге 3.13.

Листинг 3.13. Представление (у|еш) ассогс1_ас1с1

######################
# Добавить аккордеон #
######################

6еР ассогб_а66(гедиезР):

# возврат после ввода данных

РР гедиезР.теРАоб == "РОЗТ":

Рогт = Ассог6Еогт(гедиезР.Р03Т, гедиезР.ЕТЬЕЗ)

# получить 16 текущей страницы

16_раде = гедиезР.зеззРоп['16_раде']

1Р Рогт.Рз_ча116():

#	создание в БД новой записи об объекте

АссогсПоп_1.обдесРз.сгеаРе(

Ьох=Рогт.с1еапеб_6аРа.деР('Ьох'),

раде_Р6=16_раде)

геРигп гесИгесР(гечегзе('тазРег:ассогб_е61Р'))
е!зе:

#	возврат к форме для исправления ошибок

геРигп гепбег(гедиезР, 'тазРег/а66_ирб_Рогт.]1Рт1’, {'Рогт’: Рогт})

е!зе:

#	Формирование формы для ввода данных

Рогт = АссогбЕогт()
сопРехР = {'Рогт': Рогт}
# шаблон с формой для ввода/корректировки
геРигп гепбег(гедиезР, 'тазРег/а66_ирб_Рогт.НРтР', сопРехР)

В этом представлении создается объект Рогт, в который загружается форма АссоЫЕогт().
Эта форма через словарь сопРехР передается в универсальный шаблон ас1с1_ирс1_Гогт.К1т1,
код которого приведен в листинге 3.14.

Листинг 3.14. Универсальный шаблон ас!с1_ирс1Тогт.Ыт1

{% ехРепбз "зЬор/Ьазе.ЬРт!" %}

{% Ыоск сопРепР %}

<Рогт асР1оп="" теРЬоб="розР" епсРуре="ти1РРрагР/Рогт-6аРа">

{% сзгР-Рокеп %}

<РаЫе Ыазз="РехР-зРагР">

{{ Рогт.аз_РаЫе }}

</РаЫе>

<а ЬгеР="дачазсгРрР:ЫзРогу.до (-1)" с!азз="ЬРп ЬРп-зиссезз ЬРп-зт">

<1 с!азз="Ы Ы-аггом-1еРР-здиаге"></1> Отмена</а>
<1прик куре="зиЬт1к" с1азз="Ькп Ькп-рглпагу Ькп-зт" ча1ие="Сохранить">

<1 с1азз=”Ы Ы-бакаЬазе-абб кз-3"></1>

</когт>

{% епбЫоск %}

Этот шаблон представляет форму, в которой в виде таблицы отображаются поля для
ввода данных: { 1огт.аз_каЬ1е }. Здесь же имеются две кнопки: Отмена — для отмены
сохранения введенной информации и возврата к предыдущему окну и сохранить — для
сохранения введенной информации и возврата к предыдущему окну.

При возврате из этой формы в представление ассогб_абб там происходит сохранение
в БД сведений о динамичном аккордеоне.

Код представления ассогб_ирб приведен в листинге 3.15.

Листинг 3.15. Представление (у|еш) ассогс1_ирс1

######################

# Обновить аккордеон #

######################

бек ассогб_ирб(гедиезк, 1а):

#	получение сведений об объекте из БД
оЬд = дек_оЬдеск_ог_404(Ассог61оп_1, 16=16)

#	получить 16 текущей страницы

#	возврат после ввода данных

1	к гедиезк.текйоб == "РОЗТ":

Бопп = Ассог6Еогт(гедиезк.Р03Т, гедиезк.ПЬЕЗ, 1п1Ыа1={
'Ьох': оЬд.Ьох,
})

1к когт.1з_чаИ6() :

#	получение сведений об объекте формы после корректировки данных
оЬ].Ьох = Рогт.с1еапеб_бака.дек('Ьох')

#	сохранение изменений об объекте в БД
оЬд.заче()

гекигп гебФгеск(гечегзе('тазкег:ассог6_е61к'))
е1зе:

#	возврат к форме для исправления ошибок

гекигп гепбег(гедиезк, 'тазкег/а66_ирб_когт.йкт1', {'когт': когт})
е1зе:

# загрузка в форму сведений об объекте

когт = Ассог6Еогт(1пзкапсе=оЬд)
сопкехк = {'когт': когт}

# шаблон с формой для ввода/корректировки слайда
гекигп гепбег(гедиезк, 'тазкег/а66_ирб_когт.йкт1', сопкехк)

Это представление получает идентификатор редактируемого аккордеона (1б), на основе
которого в объект оЬ] из БД загружаются сведения об этом аккордеоне. После чего соз-
дается объект когт, в который загружается форма АссогбгогтО с информацией о текущем
аккордеоне. Эта форма через словарь сопбехб передается в универсальный шаблон
ас1с1_ирс1_1:огт.И1т1. При возврате из этого универсального шаблона-формы в представле-
ние ассогб_ирс1 там происходит сохранение в БД сведений о динамичном аккордеоне.

Код представления ассогб_бе1 приведен в листинге 3.16.

Листинг 3.16. Представление (у|еш) ассогс1_с1е1

#	#####################

#	Удалить аккордеон #

#	#####################

(ЛеГ ассогб_6е! (гесрезб, 16):

#	загрузить текущий объект по 66

оЬд = деб_оЬдесб_ог_404(Ассог61оп_1, 16=16)

#	возврат из формы

бб гедиезб.тебЬоб == "РОЗТ":

бб 'уез' бп гедиезб.РОЗТ:

# удаление сведений об объекте из БД

Ассогббоп_1.оЬзесбз.деб(16=16).бебебе()
гебигп геббгесб(геуегзе('тазбег:ассогб_еббб'))

#	загрузка в сопбепб сведений об объекте

6x61 = 'Будет удален аккордеон'

6е1_рго6 = оЬз.66

сопбепб = {"6x61": 6x61, "6е1_рго6": 6е1_рго6}

#	вызов шаблона подтверждения/отмены удаления

гебигп гепбег(гедиезб, "тазбег/6е1_уезпо.Ьбтб", сопбепб)

Это представление получает идентификатор удаляемого аккордеона (бб), на основе ко-
торого в объект оЬд из БД загружаются сведения об этом аккордеоне. После чего в объ-
ект бе! ргоб загружается идентификатор удаляемого аккордеона, который через словарь
сопбепб передается в универсальный шаблон с1е1_уе8по.И1т1.

Код шаблона с1е1_уе8по.Ыт1 приведен в листинге 3.17.

Листинг 3.17. Шаблон 6е1_уе8по.Ыт1

{% ехбепбз "зЬор/Ьазе.Ьбтб" %}

{% Ыоск сопбепб %}

<Тогт асббоп="" тебЬоб="розб">

{% сзгб_бокеп %}

<66у с!азз="бехб-збагб">

<Ь6>{{ 6x61 }}</Ь6>

<Ь6>{{ 6x62 }}</Ь6>

<Ь6>{{ 6е1_рго6 }}</Ь6>

<Ь5>Удалить запись из БД?</Н5>

</61У>

<66 V с!азз="со1-3 бехб-збагб тх-2">

<Ьиббоп с!азз="Ьбп Ьбп-зиссезз Ьбп-зт" пате="по" опсИск="Ызбогу.Ьаск() ">

<-Отмена

</Ьиббоп>
<	!— Простая кнопка для удаления—>

<1приГ Руре="зиЬт1к” пате="уез" с1азз="Ыт Ыт-ргтагу ЬСп-зт” уа!ие=”Удалить">

<	!— Кнопка для удаления с крутящимся спином—>

сЬиГкоп Куре="зиЬт1К” с1азз="Ыт Ыт-зиссезз Ыт-зт Кодд1е-КехК" пате="уез">

<зрап><1 с1азз=”Ы Ы-кгазЬЗ"></1> Удалить</зрап>

<зрап с1азз="Ыс!с1еп зртппег-ЬогНег зртппег-ЬогНег-зт”
го1е=”зКаКиз” аг1а-Н1(1с1еп="11гие"></зрап>

<	/ЬиККоп>

</сПу>

</Хогт>

<!— Скрипт для вращения спина на кнопке —>

<зсг!рК>

$ (’. МсИеп') . гетоуеСХазз (1 Мсйеп1) . НМе ();

$ (’ . ГоддХе-кехР ’) . сХХск (кцпскХоп () {

$ (кМз) . кХпЩ ’зрап’) .еасИ(ХипскХоп() { $ (кМз) .коддХе (); });

});

</зсгХрк>

{% епбЫоск сопкепк %}

Этот шаблон представляет форму, в которой отображается идентификатор удаляемой
записи и имеются две кнопки:

♦	отмена — для отмены удаления аккордеона;

♦	Удалить — для подтверждения удаления аккордеона.

Кроме того, указанный шаблон содержит скрипт для отображения на кнопке вращаю-
щегося спина в том случае, если процесс удаления записи из БД занимает продолжи-
тельное время.

По нажатию на эти кнопки происходит возврат в представление ассога ае!, где в случае
нажатия на кнопку удалить выполняется удаление информации об аккордеоне из БД.

Для того чтобы можно было активировать описанные здесь представления, нужно
в файле иНв.ру создать соответствующие ИКБ-маршруты (листинг 3.18).

Листинг 3.18. Маршруты для редактирования динамичных аккордеонов

ракк (’ дХауа_3/ассогс!_ес1Хк/', уХемз. ассогс1_ес1Хк, пате= ’ ассогс!_ес1Хк'),

ракк( 'дХауа_3/ассогс!_ас1с1/', уХемз. ассогс1_ас1с1, пате=' ассогс!_ас1сГ ),

ракк (' дХауа_3/ассогс!_ирс1/<Хпк: 1с1>/', уХемз. ассогс!_ирс1л пате= ’ ассогс!_ирс1'),

ракк (' дХауа_3/ассогс!_с1еХ/<Хпк: 1с1>/', уХемз. ассогс1_с1еХл пате=' ассогс!_с1еХ'),

Код представления для редактирования вкладок аккордеона ас_каЬз_еахк приведен в лис-
тинге 3.19.

Листинг 3.19. Представление асТаЬзесШ

#########################################

#	Создание/изменение вкладок аккордеона #

#	Хс1 - идентификатор аккордеона	#

#########################################
с!еГ ас_каЬз_е61к (гедиезк, йб) :

бк йб == 0:

# восстановить 66 аккордеона

16 = гедиезк.зеззбоп[’16_ассогб']

#	16 текущей страницы и сама страница

16_раде = 1

кек_раде = Радез. оЬд ескз. дек (16=16_раде)

гедиезк.зеззкоп['16_ассогб'] = 16

#	получить вкладки текущего аккордеона

каЬз = ТаЬз_асогб.оЬдескз.Ы1кег (ассог61оп_16=16)

#	показать таблицу с вкладками аккордеона

сопкехк = {"каЬз”: каЬз, ”кек_раде”: кек_раде, ”16”: 16}

гекигп гепбег(гедиезк, "тазкег/д1ача_3/ас_каЬз_е61к.Ькт1", сопкехк)

Это представление получает идентификатор родительского аккордеона (ы), затем в нем
создаются объект 16_раде (идентификатор текущей страницы) И объект кек_раде, в кото-
рый из БД загружается сама текущая страница. В объект каЬз из БД загружаются вклад-
ки родительского аккордеона. Все созданные объекты через словарь сопкехк передаются
в шаблон ас_{аЬ8_ес1К.И{т1, код которого приведен в листинге 3.20.

Листинг 3.20. Шаблон ас_1аЬ8_ес1й.Ыт1

{% ехкепбз "зЬор/Ьазе.Ькт!" %}

{% Ыоск Ьеабег %}

<61ч с1азз="гом кехк-зкагк тх-2">

<Ь4>Динамичный аккордеон</к14>

</61ч>

{% епбЫоск Ьеабег %}

{% Ыоск сопкепк%}

<6Ы с!азз="со1-1 ту-1 тх-2">

<	а Ьгек="{% иг! ’тазкег:ассогб_еб1к' %}"
с!азз="Ькп Ькп-зиссезз Ькп-зт">

<1 с!азз="Ы Ы-аггом-1екк-здиаге"></1> Назад</а>

</61Ч>

<6Ы Ыазз="гом кехк-зкагк тх-2">

<Ь4>Редактор вкладок аккордеона</Ь4>

<р>Выбрана страница сайта: {{кек_раде.паше}}</р>

<р>Выбран аккордеон (бб): {{16}}</р>

</6Ы>

<6Ы Ыазз="гом кехк-зкагк 1Ь-2">

<6Ы с!азз="со1-2 тх-2">

<а Ьгек="{% иг! 'тазкег:каЬ_ассогб_а66' %}" с1азз="Ькп Ькп-рг1тагу”>

<1 с!азз="Ы Ы-бакаЬазе-абб кз-5"></!> Добавить вкладку</а>
</с1гу>

</с1гу>

<сИу с1азз="гом РехР-збагР">

<с11у с1азз=”со1-11 шх-2”>

<р>Параметры вкладок</р>

<с11у збу1е="оуегР1ом:зсго11;">

<1аЫе с1азз=”РаЬ1е РаЬТе-гезропзгуе РаЫе-збггрес!
РаЬТе-Ьогбегеб Рехб-збаН; РаЫе-зиссезз">
<РЬеас1>

<Рг>

<Ш>№ пп</Ш>

<Ш>Заголовок кнопки</1±>

<1±>3аголовок вкладки</1±1>

<РН>Текст вкладки</1±1>

<Ш>Изображение</РН>

<1±>Параметры кнопки</1±>

<1±>Параметры текста</1±>

<РЬ>Ссылка</РЬ>

<1±>Редактировать</1±>

</Рг>

</РЬеас1>

{% Рог оЬд 1п РаЬз %}

<РЬобу>

<Рг>

<	Ы> {{РогТоор. соипкег }} </Рс1>
<!— Заголовок кнопки —>
<Ы>{ { оЬ] . Р1Р1е_ЬРп }}</Рс1>
<!— Заголовок вкладки —>
<Ы>{{ оЬз . Р1Р1е_РаЬ }}</Рс1>
<!— Текст вкладки—>

<	Ы>{{ ок^.РехР_РаЬ }}</Рс1>

<	!— Изображение —>
{% 1Р оЬ].1таде %}

<Рбх1тд згс=”{{ оЬд .нпаде.иг! }}" а1Р="соппесб”
зРу1е=”тах-ке1дИР: 100рх"></бс1>

{% е!зе %}

<Рбх/Рб>

{% епсНГ %}

<	!— Параметры кнопки —>

<	Ы>{ { оЬд . зеб_ЬРп }} </Рс1>

<	!— Параметры текста —>

<	Ы>{{ оЬ^зеб-РехР }}</Рс1>

<	!— Кнопка со ссылкой —>

{% 1Р оЬд .Ипк %}

<Ы>{ { оЬ^.Ипк } }</Рс1>

{% е!зе %}

<Рбх/бб>

{% епсНГ %}
<!— Кнопки —>

<кб>

<а йгек="{% иг1 'тазкег:каЬ_ассогб_ирб' 1с1=оЬз. 1с1 %}"
с!азз="Ькп Ькп-рггтагу Ькп-зт ту-1">

<1 с1азз=”Ы Ы-гереак"х/1>Изменить</а>

<а йгек="{% иг1 'тазкег:каЬ_ассогб_бе1' 1с1=оЬз . 1с1 %}"
с!азз="Ькп Ькп-бапдег Ькп-зт ту-1">

<1 с1азз="Ы-кгазЬЗ"х/к> Удалить</а>

</кб>

</кг>

</кЬобу>

{% епбког %}

</каЬ1е>

</сНу>

</сНу>

</6Ы>

{% епбЫоск сопкепк%}

Этот шаблон содержит кнопку добавить вкладку и таблицу для отображения параметров
вкладок. Кнопка добавить вкладку активирует маршрут для вызова представления
1аЬ_ассогс1_ас1с1, код которого приведен в листинге 3.21.

Листинг 3.21. Представление 1аЬ_ассогс1_ас1с1

###############################

# Добавить вкладку аккордеона #
###############################
бек каЬ_ассогб_абб(гедиезк):
# возврат после ввода данных
йк гедиезк.теккоб == "РО8Т":
когт = ТаЬ_асогб_Еогт(гедиезк.РО8Т, гедиезк.ПЬЕЗ)
# получить 16 текущего аккордеона
1б_ассогб = гедиезк.зеззгоп['16_ассогб']
йк когт.1з_ча11б():

#	создание в БД новой записи об объекте
ТаЬз_асогб.оЬдескз.сгеаке(

к1к!е_Ькп=когт.с!еапеб_бака.дек('к1к1е_Ькп'),
к1к!е_каЬ=когт.с!еапеб_бака.дек('кгк1е_каЬ'),
кехк_каЬ=когт.с!еапеб_бака.дек('кехк_каЬ'),
ктаде=когт.с!еапеб_бака.дек('гтаде'),
зек_Ькп=когт.с1еапеб_бака.дек('зек_Ькп'),
зек_кехк=когт.с!еапеб_бака.дек('зек_кехк'),
ИпкЫогт. с1еапеб_бака. дек (' Ипк'),
ассог61оп_16=16_ассогб)

гекигп геббгеск(гечегзе('тазкег:ас_каЬз_еб1к', агдз=(0,)))

е!зе:

#	возврат к форме для исправления ошибок

гекигп гепбег(гедиезк, 'тазкег/аб6_ирб_когт.]1кт1', {'когт': когт})
е!зе:

#	Формирование формы для ввода данных
Рогт = ТаЬ_асогб_Еогт()
сопРехР = {'Рогт': Рогт}

#	шаблон с формой для ввода/корректировки слайда

геРигп гепбег(гериезР, 'тазРег/абб_ирб_Рогт.НРт!', сопРехР)

В этом представлении на основе формы таЬ_асогб_Еогт() создается объект Рогт, который
через словарь сопРехР передается в универсальный шаблон-форму ас1с1_ирс1_Гогт.И1т1. При
возврате из этой формы в БД в таблице табз асогб создается новая запись с параметрами
вкладки аккордеона.

В каждой строке таблицы шаблона ас_1аЬ8_ес1|Шт1 имеются две кнопки:

♦ изменить — для изменения (обновления) информации о вкладке аккордеона;

♦ Удалить — для удаления вкладки аккордеона.

Эти кнопки активируют маршруты с именами: РаЬ_ассогб_ирб — вызывает представление
для обновления информации на вкладке аккордеона и РаЬ_ассогб_бе1 — вызывает пред-
ставление для удаления вкладки аккордеона.

Код представления РаЬ_ассогб_ирб приведен в листинге 3.22.

Листинг 3.22. Представление 1аЬ_ассогс1_ирс1

###############################
# Обновить вкладку аккордеона #
###############################
беБ БаЬ_ассог6_ирб(гедиезБ, 16):

#	получение сведений об объекте из БД
оЬд = деб_о^есБ_ог_404 (ТаЬз_асогб, 16=16)

#	возврат после ввода данных

1Е гедиезб.тебйоб == "РОЗТ":

Рогт = ТаЬ_асогб_Еогт(гедиез11.Р03Т, гедиезб.ЕТЬЕЗ, 1П1Г1а1={
'б1б1е_ЬБп': оЬд.Б1Б1е_Ы1п,

'Б1Б1е_БаЬ': обд.Б1Б1е_БаЬ,

'БехБ_БаЬ': оЬд.БехБ_БаЬ,

'бтаде': об].бтаде,

'зеб_ЬБп': обд.зеб_ЬБп,

'зеб-БехБ': оЬд.зеб_БехБА
'Ипк': оЬд.ббпк
})

бб Гогт.бз_ча1бб() :

#	получение сведений об объекте формы после корректировки данных

оЬд.Б1Б1е_ЬБп = Рогт.с1еапе6_6аба.деб('БбБ1е_ЬБп')

оЬд.Б1Б1е_БаЬ = Рогт.с1еапе6_6аба.деб('БбБ1е_БаЬ')

оЬд.БехБ_БаЬ = Рогт.с1еапе6_6аба.деб('БехБ_БаЬ')

оЬд.бтаде = Рогт.с1еапе6_6аба.деб('бтаде')

оЬд.зеб-ЬБп = Рогт. с1еапе6_6аба.деб('зеб_ЬБп')
оЬ].5еб_бехб = Богт.сБеапеб_баба.деб ('зеб_бехб')

оЬд.Ипк = Богт.с1еапеб_баба.деб('1Бпк')

#	сохранение изменений об объекте в БД
оЬд.зауе()

гебигп гебБгесб (геуегзе ('тазбег:ас_баЬз_ебБб', агдз=(0,)))
е1зе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, 'тазбег/абб_ирб_Богт.НбтБ', {'Богт': Богт})
е!зе:

#	загрузка в форму сведений об объекте

Богт = ТаЬ_асогб_Еогт(Бпзбапсе=оЬд)
сопбехб = {'Богт': Богт}

# шаблон с формой для ввода/корректировки

гебигп гепбег(гедиезб, ' тазбег/абб_ирб_Богт.Нбт1', сопбехб)

Это представление получает идентификатор текущей вкладки аккордеона (Бб), загружа-
ет в объект оЬд из БД все параметры текущей вкладки и через форму таЬ асогб Еогт зано-
сит параметры текущей вкладки в объект Богт. Затем форма Богт через словарь сопбехб
передается в универсальный шаблон-форму ас1с1_ирс1_(огт.111т1. При возврате из этой
формы в БД в таблице табз асогб обновляется запись с параметрами вкладки аккордеона.

Код представления БаЬ_ассогб_бе1 приведен в листинге 3.23.

Листинг 3.23. Представление 1аЬ_ассогс1_с1е1

##############################

# Удалить вкладку аккордеона #

##############################

беБ БаЬ_ассогб_бе1(гедиезб, Бб) :

#	загрузить текущий объект по Бб

оЬд = деб_оЬдесб_ог_404(ТаЬз_асогб, Бб=Бб)

#	возврат из формы

ББ гедиезб.теббоб == "РОЗТ":

ББ 'уез' Бп гедиезб.РОЗТ:

# удаление сведений об объекте из БД

ТаЬз_асогб.оЬдесбз.деб(Бб=Бб).беБебе()

гебигп гебБгесб(геуегзе('тазбег:ас_баЬз_ебБб', агдз=(О,)))

#	загрузка в сопбепб сведений об объекте

6x61 = 'Будет удалена вкладка аккордеона'

бе!_ргоб = оЬз.бБб!е_Ьбп

сопбепб = {"6x61": 6x61, "бе!_ргоб": бе!_ргоб}

#	вызов шаблона подтверждения/отмены удаления

гебигп гепбег(гедиезб, "тазбег/беБ_уезпо.Нбт1", сопбепб)

Это представление получает идентификатор текущей вкладки аккордеона (Бб) и загру-
жает в объект оЬд из БД все параметры текущей вкладки. Затем в объект бе1_ргоб загру-
жается имя кнопки вкладки аккордеона, и оно через словарь сопбехб передается в уни-
версальную форму-шаблон с1е1_уе8по.И1т1 (см. листинг 3.17). Если в этом шаблоне была
нажата кнопка Удалить, то текущая вкладка будет удалена из БД.

Для активации всех этих представлений, обеспечивающих редактирование вкладок
аккордеона, нужно в файле иг1з.ру создать соответствующие маршруты (листинг 3.24).

Листинг 3.24. Маршруты для редактирования вкладок динамичных аккордеонов

#	Создание элементов - вкладки аккордеона --------------

рабЬ (' ас_ГаЬз_есИС/<1пр: 1с1>/', чгемз. ас_ЬаЬз_есНС, пате=' ас_бабз_еб1б ’),

#	Добавить вкладку аккордеона

рабЬ (' баЬ_ассогб_аб6/ ’, чбемз. 1:аЬ_ассог6_а66, паше=' баЬ_ассогб_аб6'),

#	Обновить вкладку аккордеона

рабЬ (’ ГаЬ_ассог6_ир6/<1пР: □_(}>/', у1емз. баЬ_ассогб_ирб, пате= ’ баЬ_ассогб_ирб ’),

#	Удалить вкладку аккордеона

рабЬ (' РаЬ_ассогб_бе1/<1пб: 1с1>/', утемз. ПаЬ_ассог6_6е1л пате= ’ баЬ_ассогб_бе1 ’),

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

Итак, мы создали все модули, которые позволяют сформировать как динамичный ак-
кордеон, так и его вкладки. Теперь покажем, как динамичный аккордеон можно вывес-
ти на страницу сайта. Для этого создадим тестовую страницу (шаблон) ехатр1е8_1.И1т1
и соответствующие маршрут и представление.

Код представления ехатр1ез_1 приведен в листинге 3.25.

Листинг 3.25. Представление ехатр1ез_1

############

# Пример 1 #

############

бе^ ехатр1ез_1(гесрезб):

# Аккордеон левого блока (Ьох='Ь')
баЬз = Попе

ассогбз = АссогсПоп_1 .оЬдесбз.НТбег(раде_1б=1, Ьох=’Ь’)

6Г 1еп(ассогбз) == 1:

ассогбз = Ассогб1оп_1.оЬдесбз. деб(раде_1б=1, Ьох=’Ь’)

# Получить вкладки аккордеона

бабз = ТаЬз_асогб.оЬ]есбз.П1бег (ассогб1оп_1б=ассогбз.1б)

# Аккордеон среднего блока (Ьох='С)
баЬз2 = Попе

ассогбз = Ассогб1оп_1 .оЬдесбз.бНбег(раде_1б=1, Ьох=’С’)

6Г 1еп(ассогбз) == 1:

ассогбз = Ассогб1оп_1.оЬдесбз.деб(раде_бб=1, Ьох=’С’)

# Получить вкладки аккордеона

ГаЬз2 = ТаЬз_асогб.оЬдесбБ ЛИрег (ассогббои_бб=ассогбз .16)

# Аккордеон правого блока (Ьох='К')
ГаЬзЗ = Попе
ассогбз = АссогсИоп_1 .оЬ^ескз. Шкег (раде_1с1=1, Ьох=’К’)

1Г 1еп(ассогбз) == 1:

ассогбз = АссогсПоп_1.оЬдескз .дек (раде_1с1=1, Ьох=’К’)

# Получить вкладки аккордеона

каЬзЗ = ТаЬз_асогс1.оЬзескз. ЛПкег (ассогсПоп_1с1=ассогс1з .16)

сопкехк = {'каЬз': каЬз, 'каЬз2': каЬз2,
’каЬзЗ’: каЬзЗ}

гекигп гепбег(гедиезк, ’тазкег/д1ача_3/ехатр1ез_1 .Ькт1’, сопкехк)

В этом представлении создаются три объекта: каЬз, каЬз2 и каЬзЗ, в которые загружаются
вкладки аккордеонов соответственно левого блока (левой панели), центрального блока
(центральной панели) и правого блока (правой панели). Все эти объекты через словарь
сопкехк передаются в шаблон ехатр1е8_1 .К1т1.

Для активации представления ехатр1ез_1 в файле иНз.ру нужно создать ИКБ-маршрут
(листинг 3.26).

Листинг 3.26.11КЬ-маршрут с именем ехатр1е$_1

ракЬ(’д1ача_3/ехатр1ез_1/', члемз.ехатр1ез_1, пате='ехатр1ез_1'),

Код шаблона ехатр1е8_1 .И1т1 приведен в листинге 3.27.

Листинг 3.27. Шаблон ехатр1е8_1.Мт1

{% ехкепбз "зЬор/Ьазе.ЬктГ’ %}

{% Ыоск раде %}

«Нч с1азз="сопка1пег-Г1и16 р-1" зку1е="Ьаскдгоипс1-со1ог :гдЬ (224, 255, 255) ;">

<сИч с1азз="гом"> <!— Это начало строки —>

<!— Это левая панель —>

<сИч с1азз="со1-4 со1-зт-4 со1-тб-4 со1-1д-2 со1-х1-2

кехк-сепкег Ьд-лпко Ьд-орас1ку-25">

<Ь6>Левая боковая панель</Н6>

<!— Показ аккордеона в левой панели—>

{% 1пс1ис1е "радез/ассог(Поп_зНом.Нкт1" %}

</сИч> <!— Конец левой панели —>

<!— Это центральная панель —>

<сИч с1азз="со1-4 со1-зт-4 со1-тс1-4 со1-1д-8 со1-х1-8 кехк-сепкег">

<сПч с1азз="гом кехк-сепкег">

<Ь1>Центральная панель</Н1>

</сИч>

<сПч с1азз="гом кехк-сепкег тх-аико">

<сИч с1азз="со1-12 со1-зт-12 со1-тс1-12 со1-1д-6 со1-х1-4
кехк-сепкег тх-аико">
<!— Показ аккордеона в центральной панели—>
{% 1пс1ис1е ”радез/ассогсНоп_с_зНо^.Нкш1" %}
</сНу>

</сНч>

</сНч> <!— Конец центральной панели —>

<!— Это правая панель —>

<сНч с1азз=”со1-4 со1-зт-4 со1-тс1-4 со1-1д-2 со1-х1-2

кехк-сепкег Ьд-1пко Ьд-орас1ку-25">

<Ь6>Правая боковая панель</Н6>

<!— Показ аккордеона в правой панели—>

{% 1пс1ибе прадез/ассогс11оп_г_зЬом.Ькт1" %}

</сНч> <!— Конец правой панели —>

</сНч> <!— Конец строки —>

</сНч> <!— Конец контейнера —>
{% епбЫоск раде %}

Шаблон ехатр1е8_1.И1т1 представляет собой демонстрационную страницу, состоящую
из трех панелей: левой боковой, центральной и правой боковой. В каждую панель с ис-
пользованием тега 1пс1ис1е вставлен другой шаблон:

♦	в левую боковую панель — шаблон ассогсИоп_8Ио\л/.И1т1;

♦	в центральную панель — шаблон ассогсИоп_с_8Ио\л/.И1т1;

♦	в правую боковую панель — шаблон ассогсИоп_г_8Ио\л/.И1т1.

Коды шаблонов ассогсИоп_8Ио\л/.И1т1, ассогсИоп_с_8Ио\л/.И1т1 и ассогсИоп_г_8Ио\л/.И1т1 пред-
ставлены в листингах 3.28-3.30.

Листинг 3.28. Шаблон ассогсНоп_8Ьо\л/.Щт1

{% Ь1оск ассогсНоп %} <!— Аккордеон начало блока —>

<сНч с1азз=”ассогсНоп” 1с1="ассогс11оп_1"> <!— Класс Аккордеон —>

<сПч с1азз="ассогб1оп-1кет"> <!— Элемент аккордеона —>

{% Гог каЬ 1п каЬз %} <!— Цикл по элементам аккордеона —>

<!— Заголовок элемента аккордеона —>

<Ь2 с1азз="ассогсНоп-Неас1ег" 1с1="{{ Гог1оор.соипкег }}” >

<!— Кнопка и ее параметры —>

сЬиккоп с1азз=’’ассогсНоп-Ьиккоп {{ каЬ.зек_Ькп }}"
куре=”Ьиккоп”

Пака-Ьз-кодд1е=”со11арзе"

Пака-Ьз-кагдек=”#со11арзе{{ Гог1оор.соипкег }}"
аг1а-ехрапбеб="кгие"
аг!а-сопкго1з="со11арзе{{ ког1оор.соипкег }}">
{{ как.к1к1е_Ькп }}

</Ьиккоп>

</Ь2>
<!— Тело элемента аккордеона —>

<61V Ы=”со11арзе{ { ТогТоор.соипбег }}"

с1азз="ассог61оп-со11арзе соИарзе"

агТа-1аЬе11е6Ьу=’Ъеа61пд0пе {{ ТогТоор. соипбег }}"

баба-Ьз-рагепб=”#ассогсИоп_1">

<!—Тело и его параметры —>

<61V с1азз="ассог6Топ-Ьобу {{ 1гаЬ. зеб_бехб }}”>

<!—Изображение —>

«Ну с1азз="гом”>

{% Тб баЫбтаде %}

Ытд згс=”{{ баб.бтаде.иг! }}" с1азз="Ттд-б1и16">
{% епббб %}

</66у>

<!—Текст подзаголовка жирный—>

{% б б баб.б1б!е_баЬ %}

<збгопд>{{ баб.б1б1е_баЬ }}</збгопд>

{% епббб %}

<!—Текст вкладки обычный—>

{% б б баб.ббббе_баЬ %}

<р> {{ баб. бехб_баЬ | ббпеЬгеакз }} </р>

{% епббб %}

<!— Кнопка—>

{% бб баЬ.ббпк %}

<а Ьгеб=”Ьббрз://{{баЬ.ббпк}}/" Ыазз="Ьбп Ьбп-ргбшагу Ьбп-зш"
багдеб=”_Ыапк”хб с!азз="Ы Ьб-с1ои6-ир1оаб”></б> Перейти</а>
{% епббб %}

</66у>

</66у>

{% епббог %} <!— Конец цикла по элементам аккордеона —>

</6бу> <!— Аккордеон конец элемента —>

</66у> <!— Конец класса Аккордеон —>

{% епбЫоск ассогббоп %} <!— Аккордеон конец блока —>

Листинг 3.29. Шаблон ассогсНоп_с_8Ьо\л/.Мт1

{% Ыоск ассогббоп %} <!— Аккордеон начало блока —>

<61V с1азз=”ассог61оп” 16="ассог61оп_2"> <!— Класс Аккордеон —>

<61У с1азз="ассог61оп-1бет"> <!— Элемент аккордеона —>

{% Тог КаЬ 1п ТаЬз2 %} <!— Цикл по элементам аккордеона —>

<!— Заголовок элемента аккордеона —>

<Ы с1азз="ассог61оп-11еа6ег" Ы="{{ ТогТоор.соипбег }}” >

<!— Кнопка и ее параметры —>

<ЬиЫоп с1азз=”ассогЫоп-ЬиЫоп {{ ТаЫзеб_Ып }}"

Туре="ЬиЫоп”

6аба-Ьз-бодд1е="со11арзе"

6аба-Ьз-багдеб=”#со11арзе2{{ ТогТоор.соипбег }}"
агТа-ехрапбес1="бгие"

агТа-сопбго1з="со11арзе2{{ ТогТоор.соипбег }}”>
{{ баб.б1б1е_Ьбп }}

</Ьиббоп>

</Ь2>

<!— Тело элемента аккордеона —>

<сНу 1б=”со11арзе2{{ ТогТоор.соипбег }}"
с1азз="ассогбТоп-со11арзе соИарзе"
аг1а-1аЬе11ес1Ьу="ЬеасНпд0пе {{ ТогТоор. соипбег }}"
баба-Ьз-рагепб="#ассогбТоп_2">

<!—Тело и его параметры —>

<сНу с1азз="ассогбТоп-Ьобу {{ 1саЬ. зеб_бехб }}">

<!—Изображение —>

<61У с1азз="гом">

{% 1Т баЬ.шаде %}

<Ьтд згс="{{ баЬ.гтаде.иг! }}" с1азз="1тд-Т1и1сГ'>

{% епсНТ %}

</б1У>

<!—Текст подзаголовка жирный—>

{% 1Т баЬ.б1б1е_баЬ %}

<збгопд>{{ баЬ.б1б!е_баЬ }}</збгопд>

{% епсНТ %}

<!—Текст вкладки обычный—>

{% 1Т баЬ.б1б1е_баЬ %}

<р>{{ баЬ.бехб_баЬ|ИпеЬгеакз }}</р>

{% епсНТ %}

<!— Кнопка—>

{% 1Т баЬ.Ипк %}

<а Ьгеб="Ьббрз://{ {баЬ.Ипк}}/" с!азз="Ьбп Ьбп-ргбтагу Ьбп-зт"
багдеб="_Ыапк"><1 с!азз="Ы Ь1-с1оис1-ир1оас1"></1> Перейти</а>

{% епсНТ %}

</сНу>

</б1У>

{% епббог %} <!— Конец цикла по элементам аккордеона —>

</6гу> <!— Аккордеон конец элемента —>

</6гу> <!— Конец класса Аккордеон —>

{% епсЫоск ассогсНоп %} <!— Аккордеон конец блока —>

Листинг 3.30. Шаблон ассогсНоп_г_8Ьо\л/.Мт1

{% Ыоск ассогсНоп %} <!— Аккордеон начало блока —>

<сНу с1азз="ассогсНоп" 1б="ассогсНоп_3"> <!— Класс Аккордеон —>

<сНу с1азз="ассогб1оп-1бет"> <!— Элемент аккордеона —>

{% Тог КаЬ Ьп ТаЬзЗ %} <!— Цикл по элементам аккордеона —>

<!— Заголовок элемента аккордеона —>

<Ь2 с1азз="ассогб1оп-Неабег" 1б="{{ ТогТоор.соипбег }}" >
<!— Кнопка и ее параметры —>

сЬиббоп с1азз="ассог(Поп-Ьиббоп {{ баб.зеК_ЬКп }}”

Куре="ЬиККоп”

баба-Ьз-бодд1е=”со11арзе"

баба-Ьз-багдеб="#со11арзеЗ{{ ТогТоор.соипбег }}”

аг1а-ехрапбес1="бгие"

аг1а-сопбго1з="со11арзеЗ{{ ТогТоор.соипбег }}”>
{{ КаЬ.К1К1е_ЬКп }}

</ЬиККоп>

</Ь2>

<!— Тело элемента аккордеона —>

<сНу 1с1="со11арзеЗ{ { ТогТоор.соипбег }}"

с1азз="ассогсНоп-со11арзе соИарзе"

аг1а-1аЬе!1есЬу=’Ъеа(11пд0пе {{ ТогТоор. соипбег }}"
баба-Ьз-рагепб=" #ассогсНоп_3 " >

<!—Тело и его параметры —>

<сНу с1азз="ассогб1оп-Ьобу {{ КаЬ. зеб_бехб }}">

<!—Изображение —>

<бгу с1азз="гом">

{% 1Т РаЬ.шаде %}

<1тд згс="{{ КаЬ.гтаде.иг! }}" с1азз="1тд-Т1и1сГ'>

{% епсНТ %}

</сНу>

<!—Текст подзаголовка жирный—>

{% 1Т РаЬ.К1б1е_баЬ %}

<збгопд>{{ ГаЬ.б1Г1е_баЬ }}</збгопд>

{% епсНТ %}

<!—Текст вкладки обычный—>

{% 1Т ГаЬ.б1б1е_баЬ %}

<р>{{ баЬ.бехб_баЬ|ИпеЬгеакз }}</р>

{% епсНТ %}

<!— Кнопка—>

{% 1Т РаЬ.Ипк %}

<а КгеТ=’ЪРРрз://{{баЬ.Ипк}}/" с1азз="Ыт Ыт-ргнпагу Ьбп-зт"
багдеб="_Ь1апк"><1 с!азз="Ы Ь1-с1оис1-ир1оасГ></1> Перейти</а>
{% епсНТ %}
</с11у>

</б1У>

{% епбТог %} <!— Конец цикла по элементам аккордеона —>

</6гу> <!— Аккордеон конец элемента —>

</61у> <!— Конец класса Аккордеон —>

{% епбЫоск ассогсНоп %} <!— Аккордеон конец блока —>

Все три эти шаблона имеют одинаковую структуру. В каждом шаблоне с использова-
нием тега В]ап§о Тог организован цикл по вкладкам аккордеона каЬз, баЬз2 и КаЬзЗ. В ка-
честве идентификатора элементов вкладок задействуется счетчик циклов (например,
1б="{{ ТогТоор.соипбег }}"). В теле элементов аккордеона применяется тег В]ап§о и,
в котором проверяется наличие или отсутствие в БД сведений об элементе. Если сведе-
ния об элементе в БД присутствуют, он будет отображен в шаблоне.

* * *

Здесь мы рассмотрели код всех модулей и шаблонов, которые обеспечивают формиро-
вание и вывод динамичных аккордеонов. Имея такой набор, администраторы сайта мо-
гут, не меняя программный код, добавить аккордеон на любую страницу сайта (и даже
в любую панель страницы), изменить количество вкладок и их содержание, поменять
дизайн элементов вкладок. При удалении аккордеона из БД он автоматически исчезнет
со страниц сайта. Рассмотрим теперь, как работает наш программный код и как выгля-
дят динамичные аккордеоны на страницах сайта.

Примечание

Для того чтобы читатели интерактивной цифровой книги не испортили содержание приме-
ров этого раздела, на публичном сайте в модулях добавления, корректировки и удаления
данных из БД закомментированы программные строки, связанные с физическим изменени-
ем записей в БД.

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

Проверим работу созданных нами модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Пред-
ставление ассогс1_ес1й.Ыт1.

При вызове модуля для создания и редактирования динамичного аккордеона шаблон
ассогс!_ес1И.И{т1 будет выглядеть так, как показано на рис. 3.5).

Динамичный аккордеон

Редактор аккордеонов

Выбрана страница сайта Примеры

О Добавить аккордеон

Параметры аккордеона

И Страница сайта	Блок (к С, К)	Редактировать

Рис. 3.5. Внешний вид редактора динамичного аккордеона (шаблона ассогс1_есПШт1) при первой загрузке

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.
По нажатию на кнопку Добавить аккордеон откроется шаблон-форма ассогс1_ас1с1.К1т1,
в которой нужно указать, на какой панели страницы: левой (ь), центральной (с) или
правой (к) — будет размещен динамичный аккордеон (рис. 3.6).

Рис. 3.6. Выбор панели страницы для размещения динамичного аккордеона

Для примера из выпадающего списка выбираем элемент с и нажимаем кнопку Сохра-
нить. После этого пользователь будет возвращен в шаблон ассогс1_ес1И.И1т1, где появит-
ся запись с созданным динамичным аккордеоном (рис. 3.7).

Динамичный аккордеон

Редактор аккордеонов

Выбрана страница сайта Примеры

§ Добавить аккордеон

Параметры аккордеона

Страница сайта Блок ЩС.Ю

2 Примеры С

Редактировать

О Изменить I В Удалить I О Редактор вкладок

Рис. 3.7. Внешний вид редактора динамичного аккордеона (шаблона ассогс1_ес1И.Н1т1)
при созданном аккордеоне

Как здесь можно видеть, на страницу сайта Примеры в центральной панели будет по-
мещен динамичный аккордеон, который в БД имеет идентификатор 16=2. В колонке
таблицы с именем Редактировать появятся три кнопки: Изменить, Удалить и Редак-
тор вкладок.

На следующем шаге добавим к нашему динамичному аккордеону несколько вкладок —
нажмите для этого кнопку Редактор вкладок. В результате откроется шаблон для соз-
дания и редактирования вкладок текущего аккордеона ас_1аЬ_есПШт1. При первой за-
грузке этого шаблона таблица будет пустой, т. к. в БД еще нет ни одной записи
(рис. 3.8).

Для создания новой вкладки нажмите кнопку Добавить вкладку, после чего откроется
универсальный шаблон-форма ас1с1_ирс1_(огт.111т1, в котором можно заполнить данными
поля базы данных вкладки динамичного аккордеона (рис. 3.9).

По нажатию на кнопку Сохранить пользователь будет возвращен в шаблон ас_1аЬ_
есПШт1, где появится запись БД с заполненной информацией первой вкладки
(рис. 3.10).
Динамичный аккордеон



Редактор вкладок аккордеона

Выбрана страница сайта: Прячеры

Выбран аккордеон (й): 2

^Добавить вкладку

Параметры вкладок

№ Заголовок Заголовок

пп кнопки	вкладки

Текст
вкладки

Параметры
Изображение кнопки

Параметры
текста	Ссыл ка Ре дактиро вэть

Рис. 3.8. Внешний вид редактора вкладок аккордеона (шаблона ас_1аЬ_есПШт1)
при первой загрузке

Рис. 3.9. Форма для заполнения данными вкладки аккордеона (шаблон ас1с1_ирс1_^огт.Н1т1)

Создадим еще две вкладки в текущем динамичном аккордеоне и заполним их разной
информацией (рис. 3.11).

Таким образом, в базе данных сформирован динамичный аккордеон с тремя вкладками.
Теперь его нужно добавить на страницу, которую мы назвали Примеры. Вспомним,
что в разд. 3.2.2 мы уже создали такую страницу (с именем ехатр1е8_1.И1т1) и про-
граммные модули для ее отображения.
№ Заголовок Заголовок

Параметры Параметры

пп кнопки вкладки

Текст вкладки Изображение кнопки текста

Ссылка Редактировать

Вкладка 1

Заголовок
вкладки 1

Это текстовая
информация
вкладки 1.

Ьд-’тЫехЬ	Ьд-5иссе55	ару1Ьоп.ги

>лгЫТе (з-б	ТехЬи/Кйе Е-6

^Изменить

* Удалить

1

Рис. 3.10. Внешний вид редактора вкладок аккордеона (шаблона ас_1аЬ_есПШт1)
с введенными параметрами вкладки

Динамичный аккордеон

0 Назад.

Редактор вкладок аккордеона

Выбрана страница сайта: примеры

Выбран аккордеон Об): 2

Е© Добавить

ВКЛЭДК\|

Параметры вкладок

№ Заголовок Заголовок

лп кнопки вкладки

Текст вкладки Изображение

Параметры
кнопки

Параметры
текста

Ссылка Редактировать

1 Вкладка 1 Заголовок

вкладки 1

2 Вкладка 2

Заголовок
вкладки 2

3 Вкладка 3

Заголовок
складки 3

Это текстовая
инрормация
вкладки Ъ

Это текстовая
информация
вкладки 2

Это текстовая
информация
вкладки 3

Ьд-шгсТехТ-
«ИтЛе ^5-6

(ехТ-уТнГе Ь-6

Ьд-юГо Ьд-
орасЛу-25
ГехТ-багк Тз-б

Ьд-5ьссе55

!ей-и/Ь ||(е Т5-6

аруТЬоп.ги

ОИзменитъ

Й Удалить

Ьд -рп та гу	Ьд -5иссе$5

Ьд-2нссе&5 Ьд
орасйу-25
1ех1-йЬйе Тв-б

С^’.мени’б

Й Удалить

^Изменить

Й Удалить

ГехТ-^тТиГе тЧ-б

Рис. 3.11. Внешний вид редактора вкладок аккордеона (шаблона ас_1аЬ_есИ1.Н1т1)
с введенными параметрами для трех вкладок

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

Итак, динамичный аккордеон создан и добавлен на страницу с именем Примеры. Те-
перь можно посмотреть, как он выглядит на этой странице.
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Стра-
ница ехатр1е8_1 .Мт1

При вызове модуля отображения динамичного аккордеона шаблон ехатр1е8_1.И1т1
будет выглядеть так, как показано на рис. 3.12.

Левая боковая
панель

Центральная панель

Вкладка 1

Правая боковая
панель

Вкладка 2

Вкладка 3

Рис. 3.12. Внешний вид шаблона ехатр1е8_1.Н1т1 при закрытых вкладках

Как здесь можно видеть, после занесения в БД информации о динамичном аккордеоне
он появился в центральной панели нашей тестовой страницы, при этом кнопки вкладок
получили разное цветовое оформление.

Если мы теперь откроем вкладку 1, то на ней будет показана текстовая информация,
изображение и кнопка для перехода к другому интернет-ресурсу — к сайту ару€1юп.ги
(рис. 3.13). Вкладка 1 здесь имеет фон зеленого цвета и текстовую информацию белого
цвета.

Левая боковая
панель

Центральная панель

Правая боковая
панель

Вкладка 1

Вкладка 3

Рис. 3.13. Внешний вид шаблона ехатр1е8_1.Н1т1 при открытой вкладке 1
Левая боковая
панель

Центральная панель

Правая боковая
панель

Вкладка 1

Вкладка 2

Вкладка 3

Рис. 3.14. Внешний вид шаблона ехатр1ез_1.Н1т1 при открытой вкладке 3

Открыв вкладку 3, мы увидим, что она имеет другое цветовое оформление: фон светло-
зеленого цвета и текстовую информацию черного цвета (рис. 3.14).

Теперь отобразим динамичный аккордеон в левой боковой панели. Для этого нужно
сначала открыть редактор аккордеонов (рис. 3.15) и нажать там на кнопку Изменить.

В открывшейся форме указываем расположение динамичного аккордеона в левой пане-
ли — ь (рис. 3.16).

Динамичный аккордеон

Редактор аккордеонов

Выбрана страница сайта: Примеры

© Добавить аккордеон

Параметры аккордеона

Страница сайта Блок (ЦС,Я)

2 Примеры С

Редактировать

О Изменить I О Удалить I О Редактор вкладок

Рис. 3.15. Шаблон ассогс1_ес1И.Н1т1 для редактирования динамичного аккордеона

Рис. 3.16. Перенос динамичного аккордеона на левую боковую панель
Левая боковая
панель

Вкладка 1

Центральная панель

Правая боковая
панель

Вкладка 2

Вкладка 3

Рис. 3.17. Динамичный аккордеон в левой боковой панели

Сохраняем измененный параметр и возвращаемся к тестовой странице ехатр1е8_1.И1т1
для вывода динамичного аккордеона (рис. 3.17).

Как здесь можно видеть, левая боковая панель имеет меньшую ширину, чем централь-
ная панель, однако вкладки аккордеона адаптировались к этой ширине. Если теперь
открыть любую вкладку, то будет видно, что и содержимое вкладки адаптировалось
к новому размеру панели (рис. 3.18).

Аналогичным образом можно перенести динамичный аккордеон в правую боковую
панель (рис. 3.19).

Левая боковая	 	Правая боковая

панель	Центральная панель	панель

Вкладка 1

Вкладка 3

Рис. 3.18. Динамичный аккордеон на левой боковой панели с открытой вкладкой 2

Левая боковая
панель

Центральная панель

Правая боковая
панель

Вкладка 1

Вкладка 2

Вкладка 3

Рис. 3.19. Динамичный аккордеон в правой боковой панели

* * *

Подводя итоги этого раздела, можно сделать следующие выводы. Написание про-

граммного кода для формирования динамичного аккордеона — достаточно трудоемкий
процесс, однако эти трудозатраты окупаются при сопровождении сайта. Администра-
торы сайта получают возможность добавлять или удалять элемент «динамичный
аккордеон» в любые фрагменты любой страницы сайта, изменять количество вкладок
аккордеона и их содержимое, менять оформление внешнего вида аккордеона. При этом
им не требуется вносить какие-либо изменения в код программных модулей сайта.

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

При проектировании сайта также можно создавать и карточки с динамичной загрузкой
текста, изображений, кнопок и других элементов. В этом случае администраторы сайта
через административную панель смогут изменять как количество карточек, так и их
содержание (изображения и поясняющие надписи).

Карточка имеет следующую структуру: изображение, заголовок, подзаголовок, текст,
подвал. Кроме того, она обладает еще и такими характеристиками, как размер, цвет
фона, цвет текста, цвет границы, ширина границы. При этом каждая карточка может
иметь свой набор стилей (цвет, размер), изображение и текстовую информацию.

При размещении на страницах сайта динамичных карточек необходимо все их элемен-
ты хранить в базе данных — для этого мы сейчас создадим модель сагб и функцию
гепате шаде сага, позволяющую изменять имя изображения, загруженного в карточку
(листинг 3.31).

Пояснение

Поскольку публичные серверы не принимают имена изображений на кириллице, наша мо-
дель сопровождается функцией автоматического изменения имени файла загружаемого
изображения, которая создает на сайте удаленного сервера папку с именем 1таде_сагс1,
в которую будут сохраняться загружаемые файлы изображений с именами !тд_<\в записи
в БД>.<расширение>.

Листинг 3.31. Модель Саге! и функция гепате_1таде_сагс1

#####################################################

# Функция изменения имени изображения для карточки #

#####################################################

6е^ гепате_1таде_сагб(1пз11апсе, ГИепате) :

ир1оаб_бо = '1таде_сагсГ

ехб = ГИепате.зрИЩ ’. ’) [-1]

п_гес = беЩСагб.оЬдесбз.аИ ())

# получить 16 последней записи из модели

1Г п_гес == 0:

тах_гес = 0

е!зе:

тах_гес = Сагб.оЬдесбз.а!1(). 1азб().16

тах_16 = тах_гес +1 #16 следующей записи

рйобо = ’1тд_’ + збг(тах_16)

1Г 1пзбапсе.рк: # текущий Ю

Шепате = '{}{}.{}’. ^огтаб (' 1тд_', тпзбапсе .рк, ехб)
еИЕ рйоко: # имя файла - текущий Ю + 1

ЕПепате = '{}•{}'• Еогта 11 (рИоко, ехк)

е1зе: # случайное имя файла

ГНепате = '{}{}.{}'. Еогтак (' 1тд_', иигсИ ().Нех, ехк)

# возвращает полный путь к файлу

гекигп оз.ракЬ.до1п(ир1оас1_ко, ГПепате}

#####################################

#	Модель для формирования карточек #

#####################################

с1азз Сагс1(тос1е1з .Мос1е1) :

таде = тос!е1з. 1тадеЕ1е1с1 (ир!оас1_ко=' гепате_1таде_сагс1',
пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Изображение")

к!к1е = тойеТз .СйагЕ1е1с1(тах_1епдк]11=100,

пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Заголовок")

зиЬк1к1е = тос!е1з .СйагЕ1е1с1 (тах_1епд1±=100,

пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Подзаголовок")

кехк = тос!е1з .ТехкЕ1е1с1(тах_1епдкЪ=2000,

пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате=”Текст карточки")

Еоокег = тойеТз .СйагЕ1е1с1(тах_1епдк]11=100,

пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Подвал")

зку1е_312е = тос!е1з .СйагЕ1е1с1(тах_1епд11]11=50,

с!еЕаи1Е=' млсО: 21гет; ',
пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате=" Размер")

зку1е_Еоп = тос1е1з .СйагЕ1е1с1(тах_1епд11]11=50,

с!еЕаи1Е='Ьд-зесопс1агу',
пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Цвет фона")

зку1е_кехЕ = тос1е1з .СйагЕ1е1с1(тах_1епд11]11=50,

с!еЕаи1Е=' Еехк-^Ыке ’,
пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Цвет текста")

зку1е_Ьогс!ег = тос!е1з .СйагЕ1е1с1(тах_1епд11]11=50,

с!еЕаи1Е='Ьог(1ег-зиссезз',
пи11=Тгие, Ыапк=Тгые,
чегЬозе_пате="Цвет границы")

зку1е_Ьогс1ег_з12е = тос!е1з .СР1агЕ1е1с1(тах_1епд11]11=50,

с!еЕаи1Е='Ьогс1ег Ьогс1ег-3\
пи11=Тгие, Ь1апк=Тгые,
чегЬозе_пате="Ширина границы")

оЬдес!15 = тос!е1з .Мападег

йеЕ __зкг__(зе1Е) :

гекигп зе1Е.Е1Е1е
В модели сага созданы следующие поля:

♦	шаде — изображение, загруженное в карточку;

♦	Ш1е — заголовок карточки;

♦	зиЬС1Г1е — подзаголовок карточки;

♦	сехс — текст карточки;

♦	Гоосег — подвал карточки;

♦	згу1е_з12е — размер карточки;

♦	згу1е_гоп — цвет фона карточки;

♦	згу1е_сехс — цвет текста карточки;

♦	зГу1е_Ьогаег — цвет рамки карточки;

♦	згу1е_ьогаег_з12е — толщина рамки карточки.

Надо также не забыть выполнить процедуру миграции:

руГЬоп тападе.ру такетадгаПопз

руГЬоп тападе.ру тадгаСе

Чтобы персонал мог удаленно менять содержимое карточек через административную
панель, модель сага нужно зарегистрировать в файле ас1т1п.ру (листинг 3.32).

Листинг 3.32. Регистрация модели Сагс1 в файле ас1тт.ру

^гот .тос!е1з Сага

аскптп.з1Се.гедтзСег(Сага)

Для демонстрации динамичной карточки в меню или в теле одного из шаблонов надо
создать ссылку для вызова страницы, содержащей карточку (листинг 3.33).

Листинг 3.33. Ссылка для вызова страницы, содержащей динамичную карточку

<И><а Ьге^="{% иг1 ’тазГег:а_сага_1 ’ %}” СагдеС =”_Ыапк”>Страница а_сага_1 .ИГт1</а></11>

По этой ссылке будет инициирован ИКЬ-маршрут (листинг 3.34).

Листинг 3.34. 11КЬ-маршрут с1_сагс1_1

#	Показать карточку

раГЬ('а_сага_1’, ч!емз.а_сага_1, пате='а_сага_1'),

При адресации к этому маршруту будет инициировано представление с1_сагс1_1 (лис-
тинг 3.35).

Листинг 3.35. Представление с1_сагс1_1

^гот .тос!е1з ттрогГ Саге!

#########################
# Динамичная карточка #
#########################
аек а_сага_1(гедиезк):

сагаз = Сага.оЬдескз .а11 ()

гекигп гепаег(гедиезк, ’тазкег/дкача_3/а_сага_1 .Ьктк', {'сагаз' : сагаз})

В этом представлении создается объект сагаз, в который загружаются все записи из мо-
дели сага (т. е. все параметры карточки). Затем загруженные карточки через словарь
передаются в шаблон с именем с1_сагс1_1 .Ыт! (листинг 3.36).

Листинг 3.36. Шаблон с1_сагс1_1.Гйт1

{% ехкепаз "зЬор/Ьазе.ЬктТ" %}

{% Ыоск Ьеааег %}

<акч с1азз="гом кехк-сепкег тх-2">

<ЬЗ>Динамичная карточка</ЬЗ>

</сПу>

{% епбЫоск Ьеааег %}

{% Ькоск сопкепк%}

<акч сказз=”сопкакпег ккика кехк-сепкег">

<сПу с1азз="гом кехк-сепкег">

{% ког сагй кп сагаз %}

<!— Параметры карточки—>

<а1ч с1азз="сага {{сага.зку!е_коп}} {{сага.зку!е_кехк}}

{{сага.зку!е_Ьогаег}} {{сага.зкуке_Ьогаег_зк2е}} тх-2 ту-2 тх-аико"
зку1е=”{{сага.зку1е_з1ге}}">

<!— Заголовок, подзаголовок—>

{% кк сага.кккке %}

<Ь5 с1азз=”сага-к1к1е кехк-сепкег">{{сага.к!к1е}}</Ь5>

{% епакк %}

{% кк сага.зиЬкккке %}

<Ь6 с1азз=”сага-зиЬк1к1е кехк-сепкег">{{сага.зиЬкккке}}</Ь6>

{% епакк %}

<!— Тело карточки—>

<акч сказз=”сага-Ьоау ">

<!— Изображение—>
{% кк сага.ктаде %}

<ктд згс=”{{ сага.ктаде.игк }}" сказз="ктд-ккика”>

{% епакк %}

<!— Блок с текстом—>

{% кк сага.кехк %}

<р сказз=”сага-кехк">{{сага.кехк|ккпеЬгеакз}}</р>

{% епакк %}

</акч>

<!— Подвал карточки—>

<акч сказз=”сага-коокег кехк-сепкег">

{% кк сага.коокег %}

{{сага.коокег}}

{% епакк %}
</сНу>

</с1гу>

{% епсИог %}

</с1гу>

</сПу>

{% епбЫоск сопкепк %}

Здесь организован цикл перебора всех карточек, которые имеются в БД. С использова-
нием параметра тх-аиго все карточки (независимо от их количества) будут автоматиче-
ски размещаться в центре экрана. Параметры карточки задают стили, которые подгру-
жены из БД. Поскольку некоторые элементы карточки могут быть не заполнены, они
выводятся в теге и (проверяется условие наличия данных в элементе). При выводе
текста в теле карточки применяется фильтр, который позволяет разделять фрагменты
текста на абзацы (начинать абзац с новой строки). В этом случае при вводе текста поль-
зователь, закончив абзац, нажимает клавишу <Еп1ег> для перехода к новой строке.

Добавить сагб

Изображение:

1 -ыверите фалл | Скумбсир.фд

Заголовок:

С кум брр я

Подзаголовок:

Холодного копчения

Текст карточки:

Скумбрия колодного копчения в вакуумной урзиовке. Вес 3-СД гр. Цена 250 руб.

эз з-мер:

Ивет гронз:

Цвет границы:

Ширина границы:

Рис. 3.20. Формирование динамичной карточки в административной панели О]апдо
Теперь в административной панели можно сформировать содержание карточки или
нескольких карточек. Пример интерфейса административной панели при формирова-
нии содержания карточки приведен на рис. 3.20, а страница с1_сагс1_1.К1т1 с данными
динамичной карточки, полученными из БД, показана на рис. 3.21.

Динамичная карточка

Скумбрия
Холодного копчения

Скумбрия холодного копчения в
вакуумной упаковке. Вес 300 гр.
Цена 250 руб.

От надежного поставщика!

Рис. 3.21. Внешний вид динамичной карточки (шаблон с1_сагс1_1.Н1т1)

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Стра-
ница с!_сагс1_1 .Ыт1

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

В предыдущем разделе было показано, как с использованием фреймворка Воо1з1гар
создать динамичную карточку. Для динамичной карточки не нужно менять код страни-
цы, однако недостатком этого метода является то, что карточка обычно привязана
к конкретной странице сайта.

Тем не менее при проектировании сайта можно создать такую модель для динамичных
карточек, которая обеспечит создание неограниченного количества этих элементов,
позволит добавить их на любую страницу сайта или удалить оттуда, разместить в за-
данном месте страницы и изменять как содержимое, так и внешний интерфейс элемен-
та. При этом все эти действия можно будет выполнять не только через административ-
ную панель сайта, но и через его интерфейс в личном кабинете администраторов сайта.
Правда, для этого понадобится создать на сайте личный кабинет для административно-
го персонала и набор необходимых программных модулей для редактирования дина-
мичных карточек.

Посмотрим на упрощенном примере, как это можно сделать, опустив для простоты
изложения реализацию личного кабинета, а показав только формирование модели
динамичной карточки и модулей для ее редактирования.

Чтобы на одной странице сайта можно было выводить несколько карточек, создим
модель сагб_1 — для хранения карточек и функцию гепате_Ше — для автоматического
изменения имен загружаемых изображений (листинг 3.37).

Пояснение

Поскольку публичные серверы не принимают имена изображений на кириллице, наша мо-
дель сопровождается функцией автоматического изменения имени файла загружаемого
изображения, которая создает на сайте удаленного сервера папку с именем /7/е, в которую
будут сохраняться загружаемые файлы изображений с именами /Пе_<к1 записи в БД>.<ра-
сширением

Листинг 3.37. Функция гепате_й1е и модель СагсМ

лпрогб 03

6г от иибб трог Г ии!64

#	####################################################

#	Функция изменения имени изображения для карточки #
#####################################################
беб гепате_6Не (бпзбапсе, бИепате) :

ир1оаб_6о = ’6Пе’

ехб = бНепате.зрИб ('.') [-1]

п_гес = 1еп (Сагб.о^есбз .а!1 ())

#	получить 16 последней записи из модели

16 п_гес == 0:
тах_гес = О
е!зе:

тах_гес = Сагб.оЬдесбз .а!1 () . 1азб() .16

тах_16 = тах_гес +1 #16 следующей записи
рйобо = '6Не_' + збг(тах_16)

16 бпзбапсе.рк: # текущий Ю

бИепате = ’{}{}•{}' . богтаб (16Пе_', бпзбапсе .рк, ехк)
еИ6 рйобо: # имя файла - текущий Ю + 1

бИепате = '{}•{}'• богтаб (рбобо, ехк)
е!зе: # случайное имя файла

бИепате = '{}{}•{}'• богтаб (16Ие_', ииб64().Нех, ехк)
# возвращает полный путь к файлу

гекигп оз.рабй.до1п(ир1оаб_бо, бИепате)

#####################################
# Модель для формирования карточек #
#####################################
с!азз Саг6_1(тобебз.Мо6е1):
раде = тос!е1з. ГогелдпКеу (Радез,
чегЬозе_пате="Страница сайта",
пи11=Тгие, Ыапк=Тгие,
оп_с1е1еке=тос1е1з .САЗСАОЕ)

нпаде = тос!е1з. 1тадеЕ1е1с1 (ир1оас!_11о=гепате_Е11е,

пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Изображение")
Е1Е1е = тос!е1з .СкагЕ1е1Щтах_1епд1±=100,
пи11=Тгие, Ь1апк=Тгие,
уегЬозе_пате="Заголовок")
зиЬЕ1Е1е = тос!е1з .СкагЕ1е1с1(тах_1епд1±1=100,
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Подзаголовок")

Еехк = тос!е1з .ТехЕЕ1е1с1(тах_1епд1±1=2000,

пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Текст карточки")
РооЕег = тос!е1з .СЬагЕ1е1с1(тах_1епд1±1=100,
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Подвал")

сагс1_312е = тос!е1з .СкагЕ1е1с1(тах_1епд1±1=50,

<1е1аи1Е='ИсО: 21гет; ',
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате=" Размер карточки")

Ьд_гдЬ = тос!е1з .САагЕ1е1с1(тах_1епд1±1=50,

(1е1аи1Е='Ьаскдгоипс1-со1ог :гдЬ (100, 100, 100);',
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Фон карточки")

зеЕ_ЕехЕ = тос!е1з .СйагПеЫ (тах_1епд1±=50,

<1е1аи1к=' Рз-6 кехк-мИПзе',
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Параметры текста")

Ьогс1ег_со1ог = тос!е1з .СЬагГ1е1с1(тах_1епд1±1=50,

<1е1аи1Е='Ьогс1ег-зиссезз',
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Цвет границы")
Ьогс1ег_з12е = тос!е1з .СйагПеМ (тах_1епд1±=50,

<1е1аи1к='Ьогс1ег Ьог^ег-З',
пи11=Тгие, Ыапк=Тгие,
чегЬозе_пате="Ширина границы")
дгоир = тос!е1з .Роз1Е1уе1пкедегГ1е1с1(Ь1апк=Тгие, пи11=Тгие,
<1е1аи1к=1,
уегЬозе_пате="Группа")

Ипк = тос!е1з .СкагЕ1е1с1(тах_1епд1±1=300,

пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Ссылка")
И1е = тос!е1з .ГИеГ1е1с1(ир1оа(1_11О=гепате_Е11е,
пи11=Тгие, Ыапк=Тгие,
уегЬозе_пате="Документ")

оЬдескз = тос!е1з .Мападег
с!еГ _з'Ьг_(зе!Р) :

геРигп зе1Г.Г1Г1е

В модели сага 1 созданы следующие поля::

♦	раде — страница сайта, на которой будет показана карточка;

♦	шаде — изображение, загруженное на карточку;

♦	Ш1е — текст заголовка карточки;

♦	зиЬППе — текст подзаголовка карточки;

♦	сехс — текст тела карточки;

♦	Роогег — текст подвала карточки;

♦	сага_з12е — размер карточки;

♦	Ьд гдЬ — цвет фона карточки;

♦	зег сехс — параметры текста карточки;

♦	Ьогаег_со1ог — цвет рамки карточки;

♦	Ьогаег_з12е — ширина рамки карточки;

♦	дгоир — группа, в которой будет выведена карточка;

♦	Ипк — ссылка на внешний ресурс Интернета;

♦	Ше — файл (документ) формата РИР, загруженный на карточку.

Обратите внимание на импорт дополнительных модулей оз и шНсИ — они необходимы
для работы функции гепате_Ше.

В примере нашей модели мы покажем на карточке текст, изображение и ссылку на
внешние ресурсы Интернета. Надо также иметь в виду, что у этой модели — в зависи-
мости от характера разрабатываемого приложения — может быть и совершенно другой
набор полей.

Не забудьте выполнить процедуру миграции:

руГИоп тападе.ру такетйдгаПопз

руккоп тападе.ру тйдгаке

Чтобы можно было заполнять данными созданную модель, ее надо зарегистрировать
в файле ас1т1п.ру текущего приложения:

Ргот сЦ апдо.сопкгйЬ шрогк аскпгп

Ргот .тос!е1з гтрогр, Сагс1_1

#	Регистрация модели Сагс1_1

асЗтРп. з1Ре. гедгзРег (Сагс1_1)

Для заполнения карточки данными через интерфейс пользователя нам понадобится
форма, поэтому в файле Гогтв.ру мы создадим форму сагагогт (листинг 3.38).

Листинг 3.38. Форма Сагс1Еогт

#########################################

#	Форма для создания/изменения карточки #

#########################################
с1азз СагбГогт(1огтз .Мобе1Гогт) :

с1азз Мера:

тобе! = Сагб_1

#	Исключить поле из ввода
ехс1ибе = [' раде' ]

#	назначаем полю другой виджет

Щбдебз = {'Рехб': Рогтз .ТехРагеа (аРРгз={1 гомз1 : 10, ’со1з’: 50}),
’Ьд_гдЬ': Рогтз .ТехРагеа(аРРгз={1гомз1: 1, Чо1з’: 50}),
ЧооРег': Рогтз.ТехРагеа(аРРгз= {’гомз': 1, ’соТз': 50})А
’Ипк': Рогтз .ТехРагеа (аРРгз={' гомз' : 2, 'со1з': 50})}

В этой форме из списка полей для ввода исключено поле раде, а для некоторых полей
изменен формат поля ввода текстовых данных.

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

Чтобы получить возможность в интерфейсе сайта создавать динамичные карточки, не-
обходимо сформировать следующий набор модулей:

♦	для редактирования динамичных карточек;

♦	для добавления динамичных карточек;

♦	для обновления динамичных карточек;

♦	для удаления динамичных карточек.

Код представления (у1еду) сагб_еб1Р для редактирования динамичных карточек приведен
в листинге 3.39.

Листинг 3.39. Представление (у1еш) сагбебй

###############################

#	Создание/изменение карточек #
###############################

бе! сагб_еб1Р (гесрезР) :

#	16 текущей страницы и сама страница

1б_раде = 1

Рек_раде = Радез. оЬд есРз. деР (16=1б_раде)

гедиезР.зезз!оп[Чб_раде'] = 1б_раде

#	получить карточки текущей страницы

сагб = Сагб_1. оЬд есРз. ГНРег (раде_16=1б_раде)

#	показать таблицу с карточками

сопРехР = {"сагб": сагб, "Рек_раде”: Рек_раде}

геРигп гепбег(гедиезР, "тазРег/д1ауа_3/сагб_е61Р.]1Рт1", сопРехР)

В этом представлении в объект Рек_раде загружена текущая страница на основе ее иден-
тификатора в БД (ы_раде=1), а в объект сага из БД загружены все карточки текущей
страницы. Эти объекты через словарь сопРехР передаются в шаблон сагс1_ес1И.И{т1, код
которого приведен в листинге 3.40.
Листинг 3.40. Шаблон сагс1_ес1К.Мт1

{% ехкепбз "зйор/Ьазе.йктГ’ %}

{% Ыоск йеабег %}

<61V с1азз=”гом кехк-зкагк тх-2">

<ЬЗ>Динамичные карточки</НЗ>

</6Ы>

{% епсЫоск йеабег %}

{% Ыоск сопкепк%}

<61V Ыазз="гом кехк-зкагк тх-2">

<р>Выбрана страница сайта: {{кек_раде.паше}}</р>

</6Ы>

<61V Ыазз="гом кехк-зкагк 1Н-2 тх-2">

<6Ы с1азз=”со1-2”>

<а Ыек=”{% иг! ’тазкег:сагб_а66' %}" с!азз="Ькп Ькп-рг1тагу”>

<1 с!азз=”Ы Ы-бакаЬазе-абб кз-5"></1> Добавить карточку</а>

</(±Ы>

</(±Ы>

<6Ы Ыазз=”гом кехк-зкагк">

<6Ы с1азз=”со1-11 тх-2”>

<р>Параметры карточки</р>

<61V зку1е=”оуегВ1ом:зсго11;">

<каЫе с!азз=”каЫе каЫе-гезропзЫе каЫе-зкгтреб каЫе-Ьогбегеб кехк-зкагк каЫе-зиссезз">
<кйеаб>

<кг>

<кЬ>№ пп</кЬ>

<кЬ>Изображение</кЬ>

<кЬ>Заголовок</кЬ>

<кй>Подзаголовок</к11>

<кЬ>Текст</кЬ>

<кЬ>Подвал</кЬ>

<кЬ>Размер</кЬ>

<кЬ>Цвет фона</кЬ>

<кЬ>Параметры текста</к11>

<кЬ>Цвет рамки</кй>

<кй>Толщина рамки</к11>

<кЬ>Группа</кЬ>

<кй>Ссылка</к]1>

<кЬ>Файл</кЬ>

<кЬ>Редактировать</к!1>

</кг>

</кйеаб>

{% ког оЬд 1п сагб %}

<кЬобу>
<бг>

<Ы> {{богТоор. соипбег }} </1зс1>

<!— Изображение —>

{% 16 оЬ].1таде %}

<6с1х1тд згс=”{{ оЬд.бтаде.иг1 }}" а1б="соппесб”
збу1е="тах-Ье1дНб: 100рх"х/бс1>

{% е!зе %}

<ббх/бб>

{% епсНб %}

<!— Заголовок —>

{% бб оЬд.ббббе %}

<Ы>{{ оЬ]Л161е }}</6с1>

{% ебзе %}

<ббх/бб>

{% епсНб %}

<!— Подзаголовок —>

{% 16 оЬ].зиЬб1б1е %}

<бб>{{ оЬ].зиЬб1б1е }}</6с1>

{% ебзе %}

<ббх/бб>

{% епсНб %}

<!— Текст —>

{% 16 оЬ].бехб %}

<бб>{{ оЬ^Лехб }}</!(!>

{% е1зе %}

<ббх/бб>

{% епсНб %}

<!— Подвал —>

{% 16 оЬд.бообег %}

<бб>{{ оЬ^.бообег }}</!(]>

{% е1зе %}

<ббх/бб>

{% епсНб %}

<!— Размер —>

{% 16 оЬд.сагб_з12е %}

<бб>{{ оЬд .сагб_з1ге }}</6с1>
{% е1зе %}

<ббх/бб>

{% епсНб %}

<!— Цвет фона —>

{% 16 оЬд.Ьд_гдЬ %}

<бб>{ { оЬд .Ьд_гдЬ } }</6с1>

{% е1зе %}

<6с1Х/бс1>

{% епсНб %}
<!— Параметры текста —>

{% И оЬд.зеР_РехР %}

<Ы>{{ оЬ].зеР_НехП }}</Рс1>

{% е1зе %}

<Ых/Рс1>

{% епсЫР %}

<!— Цвет рамки —>

{% И оЬд .Ьогс1ег_со1ог %}

<Ы>{{ оЬд .Ьогс1ег_со1ог }}</Рс1>
{% е1зе %}

<Шх/Рс1>

{% епсНГ %}

<!— Толщина рамки —>

{% 1Р оЬд .Ьогс1ег_з12е %}

<Ы>{ { оЬд .Ьогс1ег_81ге }}</Рс1>
{% е!зе %}

<Ы></Рс1>

{% епсНГ %}

<!— Группа —>

<Ы>{{ оЬд.дгоир }}</Рс1>

<!— Ссылка —>

{% И оЬд. Ипк %}

<Ы>{ { о^.Ипк } }</Рс1>

{% е!зе %}

<Ы>Нет</Рс1>

{% епсИР %}

<!— Файл —>

{% 1Р оЬд. РИе %}

<РП>{ { оЬ^.РПе

{% е!зе %}

<Ы>Нет</Рс1>

{% епсНР %}

} }</Рс1>

<Рс1>

<а ЬгеР="{% иг! 'тазРег:сагс!_ирсГ 1с1=оЬп. 1с1 %}”
с!азз=”ЬРп ЬРп-ргтшагу Ыт-зт ту-1">

<1 с1азз="Ы Ы-гереаР"х/1>Изменить</а>

<а ЬгеР=”{% иг! ’тазРег :сагс!_с1е1' 1с1=оЬп. 1с1 %}"
с!азз=”ЬРп ЬРп-Напдег Ыт-зт ту-1">

<1 с1азз=”Ы-РгазЬЗ"х/1> Удалить</а>

</Ы>

</Рг>

</РЬос1у>

{% епсИог %}
</Ше>

</с11у>

</сНу>

</6гу>

{% епббкоск сопкепк%}

В этом шаблоне создана кнопка добавить карточку, которая активирует представление
с именем сагб_абб по следующей ссылке:

<а 6гек=’’{% иг! ’тазкег:сагб_а66' %}" с1азз="6кп 6кп-рг1тагу">

<1 с1азз=”Ы Ы-бакаЬазе-абб кз-5"></1> Добавить карточку</а>

После этой кнопки идет таблица, в которой отображается информация о созданных
карточках, — в каждой ее строке имеются две кнопки:

♦	изменить — для изменения сведений о карточке;

♦	Удалить — для удаления карточки.

Эти КНОПКИ активируют представления С именами сагб ирб И сагб бе! по следующим
ссылкам:

<а 6гек=’’{% иг1 ’тазкег:сагб_ырб' 16=063.16 %}"

с!азз=”Ькп Ькп-ргтагу Ькп-зт ту-1">

<1 с!азз=”Ы Ы-гереак”х/1>Изменить</а>

<а 6гек=”{% иг! ’тазкегсагб_6е1' 16=063.16 %}"

с1азз=”6кп бкп-бапдег бкп-зт ту-1">

<1 с1азз=”б1-кгаз63”></1> Удалить</а>

Код представления сагб абб приведен в листинге 3.41.

Листинг 3.41. Представление (у|еллл) сагс1_ас1с1

#####################

# Добавить карточку #
#####################
бек сагб_а66(гедиезк):

# возврат после ввода данных

1к гедиезк.текбоб == "РОЗТ":

когт = СагбЕогт(гедиезк.РОЗТ, гедиезк.ПЬЕЗ)

# получить 16 текущей страницы

16_раде = гедиезк.зеззкоп[’кб_раде']

1к когт.кз_ча116():

#	создание в БД новой записи об объекте
Сагб.0Б3 ескз.сгеаке(

ктаде=когт.с1еапеб_6ака.дек('та де'),
к1к1е=когт.с1еапеб_6ака.дек('кккке'),
зи6к1к1е=когт.с1еапеб_6ака.дек('зыбкккке'),
кехк=когт.с1еапеб_6ака.дек('кехк'),
коокег=когт.с1еапеб_6ака.дек('коокег'),
сагб_з12е=когт.с1еапеб_6ака.дек('сагб_зкхе'),
6д_гд6=когт.с1еапеб_6ака.дек('6д_гд6'),
зек_кехк=когт. с!еапеб_бака. де1з (' зе1а_Ьех1з'),

Ьогбег_со1ог=когт. с!еапеб_бака. де1з (' Ьогбег_со1ог'),
Ьогбег_з12е=когт. с!еапеб_бака. де1з (' Ьогбег_з12е'),
дгоир=когт. с!еапеб_бака. де1а (' дгоир'),
Ипк=когт.с!еапеб_бака.дек (' Ипк'),
кНе=когт. с!еапеб_бака. дек (' кНе'),
раде_1б=1б_раде)

гекигп гебйгеск (геуегзе ('тазкег: сагб_еб1к'))
е!зе:

#	возврат к форме для исправления ошибок

гекигп гепбег(гедиезк, 'тазкег/д1ауа_3/сагб_когт.ккт1', {'когт': когт})
екзе:

#	Формирование формы для ввода данных
когт = СагбГогт()
сопкехк = {'когт': когт}

#	шаблон с формой для ввода/корректировки слайда

гекигп гепбег(гедиезк, 'тазкег/д1ауа_3/сагб_когт.Икт1', сопкехк)

В этом представлении создается объект когт, в который загружается форма сагбЕогт().
Эта форма через словарь сопкехк передается в шаблон сагс1_1:огт.К1т1, код которого при-
веден в листинге 3.42.

Листинг 3.42. Шаблон сагс1_1:огт.11(т1

{% ехкепбз "зйор/Ьазе.йкт!" %}

{% Ь1оск сопкепк %}

<когт асккоп="" текйоб="розк" епскуре="ти!ккрагк/когт-бака">

{% сзгк_кокеп %}

<каЬ1е с!азз="кехк-зкагк">

{{ когт.аз_каЬ1е }}

</каЬ1е>

<а Ьгек="дауазсгкрк:Ызкогу.до (-1)" с!азз="Ькп Ькп-зиссезз Ькп-зт">

<1 с!азз="Ы Ы-аггом-1екк-здиаге"></1> Отмена</а>

<1прик куре="зиЬткк" с!азз="Ькп Ькп-ргнпагу Ькп-зт" уа!ие="Сохранить">

<1 с!азз="Ы Ы-бакаЬазе-абб кз-3"></1>

</когт>

{% епбЫоск %}

Этот шаблон представляет форму, в которой в виде таблицы отображаются поля для
ввода данных: { когт.аз_каЬ1е }. Здесь же имеются две кнопки: Отмена — для отмены
сохранения введенной информации и возврата к предыдущему окну и сохранить — для
сохранения введенной информации и возврата к предыдущему окну.

При возврате из этой формы в представление сагб абб там происходит сохранение в БД
сведений о динамичной карточке.

Код представления сагб ирб приведен в листинге 3.43.
Листинг 3.43. Представление (у|еуу) сагб _ирб

#####################
# Обновить карточку #
#####################
бек сагб_ирб(гедиезк, 16):

#	получение сведений об объекте из БД
оЬд = дек_оЬдеск_ог_404(Сагб, 16=16)

#	получить 16 текущей страницы

#	возврат после ввода данных
бк гедиезк.текйоб == "РОЗТ":

Бопп = Саг6Еогт(гедиезк.РОЗТ, гедиезк.Е1БЕЗ, кпбкка1={

'бтаде': оЬд. бтаде,
'кйкбе’: оЬ].кбк1е,
’зиЬкбкке’: обд.зиЬкбкке,
’кехк': оЬд.кехк,
’Еоокег’: оЬд.Еоокег,
’сагб_з12е': оЬд.сагб_зк/е,
'Ьд_гдЬ': обд.Ьд_гдЬ,
'зек_кехк': оЬд.зек_кехк,
'Ьогбег_со1ог': оЬд.Ьогбег_со1ог,
'Ьог6ег_з12е': оЬд.Ьогбег_з1хе,
'дгоир': оЬ].дгоир,
'кНе': окд.кНе,
’Ипк': оЬд.Ипк
})

йк Богт.13_ча116() :

#	получение сведений об объекте формы после корректировки данных
оЬд . шаде = Бопп. с1еапеб_6ака. дек (' тшаде')
оЬ].к1к1е = когт.с1еапеб_6ака.дек('к1к1е')
оЬ].зиЬк1к1е = когт.с1еапеб_6ака.дек('зиЬк1к1е')
оЬ].кехк = когт.с1еапеб_6ака.дек(’кехк')

оЬд.Еоокег = когт.с1еапеб_6ака.дек('коокег')
оЬд.сагб_з12е = Богт.с1еапе6_6аба.деб('сагб_з1ге')
оЬд.Ьд_гдЬ = Богт.с1еапеб_6аба.деб('Ьд_гдЬ')
окп .зеб-бехб = Богт.с1еапе6_6аба.деБ('зеб_БехБ')
обд.Ьог6ег_со1ог = Бопп.с1еапеб_6аба.деб('Ьог6ег_со1ог')
оЬд.Ьог6ег_з12е = Богт.с1еапе6_6аба.деБ('Ьог6ег_з12е')
оЬд.дгоир = Богт.с1еапеб_6аба.деб('дгоир')
оЬд.БПе = Богт.с1еапе6_6аба.деБ (' БИе')
окд.Ипк = Богт.с1еапе6_6аба.деб (' Ипк')

#	сохранение изменений об объекте в БД
оЬд.заче()

гекигп гебФгеск(гечегзе('тазкег:сагб_е61к'))
е!зе:

#	возврат к форме для исправления ошибок

гекигп гепбег(гедиезк, 'шазкег/д1ача_3/сагб_когт.]1кт1', {'когт': когт})
е1зе:

#	загрузка в форму сведений об объекте

Рогт = СагбЕогт(1пзРапсе=оЬд)
сопРехР = {'Рогт': Рогт}

# шаблон с формой для ввода/корректировки слайда

геРигп гепбег(гедиезР, ’тазбег/д1ауа_3/сагб_^огш.Ибт1’, сопРехР)

Это представление получает идентификатор редактируемой карточки (ы), на основе
которого в объект оЬд из БД загружаются сведения об этой карточке. После чего созда-
ется объект Рогт, в который загружается форма сагбЕотО с информацией о текущей кар-
точке. Эта форма через словарь сопРехР передается в шаблон сагс1_Гогт.К1т1. При возврате
из этого шаблона-формы в представление сагб_ирб там происходит сохранение в БД
сведений о динамичной карточке.

Код представления сагб_бе1 приведен в листинге 3.44.

Листинг 3.44. Представление (у1еш) сагс1_с1е1

#####################

# Удалить карточку #
#####################

6еР сагб_бе1(гедиезР, 16):

#	загрузить текущий объект по 16

оЬд = деР_оЬдесР_ог_404(Сагб, 66=16)

#	возврат из формы

1Р гедиезР.теРЬоб == "РОЗТ":

йР ’уез’ 1п гедиезР.РОЗТ:

# удаление сведений об объекте из БД
Сагб_1.оЬдесРз.деР(16=16).беРеРе()

геРигп гебРгесР(гечегзе('тазРег:сагб_е61Р'))

#	загрузка в сопРепР сведений об объекте

РхР1 = 'Будет удалена карточка'

6е1_рго6 = обз.РбРРе

сопРепР = {"РхР1": РхР1, "6е1_ргоб": 6е1_рго6}

#	вызов шаблона подтверждения/отмены удаления

геРигп гепбег(гедиезР, "тазРег/6е1_уезпо.ЬРт1", сопРепР)

Это представление получает идентификатор удаляемой карточки (бб), на основе кото-
рого в объект обд из БД загружаются сведения об этой карточке. После чего в объект
бе! ргоб загружается заголовок удаляемой карточки, который через словарь сопРепР
передается в универсальный шаблон с1е1_уе8по.Ыт1 (см. листинг 3.17). По нажатию кно-
пок в этом шаблоне происходит возврат в представление сагб_бе1, где в случае нажатия
на кнопку удалить выполняется удаление информации о карточке из БД.

Для активации всех этих представлений нужно в файле иг18.ру создать соответствующие
ИКБ-маршруты (листинг 3.45).
Листинг 3.45. Маршруты для редактирования динамичных карточек

#	Создание элемента "Карточка"

раНт. (’ сагб_есПб/', ч!емз. сагс1_есШ:, паше=1 сагс1_есШ:1),

#	Добавить карточку

рабК (’ сагб_ас1с1/ ’, ч!емз. сагс1_ас1с1, пате=’ сагс1_ас1с1'),

#	Обновить карточку

рабК (’ сагб_ирб/<1пб: 1б>/', чгемз. сагс1_ирс1, паше=' сагб_ирб'),

#	Удалить карточку

рабК( ’сагб_бе1/<1пР:1б>/', чтемз. сагс1_с1е1, пате=' сагс!_с1е1'),

Для вызова представления сагб есПб надо в меню одной из страниц сайта создать сле-
дующую ссылку (листинг 3.46).

Листинг 3.46. Ссылка для редактирования динамичных карточек

Кге^="{% иг1 'тазбег:сагб_есНб' %}" багдеб ="_Ыапк"Представление сагб_еб1С</а>

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

Проверим работу созданных нами модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Пред-
ставление сагс1_ес1й.

При первоначальной загрузке шаблон сагс1_ес1И.И1т1 будет выглядеть так, как показано
на рис. 3.22). Поскольку в БД нет ни одной записи о динамичных карточках, то таблица
с параметрами карточек пустая.

Динамичные карточки

Выбрана страница сайта: Примеры

3 Добавить карточку

Параметры карточки

№	Цвет	Параметры	Цвет	Толщина

пл	Изображение Заголовок Подзаголовок Текст Подвал Размер фона	текста	рамки	рамки	Группа Ссылка Файл Редактировать

Рис. 3.22. Внешний вид шаблона сагс1_ес1И1.Н1т1 при первоначальной загрузке

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

По нажатию на кнопку Добавить карточку откроется шаблон-форма сагс1_Гогт.111т1
(рис. 3.23).
Изображение:	На данный момент: -|1еД|1е 2л|?д 1 ‘Очистить Изменить: | Выберите оайл | Файл не выбран		
Заголовок:	Скумбрия		
Подзаголовок:	Натуральная в масле		
	Консервированная скумбрия, натуральная, с добзвл ен и ем ма ела, от произв. □дител я Вл а дкон". 250 гр., цена 105 руб.		
Текст карточки:		Л	
Подвал:	Всегда в наличии в нашем магазине!		
Размер карточки:	1Л'1с!Ж: ЗОгет;	1	
Фон карточки:	Ьа скдгшпб - со 1ог: 1^6(100, 100,100):		
Параметры текста:	Гб-61ех1:-ууЫе		
Цвет границы:	Ьогбег- зиссезБ		
Ширина границы:	Ьогбег Ьогбег-3		
Группа:	1		
Ссылка:	а		
Документ:	Выберите файл | Файл не выбран		
			
			

Рис. 3.23. Шаблон-форма сагс1_ас1с1.Н(т1 для формирования содержимого динамичной карточки

По нажатию на кнопку Сохранить параметры этой карточки будут сохранены в БД,
а пользователь будет возвращен в шаблон сагс1_ес1И.И1т1, где в таблице отразятся вве-
денные данные (рис. 3.24).

По нажатию на кнопку Изменить откроется форма для редактирования выбранной
карточки, а по нажатию на кнопку Удалить карточка будет удалена из БД.

Динамичные карточки

Выбрана страница сайта: Примеры

3 Добавить карточку

Параметры карточки

пп Изображение Заголовок Подзаголовок Текст

Подвал Размер Цвет фона

Параметры Цвет Толщина

текста рамки рамки Группа Ссылка Файл Редактировать

Скумбрия Натуральная в Консервированная Всегда в	илсНЬ:	ЬаскдгошхР

мзсле	скумбрия,	наличии	ЗОгет;	со!ог:гдЬ(100,

натуральная, с	в нашем	100 100);

добавлением	магазине!

|5-б (ей- ЬогРег- Ьогдег

«Ыхе зиссезз Ьогбег-3

масла, от
производителя
“Владкой . 250 гр.,
цена 105 руб.

Рис. 3.24. Шаблон сагс1_ес1И.Н1т1 после ввода содержимого динамичной карточки
Обратите внимание: при создании карточки в поле Группа стояла цифра 1. Это поле
служит для группировки карточек с выводом этой группы в заданную панель страницы
сайта, — если, например, на странице сайта имеются три панели: левая боковая, цен-
тральная и правая боковая. При этом поле Группа служит для идентификации этих па-
нелей. В качестве идентификатора можно выбрать любые числа или символы. В нашем
примере в качестве идентификаторов панелей выбраны числа: 0 — левая боковая па-
нель, 1 — центральная панель, 2 — правая боковая панель. В рассматриваемом случае
карточке была назначена группа 1 — значит, она будет отображаться в центральной
панели.

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

Итак, мы создали все модули, которые позволяют формировать динамичные карточки.
Теперь покажем, как динамичные карточки можно вывести на страницу сайта. Для это-
го создадим тестовую страницу (шаблон) с именем ехатр1е8_2.И1т1, а также соответст-
вующие маршрут и представление.

Код представления ехатр1ез_2 приведен в листинге 3.47.

Листинг 3.47. Представление ехатр1е§_2

################################

# Пример 2 для вывода карточек #
################################
с!еГ ехатр1ез_2 (гесрезГ) :

# Получить карточки страницы сайта (левый блок)
сагбз_1 = Сагб-ЪоЬдесбз.ГПбег(раде_1с1=1, дгоир=0)
# Получить карточки страницы сайта (центральный блок)
сагбз = Сагб_1 .оЬдесбз. Шбег (раде_1с1=1, дгоир=1)
# Получить карточки страницы сайта (правый блок)
сагс!з_г = Сагб_1.оЬдес1:5.Г111:ег(раде_1с1=1, дгоир=2)

сопбехб = {'сагбз': сагбз, ’сагбз_г’: сагбз_г, ’сагбз_1’: сагбз_1}
гебигп гепбег(гедиезб, ’тазбег/д1ача_3/ехатр1ез_2.Ылп1’, сопбехб)

В этом представлении создаются три объекта: сагбз 1, сагбз и сагбз г — в которые за-
гружаются карточки соответственно левого блока (левой панели), центрального блока
(центральной панели) и правого блока (правой панели). Все эти объекты через словарь
сопбехб передаются в шаблон ехатр1е8_2.К1т1.

Для активации представления ехатр1ез_2 в файле иг18.ру нужно создать ИКЪ-маршрут
(листинг 3.48).

Листинг 3.48. 11К1_-маршрут с именем ехатр1е§_2

рабЬ('д1ача_3/ехатр1ез_2/', чтемз.ехатр!ез_2, пате='ехатр1ез_2'),

Код шаблона ехатр1е8_2.И1т1 приведен в листинге 3.49.
Листинг 3.49. Шаблон ехатр1е8_2.Мт1

{% ехкепбз "зЬор/Ьазе.ЫтГ’ %}

{% Ыоск раде %}

<сНч с1азз=”сопка1пегЫ1и1с1 р-1" зку1е="Ьаскдгоипс1-со1ог :гдЬ (224, 255, 255) ;">

<61V с1азз="гом"> <!— Это начало строки —>

<!— Это левая панель —>

<скч с1азз="со1-4 со1-зт-4 со1-тб-4 со1-1д-2 со1-х1-2

кехк-сепкег ЬдЫпко Ьд-ораЫку-25">

<Ь6>Левая боковая панель</Н6>

<!— Показ карточек в левой панели—>
{% тпсЫбе "радез/сагс!_зНом_1 .Ыт1" %}

</Ыч> <!— Конец левой панели —>

<!— Это центральная панель —>

<сИч с1азз="со1-4 со1-зт-4 со1-т6-4 со1-1д-8 со1-х1-8 бехк-сепбег">

<сИч с1азз="гом кехк-сепкег">

<Ь1>Центральная панель</Н1>

</Ыч>

<сИч с1азз="гом бехб-сепбег тх-аибо">

<сИч с1азз="со1-12 со1-зт-12 со1-тс1-12 со1-1д-6 со1-х1-4
бехб-сепбег тх-аибо">

<!— Показ карточек в центральной панели—>
{% тпсЫбе "радез/сагсЫНом.ЫшГ' %}

</Ыч>

</Ыч>

</сИч> <!— Конец центральной панели —>

<!— Это правая панель —>

<сИч с1азз="со1-4 со1-зт-4 со1-тс!-4 со1-1д-2 со1-х1-2

бехб-сепбег ЬдЫпЛо Ьд-орас1бу-25">

<Ь6>Правая боковая панель</Н6>

<!— Показ карточек в правой панели—>
{% тпсЫбе "радез/сагс!_зНом_г .НбтГ' %}

</сНч> <!— Конец правой панели —>

</сЫ> <!— Конец строки —>

</(Ы> <!— Конец контейнера —>
{% епсЫоск раде %}

Шаблон ехатр1е8_2.И1т1 представляет собой демонстрационную страницу, состоящую
из трех панелей: левой боковой, центральной и правой боковой. В каждую панель с ис-
пользованием тега 1пс1ибе вставлен другой шаблон:

♦	в левую боковую панель — шаблон сагс1_81пош_1.И1т1;

♦	в центральную панель — шаблон сагс1_8Ио\л/.И1т1;

♦	в правую боковую панель — шаблон сагс1_81пош_г.1п1т1.
Коды шаблонов сагс1_8Ио\л/_1.И1т1, сагс1_8Ко\л/.И1т1 и сагс1_8Но\л/_г.Н1т1 представлены в лис-
тингах 3.50-3.52.

Листинг 3.50. Шаблон сагс1_8Ьо>л<_1.Ыт1

<!— Начало блока карточек —>

<сНч с1азз=”сопба1пег Пите! бехб-сепбег">

<сНч с1азз=”гом бехб-сепбег">

{% Тог сагб 1п сагс!з_1 %}

<!— Параметры карточки—>

<сНч с1азз=”сагб {{сагсГзеб_бехб}}

{{сагб.Ьогбег_со1ог}} {{сагс!.Ьогс1ег_з1хе}} тх-2 ту-2 тх-аибо”

збу1е=”{ {сагс!.сагс1_з1хе}} {{сагс!.Ьд_гдЬ}} ">

<!— Заголовок, подзаголовок—>

{% 1Т сагбЛ1Н1е %}

<Н5 с1азз=”сагб-б1Т1е бехб-сепбег">{ {сагб.ЫЛТе} }</Н5>

{% епсНГ %}

{% И сагб.зиЬН1б1е %}

<Н6 с1азз=”сагб-зиЬТ1б1е бехб-сепбег">{ {сагб.зиЬбгбТе} }</Н6>

{% епсНТ %}

<!— Тело карточки—>

<с11ч с!азз=”сагс1-Ьос1у ">

<!— Изображение—>

{% 1Т сагб.таде %}

<1тд згс=”{{ сагсПгтаде.иг! }}" с1азз="1тд-Т1и1сГ>

{% епсНТ %}

<!— Блок с текстом—>

{% 1Б сагсПбехб %}

<сНч с1азз="бехб-сепбег" збу1е="{{сагб.збу1е_ТопБ}}”>

<р с1азз="сагб-бехб">{ {сагбЛехб | ИпеЬгеакз}}</р>

</сНч>

{% епсНТ %}

</сНч>

<!— Подвал карточки—>

<сНч с1азз=”сагб-Тообег РехР-сепбег">

{% 1Т сагсПТообег %}

{{сагсГГообег}}

{% епсНТ %}

<!— Кнопка—>

{% 1Т сагб.Ипк %}

<а НгеТ=”Нббрз://{{сагсП Ипк}} /" с1азз="Ыт Ьбп-рглпагу Ьбп-зт”
багдеб="_Ь1апк”><1 с!азз="Ы Ь1-с1оис1-ир1оас1”></1> Перейти</а>
{% епсНТ %}

</сНч>

</сНч>

{% епбТог %}

</сНч>

</сНч>

<!— Конец блока карточек —>
Листинг 3.51. Шаблон сагс1_8Г10УУ.Г|(т1

<!— Начало блока карточек —>

<сНч с1азз="сопЬа1пег Т1ибб ЬехЬ-сеп11ег">

<с11ч с1азз="гом ЬехЬ-сепбег">

{% Тог сагб ап сагбз %}

<!— Параметры карточки—>

<с11у с1азз="сагб {{сагб.зебуЬехЬ}}

{{сагб.Ьогбег_со!ог}} {{сагб.Ьогбег_з1хе}} тх-2 ту-2 тх-аибо"

збу1е="{{сагб.сагб_з1хе}} {{сагб.Ьд_гдЬ}}">

<!— Заголовок, подзаголовок—>

{% И сагб.ЫЫе %}

<Н5 с1азз="сагб-ЫЫе ЬехЬ-сепбег">{{сагб.ЬгЬТе}}</Н5>

{% епббб %}

{% бб сагб.зиЬЬбЫе %}

<Н6 с1азз="сагб-зиЫ1бЫе ЬехЬ-сеп11ег">{ {сагб.зиЬЬбЫе} }</Н6>

{% епббб %}

<!— Тело карточки—>

<ббч с!азз=”сагб-Ьобу ">

<!— Изображение—>

{% бб сагб.таде %}

<1тд згс=”{{ сагб.бтаде.игб }}" с1азз="бтд-б1ибб">

{% епббб %}

<!— Блок с текстом—>

{% бб сагб.бехб %}

<ббч с1азз="кехб-сепбег" збубе="{{сагб.збу1е_бопб}}”>

<р с1азз="сагб-бехб">{{сагб.бехб|ИпеЬгеакз}}</р>

</б1Ч>

{% епб1Т %}

</б1Ч>

<!— Подвал карточки—>

<б1ч с1азз=”сагб-Тообег РехР-сепбег">

{% 1Т сагб.Тообег %}

{{сагб.Тообег}}

{% епб1Т %}

<!— Кнопка со ссылкой на внешний сайт—>

{% 1Т сагб.Ипк %}

<а НгеТ=”Нббрз://{{сагб.Ипк}}/" с1азз="Ьбп Ькн-ргшагу Ькп-зт”
Ьагдек="_Ыапк"><1 с!азз="Ы Ы-с1оиб-ир1оаб”></1> Перейти</а>
{% епбЬТ %}

<!— Кнопка со ссылкой на внутренний документ—>

{% 1Т сагб.ТНе %}

<а НгеТ="{{ сагб.ТНе.иг! }}" с1азз="Ыт Ыт-ргтагу ЬЬп-зт"
ЬагдеЬ="_Ыапк"><1 с!азз="Ы Ы-с1оиб-ир1оаб"></1> Открыть документ</а>
{% епбЬТ %}

</б1Ч>

</б1Ч>

{% епбТог %}
</сНч>

</сНч>

<!— Конец блока карточек —>

Листинг 3.52. Шаблон сагс1_8Г10>/у_г.Г|(т1

<!— Начало блока карточек —>

<сНч с1азз="сопба1пег Пик! бехб-сепбег">

<сНч с1азз=”гом бехб-сепбег">

{% Тог сагб 1п сагс1з_г %}

<!— Параметры карточки—>

<сНч с1азз=”сагб {{сагскзеб_бехб}}

{{сагб.Ьогбег_со1ог}} {{сагс1.Ьогс1ег_з1хе}} тх-2 ту-2 тх-аибо"

збу1е="{{сагб.сагб_з1хе}} {{сагб.Ьд_гдЬ}}">

<!— Заголовок, подзаголовок—>

{% И сагб.ЫЫе %}

<Н5 с1азз="сагб-ЫЫе бехб-сепбег">{ {сагб.ЫЫе} }</Н5>

{% епсНб %}

{% 16 сагб.зиЬЫЫе %}

<Н6 с1азз="сагб-зиЬЫЫе бехб-сепбег">{ {сагб.зиЬЫЫе} }</Н6>

{% епсНб %}

<!— Тело карточки—>

<сНч с1азз=”сагб-Ьобу ">

<!— Изображение—>

{% 16 сагсЫтаде %}

<1тд згс=”{{ сагсЫтаде.иг! }}" с1азз="1тд-61и1сГ>

{% епсНб %}

<!— Блок с текстом—>

{% бб сагсКбехб %}

<сИч с1азз="бехб-сепбег" збу1е="{{сагб.збу1е_ТопБ}}”>

<р с1азз=”сагб-бехб">{{сагб.бехб|ИпеЬгеакз}}</р>

</сНч>

{% епсНТ %}

</сНч>

<!— Подвал карточки—>

<сНч с1азз=”сагб-Тообег РехР-сепбег">

{% 1Т сагсПТообег %}

{{сагсП Тообег}}

{% епсНб %}

<!— Кнопка—>

{% 1Т сагб.Ипк %}

<а НгеТ=”Нббрз://{{сагсПИпк}}/" с1азз="Ьбп Ьбп-рггтагу Ьбп-зт”
багдеб="_Ыапк"><1 с1азз="Ы Ь1-с1оис1-ир1оасГ></1> Перейти</а>
{% епсНб %}

</сНч>

</сНч>

{% епбТог %}

</сНч>

</сНч>

<!— Конец блока карточек —>
Все три эти шаблона имеют одинаковую структуру. В каждом шаблоне с использова-
нием тега В)ап§о Гог организован цикл по карточкам (сага_1, сага, сага_г). В теле элемен-
тов карточек задействуется тег В)ап§о и, в котором проверяется наличие или отсутст-
вие в БД сведений об элементе карточки. Если сведения об элементе в БД присутству-
ют, то он будет отображен в шаблоне.

* * *

Здесь мы рассмотрели код всех модулей и шаблонов, которые обеспечивают формиро-
вание и вывод динамичных карточек. Имея такой набор, администраторы сайта могут,
не меняя программный код, добавить любое количество карточек на любую страницу
сайта (и даже в любую панель страницы), изменять содержание карточек и менять
дизайн элементов карточек. При удалении карточки из БД она автоматически исчезнет
со страниц сайта. Рассмотрим теперь, как работает наш программный код и как дина-
мичные карточки выглядят на страницах сайта.

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

Проверим работу созданных нами модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Стра-
ница ехатр1е8_2.Мт1.

При вызове модуля отображения динамичных карточек шаблон ехатр1е8_2.К1т1 (при
наличии в БД сведений только об одной карточке) будет выглядеть так, как показано на
рис. 3.25).

Левая боковая панель

Центральная панель

Правая боковая панель

Скумбрия

Натуральная в масле

Консервирован ная
скумбрия, натуральная, с
добавлением масла, от
производителя
"Владкой”.
250 гр., цена 105 руб.

Всегда в наличии в
нашем магазине!
Динамичные карточки

Выбрана страница сайта: Примеры

Добавить карточку

Параметры карточки

№	Параметры Цвет Толщина

пп Изображение Заголовок Подзаголовок Текст	Подвал Размер Цвет фона текста рамхи рамки Группа Со

Скумбрия

Натуральная в Консервированная Всегда в
масле	скумбрия,	наличии	в

натуральная, с	нашем

добавлением	магазине!

масла, от
производителя
"Владкой .250 гр»
цена 105 руб.

лкДЬ:	Ьаскдгоипа-	Гз-б (ех1-

ЗОгегтг	со1ог:гдЬ(100, \тЬке

100,100):

Ьогбег- Ьогбег 1 Не
зиссезз Ьогбег-3

Наш магазин
на ремонте

Внимание! Наш
магазин на 3 дня
закрывается на
ремонт и
реконструкцию.

Интернет	«кЙЬ:	Ьаскдгоипб-	,5-6 (ехЬ

заказы и	21гет;	со1оггдЬ(25б, «Ые

доставка	0,0):

продолжают
работать!

Ьогбег- Ьогбег 0 Не
зиссезз Ьогбег-3

Погода

Прогноз
погоды в
любом
регионе

Здесь вы можете	Приятного

познакомится с	отдыха

прогнозом погоды
в любом регионе;

«1сКК:	Ьаскдгоцпб-	1з-б (ей-

21гет.*	со1опгдЬ(0,	«Ые

153,0);

Ьогбег- Ьогбег 2	«V.

зиссезз Ьогбег-3

Рис. 3.26. Формирование содержимого динамичных карточек
для левой и правой панелей страницы сайта

Теперь с использованием модулей ввода и корректировки динамичных карточек доба-
вим на эту страницу еще две карточки — в левую и в правую панель (рис. 3.26).

После этого страница сайта будет выглядеть следующим образом (рис. 3.27).

Левая боковая панель

Центральная панель

Правая боковая панель

Ремонт

Наш магазин на
ремонте

Внимание!

Наш магазин на 3
дня закрывается
на ремонт и
реконструкцию.

Интернет заказы
и доставка
продолжают
работать!

Погода

Прогноз погоды в
любом регионе

Здесь вы можете
познакомится с
прогнозом
погоды в любом
регионе!

Приятного
отдыха
Ф Перейти
* * *

Подводя итоги этого раздела, можно сделать следующие выводы. Написание про-
граммного кода для формирования динамичных карточек — достаточно трудоемкий
процесс, однако эти трудозатраты окупаются при сопровождении сайта. Администра-
торы сайта получают возможность добавлять любое количество динамичных карточек
в любые фрагменты любой страницы сайта, а также изменять содержимое карточек
и их оформление. При этом им не требуется вносить какие-либо изменения в код про-
граммных модулей сайта.

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

При проектировании сайта также можно создать и карусель с динамичной загрузкой
слайдов, содержащих изображения и текстовую информацию. В этом случае админист-
раторы сайта через административную панель смогут изменять как количество слайдов,
так и их содержание (изображения и поясняющие надписи).

При размещении на страницах сайта динамичной карусели необходимо все ее элементы
хранить в базе данных — для этого мы сейчас создадим модель сагоизе! и функцию
гепате шаде, позволяющую изменять имена изображений, загруженных на слайды кару-
сели (листинг 3.53).

Пояснение

Поскольку публичные серверы не принимают имена изображений на кириллице, наша мо-
дель сопровождается функцией автоматического изменения имени загружаемого изобра-
жения, которая создает на сайте удаленного сервера папку с именем 1таде_сагои8е1, в ко-
торую будут сохраняться загружаемые изображения с именами 1тд_<1с1 записи в БД>.рас-
ширением

Листинг 3.53. Модель Сагоизе! и функция гепате_!таде

#####################################################

# Функция изменения имени изображения для карусели #

#####################################################

бе! гепате_1таде(бпзбапсе, !11епате):

ир!оаб_бо = '!таде_сагоизе!'

ехб = ГИепате.зрИТ ('.') [-1]

п_гес = 1еп(Сагоизе!.оЬдесбз.а!1())

# получить 16 последней записи из модели карусели

1! п_гес == 0:

тах_гес = 0

е!зе:

тах_гес = Сагоизе!.оЬдесбз.а!1(). 1азб().16

тах_16 = тах_гес +1 #16 следующей записи

рйобо = ’!тд_' + збг(тах_!6)

1! лпзбапсе.рк: # текущий Ю

Шепате =	^огтаб (1 !тд_', апзбапсе .рк, ехб)
еИВ рйоко: # имя файла - текущий Ю + 1

ЕНепате = ’{}.{}'• ЕогтаЕ (рйобо, ехб)
е!зе: # случайное имя файла

ЕНепате = ’{}{}.{}’. Гогта1с ('1тд_’ Л ии!б4 () .Нех, ехб)
# возвращает полный путь к файлу
гекигп оз.раЕЪ.до!п(ир1оас1_Ео, ЕНепате)

#####################################
# Модель для формирования карусели #
#####################################
с1азз Сагоизе!(тобе!з.Мобе!):

Е!Е1е_1 = тобе!з .СйагЕ1е!б (тах_1епдб!1=200,

пи!1=Тгие, Ыапк=Тгие,

чегбозе_пате="Верхняя надпись на изображении")

Е!Е1е_2 = тобе!з .СйагЕ1е!б (тах_1епдк!1=200,

пи!1=Тгие, Ыапк=Тгые,

чегбозе_пате="Средняя надпись на изображении")

Е!Е1е_3 = тобе!з .СйагЕ1е!б (тах_1епдк!1=200,

пи!1=Тгие, Ыапк=Тгые,

чегбозе_пате=" Нижняя надпись на изображении")

гтаде = тобе!з.1тадеЕ1е!б(ир!оаб_ко='гепате_1таде',
пи!1=Тгие, Ыапк=Тгые,
чегЬозе_пате="Изображение")

оЬдескз = тобе!з.Мападег

беЕ __зкг__(зе!Е) :

гекигп зе1Е.Е1Е1е_1

В модели сагоизе! созданы следующие поля:

♦	Ш1е_1 — верхняя надпись на изображении карусели;

♦	б!б1е_2 — средняя надпись на изображении карусели;

♦	б!б1е_з — нижняя надпись на изображении карусели;

♦	таде — изображение на слайде карусели.

Надо не забыть выполнить и процедуру миграции:

руЕйоп тападе.ру такетФдгабгопз
руЕйоп тападе.ру тФдгайе

Чтобы персонал мог удаленно менять содержимое слайдов карусели через администра-
тивную панель, модель сагоизе! нужно зарегистрировать в файле ас1т1п.ру (лис-
тинг 3.54).

Листинг 3.54. Регистрация модели Сагоизе! в файле ас1тт.ру

Егот .тобе!з Сагоизе!

#	Регистрация модели Сагоизе!

абтгп.згЕе.гедгзйег(Сагоизе!)
Для демонстрации динамичной карусели в меню или в теле одного из шаблонов надо
создать ссылку для вызова страницы, содержащей карусель. Эта ссылка может иметь
следующий код (листинг 3.55).

Листинг 3.55. Ссылка для вызова динамичной карусели

<а Нге!="{% иг! ’тазкег:сагоизе!' %}" 1загде1з ="_Ыапк">Страница сагоизе!.Ькт!</а>

По этой ссылке будет инициирован ИКЬ-маршрут (листинг 3.56).

Листинг 3.56. 1Ж1_-маршрут сагоизе!

#	показать карусель

ракк(’сагоизе!’, VIемз.сагоизе!, паше='сагоизе!'),

При адресации к этому маршруту будет инициировано представление сагоизе! (лис-
тинг 3.57).

Листинг 3.57. Представление сагоизе!

!гот .тос!е1з шрогк Сагоизе!

#########################

#	Динамичная карусель #

#########################

Не! сагоизе!(гедиезк):

шадез = Сагоизе!. оЬд ескз .а!1 ()

гекигп гепНег(гедиезк, 'тазкег/д1ача_3/сагоизе1.ккт!', {'шадез': шадез})

В этом представлении создается объект шадез, в который загружаются все записи из
модели сагоизе! (т. е. все слайды). Затем загруженные слайды карусели через словарь
передаются в шаблон с именем сагоизе!.И1т! (листинг 3.58).

Листинг 3.58. Шаблон сагоизе!.Мт!

{% ехкепНз "зНор/Ьазе.Нкт!" %}

{% Ыоск НеаНег %}

<сИч с!азз=”гом кехк-зкагк тх-2">

<НЗ>Динамичная карусель</НЗ>

</сИч>

{% епсЫоск НеаНег %}

{% Ыоск сопкепк%}

<!— Начало карусели —>

<сНч 1с1=”сагоизе1Ехатр1еСопкго1з" с!азз="сагоизе! зИНе" Нака-Ьз-г!с1е="сагоизе1">

<!— цикл по слайдам в теле карусели—>

<сНч с!азз=”сагоизе!-!ппег">

{% ког шаде !п шадез %}

<сЦу с!азз="сагоизе!-!кет {% 1! !ог!оор.ктгзк %}аск!че{% епсНГ %}">
<!— вывод изображения—>

<тд згс=" {{ таде. таде. иг1 }}”

збу1е="Ье1д]1б: 200рх;"

с1азз=”б-Ь1оск м-100 " а1б="таде">

<!— вывод текста над изображением—>

<61у с1азз=”сагоизе1-сарб!оп б-попе б-шб-Ь1оск">

{% И таде.б1б1е_1 %}

<Ы с1азз="бехб-мЬ1бе">{ { таде.б1б1е_1 }}</Ы>

{% епбИ %}

{% И таде.б1б1е_2 %}

<Ы с1азз="бехб-м111бе">{ { таде.б1б1е_2 }}</Ы>

{% епбИ %}

{% И таде.ббб1е_3 %}

<Ы с1аз8="бехб-мЬ1бе">{ { таде.б1б1е_3 } }</Ы>
{% епбИ %}

</бт>

</бт>

{% епсНог %}

</б1У>

<!— кнопка прокрутки к предыдущему слайду—>

сЬиббоп с1азз=”сагоизе1-сопбго1-ргеу"

буре="Ьиббоп”

баба-Ьз-багдеб=”#сагоизе1Ехатр1еСопбго1з"

баба-Ьз-зИбе="ргеу">

<зрап с1азз=”сагоизе1-сопбго1-ргеу-1соп” аг1а-Ыббеп=”бгие”х/зрап>

<зрап с1азз=”у1зиа11у-Ыббеп">Ргеу1оиз</зрап>

</Ьиббоп>

<!— кнопка прокрутки к следующему слайду—>

сЬиббоп с1азз="сагоизе1-сопбго1-пехб" буре="Ьиббоп"

баба-Ьз-багдеб="#сагоизе1Ехатр1еСопбго1з"

баба-Ьз-з11бе=''пехб">

<зрап с1азз=”сагоизе1-сопбго1-пехб-1соп” аг1а-Ыббеп=”бгие”х/зрап>

<зрап с1азз=”у1зиа11у-Ыббеп">Мехб</зрап>

</Ьиббоп>

</бт>

<!— Конец карусели —>
{% епбЫоск сопбепб %}

В этом шаблоне выделены два блока: блок, содержащий карусель, и блок с кнопками
прокрутки слайдов. С использованием тега {% и 1ог1оор.Пгзб %}асбте{% епсНб %} первый
слайд (независимо от их количества) будет активным и показан первым. Поскольку
некоторые элементы слайда могут быть не заполнены, то они выводятся в теге и (про-
веряется условие наличия данных в элементе). В теге цикла загрузки слайдов карусели
содержатся ссылки на фоновые изображения слайдов и на надписи, которые будут
показаны над фоновыми изображениями.
Теперь в административной панели можно сформировать содержание слайдов карусе-
ли. Пример интерфейса административной панели при формировании содержания
слайдов карусели приведен на рис. 3.28, а страница сагоизе!.Мт! с данными динамичной
карусели, полученными из БД, показана на рис. 3.29).

Администрирование О]апдо

Начало МаЯег Саппизей Добавь □ гало к-е

Чэн нит-5 печатать для фил ьтояции_

Добавить сагоизе!

МАБ ТЕК

А.ССОГЙ1ПП_15	+ Добавить
Ас<ОГЙ1ПП5	+ Добавить
Саг<1_15	+ Добавить
СагсЬ	+ Добавить
Сагпи5е1$	+ Добавить
Радей	+ Добавит!:
ТаЬБ.асогч! 5	+ Добавить

зеркнял надпить на
изображении:

Средняя надпись на
изображении:

Нижняя надпит!: на
изображении:

Изображение;

Кслбзсэ вареная и копченая

| Выверите файл | Кс1ЬзЕВ.]рд

Рис. 3.28. Формирование слайда динамичной карусели в административной панели Щапдо

Динамичная карусель

Рис. 3.29. Внешний вид слайдов динамичной карусели
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Стра-
ница сагоизе!.Ыт!

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

В предыдущем разделе было показано, как с использованием фреймворка ВооЫгар
создать динамичную карусель. Для динамичной карусели не нужно менять код страни-
цы, однако недостатком этого метода является то, что динамичная карусель обычно
привязана к конкретной странице сайта.

Тем не менее при проектировании сайта можно создать такую модель для динамичных
каруселей, которая обеспечит создание неограниченного количества этих элементов,
позволит добавить их на любую страницу сайта или удалить оттуда и изменять как со-
держимое, так и внешний интерфейс элемента. При этом все эти действия можно будет
выполнять не только через административную панель сайта, но и через его интерфейс
в личном кабинете администраторов сайта. Правда, для этого понадобится создать на
сайте личный кабинет для административного персонала и набор необходимых про-
граммных модулей для редактирования динамичных каруселей.

Посмотрим на упрощенном примере, как это можно сделать, опустив для простоты из-
ложения реализацию личного кабинета, а показав только формирование модели дина-
мичной карусели и модулей для ее редактирования.

Чтобы на одной странице сайта можно было выводить несколько несколько каруселей,
создадим модель Сагоизе1_1 для хранения каруселей и функцию гепате_сагоизе! для авто-
матического изменения имен изображений, загруженных на слайды карусели (лис-
тинг 3.59).

Пояснение

Поскольку публичные серверы не принимают имена изображений на кириллице, наша мо-
дель сопровождается функцией автоматического изменения имени файла загружаемого
изображения, которая создает на сайте удаленного сервера папку с именем сагоизе!, в ко-
торую будут сохраняться загружаемые файлы изображений с именами саг_<!с! записи
в БД>.<расширение>.

Листинг 3.59. Функция гепате_сагоизе1 и модель СагоизеМ

#####################################################
# функция изменения имени изображения для карусели #
#####################################################
бе! гепате_сагоизе1(Фпзбапсе, !Пепате):

ир1оаб_бо = 'сагоизе!'

ехб = ГНепате.зрИб ('.') [-1]

п_гес = 1еп(Сагоизе!.оЬдесбз.а!1())

# получить 16 последней записи из модели карусели

1! п_гес == 0:

тах гес = 0
е!зе:

тах_гес = СагоизеТ.оЬдескз .а!1 () . 1азк() .16

тах_16 = тах_гес + 1 #16 следующей записи
рйоко = ’саг_' + зкг(тах_16)

1к Фпзкапсе.рк: # текущий Ю

Шепате = '{}{}.{}’. когтак (' саг_', апзкапсе .рк, ехк)
еИк рйоко: # имя файла - текущий Ю + 1

ГНепате = '{}•{}’• Вогта к (ркоко, ехк)
е1зе: # случайное имя файла

ВПепате = '{}{}•{}'•когтак('саг_', иш.64 () .Нех, ехк)
# возвращает полный путь к файлу
гекигп оз.ракй.докп(ир1оаб_ко, кНепаше)

#####################################
# модель для формирования карусели #
#####################################

с1азз Сагоизе1_1 (тобекз .Мобе!) :

раде = тобекз.ЕогеФдпКеу (Радез,

чегбозе_пате="Страница сайта",
пи11=Тгие, Ыапк=Тгие,
оп_6екеке=тобе1з.САЗСАВЕ)

к1к1е_1 = тобекз.СйагЕкекб(тах_1епдкк=200,

пи!1=Тгие, Ыапк=Тгие,

чегбозе_пате="Верхняя надпись на изображении")
к1кке_2 = тобекз.СйагЕкекб(тах_кепдкк=200,
пи!1=Тгие, Ыапк=Тгие,

чегбозе_пате="Средняя надпись на изображении")
к1кке_3 = тобекз.СйагЕкекб(тах_кепдкк=200,
пи!1=Тгие, Ыапк=Тгие,

чегбозе_пате=" Нижняя надпись на изображении")
таде = тобе!з. 1тадеЕ1е1б(ир1оаб_ко=гепате_сагоизе1,
пи!1=Тгие, Ыапк=Тгие,
чегбозе_пате="Изображение ")

зек_кехк = тобе!з .СйагЕ1е1с1(тах_1епд1±1=50,

беРаи1к='Ы кехк-мМке',

пи!1=Тгие, Ыапк=Тгие,
чегЬозе_пате="Параметры текста")
оЬдескз = тобе!з.Мападег

бек __зкг__(зе!Р) :

гекигп зе!к.к1к1е_1

В модели сагоизе! 1 созданы следующие поля:

♦	раде — страница сайта, на которой будет показана карусель;

♦	к1к1е_1 — верхняя надпись на изображении;

♦	к1к1е_2 — средняя надпись на изображении;

♦	к1к1е_з — нижняя надпись на изображении;
♦	1таде — изображение, загруженное на слайд карусели;

♦	зер_рехр — параметры текста слайда карусели (цвет и размер шрифта).

Обратите внимание на импорт дополнительных модулей оз и ии1с14 — они необходимы
для работы функции гепате_сагоизе1.

Надо также иметь в виду, что у этой модели — в зависимости от характера разрабаты-
ваемого приложения — может быть и совершенно другой набор полей.

Не забудьте выполнить процедуру миграции:

руРЬоп тападе.ру такетйдгаРгопз

руРЬоп тападе.ру тгдгаРе

Чтобы можно было заполнять данными созданную модель, ее нужно зарегистрировать
в файле ас1т1п.ру текущего приложения:

Ргот сЦ апдо. сопРгТЬ лпрогр асЬпгп

Ргот ,тос!е1з йпрогр, Сагоизе1_1

#	Регистрация модели Сагоизе11

аСтгп.згРе.гедгзРег(Сагоизе1_1)

Для заполнения слайдов карусели данными через интерфейс пользователя нам понадо-
бится форма, поэтому В файле Гогтз.ру МЫ создадим форму СагоизеТГогт (листинг 3.60).

Листинг 3.60. Форма Сагои8е1Рогт

#########################################

#	Форма для создания/изменения карусели #
#########################################

Ргот .тос!е1з трогр Сагоизе1_1

с!азз Сагоизе1Гогт(1огтз .МойеТГогт) :

с!азз Мека:

тойе! = Сагоизе1_1

НеМз = ['Р1Р1е_1', ’Р1Р1е_2', 'Р1Р1е_3\ 'гтаде', 'зеР_РехР']
# назначаем полю другой виджет

ЩЦдеРз = (’Р1Р1е_1‘: Рогтз.ТехРагеа (аРРгз={'гомз': 3, ’со1з': 40}),
’Р1Р1е_2': Рогтз.ТехРагеа(аРРгз={'гомз': 3, ’соТз’: 40}),
’Р1Р1е_3': Рогтз.ТехРагеа(аРРгз={’гомз': 3, ’соТз': 40})}

В этой форме из списка полей для ввода исключено поле раде, для некоторых полей
изменен формат поля ввода текстовых данных.

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

Чтобы получить возможность в интерфейсе сайта создавать динамичные карусели, не-
обходимо сформировать следующий набор модулей:

♦	для редактирования динамичных каруселей;

♦	для добавления динамичных каруселей;
♦	для обновления динамичных каруселей;

♦	для удаления динамичных каруселей.

Код представления (ухеду) сагоизе1_есПР для редактирования динамичных каруселей при-
веден в листинге 3.61.

Листинг 3.61. Представление (у|еш) сагоизе1_ес1й

#######################################
# Создание/изменение слайдов карусели #
#######################################
с!еГ сагоизе1_есПР (гедиезР) :

#	16 текущей страницы и сама страница

!6_раде = 1

Рек_раде = Радез. оЬд есРз. дек (1с1=1с1_раде)

гедиезР.зеззлоп['1с1_раде'] = 1с1_раде

#	получить слайды карусели текущей страницы

сагоизе! = Сагоизе1_1 .оЬдесРз. ГНРег (раде_1с!=1с1_раде)

#	показать таблицу со слайдами карусели

сопРехР = {"сагоизе!": сагоизе!, "Рек_раде": Рек_раде}

геРигп гепбег(гедиезР, ”тазРег/д1ача_3/сагоизе1_есПР.ЬРтГ', сопРехР)

В этом представлении в объект Рек раде загружена текущая страница на основе ее иден-
тификатора в БД (1б_раде=1), а в объект сагоизе! из БД загружены все карусели текущей
страницы. Эти объекты через словарь сопРехР передаются в шаблон сагои8е1_ес1И.И{т1,
который имеет следующий код (листинг 3.62).

Листинг 3.62. Шаблон сагои8е1_есЩ.Ыт1

{% ехРепбз "зЬор/Ьазе.ЬРт!" %}

{% Ыоск Ьеабег %}

<сПч с!азз="гом РехР-зРагР тх-2">

<ЬЗ>Динамичная карусель</НЗ>

</сПч>

{% епсЫоск Ьеабег %}

{% Ыоск сопРепР%}

<сИч с!азз="гом РехР-зРагР">

<р>Выбрана страница сайта: {{Рек_раде.паше}}</р>

</сИч>

ссПч с!азз="гом РехР-зРагР 1Ь-2">

<сПч с!азз="со!-2">

<а Ьге!="{% иг! ’тазРег:сагоизе!_аскГ %}"
с!азз="ЬРп ЬРп-рг!тагу">

<! с!азз="Ы Ы-баРаЬазе-абб Рз-5"></!> Добавить слайд</а>
</с1гу>

</сНу>

<сИу с1азз="гом РехР-зРагР”>

<сИу с1азз="со1-10”>

<р>Слайды карусели</р>

<сИу зРу1е=”оуегР1ом:зсго11;">

<1аЫе с1азз=”РаЫе РаЫе-зРгарес! РаЫе-Ьогйегес! РехР-зРагР РаЫе-зиссезз”>

<РЬеас1>

<рг>

<РЬ>Ю</РЬ>

<РЬ>Заголовок 1</РЬ>

<РЬ>Заголовок 2</РЬ>

<РЬ>Заголовок 3</РЬ>

<РЬ>Изображение</РЬ>

<РЬ>Параметры текста</РН>

<РЬ>Редактировать</РН>

</Рг>

</РЬеас1>

{% Рог оЬд ап сагоизе! %}

<РЬос1у>

<Рг>

<Рс1> {{Рог1оор. соипРег }} </Рс1>

{% 1Р оЬд.Р1Р1е_1 %}

<РЙ>{ { о!^.Р1Р1е_1 }}</Рс1>

{% е!зе %}

<Ы></Рс1>

{% епсНР %}

{% 1Р оЬд.Р1Р1е_2 %}

<РЙ>{ { оЬ].Р1Р1е_2 }}</Рс1>

{% е!зе %}

<Ы></Рс1>

{% епсНР %}

{% 1Р оЬд.Р1Р1е_3 %}

<РЙ>{{ оЬ].Р1Р1е_3 }}</Рс1>

{% е!зе %}

<Рс1х/Рс1>

{% епсНР %}

{% 1Р окд.шаде %}

сРеЗхшд згс=”{{ оЬд .нпаде.иг! }}" а1Р="соппесР"
зРу1е="тах-Ие1дкР: 100рх"х/Рс1>

{% е!зе %}

<ЫХ/Рс1>

{% епсНР %}

<Ы>{ { оЬд . зеР_РехР } }</Рс1>
<ы>

<а ЬгеТ="{% иг1 'тазкег:сагоизе!_ирсГ 1с1=оЬз . 1с1 %}"

с!азз="Ькп Ькп-ргттагу Ькп-зт ту-1">

<1 с1азз=”Ы Ы-гереак"х/1>Изменить</а>

<а ЬгеТ="{% иг1 'тазкег :сагоизе1_с!е1' 1с1=оЬз . 1с1 %}"

с!азз="Ькп Ькп-бапдег Ыт-зт ту-1">

<1 с1азз="Ы-кгазйЗ"></1> Удалить</а>

</кб>

</кг>

</кЬос!у>

{% епсИог %}

<	/1аЫе>

<	/сЫу>

<	/сИч>

</сПч>

{% епбЫоск сопкепк%}

В этом шаблоне создана кнопка добавить слайд, которая активирует представление с име-
нем сагоизе1_абб по следующей ссылке:

<а ЬгеТ="{% иг1 'тазкег:сагоизе1_а66' %}"

с1азз=”Ып Ып-рг1тагу">

<1 с1азз=”Ы Ы-бакаЬазе-асй Тз-5"></1> Добавить слайд</а>

После этой кнопки идет таблица, в которой отображается информация о созданных
слайдах карусели, — в каждой ее строке имеются две кнопки:

♦	изменить — для изменения сведений о слайде;

♦	Удалить — для удаления слайда.

Эти кнопки активируют представления с именами: сагоизе1_ирб и сагоизе1_бе1 по сле-
дующим ссылкам:

<а ЬгеТ="{% иг1 'тазкег:сагоизе1_ирб' 1б=оЬд.1б %}"

с1азз="Ып Ькп-ргнпагу Ыт-зт ту-1">

<1 с1азз="Ы Ы-гереак"></1> Изменить</а>

<а ЬгеТ="{% иг1 'тазкег:сагоизе1_6е!' 1с1=оЬ].1с1 %}"

с!азз="Ькп Ькп-бапдег Ькп-зт ту-1">

<1 с1азз="Ы-кгазйЗ"></1> Удалить</а>

Код представления сагоизе1_абб приведен в листинге 3.63.

Листинг 3.63. Представление (у|еу\л) сагоизе1_ас1с1

#############################

# Добавить слайд к карусели #

#############################

6еТ сагоизе!_а66(гедиезк):

# возврат после ввода данных

1к гедиезк.текЬоб == "РОЗТ":

когт = Сагоизе1Гогт(гедиезк.РОЗТ, гедиезк.ПЬЕЗ)
# получить йб текущей страницы

М_раде = гедиезк.зеззтоп[' 1с1_раде' ]
ББ Богт.Б5_уа1Бб() :

#	создание в БД новой записи об объекте

СагоизеБ_Б.обдесБз.сгеабе(

ББББе_Б=Богт.сБеапеб_баба.деБ('ББББе_1'),

ББББе_2=Богт.сБеапеб_баБа.деБ('ББББе_2'),

ББББе_3=Богт. сБеапеб_баБа. деБ (' ББББе_3'),
Бтаде=Богт.сБеапеб_баБа.деБ(' Бтаде'),
зеБ_БехБ=Богт. сБеапеб_баБа.деБ('зеБ_БехБ'),
раде_Бб=Бб_раде)

геБигп гебБгесБ (геиегзе('тазБег:сагоизеБ_ебББ'))
е1зе:

#	возврат к форме для исправления ошибок

геБигп гепбег(гедиезБ, 'тазБег/дБауа_3/сагоизеБ_Богт.ББтБ', {'Богт': Богт})
е!зе:

#	Формирование формы для ввода данных

Богт = СагоизеБЕогт()
сопБехБ = {'Богт': Богт}
# шаблон с формой для ввода/корректировки слайда
геБигп гепбег(гедиезБ, ’тазБег/дБауа_3/сагоизеБ_Еогт.ББтБ', сопБехБ)

В этом представлении создается объект Богт, в который загружается форма
СагоизеБЕогто. Эта форма через словарь сопБехБ передается в шаблон сагои8еМогт.И1т1,
код которого приведен в листинге 3.64.

Листинг 3.64. Шаблон сагои8е1Тогт.Ыт1

{% ехБепбз "зйор/Ьазе.ББтБ" %}

{% ЬБоск сопБепБ %}

<Богт асББоп=”” теБйоб=”розБ" епсБуре="тиБББрагБ/Богт-баБа”>

{% сзгБ_Бокеп %}

<БаЬБе сБазз=”БехБ-зБагБ">

{{ Богт.аз_БаЬБе }}

</БаЬБе>

<а ЬгеБ=”]ауазсгБрБ:йБзБогу.до(-Б)" сБазз="ЬБп ЬБп-зиссезз ЬБп-зт”>

<Б сБазз=”ЬБ ЬБ-аггом-БеББ-здиаге"х/Б> Отмена</а>

<БприБ Буре=”зиЬтББ” сБазз="ЬБп ЬБп-ргБтагу ЬБп-зт" уаБие=’’Сохранить”>

<Б сБазз=”ЬБ ЬБ-баБаЬазе-абб Бз-3"х/Б>

</Богт>

{% епбЬБоск %}

Этот шаблон представляет форму, в которой в виде таблицы отображаются поля для
ввода данных: { Богт.аз БаЬБе }. Здесь же имеются две кнопки: Отмена — для отмены
сохранения введенной информации и возврата к предыдущему окну и сохранить — для
сохранения введенной информации и возврата к предыдущему окну.

При возврате из этой формы в представление сагоизеБ абб там происходит сохранение
в БД сведений о слайде динамичной карусели.

Код представления сагоизеБ ирб приведен в листинге 3.65.
Листинг 3.65. Представление (у|еуу) сагоизе1_ирс1

#	############################

#	Обновить слайд к карусели #

#	############################

беб сагоизе!_ирб(гедиезб, 16):

#	получение сведений об объекте из БД

зПбе = деб_оЬдесб_ог_404(Сагоизе1_1, 16=16)

#	возврат после ввода данных

1	Т гедиезб.тебЬоб == "РОЗТ":

Тот = СагоизеТЕот (гедиезб. РОЗТ, гедиезб.ПЬЕЗ, бп1б1а1={

' бйб1е_1 ’: зПбе. бйб1е_1,

' б1б!е_2 ’: зПбе. ббб!е_2,

’ б1б!е_3': зПбе. б!б1е_3,

' таде': зПбе.таде,

' зеб_бехб': зПбе. зеб_бехб
})

1Т Тот.бз_ча1бб() :

#	получение сведений об объекте формы после корректировки данных
з1ббе.ббб1е_1 = Тот.с1еапеб_6аба.деб (’бЬб!е_1 ’)
з1ббе.ббб1е_2 = Тот.с1еапеб_6аба.деб ('ббббе_2')
зИ6е.б1б1е_3 = Тот.с1еапеб_6аба.деб ('бЬб1е_3')
зПбе. таде = Тот. с1еапеб_6аба. деб (' таде')
зП6е.зеб_бехб = Тогт.с1еапеб_6аба.деб ('зеб_бехб')

#	сохранение изменений об объекте в БД
зИбе.заче ()

гебигп геббгесб(гечегзе('тазбег:сагоизе!_е61б'))
е!зе:

#	возврат к форме для исправления ошибок

гебигп гепбег (гедиезб, 'тазбег/д1ача_3/сагоизе1_богт.Ьбт1', {'Тот': Тот})
е!зе:

#	загрузка в форму сведений об объекте

Тот = Сагоизе1Еот(бпзбапсе=з1б6е)
сопбехб = {'Тот': Тот}

# шаблон с формой для ввода/корректировки слайда

гебигп гепбег(гедиезб, 'тазбег/д1ача_3/сагоизе1_Тот.Ьбт!', сопбехб)

Это представление получает идентификатор редактируемого слайда карусели (бб), на
основе которого в объект збббе из БД загружаются сведения об этом слайде. После чего
создается объект Тот, в который загружается форма саюизетгото с информацией о те-
кущем слайде карусели. Эта форма через словарь сопбехб передается в шаблон
сагои8е1_1Ъгт.И{т1. При возврате из этого шаблона-формы в представление саюизеТ ирб
там происходит сохранение в БД сведений о слайде динамичной карусели.

Код представления сагоизеТ бе! приведен в листинге 3.66.
Листинг 3.66. Представление (у|еу\л) сагоизе1_с1е1

############################

# Удалить слайд карусели #
############################
с!еГ сагоизеб_6еб (гедиезб, 66) :

#	загрузить текущий объект по 66

оЬд = деб_оЬдесб_ог_404(Сагоизе1_1, 16=16)

#	возврат из формы

66 гедиезб.тебйоб == "РОЗТ":

66 'уез' бп гедиезб.РОБТ:

# удаление сведений об объекте из БД

Сагоизе1_1.обдесРз.деб(16=16).бебебе()

гебигп геббгесб(геуегзе('шазбег:сагоизе6_еббб'))

#	загрузка в сопбепб сведений об объекте

бхбб = 'Будет удален слайд карусели'

6е1_рго6 = обз.ббб1е_1

сопбепб = {"бхбб": бхбб, "6е1_рго6": 6е1_рго6}

#	вызов шаблона подтверждения/отмены удаления

гебигп гепбег(гедиезб, "шазбег/6е1_уезпо.]эбт1'\ сопбепб)

Это представление получает идентификатор удаляемого слайда карусели (бб), на основе
которого в объект оЬ] из БД загружаются сведения об этом слайде. После чего в объект
беТ ргоб загружается надпись верхней строки удаляемого слайда, которая через словарь
сопбепб передается в универсальный шаблон с1е1_уе8по.И1т1 (см. листинг 3.17). По нажа-
тию кнопок в этом шаблоне происходит возврат в представление сагоизеТ беТ, где в слу-
чае нажатия на кнопку удалить выполняется удаление информации о текущем сладе
карусели из БД.

Для активации всех этих представлений нужно в файле иг1з.ру создать соответствующие
ИКБ-маршруты (листинг 3.67).

Листинг 3.67. Маршруты для редактирования динамичных карточек

#	Создание элемента "Карусель"

рабй('сагоизе6_еббб/', убемз.сагоизе6_еббб, паше='сагоизеб_еббб'),

#	Добавить слайд карусели
рабй('сагоизеб_абб/', убемз.сагоизеб_а66, паше='сагоизеб_абб'),

#	Обновить слайд карусели

рабй('сагоизеб_ирб/<бпБ:бб>/', убемз.сагоизеб_ирб, пагае='сагоизеб_ирб'),

#	Удалить слайд карусели

рабй('сагоизеб_6еб/<бпб:бб>/', убемз.сагоизе1_6еб, пагае='сагоизеб_6еб'),

Для вызова представления сагоизеб еббб надо в меню одной из страниц сайта создать
следующую ссылку (листинг 3.68).

Листинг 3.68. Ссылка для редактирования динамичных каруселей

<а йге6="{% игб 'шазбег:сагоизе6_еббб' %}" багдеб ="_Ь1апк"Представление сагоизе6_еббб</а>
3.6.2.	Пример формирования слэйдое:
динамичной карусели через интерфейс пользователя

Проверим работу созданных нами модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Пред-
ставление сагоизе1_ес1й.

При первоначальной загрузке шаблон сагои8е1_есШ.И1т1 будет выглядеть так, как пока-
зано на рис. 3.30. Поскольку в БД нет ни одной записи о слайдах динамичной карусели,
то таблица с параметрами слайдов карусели пустая.

Динамичная карусель

Выбрана страница сайта: Примеры

© Добавить
слайд

Слэйды карусели

Ю Заголовок 1 Заголовок 2 Заголовок 3 Изображение Параметры текста Редактировать

Рис. 3.30. Внешний вид шаблона сагоизе! _есПШт1 при первоначальной загрузке

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы..

По нажатию на кнопку Добавить слайд откроется шаблон-форма сагои8е1_Гогт.И1т1
(рис. 3.31).

Рис. 3.31. Шаблон-форма сагоизеИогт.тт! для формирования слайда динамичной карусели
По нажатию на кнопку Сохранить параметры этого слайда будут сохранены в БД,
а пользователь будет возвращен в шаблон сагс1_ес!й.1тйп1, где в таблице отразятся вве-
денные данные. Таблица с введенными данными для трех слайдов карусели приведена
на рис. 3.32.

Рис. 3.32. Шаблон сагоизе1_ес1И.Н1т1 после ввода содержимого трех слайдов динамичной карусели

По нажатию на кнопку Изменить откроется форма для редактирования выбранного
слайда, а по нажатию на кнопку Удалить слайд будет удален из БД.

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

Итак, мы создали все модули, которые позволяют создать динамичную карусель. Те-
перь покажем, как динамичную карусель можно вывести на страницу сайта. Для этого
создадим тестовую страницу (шаблон) с именем ехатр1е8_З.И1т1, а также соответст-
вующие маршрут и представление.

Код представления ехатр!ез_з приведен в листинге 3.69.

Листинг 3.69. Представление ехатр1е§_3

########################################################

# Пример 3 для вывода динамичной карусели #

########################################################

с!еГ ехатр!ез_3 (гесрезГ) :

1с1_раде = 1

# получить слайды карусели текущей страницы

сагоизе! = Сагоизе1_1 .оЬдесГз. ШГег (раде_1с!=1с1_раде)

сопГехГ = {'сагоизе!': сагоизе!}

геГигп гепйег (гедиезГ, 'таз1:ег/д1ача_3/ехатр1ез_3 .Ылп!'л сопГехГ)
В этом представлении создается объект сагоизе!, в который загружаются слайды кару-
сели страницы сайта с идентификатором !<1_раде=1. Все эти слайды через словарь сопкехк
передаются в шаблон ехатр1е8_З.К1т1.

Для активации представления ехатр!ез_з в файле иг1з.ру нужно создать ИКБ-маршрут
(листинг 3.70).

Листинг 3.70. 1Ж1_-маршрут с именем ехатр1е8_3

ракЬ('д!ача_3/ехатр1ез_3/', ч!емз .ехатр!ез_3, пате='ехатр!ез_3'),

Код шаблона ехатр1е8_З.И1т1 приведен в листинге 3.71.

Листинг 3.71. Шаблон ехатр1е$_З.Мт1

{% ехкепбз "зЬор/Ьазе.ЬктГ' %}

{% Ыоск раде %}

<сИч с1аз8="сопка!пег-!1и!(1 р-1" 8ку1е="Ьаскдгоипс1-со1ог :гдЬ (224, 255, 255) ;">

<61V с1аз8="гом"> <!— Это начало строки —>

<!— Это левая панель —>

<сПч с!азз="со1-4 со!-зт-4 со!-тб-4 со!-1д-2 со!-х!-2
кехк-сепкег Ьд-!п!о Ьд-орас!ку-25">

<Ь6>Левая боковая панель</Н6>

</сПч> <!— Конец левой панели —>

<!— Это центральная панель —>

<сИч с!азз="со1-4 со!-зт-4 со1-тс!-4 со!-1д-8 со!-х!-8 кехк-сепкег">

<сИч с1азз="гом кехк-сепкег">

<Ь1>Центральная панель</Н1>

</сПч>

<сИч с1азз="гом кехк-сепкег тх-аико">

<сИч с1азз="со1-12 кехк-сепкег тх-аико">

<!— Показ карусели в центральной панели—>

{% !пс1ис1е "радез/сагоизеТ-ЗНом.НктГ' %}

</сПч>

</сПч>

<	/сИч> <!— Конец центральной панели —>

<	!— Это правая панель —>

<сПч с1азз="со1-4 со!-зт-4 со1-тс!-4 со!-1д-2 со!-х!-2
кехк-сепкег Ьд-!п!о Ьд-орас!ку-25">

<Ь6>Правая боковая панель</Н6>

<	/сПч> <!— Конец правой панели —>

</сПч> <!— Конец строки —>

</сПч> <!— Конец контейнера —>

{% епбЫоск раде %}
Шаблон ехатр1е8_З.И1т1 представляет собой демонстрационную страницу, состоящую
из трех панелей: левой боковой, центральной и правой боковой. В центральную панель
с использованием тега 1пс1ис1е вставлен другой шаблон: сагои8е1_8Ио\л/.И1т1. Левая и пра-
вая боковые панели пустые. Код шаблона сагои8е1_8Ио\л/.И1т1 представлен в листин-
ге 3.72.

Листинг 3.72. Шаблон сагои8е1_8Гюуу.Гйт1

<!— Начало карусели —>

<сПч !Н=”сагоизе!Ехатр1еСоп11го1з" с1азз="сагоизе! зИНе" с!аба-Ьз-г1с1е=’’сагоизеГ’>

<!— цикл по слайдам в теле карусели—>

<сПч с1азз=”сагоизе1-1ппег">

{% Рог оЬд 1п сагоизе! %}

<61V с!азз=”сагоизе!-!бет {% йГ !ог!оор. Нгзб %}асб!че{% епсПЕ %}">

<	!— вывод изображения—>

<	!тд згс=” {{ оЬ] . таде.иг! }}"
збу!е=”Ие!дИб: 200рх;"
с!азз=”6-Ь1оск м-100 " а!!="1таде">

<	!— вывод текста над изображением—>

<сПч с!азз=”сагоизе!-сар111оп 6-Ыоск И-100">

{% 1! оЬд.б!б!е_1 %}

<р с!азз=" {{оЬд . зеб_бехб}} ">{ { оЬдЛ!б!е_1 } }</р>

{% егкНЕ %}

{% И оЬд.б!б!е_2 %}

<р с!азз="{ {оЬд .зеб_бех11}} ">{ { обд . !!б!е_2 }}</р>

{% епсП! %}

{% 1! окд .б!б!е_3 %}

<р с!азз="{ {оЬд .зеб_бехб}} ">{ { оЬдЛ!б!е_3 } }</р>

{% епсПЕ %}

</сПч>

</сПч>

{% епбЕог %}

</сНч>

<!— кнопка прокрутки к предыдущему слайду—>

<ЬиШ)п с!азз="сагоизе!-сопбго1-ргеу"

буре="Ьиббоп”

Наба-Ьз-багдеб="#сагоизе1Ехатр1еСопбго1з"
баба-Ьз-з!!бе=”ргеч”>

<зрап с!азз=”сагоизе!-сопбго1-ргеч-!соп" аг!а-И!ббеп="бгие"></зрап>

<зрап с!азз="ч!зиа11у-И!б(1еп">Ргеу!оиз</зрап>

</Ьиббоп>

<!— кнопка прокрутки к следующему слайду—>

<ЬиШ)п с!азз="сагоизе!-сопбго1-пехб" буре="Ьиббоп"
Наба-Ьз-багдеб=”#сагоизе1Ехатр1еСопбго1з"
баба-Ьз-з!!бе="пехб">

<зрап с!азз=”сагоизе1-сопбго!-пехб-!соп” аг!а-И!ббеп=”бгие”></зрап>

<зрап с!азз=”ч!зиа11у-И!б(1еп">Нехб</зрап>

</Ьиббоп>
</Цгу>

<!— Конец карусели —>

В этом шаблоне с использованием тега Р]ап§о Гог организован цикл по слайдам карусе-
ли. В теле этого цикла задействован тег Э]ап§о и, в котором проверяется наличие или
отсутствие в БД сведений об элементе слайда. Если сведения об элементе в БД присут-
ствуют, то он будет отображен в шаблоне.

* * *

Здесь мы рассмотрели код всех модулей и шаблонов, которые обеспечивают формиро-
вание и вывод динамичных каруселей. Имея такой набор, администраторы сайта могут,
не меняя программный код, добавить элемент «карусель» на любую страницу сайта,
изменять содержание слайдов карусели и менять дизайн выводимого текста. При уда-
лении карусели из БД она автоматически исчезнет со страниц сайта. Рассмотрим
теперь, как работает наш программный код и как динамичная карусель выглядит на
страницах сайта.

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

Проверим работу созданных нами модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 3 и перейти по ссылке Стра-
ница ехатр1е8_З.Мт1.

Левая боковая панель

Центральная панель

Правая боковая панель

Левая боковая панель

Левая боковая панель

Правая ооковая панель

Центральная панель

Правая боковая панель

В нашем магазине
широкий ассортимент
г ^консервированн€Ь< продуктов?

Рис. 3.33. Внешний вид шаблона ехатр1е8_З.Н1т1 стремя слайдами динамичной карусели
в центральной панели
При вызове модуля отображения динамичной карусели шаблон ехатр1е8_З.И1т1 будет
выглядеть так, как показано на рис. 3.33. Как здесь можно видеть, текстовая информа-
ция на каждом слайде имеет разное цветовое оформление.

* * *

Подводя итого этого раздела, можно сделать следующие выводы. Написание про-
граммного кода для формирования динамичных каруселей — достаточно трудоемкий
процесс, однако эти трудозатраты окупаются при сопровождении сайта. Администра-
торы сайта получают возможность добавлять динамичные карусели на любую страницу
сайта, а также изменять содержимое слайдов и их оформление. При этом им не требу-
ется вносить какие-либо изменения в код программных модулей сайта.

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

В этой главе мы познакомились с методами и программными модулями создания дина-
мичных элементов Воо181гар. Параметры настройки интерфейса и контент таких эле-
ментов хранятся в БД и могут обновляться удаленно без изменения программного кода.
Здесь была показана реализация только трех элементов ВооЫгар (аккордеон, карточки
и карусель), но аналогичный подход вы можете использовать и для других элементов.

В интерфейсе многих сайтов используются древовидные структуры, которые позволя-
ют строить многоуровневые меню и каталоги продуктов (товаров). Такие элементы ин-
терфейса могут отображаться либо в развернутом виде, либо в виде свернутого дерева.
Пользователю при этом предоставляется возможность по своему усмотрению раскрыть
любую ветвь дерева, выбрать нужный элемент и отфильтровать большой массив
данных по выбранному признаку. Методам создания древовидных структур в В)ап§о и
посвящена следующая глава.
ГЛАВА 4

Древовидные структуры
в шаблонах О]апдо

Древовидные структуры для представления данных в Интернете весьма популярны —
для конечных пользователей это удобный и привлекательный элемент. Однако про-
граммирование модулей для создания древовидных структур — процесс достаточно
сложный и трудоемкий. Впрочем, в В]ап§о для этих целей имеется специализирован-
ный пакет В)ап§о-шрй, который значительно упрощает реализацию древовидных
структур.

В процессе изучения материалов этой главы вы узнаете:

♦	в каком виде пакет В)ап§о-шрй формирует таблицу БД для хранения древовидных
данных;

♦	как создать модель для хранения древовидных данных и заполнить ее информацией
через административную панель И)ап§о (на примере категорий продуктов интернет-
магазина);

♦	как отобразить статичное дерево категорий продуктов в шаблонах И)ап§о;

♦	как отобразить динамичное дерево категорий продуктов в шаблонах И)ап§о;

♦	как разработать программные модули для формирования дерева категорий продук-
тов через интерфейс пользователя;

♦	как создать список объектов с возможностью их фильтрации через древовидные
каталоги (на примере списка продуктов интернет-магазина);

♦	как создать интерфейс для фильтрации сведений о продуктах с использованием ста-
тичного и динамичного древовидного каталога категорий продуктов;

♦	как создавать древовидные меню с использованием плагина ше§ашепи-)8;

♦	как фильтровать данные в БД с использованием панели инструментов и древовидно-
го каталога категорий.

Итак, приступим к знакомству с древовидными структурами данных в В)ап§о.

4.1.	Использование О|апдо-трй

для создания древовидных структур

Каждый разработчик рано или поздно сталкивается с проблемой хранения и выборки
данных в виде дерева. Самый распространенный вариант поиска той или иной ветки
дерева — запрос наличия потомков или родителя у текущего элемента. У этого метода
есть свой плюс — простота изменения дерева (удаление, добавление, перенос веток).
Однако есть и минусы — это ресурсоемкие и медленные алгоритмы выборки. Как пра-
вило, они представляют собой рекурсивные функции со множеством мелких выборок
из БД либо с одной выборкой, но с последующей циклической и рекурсивной обработ-
кой данных и их упорядочиванием. Эти процессы при сложной структуре дерева могут
занимать много времени.

Но давайте рассмотрим еще один метод реализации древовидной структуры данных
в БД — МРТТ (МосИНес! Ргеогбег Тгее Тгауегза!, модифицированный предварительный
обход дерева). Этот метод очень похож на Не81еб 8е18 (вложенные множества), с той
лишь разницей, что тут не хранится уровень вложенности. Применяя этот метод, мож-
но выбрать любую ветку или любую часть дерева, выполнив всего лишь один
запрос. Так же просто можно выбрать и путь к любому элементу дерева.

Многие интернет-приложения используют иерархические структуры данных. Напри-
мер, на сайтах электронной коммерции представление категорий различных объектов
в виде дерева является полезным инструментом для организации структуры товаров и
услуг. Это позволяет группировать объекты (товары, услуги) по категориям и подкате-
гориям, упрощая навигацию и их поиск для пользователей. Многоуровневые меню час-
то содержат иерархические данные, которыми необходимо эффективно управлять, что-
бы обеспечить удобную навигацию по сайту.

Один из способов реализации деревьев категорий в Р]ап§о, который дает возможность
упростить работу с деревьями объектов, — использование специализированного пакета
В)ап§о-шрй. Этот пакет для организации структуры деревьев задействует алгоритм
МРТТ, позволяющий эффективно хранить и извлекать информацию из деревьев, упро-
щая написание запросов и ускоряя выполнение операций с записями в БД.

Для начала работы с П)ап§о-шрй необходимо установить этот пакет при помощи ме-
неджера пакетов р!р. Выполните команду:

р!р 1пзЕа11 сЦапдо-трЕЕ

р!р 1пзЕа11 с^апдо-трЕЕ-ас1т1п

Здесь сЦапдо-трЕЕ- ОСНОВНОЙ пакет ДЛЯ работы С древовидными структурами, а сЦапдо-

тр^-асШп — дополнительный пакет, который обеспечивает удобное заполнение дерева
в административной панели Р]ап§о.

После установки пакета надо добавить его в раздел жтаььео_арр8 файла 8ей1пд8.ру с по-
мощью следующего кода:

1Е8ТАЬЬЕО_АРР8 = [

’трЕЕ',

' с!з апдо_трЕЕ_ас1т1п',

]

Для создания модели дерева категорий в В)ап§о-трй нужно задействовать абстрактный
базовый класс мрттмойе! — он предоставляет необходимые поля и методы для хранения
и организации структуры дерева:
Егот сЦапдо.бЬ атрогЕ тобе1з

Егот трЕЕ.тобеЕз ЕшрогЕ МРТТМобе!, ТгееГогеЕдпКеу

сЕазз СаЕедогу(МРТТМобе!):

пате = тобеЕз .СЬагЕЕе1с1(тах_1епдЕк1=50, ипЕдие=Тгие)

рагепЕ = ТгееЕогеЕдпКеу('зе!Е', оп_беЕеЕе=тос1еЕ8 .СА5САБЕ,

пиЕЕ=Тгие, ЬЕапк=Тгие,

геЕаЕес1_пате=' сЫМгеп')

с!азз МРТТМеЕа:

огбег_ЕпзегЕЕоп_Ьу = [' паше' ]

В этом примере кода создается модель саЕедогу, использующая базовый класс мрттмобеЕ.
Модель содержит поля пате и рагепр, которые определяют название категории и роди-
тельскую категорию соответственно. Поле рагепЕ является внешним ключом на ту же
модель СаЕедогу, ЧТО ПОЗВОЛЯет СТрОИТЬ древовидную структуру. Параметр геЕаЕес!_пате=
’сышгеп' определяет имя обратной связи для доступа к дочерним элементам категории.

Для того чтобы В)ап§о-шрй мог правильно организовать дерево категорий, необходимо
в модели сагедогу указать, по какому полю сортировать элементы дерева. Для этого
В класс СаЕедогу добавлен вложенный класс МРТТМеЕа С полем огбег_ЕпзегЕЕоп_Ьу, которое
определяет сортировку ПО ПОЛЮ пате.

Создав модель СаЕедогу, можно наполнить данными иерархию категорий либо в админи-
стративной панели В)ап§о, либо создать для этого собственный программный код.

Рассмотрим древовидную структуру данных на примере категорий продуктов СаЕедогу
интернет-магазина (рис. 4.1).

Каталог товаров

• Магазин Малинка"
о Продукты

 Мясо

 Баранина

 Говядина

 Свинина

 Рыба

	Морская

	Озерная

	Речная

Рис. 4.1. Пример древовидной
структуры каталога товаров
(категории продуктов)
интернет-магазина

В модели СаЕедогу пакета В)ап§о-шрй каждая ветка в дереве категорий продуктов в базе
данных будет иметь несколько идентификационных атрибутов:

♦	1(1 — идентификатор записи;

♦	пате — имя ветки дерева;

♦	еее — номер левой части ветки (при обходе дерева сверху вниз);

♦	гдьт — номер правой части ветки (при обходе дерева снизу вверх);

♦	тгее_1(1 — идентификатор дерева;
♦	1еуе1 — номер уровня, на котором находится ветка дерева;

♦	рагепГ_1с! — идентификатор родительской ветки.

Принцип нумерации левой и правой частей веток дерева представлен на рис. 4.2.

Рис. 4.2. Пример древовидной структуры каталога товаров интернет-магазина
(категории продуктов СаГедогу)

В этом примере дерево категорий продуктов имеет 3 уровня. Каждая ветка дерева несет
слева уникальный номер от 1 до 10 (при обходе дерева сверху вниз) и справа — уни-
кальный номер от 11 до 20 (при обходе дерева снизу вверх).

Посмотрим, как такое дерево будет представлено в БД в таблице Сагедогу (табл. 4.1).

Таблица 4.1. Содержание таблицы категорий товаров Са^едогу в базе данных

1С1	пате	1ГЪ	гдИЪ	Ъгее_1с1	1ете1	рагепЬ_1с1
1	Магазин «Малинка»	1	20	1	0	Г\ПЛ_1_
2	Продукты	2	19	1	1	1
3	Мясо	3	18	1	2	2
4	Баранина	4	17	1	3	3
5	Говядина	5	16	1	3	3
6	Свинина	6	15	1	3	3
7	Рыба	7	14	1	2	2
Таблица 4.1 (окончание)

16	пате	1ТЪ	гдЬЪ	Ъгее_16	1ете1	рагепЬ_16
8	Морская	8	13	1	3	7
9	Озерная	9	12	1	3	7
10	Речная	10	11	1	3	7

В этой таблице ветки дерева отсортированы по полю 1а. При заполнении структуры
дерева конкретными данными программисту нужно ввести значение только одного по-
ля (пате) и указать имя родительской ветки, — значения всех остальных полей О)ап^о
сформирует самостоятельно.

При заполнении данными дерева категорий продуктов надо сначала создать корневой
элемент (узел). У корневого элемента дерева нет родителя, поэтому при формировании
значения для корня дерева родительская категория не задается (для корня дерева поле
рагеп1:_1(1 будет иметь значение шьь). Сформировать корневую категорию для дерева
можно с использованием следующего метода класса сабедогу:

гооБ_сабедогу = Сабедогу.оЬдесбз.сгеабе(пате="Магазин «Малинка»”)

Затем, когда создаются все дочерние категории, для них нужно задать имя категории
и указать имя родительской категории — например:

Сабедогу. обд есбз. сгеабе (паше="Продукты", рагепб=гоо11_саБедогу)

Примечание

В древовидной структуре данных может быть не один, а несколько корневых узлов.

Когда программист заполняет структуру дерева для своего приложения самостоятель-
но, ему нет необходимости писать собственный программный код, — для этих целей
можно воспользоваться тем инструментарием, который встроен в административную
панель В)ап§о. Однако если требуется предоставить возможность формирования дерева
категорий конечным пользователям приложения, то для этого придется написать соот-
ветствующий программный код.

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

Для начала необходимо создать модель для хранения данных о категориях продуктов.
Программный код такой модели (сабедогу_рг) приведен в листинге 4.1.

Листинг 4.1. Модель категорий продуктов Са(едогу_рг

#	Библиотеки для древовидных структур

Бгот трББ.тобеТз гтрогб МРТТМобе!, ТгееЕогегдпКеу

########################

#	Категории продуктов #
########################
сЕазз СаЕедогу_рг(МРТТМойеЕ):

пате = тойеЕз .СкагЕЕеЕй(тах_ЕепдЕЕ1=50)

рагепЕ = ТгееЕогеЕдпКеу (’ зеЕЕ', оп_йеЕеЕе=тойеЕз .СА5САБЕ,
пиЕЕ=Тгие, Ыапк=Тгие,
геЕаЕей_пате= ’ сШЕйгеп')

йеЕ ___зЕг__(зеЕЕ) :

гекигп зеЕЕ.пате

с!азз МРТТМеЕа:

огйег_ЕпзегЕЕоп_Ьу = [' паше' ]

Обратите внимание, что для работы с древовидными структурами нужно в файле
тос1е18.ру обязательно ВЫПОЛНИТЬ импорт библиотек МРТТМойеЕ И ТгееЕогеЕдпКеу.

В этом программном модуле на основе базового класса мрттмойеЕ создан класс сакед1гу_рг
(категории продуктов). Модель Сакед1гу_рг содержит два поля: пате — имя категории и
рагепг— имя родительской категории. В административной панели В]ап§о для этой
модели будет отображаться только одно поле — имя категории (зеЕЕ.пате), а в интер-
фейсе пользователя дерево категорий будет отсортировано по имени категории
(огйег_1пзегЕ1оп_Ьу = [' пате' ]).

Чтобы обеспечить возможность наполнения данными дерева категорий в администра-
тивной панели, эту модель нужно зарегистрировать в модуле ас1т1п.ру (листинг 4.2).

Листинг 4.2. Регистрация модели Са(едогу_рг в файле ас1тт.ру

Егот йдапдо.сопЕгйЬ ЕтрогЕ айтЕп

Егот .тойеЕз ЕтрогЕ СаЕедогу_рг

#	Импорт пакета ВдапдоМрЕЕАйтЕп

Егот йд апдо_трЕЕ_айтЕп.айтЕп ЕтрогЕ ВдапдоМрЕЕАйтЕп

#	Дополнительный класс для регистрации модели СаЕедогу_рг
сЕазз СаЕедогуАйтЕп ОДапдоМрЕЕАйтгп) :

пате = {"зЕид": ("пате",)}

#	Регистрация модели СаЕедогу_рг

айтЕп.зЕЕе.гедЕзЕег(СаЕедогу_рг, СаЕедогуАйтЕп)

Обратите внимание, что для регистрации древовидных моделей потребовался импорт
дополнительной библиотеки В]апдоМрЕЕАйтш И СОЗДание Промежуточного класса СаЕедогуАйтЕп.
Создав код модели саЕедЕгу_рг, не забудьте выполнить процедуру миграции:

руЕЕоп тападе.ру такетЕдгаЕЕопз
руЕкоп тападе.ру тЕдгаЕе

Реализовав миграцию, можно открыть административную панель В)ап§о и заполнить
данными древовидную структуру категорий продуктов (рис. 4.3).
Рис. 4.3. Заполненные категории продуктов (модель СаТедогу) в административной панели Щапдо

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

Создадим набор модулей, которые обеспечат вывод древовидных структур в шаблоны
В)ап§о. Для начала нужно в опции меню или на одной из страниц сайта создать ссылку,
которая активирует нужный маршрут (листинг 4.3).

Листинг 4.3. Ссылка активации маршрута для вывода данных модели Са(ед1гу_рг

<а Ъге^=”{% иг1 'тазкег:сакедогу_1' %}" кагдек ="_Ыапк”>Страница сакедогу_1.Ькт1</а>

По этой ссылке будет активирован ИКЬ-маршрут сатедогу ! (листинг 4.4).

Листинг 4.4. ЫНЬ-маршрут са!едогу_1

ракк('сакедогу_1/', ч1еы8.сакедогу_1, пате='сакедогу_1'),

По этому маршруту будет активировано представление сакедогу_1 (листинг 4.5).
Листинг 4.5. Представление (у|еуу) са(едогу_1

бгот .тобе1з лпрогб Сабедогу_рг

################################

# Показать категории продуктов #

################################

с!еГ сабедогу_1(гедиезб):

сабедогу = Сабедогу_рг .оЬдесбз . а11 ()

# показать таблицу категорий с потомками

сопбепб = {"сабедогу": сабедогу}

гебигп гепбег(гедиезб, ”тазбег/д1ауа_4/сабедогу_1.ЬбтГ’, сопбепб)

В этом представлении создан объект сабедогу, в который загружаются данные из модели
сабедогу рг. Затем через словарь сопбепб сведения о категориях продуктов передаются
в шаблон са!едогу_1 .Ыт1, код которого приведен в листинге 4.6.

Листинг 4.6. Шаблон са1едогу_1 .Ыт!

{% ехбепбз "зЬор/Ьазе.Ьбт!” %}

{% Ь1оск раде %}

<сИу с1азз=”сопба1пег-б1и1б р-1" збу1е="Ьаскдгоипб-со1ог:гдЬ(224, 255, 255);">

<сИу с1азз="гом"> <!— Это начало строки —>

<!— Это левая панель —>

<ббч с1азз="со1-6 со1-зт-4 со1-тб-4 со1-1д-2 со1-х1-2

Ьд-бпбо Ьд-орас1бу-25">

<Ь6>Левая боковая панель</Н6>

<!— Показ категорий продуктов в левой панели—>

<Ьб>Категории продуктов</Н6>

{% 1оаб трбб_бадз %}

<и1 1б="туПЬ”>

{% гесигзебгее сабедогу %}

<11>

<а Ьгеб = "#">{{побе.пате}}</а>

{% 11 побе.1з_1еаб_побе %}

<зрап с1азз="1еаб">{{ побе.собе }}</зрап>

{% е1зе %}

<зрап с1азз="сагеб рагепб">{{ побе.собе }}</зрап>

<и1 с1азз="пезбеб">{ { сННбгеп }}</и1>

{% епбИ %}

</И>

{% епбгесигзебгее %}

</и1>

</61у> <!— Конец левой панели —>

<!— Это центральная панель —>

<6гу с1азз="со1-6 со1-зт-8 со1-тб-8 со1-1д-10 со1-х1-10 бехб-сепбег">
<сНу с1азз=”гом кехк-сеп1:ег">

<Ъ1>Центральная панель</Ы>

</сНу>

</сИу> <!— Конец центральной панели —>

</сНу> <!— Конец строки —>

</сНу> <!— Конец контейнера —>

{% епбЫоск раде %}

Это достаточно упрощенный шаблон страницы сайта, в котором имеются две панели:
левая боковая и центральная. В левой боковой панели отображаются категории продук-
тов, а в центральной — должны отображаться сведения о продуктах той или иной кате-
гории (пока для упрощения примера эта панель пустая). В блоке вывода дерева катего-
рий продуктов имеется ссылка: <а ЬгеГ = "#">{ {пойе.пате} }</а>. Пока эта ссылка тоже пус-
тая— в ней нужно будет выполнить адресацию к тем модулям, которые обеспечат
фильтрацию сведений о продуктах той или иной категории. Как это делается, будет
подробно показано в следующих разделах, а пока посмотрим, как выглядит дерево
категорий продуктов, для чего запустим на выполнение модули этого примера.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Стра-
ница са(едогу_1.Гйт1.

Внешний вид шаблона са!едогу_1 .К1т1 представлен на рис. 4.4.

Левая боковая панель
Категории продуктов

• Магазин "Малинка'

о Продукты

	Мясо

 Баранина

 Говядина

 Свинина

	Дыба

	Морская

	Озерная

	Речная

Центральная панель

Рис. 4.4. Внешний вид категории продуктов в шаблоне са1едогу_1.Н1т1

Как здесь можно видеть, дерево категорий продуктов отображается в раскрытом виде, а
ветки каждого нового уровня имеют некоторое смещение вправо. Каждый элемент
в дереве категорий продуктов является ссылкой, и при переходе по ней будет происхо-
дить фильтрация таблицы с информацией о продуктах, отображение которой преду-
смотрено в центральной панели.

По умолчанию дерево категорий продуктов всегда полностью раскрыто, что не совсем
удобно при большом количестве записей в модели Сакед1гу_рг и большом количестве
уровней вложенности. Посмотрим теперь, как можно реализовать раскрывающееся
дерево категорий продуктов.
4.2.2. Отображение динамичного дерева категорий продуктов
в шаблонах О]апдо

Создадим набор модулей, которые обеспечат вывод древовидных структур в шаблоны
В)ап§о в виде раскрывающегося дерева. Для начала нужно в опции меню или на одной
из страниц сайта создать ссылку, которая активирует нужный маршрут (листинг 4.7).

Листинг 4.7. Ссылка активации маршрута для вывода данных модели Са(едогу_рг

<а Нгек="{% иг1 'тазкег:сакедогу_2' %}" 1загде1з ="_Ыапк”>Страница сакедогу_2.Ькт1</а>

По этой ссылке будет активирован ИКЬ-маршрут сакедогу_2 (листинг 4.8).

Листинг 4.8. ЫНЬ-маршрут са(едогу_2

ракН (’акедогу_2/', чгемз.сакедогу_2, паше=1сакедогу_2’),

По этому маршруту будет активировано представление сакедогу_2 (листинг 4.9).

Листинг 4.9. Представление (у|еуу) са(едогу_2

кгот .тобекз йпрогк Сакедогу_рг

#	###############################

#	Показать категории продуктов #

#	###############################

(ДеГ сакедогу_2 (гедиезк) :

сакедогу = Сакедогу_рг.оЬдескз. акк()

# показать таблицу категорий с потомками
сопкепк = {"сакедогу”: сакедогу}

гекигп гепбег(гедиезк, "тазкег/дкача_4/сакедогу_2.НктГ’, сопкепк)

В этом представлении создан объект сакедогу, в который загружаются данные из модели
сакедогу рг. Затем через словарь сопкепк сведения о категориях продуктов передаются
в шаблон са1едогу_2.Ыт1 (листинг 4.10).

Листинг 4.10. Шаблон са1едогу_2.Мт1

{% ехкепбз "зНор/Ьазе.Нктк" %}

{% Ькоск сопкепк%}

<зку!е> <!— Начало стиля для категорий продуктов —>

и1, #туНЬ {

Изк-зку1е-куре: попе;
}

/* Неточе тагдкпз апб раббгпд кг от кНе рагепк и! */

#туНЬ {

тагдкп: 0;

раббгпд: 0;
/★ Збу1е бЬе сагеб/аггом */
.сагеб {

сигзог: робпбег;

изег-зе1есб: попе; /* Ргечепб бехб зебесбгоп */
}

/* Сгеабе бЬе сагеб/аггом ЫбЬ а ипгсобе, апб збу1е 16 */
.сагеб::Ьебоге {

сопбепб: "\25В6";

со1ог: Меб1ит31абеВ1ие ;

ббзрбау: бпИпе-Ыоск;
тагдбп-ггдЬб: брх;

}

/* Робабе бЬе сагеб/аггом 1соп мбеп сИскеб оп (изгпд ПачаЗсгбрб) */

.сагеб-бомп: :Ьебоге {
бгапзбогт: гобабе (90с1ед) ;

}

/* Нббе бЬе пезбеб Изб */

.пезбеб {
ббзрбау: попе;

}

/* ЗЬом бЬе пезбеб ббзб мЬеп бНе изег сббскз оп бЬе сагеб/аггом (ЫбЬ бачаЗсгбрб) */
.асббче {

сНзр1ау: Ыоск;

}

</зРу1е> <!— Конец стиля для категорий продуктов —>

<Ыу с1азз="сопЫ1пегЫ1и1с! р-1" зВу1е="Ьаскдгоипс1-со1ог:гдЬ (224л 255л 255) ;">

<сИу с1азз="гом"> <!— Это начало строки —>

<!— Это левая панель —>

<сИч с1азз="со1-6 со1-зт-4 со1-тс!-4 со1-1д-2 со1-х1-2

Ьд-1Ыо Ьд-орасЫу_25">

<К6>Левая боковая панель</116>

<!— Показ категорий продуктов в левой панели—>

<Ь6>Категории продуктов</Н6>

{% 1оаб трЫ_бадз %}

<и1 1б=’'туПЬ’’>

{% гесигзебгее сабедогу %}

<Ы>

<а Ьгеб = {побе.пате}}</а>

{% И побе.1з_1еаб_побе %}

<зрап с1азз="1еаб">{{ побе.собе }}</зрап>

{% е1зе %}

<зрап с1азз="сагеб рагепб">{{ побе.собе }}</зрап>

<и1 с1азз="пезбеб">{ { сННбгеп }}</и1>

{% епбгб %}
</и>

{% епскесигзеТгее %}

</и!>

<	/с1гу> <!— Конец левой панели —>

<	!— Это центральная панель —>

<сПч с1азз=”со1-6 со1-зт-8 со1-шс1-8 со1-1д-10 со1-х1-10 КехК-сепКег">

<сИч с1азз=”гом ^ехК-сепКег">

<Ъ1>Центральная панель</Н1>

</сИу>

<	/сНу> <!— Конец центральной панели —>

</сНу> <!— Конец строки —>

<	/сНу> <!— Конец контейнера —>

<	зсг!рТ Туре="ТехТ/дачазсг1р1:"> <!— Начало скрипта для каталога —>
’изе зТггсТ';

чаг Тодд1егз = йоситепТ.деГЕТетепГзВуСХаззМате("сагеТ”) ;

чаг 1;

Вог (1=0; 1 < Водд1егз.1епдКН; 1++) {

Водд1егз [1] .асШчепТЫзТепег ("сИск", ГипсПоп () {

Ш.З .рагепТЕ1етепТ.диегуЗе1ес11ог (" .пезГесГ) .с1аззЫзТ.Тодд1е ("асТГче");

ВЫз. с1аззЫзВ. Водд1е ("сагеГ-йомп");

});

}

<	/зсг!рВ> <!— Конец скрипта для каталога —>

{% епбЫоск сопВепВ%}

Это достаточно упрощенный шаблон страницы сайта, в котором имеются две панели:
левая боковая и центральная. В левой боковой панели отображаются категории продук-
тов в виде свернутого дерева, а в центральной — должны отображаться сведения
о продуктах той или иной категории (пока для упрощения примера эта панель пустая).
В блоке ВЫВОДа дерева категорий продуктов имеется ССЫЛКа: <а ЬгеЕ = "#">{{пос1е.пате}}</а>.
Пока эта ссылка тоже пустая — в ней нужно будет выполнить адресацию к тем моду-
лям, которые обеспечат фильтрацию сведений о продуктах той или иной категории.
Как это делается, будет подробно показано в следующих разделах.

Принципиальное отличие шаблона са!едогу_2.К1т1 от шаблона са1едогу_1.Ыт1 заключа-
ется в том, что в шаблон са1едогу_2.К1т1 добавлены стили и 1ауа-скрипт, которые обес-
печивают раскрытие и сворачивание веток дерева категорий продуктов.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Стра-
ница са1едогу_2.Гйт1.

Внешний вид шаблона са1едогу_2.К1т1 при первоначальной загрузке представлен на
рис. 4.5.
Левая боковая панель
Категории продуктов
Магазин' Малинка" ►

Центральная панель

Рис. 4.5. Внешний вид категории продуктов в шаблоне са!едогу_2.Н1т1

Как здесь можно видеть, дерево категорий продуктов свернуто, и на экране присутст-
вует только корень дерева — Магазин «Малинка». С правой стороны от имени ветки
дерева расположена кнопка — когда пользователь щелкнет на ней левой кнопкой
мыши, эта ветка дерева (если у нее есть дочерние элементы) раскроется, а кнопка при-
обретет вид (рис. 4.6).

Левая боковая панель
Категории продуктов
Магазин ~ Малинка" ▼

* Продукты ▼

 Масо ▼

	Баранина

	урви ди Ив

	Свинина

 Рыба ►

Центральная панель

Рис. 4.6. Внешний вид категории продуктов в шаблоне са!едогу_2.Н1т1 с частично раскрытым деревом

При повторном нажатии на эту кнопку дочерние ветки дерева свернутся. Таким спосо-
бом пользователь может раскрывать только нужные ему ветки дерева, что очень удобно
в тех случаях, когда дерево имеет много веток с большим количеством уровней их
вложенности. Внешний вид дерева категорий продуктов при свернутой ветке Мясо и
раскрытой ветке Рыба приведен на рис. 4.7.

Левая боковая панель Категории продуктов Магазин Малинка" ▼	Центральная панель
о Продукты ▼  Месо к  Рыба Т   Мерекая   Озерная  Речная	

Рис. 4.7. Внешний вид категории продуктов в шаблоне са!едогу_2.Н1т1 с раскрытой веткой Рыба

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

При создании сайтов для магазинов интернет-торговли достаточно часто требуется,
чтобы функция формирования дерева категорий товаров была возложена не на разра-
ботчиков (администраторов) сайта, а на менеджеров магазинов. В этом случае логичнее
не подпускать менеджеров магазинов к административной панели В)ап§о, а реализо-
вать для них возможность формировать и менять структуру каталога категорий продук-
тов через пользовательский интерфейс. В этом разделе мы рассмотрим пример реали-
зации такого интерфейса.

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

Для начала создадим новую модель для хранения данных о категориях продуктов, не
содержащую данных. Программный код такой модели (сабедогу) приведен в листин-
ге 4.11.

Листинг 4.11. Модель категорий продуктов Сабедогу

#	Библиотеки для древовидных структур

бгот трбб.тобе!з нпрогб МРТТМобе!, ТгееЕогебдпКеу

########################
# Категории продуктов #
########################
с!азз Сабедогу(МРТТМобе!):

пате = тобе!з .СЬагЕ1е1б(тах_1епдбб=50)

рагепб = ТгееЕогебдпКеу('зе1б', оп_бе!ебе=тобе1з.СА5САБЕ,
пи!1=Тгие, Ыапк=Тгие,
ге!абеб_пате= ’ сЬНбгеп')

беб __збг__(зе!Е) :

гебигп зебб.пате

с!азз МРТТМеба:

огбег_1пзегб1оп_Ьу = ['пате']

В этом программном модуле на основе базового класса мрттмобе! создан класс сабедогу
(категории продуктов). Модель сабедогу содержит два поля: пате — имя категории и
рагепб— имя родительской категории. В административной панели В]ап§о для этой
модели будет отображаться только одно поле — имя категории (зеи.пате), а в интер-
фейсе пользователя дерево категорий будет отсортировано по имени категории
(огбег_1пзегб1оп_Ьу = ['пате']).

Создав код модели сабедогу, не забудьте выполнить процедуру миграции:

руббоп тападе.ру такетбдгаббопз
руббоп тападе.ру тбдгабе

Поскольку формирование данных дерева категорий продуктов будет выполняться через
интерфейс пользователя, то эту модель можно не регистрировать в модуле ас1т1п.ру
(хотя для страховки действий менеджеров магазинов со стороны администраторов сай-
та это надо бы сделать).

Чтобы пользователи могли заполнять данными дерево категорий продуктов, необходи-
мо создать соответствующую форму (листинг 4.12).
Листинг 4.12. Форма ввода категорий продуктов Са(едогу

Егот .тоаеЕз ЕтрогЕ СаЕедогу

#	Форма для ввода категорий продуктов СаЕедогу #

с1азз СаЕедогу_Еогт(Еогтз .Мос1е1Гогт) :

с!азз МеЕа:

тоае! = СаЕедогу

ПеМз = ('пате',)

Форма СаЕедогу_Еогт построена на ОСНОВе базового класса Еогтз.Моае1Еогт. В ней будет
отображаться только одно поле — пате. Объект Е1е1с1з принимает данные в виде списка.
Чтобы ПОЛе пате имело ТИП <список> (а не ТИП <символьная_переменная>), ПОСЛе имени ПОЛЯ
нужно обязательно поставить запятую. В этой форме пользователю для ввода данных
будет предоставлено всего одно поле — пате (имя категории).

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

Для доступа к интерфейсу наполнения данными дерева категорий (редактору катего-
рий) нужно создать следующую ссылку (листинг 4.13).

Листинг 4.13. Ссылка на редактор категорий продуктов

<а ЕгеЕ="{% иг! 'тазЕег:зйом_саЕедогу' %}" ЕагдеЕ ="_Ь1апк">Редактор категорий</а>

По ЭТОЙ ссылке будут активированы ЦКЬ-маршруТЫ С именем зйом_саЕедогу (лис-
тинг 4.14).

Листинг 4.14. ЫНЬ-маршруты для вызова редактора категорий продуктов

# редактор категорий продуктов для модели саЕедогу

раЕй('зйом_саЕедогу/', уЕемз.зйом_саЕедогу, пате='зйом_саЕедогу'),

раЕй('зйом_саЕедогу/<ЕпЕ:Еа>/', угемз.зйом_саЕедогу, пате='зЕюи_саЕедогу'),

Следует обязательно создать два маршрута с именем зШ/_саЕедогу — один маршрут без
передачи параметров в представление, а второй — с передачей в представление иден-
тификатора категорий продукта (1а).

По этим маршрутам будет вызываться представление зкж_саЕедогу, которое может при-
нимать идентификатор категории продукта (1а). Код представления зЬом_саЕедогу приве-
ден в листинге 4.15.

Листинг 4.15. Представление 8Гюуу_са(едогу

################################
# Редактор категории продуктов #
################################
аеЕ зйом_саЕедогу(гедиезЕ, 1а=1):
#	получить все категории продуктов

сакедогу_рг = Сакедогу.оЬдескз.а!1()
ко1_сак = 1еп(сакедогу_рг)

#	если ко1_сак == О, то корень дерева не создан
гк ко!_сак == 0:

# создать корень дерева

гедиезк.зеззбоп[’16_сак'] =1 # задать 1с1 категории для корня

рокоток = 0

сопкехк = {"ко1_сак": ко!_сак, "рокоток": рокоток, "сакедогу_рг": сакедогу_рг}

гекигп гепбег(гедиезк, "тазкег/д1ача_4/зИо^_сакедогу.ЬктГ’, сопкехк)

# здесь 16 - категория продукта
1к бб == 0:

#	вернулся из другого модуля, восстановить бб категории каталога
бб_сак = гедиезк.зеззбоп['бб_сак']
е1зе:

#	пришел из каталога, запомнить выбранный 66 категории каталога

1б_сак = 66

гедиезк.зеззбоп[’б6_сак'] = 66 # запомнить 66 категории

#	выбранная категория в каталоге

зе1еск_сак = Сакедогу.оЬдескз.дек(б6=б6_сак)

#	родительская категория для выбранной категории в каталоге
16_го6_сак = зе1еск_сак.рагепк_16

#	если выбрана верхняя позиция в каталоге

1к 16_го6_сак 13 Попе:

# идентификатор родительской категории
16_го6_сак = 1

# Получить запись с параметрами родительской категории
1к ко1_сак == 0:

зе1еск_гоб_сак = Попе

#	категории, в которые входит выбранная категория и все дочерние категории
сакедогбез = Попе

#	Определить, есть ли потомки

рокоток = 0
е1зе:

зе1еск_гоб_сак = Сакедогу.оЬдескз.дек(16=б6_го6_сак)

#	категории, в которые входит выбранная категория и все дочерние категории

сакедогбез = зе1еск_сак.дек_6езсепбапкз(1пс1и6е_зе1к=Тгие)

#	Определить, есть ли потомки

рокоток = 1еп(Сакедогу.оЬдескз.кббкег(рагепк_бб=бб))

# показать таблицу с категориями товаров

сопкехк = {"ко1_сак": ко1_сак, "сакедогу_рг": сакедогу_рг,
"рокоток": рокоток, "сакедогбез": сакедогбез,
"зе1еск_сак": зе1еск_сак}

гекигп гепбег(гедиезк, "тазкег/д1ача_4/зНом_сакедогу.ЬктГ', сопкехк)
Это представление имеет параметр 1а, который принимает идентификатор категории
продукта. Если такой идентификатор не передан, то по умолчанию он принимает зна-
чение 1с1=1 (корневой элемент в дереве категорий).

На первом шаге в объект сагедогу рг загружаются все записи о категориях продуктов из
БД и определяется количество таких записей — количество категорий (ко1_сак). Если
ко1 саг = о, то корень дерева не создан. В этом случае для переменной сессии с иденти-
фикатором категорий задается значение 1: гедиезк.зезз1оп['1б_сак'] = 1 (идентификатор
корневого элемента в дереве каталога). Поскольку корень дерева не создан, то у корня
нет потомков, поэтому объекту рокоток присваивается значение 0 (рокоток=о). После этого
формируется объект сопкехк, который передается в шаблон отображения дерева с кате-
гориями продуктов 8Ио\л/_са1едогу.К1т1 (листинг 4.16).

Листинг 4.16. Шаблон з11о>/у_са1едогу.Гйт1

{% ехкепбз "зкор/Ьазе.кктГ' %}

{% Ыоск сопкепк%}

<б!л с1азз="сопка1пег-Г1шб р-1" зку1е="Ьаскдгоипб-со1ог:гдЬ(224, 255, 255) ;">

<61V с1азз="гои"> <!— Это начало строки —>

<!— Это левая панель —>

<б!ч с1азз="со1-6 со1-5т-б со1-тб-4 со1-1д-2 со1->:1-2

Ьд-тпко Ьд-орас1ку-25">

<кб>Левая боковая панель</И6>

<Н6>Категории продуктов</кб>

{% 1оаб тркк_кадз %}

<и1 1б="ту11Ь">

{% гесигзекгее сакедогу_рг %}

<И>

{#<а ИгеГ = "/зко™_сакедогу/{{побе.16}}">{{побе.пате}}</а>#}

<а ИгеГ="{% иг1 ’тазкег:зком_сакедогу’ 1б=побе.1б %}">{{ побе.пате }}</а>
{% 1Г побе.1з_1еак_побе %}

<зрап с1азз="1еак">{{ побе.собе }}</зрап>
{% е1зе %}

<зрап с1азз="сагек рагепк">{{ побе.собе }}</зрап>

<и1 с1азз="пезкеб">{{ скПбгеп }}</и1>
{% епбИ %}

</И>

{% епбгесигзекгее %}

</и1>

</б1Д>

<!— Это центральная панель —>

<б1ч с1азз="со1-6 со1-зт-6 со1-тб-8 со1-1д-10 со1-х1-10 кехк-зкагк">

<б1ч с1азз="гон кехк-зкагк">

<Н1>Центральная панель</Н1>

<!— проверить, есть ли корень —>

{% 1Г ко1_сак == 0 %}

<НЗЖорневой узел дерева не создан</ИЗ>

<б1ч с1азз="со1-2 кехк-зкагк">
<а кгеб="{% иг1 'тазбег:сабедогу_гооб_асй' %}" с!азз="Ьбп Ьбп-рггтагу Ьбп-зт">

<1 с1азз="Ы Ы-Ьад-р1из"></1> Добавить корень</а>

{% епсНб %}

{% 1Г сабедогу_рг %}

«Цу с!азз="гом бехб-збагб">

<р>Выбрана категория товара - {{зе!есб_саб.пате}}</р>

</61У>

«Ну с!азз="гои бехб-збагб">

<р>У выбранной категории товара</р>

{% 1Г роботок == 0 %}

<р>Нет дочерних категорий</р>

{% е!зе %}

<р>Есть дочерние категории: {{роботок}}</р>

{% епбИ %}

</61Ч>

<б1ч с!азз="гом бехб-збагб">

<б1ч с!азз="со1-6">

<баЫе с!азз="баЫе баЫе-збгбрес! баЫе-Ьогбегес! беиб-збагб баЫе-зиссезз">

<бкеас!>

<бг>

<бй>№пп</бк>

<бк>Список категорий каталога</бй>

<Ш>Добавить</Ш>

<бй>Редактировать</бй>

<бй>Удалить</бй>

</бг>

</бйеаб>

{% бог оЬ^есб 1п сабедогбез %}

<бЬобу>

<бг>

<бб>{{ богбоор.соипкег }}</Ы>

<кб>{{ оЬ]еск.пате }}</кб>

<кб>

<а кгеб="{% иг! 'тазбег:сакедогу_сЫ1б_абб' кп=оЬ]есб.пате %}"
с!азз="Ьбп Ьбп-ргбтагу Ьбп-зт">

<1 с!азз="Ы Ы-Ьад-р1из"></1> Добавить ветку</а>

</бб>

<бб>

<а кгеб="{% иг! 'тазбег:сабедогу_сЫ1б_ирб' 1б=оЬ]есб.1б %}"
с!азз="Ьбп Ьбп-зиссезз Ьбп-зт">

<1 с!азз="Ы Ы-зегчег"></1> Изменить название</а>

</бб>

<6Ь>

<а Ьгеб="{% иг! 'тазбег:сабедогу_бе!' 1с1=оЬ]есб. 16 %}"
с!азз="Ьбп Ьбп-Ьапдег Ьбп-зт">

<1 с1азз="Ы-бгазЬЗ"></1> Удалить категорию</а>

</бб>

</бг>

</бЬос!у>

{% епббог %}

</баЫе>
</сИу>

</б1У>
{% епсИГ %}

</сНу>

</сНу> <!— Конец центральной панели —>

</с11у> <!— Конец строки —>

<	/с11у> <!— Конец контейнера —>
{% епбЫоск сопкепк %}

В этом шаблоне имеются три блока:

♦	блок для отображения структуры дерева категорий продуктов (левая панель);

♦	блок для показа кнопки создания корневого элемента в дереве категорий продуктов
(центральная панель);

♦	блок для показа таблицы, в которой можно наполнять данными дерево категорий
продуктов (центральная панель).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Редак-
тор категорий.

Когда дерево категорий продуктов еще не создано (в таблице БД нет данных), то шаб-

лон 8Кош_са1едогу.К1т1 будет выглядеть так, как показано на рис. 4.8.

Левая боковая панель
Категории продуктов

Центральная панель

Корневой узел дерева не создан

Й1 Добавить корень

Рис. 4.8. Внешний вид шаблона 8Ио\л/_са1едогу.Н1т1 при отсутствии в БД корневого узла
дерева категорий продуктов

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

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

Как можно видеть на рис. 4.8, левая панель с категориями продуктов пустая, а на цен-
тральной панели имеется только одна кнопка: Добавить корень. С этой кнопкой свя-
зана следующая ссылка (листинг 4.17).

Листинг 4.17. Ссылка для активации 11КЬ-маршрута са!едогу_гоо1_ас1с1

<сНу с!азз="со1-2 ТехТ-зТагк">

<а Ъгек="{% иг1 'тазкег:сакедогу_гоок_аскГ %}" с!азз="Ькп Ыт-ргбтагу Ькп-зт">

<1 с1азз="Ы Ы-Ьад-р1из"></!> Добавить корень</а>

</сИу>
По нажатию на эту кнопку будет выполнена адресация к ИКЬ-маршруту сабедогу_гооб_
абб, код которого приведен в листинге 4.18.

Листинг 4.18. ЫНЬ-маршрут са(едогу_гоо(_ас1с1

# Создать корень дерева

рабЬ (' сабедогу_гооб_абб', уБемз. сабедогу_гооб_абб, пате=' сабедогу_гооб_абб'),

Этот ИКЬ-маршрут активирует представление сабедогу_гооб_абб (листинг 4.19).

Листинг 4.19. Представление са(едогу_гоо(_ас1с1

##########################
# Создать корень дерева #
##########################
с!еГ сабедогу_гооб_абб (гедиезб) :

# возврат после ввода данных
ББ гедиезб.теббоб == "РОСТ":

Тот = Сабедогу_Еогт(гедиезб.РОЗТ)
ББ Богт.Бз_уа1Бб() :

#	создание в БД новой записи об объекте

гооб_саб = Сабедогу_рг.оЬдесбз.сгеабе(пате=Богт.с!еапеб_баба.деб('пате'))

#	вернуть в представление Бб корневой категории

гебигп гебБгесб(геуегзе ('тазбег:збом_сабедогу', агдз= (гооб_саб.Бб,)))
е!зе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, 'тазбег/д1ауа_4/сабедогу_гооб_Богт.ЬбтБ', {'богт': Богт})
е!зе:

#	Формирование формы для ввода данных
Богт = Сабедогу_Еогт()

# загрузка шаблона с формой для корректировки каталога продуктов

гебигп гепбег(гедиезб, 'тазбег/д1ауа_4/сабедогу_гооб_Богт.Ьбт!', {'Богт': Богт})

При обращении к этому представлению по умолчанию поступает СгЕТ-запрос. При
этом на основе класса сабедогу_Еогт() создается объект Богт с пустыми данными, и этот
объект передается в шаблон са1едогу_гоо1_Гогт, код которого приведен в листинге 4.20.

Листинг 4.20. Шаблон са1едогу_гоо1_Гогт.Ыт1

{% ехбепбз "зЬор/Ьазе.Ьбт!" %}

{% ЬБоск сопбепб %}

<6Бу с!азз="гом тх-2">

<Ь4>Создать корневой узел дерева</Н4>

<Ь6>Имя корневого узла</Ь6>

<Богт асбБоп="" теббоб="розб">

{% сзгБ_бокеп %}

<баЬ1е с!азз="бехб-збагб">

{{ Богт.аз_баЬ1е }}

</баЬ1е>
«11V с1азз="со1 ту-2">

<а ЬгеГ="дауазсг1рк:Ь1з1:огу.до (-1) "

с1азз="Ькп Ькп-зиссезз Ы:п-зт"><-0тмена</а>

СаприЁ Гуре="зиЬт1к" с1азз=”Ы:п Ыт-ргнпагу Ыт-зт" уа1ие="Сохранить" />

</сНу>

</^огт>

</сНу>

{% епбЫоск %}

В этом шаблоне (рис. 4.9) для пользователя отображается только одно поле, в которое
он может ввести имя корневого узла. Здесь также имеются две кнопки: Отмена — для
отмены записи в БД введенной информации и Сохранить — для записи этой информа-
ции в БД.

Создать корневой узел дерева

Имя корневого узла

Мате: Магазин Малинка"

<-Отыена I Сохранить

Рис. 4.9. Внешний вид шаблона са1едогу_гоо1_Гогт

По нажатию на кнопку Сохранить будет выполнен возврат в представление
сабедогу гоог ааа. Поскольку в этом случае поступит РОБТ-запрос, то будут выполнены
инструкции В теле блока И гедиезк.теГЬос! == "РОЗТ”. Здесь объект Рогт получит значение
имени корневой категории и будет выполнена проверка валидности формы. Если
в форме нет ошибок, то в БД будет создана запись с данными корневого элемента в де-
реве категорий продуктов с использованием следующей инструкции:

гоок_сак = СаГедогу.оЬдескз .сгеаке (паше=Рогш.с1еапес!_с1аГа.деГ ('пате'))

а информация о созданной корневой категории — сохранена в объекте гоог саг. Затем
выполнится возврат к представлению зЬом саГедогу, в который будет передан идентифи-
катор корневого элемента в дереве категорий продуктов (гоог саг.н!). После этого шаб-
лон 8Но\л/_са1едогу.Н1т1 примет вид, показанный на рис. 4.10.

Левая боковая панель
Категории продуктов

• Магазин "Малинка1

Центральная панель

Выбрана категория товара - Магазин ' Малинка"

У выбранной категории товара

Нет дочерних категорий

Список категорий
№пп каталога

1 Магазин "Малинка'

Добавить Редактировать Удалить

© Добавить
ветку

3 Изменить
название

А Удалить
категории]

Рис. 4.10. Внешний вид шаблона з1ю\л/_са1едогу.Н1т1
после создания корневого элемента категорий продуктов
В левой панели шаблона появится корневой элемент дерева категорий продуктов, а
в центральной панели — таблица, в которую из БД будет загружено имя корневой ка-
тегории, и откроются три кнопки:

♦	Добавить ветку — для добавления дочерней ветки к текущей категории продуктов;

♦	Изменить название — сменить название текущей ветки дерева категорий продук-
тов;

♦	Удалить категорию — удалить текущую категорию (при этом будут удалены и все
дочерние категории продуктов).

Обратите внимание, что кнопка Добавить корень исчезла, поскольку в нашем алго-
ритме предусмотрено создание только одного корневого элемента. На самом деле кор-
невых элементов может быть несколько, и как их создать, будет показано в одном из
следующих разделов.

В результате создания корневого элемента категорий продуктов в БД появится запись
с параметрами этой категории (рис. 4.11).

КегаМ 6гГ<1 .':ГН|	ЯНег Яотте:			БсЙ: [ЕЙ]		
	И	пате	1Н:	гдЫ	1геедс1	1еуе1	рагеп1дс1
►	1	Магазин ^Малинка’ .1	2	1	0	
*					

Рис. 4.11. Запись в БД с информацией о корневом элементе категорий продуктов

Как здесь можно видеть, корневой узел имеет идентификатор Ш = 1, находится на ну-
левом уровне (1еуе1 = 0) и не имеет родительской категории (рагеп€ 1(1 = 1Х11ЬЬ). Левая
(1Й = 1) и правая (г§111 = 2) части ветки корневого элемента получили значения 1 и 2.

Теперь пользователь с использованием кнопки шаблона Добавить ветку может по сво-
ему усмотрению формировать дерево категорий произвольным образом. Рассмотрим,
как при ЭТОМ ВЫПОЛНЯЮТСЯ процедуры В представлении зЬом_сакедогу.

Это представление в параметре 1а получает идентификатор категории продукта. После
ввода корневого элемента дерева категорий параметр 1а будет иметь значение 1а=1.
Объект са^едогу рг получит полный список элементов дерева категорий, а в объект
ко1_са^ будет внесено количество веток в дереве категорий. Так как количество катего-
рий не будет равно нулю, то в работу вступают процедуры блока и 1а=о. Здесь прове-
ряется условие — откуда было обращение к этому представлению. Если обращение
произошло из блока с каталогом продуктов (левая панель шаблона 8Кош_са1едогу.К1т1),
то в переменной сессии 1а_сак запоминается идентификатор категории, которую выбрал
пользователь. Если обращение произошло из модулей ввода и корректировки данных,
то в объект га сак загружается значение идентификатора категорий, которое было со-
хранено в сессии.

Затем создаются два объекта:

♦	зе1еск_сак — категория, выбранная в каталоге;

♦	Ш гоа сак — родительская категория для категории, выбранной в каталоге.

Если в каталоге выбрана корневая категория (а у нее нет родителя), то для нее в качест-
ве идентификатора родителя указываем собственный идентификатор (1а).
Далее работают процедуры, в которых в объект сакедотез загружаются все записи с вы-
бранной категорией продуктов, включая все дочерние категории. Для этого использу-
ется соответствующий метод класса мрттмобет:

сакедотез = зе!еск_сак.дек_безсепбапкз (1пс1ибе_зе1Т=Тгие)

На следующем шаге определяется количество потомков (дочерних элементов) у вы-
бранной категории (объект рокоток). После этого формируется объект сопкехк, который
передается в шаблон 8Ио\л/_са1едогу.И1т1.

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

Рассмотрим, как работают программные модули при нажатии на кнопку Добавить
ветку. С этой кнопкой связана следующая ссылка в шаблоне 8Иош_са1едогу.К1т1:

<а ЬгеТ="{% иг1 'тазкег:сакедогу_сЫ1б_абб' кп=оЬдеск.пате %}”

с1азз=”Ькп Ькп-ргтагу Ькп-зт">

<1 с1азз=”Ы Ы-Ьад-р1из”></!> Добавить ветку</а>

По ЭТОЙ ссылке вызывается ИКЪ-маршруТ С именем сакедогу_сй11б_абб, и этому маршру-
ту передается имя категории, к которой нужно добавить ветку (листинг 4.21).

Листинг 4.21. ЫНЬ-маршрут са(едогу_сЫ1с1_ас1с1

# создать дочернюю ветку

ракй (’ сакедогу_сЫ1б_абб/<зкг: кп>/', чФемз. сакедогу_сЫ1б_абб, паше=1 сакедогу_сМ1б_абб1),

По этому маршруту активируется представление сакедогу_сйИб_абб, в которое в качестве
аргумента передается имя родительской категории (кп) в виде текстовой строки (лис-
тинг 4.22).

Листинг 4.22. Представление са(едогу_сЫ1с1_ас1с1

##############################################
# Создать дочернюю ветку категории продукта #
##############################################
бек сакедогу_сЫ1б_абб(гедиезк, кп) :

# возврат после ввода данных

1к гедиезк.текйоб == "РОЗТ":

Тот = Сакедогу_Еот(гедиезк.Р03Т)

1Т Тогш.Тз_чаИб() :

скПб-Пате = Тот. с!еапеб_бака. дек (’ пате ’)

рагепк = Сакедогу.оЬдескз.дек(пате=кп)

#	создание в БД новой записи об объекте

Сакедогу.оЬдескз .сгеаке (пате=с1т1б_пате, рагепк=рагепк)

гекигп гебФгеск(гечегзе('тазкег:зйом_сакедогу', агдз=(0,)))
е!зе:

#	возврат к форме для исправления ошибок

гекигп гепбег (гедиезк, 'тазкег/д1ача_4/сакедогу_сЫ1б_Тот.Ькт1', {'Тот': Тот})
е!зе:

#	Формирование формы для ввода данных

Тот = Сакедогу_Еот ()

сопкехк = {'Тот': Тот, 'кп': кп}
# загрузка шаблона с формой для корректировки каталога продукта

гебигп гепбег(гедиезб, 'тазбег/д1ача_4/сабедогу_сНб1б_бот.Ьбт1', сопбехб)

Это представление имеет параметр кп, который принимает имя родительской категории.
При поступлении ОЕТ-запроса создается форма для ввода данных (бот) на основе
класса сабедогу_Еот(). Затем формируется объект сопбехб, который передается в шаблон
са1едогу_сИ|1с1_(огт.И1т1 (листинг 4.23).

Листинг 4.23. Шаблон са1едо1у_сЫШ_1Ъгт.Г|1т1

{% ехбепбз "зЬор/Ьазе.Ьбт!" %}

{% Ыоск сопбепб %}

«Ну с1азз=”гом тх-2”>

<Ь4>Создать (изменить) категорию</Н4>

<Ь5>Имя корневого узла: {{кп}}</Н5>

<Ь6>Введите имя дочернего узла</Н6>

<бот асб1оп=”” теббоб=”розб">

{% сзгб_бокеп %}

<баЬ1е с!азз="бехб-збагб">

{{ богт.а5_баЫе }}

</баЬ1е>

<сПч с1азз="гом бехб-збагб ту-2">

<ббч с1азз="со1-2">

<а йгеб=”дачазсг1рб:Ызбогу.до(-1)" с!азз="Ьбп Ьбп-зиссезз Ьбп-зт”>

<1 с1азз=”Ы Ы-аггом-1ебб-сбгс1е"х/б> Отмена</а>

<Ьиббоп буре=’’зиЬтбб" с!азз="Ьбп Ьбп-ргбтагу Ьбп-зт”>

<1 с1азз=”Ы-Ьад-р1из"></1> Сохранить

</Ьиббоп>

</ббч>

</ббч>

</богт>

</ббч>

{% епбЫоск %}

В этом шаблоне пользователь заполняет только одно поле — имя дочерней категории.
По нажатию на кнопку Сохранить происходит возврат в представление сабедогу_сЫ1б_
абб уже в виде РО8Т-запроса. Здесь в объект бот загружаются введенные пользовате-
лем данные и выполняется проверка их валидности. Если в форме нет ошибок, то фор-
мируются два объекта:

♦	сЫбб пате — имя дочерней категории (выгружается из формы);

♦	рагепб — имя родительской категории (берется из параметра кп представления).

После этого в БД создается новая запись об объекте с использованием метода класса
МрббМобеб:

Сабедогу_рг.оЬдесбз.сгеабе(паше=сНб1б_паше, рагепб=рагепб)

После этого выполняется возврат к представлению збом сабедогу, где происходит обнов-
ление шаблона 8Ио\л/_са1едогу.И1т1.
Итак, у нас есть корневой элемент категорий товаров с именем Магазин «Малинка».
Начнем формирование дерева категорий продуктов с помощью кнопки Добавить вет-
ку. Для начала создадим дочернюю категорию Продукты. Для этого нужно нажать на
кнопку Добавить ветку и в открывшейся форме ввести имя дочерней ветки — в нашем
случае: Продукты (рис. 4.12).

Создать (изменить) категорию

Имя корневого узла: Магазин "Малинка"

Введите имя дочернего узла

М а те: [продукты	|

© Отмена I Й Сохранить

Рис. 4.12. Добавление дочернего элемента к корневому узлу категорий продуктов

После нажатия на кнопку Сохранить шаблон 8Ио\л/_са1едогу.И1т1 обновится и приобре-
тет следующий вид (рис. 4.13).

Левая боковая панель
Категории продуктов

• Магазин "Малинка1
о Продукты

Центральная панель

Выбрана категория товара - Магазин "Малинка"

У выбранной категории товара

Нет дочерних категорий

Список категорий
№пп каталога

1	Магазин "Малинка"

2	Продукты

Добавить

Редактировать

Удалить

Рис. 4.13. Родительский и дочерний элементы категорий продуктов в шаблоне з1ю\л/_са1едогу.Н1т1

Здесь в левой боковой панели будет показано обновленное дерево категорий продук-
тов, а в центральной панели появится обновленная таблица с добавленным элементом.
В базе данных будет создана новая запись, при этом значения полей 1Й и обновят-
ся автоматически (рис. 4.14).

Продолжим заполнение данными дерева категорий продуктов, создав дочерние катего-
рии, приведенные в табл. 4.1. При этом дочерняя категория будет добавлена к тому

Ке5и116г|3 |Д| РЙег Еоивз	Ый; [7 ~| г- -О

		пате	1П	гдЫ:	1гее_1с1	1еие1	рагепМс!
►	1	Магазин ’Малинка’	1	4	1	0	
	2	Продукты	2	3	1	1	1
*	шип		ЙРД	ГИД	ЕИЙЗ	Г.ПТ1	15ИЛИ

Рис. 4.14. Родительский и дочерний элементы категорий продуктов в базе данных
элементу, в строке которого в шаблоне 8Ко\л/_са1едогу.К1т1 была нажата кнопка Доба-
вить ветку. В итоге дерево категорий продуктов примет вид, показанный на рис. 4.15,
а в БД будут сформированы следующие данные (рис. 4.16).

Г1евая боковая панель
категории продуктов

• Магазин "Малинка
Продукты

 Мясо

	Баранина

	Говядина

	Свинина

 Рыба

	Морская

	Озерная

	Речная

Центральная панель

Выбрана категория товара - Магазин "Малинка1

У выбранной категории товара

Нет дочерних категорий

№пп

Список категорий
каталога	Добавить

Удалить

10

Продукты

Мясо

Баранина

Говядина

Свинина

Рыба

Морская

Озерная

Речная

Магазин 'Малинка'

© Добавить
ветку

© Добавить
ветку

Редактировать

* Изменить

название

5 Изменить
название

В Изменить
название

В Изменить
название

в Удалить
категорию

® Удалить
категорию

Удалить
категорию

№ Удалить
категорию

Й Удалить
категорию

Й Удалить
категорию

® Удалить
кз'егорию

Й Удалить
категорию

Й Удалить
категорию

Й Удалить
категорию

1

2

3

4

б

7

8

а

Рис. 4.15. Заполненное дерево категорий продуктов в шаблоне 8Но\л/_са1едогу.Н1т1

► Интерактивная цифровая книга

Именно в таком виде будет показана таблица с категориями продуктов в интерактивной
цифровой книге, если вы на вкладке Показ примеров нажмете на кнопку Примеры главы 4
и перейдете по ссылке Редактор категорий.

Обратите внимание, что в процессе ввода данных пользователь в формах вводил только
наименования категорий продуктов, при этом Э)ап§о автоматически сконфигурировал
значения остальных ключевых полей.
Й.-В5И 11 йпсЕ | 2 У	ЕЙйг Копт:						Ей'1.	1 Я*
	|с|	пате		гдЫ	1гее_	1еуе1	рагеп!_1с1
►	1	Магазин ТМалинка’	1	26	1	0	СШП
	2	Продукты	2	25	1	1	1
	6	Мясо	9	16	1	2	2
	7	Говядина	12	13	1	3	6
	8	Баранина	10	11	1	3	6
	9	Свинина	14	15	1	3	6
	10	Рыба	17	24	1	2	2
	11	Морская	18	19	1	3	10
	12	Озерная	20	21	1	3	10
	13	Речная	22	23	1	3	10
	К1ДЛЧ		Е1ШЗ	ПЛ-713	сип	1|[11Ц	пип

Рис. 4.16. Заполненное дерево категорий продуктов в базе данных

Если дерево категорий достаточно большое и имеет сложную структуру, то пользова-
тель может в левой части страницы выбрать в дереве одну из веток, после чего таблица
в центральной части страницы перестроится, и в ней будет отображена только выбран-
ная категория и все ее дочерние категории. Например, при выборе в дереве категорий
элемента Мясо в таблице останутся только дочерние элементы этой категории: Бара-
нина, Говядина и Свинина (рис. 4.17).

Левая боковая панель

Категории продуктов

• Магазин "Малинкв1

& Продукты

 Мясо

	Бараяина

	Говядина

	Свинина

 Рыба

 Морская
 Озерная

 Рейная

Центральная панель

Выбрана категория товара - Мясо

Редактировать

Ш Удалить
категорию

® Удалить
категорию

® Удалить
категорию

® Удалить
категорию

Удалить

Рис. 4.17. Заполненное дерево категорий продуктов в базе данных

В этом режиме пользователь может продолжать редактировать дерево категорий про-
дуктов. Рассмотрим, как работает такая фильтрация данных. Каждая ветка дерева кате-
горий в левой части окна показана как ссылка. Эта ссылка в шаблоне 8Кош_са1едогу.Ыт1
записана следующим образом:

<а ЬгеГ=’7зЬом_саГедогу/{ {пос!е. 1с1}} ">{ {пос!е.пате} }</а>
По этой ссылке активируется маршрут зкж_сабедогу, в который передается идентифика-
тор (1б) выбранной категории:

рабЬ (’ збом_сабедогу/<1пб: 1б>/' , чбемз. збом_сабедогу, пате=' збюм_сабедогу'),

По этому маршруту вызывается представление зкж_сабедогу с аргументом выбранной
категории (1а).

В представлении этот идентификатор выбранной категории (1а) принимается в качестве
параметра, и на его основе данные о категориях продуктов фильтруются в следующих
инструкциях:

#	выбранная категория в каталоге

зе1есб_саб = Сабедогу.оЬдесбз.деб(1б=1б_саб)

#	категории, в которые входит выбранная категория и все дочерние категории

сабедогбез = зе1есб_саб.деб_аезсепаапбз(1пс1ибе_зе1б=Тгие)

Объект сабедогбез передается в шаблон 8Ио\л/_са1едогу.И1т1, где используется для отобра-
жения таблицы с выбранными категориями товаров. Для этого строки таблицы отобра-
жаются в центральной панели в следующем цикле:

{% бог оЬдесб 1п сабедогбез %}

{% епбИ %}

Содержимое же левой панели шаблона, где показано само дерево категорий, не фильт-
руется и показывается в развернутом виде. Для этого используется следующий блок
инструкций:

<Ь6>Категории продуктов</Ь6>

{% 1оаб трбб_бадз %}

<и1 1б="туОЬ">

{% гесигзебгее сабедогу_рг %}

<11>

<а Ьгеб=”{% иг1 ’тазбег:збом_сабедогу' 1б=побе.16 %}”>{{ побе.пате }}</а>

{% И побе.1з_1еаб_побе %}

<зрап с1азз=”1еаб”>{{ побе.собе }}</зрап>

{% е1зе %}

<зрап с1азз=”сагеб рагепб">{{ побе.собе }}</зрап>

<и1 с1азз="пезбеб”>{ { сЬНбгеп } }</и1>

{% епбИ %}

</11>

{% епбгесигзебгее %}

</и1>

Здесь для показа дерева категорий задействован следующий тег:

{% гесигзебгее сабедогу_рг %}

{% епбгесигзебгее %}
4.3.5. Модули для обновления категорий продуктов

Рассмотрим, как работают программные модули при нажатии в шаблоне 8Но\л/_
сабедогу. Мт I на кнопку Изменить название. С этой кнопкой связана следующая ссылка:

<а Ьгеб="{% иг1 ’тазкег:сабедогу_с11б16_ир6' б6=оЬдесб.бб %}”

сбаз8="Ьбп Ьбп-зиссезз Ьбп-зт">

<б с1азз="Ы Ы-зегуег"></1> Изменить название</а>

По этой ссылке вызывается ИКЬ-маршрут с именем сабедогу_сьиа_ирб, и ему передается
идентификатор категории, у которой нужно сменить название (листинг 4.24).

Листинг 4.24. Маршрут са!едогу_сЫ1с1_ирс1

# Обновить название ветки

рабЬ (’ сабедогу_сЫ16_ирб/<6пб: 1с1>/', убемз. сабедогу_сЫ16_ирб, пате=' сабедогу_сЬб16_ирб ’),

По этому маршруту активируется представление сабедогу_сЬб1б_ирб, в которое передается
идентификатор текущей категории (1а) в виде целого числа (листинг 4.25).

Листинг 4.25. Представление са(едогу_сЫ1с1_ирс1

###################################
# Обновить имя категории продукта #
###################################
беб сабедогу_сЬб16_ирб(гедиезб, 66) :
# загрузить текущую категорию
сабедогу = деб_оЬдесб_ог_404(Сабедогу, 16=16)
# возврат после ввода данных
66 гедиезб.теббоб == "РОЗТ":

богт = Сабедогу_Еогт(гедиезб.РОЗТ,
1П1б1а1={'пате': сабедогу.пате})

16 богт.бз_уа1б6():

сабедогу.пате = богт.с!еапе6_6аба.деб('пате')
сабедогу.зауе()

гебигп геббгесб(геуегзе('тазбег:збом_сабедогу', агдз=(0,)))
ебзе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, 'тазбег/д1ауа_4/сабедогу_сЫ16_богт.Ьбт1', {'богт': богт})
ебзе:

#	загрузка в форму сведений об объекте

богт = Сабедогу_Еогт(бпббба1={'пате': сабедогу.пате})
сопбехб = {'богт': богт}

# загрузка шаблона с формой для корректировки каталога продукта

гебигп гепбег(гедиезб, 'тазбег/д1ауа_4/сабедогу_сНб16_богт.Ьбт1', сопбехб)

Это представление имеет параметр бб, который принимает идентификатор категории
продукта. При поступлении ОЕТ-запроса на основе класса сабедогу Еогт о создается
форма (богт) для корректировки данных. Затем формируется объект сопбехб, который
передается в шаблон са!едогу_сМ1с1_1:огт.Мт1.
В шаблоне са1едогу_сИИс1_(огт.И1т1 пользователь корректирует только одно поле — имя
категории. По нажатию на кнопку Сохранить происходит возврат в представление
сагедогу сьна ира уже в виде РО8Т-запроса. Здесь в объект богт загружаются введенные
пользователем данные и выполняется проверка их валидности. Если в форме нет
ошибок, то обновленное имя категории записывается в БД. После этого выполняется
возврат к представлению зкж_сабедогу, где происходит обновление шаблона 8Ио\л/_

са1едогу.И1т1.

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

Рассмотрим, как работают программные модули при нажатии в шаблоне 8Иош_са1едогу.И1т1
на кнопку Удалить категорию. С этой кнопкой связана следующая ссылка:

<а Ьгеб="{% иг1 'тазбег:сабедогу_6е!' 1с1=оЬзесб.1с1 %}"
с!азз="Ьбп Ьбп-бапдег Ьбп-зт">

<1 с1азз="Ы-бгазЬЗ"></1> Удалить категорию</а>

По этой ссылке вызывается ПКЬ-маршрут с именем сагедогу ае1 и ему передается иден-
тификатор удаляемой категории (листинг 4.26).

Листинг 4.26. Маршрут са(едогу_с1е1

# Удалить категорию

рабб (' сабедогу_<1е1/<1пб: 1с1>/', убемз. сабедогу_с!е1, пате=' сабедогу_6е! ’),

По этому маршруту активируется представление сабедогу_<1е1, в которое передается
идентификатор удаляемой категории (ш) в виде целого числа (листинг 4.27).

Листинг 4.27. Представление са(едогу_с1е1

######################
# Удалить категорию #
######################

с!еГ сабедогу_6е! (гедиезб, бб) :

#	загрузить текущую категорию по 1с1

сабедогу = деб_оЬдесб_ог_404 (Сабедогу, 1с1=1с1)

#	возврат из формы

бб гедиезб.тебЬоб == "РОЗТ":

бб ’уез’ бп гедиезб.РОЗТ:

# удаление сведений об объекте из БД

Сабедогу. обд есбз. деб (66=6(1) . бебебе ()

гебигп геббгесб(геуегзе ('тазбег:з1ю™_сабедогу', агдз=(1,)))

#	загрузка в сопбепб сведений об объекте

6x61 = 'Будет удалена категория'

6е1_рго6 = сабедогу.пате

сопбехб = {"6x61": 6x61, "6еТ_ргоб": 6еТ_ргоб}

#	вызов шаблона подтверждения/отмены удаления

гебигп гепбег(гедиезб, "тазбег/6е1_уезпо.11бтТ", сопбехб)
Это представление имеет параметр 1а, который принимает идентификатор удаляемой
категории продукта. Из этого представления выполняется обращение к шаблону, в ко-
тором будет сформирована форма. В этой форме пользователь получит имя удаляемой
категории и сможет либо подтвердить, либо отменить удаление.

При поступлении ПЕТ-запроса в представлении создается объект сагедогу, текстовое
сообщение и имя категории, которые загружаются в объект сопгехг, и этот объект пере-
дается в шаблон с1е1_уе8по.И1т1 (рис. 4.18). В этом шаблоне в теле формы пользователю
отображается имя удаляемой категории и две кнопки: Отмена — отменить удаление и
Удалить— подтвердить удаление. Эти кнопки именованные: кнопка Отмена имеет
имя пате='по', кнопка Удалить — имя пате=’уез'. Имя нажатой кнопки будет передано
в представление сагедогу йе! в РОБТ-запросе.

Будет удалена категория

Речная

Удалить запись из БД?

<-Отмена I Удалить I © Удалить

Рис. 4.18. Внешний вид шаблона с1е1_уе8по.Н1т1

Пояснение

Напомним, что в шаблоне с1е1_уе8по.Мт1 (см. рис. 4.18) для примера показаны два варианта
кнопки Удалить: с синим фоном — простая кнопка для удаления, с зеленым фоном —
кнопка для удаления с крутящимся спином.

По нажатию на любую кнопку выполняется возврат в представление сагедогу йе!, где
в инструкции и 'уез' 1п гедиезг.розт производится идентификация нажатой кнопки.
Если пользователь нажал кнопку Удалить, будет выполнена инструкции удаления
записи из БД, а если кнопку Отменить, эта инструкция будет пропущена, и в обоих
случаях произойдет возврат к шаблону отображения категорий продуктов зНо\л/_
сакедогу. Ыт1. Поскольку текущая категория может быть удалена, то в шаблон передает-
ся идентификатор корневой категории, при этом удаленная категория удаляется и из
дерева категорий, и из таблицы со списком категорий.

* * *

Реализация древовидных структур Р]ап§о-шрй предлагает эффективный метод обра-
ботки иерархических данных. Разработчики могут быстро создавать и запрашивать
иерархические структуры и манипулировать ими, используя библиотеку В)ап§о-шрй.
Недостатки традиционных методов выборки иерархической информации из БД пре-
одолеваются за счет использования в модели МРТТ левых и правых значений для
структурных элементов (веток) дерева, что позволяет быстро находить предков, потом-
ков, братьев и сестер. Таким образом, с помощью В)ап§о-шрй разработчики могут до-
биться повышения производительности, упрощения управлением взаимоотношениями
и гибкости при обработке информации. Это достаточно мощный инструмент для
эффективного управления иерархическими данными, будь то платформы электрон-
ной коммерции, системы управления контентом или любые приложения, работающие
с иерархическими данными.
4.4.	Создание спиское объектов

с фильтрацией через древовидные каталоги

В предыдущих разделах мы создавали древовидные структуры на примере категорий
продуктов. Создание древовидных структур приобретает смысл лишь в том случае,
если они используются для фильтрации и выборки информации из больших массивов
данных — например, когда мы имеем дело с интернет-магазином, в номенклатуре ко-
торого не одна тысяча различных товаров. Тогда всю номенклатуру товаров можно
разбить на категории и предоставить пользователям удобный интерфейс для поиска
нужного товара через древовидный справочник категорий товаров. Для реализации
такой возможности надо обеспечить связь древовидного каталога категорий товаров
с таблицами БД, в которых хранятся данные о самих товарах. Или, например, когда
сайт поддерживает блог со множеством статей на различные темы. В этом случае нуж-
но создать справочник категории статей, а затем массив статей блога связать с древо-
видным справочником этих категорий, — таких примеров можно привести бесконечное
множество.

Далее мы рассмотрим набор программных модулей, которые позволяют реализовать
создание списка продуктов интернет-магазина и связанного с ним справочника катего-
рий продуктов. Это наиболее распространенная задача, которая востребована при
создании сайтов интернет-торговли. Для ее решения мы создадим две новые модели:
для хранения категорий продуктов (сепге) и для хранения данных о самих продуктах
(РгойисЕз).

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

В предыдущих разделах была создана модель категорий продуктов сагедогу, которая
имела один корневой элемент. Здесь же мы для примера создадим другую модель кате-
горий продуктов — сепге т, которая получит несколько корневых элементов. Код моду-
ля для формирования модели сепге т приведен в листинге 4.28.

Листинг 4.28. Модель для хранения категорий продуктов 6епге_т

########################
# категории продуктов #
########################
с!азз Сепге_т(МРТТМос1е1) :

пате = тос!е1з .СЬагЕ1е1с1(тах_1епд1±1=50)

рагепЕ = ТгееГогегдпКеу(’зе1Е', оп_с!е1е11е=тос1е18 .САЗСАБЕ,
пи!1=Тгие, Ыапк=Тгие,
ге1аЕес1_пате= ’ сЬНбгеп')

йеЕ ___зЕг__(зе!Е) :

геРигп зе!Е.пате

с!азз МРТТМеЕа:

огс!ег_1пзегЕ1оп_Ьу = [' пате' ]
Для заполнения этой модели данными через административную панель Ц]ап§о зареги-
стрируем ее в модуле ас1т1п.ру (листинг 4.29).

Листинг 4.29. Регистрация модели 6епге_т в модуле ас1т1П.ру

Бгот .тос!е1з трогГ Сепге_т

#	Импорт пакета Од апдоМрГ1:Ас1т1п

Бгот сЦ апдо_трГГ_ас]т1п. асШп атрогР В] апдоМр1111Ас1т1п

#	Дополнительный класс для регистрации модели

с1азз СаГедогуАс5т1п ОДапдоМрРРАскпгп) :
пате = {"з1ид”: ("пате",)}

#	Регистрация модели Сепге

асйпгп.згГе.гедгзГег(Сепге_т, СаРедогуАбтгп)

Заполним эту модель данными через административную панель В)ап§о, создав не-
сколько корневых категорий (рис. 4.19).

Рис. 4.19. Заполненный справочник категорий продуктов Сепге т
4.4.2.	Модель для хранения сведений о продуктах

Теперь, когда мы реализовали модель для хранения категорий продуктов сепге т, необ-
ходимо создать модель для хранения данных о продуктах РгобисР, а также функцию, ко-
торая будет автоматически формировать имена файлов для изображений (фотографий)
продуктов (листинг 4.30).

Листинг 4.30. Код функции гепате_ргос1 и модель для хранения данных
о продуктах Ргос1ис1

#################################################

#	Функция изменения имени изображения продукта #
#################################################
6еР гепате_ргоб(РпзРапсе, РРРепате) :

ирРоаб_Ро = 'ргобисРз'

ехР = РРРепате.зрРРР ('.') [-1]

п_гес = Реп (РгобисР. о^есРз.аРР ())
# получить 16 последней записи
1Р п_гес == 0:

тах_гес = О
еРзе:

тах_гес = РгобисР.оЬдесРз.аРР () . РазР() .16

тах_бб = тах_гес +1 #66 следующей записи
рЬоРо = ’ргоб_' + зРг(тах_бб)
1Р бпзРапсе.рк: # текущий Ю

Рббепате = '{}{}.{}'. РогтаР ('ргоб_', бпзРапсе .рк, ехк)

еббР рЬоРо: # имя файла - текущий Ю + 1
Рббепате = '{}•{}'• РогтаР (рНоРо, ехР)
е!зе: # случайное имя файла

Рббепате = '{}{}.{}'. РогтаР ('ргоб_', ииб64().Нех, ехР)
# вернуть полное имя файла
гебигп оз.раРк.зобп(ирРоа6_Ро, Рббепате)

#####################
# Модель продукты #
#####################
сбазз РгобисР(тобебз.Мобеб):

депге = тобебз.ЕогеРдпКеу(Сепге_т, оп_6ебеРе=тобебз.САЗСАБЕ,
Ьбапк=Тгие, пибб=Тгие,
чегЬозе_пате="Категория продукта")

пате = тобеРз .СНагЕбеб6(тах_бепдр]1=450,
чегЬозе_пате="Наименование товара")

безсгбррбоп = тобеРз.ТехРЕРеРб(ЬРапк=Тгие,
чегЬозе_пате="0писание товара")

ргРсе = тобеРз.РесРтаРЕРеРб(тах_6РдРРз=Р0, 6есРтаР_рРасез=2,
чегЬозе_пате="Цена")

Ртаде = тобеРз.РтадеЕРеР6(ирРоа6_Ро=гепате_ргоб, ЬРапк=Тгие,
чегЬозе_пате="Фото товара")
озкак = тоНекз .8та111пкедегГ1е1с1(с1екаи1к=0,

Ье1р_кехк='Измените количество1,
чегЬозе_пате="На складе")

окдескз = тос!е1з .Мападег

с1азз Мека:

огйегтпд = [’пате']

с!еГ _зкг___(зе1Г) :

гебигп зкг(зе!Р.пате)

В этой модели для класса Ргойиск созданы следующие поля:

♦	депге — категория продукта;

♦	пате — наименование продукта;

♦	аезсгарПоп — описание (характеристики) продукта;

♦	рг1се — цена продукта;

♦	шаде — изображение (фотография) продукта;

♦	озкак — остаток на складе.

Поле депге предназначено для связи с моделью сепд т (категория продукта) по первич-
ному ключу. Здесь используется тип связи «один ко многим», где «один» — категория
продукта, а «многие» — сведения о конкретных продуктах. По умолчанию при выводе
сведений о продуктах они будут отсортированы по наименованию продукта (поле пате).
Чтобы исключить ошибки при загрузке изображений с именами файлов на кириллице,
эту модель сопровождает функция автоматического переименования файлов загружае-
мых изображений гепате_ргос1.

Пояснение

Поскольку публичные серверы, работающие на 1лпих, не принимают файлы с именами на
кириллице, использование этой функции позволит автоматически переименовывать такие
файлы.

Для реализации возможности наполнения данными сведений о продуктах в админист-
ративной панели эту модель нужно зарегистрировать в модуле ас1т1п.ру (листинг 4.31).

Листинг 4.31. Регистрация модели Ргос1ис( в файле ас1тт.ру

Ргот .тос!е1з нпрогк Ргойиск

#	Продукты (товары)

асЗттп.зтке.гедтзкег (РгоНиск)

Создав коды моделей сепге и РгоПисг, не забудьте выполнить процедуру миграции:

рукЬоп тападе.ру такеттдгактопз

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

Чтобы пользователь мог заполнять данными сведения о продуктах, необходимо создать
соответствующую форму (листинг 4.32).

Листинг 4.32. Форма для ввода сведений о продуктах Ргос1ис1Еогт

Ргот .тос!е1з трогГ РгойисГ

############################################
# Форма для изменения сведений о продуктах #
############################################
с1азз Ргос1исГГогт(1огтз .Мос1е1Гогт) :
с!азз Мера:
тойе! = РгосЬсГ
# Исключить поле из ввода
ехс1ис!е = [' депге' ]

Форма РгойисГГогт построена на основе базового класса 1огтз.Моае1Гогт, и в ней будут
отображаться все поля для ввода данных, кроме поля депге.

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

Для доступа к интерфейсу формирования данных о продуктах нужно в личном каби-
нете пользователя или в меню любой страницы сайта создать следующую ссылку для
вызова редактора продуктов (листинг 4.33).

Листинг 4.33. Ссылка для вызова редактора продуктов

<а ИгеР="{% иг! ’тазГег :есП1:_ргос1ис1:' 1(1=1 %}" РагдеР ="_Ыапк">Редактор продуктов</а>

По этой ссылке будут активированы ЦКЬ-маршруты с именем еспг ргойисг (лис-
тинг 4.34).

Листинг 4.34. 11К1_-маршруты есШ_ргос1ис1

# Редактирование сведений о продуктах

раГИ (’ еШЛ_ргос1исС/ ’, члемз. есШ1_рго(1исЬ, пате=' есПГ_ргос1исГ ’),

раГИ (' есПГ_ргос1исГ/<1пр: 1с1>/', ч!емз. есП11_ргос1исГ, пате=' есПГ_рго(1исГ'),

По этим маршрутам будет вызываться представление еспг ргоаисг, в которое может
передаваться идентификатор категории (листинг 4.35).

Листинг 4.35. Представление ес1й_ргос1ис(

Ргот .тос!е1з трогГ РгойисГ, Сепге_т

Ргот с!запдо.соге.радлпаГог нпрогР РадапаРог

###########################
# Редактировать продукты #
###########################
с!еГ еаТб_ргоаисб (гедиезб, Та=О):

Тб Та == 0:

Та_саб = гедиезб.зеззТоп['Та_саб']

е1зе:

Та_саб = Та

гедиезб.зеззТоп['Та_саб'] = 1с1 # запомнить 1с1 категории

#	загрузить все категории продуктов для передачи в шаблон

депге = Сепге_т.оЬдесбз.а11()

#	Выбранная категория продукта в каталоге

зеТесб_саб = Сепге_т.оЬдесбз .деб (Та=Та_саб)

#	Та родительской категории для выбранной категории в каталоге

Та_гоа_саб = зеТесб_саб.рагепб_Та

Тб ба_гоа_саб 13 Еопе:
ба_гоа_саб = 1

#	Получить запись с параметрами родительской категории

зеТесб_гоа_саб = Сепге_т.оЬдесбз.деб(ба=ба_гоа_саб)

#	категории, в которые входит выбранная категория и все дочерние категории

депгез = зеТесб_саб.деб_аезсепаапбз(бпс1иае_зеТб=Тгие)

#	Количество выбранных категорий, включая дочерние

п_депгез = Теп(депгез)

#	продукты, которые входят в выбранную категорию и во все дочерние

ргоаисбз = Ргоаисб.оЬдесбз. ббТбег (депге_1п=депгез) .абзббпсбО .огс!ег_Ьу ('пате')

#	Пагинатор

радбпабог = Радбпабог(ргоаисбз, рег_раде=10)

раде_питЬег = гедиезб.СЕТ.деб('раде')

раде_оЬ] = радбпабог.деб_раде(раде_питЬег)

сопбехб = {"ргоаисбз": ргоаисбз, "депге": депге, "раде_оЬ^": раде_об^,
"зе!есб_саб": зе!есб_саб, "ба_саб": ба_саб, "п_депгез": п_депгез,
"зе!есб_гос1_саб": зе!есб_гоб_саб, "ба_гоа_саб": ба_гоа_саб}

гебигп гепбег(гедиезб, "тазбег/д1ача_4/е61б_рго6исб.Ьбт1", сопбехб)

Это представление имеет параметр та, который принимает идентификатор категории
продукта. Если такой идентификатор не передан, то по умолчанию он принимает зна-
чение ба=о (пользователь попал в представление из модулей добавления или обновления
продукта). Важно не забыть импортировать модели Ргобисб, Сепге_ш И пагинатор Радбпабог.

Если пользователь попал в представление из каталога продуктов (та не равно 0), то
в переменной сессии та_саб запоминается идентификатор выбранной пользователем
категории. Если пользователь попал в представление из модулей добавления или об-
новления продукта (та = о), то из переменной сессии та_саб в объект та_саб загружается
идентификатор категории товара, которую пользователь выбрал на предыдущем шаге.

После этого из БД в объект депге загружаются все категории товаров, в объект зеТесб_
саб — та категория товара, которая выбрана пользователем, а в объект та_гоа_саб — та
родительской категории для выбранной категории товара.
Если в дереве каталога создан только главный корень, у которого нет родителя, то для
него делается присвоение 1б_гоб_сак=1 (главный корень ссылается сам на себя).

На следующем шаге объект зе1еск_гоб_сак получает запись с параметрами родительской
категории, а объект депгез — записи, в которые входит выбранная категория и все
дочерние категории.

После этого объект п депгез получает количество выбранных категорий, включая до-
черние. Это нужно для того, чтобы блокировать кнопку Добавить продукт, поскольку
продукт может быть добавлен только к конечной ветке дерева, у которой нет дочерних
категорий, — т. е. для этой ветки количество категорий п_депгез=1.

На следующем шаге объект ргобискз (продукты), получает из БД записи обо всех про-
дуктах, которые входят в выбранную категорию и во все дочерние.

На заключительном этапе создается пагинатор (объект радбпаког), который в нашем
примере позволяет выводить по 10 единиц товара на одной НТМЬ-странице.

После этого формируется объект сопкехк, который передается в шаблон отображения
и редактирования продуктов есИ_ргос1ис1.1п1т1 (листинг 4.36).

Листинг 4.36. Шаблон ес1й_ргос1ис(.Мт1

{% ехкепбз "зкор/Ьазе.ЬктГ’ %}

{% Ыоск сопкепк %}

<ббч с1азз="сопка1пег-11и1б р-1" зку1е="Ьаскдгоыпб-со1ог:гдЬ (224, 255, 255) ;">

<61V с1азз="гом"> <!— Это начало строки —>

<!— Это левая панель —>

<сПч с1азз="со1-6 со1-зт-6 со1-тб-4 со1-1д-2 со1-х1-2

ЬдЫпко Ьд-орас1ку-25">

<кб>Левая боковая панель</116>

<Ь6>Каталог товаров</116>

{% 1оаб шркк_кадз %}

<ы1 1с1="туиЬ">

{% гесигзекгее депге %}

<Ы>

<а Ьгек = ’7е61к_ргобискз/{ {побе.16}} ">{ {побе.пате} }</а>

{% Ы побе. 1з_1еак_побе %}

<зрап с1азз="1еак">{{ побе.собе }}</зрап>

{% е1зе %}

<зрап с1азз="сагек рагепк">{{ побе.собе }}</зрап>

<и1 с1азз="пезкеб">{ { скНбгеп } }</и1>

{% епбИ %}

</Ы>

{% епбгесигзекгее %}

</и1>

</б1Ч>

<!— Это центральная панель —>

<бгч с1азз="со1-6 со1-зт-6 со1-шб-8 со1-1д-10 со1-х1-10 кехк-зкагк">

<Ы>Центральная панель</Ы>
<сНч с1азз="гом бехб-збагб 1Н-2">

<И5>Родительская категория - {{зе1есб_гоб_саб.пате}}</И5>

<И5>Дочерняя категория - {{зе1есб_саб.пате}}</Ь5>

</сНу>

<сНу с1азз="гом бехб-збагб 1Ь-2">

<сНу с!азз=”со1-4 РехР-с1апдег">

{% 16 п_депгез == 1 %}

<а Игеб="{% иг! 'зкор:ргос!ис11_ас1сГ %}"

с1азз=”Ь6п Ьбп-рггтагу Ып-зт">

<1 с1азз=”Ы Ы-Ьад-р1из"></1> Добавить товар</а>

{% е!зе %}

<И6>Продукт можно добавить только в конечную ветвь</И6>

{% епсНб %}

</сНч>

</сНч>

<сНч с1азз="гом ту-2”>

<сНч с1азз=”со1-10">

<сНч збу1е=”очегб1ом:зсгоИ; ">

<баЫе с1азз=”баЫе баЫе-збгбреб РаЫе-Ьогбегеб РехР-збагР">

<бИеаб>

<рг>

<бИ>№пп</бИ>

<бИ>Наименование продукта</РН>

<бИ>Цена</бИ>

<бИ>Фото</бИ>

<РЪ>Категория</1±>

<РЪ>Редактировать</Рк>

СбЪЖрупное фото</1±>

</бг>

</РЪеаб>

<РЬобу>

{% Рог окдесб гп раде_оЬд %}

<Рг>

<Ы>{{Рог1оор. соыпбег}} </Рб>

<!— Наименование —>

<Ы><а ИгеР="/ргобисб_бебаИ/{ {оЬдесб.Ы}} ”>

<г с1азз="Ы-зеагсИ"></1> {{оЬдесб. паше}}</а></бб>

<!— Цена —>

<Ы> {{обд есб. рггсе}} </Ы>

<!— Фото —>

{% 16 оЬзесб.нпаде %}

<Ых1тд згс="{{ оЬдесб.Ршаде.иг! }}"

а1б="соппесб" збу1е="шах-Ие1дИН: 100рх”х/Ы>

{% е!зе %}

<Ы> Нет изображения</бб>

{% епсНб %}
<!— Фото —>

<Ы> {{оЬз есб. депге}} </Ш>

<!— Редактировать —>

<Ы><а ЬгеР=’7ргос1ис1:_ирс1/{{оЬдесб.гс!}}"
с1азз="Ьбп Ьбп-зиссезз Ыт-зш">

<1 с!азз=”Ы Ы-зегуег"х/1>Изменить</а>

<а НгеР="{% иг! 'зНор:ргос!ис1:_с1е1' 1с1=оЬ]есР.М %}”
с!азз=”ЬРп Ыт-с1апдег Ыт-зш">

<1 с1азз="Ы-РгазЪЗ"></1> Удалить</а>

</Ы>

{% 1Р оЬд еск. шаде %}

<Ы><а ЪгеР="{{ оЬдесР.нпаде.иг!}}"
с1азз=”Ыт Ызп-ргшагу Ы:п-зт" РагдеР="_Ыапк">
<1 с1азз="Ы-зеагсН"х/1> Показать</ах/бс1>

{% е!зе %}

<Ы> Нет изображения</Ш>

{% епсНР %}

</бг>

{% епНРог %}

<НЬобу>

</баЫе>

</сНу>

</сИу>

</с11у>

{% 1Р ргоНисНз %}

{% е!зе %}

<сНу с1азз=”гом">

В базе данных нет записей о товарах данной категории

</сНу>

{% епсНР %}

<сНу с1азз=”рад1паб1оп"> <!— Пагинатор начало —>

<зрап с1азз=”збер-Ипкз">

{% 1Р раде_оЬд.Наз_ргеу1оыз %}

<а НгеР=”?раде=1”>&1адио; Первая</а>

<а НгеР=”?раде={{ раде_оЬд.ргеу1оиз_раде_пшпЬег }}">Предыдущая</а>
{% епсНР %}

<зрап с1азз=”сиггеп11">

Стр. {{ раде_оЬд.пшпЬег }} из {{ раде_оЬд.радгпабог.пыт_радез }}.

</зрап>

{% 1Р раде_оЬд.Наз_пехб %}

<а НгеР=”?раде={{ раде_оЬд.пехб_раде_пшпЬег }}">Следующая</а>

<а НгеР=”?раде={{ раде_оЬд.радгпабог.пыт_радез }}”>Последняя &гадио;</а>
{% епсНР %}

</зрап>
</сНу> <!— Пагинатор конец —>

</сНу> <!— Конец центральной панели —>

</сИу> <!— Конец строки —>

</с1гу> <!— Конец контейнера —>
{% епбЫоск сопкепк %}

В этом шаблоне имеются несколько блоков:

♦	блок для отображения структуры дерева категорий продуктов (левая панель);

♦	блок для показа кнопки создания нового продукта (центральная панель);

♦	блок для показа таблицы, в которой можно отображать/редактировать данные
о продуктах (центральная панель);

♦	пагинатор для постраничного вывода сведений о продуктах.

В колонках таблицы этого шаблона отображается следующая информация:

♦	номер по порядку (счетчик строк таблицы);

♦	наименование продукта;

♦	цена продукта;

♦	фото продукта (в виде миниатюры);

♦	категория продукта;

♦	кнопки для редактирования продукта;

♦	кнопка для показа крупного изображения продукта.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Редак-
тор продуктов.

Когда сведения о продуктах выбранной категории еще не сформированы (в таблице БД
нет данных), то шаблон есП1_ргос1ис1.И{т1 будет выглядеть так, как показано на рис. 4.20.

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

Левая боковая панель Категории продуктов	Центральная панель
 Заморозка  о Изделия.и? теста  о Морохвн&е  о Рыба  о Ягоды. Грибы	Родительская категория - Заморозка  Дочерняя категория - Заморозка  Продукт мохно добавить только в конечную ветвь  №пл Наименование продукта	Цена Фото Категория Редактировать Крупное фото
° Ирид  ° Карамель  о Ко-ноеть1 в коробках	В базе данных нет записей о товарах данной категории Стр. 1 из 1.

Рис. 4.20. Шаблон ес1И_ргос1исШт1 при выборе корневой категории продукта
Как здесь можно видеть, на центральной панели показано сообщение: Продукт можно
добавить только в конечную ветвь. Этим алгоритмом предусмотрен запрет добавле-
ния продуктов к корневым и промежуточным категориям продуктов. Но если в левой
боковой панели пользователь выберет конечную ветку категорий продуктов, то на цен-
тральной панели появится кнопка Добавить товар (рис. 4.21).

боковая панель

Категории продуктов

* Заморозка

о Изделия из
теста

о мороженое
о Рыба

° Ягоды Гри5в1

 кондитерские

о Ирис
о карамель
° Конфеты в

Центральная панель

Родительская категория - Заморозка
Дочерняя категория - Мороженое

© Д&бавнтъ гомс

№пл Наименование продукта Цена фото Категории Редактировать Крупное фоте

й базе данных нет записей о товарах данной категории

Стр. 1 из 1.

Рис. 4.21. Шаблон ес!И_ргос1исШт1 при выборе конечной ветки категории продукта

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

Рассмотрим, как работают программные модули при нажатии на кнопку Добавить
товар шаблона есП_ргос1ис1.111т1. С этой кнопкой в шаблоне связана следующая ссылка:

<а ЬгеТ="{% иг1 'тазбег:ргобисб_а66' %}"
с!азз="Ьбп Ьбл-ргнпагу Ьбп-зт">

<1 с1азз=”Ы Ы-Ьад-р1из "></!> Добавить товар</а>

По этой ссылке вызывается ИКЬ-маршрут с именем ргобисб_абб (листинг 4.37).

Листинг 4.37. ЫНЬ-маршрут ргос1ис1_ас1с1

# Добавить продукт (товар)

рабЬ('ргобисб_аб6/', чбемз.ргобисб_аб6, паше='ргобисб_аб6'),

По этому маршруту активируется представление ргобисб абб (листинг 4.38).

Листинг 4.38. Представление ргос1ис(_ас1с1

Егот . Гогтз нпрогб РгобисбГогт

#############################
# Добавить продукт (товар) #
#############################

беР ргобисб_аб6(гедиезб):

# возврат после ввода данных

бб гедиезб.теббоб == "РОЗТ":

Тот = РгобисбГогт(гедиезб.РОЗТ, гедиезб.ПЬЕЗ)
# получить 16 текущей категории
16_саб = гедиезб.зеззбоп['бб_саб']
ББ Богт.Бз_уа1Бб() :

#	создание в БД новой записи об объекте

Ргобисб.обзесбз.сгеабе(

пате=Богт.с!еапеб_баба.деб('пате'),

безсгБрбБоп=Богт.с1еапеб_баба.деб ('безсгБрбБоп'),

ргБсе=Богт. с!еапеб_баба. деб ('ргБсе'),

Бтаде=Богт. с!еапеб_баба. деб (' Бтаде'),
озбаб=Богт. сБеапеб_баба. деб (' озбаб'),
депге_Бб=Бб_саб)

гебигп гебБгесб(геиегзе('тазбег:ебБб_ргобисб'))
е1зе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, 'тазбег/абб_ирб_Богт.Ибт!’, {'Богт’: Богт})
е!зе:

#	Формирование формы для ввода данных

Богт = РгобисбЕогтО
сопбехб = {'Богт': Богт}
# шаблон с формой для ввода/корректировки
гебигп гепбег(гедиезб, ’тазбег/абб_ирб_Богт.Нбт1', сопбехб)

При поступлении СгЕТ-запроса на основе класса Ргобисб_Еогт() создается форма для вво-
да данных (богт). Затем формируется объект сопбехб, который передается в универсаль-
ный шаблон ас1с1_ирс1_Гогт.111т1. Здесь важно не забыть выполнить импорт формы
Ргобисб ЕогтО. В универсальном шаблоне ас1с1_ирс1_Гогт.К1т1 эта форма имеет вид, пока-
занный на рис. 4.22.

В этой форме пользователь заполняет нужные поля и нажимает на кнопку Сохранить,
после чего происходит возврат в представление ргобисб абб уже в виде РО8Т-запроса.

Рис. 4.22. Внешний вид формы Ргобисб Еогт() в универсальном шаблоне ас1с1_ирс1_^огт.Н1т1
Здесь в объект Вогт загружаются введенные пользователем данные и выполняется про-
верка их валидности. Если в форме нет ошибок, то в БД создается новая запись об
объекте с использованием метода сгеабе и выполняется возврат к представлению
есиг ргойисг, где происходит обновление шаблона е6И_рго6исПп1т1. После этого в таблице
шаблона е6И_рго6исНп1т1 появится запись о добавленном товаре (рис. 4.23), а пользова-
тель может продолжать ввод сведений о продуктах разных категорий.

Левая Соковая панель
Категории продуктов
• Заморозка

о Изделия из тес
о Мороженое
о Рыба

0 ягоды, грибы

• кондитерские

О Ирис

о Карамель

о Коноеты в
коробках

о Коноеты
шоколадные

о Шоколад
-

Центральная панель

Родительская категория  Заморозка
Дочерняя категория - Мороженое

г?} Добавить товар

№пп Наименование продукта Цена Фото

1 О, Пломбир

Стр. 1 ИЗ 1.

Категория Редактировать

Крупное фото

Мороженое

8И:менитс I * Удалить  СХ Показать

Рис. 4.23. Внешний вид шаблона ес1И_ргос1исШт1 после ввода данных о продукте

Рассмотрим теперь, как в этом представлении работает фильтрация данных. Каждая
ветка дерева категорий в левой панели страницы шаблона е6И_рго6ис1.И1т1 показана как
ссылка:

<а Вге1="{% иг1 'тазбег: е6И_рго6ис11' 16=по6е.16 %}’’>{{ побе.пате }}</а>

По этой ссылке активируется маршрут еб1г_ргобисб, в который передается идентифика-
тор (1б) выбранной категории:

рабВ (’ е61б_рго6исб/<1пб: 16>/', чгемз. е61б_рго6ис11, пате=' е61б_рго6исб'),

По этому маршруту вызывается представление еб1г_ргобисб с аргументом выбранной
категории (16). В представлении в качестве параметра принимается идентификатор вы-
бранной категории (16). Так как в этом случае 16 не равно нулю, то идентификатор кате-
гории принимает значение: 1б_саб = 16, и на основе этого значения данные о категориях
товара фильтруются в следующих инструкциях:

#	Выбранная категория продукта в каталоге
зе1есб_саб = Сепге.оЬдесбз.деб (16=16_саб)

#	категории, в которые входит выбранная категория и все дочерние категории
депгез = зе1есб_саб.деб_6езсеп6апбз(1пс1и6е_зе1б=Тгие)

Далее на основе объекта депгез фильтруются данные о продуктах:

#	продукты, которые входят в выбранную категорию и во все дочерние

ргобисбз = Ргобисб.оЬдесбз. ГПбег (депге_1п=депгез) .61зб1псб() .ог6ег_Ьу('пате')

В таблице центральной панели фото продукта отображается в виде миниатюры. Для
показа полноразмерной фотографии продукта в таблице имеется колонка Крупное фо-
то с кнопкой Показать. С этой кнопкой связана следующая ссылка:
<акгек="{{ оЬд еск. таде. иг!}} "

с1азз="Ькп Ыт-ргтагу Ыт-зт" кагдек="_Ь1апк">

<1 с1азз="Ы-зеагск"></1> Показать</а>

По нажатию на кнопку Показать по этой ссылке в новой вкладке браузера будет выве-
дено полноразмерное фото продукта (рис. 4.24).

Рис. 4.24. Полноразмерное фото продукта

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

Теперь рассмотрим, как работают программные модули при нажатии в шаблоне
есШ_ргос1исП11т1 на кнопку Изменить. С этой кнопкой связана следующая ссылка:

<а Ъгек="{% иг1 'тазкег :ргобис11_ирсГ 1с1=оЬзеск.1с1 %}"

с1азз="Ькп Ькп-зиссезз Ькп-зт">

<1 с1азз="Ы Ы-зегуег"></1>Изменить</а>

По этой ссылке вызывается ИКЬ-маршрут с именем ргобиск_ирб (листинг 4.39), в кото-
рый передается идентификатор текущей записи (к^оЬдеск.ш).

Листинг 4.39. Маршрут 11КЬ ргос1ис(_ирс1

# Обновить продукт (товар)
ракк (' ргобиск_ирб/<1пк: 1б>/', утемз. ргос!иск_ирс1, пате=' ргобиск_ирб'),

По этому маршруту активируется представление ргобиск_ирб (листинг 4.40).

Листинг 4.40. Представление ргос1ис1_ирс1

############################
# Обновить продукт (товар) #
############################
с!еГ ргобисб_ирб(гедиезб, 66) :

#	получение сведений об объекте из БД

оЬд = деб_оЬдесб_ог_404(Ргобисб, 16=16)

#	получить 16 текущей страницы

#	возврат после ввода данных

1Р гедиезб.тебЬоб == "РОЗТ":

Рогт = РгобисбЕогт(гедиезб.Р03Т, гедиезб.ПЬЕЗ, бп1б1а1={

'пате’: оЬд.пате,

’безсгбрббоп’ : оЬд .безсгбрббоп,

’ргбсе’: оЬ].рг!се,
' бтаде': обд . бтаде,
'озбаб’: оЬд.озбаб
})

бб Тогт.1з_ча116() :

#	получение сведений об объекте формы после корректировки данных

оЬд.пате = Рогт.с!еапе6_6аба.деб(’пате’)

оЬд.безсгбрббоп = Рогт.с!еапе6_6аба.деб(’6езсг1рб1оп’)

обд.ргбсе = богт.с1еапеб_6аба.деб(’ргбсе’)

оЬд.бтаде = Рогт.с!еапе6_6аба.деб(’ бтаде’)

оЬд.озбаб = богт.с1еапеб_6аба.деб(’озбаб’)

#	сохранение изменений об объекте в БД

оЬд.заче()

гебигп геббгесб(гечегзе(’тазбег:е61б_рго6исб’))
е!зе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, ’ тазбег/а66_ирб_богт.]1бт1’, {'богт': богт})
е!зе:

# загрузка в форму сведений об объекте

Рогт = Рго6исбЕогт(1пзбапсе=оЬд)

сопбехб = {'Рогт': Рогт}

# шаблон с формой для ввода/корректировки слайда

гебигп гепбег(гедиезб, ’ тазбег/а66_ирб_богт.]1бт1’, сопбехб)

Это представление в качестве параметра принимает идентификатор (бб) обновляемого
продукта, и при поступлении ОЕТ-запроса на основе класса Ргобисб Еогт() создается
форма для ввода данных (бот). Затем формируется объект сопбехб, который передается
в универсальный шаблон ас1с1_ирс1_(огт.И1т1, содержащий информацию о продукте из
текущей записи в БД (рис. 4.25).

В этом шаблоне пользователь корректирует нужные поля и нажимает на кнопку Со-
хранить, после чего происходит возврат в представление ргобисб ирб уже в виде РО8Т-
запроса, где в объект богт загружаются скорректированные пользователем данные и
выполняется проверка их валидности. Если в форме нет ошибок, то в БД обновляется
текущая запись об объекте с использованием метода заче. Затем выполняется возврат
к представлению еббб ргобисб, где происходит обновление шаблона есШ_ргос1ис1.И1т1. По-
сле этого в таблице шаблона ес1К_ргос1ис18.И1т1 появится обновленная запись о товаре.
Рис. 4.25. Форма Ргоаисб_Гогт () в универсальном шаблоне ас1с1_ирс1_1:огт.Н1т1
с заполненными данными

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

Рассмотрим, как работают программные модули при нажатии в шаблоне ес1И_ргос1и1.111т1
на кнопку Удалить. С этой кнопкой связана следующая ссылка:

<а ЬгеР="{% иг1 ' шазбег :ргоаис11_ае1' 1а=оЬдесб.та %}"
с1азз=”ЬРп Ьбп-аапдег Ьбп-зт">

<т с1азз="Ы-ГгазЪЗ"></1> Удалить</а>

По этой ссылке вызывается ИКП-маршрут с именем ргоаисб_ае1 (листинг 4.41), и этому
маршруту передается идентификатор удаляемого продукта.

Листинг 4.41. Маршрут 1Ж1_ ргос!ис1_с1е1

#	Удалить продукт (товар)

рабй (' ргос!исГ_с1е1/<1пГ: 1с1>/', утемз. ргоаисб_ае1, паше=' ргоаисб_ае1'),

По этому маршруту активируется представление ргоаисг_ае1 (листинг 4.42), в которое
в качестве аргумента передается идентификатор удаляемого продукта (1а) в виде целого
числа.

Листинг 4.42. Представление ргос1ис(_с1е1

###########################

#	Удалить продукт (товар) #

###########################

аеб ргоаисГ_ае1(гедиезб, та):

#	загрузить текущий объект по та

оЬд = деб_оЬ]есб_ог_404(Ргоаисб, та=та)
#	возврат из формы

бб гедиезб.теббоб == "РОЗТ":

бб 'уез' бп гедиезб.РОЗТ:

# удаление сведений об объекте из БД

Ргобисб.обзесбз.деб(66=66).бебебе()

гебигп геббгесб(геиегзе('тазбег:еббб_рго6исб'))

#	загрузка в сопбепб сведений об объекте

6x61 = 'Будет удален продукт'

6е1_рго6 = обз.пате

сопбепб = {"бхбб": бхбб, "6е1_рго6": 6е1_рго6}

#	вызов шаблона подтверждения/отмены удаления

гебигп гепбег(гедиезб, "тазбег/6е1_уезпо.Нбт1", сопбепб)

Это представление имеет параметр бб, который принимает идентификатор удаляемого
продукта. После этого в представлении создается объект беТ ргоб и текстовое сообще-
ние — они загружаются в объект сопбехб, и этот объект передается в шаблон 6е1_
уе8по.И1т1, где будет сформирована форма, показанная на рис 4.26.

Будет удален продукт

Пломбир

Удалить запись из БД?

<-Отмена

Удалить

[ Удалить

Рис. 4.26. Универсальный шаблон с1е1_уе8по.Н1т1 с именем удаляемого продукта

В теле этой формы шаблона с1е1_уе8по.И1т1 пользователю отображаются имя удаляемого
товара и две кнопки: Отмена — отменить удаление и Удалить — подтвердить удале-
ние. Это именованные кнопки: кнопка Отмена имеет имя пате='по', кнопка Удалить —
имя пате='уез'. Имя нажатой кнопки будет передано в представление ргобисб бе! в РО8Т-
запросе.

Пояснение

Напомним, что в шаблоне с1е1_уе8по.Мт1 (см. рис. 4.26) для примера показаны два варианта
кнопки Удалить: с синим фоном — простая кнопка для удаления, с зеленым фоном —
кнопка для удаления с крутящимся спином.

По нажатию на любую кнопку выполняется возврат в представление ргобисб_бе1, где
в инструкции бб 'уез' бп гедиезб.розт производится идентификация нажатой кнопки.
Если пользователь нажал кнопку Удалить, будет выполнена инструкции удаления за-
писи из БД, а если кнопку Отменить, эта инструкция будет пропущена, и в обоих слу-
чаях произойдет возврат к шаблону отображения сведений о продуктах есШ_ргос1исШт1.

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

Название товара в шаблоне ес1И_ргос1ис1.К1т1 представлено в виде ссылки:

<а Ьгеб="{% игб 'тазбег:рго6исб_6ебабб' рк=оЬдесб.66 %}">

<б с1азз="Ьб-зеагсЬ"х/б> {{оЬдесб. пате}}</а>
Эта ссылка адресует к ИКЬ-маршруту ргобисб_бебаб1 (листинг 4.43) и передает в него
первичный ключ текущей записи (рк).

Листинг 4.43. Маршрут IIК1_ ргос1ис(_с1е(а|1

#		 показать подробные сведения о продукте -----

рабб (’ ргобисб_бебабб/<бпб: рк>/', убемз. РгобисбВебабб. аз_убем (), пате=' ргобисб_бебаб!'),

Этот маршрут принимает первичный ключ текущей записи (рк) и адресует к классу
Э)ап§о — представлению Ргобисбэебабб (листинг 4.44).

Листинг 4.44. Представление — класс Ргос1исЮе1а|1

бгот бдапдо.убемз.депегбс бтрогб БебаббУбем

#	Класс для показа полной информации о продукте #

с1азз РгобисбОебабб (БебаббУбем) :
любе! = Ргобисб

Фактически это представление является классом, производным от класса Р]ап§о
с именем БебаббУбем. В этом классе в объект любе! загружается имя модели (в нашем слу-
чае— модель Ргобисб), после чего класс по умолчанию вызывает шаблон ргос1ис!_
с1е1аП.И1т1 (имя модели + _бебабб), код которого приведен в листинге 4.45.

Листинг 4.45. Шаблон ргос1ис1_с1е1а|1.Ыт1

{% ехбепбз "збор/Ьазе.Ьбтб" %}

{% Ыоск сопбепб %}

<ббу сбазз=”сопбабпег бехб-збагб">

<ббу с1азз=”со1-3”>

<а Ьгеб=’^ауазсгбрб:Ызбогу.до (-1) " с!азз="Ьбп Ьбп-зиссезз Ьбп-зт”>

<1 с1азз=”Ы Ьб-аггом-бебб-сбгсбе"х/б> Назад</а>

</ббу>

<ббу с1азз=”гом ту-2”>

<М Наименование продукта - {{ оЬдесб.пате }}</Н4>

{% бб оЬдесб.бтаде %}

<рхбтд згс=”{{ оЬдесб.бтаде.игб }}" сбазз="бтд-ббибб” абб=”СГС”х/р>
{% ебзе %}

<р>Нет фото</р>

{% епббб %}

<р>Цена - {{'₽'}}{{оЬдесб.ргбсе}}</р>

<ббу сбазз=”гом ту-2”>

<Ь5>0писание продукта</Н5>
<р>{ {оЬ]еЫ.бе5СГ1рЫоп} }</р>

</сНу>

</бгт>

</сПу>

{% епбЫоск %}

В этом шаблоне имеются кнопка Назад — для возврата к предыдущей странице сайта,
и строка Описание продукта, в которую выводятся подробные данные о продукте
(рис. 4.27).

Рис. 4.27. Шаблон ргос1ис1_с1е1а|1.Н1т1 с детальной информацией о продукте

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

В предыдущих разделах (на примерах категорий продуктов) было показано, как создать
древовидные структуры и списки самих продуктов. Здесь же мы на основе моделей
Ргобист (продукты) и Сепге т (категории продуктов) разработаем набор необходимых мо-
дулей, позволяющих фильтровать сведения о продуктах с использованием связанных
с ними древовидных категорий.

Создадим страницу сайта, имеющую две панели: левую боковую — со статичным де-
ревом категорий продуктов и центральную — с карточками продуктов. Для доступа
к такой странице нужно в главном меню или на любой странице сайта создать следую-
щую ссылку (листинг 4.46).
Листинг 4.46. Ссылка на страницу со статичным деревом категорий продуктов

<а Ьге1="{% иг1 'тазкег:сака1од_зкак' %}" 1загде1з ="_Ыапк">Статичный каталог продуктов</а>

По ЭТОЙ ссылке вызывается ИКЬ-маршруТ сака1од_зкак (листинг 4.47).

Листинг 4.47. Маршрут IIК1_ с именем са(а1од_$1а(

# ---- показать продукты для статичного дерева категорий-

ракЬ (’ сака1од_зкак/', чгемз. сака1од_зкак, паше=' сака1од_зкак'),

По этому маршруту активируется представление сака1од_зкак (листинг 4.48).

Листинг 4.48. Представление са(а1од_8(а(

########################################

# Показать каталог-статик с продуктами #

########################################

с!еТ сака1од_зкак (гедиезк) :

к!р_сак = 'Статичный'

депге = Сепге_т.оЬдескз.а11()

сопкехк = {'депге': депге, 'к!р_сак': кгр_сак}

гекигп гепбег(гедиезк, "тазкег/д1ача_4/сака1од_зкак.Ькт1", сопкехк)

Здесь из БД в объект депге загружается каталог (категории продуктов) и формируется
объект сопкехк, который передается в шаблон са1а1од_81а1.И1т1 (листинг 4.49).

Листинг 4.49. Шаблон са1а1од_81а1.Мт1

{% ехкепбз "зЬор/Ьазе.Ькт!" %}

{% Ыоск сопкепк %}

<сПч с1азз="сопка1пег-к1и1с1 р-1" зку1е="Ьаскдгоипс1-со1ог:гдЬ (224, 255, 255) ;">

<сНч с1азз="гом"> <!— Это начало строки —>

<!— Это левая боковая панель—>

<сИч с1азз="со1-6 со1-зт-6 со1-шс1-4 со1-1д-2 со1-х1-2

Ьд-гпко Ьд-орас1ку-25">

<сИч с1азз="со1-4">

<а Ьгек="{% иг1 'тазкег:ргобиск_зкак' 16=0 %}" с1азз="Ькп Ькп-зиссезз Ькп-зт">

<1 с1азз="Ы Ы-сагк4"></1> Все продукты</а>

</сНч>

сЬбЖатегории продуктов</Н6>

{% 1оаб тркк_кадз %}

<и1 16="туПЬ">

{% гесигзекгее депге %}

<И>

<а Ьгек="{% иг1 'тазкег:ргобиск_зкак' 1(1=пос1е.Ш. %}">{{ побе.пате }}</а>
{% 11 побе.1з_1еак_побе %}

<зрап с1азз="1еак">{{ побе.собе }}</зрап>
{% е1зе %}

<зрап с1азз="сагеб рагепб">{{ побе.собе }}</зрап>

<и1 Ыазз="пезбеб">{ { сЫ1бгеп }}</и1>

{% епббб %}

</1б>

{% епбгесигзебгее %}

</иб>

</сНу>

<!— Это центральная панель —>

<сНу с1азз=”со1-6 со1-зт-6 со1-тб-8 со1-1д-10 со1-х1-10 бехб-збагб">

<Ы>Центральная панель</Ы>

{% Ыоск ргобисбз %}

<Ыу с1азз=”гом зеб-бопб-збсе" >

<Ыу с1азз=”со1-9 бехб-збагб">

<Ь6>Тип каталога категорий продуктов - {{ббр_саб}}</Ь6>

<Ь6>Сделайте выбор категории продукта из каталога</Ь6>

</Ыу>

</(±Ы>

{% епбЫоск ргобисбз %}

</бби> <!— Конец центральной панели —>

</бби> <!— Конец строки —>

</бби> <!— Конец контейнера —>
{% епбЫоск сопбепб %}

В левой панели этого шаблона (рис. 4.28) открывается статичное дерево с категориями
продуктов, а в центральной панели пользователю в виде текстового сообщения предла-
гается сделать выбор одной из категорий продукта из статичного древовидного ката-
лога. Кроме того, в левой панели имеется кнопка Все продукты, с которой связана
следующая ссылка:

<а Ьгеб="{% иг1 'шазбег:ргобисб_збаб' 16=0 %}" с!азз="Ьбп Ьбп-зиссезз Ьбп-зш">

<б с1азз="Ы Ы-сагб4 "></!> Все продукты</а>

продукты

категории продуктов

•	Замсроака

с изделия .из теста
о Мооож-еное
а РыДа

о Ягоды. Грибы

•	Кондитерские
о ирис
с Карамели
о Крмоеты в

* Коноеты шоколадные
$ Шоколад

Центральная панель

Тип каталога категорий продуктов ’ Статичный
Сделайте выбор категории продукта из каталога

Рис. 4.28. Внешний вид шаблона са1а1од_81абН1т1
По этой ссылке в конечном итоге вызывается представление ргобисб_збаб, в которое
передается нулевой идентификатор категории продуктов (бб=о). В этом случае в цен-
тральной панели должны быть показаны все продукты из БД.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Ста-
тичный каталог продуктов.

Рассмотрим, как в этом шаблоне и соответствующем представлении работает фильтра-
ция данных. Каждая ветка дерева категорий продуктов в левой части окна шаблона
са1а1од_81а1.И1т1 показана как ссылка:

<а Ьгеб="{% иг1 'тазбег:рго6исб_збаб' 16=по6е.16 %}’’>{{ побе.пате }}</а>

По этой ссылке активируется ИКП-маршрут ргобисб_збаб (листинг 4.50), в который
передается идентификатор (1б) выбранной категории продукта.

Листинг 4.50. ЫНЬ-маршрут ргос1ис(_8(а(

# ---- список товаров выбранной категории из каталога збаб—

рабЬ('рго6исб_збаб/<1пб:16>/', угемз .рго6исб_збаб, паше='рго6исб_збаб'),

По этому маршруту вызывается представление ргобисб_збаб (листинг 4.51) с аргументом
выбранной категории (16).

Листинг 4.51. Представление ргос1ис1_8(а(

########################################

# Показать продукты из каталога-статик #
########################################
беб ргобисб_збаб(гедиезб, 16=0):

И 16 == 0: # если категория не выбрана
16_саб = гесрезб.зезз1оп['16_саб']
е!зе: # если пришел вызов из каталога продуктов
16_саб = 16

#	запомнить категорию выбранного продукта
гедиезб.зезз!оп[’16_саб’] = 16_саб

депге = Сепге_т.оЬдесбз.а!1()

зе!есб_саб = Сепге_т.оЬдесбз.деб(16=16_саб)

16_го6_саб = зе!есб_саб.рагепб_16

16 16_го6_саб 13 Попе:
16_го6_саб = 1

#	Получить запись с параметрами родительской категории

зе!есб_го6_саб = Сепге_т.оЬдесбз.а11()

#	категории, в которые входит выбранная категория и все дочерние категории
сабедогбез = зе!есб_саб.деб_6езсеп6апбз(1пс1и6е_зе1б=Тгие)
#	продукты, которые входят в выбранную категорию и во все дочерние

16 16 != 0: # если категория выбрана

ргобисбз = Ргобисб.обдесбз.Ыббег (депге__1п=сабедог1ез).615б6псб().ог6ег_Ьу('пате')

пате_саб = зе!есб_саб.пате

е1зе: # если категория не выбрана
ргобисбз = Ргобисб.обдесбз.аН ()
пате_саб = "Все продукты"

#	Пагинатор

радбпабог = Радбпабог(ргобисбз, рег_раде=10)

раде_питЬег = гедиезб.СЕТ.деб('раде')

раде_оЬд = радТпабог.деб_раде(раде_питЬег)

сопбехб = {"ргобисбз": ргобисбз, "депге": депге, "раде_оЬ^": раде_об^,
"пате_саб": пате_саб, "16_саб": 16_саб,
"зе!есб_гоб_саб": зе!есб_гоб_саб, "16_гоб_саб": 16_гоб_саб}

гебигп гепбег(гедиезб, "тазбег/д1ача_4/ргобисб_збаб.Ьбт1", сопбехб)

Это представление в качестве параметра принимает идентификатор выбранной катего-
рии (та). Поскольку в этом случае та не равно нулю, то идентификатор категории при-
нимает значение: М оаб = та, и на основе этого значения данные о категориях товара
фильтруются в следующих инструкциях:

#	выбранная категория в каталоге

зеТесб_саб = Сепге_т.оЬдесбз.деб(Та=Та_саб)

#	категории, в которые входит выбранная категория и все дочерние категории
сабедогТез = зе!есб_саб.деб_6езсепбапбз(1пс1ибе_зе1б=Тгие)

Затем на основе объекта сабедогТез фильтруются данные о продуктах:

ргобисбз = Ргобисб.оЬдесбз.ТТТбег(депге__Тп=сабедогТез).аТзбТпсб().огбег_Ьу('пате')

Если категория продукта не выбрана (идентификатор категории та=о), то из БД будут
выбраны записи обо всех продуктах:

ргобисбз = Ргобисб.оЬдесбз.а!1()

После фильтрации данных о продуктах создается объект радбпабог, обеспечивающий
постраничный вывод данных о продуктах, и все полученные параметры передаются
в объект сопбехб, который загружается в шаблон ргос1ис1_81аПп1т1 (листинг 4.52).

Листинг 4.52. Шаблон ргос1ис1_81а1.Ыт1

{% ехбепбз "тазбег/д!ача_4/саба1од_збаб.11бт1" %}

{% Ыоск ргобисбз %}

<61ч с1азз="гом бехб-збагб бехб-багк 1Н-2">

<Ь4>Выбрана категория: {{пате_саб}}</Н4>

</сПч>

<61ч с1азз="гом бехб-збагб бехб-багк 1Ь-2">

<61ч с!азз="со1-12">
{% 1Г ргобискз %}

<61V с1азз="гом ту-2”>

{% Вог гоЬ 1п раде_оЬд %}

<сНу с1азз=”сагб тк-З тз-3 Ьогбег-ргВтагу Ьогбег Ьогбег-3” зку1е="мВс1кЬ: 20гет;">

<сНч с1азз="сагс1-Ьеас1ег кехк-сепкег">

<Ь6>{{ гоЬ.депге }}</Н6>

</сНу>

{% 1В тЬ.нпаде %}

<1тд с1азз="сагс1-Втд-кор" згс="{{ тЬ.таде.иг1 }}” зку!е=’кпах-мВс1кЬ: 300рх">
{% е!зе %}

<р>Нет фото</р>

{% епсНГ %}

<сНч с1азз=”сагс1-Ьос1у">

<р с1азз=”сагб-кехк зша11">

<а ЬгеВ="{% иг1 'тазкег :ргос!иск_с1екаВ1' рк=тЬ.16 %}">{{тЬ.пате}}</а>

{% 1В гоЬ.ргВсе 13 Попе %}

Цена - не задана,
{% е1зе %}

Цена - {{гоЬ.ргФсе}},
{% епсНГ %}
В наличии - {{гоЬ.озкак}}

</р>

</сНч>

</сНч>

{% епсЗВог %}

</сНч>

{% е!зе %}

<сНч с1азз=”гом кехк-зкагк кехк-с!апдег">

<р>В базе данных нет товара выбранной категории</р>

</б1Ч>

{% епсНк %}

</б1Ч>

</сНч>

<!— Пагинатор начало —>

<сНч с1азз=”рад1пак1оп”>

<зрап с1азз=”зкер-Ипкз”>

{% 1к раде_оЬд.Ьаз_ргеч1оиз %}

<а Ьгек=”?раде=1”>&1адио; Первая</а>

<а Ьгек="?раде={{ раде_оЬд.ргеч1оиз_раде_пип1Ьег }}”>Предьщущая</а>

{% епсНк %}

<зрап с1азз=”сиггепк”>

Стр. {{ раде_оЬд .пшпЬег }} из {{ раде_оЬд .радгпаког.пш_радез }}.

</зрап>

{% 1к раде_оЬд.Ьаз_пехк %}

<а Ьгек=”?раде={{ раде_оЬд.пехк_раде_пшпЬег }}">Следующая</а>
<а кге^=”?раде={{ раде_оЬд.радгпаког.пшп_радез }}">Последняя &гадио;</а>
{% епсЦГ %}

</зрап>

</сПу>

<!— Пагинатор конец —>

{% епбЫоск ргойискз %}

В этом шаблоне имеется тег организации цикла {% Гог шь 1п раде_оЬд %}, в котором в виде
карточек выводятся сведения о продуктах, а также присутствует пагинатор для постра-
ничного вывода данных.

Если в левой боковой панели шаблона са1а1од_81а1.И1т1 с помощью мыши выбрать кате-
горию продукта, то в центральной панели будут показаны карточки с информацией
о продуктах выбранной категории (рис. 4.29).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Ста-
тичный каталог продуктов.

Рис. 4.29. Внешний вид шаблона са1а1од_з1аШт1
с информацией о продуктах выбранной категории

Если в шаблоне са1а1од_81а1.И1т1 нажать на кнопку Все продукты, то в центральной
панели будут показаны карточки с информацией обо всех продуктах (рис. 4.30).

Как здесь можно видеть, в карточках наименование продукта представлено в виде
ссылки, и если щелкнуть на ней левой кнопкой мыши, то откроется страница с подроб-
ными сведениями о выбранном продукте (рис. 4.31).
Рис. 4.30. Внешний вид шаблона са1а1од_81а1.Н1т1 с информацией обо всех продуктах

Рис. 4.31. Страница с подробной информацией о продукте
4.6.	Фильтрация сведений о продуктах

с использованием динамичного древовидного каталога
категорий продуктоЕ'

В предыдущем разделе было показано, как можно фильтровать сведения о продуктах
с использованием связанных с ними древовидных категорий. Для этого мы создали
страницу сайта, на которой в левой боковой панели присутствовало полностью раскры-
тое статичное дерево категорий продуктов. Работать с таким деревом удобно при не-
большом количестве категорий продуктов и при небольшом количестве уровней вло-
женности. Однако на практике часто возникают ситуации, когда структура категорий
продуктов имеет сложную многоуровневую организацию с большим количеством за-
писей. В этом случае пользователю удобнее работать с динамичным (раскрывающимся)
деревом категорий продуктов.

Создадим страницу сайта, которая будет иметь две панели: левую боковую — с дина-
мичным (раскрывающимся) деревом категорий продуктов и центральную — с карточ-
кой продуктов. Для доступа к такой странице нужно в главном меню или на любой
странице сайта создать следующую ссылку (листинг 4.53).

Листинг 4.53. Ссылка на страницу
с динамичным деревом категорий продуктов

<Иха Ьгек="{% иг1 ’тазкег:сака1од_кгее1 %}" 1загде1з ="_Ь1апк">Динамичный каталог
продуктов</а></И>

По ЭТОЙ ссылке будет вызваться ИВП-маршруТ сака1од_кгее (листинг 4.54).

Листинг 4.54.11КЬ=маршрут са!а1од_1гее

#		 показать продукты для динамичного дерева категорий-

ракЬ (’ сака1од_кгее/ ’, чгемз. сака!од_кгее, паше=1 сака1од_кгее ’),

По этому маршруту активируется представление сака1од_кгее (листинг 4.55).

Листинг 4.55. Представление са(а1од_(гее

############################################

#	Показать динамичный каталог с продуктами #

############################################

(ДеГ сака1од_кгее (гедиезк) :

к!р_сак = 'Динамичный’

депге = Сепге_т.оЬдескз .а!1 ()

сопкехк = {'депге': депге, ’к1р_сак': кгр_сак}

гекигп гепНег(гедиезк, "тазкег/д1ача_4/сака1од_кгее.Ькт1", сопкехк)

Здесь из БД в объект депге загружается каталог (категории продуктов) и формируется
объект сопкехк, который передается в шаблон са1а1од_1гее.И1т1 (листинг 4.56).
Листинг 4.56. Шаблон са(а1од_(гее.Ыт1

{% ехбепбз "зЬор/Ьазе.Ыт!" %}

{% Ыоск сопбепб %}

<збу1е> <!— Начало стиля для категорий продуктов —>

Ы, #туНЬ {

Изб-збу1е-буре: попе;
}

/* Веточе тагдбпз апб расШпд бгот бИе рагепб и! */

#туНЬ {

тагдбп: 0;

расШпд: 0 ;

}

/★ Збу1е РЬе сагеб/аггом */
.сагеб {

сигзог: робпбег;

изег-зе1есб: попе; /★ Ргечепб бехб зеХесбгоп */
}

/★ Сгеабе бЬе сагеб/аггом ЫбН а ипгсобе, апб збу1е 16 */
.сагеб::Ьебоге {

сопбепб: ”\25В6”;

со!ог: МеЫит31абеВ1ие;

Ызр1ау: лпИпе-Ыоск;

тагдбп-Ыдбб: брх;
}

/★ Вобабе бЬе сагек/аггом 1соп мНеп сИскеб оп (изтпд НачаЗсгбрб) */

. сагек-скжп: :ЬеРоге {
ЫапзРогт: гокаке (90с1ед) ;

}

/★ НМе Ые пезкес! Изк ★/

.пезкес! {
Ызр1ау: попе;

}

/★ ЗИом Ые пезкес! Изк мИеп ННе изег сИскз оп 1±е сагек/аггом (ЫЫ НачаЗсгтрк) */
. асЫче {

Ызр1ау: Ыоск;

}

</зку1е> <!— Конец стиля для категорий продуктов —>

<Ыч с1азз=”сопка1пег-Р1иЫ р-1" зку1е="Ьаскдгоипс1-со1ог:гдЬ (224, 255, 255) ;">

<скч с1азз="гом"> <!— Это начало строки —>

<!— Это левая боковая панель—>

<41ч с1азз="со1-6 СО1-ЗШ-6 со1-шс!-4 со1-1д-2 со1-х1-2

ЬдЫпВо Ьд-орасЫу-25">
<дЫ с1азз=”со1-4">

<а йгеЕ=”{% иг1 'тазкег:ргодисЫ11гее1 1д=0 %}" с1азз=”Ьбп Ьбп-зиссезз Ьбп-зт">

<1 с1азз="Ы Ы-сагб4"></1> Все продукты</а>

</дЫ>

сЬбЖатегории продуктов</В6>
{% 1оад трЫ_бадз %}
<и1 1д=”туНЬ">

{% гесигзеВгее депге %}

<И>

<а ВгеВ="{% иг1 ’ тазкег: ргодисЫкгее' 1д=поде.1д %}”>{{ поде.пате }}</а>
{% 1В поде.1з_1еаЕ_поде %}

<зрап с1азз="1еаВ">{{ поде.соде }}</зрап>
{% е1зе %}

<зрап с1азз="сагеВ рагепВ">{{ поде.соде }}</зрап>

<и1 с1азз="пезВед">{ { сИНдгеп }}</и1>

{% епдИ %}

</И>

{% епдгесигзеВгее %}

</и!>

</д1У>

<!— Это центральная панель —>

<дгу с1азз=”со1-6 со1-зт-б со1-тд-8 со1-1д-10 со1-х!-10 ВехВ-зВагВ">

<Ы>Центральная панель</И1>
{% Ыоск ргодискз %}

<дЫ с1азз=”гом зек-Вопк-зЫе" >

<дЫ с1азз=”со1-9 кехк-з1:аг1:">

<Ь6>Тип каталога категорий продуктов - {{Ыр_саВ} }</Ь6>

<Ь6>Сделайте выбор категории продукта из каталога</Ь6>

</дЫ>

</дЫ>

{% епдЫоск ргодисбз %}

</дЫ> <!— Конец центральной панели —>

</дЫ> <!— Конец строки —>

</дЫ> <!— Конец контейнера —>

<зсг1рб Вуре="бехб^ауазсг1р11"> <!— Начало скрипта для каталога —>
’изе збггсб’;

чаг Кодд1егз = доситепб.дебЕХешепбзВуСХаззНаше("сагеб”);

чаг I;

Вог (1=0; 1 < Кодд1егз.ТепдбИ; 1++) {

Водд1егз [1] .аддЕчепбЫзбепег ("сИск", ЕипсЫоп () {

ВЫз .рагепкЕ1етепб.диегуЗе1ес11ог (" .пезбед") .с1аззЫзб.бодд1е ("асЫче");

ВЫз. ЫаззЫзб. Водд1е ("сагеб-домп");

});
</зсг!рк> <!— Конец скрипта для каталога —>
{% епбЫоск сопкепк %}

В левой панели этого шаблона открывается динамичное (раскрывающееся) дерево
с категориями продуктов, а в центральной панели пользователю в текстовой строке
предлагается сделать выбор одной из категорий продукта из динамичного древовидно-
го каталога (рис. 4.32). Кроме того, в левой панели имеется кнопка Все продукты,
с которой связана следующая ссылка:

<а Ъгек=''{% иг1 ’тазкег :ргос!иск_кгее' 16=0 %}” с1азз=”Ькп Ькп-зиссезз Ькп-зт”>

<1 с1азз="Ы Ы-сагк4”></1> Все продукты</а>

По этой ссылке в конечном итоге вызывается представление ргобиск_кгее, в которое
передается нулевой идентификатор категории продуктов (1<л=о). В этом случае в цент-
ральной панели должны быть показаны все продукты из БД.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Дина-
мичный каталог продуктов.

Рис. 4.32. Внешний вид шаблона са1а1од_1гее.Н1т1 при первоначальной загрузке

Как можно увидеть на рис. 4.32, в левой боковой панели страницы дерево категорий
продуктов находится в свернутом виде (показаны только корневые узлы — в нашем
примере их несколько). Рядом с каждым корневым узлом находится кнопка ►, по
нажатию на которую раскроются дочерние узлы нижнего уровня (рис. 4.33). При по-
вторном нажатии на кнопку раскрытого узла 1 дочерние уровни закроются.

Рассмотрим, как в этом шаблоне и соответствующем представлении работает фильтра-
ция данных. Обратите внимание, что каждая ветка дерева категорий продуктов в левой
панели окна шаблона са1а1од_1гее.И1т1 показана как ссылка:

<а кгек=’’{% иг1 ’тазкег:рго6иск_кгее' 16=по6е. 16 %}’’>{{ побе.пате }}</а>
Рис. 4.33. Внешний вид шаблона са!а1од_1гее.Н1т1 с раскрытым узлом Заморозка

По ЭТОЙ ссылке активируется ИКЬ-маршруТ ргос!исб_бгее (листинг 4.57), в который
передается идентификатор (1а) выбранной категории продукта.

Листинг 4.57. Маршрут IIК1_ ргос1ис1_4гее

#		 список товаров выбранной категории из каталога бгее—

ра1±( 'ргос!исб_бгее/<1пб:1с1>/', .ргос!ис1:_1:гее, пагае='ргобисб_бгее'),

По этому маршруту вызывается представление ргобисг ггее (листинг 4.58) с аргументом
выбранной категории (м).

Листинг 4.58. Представление ргобисТТгее

#	#####################################

#	Показать продукты из каталога-бгее #

#	#####################################

с1еГ ргобисб_бгее (гедиезб, 16=0):

1Г 16 == 0: # если категория не выбрана
16_саб = гедиезб.зезз!оп['16_саб']

е1зе: # если пришел вызов из каталога продуктов
16_саб = 16

#	запомнить категорию выбранного продукта
гедиезб.зеззбоп['16_саб'] = 16_саб

депге = Сепге_т.оЬдесбз.а11()

зе1есб_саб = Сепге_т.оЬдесбз .деб (16=16_саб)

16_го6_саб = зе1есб_саб.рагепб_16
бб бб_гоб_саб бз Попе:
бб_гоб_саб = 1

#	Получить запись с параметрами родительской категории

зебесб_гоб_саб = Сепге_т.оЬдесбз.абб()

#	категории, в которые входит выбранная категория и все дочерние категории
сабедогбез = зебесб_саб.деб_безсепбапбз (бпсбибе_зе1б=Тгие)

#	продукты, которые входят в выбранную категорию и во все дочерние

бб бб != 0: # если категория выбрана

ргобисбз = Ргобисб.оЬ^есбз.ббббег(депге__бп=сабедогбез) .ббзббпсб() .огбег_Ьу('пате')

пате_саб = зебесб_саб.пате

ебзе: # если категория не выбрана

ргобисбз = Ргобисб.оЬдесбз.а!1()
пате_саб = "Все продукты"

#	Пагинатор

радбпабог = Радбпабог(ргобисбз, рег_раде=10)

раде_питЬег = гедиезб.СЕТ.деб('раде')

раде_о1^ = радбпабог.деб_раде(раде_питЬег)

сопбехб = {"ргобисбз": ргобисбз, "депге": депге, "раде_оЬ^": раде_об^,
"пате_саб": пате_саб, "бб_саб": бб_саб,
"зебесб_гоб_саб": зебесб_гоб_саб, "бб_гоб_саб": бб_гоб_саб}

гебигп гепбег(гедиезб, "тазбег/дбача_4/ргобисб_бгее.Ьбтб", сопбехб)

Это представление в качестве параметра принимает идентификатор выбранной катего-
рии продукта (бб). Поскольку в этом случае бб не равно нулю, то идентификатор катего-
рии принимает значение: бб саб = бб, и на основе этого значения данные о категориях
товара фильтруются в следующих инструкциях:

#	выбранная категория в каталоге

зеТесб_саб = Сепге.оЬдесбз.деб(бб=бб_саб)

#	категории, в которые входит выбранная категория и все дочерние категории

сабедогбез = зеТесб_саб.деб_безсепбапбз(бпс1ибе_зебб=Тгие)

Затем на основе объекта сабедогбез фильтруются данные о продуктах:

ргобисбз = Ргобисб.оЬдесбз.ббббег(депге__бп=сабедогбез).ббзббпсб().огбег_Ьу('пате')

Если категория продукта не выбрана (идентификатор категории бб=о), то из БД будут
выбраны записи обо всех продуктах:

ргобисбз = Ргобисб.оЬдесбз.абб()

После фильтрации данных о продуктах создается объект радбпабог, обеспечивающий
постраничный вывод данных о продуктах, и все полученные параметры передаются
в объект сопбехб, который загружается в шаблон ргос1ис1_1гее.И1т1 (листинг 4.59).
Листинг 4.59. Шаблон ргос1ис1_1гее.Ыт1

{% ехкепбз ’’тазкег/д1ача_4/сака1од_кгее.ЬктГ' %}

{% Ыоск ргобискз %}

<61V с1азз=”гом кехк-зкагк кехк-багк 1Ь-2">

<Ь4>Выбрана категория: {{пате_сак}}</Н4>

</сЫ>

<61V с1азз="гом кехк-зкагк кехк-багк 1Ь-2”>

<61ч с1азз="со1-12”>

{% 1к ргобискз %}

<ску с1азз=”гом ту-2”>

{% Вог тЬ 1п раде_окд %}

<61ч с1азз=”сагб тк-3 тз-3 Ьогбег-рЫтагу Ьогбег Ьогбег-3” зку1е=”Ы6кЬ: 20гет;’’>

<61ч с1азз=’’саг6-Ьеабег кехк-сепкег">

<Ь6>{{ тЬ.депге }}</Н6>

</сЫ>

{% 1к тЬ.таде %}

<1тд с1азз="сагб-1тд-кор" згс="{{ тЬ.нпаде.иг! }}” зку1е=’’тах-Ы6кЬ:300рх">
{% е!зе %}

<р>Нет фото</р>

{% епсИк %}

<Ыу с1азз="сагс1-Ьос1у">

<р с1азз=”сагс1-кехк зша!1">

<а кгек="{% иг! ’тазкег :ргос1иск_с1ека11' рк=тЬ.1с1 %}”>{ {тЬ.пате} }</а>

{% 1к тЬ.рггсе 13 Мопе %}

Цена - не задана,
{% е!зе %}

Цена - {{тЬ.рггсе}},

{% епсИк %}

В наличии - {{тЬ.озкак}}

</р>

</сИч>

</сИч>

{% епЫог %}

</Ыч>

{% е!зе %}

<Ыч с1азз=”гом кехк-зкагк кехк-с!апдег">

<р>В базе данных нет товара выбранной категории</р>

</сНч>

{% епсНк %}

</б1Ч>

</бЫ>

<!— Пагинатор начало —>

<6Ы с1азз="рад1пак1оп”>
<зрап с1азз=”зкер-Ипкз”>

{% 1Г раде_оЬд.каз_ргеу1оиз %}

<а кге^=”?раде=1”>&1ас[ио; Первая</а>

<а кге^=”?раде={{ раде_оЬд.ргеУ1оиз_раде_пшпЬег }}">Предьщущая</а>
{% епсНГ %}

<зрап с1азз=”сиггепк">

Стр. {{ раде_оЬд.пшпЬег }} из {{ раде_оЬд.радтпаког.пит_радез }}.

</зрап>

{% И раде_оЬд.каз_пехк %}

<а кге^=”?раде={{ раде_оЬд.пехк_раде_пшпЬег }}">Следующая</а>

<а кге^=”?раде={{ раде_оЬд.радтпаког.пшп_радез }}">Последняя &гадио;</а>
{% епсНГ %}

</зрап>

</сНу>

<!— Пагинатор конец —>

{% епбЫоск ргоНискз %}

В этом шаблоне имеется тег организации цикла {% Гог шь 1п раде_оЬд %}, в котором в виде
карточек выводятся сведения о продуктах, а также присутствует пагинатор для постра-
ничного вывода данных.

Если в левой боковой панели шаблона са1а1од_81а1.И1т1 с помощью мыши выбрать кате-
горию продукта, то в центральной панели будут показаны карточки с информацией
о продуктах выбранной категории (рис. 4.34).

Если в шаблоне са!а1од_йее.И1т1 нажать на кнопку Все продукты, то в центральной
панели будут показаны карточки с информацией обо всех продуктах (рис. 4.35).

И Эсе
продукты

Категории продуктов

Заморозка ►
Кондитерские ►
Консервы ►
Макаронные >
молочные ►
Мясные >
Напитки ►
Напитки горячие ►

Р.ВЯЦЦ? ►

Приправы, соусы ►
Рыбные ►
Семечки орехи ►
Сладости ►
Хлебобулочные ►

Центральная панель

Выбрана категория: Рыбные

Стр. 1 из 1

Рис. 4.34. Внешний вид шаблона са1а1од_1гее.Н1т1 с информацией о продуктах выбранной категории
Рис. 4.35. Внешний вид шаблона са1а1од_81а1.Н1т1 с информацией обо всех продуктах

Как здесь можно видеть, в карточках наименование продукта представлено в виде
ссылки. Если на ней щелкнуть левой кнопкой мыши, то откроется страница с подроб-
ными сведениями о выбранном продукте (рис. 4.36).
4.7.	Создание древовидных меню
с использованием плагина тедатепи-]з

В предыдущих разделах на примере категорий продуктов было показано, как создавать
древовидные структуры. Здесь мы рассмотрим набор модулей, которые позволяют ото-
бражать на страницах сайта категории продуктов в виде многоуровневого горизонталь-
ного меню. Для этого будет задействован специальный плагин — ше§ашепи-)8.

4.7.1.	Плагин тедатепи-]8: подготовка к работе

Плагины

Плагины — это небольшие программные модули, которые добавляют новую функциональ-
ность к основной программе. Они помогают улучшить ее производительность, обогатить
дизайн, расширить возможности пользователей.

Скачайте плагин ше^ашепп^з1, выбрав на странице его сайта опции: Сос1е | Во^гп1оас1
71Р (рис. 4.37).

Р таз(ег - Р 2 ВгапсПе; О* 0 Таф

ф тлг1о1опсагек Мегде ри11 гедиезГ *32 Егот }акеНрГт5Нз11/ра!сЬ-1 ™

 «5

зДЙТпд Й1ез

М Гопи



• л

к 1е$5

асЮ|пд ГИез

О .д11з«Г|Ьи1ея

тепа потлг Ыскз «I-

буеагь адо



Ц ЙЕАОМЕ.та

Сгаттаг

С 1пЛехМт1	Езхе^НпкЬид	9 уеагз ад о

П Нсепсе.тд	Сгеате Исепсе.тй	9 уеагз ада

Рис. 4.37. Страница для скачивания архива с плагином тедатепи-18

Скачанный файл с плагином те§атепи-)8 будет иметь имя тедатепи-]8-та81ег.21р.
После распаковки мы получим каталог тедатепи-]8-та81ег, содержащий следующие
подкаталоги и файлы (рис. 4.38).

Из этого каталога надо взять содержимое трех подкаталогов: С88, ГопГв и ]8 — и помес-
тить находящиеся там файлы в соответствующие каталоги 81айс вашего проекта.

Так, в каталог 81айс/с88 вашего проекта нужно скопировать из подкаталога С88 плагина
следующие файлы (рис. 4.39).

1 СМ. ЬПр8://§йЬиЬ.сош/тапо1о11сагек/те§атепи-]8.
И мл	Дата изменения	Тип	Размер
|_'| с:с	30.05.2024 15:51	Папка с файлами	
	30.05.2024 15:51	Папка с файлами	
	30.05.2024 15:51	Папка с файлами	
Ц 1езз	30.05.2024 15:51	Папка с файлами	
2 .дйайпЬЫеь	14.11.2018 11:19	Текстовый докум...	1 КБ
1пс1ех.Н1:т1	14 11. 2018 11:19	СНгсте НТМ1_ Па...	6 КБ
Нсепсе.тс!	14.11.2018 11:15	Файл "МО"	2 КБ
Ь КЕАОМЕ.тс!	1411.2013 11:19	Файл "МО"	5 КБ

Рис. 4.38. Содержимое папки тедатепи-]8-таз1ег после распаковки архива

Имя	Дата изменения	Тип	Размер
|ц] 1ОП1СОП5..ГП1П.С5.5.	14.11.2018 11:19	Мо±ерас<4-+ Ооси...	51 КБ
|Р( з1у1е.с«	14.11.2018 11:19	Мо1:ера^++ Ооси...	6 КБ

Рис. 4.39. Содержимое подкаталога сзз плагина тедатепи-]8

Подкаталог плагина Гоп18 со всеми файлами полностью переносится в каталог 81а11сЯоп18
вашего проекта (рис. 4.40).

Имя	Дата изменения	Тип	Размер
М 1оп1соп5.ео1:	14.11.2018 11:19	Файл "ЕОТ"	118 КБ
1отсоп5.гуд	14.11.2018 11:19	5УС -документ	327 КБ
1ОП1СОП5.11Т	14.112018 11:19	Файл шрифта Тг...	185 КБ
м 10П1СОП5.1Л/оЛ	14112018 11:19	Файл "У/ОЕЕ"	67 КБ

Рис. 4.40. Содержимое подкаталога Гоп18 плагина тедаппепи-]5

В каталог 81айс/]8 вашего проекта переносятся следующие элементы из подкаталога ]8
плагина (рис. 4.41).

Имя	Дата изменения	Тип	Размер
уепНог	30.05.2024 15:51	Папка с файлами	
[У тедатепи^	14.11.2018 11:19	Мо1ерас1 + + Осси...	3 КБ

Рис. 4.41. Содержимое подкаталога ]8 плагина пледатепи-.|5

Для использования мегаменю в шаблонах сайта нужно к проекту подключить несколь-
ко скриптов и обернуть меню в следующие контейнеры:

<сПу с1азз=”тепи-соп1а1пег">

<сЦу с1азз=”тепи”>

<и1>

<И>Элемент меню</И>

<И>Элемент меню </И>
</и!>

</сНу>

</сНу>

Выполнив указанные действия, можно будет использовать плагин тедатепи-) 8 в своем
проекте.

4.7.2.	Создание мегаменю на основе плагина тедатепи-]8

Создадим мегаменю для выбора категорий продуктов. Чтобы подгрузить категории
продуктов с использованием мегаменю, нужно либо в главном меню, либо на любой
другой странице сайта создать следующую ссылку (листинг 4.60).

Листинг 4.60. Ссылка для вызова мегаменю

<1г><а Ьгек="{% иг1 'тазбег:теда_тепи' %}” кагдек =”_Ь1апк”>Пример мегаменю</ах/1г>

По ЭТОЙ ссылке активируется ИКЬ-маршрут теда_тепи (листинг 4.61).

Листинг 4.61.11К1_-маршрут теда тепи

#	Маршрут для вызова мега меню

ракЬ. (’теда_тепи/ ’ , угемз.теда_тепи, пате='теда_тепи'),

По этому маршруту вызывается представление теда тепи (листинг 4.62).

Листинг 4.62. Представление теда_тепи

######################################

#	Представление для показа мегаменю #
######################################

Нек теда_тепи(гедиезк):

сакедоггез = Сепге_т.оЬдескз.а!1()
сопкехк = {'сакедоггез': сакедоггез}

гекигп гепНег(гедиезк, ’тазкег/д1ауа_4/теда_тепи.Ькт1’, сопкехк)

Из этого представления вызывается шаблон теда_тепи.Ыт1 (листинг 4.63).

Листинг 4.63. Шаблон теда_тепи.Гйт1

{% ехкепНз "зЬор/Ьазе.ЬктГ’ %}

{% 1оаН зкакгс %}

{% Ыоск сопкепк %}

<1гпк ге1=”зку1езЬеек”, Ьгек="{% зкакгс 'сзз/гопгсопз.тгп.сзз' %}’’>

<1гпк ге1=”зку1езЬеек”, Ьгек="{% зкакгс ' сзз/зку1е. сзз ’ %}”>

<зсггрк згс=”{% зкакгс ’дз/тедатепи.дз' %}"х/зсггрк>

<сПу с1азз="тепи-сопкагпег">

<сПу с1азз="тепи”>
{% боаб трбб_бадз %}

<и1>

{% гесигзебгее сабедогбез %}

<1б>

<а Ьгеб="{% игб 'тазбег:деб_сабедогу' б6=побе.бб %}">{{ побе.пате }}</а>

{% 16 поб побе.бз_беаб_побе %}

<иб сбазз="сЬбббгеп">
{{ сббббгеп }}

</иб>

{% епббб %}

</1б>

{% епбгесигзебгее %}

</иб>

</сНу>

</бгу>

<бб V с1азз="гом бехб-збагб тх-2">

<ЬЗ>{{ сабедогу.пате }}</ЬЗ>

</с11у>
{% епбЫоск сопбепб %}

Здесь подключаются элементы плагина мегаменю из каталога 81айс:

<Ипк ге1="збу1езбееб", Ьгеб="{% збаббс 'сзз/бопбсопз.тбп.сзз' %}">

<Ипк ге1="збу1езбееб", Ьгеб="{% збаббс 'сзз/збу1е.сзз' %}">

<зсгбрб згс="{% збаббс ' дз/тедатепи.дз' %}"></зсгбрб>

Затем строится горизонтальное меню в виде свернутого дерева:

<66у сбазз="тепи-сопбабпег">

<66у сбазз="тепи">

{% боаб трбб_бадз %}

<иб>

{% гесигзебгее сабедогбез %}

<бб>

<а Ьгеб="{% игб 'тазбег:деб_сабедогу' бб=побе.б6 %}">{{ побе.пате }}</а>

{% бб поб побе.бз_беаб_побе %}

<иб сбазз="сЬбббгеп">
{{ сббббгеп }}

</иб>

{% епббб %}

</бб>

{% епбгесигзебгее %}

</иб>

</61У>

</61У>

Наконец создается блок, в котором выводится наименование выбранной пользователем
категории продукта:

<ббу сбазз="гом бехб-збагб тх-2">

<ЬЗ>{{ сабедогу.пате }}</ЬЗ>

</61У>
В шаблоне теда_тепи.И1т1 для выбора категории продукта используется следующая
ссылка:

<а Ьгеб="{% иг1 'шазбег:деб_сабедогу' 1с1=пос1е. Ш %}’’>{{ побе.пате }}</а>

По ЭТОЙ ссылке активируется ИКЬ-маршруТ деб_сабедогу (листинг 4.64), в который
передается идентификатор выбранной категории (й^побе.ш).

Листинг 4.64. Маршрут IIК1_ де(_са(едогу

#	Маршрут получения категории продукта

рабЬ (' деб_сабедогу/<гпб: л_с1>', чгемз. деб_сабедогу, паше=' деб_сабедогу'),

По этому маршруту вызывается представление деб_сабедогу (листинг 4.65).

Листинг 4.65. Представление де(_са(едогу

################################

#	Получение категории продукта #
################################
с!еГ деб_сабедогу (гедиезб, И) :

# список всех категорий продуктов
сабедоглез = Сепге_т.оЬдесбз.а11()
# выбранная категория продуктов
сабедогу = Сепге_т.оЬдесбз .деб (1с1=1с1)
сопбехб = {'сабедогу': сабедогу, 'сабедоггез': сабедоглез}
гебигп гепбег(гедиезб, ’ шазбег/д1ача_4/теда_шепи.Ьбш1’, сопбехб)

В этом представлении в объект сабедоглез из БД загружается полный список категорий
продуктов, а в объект сабедогу — выбранная пользователем в мегаменю категория про-
дуктов.

По умолчанию мегаменю занимает 80% ширины контейнера. Для того чтобы меню
было представлено в виде строки на всю ширину контейнера, необходимо отредакти-
ровать файл 81у1е.с88 — откройте его в любом текстовом редакторе, найдите в нем
фрагмент кода:

.шепи-сопбалпег {
мИбЬ: 80%;
тагдлп: 0 аибо;
Ьаскдгоипб: #е9е9е9;

}

и измените этот код следующим образом, указав новое значение для ширины контей-
нера для меню —100%:

.шепи-сопбалпег {

мМбЬ: 100%;

шагдлп: 0 аибо;

Ьаскдгоипб: #е9е9е9;
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке При-
мер мегаменю.

Запустив шаблон с мегаменю на выполнение, мы получим горизонтальное меню с кате-
гориями продуктов (рис. 4.42).

Заморозка	Кондитерские	Консервы	Макаронные	Молочные	Мясные

Напитки	Напитки горячие	Овощи	Приправы, соусы	Рыбные	Семечки, орехи

Сладости	Хлебобулочные

Рис. 4.42. Горизонтальное меню категорий продуктов на основе плагина тедатепи-]8

Как здесь можно видеть, в строке меню показаны только корневые элементы дерева
категорий продуктов. Но при наведении курсора мыши на любой из элементов этого
меню появляется выпадающий список с его дочерними элементами (рис. 4.43).

Заморозка	Кондитерские	Консервы	Макаронные	Молочные	Мясные

Напитки	Напитки горячие	Овощи	Приправы, соусы	Рыбные	Колбасы

Мясные консервы

Сладости	Хлебобулочные

Рис. 4.43. Мегаменю с открытой вкладкой категорий продуктов Мясные

По щелчку левой кнопкой мыши на любом элементе мегаменю выбранный элемент
будет отображен в нижней части шаблона (рис. 4.44).

Заморозка	Кондитерские	Консервы	Макаронные	Молочные	Мясные
Напитки	Напитки горячие	Овощи	Приправы, соусы	Рыбные	Семечки, орехи

Сладости	Хлебобулочные

Мясные консервы_____________

Рис. 4.44. Мегаменю с выбранной категорией продуктов Мясные консервы

Мегаменю, показанные на рис. 4.42-4.44, выглядят не очень привлекательно: между их
элементами присутствуют слишком большие интервалы, да и выделенные элементы
отображаются не очень четко. Немного изменим оформление мегаменю, для чего вне-
сем некоторые изменения в файл стилей свв. Найдите в нем следующий блок:
.тепи > и! > И а {
кехк-йесогаЫоп: попе;
раскИпд: 1.5ет Зет;

Ызр1ау: Ыоск;

}

и поменяйте величину расШпд — чтобы меню поместилось в одну строку (задаем
в строке расШпд значение 1ет 1ет):

.тепи > и! > И а {
ЕехЫЫсогаЫоп: попе;
расШпд: 1ет 1ет;

Ызр1ау: Ыоск;

}

Затем найдите в файле сзз блок:

.тепи > и! > И > иТ.погтаТ-зиЬ > И а {
ЬоЫег: 0 ;

расШпд: 1ет 0;

}

и уменьшите вертикальные отступы (задаем в строке расШпд значение о. 1ет).

.тепи > и! > И > и1.погта1-зиЬ > И а {
ЬоЫег: 0 ;

раскПпд: 0.1ет 0;

}

Теперь добавьте после этого блока новый блок — чтобы в подменю выделить синим
цветом опцию, над которой находится мышь:

.тепи > и! > И > и1.погта1-зиЬ а:Ьоуег{
ЬаскдгоипЫ #0078ВЕ;

со!ог: ЫЫ;
}

После проведенных изменений мегаменю становится компактнее, может вписаться
в одну строку окна браузера, а опция, над которой находится мышь, явно выделяется
синим цветом (рис. 4.45).

Рис. 4.45. Мегаменю с измененным интерфейсом
4.8.	Фильтрация продуктов с использованием
панели инструментов и древовидного каталога категорий

В предыдущих разделах на примере категорий продуктов было показано, как создавать
древовидные структуры, как организовать список продуктов с привязкой к категориям
и как выводить категории продуктов в виде горизонтального многоуровневого меню.
Рассмотрим теперь набор модулей, которые позволят отображать на страницах сайта
сведения о продуктах, а также выбирать и фильтровать эти данные с учетом категорий.
Кроме того, мы научимся создавать панель инструментов (типа 1оо1Ьаг) для представ-
ления элементов мегаменю в виде значков со всплывающими подсказками. И в этом
нам поможет уже знакомый по предыдущему разделу плагин тедатепи-] 8 —
понадобится лишь немного изменить модель категорий продуктов, добавив в нее поле
таде. Однако чтобы в цифровой интерактивной книге сохранить функциональность
модулей предыдущих разделов, мы создадим новые модели для категорий продуктов и
для самих продуктов.

В модели со значками категорий продуктов, в отличие от аналогичных моделей из
примеров предыдущих разделов, предусмотрено дополнительное поле таде, обеспечи-
вающее возможность показа значков в панели инструментов (1оо1Ьаг). Для загрузки
файлов значков нам также понадобится создать дополнительную функцию изменения
имен файлов с изображениями (гепате депге). Код этой функции и модели для категорий
продуктов Сепге_1 приведен в листинге 4.66.

Листинг 4.66. Функция гепате_депге и модель для категорий продуктов 6епге_1

#################################################
# функция изменения имени изображения категории #
#################################################
беб гепате_депге (бпзбапсе, ГИепате) :

ир1оаб_бо = 'депге'

ехб = бПепате. зрИб (’.') [-1]

п_гес = 1еп(Сепге_б.оЬдесбз.а11 ())

# получить 16 последней записи

бб п_гес == 0:

тах_гес = 0

ебзе:

тах_гес = Сепге_б .о^есбз .а!1 () . 1азб() .66

тах_16 = тах_гес +1 #16 следующей записи

рбобо = ’депге_' + збг(тах_16)

16 Фпзбапсе.рк: # текущий Ю

бИепате = ’{}{}.{}’. богтаб (' депге_', бпзбапсе.рк, ехк)

еНб рбобо: # имя файла - текущий 10 + 1

бИепате = ’{}.{}'. богтаб (рбобо, ехк)

е1зе: # случайное имя файла

бИепате = '{}{}.{}'. богтаб (' депге_', иш.64 () .Нех, ехк)

# гебигп ббе мбо1е рабЬ бо бНе Ше

гебигп оз.рабЬ.до1п(ир1оаб_бо, бИепате)
#####################
# категории товаров #
#####################
с!азз Сепге_1(МРТТМойе!):
пате = тос!е1з.СЬагЕ1е1с1(тах_1епд1±1=50, уегЬозе_пате=”Имя категории”)
рагепЕ = ТгееЕогегдпКеу(’зе1Е', оп_с!е1еке=тос1е18 .СА5САЕЕ,
пи!1=Тгие, Ыапк=Тгие,
ге!акес1_пате=' сЫМгеп')

таде = тос!е1з. 1тадеЕ1е1с1(ир1оас1._ко=гепате_депге, Ыапк=Тгиел
уегЬозе_пате="Фото категории")

с1еГ _зкг__(зе!Е) :

гекигп зеЕЕ.пате

с!азз МРТТМека:

огс!ег_1пзегЕ1оп_Ьу = [' паше' ]

Как уже отмечалось ранее, в этой модели, в отличие от ранее рассмотренных моделей
для древовидных структур, имеется дополнительное поле шаде, в которое будут загру-
жаться значки для панели инструментов (1оо1Ьаг). Чтобы исключить ошибки при за-
грузке изображений с именами файлов на кириллице, эту модель сопровождает функ-
ция автоматического переименования файлов загружаемых изображений гепате депге.

Пояснение

Поскольку публичные серверы, работающие на 1лпих, не принимают файлы с именами на
кириллице, использование этой функции позволит автоматически переименовывать такие
файлы.

Создадим также новую модель для продуктов Ргоаиск !, связанную с моделью категорий
продуктов Сепге г (ЛИСТИНГ 4.67).

Листинг 4.67. Модель Ргос1ис(_1

#####################
# Модель продукты #
#####################

с!азз Ргос1иск_1 (тос!е1з .Мос1е1) :

депге = тос!е1з. ЕогегдпКеу (Сепге_1, оп_с1е1еке=тос1е18 .СА5САЕЕ,
Ь1апк=Тгие, пи11=Тгие,
уегЬозе_пате="Категория продукта")

пате = тос!е1з .СЬагЕ1е1с1(тах_1епд1±1=150,

уегЬозе_пате="Наименование товара")

йезсггрЕгоп = тос!е1з .ТехЕЕ1е1с1(Ыапк=Тгие,

уегЬозе_пате="0писание товара")

рггсе = тос!е1з . Еес1та1Е1е1с1(тах_с11д1кз=10, (1ес1та1_р1асез=2л
уегЬозе_пате="Цена")

лпаде = тос!е1з. 1тадеЕ1е1с1(ир1оас1_ко=гепате_ргос1, Ыапк=Тгие,
уегЬозе_пате="Фото товара")

оЬдескз = тос!е1з .Мападег
Не забудьте теперь выполнить миграцию:

рукЬоп тападе.ру такетГдгакгопз

рукЬоп тападе.ру тТдгаке

Для реализации возможности ввода данных о продуктах и категориях продуктов через
административную панель Р]ап§о зарегистрируем в файле ас1т1п.ру модели Ргобись_1
И Сепге т (ЛИСТИНГ 4.68).

Листинг 4.68. Регистрация моделей Ргос1ис(_1 и бепгеД в файле ас1т1п.ру

Вгот .тобе1з гтрогк Сепге_1, Ргос1исЬ_1

#	Импорт пакета ОдапдоМрЬЬАбтгп

Ргот сЦ апдо_трЬЬ_абт1п. асктт гтрогк БдапдоМрЬЬАбтгп

#	Дополнительный класс для регистрации моделей

с1азз СаЬедогуАбтВп ОДапдоМрЬЬАс1т1п) :

пате = {"з1ид”: ("пате”,)}

#	Регистрация модели Сепге_1

абтВп.зВЬе.гедВзкег(Сепге_1, СаЬедогуАбтгп)

#	Продукты (товары)

абтВп.зВЬе.гедгзЬег (РгобисЬД)

Заполним модель сепгеД. несколькими категориями продуктов с использованием адми-
нистративной панели Э)ап§о (рис. 4.46).

Заполним для нашего примера также с использованием административной панели
В)ап§о модель Ргобись_1 несколькими продуктами разных категорий (рис. 4.47).

Для отображения страницы с карточками продуктов и с возможностью выбора катего-
рии продукта из мегаменю или из панели инструментов (1оо1Ьаг) нужно в главном меню
или на любой другой странице сайта создать следующую ссылку (листинг 4.69).

Листинг 4.69. Ссылка на страницу вывода данных о продуктах
и панели инструментов 1оо1Ьаг

<И><а ЬгеВ=”{% иг1 ’тазкег:Ьоо1Ьаг_ир' %}’’ кагдек =”_Ь1апк”>Мегаменю и коо!Ьаг</ах/И>

По этой ссылке вызывается ИКЪ-маршрут коо1Ьаг_ир (листинг 4.70).

Листинг 4.70. 11К1_-маршрут 1оо1Ьаг_ир

#	Выбор категорий продуктов из мегаменю и панели кооВЬаг
ракЬ(’коо1Ьаг_ир/’, у!емз.коо1Ьаг_цр, пате=’коо1Ьаг_цр’),

По этому маршруту вызывается представление коо1Ьаг_ир (листинг 4.71).

Листинг 4.71. Представление 1оо1Ьаг_ир

#######################################

#	Верхний кооВЬаг категорий продуктов #
#######################################
Рис. 4.46. Модель Сепге ! с заполненными категориями продуктов

Рис. 4.47. Модель Ргос1исТ 1 с заполненными продуктами разных категорий
с!еГ бообЬаг_ир (гедиезб) :

#	Все продукты без фильтров

ргобисбз = Ргобисб_б.об]есбз.абб()
пит_ргобисбз = беп(ргобисбз)

#	Все категории продуктов без фильтров

сабедогбез = Сепге_б.оЬдесбз.абб()
зебесб_саб_пате = " Все продукты"

#	Категории верхний уровень

депге_боо!Ьаг = Сепге_б.оЬдесбз. ббббег (беуеб=0)

#	Пагинатор

радбпабог = Радбпабог(ргобисбз, рег_раде=30)

раде_пишЬег = гедиезб.СЕТ.деб('раде')

раде_оЬ] = радбпабог.деб_раде(раде_питЬег)

сопбехб = {"ргобисбз": ргобисбз, "раде_обд": раде_оЬ^,

"сабедогбез": сабедогбез, "депге_боо!Ьаг": депге_бообЬаг,
"пит_ргобисбз": пит_ргобисбз, "зебесб_саб_пате": зебесб_саб_пате}
гебигп гепбег(гедиезб, 'тазбег/дбауа_4/бообЬаг_ир.Нбтб', сопбехб)

В этом представлении в объект ргобисбз из БД загружаются все продукты, а в объект
пит ргобисбз — КОЛИЧеСТВО Записей обо всех продуктах. Затем В объект сабедогбез загру-
жаются все категории продуктов из БД, а в объект депге бообЬаг — категории продуктов
только для панели инструментов (боо1Ьаг). Здесь на категории продуктов наложен
фильтр беуеб=о — т. е. в этом объекте будет находиться список категорий продуктов
самого верхнего уровня, используемый для формирования значков панели инструмен-
тов (боо1Ьаг). В завершение создается пагинатор для постраничного вывода продуктов
(30 элементов на странице). Всё это через словарь сопбехб передается в шаблон 1оо1Ьаг
_ир.К1т1 (листинг 4.72).

Листинг 4.72. Шаблон 1оо1Ьаг_ир.Ыт1

{% ехбепбз "зЬор/Ьазе.Ьбтб" %}

{% боаб збаббс %}

{% Ьбоск сопбепб %}

<ббу сбазз="сопбабпег-ббибб"> <!— начало контейнера—>

<ббу сбазз="гом бехб-багк"> <!— начало строки —>

<ббу сбазз="соб-2 бехб-збагб">

<Ь6>Доступных товаров- {{пит_ргобисбз}}</Н6>

</ббу>

<ббу сбазз="соб-2 бехб-збагб">

<а Ьгеб="{% игб 'тазбег:боо!Ьаг_ир' %}">

<Ьиббоп сбазз="Ьбп Ьбп-зиссезз Ьбп-зт">

<б сбазз="Ьб Ьб-ЬапбЬад-бббб"></б> Показать все продукты

</Ьиббоп>

</а>

</ббу>
<!— Начало каталога категорий —>

<Ипк ге1="збу1езИееб", Нгеб="{% збабгс 'сзз/гопгсопз.тгп.сзз' %}">

<Ипк ге1="збу1езИееб", Нгеб="{% збабгс 'сзз/збу!е.сзз' %}">

<зсг!рб згс="{% збабгс 'дз/тедашепи.дз' %}"></зсг!рб>

<Иг Ыазз="тб-1 тЬ-1"/> <!— Это горизонтальная полоса —>

<сНч с1азз=”гом”>

«ТЫ с1азз=”со1-12 тх-2">

<Н5Жатегории продуктов</Н5>

</сИч>

</сИч>

<сНч с!азз="тепи-сопба!пег">

<сНч с!азз="тепи">

{% 1оаб трбб_бадз %}
<и!>

{% гесигзебгее сабедоггез %}

<И>

<а Игеб="{% иг! 'тазбег:ргобисб_ир' !б=пос1е. 16 %}’’>{{ побе.пате }}</а>
{% 16 поб побе.!з_1еаб_побе %}

<и! с!азз="сЫ16геп">

{{ сНИбгеп }}

</и!>

{% епсНб %}

</И>

{% епбгесигзебгее %}

</и!>

</сНч>

</сИч>

<!— Конец каталога категорий —>

<Иг с!азз="тб-1 тЬ-1"/> <!— Это горизонтальная полоса —>
{% 1пс1ибе "тазбег/д!ача_4/боо1Ьаг.Нбт!" %}

<Ьг с1азз="тб-1 тЬ-1’7> <!— Это горизонтальная полоса —>

</сНч> <!— конец строки —>

<сНч с1азз="гом">

{% Ыоск ргобисбз %}

{% 1пс1ибе "тазбег/д1ача_4/зНом_ргобисбз.Нбт!" %}
{% епсЫоск ргобисбз %}

</Ы>

</Ы> <!— конец контейнера—>
{% епсЫоск сопбепб %}

Шаблон 1оо1Ьаг_ир.И1т1 имеет следующую структуру:

{% Ыоск сопбепб %}

Кнопка для показа всех продуктов

Строка мегаменю с категориями продуктов

{% гпЫибе ".../боо!Ьаг.Нбт!" %}	Это боНЬаг со значками
{% Ыоск ргоЫскз %}

{% 1пс1ис1е ".. ./рго<Зискз_а11.ЪктГ' %}	<- Это карточки с продуктами

{% епсЫоск ргоЫскз %}

{% епсЫоск сопкеп %}

В верхней части шаблона 1оо1Ьаг_ир.К1т1 показывается количество продуктов БД и пред-
ставлена кнопка для загрузки из БД всех продуктов. В средней части выводится гори-
зонтальное мегаменю с категориями продуктов, имеющее раскрывающиеся подкатего-
рии. Ниже следует панель инструментов (1оо1Ьаг) со значками категорий продуктов
верхнего уровня. Сама панель инструментов находится в подключаемом шаблоне
1оо1Ьаг.И1т1 (листинг 4.73). После панели инструментов идет блок ргосЫкз, в который
вложен шаблон 8Но\л/_ргос1ис18.Н1т1 (листинг 4.74), демонстрирующий карточки с про-
дуктами. В нем при первой загрузке будут показаны карточки всех продуктов, которые
внесены в БД, т. е. фильтрация по категориям продуктов в этом случае не произво-
дится.

Листинг 4.73. Шаблон 1оо1Ьаг.Гйт1

<сНч с1азз=’’гом кехк-зкагк кехк-сЗагк 1й-2">

<скч с1азз="со1-12”>

<скч с1азз=’’гом ту-1 тх-1">

{% ког тЬ 1п депге_коо1Ьаг %}

«31V с1азз=”саг(3 тз-1 ЬогсЗег-ргтагу Ьогйег ЬогсЗег-З"
зку1е=''Ы<ЗкЫ 7гет; ЬаскдгоипсЗ-соког :гдЬ (255, 222, 173);”>
{% 1к тЬ.йпаде %}

<а йгек=''{% иг1 'тазкег:ргосЗиск_ир' 1сЗ=^тЬ. 1сЗ %}”

(Зака-кодд1е="коо1к1р" сЗака-р1асетепк="г1дк1к" к!к1е="{{ тЬ.пате|заке }}">

<1тд с1азз=’’сагсЗ-тд-кор" згс="{{ тЬ.лпаде.иг! }}” зку1е="тах-Ыс1кЬ:200рх">
</а>

{% епсПк %}

</Ы>

{% епсЗког %}

</Ы>

</Ыч>

</сЗЫ>

<!— Скрипт для показа всплывающей подсказки —>

<зсгкрк>

$ (сЫитепк) . геасЗу (кипсклоп () {

$ (’ [<3ака-кодд1е="коо1к1р" ] ') . коокккр ();

});

</зсгкрк>

В шаблоне 1оо1Ьаг.К1т1 в цикле по полю депге_коо1Ьаг отображаются карточки, содержа-
щие только значки корневых категорий продуктов размером 200x200 пикселов. Вывод
каждого значка реализуется по ссылке на страницу с продуктами с фильтром по
выбранной категории: Ыек="{% иг1 'тазкег:ргос1иск_ир' 1сЗ=тЬ.1сЗ %}". Кроме того, такой зна-
чок сопровождается всплывающей подсказкой: (Зака-кодд1е=''коо1к1р" (Зака-р1асетепк="г1дйк"
к1к1е="{{ ть.пате|заке }}", в которой отображается имя корневой категории продукта.
Вывод всплывающей подсказки обеспечивает Зауа-скрипт:
<ЗСГ1рк>

$ (боситепк) . геабу (кипскгоп () {

$ (' [бака-кодд1е="коо1к1р" ] ') . ТзооПахр ();

});

</зсггрк>

Листинг 4.74. Шаблон 8Ко\л/_ргобис18.Ыт1

<Ь4>Выбрана категория: {{зе!еск_сак_паше} }</Н4>

<61V с1азз=”гом кехк-зкагк кехк-багк 1Н-2">

<сИу с1азз="со1-12”>

{% И ргобискз %}

<сНу с1азз=”гом ту-2">

{% Вог тЬ 1п раде_оЬ] %}

<б1ч с!азз="сагб тк-3 тз-3 Ьогбег-рггтагу Ьогбег Ьогбег-3” зку1е=’’м1бкЬ: 20гет;”>

<б!ч с1азз=”сагб-Ьеабег кехк-сепкег">

<Ь6>{{тЬ.депге}}</Н6>

</б1ч>

{% 1В тЬ.таде %}

<1тд с1азз="сагб-1тд-кор" згс="{{ тЬ.нпаде.иг! }}” зку1е="тах-м1бкЬ:300рх">
{% е!зе %}

<р>Нет фото</р>

{% епсИВ %}

<сНу с1азз=”сагс1-Ьос1у">

<р с1азз=”сагс1-кех11 зша!1">

<а ЪгеВ="{% иг! 'тазкег :ргос!ис11_с1е11а11_1' рк=тЬ.1с1 %}”>{ {тЬ.пате} }</&>,

{% тЬ.рггсе 13 Мопе %}

Цена - не задана

{% е!зе %}

Цена - {{тЬ.рггсе}}

{% епсНГ %}

</р>

</сНу>

</сНу>

{% епйког %}

</сНу>

{% е!зе %}

<сНу с1азз=”гом кехк-зкагк кехк-с!апдег">

<р>В базе данных нет товара выбранной категории</р>

</сНу>

{% епсНк %}

</сНу>

</б1У>

<!— Пагинатор начало —>

<сНч с1азз="рад1пак1оп">
<зрап с!азз=”збер-1!пкз”>

{% 1! раде_оЬд.Ьаз_ргеу!оиз %}

<а Ьгеб="?раде=Г’>&1ас[ио; Первая</а>

<а Ьгеб=”?раде={{ раде_оЬд.ргеу!оиз_раде_питЬег }}”>Предыдущая</а>

{% епсНГ %}

<зрап с!азз=”сиггепб”>

Стр. {{ раде_оЬд.питЬег }} из {{ раде_оЬд.радгпабог.пит_радез }}.

</зрап>

{% 16 раде_оЬд.Ьаз_пехб %}

<а Ьгеб=”?раде={{ раде_оЬд.пехб_раде_питЬег }}”>Следующая</а>

<а Ьгеб="?раде={{ раде_оЬд.радгпабог.пит_радез }}">Последняя &гадио;</а>

{% епбИ %}

</зрап>

</сНу>

<!— Пагинатор конец —>

В шаблоне 8Ио\л/_ргос1ис18.И1т1 показываются карточки продуктов из БД с постраничным
выводом по 30 карточек на странице. Карточки отображаются в цикле, который создан
с использованием тега {% бог тЬ 1п раде_оЬд %}. Обратите внимание, что наименование
продукта пате представляет собой ссылку на ИКЪ-маршруТ ргобисб_бебаП_! (лис-
тинг 4.75), в который передается первичный ключ рк (идентификатор) продукта:

<а Ьгеб="{% иг! 'тазбег :ргобисб_бебаП_!' рк=тЬ.!б %} ">{ {тЬ.пате} }</а>

Листинг 4.75. ОКЬ-маршрут ргос1ис(_с1е1а|1_1

#		 показать подробные сведения о продукте в боо!Ьаг-------

рабЬ (' ргобисб_беба!1_!/<!пб: рк>/ ', убемз. РгобисбРеба!1_!. аз_у!ем (), паше=' ргобисб_бебаН_!'),

По этому маршруту вызывается представление на основе класса Ргобисб0ебаП_1 (лис-
тинг 4.76).

Листинг 4.76. Представление на основе класса Ргос1исЮе(а|1_1

#	Класс для показа полной информации о продукте #

с1азз Ргобисб0ебаН_1 (ОебаПУбем) :

тобе! = Ргобисб_!

В ЭТОМ классе создается объект тобе! на основе модели Ргобисб !. По умолчанию класс
использует шаблон ргос1ис1_1_с1е1а|1.И1т1 (листинг 4.77), показывающий полноразмерную
фотографию и подробную информацию о продукте.

Листинг 4.77. Шаблон ргос1ис(_1_с1е(а|1.Ыт1

{% ехбепбз "зЬор/Ьазе.Ьбт!" %}

{% Ыоск сопбепб %}

<61у с!азз=”сопба!пег бехб-збагб">
«Цу с1азз="со1-3">

<а Ьгек="дауазсг1рк:Ызкогу.до (-1) " с1азз="Ькп Ькп-зиссезз Ькп-зт">

<1 с1азз=”Ы Ы-аггом-1екк-с1гс1е"х/1> Назад</а>

</сНу>

<с11у с1азз="гом ту-2">

<Ь4 Наименование продукта - {{ оЬдеск.пате } }</Ь4>

{% И оЬдеск.шаде %}

<рх!тд згс="{{ оЬдеск.гтаде.иг1 }}" с1азз="1тд-Г1и14" а1к="СЕС"х/р>
{% е1зе %}

<р>Нет фото</р>

{% еп4И %}

<р>Цена - {{'₽'}}{{оЬдеск.рг!се}}</р>

<41V с1азз="гом ту-2">

<Ь5>0писание продукта</к5>

<р>{ {оЬдеск.4езсг1рк1оп} }</р>

</сИу>

</сНу>

</41у>

{% епбЫоск %}

Вернемся к шаблону 1оо1Ьаг_ир.И1т1 (см. листинг 4.73). В нем для фильтрации продуктов
по категориям используется следующая ссылка:

<а Ьге1="{% иг1 'тазкег:рго4иск_ир' 14=по4е.14 %}’’>{{ по4е.пате }}</а>

По этой ссылке активируется ИВП-маршрут рго4иск_ир (листинг 4.78), в который пере-
дается идентификатор выбранной категории продукта (14=по4е.14).

Листинг 4.78. ЫНЬ-маршрут ргос1ис(_ир

#		 список товаров выбранной категории из каталога коо1Ьаг—

ракЬ('рго4иск_ир/<1пк:14>/', у!емз.рго4иск_ир, паше='рго4иск_ир'),

По этому маршруту вызывается представление рго4исб_ир (листинг 4.79), которое при-
нимает идентификатор выбранной категории продукта (14).

Листинг 4.79. Представление ргос1ис(_ир

########################################

#	Показать продукты по фильтру Поо1Ьаг #

########################################

4еГ рго4исб_ир(гедиезк, 14=0):

14_сак = 14

# Категории - верхний уровень

депге_коо1Ьаг = Сепге_1.оЬдескз. Шкег (1еуе1=0)
депге = Сепге_б.оЬдесбз.абб()

зебесб_саб = Сепге_б.оЬдесбз .деб (бб=бб_саб)
зебесб_саб_паше = зебесб_саб. пате

#	категории, в которые входит выбранная категория и все дочерние категории
сабедогбез = зебесб_саб.деб_безсепбапбз (бпсбибе_зебб=Тгие)

#	продукты, которые входят в выбранную категорию и во все дочерние

ргобисбз = Ргобисб-б.оЬдесбз.бНбег (депге_1п=сабедог1ез) .ббзббпсб() .огбег_Ьу('паше')

пиш_ргобисбз = 1еп(ргобисбз)

#	Восстановить полный список категорий продуктов
сабедогбез = Сепге_б.оЬдесбз.абб()

#	Пагинатор

радбпабог = Радбпабог(ргобисбз, рег_раде=30)

раде_питЬег = гедиезб.СЕТ.деб('раде')

раде_оЬд = радбпабог.деб_раде(раде_питбег)

сопбехб = {"ргобисбз": ргобисбз, "депге": депге, "раде_оЬ^": раде_об^,
"зеТесб_саб": зебесб_саб, "бб_саб": бб_саб, "пит_ргобисбз": пит_ргобисбз,
"сабедогбез": сабедогбез, "депге_боо!Ьаг": депге_бообЬаг,
"зебесб_саб_паше": зебесб_саб_пате}

гебигп гепбег(гедиезб, "тазбег/дбача_4/бообЬаг_ир.Нбтб", сопбехб)

Это представление получает идентификатор категории продуктов (бб), а в объект
депге бооббаг загружаются только корневые категории продуктов для панели инструмен-
тов (боо1Ьаг).

После этого в объект депге загружается полный список категорий продуктов, а объект
сабедогбез получает из БД категории, в которые входит выбранная категория и все ее
дочерние категории. В завершение в объект ргобисбз загружаются из БД все продукты
полученной категории и всех дочерних категорий (если дочерних категорий нет, то
только полученной категории). Все эти данные через словарь сопбехб передаются в шаб-
лон 1оо1Ьаг_ир.И1т1.

В шаблоне 1оо1Ьаг_ир.К1т1 есть кнопка Показать все продукты, которая связана со сле-
дующей ссылкой:

<а Ьгеб="{% игб 'шазбег:бообЬаг_ир' %}">

По этой ссылке в конечном итоге будет вызвано представление бообЬаг ир, в котором
снимаются фильтры на категории продуктов и отображается шаблон 1оо1Ьаг_ир.И1т1
с карточками всех продуктов из БД.

Итак, мы разобрались с содержанием модулей, которые обеспечивают отображение как
всех карточек продуктов из БД, так и отфильтрованных по дереву категорий продуктов.
Посмотрим теперь, как выглядят наши шаблоны в окне браузера.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 4 и перейти по ссылке Мега-
меню и 1оо1Ьаг
Общий вид шаблона 1оо1Ьаг_ир.И1т1 с карточками всех продуктов из БД показан на
рис. 4.48, а на рис. 4.49 — демонстрируется подсказка с категорией продуктов, всплы-
вающая, когда на значок наводится курсор мыши (см. листинг 4.73).

Заморозка	Ком дн горски е	Консервы Крупы Макаронные Молочные Напитки Рыбные

Выбрана категория: Все продукты

Алкогольные

Мороженое

Рис. 4.48. Общий вид шаблона 1оо1Ьаг_ир.Н1т1 с карточками всех продуктов

Рис. 4.49. Всплывающая подсказка категории продукта панели инструментов Доо1Ьаг)

Если щелкнуть левой кнопкой мыши на каком-либо значке панели инструментов (на-
пример, на значке Рыбные), то карточки продуктов будут отфильтрованы по этой кате-
гории продуктов с учетом всех дочерних категорий (рис. 4.50).

Аналогичную картину мы получим и в том случае, если будет выбрана категория Рыб-
ные в строке мегаменю. При этом когда пользователь перемещает указатель мыши над
опциями строки мегаменю, то они автоматически открываются, отображая дочерние
категории (рис. 4.51), а выбранная опция (здесь Макаронные) меняет цвет на синий.
Когда же пользователь перемещает указатель мыши над опциями дочерних катего-
рий мегаменю (рис. 4.52), то активная опция (здесь Рыба соленая) отображается на

Рис. 4.50. Шаблон 1оо1Ьаг_ир.Мт1 с карточками продуктов категории Рыбные

Категории продуктов

Макаронные Молочные Напитки Рыбные

Заморозка Кондитерские Консервы Крупы

Вермишель

Лапша

Макароны

Рис. 4.51. Выбранная опция строки мегаменю с открытой вкладкой дочерних категорий

Заморозка Кондитерские Консервы Крупы Макаронные Молочные Напитки Рыбные

Рис. 4.52. Дочерняя активная опция мегаменю с подсветкой синим фоном
Рис. 4.53. Шаблон 1оо1Ьаг_ир.Мт1 с карточкой продукта категории Рыба соленая

Рис. 4.54. Шаблон 1оо1Ьаг_ир.Мт1 после нажатия на кнопку Показать все продукты
синем фоне, а щелчок мышью на этой опции выводит карточку выбранного продукта
(рис. 4.53).

Если в шаблоне 1оо1Ьаг_ир.И1т1 нажать на кнопку Показать все продукты, то фильтры
на категории продуктов будут сняты, а на странице показаны карточки всех продуктов
из БД (рис. 4.54).

Если в шаблоне 1оо1Ьаг_ир.К1т1 в карточке продукта щелкнуть левой кнопкой мыши
на наименовании продукта, то откроется шаблон ргос1ис1_с1е1а|1_1.И1т1, в котором будет
показана полноразмерная фотография продукта и его полное описание (рис. 4.55).

© Назад

Наименование продукта - Судак

Цена - Р280ДО

Описание продукта

Судак горячего копчения. На развес. Цена указана за 1 кг.

Рис. 4.55. Шаблон ргос1ис1_с1е1аН_1.Н1т1 с фотографией и полным описанием продукта

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

В этой главе приведена общая информация о древовидном представлении данных
в В)ап§о и показаны примеры программного кода для создания древовидных струк-
тур — эти программные модули вы можете встраивать в свои проекты.

В следующей главе мы рассмотрим не менее важные вопросы использования модаль-
ных окон при разработке интерфейса взаимодействия пользователей с удаленными
базами данных.
ГЛАВА 5

Библиотека НТМХ: модальные окна
для ввода и корректировки данных

Модальные (всплывающие) окна — это очень популярный элемент интерфейса совре-
менных сайтов. Он может использоваться для вывода различного контента веб-стра-
ниц — такого, например, как формы (обратной связи, регистрации, авторизации), блоки
рекламной информации, изображения, уведомления и др. В большинстве случаев мо-
дальные окна создаются на 1ауа8спр1. Но их можно создать не только с помощью
1ауа8спр1, но и с использованием специальной библиотеки НТМХ. Использованию
этой библиотеки в шаблонах В)ап§о и посвящена эта глава, из материала которой вы
узнаете:

♦	о преимуществах использования библиотеки НТМХ в шаблонах В)ап§о;

♦	о том, как с ее помощью создаются программные модули для ввода и корректировки
данных в модальных окнах.

Для многих код примеров этой главы с первого прочтения может показаться трудным и
запутанным. Однако не стоит отчаиваться — надо просто сесть за компьютер и после-
довательно набрать и выполнить все приведенные здесь фрагменты программного кода.
Да действительно, программировать интерфейс на основе модальных окон сложнее,
чем на базе традиционных шаблонов В)ап§о. Но итоговый результат будет более удо-
бен и привлекателен для конечных пользователей, а ведь именно для них создаются
сайты. Если же вам удастся осмыслить изложенный здесь материал и разобраться,
каким образом формируются модальные окна, то можно считать, что перед вами от-
кроются дополнительные двери в сложный, но весьма увлекательный мир веб-про-
граммирования.

5.1.	Библиотека НТМХ

При вводе и корректировке данных пользователь чувствует себя более комфортно,
когда основная страница с информацией об объектах не закрывается, а форма для ввода
и корректировки данных появляется в виде модального окна, расположенного над
основной страницей. Это можно реализовать с использованием специальных скриптов,
задействовав в шаблонах элементы представленной в 2020 году программистом Карсо-
ном Гроссом 1ауа8спр1-библиотеки НТМЬ, позволяющей создавать современные веб-
интерфейсы с помощью обычного кода НТМЬ.
Существующие веб-приложения можно условно поделить на две большие группы:

♦	многостраничные приложения (МиШ-Ра§е АррИсаПоп, МРА).

МРА-приложения обновляют всю страницу при каждом взаимодействии пользова-
теля с ней. При этом подходе состояние страницы обычно контролируется сервером.
Однако перезагрузка страницы при каждом изменении может замедлять работу при-
ложения;

♦	одностраничные приложения (8т^1е-Ра^е АррНсаНоп, АРА).

В этих приложениях управление состоянием страниц осуществляется с помощью
кода 1ауа8спр1, выполняющегося в браузере. БРА-приложения взаимодействуют
с сервером посредством вызовов АР1, возвращающих данные обычно в формате
1БОК После чего приложение обновляет интерфейс, не перезагружая страницу
целиком.

Несмотря на очевидные плюсы БРА, у этой модели есть недостаток, с которым не все
готовы мириться, — высокая сложность. Чтобы БРА работало как надо, браузер должен
загрузить и выполнить несколько файлов 1ауаБспр1. Из-за этого БРА могут «тормо-
зить» и задействовать много памяти, особенно если программные модули плохо опти-
мизированы и каждую секунду забрасывают сервер десятками запросов.

Библиотека НТМХ — это попытка уйти от указанных проблем, сохранив при этом со-
временную функциональность приложений. Она позволяет достичь тех же целей, что и
популярные фреймворки, но более простым путем, поскольку предоставляет возмож-
ность создавать динамичные веб-интерфейсы, ориентируясь только на НТМЕ — с ми-
нимальным использованием кода 1ауаБспр1. Плюсы этого подхода заключаются в том,
что мы можем запускать интерактивные элементы, написанные с помощью 1АХ, СББ
Тгапзйюпз, А^еЬБоске18 и Бегуег Беп! Еуеп18, прямо из НТМЬ-кода.

Библиотека НТМХ сохраняет преимущества БРА, не требуя полной перезагрузки стра-
ницы, и в то же время по простоте она ближе к МРА. В предлагаемой этой библиотекой
модели рендеринг страницы происходит на сервере, а клиенту передается уже готовый
НТМБ-код, который затем встраивается в нужное место сайта. Браузеру при этом
не нужно ничего интерпретировать и визуализировать — все эти вычисления берет на
себя сервер. Такой подход облегчает процесс разработки за счет упрощения кода на
стороне клиента.

Пример схемы взаимодействия представлений (ухеду) с шаблонами при использовании
библиотеки НТМХ для реализации модальных окон при вводе и корректировке данных
в процессе формирования списка объектов представлен на рис. 5.1.

При такой реализации интерфейса взаимодействия пользователя с приложением в окне
браузера пользователю всегда отображается только одна страница — 1пс1ех_оЬ].И1т1.
В эту страницу встроено несколько блоков:

♦	блок показа списка объектов из БД (виден постоянно);

♦	блок показа модальных окон (скрыт);

♦	блок показа сообщений (скрыт).

По мере взаимодействия пользователя с приложением страница 1пс1ех_оЬ].И1т1 всегда
находится в окне браузера. А поверх нее появляются модальные окна в блоках показа
модальных окон и показа сообщений. Сами тексты сообщений формируются в соответ-
ствующих представлениях: добавления объекта в БД (аег ааа_оьД, редактирования
Рис. 5.1. Схема взаимодействия представлений (у|е\л/) с шаблонами
при использовании библиотеки НТМХ

(обновления) сведений об объекте (аег есПг_оьД, подтверждения или отмены удаления
объекта ИЗ БД (беГ гетиуез>^_сопНгтаТ1оп), удаления объекта ИЗ БД (ае^ гетиуе_оЬД.

Рассмотрим далее использование библиотеки НТМХ с модулями ввода и редактирова-
ния сведений о клиентах сайта (это могут быть клиенты интернет-магазина, онлайн-
библиотеки, социальной сети и т. и.).

5.2.	Ввод и редактирования сведений о клиентах сайта
с модальными окнами на основе библиотеки НТМХ

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

Создадим для нашего примера функцию гепате_ГоГо_сИепг, обеспечивающую изменение
имени файла с фотографией клиента, и модель для хранения данных о клиентах сиепгз
(листинг 5.1).
Пояснение

Поскольку публичные серверы, работающие на Шлих, не принимают файлы с именами на
кириллице, использование этой функции позволит автоматически переименовывать такие
файлы. В результате имя файла с фотографиями клиентов получит следующую структуру:
сНеп1<!с1 клиента в БД>.]рд.

Листинг 5.1. Код функции гепате ТоТо сНеп! и модели СНеп(8

# функция изменения имени файла с фото клиента #

бек гепате_коко_скбепк(бпзкапсе, кккепате):
иркоаб_ко = 'коко_сккепк'

ехк = кйкепате.зркйк('.')[-1]

п_гес = 1еп(СИепТз.оЬдесТз.а11 ())

#	получить бб последней записи из модели клиента

бк п_гес == 0:

тах_гес = 0

е1зе:

тах_гес = Сббепкз .оЬдескз .а!1 () . базк() .66

тах_бб = тах_гес + 1 #бб следующей записи
рйоко = 'сИепТ_' + зкг(тах_бб)
бк бпзкапсе.рк: # текущий Ю

кббепате = ’{}{}•{}’• когтак (1 скбепк_', бпзкапсе .рк, ехк)

екбк рйоко: # имя файла - текущий Ю + 1
кббепате = '{}•{}'• когтак (рйоко, ехк)
е1зе: # случайное имя файла

кПепате = '{}{}.{}’. когтак (1 сИепк_', ииб64().Нех, ехк)

#	возвращает полный путь к файлу

гекигп оз.ракй.докп(ир!оас1_ко, кббепате)

################################################
# Клиенты - модель для отладки модальных окон #
################################################
сказз Сббепкз (тобебз .Мобеб) :

пате = тобебз.СйагЕбе66(тах_бепдкб1=50, чегЬозе_пате=”Имя и фамилия”)

аде = тобебз. 8та66бпкедегЕбе66(чегЬозе_пате="Возраст")

аЬоик = тобебз.СйагЕбе66(тах_6епдкй=500, чегЬозе_пате=”0 клиенте")

#	здесь гепате_коко_сИепк - имя функции, где изображению присваивается новое имя
таде = тобебз. 1тадеЕбе66(ир6оа6_ко=гепате_коко_с6бепк, Ыапк=Тгие,

чегЬозе_пате="Фото клиента")
оЬ]ескз = тобебз.Мападег

бек __зкг__(зекк) :

гекигп зкг(зекк.пате)

В этой модели для класса сккепкз созданы следующие поля:

♦	пате — имя клиента (имя и фамилия);

♦	абде — возраст клиента;
♦	аЬоиг — сведения о клиенте;

♦ лпаде — изображение (фото клиента).

Мы не предполагаем заполнять данные о клиентах через административную панель
В)ап§о, поэтому не станем регистрировать модель сиеызз в модуле ас1т1п.ру.

Не забудьте теперь выполнить процедуру миграции:

руПюп тападе.ру такетгдгаГгопз

руйюп тападе.ру тгдгаке

Для ввода и корректировки данных о клиентах необходимо на основе модели сиепи
создать форму, код которого приведен в листинге 5.2.

Листинг 5.2. Форма СНеп(§Еогт

Ггот .тос!е1з нпрогГ СПепГз

#######################################
# форма для ввода сведений о клиентах #

#######################################

с1азз СИепЕЕогт(Еогтз .Мос1е1Гогт) :

с!азз Мера:

тойе! = СИепГз

ПеМз = ’____а!1__'

# назначаем полю другой виджет
мМдеЕз = {’аЬоиЕ’: Еогтз .ТехРагеа}

В этой форме при вводе данных будут отображаться все поля модели сиепгз, при этом
полю аЬоиЕ (сведения о клиентах) назначен специальный виджет — ТехРагеа.

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

Чтобы показать страницу с редактором списка клиентов, необходимо в главном меню
сайта или на любой его странице создать соответствующую ссылку (листинг 5.3).

Листинг 5.3. Ссылка для вызова редактора списка клиентов

<а йгеЕ=’’{% иг! 'тазЕег: есИР_сИепРз’ %}” ЕагдеЕ =”_Ь1апк”>Редактор списка клиентов</а>

По этой ссылке активируется ИКЪ-маршрут есиг_с11епгз (листинг 5.4).

Листинг 5.4. 11КЬ-маршрут есШсНегИз

# показать список клиентов для редактирования

раГЬ. (’ есИР_сИепРз ', чгемз. есИГ_с11епГз, пате=1 есИР_сИепРз ’),

По этому маршруту вызывается представление есИЕ_сИепЕз (листинг 5.5).
Листинг 5.5. Представление ес1К_сНеп(8

###################################

# Редактор клиентов #

###################################

Неб есПб_сИепбз (гедиезб) :

геРигп гепбег(гедиезб, ' тазбег/д1ача_5/ес11б_с11епбз.Нбт!', {})

Это очень простое представление, которое активирует отображение шаблона есМ
сНеп18.И1т1 (листинг 5.6).

Листинг 5.6. Шаблон есН1_сНеп18.К1:т1

{% ехбепбз "зЬор/базе.Нбт!" %}

{% 1оаб збабгс %}

{% Ыоск сопбепб%}

<Ьобу>

<сПу с!азз="сопба1пег">

<сИч с1азз="гом рх-5 ту-2 бехб-збагб">

СсПч с!азз="со1-2">

<!— Кнопка добавить новый объект —>

сЬиббоп Их-деб="{% иг1 'тазбег:абб_с11епб' %}"

Их-багдеб="#сПа1од"

с!азз="Ьбп Ьбп-рг1тагу">

<1 с1азз="Ы Ы-Ьад-р1из"></1> Добавить клиента

</Ьиббоп>

</сИу>

«Цу с1азз="со1-8">

<ИЗ>Список клиентов</ИЗ>

</сПч>

</с11у>

<сИу с1азз="гом Рехб-сепбег">

<сПу с1азз="со1-8">

<!—Начало таблицы со списком объектов —>

<баЬ1е с1азз="баЬ1е бехб-збагб баЫе-збгтрес! баЫе-Ьогбегес! Ьогбег-багк ту-2">

<!—Заголовок таблицы —>

<бИеаб>

<бг>

<бИ>№пп</бИ>

<6И>ФИО клиента</бб>

<бб>Фото клиента</бН>

<бИ>Возраст</бИ>

<бИ>Действия</бИ>

</бг>

</бИеаб>

<!— Начало тела таблицы с загрузкой списка объектов с помощью НТМХ —>

<бЬобу Их-бг1ддег="1оас1, ЬоокЫзбСНапдеб Тгош:Ьобу"

Их-деб="{% иг! 'тазбег:с11епб_ТИ1' %}"
Их-багдеб="бЫз">
<Ьг>

<Ы с1азз="зр1ппег-Ьогбег" го1е="зЬа11из">

<зрап с1азз=”у1зиа11у-к1с1с1еп">3агрузка.. .</зрап>

</Ы>

</Бг>

</БЬос1у> <!— Конец тела таблицы —>

</баЫе> <!— Конец таблицы со списком объектов —>

</сИу> <!—Конец таблицы со списком объектов —>

</б1У>

</с1гу>

<!— Блок для показа модального окна —>

<61V 16="люба!" с1азз=”гоо6а1 Та6е">

<сНу 16="61а1од" с1азз="то6а1-61а1од" 1лх-Рагдеб=,'бк1з”></с11у>

</сНу>

<!— Конец блока для показа модального окна —>

<!— Блок для показа модального окна с сообщениями (в центре текущей страницы) —>

<сНу с1азз="ЬоазЬ-сопЬа1пег Бор-50 зЬагб-50 Ьгапз1аЬе-т1661е р-3”>

<61V 16=”Боазб” с1азз=”боазб аИдп-Иетз-сепбег ЬехЬ-мЫЬе Бз-3 Ьд-зиссезз" го1е="а1егЬ"

аг1а-Иуе="аззегЫуе"
аг1а-аЬого1с="Ьгие">

<с11у с1азз="6-Т1ех">

<с11У 16="ЬоазЬ-Ьо6у" с1азз="ЬоазЬ-Ьобу"></Ыу>

<ЬиЫоп Ьуре="ЬиЬЬоп" с1азз="Ып-с1озе Ыт-с1озе-юМЬе те-2 го-аибо"
6аЬа-Ьз-Ызт1зз="ЬоазЬ" аг1а-1аЬе1="Закрыть"></Ьиббоп>

</с1Г7>

</с1Г7>

</Й1У>

<!— Конец модального окна для показа сообщений —>

<!— Скрипты: НТМХ и НауаБсггрЬ —>

<зсг1рб

згс="ИЬЬрз ://с6п^збеИуг .пеЬ/прт/ЬооЬзЬгарОб.1.3/61зк/]з/Ьоокзкгар.Ьип61е.т1п.]з"></зсг1рб>

<зсг1рб згс="ИЬЬрз: //ипркд. сот/Ыдпх. огд@1.6.1/ЫзЬ/ИБтх .тп. д з"х/зсг1рб>

<зсг1рб>

; (ТипсЫоп () {

сопзб гооба! = нем Ьоокзкгар.Моба!(боситепк.деЬЕ1етепкВу16( "гооба!"))

Иктх.оп("Иктх:а!кег8мар", (е) => {

// Кезропзе ЬагдеЫпд #Ыа1од => зИом ЬИе гооба!

1Т (е.беЬаН.Ьагдеб.Ы == "сНаТод") {
тоба!.зИом()

}

})

ИЬтх.оп("ИЬтх:ЬеТоге8мар", (е) => {

// Егорку гезропзе ЬагдеЫпд #Ыа1од => Ыбе Ыле гооба!

1Т (е.бекаН.ЬагдеЬ.Ы == "сНаТод" && !е.бекаП.хИг.гезропзе) {
гооба!. Мбе ()
е. бебаН. зЬои1бЗмар = ба!зе
}

})

// Нешоуе сНа1од сопбепб аббег Ыббпд

Ьбтх.оп("Мббеп.Ьз.тоба!", 0 => {

боситепб.дебЕ1етепбВу1б ("ббабод") .бппегНТМЬ = ""
})

}) О

</зсгбрб>

<ЗСГ1рб>

; (бипсббоп () {

сопзб боазбЕ1ешепб = боситепб.дебЕ1етепбВу1б("боазб’')

сопзб боазбВобу = боситепб.дебЕ1етепбВу1б("боазб-Ьобу”)

сопзб боазб = пем Ьообзбгар.Тоазб(боазбЕ1етепб, { бе!ау: 2000 })

Ьбтх.оп("збомМеззаде", (е) => {
боазбВобу.бппегТехб = е.бебаИ.уабие
боазб.збом()

})

}) О

</зсгбрб>

<!— Конец скриптов: НТМХ и бауаВсгбрб —>

</Ьобу>

{% епбЫоск сопбепб %}

В программном коде шаблона ес1И_сНеп18.И1т1 присутствуют несколько блоков:

♦ кнопка добавить клиента, обеспечивающая вызов модального окна для добавления
в БД нового объекта. Эта кнопка является элементом библиотеки НТМХ и имеет
следующие атрибуты:

•	Ьх-деб="{% иг1 'шазбег :абб_сИепб' %}" — отправляет СгЕТ-запрос на указанный ИКЕ-
маршрут (для вызова представления добавления нового клиента);

•	Их-Рагдеб="#сПа1од" — идентификатор модального окна, в котором будет показана
форма для ввода данных о новом клиенте;

•	Ыазз="Ып Ып-ргшагу" — класс для задания цвета кнопки;

•	<1 с1азз="Ы ы-Ьад-р1из"></1> — класс для задания значка для кнопки;

♦	заголовок таблицы, в которую будет помещен список объектов, вызванных из БД;

♦	блок загрузки списка объектов с помощью НТМХ со следующими атрибутами:

•	Ьх-бг1ддег="1оаб, ЬоокЫзбСНапдеб ГгопкЬобу" — Триггер, Запускающий загрузку спи-
ска клиентов;

•	Ьх-деб="{% иг! 'шазбег :сИепб_ШГ %}" — Отправляет СгЕТ-ЗапрОС на указанный
адрес (ИКЕ) для заполнения таблицы со списком клиентов (маршрут для вызова
представления загрузки списка клиентов из БД);
•	Их-багдеб="бЫз" — ключевое слово, указывающее, что элемент, на котором нахо-
дится атрибут, является целевым;

♦	блок для показа модального окна с идентификатором 1а=”сИа1од" (форма для ввода
и корректировки данных об объекте);

♦	блок для показа модального окна с сообщениями о завершении операций ввода
и редактирования данных (в центре текущей страницы);

♦	скрипты НТМХ и 1ауа8спр1, обеспечивающие отображение и скрытие модальных
окон.

На странице шаблона ес1И_сНеп18.И1т1 предусмотрена таблица, в которой отображается
список клиентов. Для этой таблицы сформирован статичный заголовок, но тело табли-
цы— ее строки — формируется динамически. Заполнение таблицы данными из БД
обеспечивает следующий фрагмент программного кода:

<!— Начало тела таблицы с загрузкой списка объектов с помощью НТМХ —>

<бЬобу Их-бг1ддег="1оаб, ЬоокЫзбСНапдеб бгот:Ьос!у"

Их-деб="{% иг! 'тазбег:сИепб_бШ1 %}"
Их-багдеб=”бЫз ">

<бг>

<66 с1азз="зр1ппег-Ьогбег" го1е="збабиз">

<зрап с1азз="ч1зиа11у-Ы66еп">Загрузка.. .</зрап>

</Ы>

</бг>

</6Ьобу> <!— Конец тела таблицы —>

Здесь с использованием библиотеки НТМХ активируется ЦКЬ-маршрут тазбег :сИепб_Ш1
(листинг 5.7), вызывающий представление для заполнения таблицы данными из БД.

Листинг 5.7. ЫНЬ-маршрут сНеп1_й11

#	заполнить список клиентов данными из БД

рабб (’ с11епб_ТП1/’, чтемз. с11епб_Т111, паше=' с11епб_бН1’),

По этому маршруту вызывается представление сИепб бИ (листинг 5.8).

Листинг 5.8. Представление сНеп1_й11

##################################

#	загрузка из БД списка клиентов #

##################################

Неб с11епб_БП1 (гедиезб) :

сИепбз = СИепбз .оЬдесбз . а!1 ()

гебигп гепбег (гедиезб, ’тазбег/д1ача_5/с11епб_Н11.Ьбт1’, {'сИепбз': сИепбз})

Здесь в объект сИепбз загружается полный список клиентов из БД, после чего вызы-
вается шаблон сНеп1_Л11.И1т1 (листинг 5.9), в который в качестве контекста передается
словарь со списком клиентов.
Листинг 5.9. Шаблон сНеп1_ЛН.К1т1

{# шаблон с11епб_6111.Ьбт1 #}

{% бог сИепб 1п сИепбз %}

<бг 1б="сИепб-{ { сИепб. 16 }}" с1азз="сИепб-гом">

<бс!> {{богбоор. соипбег}} </бб>

{#<бс!> {{ сИепб. пате }} </бс!>#}

<бс!>

<!— Ссылка на ФИО клиента (показать детали)—>

<а Игеб="#"

Их-деб="{% иг! 'шазбег:зНом_с11епб' 16=с11епб.16 %}"

Ьх-багдеб="#сПа1од">

<1 с1азз="Ы-зеагск"></1>

{{ сИепб. паше }}

</а>

</бб>

{% И сИепб. бшаде %}

<бб><1шд згс="{{ сИепб. бтаде. иг 1 }}" а!б="соппесб" збу1е="шах-Ье1д]1б: 100рх"></бс1>

{% е!зе %}

<бс!>Нет фото</бс!>

{% епбИ %}

<6Ы>{{ сИепб. аде }}</бс!>

<бс!>

<!— Кнопка показать детали как отдельная кнопка —>

<Ьиббоп с!азз="Ьбп Ьбп-ргбшагу Ьбп-зш"

Ьх-деб="{% иг! 'шазбег: есИб_сИепб' к1=сИепб. 16 %}"

Ьх-багдеб="#сНа1од">

<1 с1азз="Ы-зеагсЬ"></1> Изменить

</Ьиббоп>

<Ьиббоп с!азз="Ьбп Ьбп-бапдег Ьбп-зт"

кх-деб="{% иг! 'шазбег:с!е1_с11епб_уезпо' тсксИепб.М %}"
кх-багдеб="#сНа1од">

<1 с1азз="Ы-бгазИЗ"></1> Удалить

</Ьиббоп>

</бг>

{% епббог %}

В этом шаблоне создан цикл, где в тело таблицы вставляются строки с информацией
о каждом объекте — в нашем случае о клиенте. Таким образом, два шаблона:
ес1И_сНеп18.И1т1 и сНеп1_ЛН.И1т1 — работают в связке: первый отображает список клиентов
в виде таблицы, а второй заполняет таблицу данными из БД.
5.2.3.	Модули для добавления клиентов в БД

В шаблоне ес1И_сНеп18.И1т1 имеется кнопка Добавить клиента, с которой связана сле-
дующая ссылка:

Ьх-деб="{% иг1 'тазбег:абб_сббепб' %}"

По нажатию на эту кнопку активируется ИВП-маршрут абб_сббепб (листинг 5.10).

Листинг 5.10. ЫНЬ-маршрут аббсНеп!

# добавить нового клиента в БД

рабЬ (' абб_сббепб ', чбемз. абб_сббепб, пате=' ас!с1_с 11 еп1в ’),

По этому маршруту вызывается представление абб_сббепб (листинг 5.11).

Листинг 5.11. Представление ас1с1_сНеп(

бгот .тобебз бтрогб Сббепбз
бгот . богтз бтрогб СббепбЕогт
# импорт для модальных окон НТМХ
трог Б ^зоп

Егот бдапдо.Ьррр бтрогб НббрРезропзе

Егот сЦапдо.угемз.бесогабогз.ИББр бтрогб гедибге_РОЗТ

##############################################
# добавление нового клиента в модальном окне #
##############################################
беб абб_сббепб (гедиезб) :

# возврат после ввода данных

бб гедиезб.теббоб == "РОЗТ":

Тот = СббепбЕогт (гедиезб.РОЗТ, гедиезб.ПЬЕЗ)

бб богт.бз_чаббб() :

#	создание в БД новой записи об объекте

сббепб = Сббепбз.оЬдесбз.сгеабе (

пате=богт.сбеапеб_баба.деб('пате'),

бтаде=богт.сбеапеб_баба.деб('бтаде'),

аде=богт.сбеапеб_баба.деб('аде'),

аЬоиб=богт.сбеапеб_баба.деб('абоиб'))

#	выдача сообщения об успешном завершении ввода данных
гебигп НббрКезропзе(збабиз=204, Неабегз={

'НХ-Тгбддег': ^зоп.битрз ({"ЬоокЬбзбСИапдеб": Боне,

"збомМеззаде": б"{сббепб.пате} - добавлен в БД."})
})
е!зе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, 'тазбег/дбача_5/сббепб_богт.11бтб', {'богт': богт})
ебзе:

#	Формирование формы для ввода данных
богт = СббепбЕогт()

# загрузка шаблона с формой для ввода данных

гебигп гепбег(гедиезб, 'тазбег/д1ауа_5/с1бепб_богт.Нбт1', {'богт': богт})
В этом представлении на основе класса сиепт™ создается объект-форма Рогт, после
чего вызывается созданный с использованием элементов библиотеки НТМХ шаблон-
форма сНеп1_(опп.И1т1 (листинг 5.12), в который передается пустая форма Рогт в виде
словаря. Обратите внимание, что кроме импорта модели СИепбз и формы сиепггот здесь
импортированы еще три библиотеки: ^зоп, НРРрКезропзе И гедиРге_РО8Т.

Листинг 5.12. Шаблон-форма сНеп(_Тогт.Гйт1

<Рогт Ьх-розб=”{{ гедиезб.раРН }}"

Ьх-Ьеабегз=' {”Х-С8КЕТокеп" : " {{ сзгР_Рокеп }}"}'

Ьх-епсосПпд= ’тиРРРрагР/Рогт-баба'
с1азз=”тоба1-сопбепР”>

<!— Заголовок формы —>

<сПу с1азз=”тоба1-Ьеабег”>

<Ь5 с1азз=”тоба1-РРР1е”>Сведения о клиенте</Н5>

<Ьиббоп Руре=”Ьиббоп” с1азз="ЬРп-с1озе" баба-Ьз-бРзтРзз=”тоба1” агРа-1аЬе1="С1озе"></ЬиРРоп>

</сНу>

<!— Тело формы с полями в виде таблицы с одной колонкой —>

<сНу с1азз=”тоба1-Ьобу">

<РаЫе>

{{ Рогт }}

</РаЫе>

</сИу>

<!— Подвал формы —>

<сПу с1азз=”тоба1-Рообег”>

сЬиббоп Руре="ЬиРРоп" с1азз="ЬРп ЬРп-зесопбагу"

баба-Ь з - сП зт! з з=”тос!а 1" >

<1 с1азз=”Ы-гер1у”></1> Выход

</Ьиббоп>

<Ьиббоп Руре=”зиЬтРР” с1азз="Ыт Ыт-рг1тагу"><1 с1азз=”Ы-Ьад-р1из"></1> Сохранить</Ьиббоп>

</сПу>

</Рогт>

Форма этого шаблона имеет атрибут Ьх-епсобРпд='ти1РРрагб/Рогт-с1аРа', который обеспечи-
вает передачу в представление файлов (фото клиентов), и атрибут с1азз=нтоба1-
сопбепб" — т. е. класс, задающий отображение формы в модальном окне.

Модальная форма содержит три блока:

♦	заголовок формы;

♦	тело формы;

♦	подвал формы.

В заголовке формы присутствует кнопка ”С1озе” вида К для закрытия модального окна.
Тело формы представляет собой таблицу, состоящую из одной колонки, в которой ото-
бражаются поля модели для ввода данных. В подвале формы присутствуют две кнопки:
выход— для закрытия окна без сохранения данных и сохранить — для закрытия окна
с сохранением данных.

На странице сНеп1_Л11.И1т1 должны также присутствовать две кнопки: изменить и удалить,
и ссылка фио клиента. Эти кнопки и ссылка обеспечивают выполнение следующих дей-
ствий:

♦	кнопка изменить — вызывает модальное окно для редактирования сведений о клиенте;

♦	кнопка Удалить — вызывает модальное окно для подтверждения удаления сведений
о клиенте из БД;

♦	ссылка в колонке фио клиента — показывает модальное окно с полными сведениями
о клиенте.

Для выполнения действий по этим кнопкам и ссылке необходимо написать программ-
ный код — в противном случае шаблон есИ1_сНеп18.И1т1 не будет работать корректно.

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

В шаблоне сНеп1_ЛН.И1т1 с кнопкой изменить связана следующая ссылка:

Ьх-деб="{% иг! 'шазбег :есПб_сИепб' л.с1=сИепб. 1(1 %}"

По нажатию на эту кнопку активируется ИКЬ-маршрут есПб_сИепб (листинг 5.13), в ко-
торый передается идентификатор текущего клиента (Ьс1=сИепб.1с1).

Листинг 5.13. ЫНЬ-маршрут есШ сНеп!

# редактировать данные о клиенте в БД

рабЬ (' есИб_сИепб/<1пб: 1с1>/', чЬемз. есПб_сИепб, паше=' есНб_сИепб'),

По этому маршруту вызывается представление е<Нб_сИепб (листинг 5.14).

Листинг 5.14. Представление ес1й_сНеп(

####################################################
# Редактирование данных о клиенте в модальном окне #
####################################################
сЯеГ есИб_сИепб (гедиезб, 16):

#	получение сведений об объекте из БД
сИепб = деб_оЬдесб_ог_404 (СИепбз, 16=16)

#	возврат после корректировки данных

И гедиезб. те бЬоб == "РОЗТ":

Тот = СИепбЕогт(гедиезб.РОЗТ, гедиезб.ПЬЕЗ, 1п1б1а1={
' пате ’: сИепб. пате,
' бтаде': сИепб. бтаде,
'аде': сИепб.аде,
' абоиб' : сИепб. абоиб

})
бб богт.б5_чаббс1() :

#	получение сведений об объекте формы после корректировки данных

сббепб. пате = богт. с1еапеб_баба. деб (' пате')

сббепб.бтаде = богт.сбеапес!_(1аба.деб ('бтаде')

сббепб.аде = богт.с!еапеб_баба.деб ('аде')

сббепб.аЬоиб = богт.сбеапеб_баба.деб(’абоиб')

#	сохранение изменений об объекте в БД
сббепб.заче()

#	выдача сообщения об успешном завершении обновления данных
гебигп НббрКезропзе(збабиз=204,
йеабегз={'НХ-Тгбддег' : дзоп.сАитрз ({
"ЬоокЬбзбСИапдесГ: Боне,

"зйомМеззаде": б"{сббепб.пате} запись обновлена в БД."})

})

ебзе:

#	возврат к форме для исправления ошибок

гебигп гепбег(гедиезб, 'тазбег/дбача_5/сббепб_богт.Ьбтб',

{'богт': богт, 'сббепб': сббепб})
ебзе:

#	загрузка в форму сведений об объекте

богт = СббепбЕогт(бпзбапсе=сббепб)

#	загрузка шаблона с формой для корректировки данных

гебигп гепбег(гедиезб, 'тазбег/дбача_5/сббепб_богт.Ьбтб', {'богт': богт, 'сббепб': сббепб})

В это представление передается идентификатор клиента (бб) и создается объект сббепб,
в который из БД загружаются сведения об этом клиенте. После чего на основе класса
СббепбЕогт создается объект-форма (бота), в которую через объект сббепб передаются все
сведения о клиенте. Оба объекта: бота и сббепб — через словарь передаются в шаблон
с1|еп1_Тогт.Мт1, который уже был использован нами для ввода данных о новом клиенте.
После загрузки этого шаблона в нем отображаются все текущие сведения о клиенте.

В этом окне можно скорректировать данные о клиенте — например, изменить его воз-
раст. По нажатию на кнопку сохранить пользователю будет выдано модальное окно
с информацией об успешном завершении корректировки данных.

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

В шаблоне сНеп1_ЛН.И1т1 с кнопкой удалить связана следующая ссылка:

йх-деб="{% игб 'тазбег :с!еб_сббепб_уезпо' бсксббепб.бс1 %}"

По нажатию на эту кнопку активируется ИВЪ-маршрут аеб сббепб уезпо (листинг 5.15),
в который передается идентификатор текущего клиента (ба=сббепб.бс1).

Листинг 5.15. 11К1_-маршрут с1е1_сНеп1_уе8по

#	подтвердить/отменить удаление клиента из БД

рабй (' с!еб_сббепб_уезпо/<бпб: бс!>/', чбемз. с!еб_сббепб_уезпо, пате=' с!еб_сббепб_уезпо'),
По этому маршруту вызывается представление бе1_сИепб_уезпо (листинг 5.16).

Листинг 5.16. Представление с1е1_сПеп1_уе8по

#	Модальное окно подтверждения удаления клиента #

(ТеГ 6е1_сИепб_уезпо (гедиезб, 1с1) :

#	получение сведений об объекте из БД

сИепб = деб_оЬдесб_ог_404 (СИепбз, 16=1(1)

#	загрузка шаблона с формой для подтверждения удаления объекта из БД

гебигп гепбег (гедиезб, ’тазбег/д1ача_5/6е1_сИепб_уезпо.Ъбт1’, {'сИепб': сИепб})

Это представление получает идентификатор клиента (и), и в объект сИепб загружаются
из БД сведения о нем. Эти сведения в виде словаря передаются в шаблон с1е1_сНеп1_
уезпо.Ыт! (листинг 5.17).

Листинг 5.17. Шаблон с1е1_сНеп1_уе8по.Ыт1

<61ч с!азз="тоба1-сопбепб">

<61ч с1азз="тоба1-]1еа6ег”>

<Б5 с1азз="тоба1-б1б1е"Подтвердите удаление</Н5>

<Ьиббоп буре="Ьиббоп" с!азз="Ьбп-с1озе" 6аба-Ьз-61зт1зз="тоба1" агйа-1аЬе1=”С1озе”></Ьиббоп>

<	/сПч>

<61ч с1азз="тоба1-Ьобу">

<р>Удалить - {{сИепб. паше}} ?</р>

<р с1азз="бехб-тибеб">После подтверждения операции объект будет удален из БД</р>

</сПч>

<61ч с1азз="тоба1-бообег">

<Ьиббоп буре="Ьиббоп" с1азз="Ьбп Ьбп-зесопбагу"
баба-Ьз-сПзтйзз="тоба!">

<1 с1азз=”Ы-гер1у"></1> Отмена

</Ьиббоп>

<Ьиббоп буре="зиЬт!б" с!азз="Ьбп Ьбп-ргбтагу"

йх-розб = "{% иг! 'тазбег :6е1_сИепб' бс1=сИепб.Ш. %}"

Ьх-Ьеас1егз='{''Х-СЗКЕТокеп":"{{ сзгб_бокеп }}"}’ >

<1 с1азз=”Ы-бгаз113"></1> Удалить

</Ьиббоп>

</сПч>

</сПч>

В этом шаблоне отображаются две кнопки: отмена — для отмены удаления объекта и
удалить — для подтверждения удаления объекта.

С кнопкой удалить связана следующая ссылка:

йх-розб = "{% иг! 'тазбег:6е1_сИепб’ 16=сИепб.1б %}"

По этой ссылке активируется ИКЪ-маршрут беб сИепб (листинг 5.18), в который пере-
дается идентификатор удаляемого клиента (м=сИепб.1б).
Листинг 5.18. 11КЬ-маршрут с1е1_сНеп1

#	удалить клиента из БД

рабЬ (’ 6е1_с11епб/<1пб: 16>/', ч!емз. 6е1_сИепб, паше=' 6е1_сИепб'),

По этому маршруту вызывается представление бе1_сИепб (листинг 5.19).

Листинг 5.19. Представление с1е1_с1|еп(

#	###########################################################

#	Удаление клиента и выдача сообщения об успешном удалении #
############################################################
@гери1ге_Р08Т

беб 6е1_сИепб (гедиезб, 16):

#	получение сведений об объекте из БД

сИепб = деб_оЬдесб_ог_404 (СИепбз, 16=16)

#	удаление объекта из БД

сИепб. 6е1ебе ()

#	выдача сообщения об успешном удалении объекта из БД

гебигп НббрКезропзе(збабиз=204,

Ьеабегз= {’НХ-ТНддег' : дзоп.6итрз({
"ЬоокЫзбСЬапдеб": Иопе,
"зЬо^Меззаде": б"{сИепб.пате} - запись удалена из БД.”})
})

Это представление получает идентификатор удаляемого клиента (1б) и создает объект
сИепб, в который из БД загружаются сведения об удаляемом клиенте, после чего объект
сИепб удаляется из БД с использованием инструкции сИепб.бе1ебе(). Затем срабатывает
триггер библиотеки НТМХ, который в модальном окне выдает сообщение об успешном
удалении записи из БД. Таким образом, после нажатия на кнопку удалить сведения
о клиенте будут удалены из БД, а пользователю выдано модальное окно с информацией
об успешном завершении процедуры удаления данных.

5.2.6. Программируем модули

для показа подробных сведений о клиентах

В шаблоне сНеп1_ЛН.И1т1 тег показа фио клиента представлен в виде ссылки:

Ьх-деб="{% иг1 ’шазбег:зйом_сИепб' 16=сИепб.1б %}"

По этой ссылке активируется ПВЪ-маршрут зЬо^ сИепб (листинг 5.20), в который пере-
дается идентификатор клиента (1б=сИепб.1б).

Листинг 5.20. 11КЬ-маршрут зЬоиусНеп!

# показать полные данные о клиенте из БД

рабЬ('зйом_сИепб/<1пб:бб>/’, ч!емз.зИом_сИепб, паше='зЬою_сИепб’),

Этот маршрут вызывает представление зкж_сИепб (листинг 5.21).
Листинг 5.21. Представление 8Гюуу_сНеп1

############################################
# полные сведения клиента в модальном окне #
############################################
6еБ зЬом_с1Бепб (гедиезб, Бб) :

#	получение сведений об объекте из БД

сИепЁ = деб_оЬдесб_ог_404 (СББепбз, Б6=Б6)

#	загрузка в форму сведений об объекте

Богт = С1БепбЕогт(Бпзбапсе=с1Бепб)

сопбехб = {'Богт’: Богт, ’сББепб’: сББепб}

#	загрузка шаблона с формой для показа данных об объекте

гебигп гепбег(гедиезб, 'тазбег/д1ача_5/зНом_с1Бепб_Богт.Ьбт1', сопбехб)

Это представление получает идентификатор клиента (Бб) и создает объект сББепб,
в который загружает все сведения о клиенте, после чего на основе класса сиепбЕогт соз-
дается объект-форма Богт, и в эту форму загружаются сведения о клиенте. Затем фор-
мируется словарь сопбехб, который передается в шаблон-форму 8Иом_сНеп_1бгт.И1т1
(листинг 5.22).

Листинг 5.22. Шаблон-форма 8Ьо\л/_сНеп_Гогт.Ыт1

<!— форма в модальном окне —>

<Богт Ьх-розб=”{{ гедиезб.рабб }}"

Ьх-Ьеабегз=’{”Х-СЗКЕТокеп":"{{ сзгБ_бокеп }}"}'
с1азз=”тоба1-сопбепб">

<	!— Заголовок формы с кнопкой закрытия - X —>

<6Бч с1азз=”то6а1-Ьеабег”>

<Ь5 с1азз=”тоба1-бБб1е">Сведения о клиенте</Н5>

сЬиббоп буре=”Ьиббоп”

с1азз="Ьбп-с1озе"

6аба-Ьз-6БзтБзз=”то6а1”

агБа-1аЬе!="С1озе">

</Ьиббоп>

<	/6Бч>

<	!— Тело формы с полями только для чтения —>

<6Бч с1азз=”тоба1-Ьобу”>

<р><Бтд згс="{{ сББепб.Бтаде.игБ }}"
аБб=”соппесб”

с1азз="Бтд-Б1иБ6 тах-НеБдбб: 100%; мБббб: аибо;”>

</р>

<р>ФИО клиента - {{ сББепб.пате }}</р>

<р>Возраст - {{ сББепб.аде }}</р>

<р>Род занятий - {{ сББепб.аЬоиб }}</р>

</6Бч>
<!— Подвал формы с кнопкой выхода —>

<сНу с1азз="тос1а1-!ооГег">

<ЬиГГоп Гуре=”ЬиГГоп” с1азз="Ыт Ыт-зесопНагу"
йаТа-Ь з - сП зт! з з=”тос1а 1" >

<1 с1азз=”Ы-гер1у”></!> Выход

</ЬиВВоп>

</сИу>

</!огт>

Здесь с использованием атрибутов библиотеки НТМХ создается модальная форма,
включающая три блока:

♦	заголовок формы с кнопкой закрытия модального окна ”С1озе” вида Ж

♦	тело формы с отображением данных о клиенте;

♦	подвал формы с кнопкой закрытия модального окна.

Поля с данными о клиенте отображаются внутри тега <рх/р>, который обеспечивает
защиту данных от редактирования.

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

Итак, мы реализовали набор модулей и шаблонов для ввода и редактирования данных
о клиентах. Теперь посмотрим, как они работают.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 5 и перейти по ссылке Редак-
тор списка клиентов.

При первоначальной загрузке шаблон есИ_сНеп18.И1т1 в окне браузера будет выглядеть
так, как показано на рис. 5.2.

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

"УМНИК" - Учебные, Методические, Научные
Интерактивные Книги

‘ Домашняя Г 'Каталог ДО компании V Контакты Отзывы® Мастер 10 Тесты -

(21 Добавить клиента

Список клиентов

№пп	ФИО клиента	Фото клиента	Возраст	Действия

однопассникм

СорупдЫ © 5таН 1пТогт 5у51ет5. Ое$1дпес1 Ьу
Апа1о!у РобТоНТ

НАнимация ’

[ЭГасеЬотк

Го]
Таблица со списком клиентов пока пустая, т. к. в БД еще нет ни одной записи о клиен-
тах. В верхней строке окна имеется кнопка Добавить клиента — по нажатию на эту
кнопку будет показано модальное окно на базе шаблона-формы сНеп1_1:огт.И1т1
(рис. 5.3), где пользователь может ввести необходимые данные о себе (рис. 5.4). При
этом основное окно не исчезло с экрана, а показано с некоторым затемнением.

Рис. 5.3. Модальное окно на базе шаблона-формы сНеп1_Гогт.Н1т1 с пустыми полями

Рис. 5.4. Модальное окно на базе шаблона-формы сНеп1_Гогт.Н1т1 с введенными данными
№пп

Й Добавить клиента

Список клиентов

ФИО клиента

Фото клиента

Возраст

Действия

(5)ЧпьЬлушт

одноклассники

СорупдЫ: © 8таг1 [пТогт 5у51ет5. Ое^дпес! Ьу
Апа1о]у Ро51о1Н

Петр Петров -
добавлен в БД.

Рис. 5.5. Модальное окно с сообщением об успешном добавлении клиента в БД

По нажатию на кнопку Сохранить модальное окно закроется, и пользователь в новом
модальном окне (рис. 5.5) получит сообщение о том, что он успешно добавлен в БД.

Модальное окно с сообщением можно принудительно закрыть, нажав в нем на зна-
чок Ж Впрочем, если никаких действий не предпринимать, то через 1-2 секунды
это окно само закроется, а введенные данные будут показаны в таблице шаблона есШ_
сНеп18.И1т1 (рис. 5.6).

Рис. 5.6. Внешний вид шаблона есИ1_сНеп18.Н1т1 с введенными данными о клиенте

Если теперь в шаблоне ес1И_сНеп18.И1т1 нажать на кнопку Изменить, то откроется мо-
дальное окно на базе шаблона-формы сНеп1_(огт.И1т1 с полными сведениями о клиенте,
доступными для редактирования (рис. 5.7).

Изменим в этом шаблоне возраст клиента (заменим 35 на 37) и нажмем кнопку Сохра-
нить— появится модальное окно с сообщением об успешном изменении данных
о клиенте (рис. 5.8).

Когда всплывающее окно с сообщением закроется, мы увидим, что в таблице данные
о клиенте действительно обновились — его возраст теперь 37 лет (рис. 5.9).

Дополним список клиентов еще несколькими записями (рис. 5.10).

Как здесь можно видеть, в столбце ФИО клиента фамилия и имя клиента представле-
ны в виде ссылки, и если щелкнуть левой кнопкой мыши на этой ссылке, то откроется
модальное окно на базе шаблона-формы 8Кош_сНеп_(огт.И1т1 (рис. 5.11).
Рис. 5.7. Модальное окно на базе шаблона-формы сПеп1_Гогт.Мт1 с редактируемыми данными

Рис. 5.8. Модальное окно на базе шаблона ес1И_сНеп18.Н1т1 с сообщением об обновлении данных

б.Добавить
клиента

Список клиентов
№пп

@ Добавить
клиента

Список клиентов

ФИО клиента

Климов Игорь

Гетр Гетр об

С; Лука шкл на
Виктория

Житомирский
Владимир

Фото клиента

Действия

Ц Изменить

Й Удалить Д

Ц Изменить
Й Удалить Д

Рис. 5.10. Внешний вид шаблона ес1И_сНеп18.Н1т1 после добавления нескольких записей
Если в шаблоне ес1И_с1|еп18.И1т1 (см. рис. 5.10) нажать на кнопку Удалить, то откроется
модальное окно на основе шаблона с1е1_сНеп1_уе8по.И1т1 с просьбой о подтверждении
удаления сведений о клиенте (рис. 5.12).

Рис. 5.12. Модальное окно на базе шаблона формы с1е1_сНеп1_уе8по.Н1т1
с просьбой о подтверждении удаления записи

Если теперь в этом окне нажать на кнопку Удалить, то сведения о клиенте будут из БД
удалены, и пользователю выдано модальное окно с информацией об успешном завер-
шении удаления данных (рис. 5.13).

Когда модальное окно с сообщением об удалении записи закроется, в списке клиентов
строки с информацией об этом клиенте больше не будет (рис. 5.14).

Рис. 5.13. Модальное окно с сообщением об успешном удалении записи из БД
Список клиентов

© Добавить
клиента

Рис. 5.14. Список клиентов после удаления записи о клиенте Петр Петров

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

В этой главе приведены сведения о модальных окнах. Вы можете скачать коды пред-
ставленных здесь примеров и использовать их в своих проектах, где пользователи
взаимодействуют с удаленной базой данных (новостные сайты, блоги, интернет-
магазины и т. п.).

Говоря о сайтах для магазинов интернет-торговли, надо отметить, что это на сегодня
является, пожалуй, самой распространенной задачей, которую приходится решать веб-
разработчикам. В Интернете вы можете найти множество примеров кода для онлайн-
магазинов, но они, как правило, представляют собой лишь отдельные решения для не-
которых не связанных между собой фрагментов (создание БД для хранения сведений о
товарах, создание корзины и заказов, оплата заказа пластиковыми картами). Исходя из
этого, в следующей главе приведены примеры связанных модулей — от создания базы
данных с продаваемыми товарами до оплаты заказа пластиковыми картами.
ГЛАВА 6

Интернет-магазин

Для конечного пользователя важно иметь такой интернет-магазин, в котором он сам бы
смог заниматься его администрированием: изменять структуру справочника с катего-
риями продуктов, корректировать список товаров, менять фотографии, цены, остатки
на складе и т. п. — вплоть до изменения интерфейса страниц сайта. И выполнять все
эти действия через интерфейс личного кабинета сайта, не затрагивая программный код.
Именно такой магазин вы можете создать для своих клиентов, используя материалы
предыдущих глав и этой, из материалов которой станет понятно:

♦	как выполняется обмен данными между представлениями и шаблонами с использо-
ванием переменных сессии;

♦	как выполняется обмен данными между представлениями и шаблонами с использо-
ванием контекстных процессоров (без них не будут работать модули формирования
корзины и заказов);

♦	как можно в одной модели хранить информацию корзины, предварительного заказа
и покупок клиентов магазина;

♦	как создать индивидуальный магазин для каждого клиента сайта электронной тор-
говли;

♦	как отобразить категории продуктов в боковой панели страницы в виде свернутого
и раскрытого дерева;

♦	как отобразить категории продуктов в центральной панели страницы в виде мега-
меню;

♦	как создать программные модули для формирования корзины (предварительного
заказа);

♦	как создать программные модули для перевода корзины в предварительный заказ;

♦	как можно интегрировать интернет-магазин с платежной платформой КоЬоказза;

♦	как можно отладить взаимодействие сайта с ответами платежной платформы на
успех или ошибку оплаты заказа;

♦	как конечному пользователю показать информацию об оплаченных заказах и приоб-
ретенных товарах.

На первый взгляд — это простой набор не связанных модулей. Однако всё здесь не так
просто, как кажется, указанные опции — это фрагменты программных кодов реально
работающих в Интернете магазинов. Фактически они представляют собой кирпичики,
которые стыкуются между собой, и из них можно собирать полноценные сайты элек-
тронной коммерции.

6.1.	Обмен данными

между представлениями и шаблонами

В В)ап§о по умолчанию выборка данных из БД выполняется в представлениях, а затем
эти данные передаются в шаблон через контекстный словарь. Например:

сГеГ сИепЕ (гедиезЕ) :

сИепЕз = СИепЕз .оЬдесЕз .а!1 ()

сопЕехЕ = {' сИепСз ’: сИепЕз}

гебигп гепйег(гедиезЕ, 'с11епЕ_зком.ЕЕт1', сопЕехЕ)

Здесь в объект сИепЕз из БД помещается список всех клиентов, после чего список кли-
ентов загружается в словарь сопЕехЕ, который передается в шаблон с именем сНеп!_
8Ио\л/.И1т1, где эти данные и выводятся пользователю. Однако достаточно часто возни-
кают ситуации, когда данные, сформированные в одном представлении, нужно полу-
чить в других представлениях. Или когда данные, полученные в представлении, надо
сделать доступными во всех шаблонах приложения. Рассмотрим, какими способами
в В)ап§о реализован такой обмен данными.

6	.1.1. Обмен данными через сессии

Все взаимодействия между браузерами клиентов и публичными серверами осуществ-
ляются при помощи протокола НТТР, который не сохраняет свое состояние. Этот факт
означает, что сообщения между клиентом и сервером являются полностью независи-
мыми один от другого, — т. е. не существует какого-либо представления «последова-
тельности» или поведения в зависимости от предыдущих сообщений. В результате,
если вы хотите создать сайт, который будет отслеживать взаимодействие с клиентом
(браузером), вам нужно реализовать это самостоятельно.

Механизмом, который использует Э)ап§о для отслеживания «состояния» между сайтом
и каким-либо конкретным браузером пользователя, являются сессии. Они позволяют
хранить произвольные данные браузера и получать их в тот момент, когда между этим
браузером и сайтом устанавливается соединение. Данные получаются и сохраняются
в сессии при помощи соответствующего «ключа».

В)ап§о использует куки (сооМе), содержащие специальный идентификатор сессии, ко-
торый выделяет среди остальных каждый браузер и соответствующую сессию. Реаль-
ные данные сессии по умолчанию хранятся в базе данных сайта (это более безопасно,
чем сохранять данные в куки, где они могут быть уязвимы для злоумышленников).
Однако у вас есть возможность настроить В)ап§о так, чтобы сохранять данные сессий
в других местах (кеше, файлах, «безопасных» куки). Но все же хранение по умолчанию
является хорошей и безопасной возможностью.

Сессии становятся доступны в модулях приложения автоматически в тот момент, когда
было создано приложение. В разделах жтаъьео_аррз и мюоьешке конфигурационного
файла проекта 8ей1пд8.ру имеется следующий код:
1Е8ТАЬЬЕ0_АРР8 = [

’^апдо.сопГггЬ.зеззгопз',

МЮРЬЕИАКЕ = [

’ сЦ апдо. сопЕг1Ь. зеззгопз .тгскПемаге. ЗеззгопМгсШемаге',

Доступ к переменной сессии (зезз1оп) в любом представлении можно получить через
параметр гедиезР (нрЕрРедиезЕ передается как первый аргумент в каждое представление).
Переменная сессии всегда связана с определенным пользователем (или, если быть
более точным, с определенным браузером).

Переменная сессии (зезз1оп) является объектом-словарем, который служит для чтения и
записи неограниченное число раз. С ним вы можете выполнять любые стандартные
операции, включая очистку всех данных, проверку наличия ключа, циклы по данным
и пр. Далее представлены фрагменты кода, которые показывают, как задавать, получать
и удалять данные при помощи ключа, связанного с текущей сессией (с текущим брау-
зером):

#	Запомнить категорию товара в переменной сессии
гедиезЕ.зезз1оп[’1с1_саЕ’] = 1с1_са11

#	Получить категорию товара из переменной сессии

1с1_саЕ = гедиезЕ.зезз1оп['М-СаЕ']
# Очистить переменную сессии
с!е1 гедиезГ.зезз1оп[’1с1_са1:']

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

Теперь давайте рассмотрим способ доступа к некоторому блоку данных во всех шабло-
нах приложения с использованием контекстных процессоров.

Контекстные процессоры

Контекстные процессоры — это функции, которые позволяют добавлять определенные
данные в контекст каждого шаблона. Они используются, когда нужно сделать некоторые
данные доступными на всех страницах сайта.

Для создания контекстных процессоров нужно выполнить следующие действия:

♦	в каталоге приложения создать файл соп1ех1_ргосе88ог8.ру;

♦	написать простую функцию, которая принимает только гедиезР;

♦	в теле функции получить нужный набор данных и вернуть их в виде словаря;

♦	добавить созданный контекстный процессор в файл 8ей1пд8.ру.

Как правило, контекстные процессоры создаются для хранения данных, которые необ-
ходимо использовать на разных страницах сайта. Этими данными могут быть: сведения
о зарегистрированных пользователях сайта, категории товаров, корзина с предвари-
тельными заказами товаров или сформированный заказ клиента в интернет-магазине
и т. п. Более детально создание контекстных процессоров будет показано далее на при-
мере создания модулей электронной торговли интернет-магазина.
Гпава 6

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

В магазине электронной торговли каждый пользователь должен иметь личный кабинет
с такими индивидуальными данными, как номер телефона, адрес электронной почты,
почтовый адрес и т. п. Адрес электронной почты нужен для того, чтобы, например,
подтвердить клиенту почтовым сообщением факт оплаты товара банковской картой,
почтовый адрес — для доставки товара, номер телефона — для связи с курьером. Кро-
ме того, покупки в магазине электронной торговли одновременно делают множество
пользователей, и каждому из них нужна своя корзина и свои заказы. Исходя из этого,
каждый клиент магазина должен иметь личный кабинет, который, как правило, созда-
ется при регистрации. В этой книге мы не рассматриваем вопросы регистрации и иден-
тификации пользователей — как опытный программист, вы с ними должны быть уже
знакомы. Так что будем условно считать, что в системе есть один зарегистрированный
пользователь с известным идентификатором (это может быть 1(1=1, или 1с1=2, или хс1=3
и т. и.).

В предыдущих главах книги были созданы модели для хранения категорий продуктов
(сепге т) и самих продуктов (ргойпсг) — их мы и используем в этой главе. Для магазина
электронной торговли надо иметь еще несколько моделей: для корзины, для заказов
клиентов, для оплаченных покупок. Эти модели можно объединить в одну модель —
тогда данные не понадобится переносить из одной таблицы в другую, достаточно будет
изменять признак отнесения данных к корзине, к заказу или к покупке. Соответствую-
щий код модели для хранения корзины (заказа, покупки) Ргоаисг огаег приведен в лис-
тинге 6.1.

Листинг 6.1. Программный код модели Ргос1ис(_Огс1ег для корзины
(заказа, покупки)

Егот ^апдо.сопкгРЬ.аикЬ.тоЦеЗз лпрогк Узег

###################################

#	Заказы пользователя на продукты #

#	##################################

с1азз Ргос1иск_Огс1ег (тойеЕз .Мос1е1) :

изег = тойеЕз.ГогелдпКеу (Узел, оп_с!е1еке=тос1е1з .САЗСАБЕ)

пит_огс!ег = тос!е1з .ТехкЕ1е1с1(Ыапк=Тгие, пи11=Тгие)

зкакиз = тос!е1з. СЬагЕлеМ (тах_1епд1±=32, <1еЕаи1й= ’ сагЬ ’)

атоипк = тос!е1з . Еес1та1Е1е1с1(тах_с11д1к8=20, с!ес1та1_р1асез=2л Ыапк=Тгие, пи!1=Тгие)

сгеак1оп_с1аке = тос!е1з .ЕакеЕ1е1с1(аико_пом_а(1(1=Тгие)

с!аке_рау = тос!е1з .ЕакеЕ1е1Щаико_пом_ас1(1=Тгие, пи11=Тгие)

оЬдескз = тос!е1з .Мападег

с!азз Мека:

огйеглпд = [’рк’]
Интернет-магазин

Это достаточно упрощенная модель — она имеет минимальный набор следующих
полей:

♦	изег — пользователь (владелец личного кабинета магазина);

♦	пит огйег — номер заказа;

♦	згагиз — статус заказа;

♦	атоипг — стоимость заказа;

♦	сгеаПоп йаГе — дата создания заказа;

♦	ааге рау — дата оплаты заказа.

В этой модели поле изег ссылается на первичный ключ модели изег (зарегистрирован-
ный пользователь приложения). Полю зЕаГиз по умолчанию будет присвоено значение
саги — корзина, т. е. с этим статусом модель будет представлять корзину, в которой
пользователь может формировать предварительный заказ. Когда корзина будет сфор-
мирована, ее можно будет перевести в статус «к оплате» (поле получит значение
иог раутепг). При такой смене статуса корзина исчезнет и сформируется предваритель-
ный заказ. После оплаты заказа предварительный заказ можно перевести в статус опла-
ченного заказа — для этого полю згагиз надо будет присвоить значение раЫ (оплачен).
Таким образом, для манипулирования корзиной, заказами и покупками в этой модели
потребуются изменения значения всего одного поля — згагиз. При этом оно может при-
нимать всего три значения: саг г — корзина, Гог_раутепи — предварительный заказ,
раЫ — оплаченный заказ (покупка).

Модель Ргоаиси огаег содержит только общие сведения о заказе — в ней нет данных
о деталях заказа, т. е. о самих продуктах. Данные о продуктах, которые входят в заказ,
будут содержаться В другой Связанной МОДеЛИ — Ргос1иси_Огс1ег1Еет (листинг 6.2).

Листинг 6.2. Программный код модели Ргос1ис1_Огс1егКет для продуктов в корзине
(в заказе)

#	####################################

#	Детали заказа (продукты в заказе) #
#####################################

с1азз Ргос1исР_0гс1ег1Рет(тос1е1з .Мос1е1) :

огс!ег = тос!е1з. ЕогеЕдпКеу (Ргос1исЕ_Огс1ег, оп_с!е1еЕе=тос1е1з .САЗСАБЕ)

ргойиск = тос!е1з .ЕогеЕдпКеу (РгосАисГ, оп_с!е1е11е=тос1е1з .РЕОТЕСТ)
диапПЕу = тос!е1з .Роз1Р1уе1пРедегЕ1е1с1(с1еЕаи111=1,

Ье1р_РехР='Измените количество1,

чегЬозе_паше="Количество продуктов в заказе”)

ргтсе = тос1е1з.Бес1та1Г1е1с1(тах_с11д111з=20, с1ес1та1_р1асез=2)

изег_1с1 = тос!е1з .Роз1Р1че1пРедегЕ1е1с1(Ыапк=Тгие, пи!1=Тгие)
оЬдескз = тос!е1з .Мападег

с!азз Мека:
огс1ег1пд = [ 'рк' ]

с!еЕ __зкг__(зе!Е) :

гекигп Г’ {зе!Е.огс!ег} - {зеИ.ргоскюк}1
Эта модель также имеет минимальный набор следующих полей:

♦	огйег — номер заказа (связь с моделью Ргобисбз_0гбег по первичному ключу);

♦	ргобисб — продукт (связь с моделью Ргобисб по первичному ключу);

♦	диапбббу — количество продуктов (товара) в заказе;

♦	рг1се — цена продуктов (товара) в заказе;

♦	изег_бб — идентификатор пользователя магазина (он понадобится при формировании
корзины и заказа).

Создав указанные модели, не забудьте выполнить процедуру миграции:

руббоп тападе.ру такетбдгабгопз
руббоп тападе.ру тгдгабе

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

В типовом магазине электронной торговли необходимо создать контекстные процессо-
ры для следующих типов данных:

♦	категории продуктов (товаров);

♦	количество продуктов (товаров) в БД;

♦	количество продуктов (товаров), помещенных пользователем в корзину;

♦	стоимость продуктов (товаров), находящихся в предварительном заказе;

♦	стоимость продуктов (товаров) в оплаченном заказе.

Создадим в нашем тестовом приложении тазбег файл с именем соп1ех1_ргосе88ог.ру и
напишем в нем следующий код (листинг 6.3).

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

Бгот бдапдо.аррз гтрогб аррз

#	импорт модели

Бгот .тобе!з бтрогб Сепге_т, Ргобисб

Бгот бдапдо.сопбгРЬ.аибй.тобебз гтрогб Бзег
# для суммирования значения поля в запросах
Бгот бдапдо.бЬ.тобебз бтрогб Зит

#	получение каталога товаров для всех шаблонов
бе Б депге_т(гедиезб):

гебигп {'депге_т’: Сепге_т.оЬдесбз.а!1()}

#	получение количества продуктов в БД для всех шаблонов
беб пит_ргобисбз_т(гедиезб):

# Данные о количестве продуктов (товаров)
пит_ргобисбз_т = Ргобисб.оЬд есбз.а!1().соипб()
гебигп {'пит_ргобисбз_т': пит_ргобисбз_т}
# подсчет количества продуктов в корзине

с!еГ сагк_ко!_т(гедиезк) :

#	пользователь

#	изег_1с1 = гедиезк. изег .1(1 # снять комментарий в реальном проекте
изег_1с1 =2 # удалить строку в реальном проекте

#	Модель заказа (корзина)

ту_огс!ег = аррз .дек_тос!е1 ('тазкег', ' Ргос1иск_Огс1ег')

#	Модель товары в корзине

ту_огс!ег_Ткет = аррз. дек_тос!е1 ('тазкег', ' Ргос1иск_0гс1ег1кет')

#	Текущий заказ (корзина)

огйег = ту_огс1ег.о1^ескз.Т11кег (изег_Тс!=изег_Тс1, зкакиз='сагк')

1Т 1еп(огс1ег) == 0:

сагк_ко!_т = 0

1с1_сагк_т = Моде

е!зе:

#	Текущий заказ (если корзина не пустая, то получим одну запись)
огйег = ту_огс!ег .оЬдескз .дек (изег_Тс!=изег_1с1, зкакиз='сагк')
1с1_сагк_т = огйег.Ы

#	Текущие товары в корзине

огс!ег_1кет = ту_огс!ег_1кет. оЬдескз. ТИкег (огс!ег_1с1=огс1ег. 1с1)

#	количество товаров в корзине

сагк_ко!_т = Теп (огс!ег_1кет)

гекигп {' сагк_ко!_т': сагк_ко!_т, ' Тс1_сагк_т' : Тс1_сагк_т}

# получение суммы заказа к оплате (в корзине)

йеТ сагк_зыт_2ак_т(гедиезк):

#	изег = гедиезк.изег

#	Тс! пользователя

#	изег_1с! = гедиезк.изег.1(1

изег_1с! = 2

#	Модель заказа (корзина)

ту_огс!ег = аррз .дек_тос!е1 ('тазкег', ' Ргос1иск_Огс1ег')

#	Текущий заказ (корзина)

огйег = ту-ОпТег.оЬдескз.ТТТкег (изег_Тс!=изег_Тс1, зкакиз='Тог_раутепк')

#	сумма в предварительном заказе (в корзине)

1Т 1еп(огс1ег) == 0:

зит_сагк_т = 0

1с1_2ак_т = Мопе

еТзе:

# Текущий заказ (если заказ не пустой, то там одна запись)

огйег = ту_огс!ег .оЬдескз .дек (изег_Тс1=изег_1с1, зкакиз='Тог_раутепк')
1с1_2ак_т = огйег.Тс!

зит_сагк_т = огйег.атоипк

сопкехк = {' зит_сагк_т': зит_сагк_т, ' Тс1_гак_т': 1с1_2ак_т}
гекигп сопкехк

# получение сумм в оплаченном заказе

йеТ зит_Ьиу_огс!ег_т(гедиезк) :
#	изег = гедиезР.изег

#	Тс1 пользователя

#	изег_Тс! = гедиезР.изег. Щ

изег_Тс! = 2

#	Модель заказа (корзина)

ту_огс!ег = аррз .деР_тос!еТ ('тазбег', ' Ргос1исР_0гс1ег')

#	Оплаченные заказы (покупки)

огйегз = ту_огс!ег .оЬдесРз. ЫТРег (изег_1с1=изег_1с1, зРаРиз='раТс!')

#	сумма оплаты за продукты в оплаченном заказе

РоРаТ = огйегз .аддгедаРе (Зит("атоипР"))

зит_ту_Ьиу_т = РоРаТ [' атоипР_зит' ]

ТЕ зит_ту_Ьиу_т Тз Боне:
зит_ту_Ьиу_т = О

сопРехр = {'зит_ту_Ьиу_т': зит_ту_Ьиу_т}
геРигп сопРехР

В этом контекстном процессоре выполнен импорт необходимых пакетов и созданы
следующие функции:

♦	аеР депге т — полный список категорий продуктов (товаров) в БД;

♦	аеР пит ргоаисРз т — количество продуктов (товаров), находящихся в БД;

♦	аеР сагр_ко1_т — количество продуктов (товаров), которые покупатель поместил
в корзину;

♦	аеР сагр зит гак т— общая стоимость продуктов (товаров) в предварительном заказе;

♦	зит Ьиу огаег т— общая стоимость продуктов (товаров) в оплаченном заказе.

Каждая из этих функций возвращает контекстный словарь с данными (сопРехр), которые
будут доступны во всех шаблонах проекта (в нашем случае это проект тазРег). Но для
этого все функции контекстного процессора необходимо зарегистрировать в разделе
темрьатез файла 8ей1пд8.ру проекта В)ап§о (листинг 6.4).

Листинг 6.4. Регистрация контекстных процессоров в файле зейтдз.ру

ТЕМРЬАТЕЗ = [

{

' ВАСКЕЫБ' : ' сР) апдо. РетрТаРе. Ьаскепйз. с1д апдо. Эд апдоТетрТаРез',

'ВТКЗ': [ТЕМРЬАТЕЗ_О1РЗ, ],

'АРР-О1РЗ': Тгие,

’ОРТЮМЗ': {

’сопрехр-ргосеззогз': [

’ сЦ апдо.РетрТаРе.сопрехр-ргосеззогз ЩеЬид',

' ск) апдо.РетрТаРе.сопРехР_ргосеззогз.гедиезР',
'сЦапдо.сопРгТЬ.аиРН.сопРехР-Ргосеззогз.аиРЬ',

'сЦапдо.сопРгТЬ.теззадез.сопРехР_ргосеззогз .теззадез',

'тазРег.сопРехР_ргосеззогз.пит_ргос!исРз_т',	# <- кол-во продуктов в БД

'тазРег.сопРехР_ргосеззогз.депге_т',	# <- категории продуктов

'тазРег.сопРехР_ргосеззогз.сагР_коТ_т',	# <- кол-во продуктов в корзине
'тазкег.сопкехк_ргосеззогз.сагк_зит_хак_т',	# <- сумма пред, заказа

'тазкег.сопкехк_ргосеззогз. зит_Ьиу_огс!ег_т', # <- сумма опл. заказов
Ь
},
},
]

Как здесь можно видеть, строка регистрации контекстного процессора состоит из име-
ни приложения, ключевого слова сопкехк_ргосеззогз и имени функции, которая определе-
на в файле соп1ех1_ргосе88ог.ру.

Внимание!

Несмотря на то что в файле зеШпдз.ру каждая функция контекстного процессора имеет
префикс в виде имени приложения, имена функций и возвращаемых ими параметров
должны быть уникальными для всего проекта. Если в контекстном процессоре разные при-
ложения будут иметь функции или возвращаемые функциями значения с одинаковыми
идентификаторами, то возникнет коллизия, и программа будет работать с ошибками.

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

Напишем программный код модулей, которые обеспечивают создание индивидуально-
го магазина пользователя. Ссылка для вызова магазина пользователя, скорее всего,
должна находиться в его личном кабинете, — ее код приведен в листинге 6.5.

Листинг 6.5. Ссылка для вызова личного магазина пользователя

<а йгек=''{% иг1 'тазкег:изег_зЪор_тазкег'%}" кагдек ="_Ь1апк”>Мой магазин</а>

По этой ссылке для показа магазина будет вызван ИКЪ-маршрут изег зЬор тазкег (лис-
тинг 6.6).

Листинг 6.6.11КЬ-маршрут и8ег_8Ьор_та8(ег

#	Магазин пользователя

ракй(’изег_зйор_тазкег/’, чгемз.изег_зйор_тазкег, пате=’изег_зйор_тазкег'),

По этому маршруту вызывается представление изег_зкор_тазкег (листинг 6.7).

Листинг 6.7. Представление и8ег_8Ьор_та81ег

########################

#	Магазин пользователя #
########################

йек изег_зйор_тазкег(гедиезк):

#	получить имя пользователя системы

#	изег = гедиезк.изег	# снять комментарий в реальном проекте

изег = изег.оЬдескз.дек(йс1=2) # удалить строку в реальном проекте

сопкехк = {'изег’: изег}

гекигп гепйег(гедиезк, 'тазкег/д1ача_6/изег_зкюр_тазкег.Икт1', сопкехк)
Это достаточно простое представление, где в объект изег загружаются данные о пользо-
вателе, — они затем заносятся в контекстный словарь сопбехб, который передается
в шаблон и8ег_8Кор_та81ег.К1т1. В этом тестовом примере в объект изег загружается тек-
стовая константа, а в реальном приложении нужно будет снять комментарий в строке
изег = гедиезб.изег.

Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте, как уже
было сказано ранее, надо снять комментарий со строки # изег = гедиезб.изег и удалить
или закомментировать строку изег = изег.оЬдесТз.деТ(1(1=2).

Код шаблона и8ег_8Иор_та81ег.И1т1 приведен в листинге 6.8.

Листинг 6.8. Шаблон и8ег_8Ьор_та81ег.Ыт1

{% ехбепбз "збюр/Ьазе.Нбт!" %}

{% 1оаб зТа-Ыс %}

{% Ыоск сопбепб!}

«Ну с1азз="сопба1пег-Л1и1с1 р-1" збу1е="Ьаскдгоипб-со1ог:гдЬ(224, 255, 255) ;">

<Ыч с1азз="гои"> <!— Это начало строки —>

<!— Это левая панель —>

<скЫ с1азз="со1-6 со1-зт-4 со1-тб-4 со1-1д-2 со1-х1-2

Ьд-бпбо Ьд-орас1бу-25">

<!— Показ категорий продуктов в левой панели—>

{% Ыоск саба1од %}{% епбЫоск саба1од %}

</сИч> <!— Конец левой панели —>

<!— Это центральная панель —>

<скЫ с1азз="со1-6 со1-зт-8 со1-тб-8 со1-1д-10 со1-х1-10 бехЫсепбег">

<скЫ с1азз="гои Ьд-бпбо Ьд-ораЫбу-25 бехб-багк шх-1">

<6Ы с1азз="со1-2 бехб-збагб”>

<6Ы с1азз="бгорбоип">

сЬиббоп с1азз="Ьбп Ьбп-зесопбагу бгорбоип-бодд1е Ьбп-зт"

Оуре="ЬиЫоп" 1Ы"ЫорЫж1МепиВиЫоп1"

баба-Ьз-бодд1е="бгорбоип"

аг1а-ехрапбеб="ба1зе">

<1 с1азз="Ы Ы-1ауоиб-бехб-Ыпбои"></1> Выбор типа каталога продуктов

</Ьиббоп>

<ц1 с1азз="бгорбонп-тепи" аг1а-1аЬе11еЫу="ЫорЫш1МепиВиЫоЫ">

<11><а с1азз="бгорбоип-1бет" Нгеб="{% иг1 'тазбег:изег_саба1од_бгее'%}">Левая
панель (свернута)</а></И>

<11><а с1азз="бгорбоип-1бет" Нгеб="{% иг1 'тазбег:изег_саба1од_збаб'%}">Левая
панель (раскрыта) </ах/И>

<11><а с1азз="бгорбоип-1бет" Нгеб="{% иг1 'тазбег:изег_саба1од_ир'%}">

Верхняя панель</а></11>

{#<11><а с1азз="бгорбоип-1бет" кгеГ="/изег_саба1од_ир/">Верхняя панель</ах/И>#}

</и1>

</Ыг>

</аы>

</Ыу>

<±Ы с1азз="гои Ьд-бпГо Ьд-орасгбу-25 бехб-багк тх-1">

«Цу с1азз="со1-хз-12 со1-зт-5 со1-тб-4 со1-1д-2 бехб-збагб">
<И6>Магазин- {{изег}}</И6>

<И6>Доступных товаров - {{пит_ргобискз_т}}</Ь6>

</бЫ>

<6Ы с!азз="со1->:з-12 со1-зт-5 со1-тб-4 со1-1д-2 кехк-зкагк">

<а Ыек="{% иг1 'тазкег:сагк_еб!к' %}"><! с!азз="Ы Ы-сагк"></1>
Корзина->{{сагк_ко!_т} }</а>

<6Ы с!азз="гои">

<6Ы с1азз="со! кехк-зкагк">

{% 1к сагк_ко!_т > 0 %}

<а кгек="{% иг! 'тазкег:огбег_бе!' 16=1 1б_2ак=1б_сагк_т %}”
с!азз="Ькп Ькп-магЫпд Ькп-зт ту-1">

<1 Ыазз="Ы Ы-кгазкЗ"></1> Удалить корзину</а>

{% епбЫ %}

</б1у>

</61л>

</бЫ>

<61л с1азз="со1-хз-12 со1-зт-5 со1-тб-4 со!-1д-2 кехк-зкагк">

<а кгек="{% иг! 'тазкег:ту_огбег' %}"><! с!азз="Ы Ы-сагк4"></1> Заказ->{{зит_сагк_т}}</а>

<б!л с1азз="гои">

<б!л с1азз="со! кехк-зкагк">

{% 1Г зит_сагк_т > 0 %}

<а кгек="{% иг! 'тазкег:огбег_бе1' 16=2 16_2ак=1б_2ак_т %}"
с!азз="Ькп Ькп-иагптпд Ькп-зт ту-1">

<1 с!азз="Ы Ы-кгазкЗ"></1> Удалить заказ</а>

{% епсИк %}

</61у>

</Ыу>

</61л>

<6Ы с1азз="со1-хз-12 со!-зт-5 со1-тб-4 со!-1д-2 кеик-зкагк">

<а кгек="{% иг! 'тазкег:ту_Ьиу' %}">

<1 с!азз="Ы Ы-т1песагк-1оас1ес1"></1> Покупки->{ {зит_ту_Ьиу_т} }</а>

</Ыу>

с!азз="со1->:з-12 со!-зт-5 со1-тЬ-4 со!-1д-2 кеик-епс1">

<1тд згс="{% зкактс 'лпадез/КоЬказз.дрд' %}" с1азз="1тд-Г1и1с1">

</Ыу>

</Ыу>

<?— Это блок продуктов в строке —>

{% Ыоск ргобискз %} {% епбЫоск ргобискз %}

</скЫ> <!— Конец центральной панели —>

</Ыу> <!— Конец строки —>

{% Ыоск сака!од_ир %}{% епбЫоск сака!од_цр %}

</бЫ> <!— Конец контейнера —>

{% епбЫоск сопкепк%}

В этом шаблоне создана кнопка выбор типа каталога продуктов с выпадающим списком
опций:

♦	левая панель (свернута) — показать дерево категорий продуктов в левой боковой пане-
ли в виде свернутого дерева;

♦	левая панель (раскрыта) — показать дерево категорий продуктов в левой боковой пане-
ли в виде раскрытого дерева;
♦ верхняя панель — показать дерево категорий продуктов в верхней части центральной
панели в виде мегаменю.

Обратите внимание на переменную шаблона, в которой выводится информация о коли-
честве доступных товаров: {{пит_ргобискз_т}}. В представлении изег зЬор тазГег эта пере-
менная не получает никаких значений и не передается в шаблон. Где же задается зна-
чение для этой переменной? Она получает значение в контекстном процессоре, и это
значение может быть показано в любом шаблоне приложения. По аналогии перемен-
ные шаблона: {{сагк_ко!_т}}, Лс1_сагк_т, {{зит_сагк_т}}, Лс1_2ак_т и {{зит_ту_Ьиу_т}} — Также
получают значения из контекстного процессора.

Внимание!

Несмотря на то что в файле зеШпдз.ру каждая функция контекстного процессора имеет
префикс в виде имени приложения, имена функций и возвращаемых ими параметров
должны быть уникальными для всего проекта. Если в контекстном процессоре разные при-
ложения будут иметь функции или возвращаемые функциями значения с одинаковыми
идентификаторами, то возникнет коллизия и программа будет работать с ошибками.

Теперь рассмотрим программные модули, которые обеспечивают отображение кате-
горий продуктов в различных видах и в различных частях шаблона и8ег_8Кор_
та81ег.К1т1.

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

В шаблоне и8ег_8Иор_та81ег.И1т1 при выборе типа каталога продуктов левая панель (свер-
нута) активируется следующая ссылка:

<а с1азз="с1горс1омп-1кет'' ЬгеЛ=”тазкег:изег_сака1од_кгее’’>Левая панель (свернута)</а>

По ЭТОЙ ссылке активируется ИКЬ-маршрут изег_сака1од_кгее (листинг 6.9).

Листинг 6.9.11КЬ-маршрут изег_са1а1од_1гее

#	Категории продуктов в левой боковой панели (свернутое дерево)

ракЬ('изег_сака!од_кгее/’, чЛемз.изег_сакаЛод_кгее, пате='изег_сакаЛод_кгее’),

По этому маршруту вызывается представление изег_сака1од_кгее (листинг 6.10).

Листинг 6.16 Представление изег_са1а1од_1гее

#########################

#	Показать каталог-кгее #
#########################
бек изег_сакаЛод_кгее(гедиезк) :

#	получить имя пользователя системы

#	изег = гедиезк.изег # снять комментарий в реальном проекте
изег = Пзег.оЬдескз.дек(Л6=2) # удалить строку в реальном проекте

пате_сак = 'Все продукты'

#	Запомнить тип каталога для корзины
гедиезк.зеззЛоп['кЛр_сак'] = 'кгее'
ргобискз = Ргобиск.оЬдескз.а!1()
#	Пагинатор

радгпаког = Радгпаког (ргосЬсЕз, рег_раде=30)

раде_питЬег = гедиезк.СЕТ.дек('раде')

раде_окд = радТпаког.дек_раде(раде_питЬег)

сопкехк = {'ргоНискз': ргоНискз, 'раде_оЬд': раде_оЬ^л ’пате_сак': пате_сак, 'изег': изег}
гекигп гепНег(гедиезк, "тазкег/д!ача_6/изег_сака1од_кгее.НктГ', сопкехк)

Здесь переменная пате_сак получает значение все продукты. Затем из БД подгружается
объект ргоПисЕз — все продукты из БД, и создается пагинатор для отображения 30 кар-
точек продуктов на странице. Всё это через объект сопкехк передается в шаблон изег_
са1а1од_1гее.И1т1.

Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте надо снять
комментарий со строки # изег = гедиезк.изег и удалить или закомментировать строку изег
= Пзег .оЬдескз .дек (1с1=2).

Код шаблона и8ег_са1а1од_1гее.И1т1 приведен в листинге 6.11.

Листинг 6.11. Шаблон и8ег_са1а1од_1гее.Ыт1

{% ехкепйз "тазкег/д1ача_6/изег_зНор_тазкег.НВт!" %}

{% 1оас1 зкакгс %}

{% Ыоск сакаТод %}

<!— Начало стиля для каталога —>

<зку!е>

и1, #туНЬ {
Изк-зку1е-куре: попе;
}

/★ Реточе тагдгпз апс! раскПпд Егот кНе рагепк и! */

#туиь {

тагдгп: 0;

раскНпд: 0 ;
}

/★ 8ку1е кНе сагек/аггом */
.сагек {

сигзог: рогпкег;

изег-зе1еск: попе; /★ РгечепТ ТехТ зеХесЫоп */
}

/★ СгеаТе ТНе сагеТ/аггом а ипгсоНе, апс! зТу1е гТ */
.сагеТ::ЬеЕоге {

сопРепР: "\25В6";

со!ог: МесПит81аВеВ1ие;

сНзр!ау: лпИпе-Ыоск;

тагдгп-ггдНР: брх;
/* Кокаке кйе сагек/аггом 1соп мкеп сИскед оп (изгпд НачаЗсгдрк) */
.сагек-скжп: :Ьекоге {

кгапзкогт: гокаке (90с1ед);

}

/* НМе кйе пезкес! Изк */

.пезкес! {
сНзрТау: попе;

}

/* 8ком кйе пезкес! Изк мкеп кке изег сИскз оп кке сагек/аггом (шкЪ Иача8сг1рк) */
.аскгче {

сНзрТау: Ыоск;

}

</зку1е>

<!— Конец стиля для каталога —>

<сНч с1азз="сопка1пег-Е1и1(1 р-1"> <!— начало контейнера—>

<с11ч с1азз="гом шх-1"> <!— начало строки —>

<сИч с1азз=”со1-6”>

<а НгеЕ="{% иг1 'тазкег:изег_сака1од_кгее' %}" с1азз="Ып Ып-зиссезз Ып-зт">

<1 с1азз="Ы Ы-сагЫ"></!> Все продукты</а>
</сНч>

<!— Динамичный каталог товаров—>
сйбЖатегории продуктов</Н6>
{% 1оас1 тркк_кадз %}
<и1 1с1="туиь">

{% гесигзекгее депге_т %}
<11>

<а йгек="{% иг1 'тазкег:изег_ргос!ис1:_1:гее' Ы=пос1е.Ы %}">{{ поДе.пате }}</а>
{% 1к пойе. 1з_1еак_пос1е %}

<зрап с1азз="1еак">{{ поДе.соДе }}</зрап>
{% е1зе %}

<зрап с1азз="сагек рагепк">{{ поДе.соДе }}</зрап>

<и1 с1азз="пезкес!">{ { сЫМгеп }}</и1>
{% епсИк %}

</Ы>

{% епЫесигзекгее %}

</и!>

</Ыч> <!— Конец строки —>

</Ыч> <!— Конец контейнера —>

<!— Начало скрипта для каталога —>

<зсг!рк куре="кехк^ачазсг!рк">
'изе зкггск';

чаг кодд1егз = с!оситепк.декЕ1етепкзВуС1аззНате("сагек");

чаг г;
Бог (1=0; 1 < ЕоддЕегз.ЕепдЕН; 1++) {

ЕоддЕегз [1] .асМЕчепЕЕЕзбепег ("сЕЕск", ЕипсЫоп () {

ЕМз .рагепЕЕЕетепЕ.диегуЗеЕесбог (" .пезбеб") .сЕаззЬЕзб.боддЕе ("асЕЕче");

ЕЫз. сЕаззЬЕзб. ЕоддЕе ("сагеб-сЫп") ;

});

}

</зсгЕрб>

<!— Конец скрипта для каталога —>

{% епсЫоск сабаЕод %}

<!— Центральная панель—>

<сНу с1азз=”со1-12 бехб-збагб" збуЕе="Ьаскдгоипс1-соЕог: гдЬ (220, 242, 246);”>

<!— Блок для показа карточек с продуктами —>

{% Ыоск ргобисбз %}

{% ЕпсЕибе "тазбег/дЕача_6/изег_ргобисб.ЬбтЕ" %}

{% епсЫоск ргобисбз %}

</Ы> <!— Конец центральной панели —>

В этом шаблоне созданы две панели: левая боковая панель — для отображения сверну-
того дерева категорий продуктов и центральная панель — для отображения карточек
с информацией о продуктах. Чтобы можно было развернуть (свернуть) дерево катего-
рий продуктов в шаблон добавлены стили и 1ауа-скрипты.

В центральной панели присутствует блок показа карточек с продуктами, в который
вставлено подключение к шаблону и8ег_ргобис1.Ыт1. Код этого шаблона приведен
в листинге 6.12.

Листинг 6.12. Шаблон изег_ргос1ис1.Ыт1

<!— Сообщение о том, что такой товар уже есть в корзине —>

{% ЕЕ теззадез %}

<и! с!азз=”теззадез бехб-збагб бехб-бапдег">

{% Бог теззаде Еп теззадез %}

<ЬЗ с!азз="{{ теззаде.бадз }}">

<Ьиббоп с!азз=”Ып Ьбп-бапдег Ьбп-зт" опсЕЕск="Ызбогу.Ьаск() "><-Назад</Ьиббоп>
{{ теззаде| забе }}

</ЬЗ>

{% епббог %}

</и!>

{% епсЫ %}

<!— Конец сообщения —>

<бЕч с1азз="гом бехб-збагб бехб-багк Ебг-2">

<Ь4>Выбрана категория: {{пате_саб} }</М>

</бЕч>

<ббч с1азз="гом бехб-збагб бехб-багк ЕЬ-2">

<ббч с1азз="со1-12”>

{% ргобисбз %}

<сИч с1азз=”гом ту-2”>
{% Тог гоЬ 1п раде_оЬ] %}

<сИу с1азз="сагс1 тк-3 шз-3 Ьогбег-ргшагу Ьогбег Ьогбег-3” зку1е="ю1с1кЬ: 20гет;">

<сНу с1азз="сагс1-Ьеас1ег кехк-сепкег">

{% соттепк %}

<!— Традиционная кнопка —>

<а ЬгеТ=’’{% иг! 'тазкег:сагк' 1с1^тЬ. 1с1 %}"

с!азз="Ькп Ькп-зиссезз Ькп-зт">В корзину<1 с1азз=”Ы Ы-сагк"х/1х/а>
{% епбсоттепк %}

<!— Кнопка со спином —>

<Тогт аскТоп="{% иг! 'тазкег:сагк'	%}”>

<Ьиккоп с!азз="Ькп Ькп-зиссезз Ыт-зт кодд!е-кехк">

<зрап>В корзину-><1 с!азз="Ы Ы-сагк"х/1х/зрап>

<зрап с1азз="Ыббеп зргппег-Ьогбег зрТппег-Ьогбег-зт"
го!е="зкакиз" аг!а-Ыс1с1еп="кгие"х/зрап>

</Ьиккоп>

</Тогт>

<Ь6>{{ тЬ.депге }}</Ь6>

</сЫу>

{% 1Т тЬ.таде %}

<1тд згс=”{{ тЬ.лпаде.иг! }}" с1азз="сагс1-нид-Кор 1тд-Т1иЫ’’ а1К=И...”

зКу1е=’Ъе1дКК: 15гет; оЬ^есК-ТЫ:: соуег;">

{% е!зе %}

<р>Нет фото</р>

{% епсНТ %}

<сЫу с1азз=”сагс1-Ьос1у">

<р с1азз=”сагс1-Кех11 зша!1">

<а КгеТ=”{% иг! ’тазКег:ргос!исК_с1еКа11' рк=тЬ.1(1 %}">{ {тЬ.пате} }</а>

{% 1Т тЬ.ргТсе 1з Копе %}

Цена - не задана,

{% е!зе %}

Цена - {{тЬ.ргТсе}}

{% епсНТ %}

</р>

</сНу>

</с1гу>

{% епйТог %}

</сНу>

{% е!зе %}

<сЫу с1азз=”гом кехк-зкагк кехк-с!апдег">

<р>В базе данных нет товара выбранной категории</р>

</сНу>

{% епсНТ %}

</сНу>

</сНу>

<!— Пагинатор начало —>

<сНч с1азз=”рад1пак1оп”>
<зрап с1азз=”зкер-Ипкз”>

{% 1к раде_оЬд.каз_ргеу1оиз %}

<а кгек="?раде=Г’>&1ас[ио; Первая</а>

<а кгек=”?раде={{ раде_оЬд.ргеу1оиз_раде_питЬег }}”>Предьщущая</а>
{% епсНГ %}

<зрап с1азз=”сиггепк”>

Стр. {{ раде_оЬд.питЬег }} из {{ раде_оЬд.радгпаког.пит_радез }}.

</зрап>

{% И раде_оЬд.каз_пехк %}

<а кгек="?раде={{ раде_оЬд.пехк_раде_питЬег }}">Следующая</а>

<а кгек=”?раде={{ раде_оЬд.радгпаког.пит_радез }}">Последняя &гадио;</а>
{% епсПГ %}

</зрап>

</сИу>

<!— Пагинатор конец —>

<!— Скрипт для вращения спина на кнопке —>

<зсг!рк>

$ (’. Ьтсйеп') . гетоуеС1азз (’ НгсМеп') . НМе ();

$('.кодд1е-кехк').сИск(кипскгоп() {

$ (кЫз) . В1пс1( 'зрап') .еасИ(кипскгоп() { $ (кЫз) .кодд!е (); });

});

</зсггрк>

Шаблон и8ег_ргос1ис1.1п1т1 начинается с тега {% 1г теззадез %}, в котором выводится сооб-
щение о том, что выбранный пользователем товар уже добавлен в корзину. Тег будет
задействован в модуле формирования корзины.

В шаблоне также выводится подсказка о категории, выбранной в дереве категорий про-
дуктов: {{пате сак}}. А далее организован цикл, в котором выводятся карточки с инфор-
мацией о продуктах.

Следует отметить две особенности этих карточек. Первая — к фотографиям продуктов,
которые отображаются в карточках, добавлен стиль. Этот стиль обеспечивает приведе-
ние фотографий во всех карточках к одному размеру, вне зависимости от размера ис-
ходного фото. Вторая особенность — кнопка с надписью в корзину сопровождается
вращающимся спином (код традиционной кнопки закомментирован). Для запуска ани-
мации вращающегося спина в шаблоне предусмотрен 1ауа-скрипт. Когда пользователь
нажимает на эту кнопку, то надпись на кнопке меняется на вращающийся спин, кото-
рый отображается до тех пор, пока не завершится процедура добавления продукта
в корзину.

В первой строке левой боковой панели шаблона и8ег_са1а1од_1гее.И1т1 (см. листинг 6.11)
имеется кнопка все продукты. С этой кнопкой связана следующая ссылка:

<а Ъгек="{% иг1 ’тазкег:изег_сака!од_кгее' %}" с!азз="Ькп Ькп-зиссезз Ькп-зт”>

<1 с1азз=”Ы Ы-сагк4"></!> Все продукты</а>

По этой ссылке в конечном итоге будет вызвано представление изег_сака1од_кгее, в кото-
ром будут сняты фильтры на категории продуктов, и в центральной панели отобразятся
все карточки продуктов из БД.
Гпава 6

В левой боковой панели шаблона и8ег_са1а1од_йее.К1т1 с наименованием категории про-
дукта связана следующая ссылка:

<	а Ьгеб="{% игб 'шазбег:изег_ргобисб_бгее1 бб=побе. 1с1 %}’’>{{ побе.пате }}</а>

По ЭТОЙ ссылке активируется ИКЬ-маршруТ изег_ргобисб_бгее (листинг 6.13), в который
передается идентификатор выбранной категории (бб=побе.бб).

Листинг 6.13.11КЬ-маршрут изег_ргос1ис1_1гее

#	--- список товаров выбранной категории из каталога бгее—

рабЬ (’ изег_ргобисб_бгее/<бпб: 1с1>/1г чбемз. изег_ргобисб_бгее, пате= ’ изег_ргобисб_бгее'),

По этому маршруту активируется представление изег_ргобисб_бгее (листинг 6.14).

Листинг 6.14. Представление изег_ргос1ис1_(гее

#	#####################################

#	Показать продукты из каталога-бгее #

#	#####################################

беб изег_ргобисб_бгее (гедиезб, 66=0):

#	получить имя пользователя системы

#	изег = гедиезб.изег # снять комментарий в реальном проекте

изег = изег.оЬдесбз.деб(66=2) # удалить строку в реальном проекте

бб 66 == 0: # если категория не выбрана
бб_саб = гедиезб.зеззбоп[1бб_саб']

е1зе: # если пришел вызов из каталога продуктов
16_саб = 16

#	запомнить категорию выбранного продукта
гедиезб.зеззбоп[’бб_саб'] = 16_саб

зе1есб_саб = Сепге_т.оЬдесбз.деб(16=16_саб)

16_го6_саб = зе1есб_саб.рагепб_16

бб 16_го6_саб 1з Попе:
16_го6_саб = 1

#	Получить запись с параметрами родительской категории
зе1есб_го6_саб = Сепге_ш.оЬдесбз.а11()

#	категории, в которые входит выбранная категория и все дочерние категории
сабедогбез = зебесб_саб.деб_6езсеп6апбз(бпс1и6е_зебб=Тгие)

#	продукты, которые входят в выбранную категорию и во все дочерние

бб 66 != 0: # если категория выбрана

ргобисбз = Ргобисб.оЬдесбз.ббббег(депге___бп=сабедогбез).6бзббпсб().огбег_Ьу(’пате’)

пате_саб = зебесб_саб.пате

ебзе: # если категория не выбрана
ргобисбз = Ргобисб.оЬдесбз.абб()
пате_саб = "Все продукты"
#	Пагинатор

радгпа^ог = Радгпа^ог(ргоНисПз, рег_раде=30)
раде_пишЬег = гедиезТ.СЕТ.деТ('раде')
раде_аЬ] = радгпаЕог.деЕ_раде(раде_пшпЬег)

сопЕехЕ = {"ргосЗисЕз": ргобисТз, "раде_оЬд": раде_оЬ^,
"пате_саЕ": пате_саЕ, "к!_саЕ": 1с1_са1г, 'изег': изег,
"зе!есЕ_гос1_саЕ": зе!ес1:_гос1_са1:, "1с1_гос1_са11": 1с1_гос1_саЕ}

геЕигп гепбег(гедиезЕ, "тазСег/д1ауа_6/изег_саЕа1од_Егее.Ылп1", сопЕехЕ)

Это представление получает выбранную категорию продукта, и в объект ргойистз загру-
жаются все продукты выбранной категории и всех дочерних категорий (если они есть).
Иными словами, на базу данных с продуктами накладывается фильтр по выбранной
категории продукта из древовидного каталога. Затем все полученные параметры загру-
жаются в словарь сопрехр, который передается в шаблон и8ег_са1а1од_1гее.И1т1 (см. лис-
тинг 6.11), где и отображаются карточки продуктов с учетом фильтра.

Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте надо снять
комментарий со строки # изег = гедиезЕ.изег и удалить или закомментировать строку изег
= Пзег .оЬдесТз .деЕ (16=2).

Итак, к этому моменту создан набор модулей, обеспечивающих вывод страницы мага-
зина пользователя с выборкой и фильтрацией продуктов по их категориям. Теперь
можно проверить работу этих модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

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

При первоначальной загрузке шаблона и8ег_8Иор_та81ег.И1т1 (магазин пользователя)
в окне браузера он будет выглядеть так, как показано на рис. 6.1.

ЕЛ Выбор тапа каталога продуктов ’

Магазин- ЧЛсЛог	П Корзицз->0

Доступных товаров - 6

Д Заказ->О

О Пскулки-^0

К КОВОКДББР

Рис. 6.1. Шаблон и8ег_8Нор_та81ег.Н1т1 (магазин пользователя) при первоначальной загрузке

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.
Как здесь можно видеть, левая боковая панель пока пустая (ее, собственно, еще вовсе
нет), а в центральной панели показаны некоторые элементы персонального магазина
пользователя:

♦	кнопка Выбор типа каталога продуктов;

♦	имя владельца персонального магазина;

♦	количество доступных товаров в БД;

♦	ссылка на корзину покупателя;

♦	ссылка на активный заказ покупателя (неоплаченный);

♦	ссылка на покупки клиента (оплаченные заказы);

♦	баннер платежной системы, с которой работает магазин пользователя.

Ссылки на корзину, заказ и покупки мы пока не рассматриваем (еще не описаны соот-
ветствующие программные модули), а если нажать на кнопку Выбор типа каталога
продуктов, появятся следующие опции выпадающего меню (рис. 6.2).

ЕЛ Выбор типа каталога продуктов т

КорзИна->3

Левая панель (свернута)

Левая панель (раскрыта)

Верхняя панель	Сорупд

Рис. 6.2. Опции выбора типа каталога продуктов

Если выбрать здесь опцию Левая панель (свернута) (показать каталог категорий про-
дуктов в виде свернутого дерева), откроется шаблон и8ег_са1а1од_1гее.И(т1 (рис. 6.3).

К Все
продукты

[Ц Выбор типа каталога продуктов ’

Магазин- У|с1ог	р Корзина->0	»Заказ->0

Доступных товаров -
6

Выбрана категория: Все продукты

Категории продуктов

ЙЛокупки1>0	РОВОКР55Р

Заморозка ►
Кондитерские ►
Консервы ►
Макаронные ►
Молочные ►
Мясные
Напитки ►
Напитки горячие ►
Овощи ►
Приправы, соусы ►
Рыбные ►
Семечки орехи ►
Сладости ►
Хлебобулочные ►

В юорзмнуЙ

Рыба соленая

В корзинуй

Рыбные

В корзинуХЗ

Рыба копченая

Рис. 6.3. Шаблон и8ег_са1а1од_1гее.Н1т1 при первоначальной загрузке
Как здесь можно видеть, в левой боковой панели появились категории продуктов в ви-
де свернутого дерева, а в центральной панели — карточки с информацией о продуктах.
При первоначальной загрузке этого шаблона на него будут выведены карточки всех
продуктов из БД (с учетом постраничной пагинации). Если же в каталоге категорий
продуктов выбрать одну из категорий — например, Рыбные, то содержимое централь-
ной панели изменится и в ней будут показаны продукты выбранной категории, включая
дочерние (рис. 6.4).

ЪВсе
продукты

ЦП Выбор типа каталога продуктов ’

» Заказ-> О

О Покупка

Категории продуктов

Заморозка к
Кондитерские к
Консервы к
Макаронные к
Молочные к
Мясные к
Напитки к
Напитки горячие к

Овощи к
Приправы, соусы к
Рыбные к
Семечки, орехи к
Сладости к
Хлебобулочные к

Магазин- У1с1ог	П Корзина->О

Доступных товаров - 6

Выбрана категория: Рыбные

Стр. 1 143 1.

Рис. 6.4. Шаблон изег_са1а1од_1гее.Мт1 при выборе категории продуктов Рыбные

Если в каталоге категорий продуктов нажать на треугольную кнопку | | справа от име-
ни категории, текущая ветка дерева раскроется, и будут показаны дочерние категории
(рис. 6.5).

Приправы, соусы к
Рыбные ▼

Икра

Рыба копченая

Рыба соленая
Семечки, орехи к
Сладости к
Хлебобулочные к

Рис. 6.5. Категория продуктов Рыбные с раскрытыми ветками дочерних категорий

Если теперь в дочерних категориях выбрать конечную ветку, — например, Рыба коп-
ченая, в центральной панели останутся карточки с продуктами только этой категории
(рис. 6.6).
Я Все
продукты

Категории продуктов

ИЗ Выбор тапа каталога продуктов ’

Магазин- Х/яс±ог	П Корзяна->0

Заморозка ►
Кондитерские >
Консервы >
Макаронные ►
Молочные ►
Мясные ►
Напитки ►
Напитки горячие ►
Овощи ►
Приправы, соусы ►
Рыбные ►
Семечки. орехи ►
Сладости ►
Хлебобулочные >

Доступных товаров - 6

Выбрана категория: Рыба копченая

СТр. 1 143 1.

Рис. 6.6. Шаблон изег_са1а1од_1гее.Н1т1 при выборе категории продуктов Рыба копченая

Обратите внимание, что наименование продукта представляет собой ссылку, при пере-
ходе по которой откроется страница с полноразмерной фотографией и полной инфор-
мацией об этом продукте (рис. 6.7).

Рис. 6.7. Страница с подробными сведениями о продукте
На приведенных здесь рисунках в карточках продуктов имеется кнопка В корзину —
она предназначена для того, чтобы пользователь поместил этот товар в корзину (создал
предварительный заказ). Пока эта кнопка не рабочая — для ее функционирования
необходимо создать соответствующий программный код, что и будет сделано в одном
из следующих разделов. А сейчас мы создадим набор модулей, которые позволяют
отобразить в левой боковой панели дерево категорий продуктов в раскрытом виде.

6.4.3.	Вывод категорий продуктов

в левой боковой панели магазина (дерево раскрыто)

В шаблоне и8ег_8Иор_та81ег.И1т1 при выборе типа каталога продуктов Левая панель
(раскрыта) активируется следующая ссылка:

<а с1азз="6горбомп-1бет" Ьгеб="/изег_саба1од_збаб/">Левая панель (раскрыта)</а>

По этой ссылке активируется ИКЪ-маршрут изег_саба1од_збаб (листинг 6.15).

Листинг 6.15. ЫНЬ-маршрут и8ег_са(а1од_8(а(

# Категории продуктов в левой боковой панели (раскрытое дерево)

рабЬ( 'изег_саба!од_збаб/', чбемз .изег_саба!од_збаб, пате='изег_саба!од_збаб'),

По этому маршруту вызывается представление изег_саба!од_збаб (листинг 6.16).

Листинг 6.16. Представление и8ег_са1а1од_81а1

#########################
# Показать каталог-збаб #
#########################

беб изег_саба!од_збаб(гедиезб):

#	получить имя пользователя системы

#	изег = гедиезб.изег # снять комментарий в реальном проекте

изег = изег.обдесбз.деб(66=2) # удалить строку в реальном проекте

пате_саб = 'Все продукты'

#	Запомнить тип каталога для корзины
гедиезб.зеззбоп['б!р_саб'] = ’збаб'
ргобисбз = Ргобисб.оЬдесбз.а!1()

#	Пагинатор

радбпабог = Радбпабог(ргобисбз, рег_раде=30)

раде_пишЬег = гедиезб.СЕТ.деб('раде')

раде_оЬ] = радбпабог.деб_раде(раде_питЬег)

сопбехб = {'ргобисбз': ргобисбз, 'раде_оЬд': раде_оЬ^, 'пагае_саб': пате_саб, 'изег': изег}
гебигп гепбег(гедиезб, "тазбег/д1ача_6/изег_саба1од_збаб.Ьбт1", сопбехб)

Здесь переменная пате саб получает значение все продукты. Затем из БД подгружается
объект ргобисбз — все продукты из БД, и создается пагинатор для отображения 30 кар-
точек продуктов на странице. Всё это через объект сопбехб передается в шаблон
и8ег_са1а1од_81аШт1 (листинг 6.17).
Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте надо снять
комментарий со строки # изег = гедиезк.изег и удалить или закомментировать строку изег
= Пзег .оЬдескз .дек (1с1=2).

Листинг 6.17. Шаблон и8ег_са1а1од_81а1.Ыт1

{% ехкепЫ "тазкег/д1ача_6/изег_зкор_тазкег.Ькт!" %}

{% 1оас1 зкакгс %}

{% Ыоск сака1од %}

<Ы с1азз="сопка1пег-Б1и1с1 р-1"> <!— начало контейнера—>

<с11ч с1азз="гом тх-1”> <!— начало строки —>

<сИч с1азз="со1-6">

<а ЫеБ=”{% иг1 'тазкег:изег_сака!од_зкак' %}" с1азз=”Ып Ып-зиссезз Ып-зт">

<1 с1азз=”Ы Ы-сагк4"></!> Все продукты</а>

</Ыч>

<!— Динамичный каталог товаров—>

<Ь6>Категории продуктов</й6>

{% 1оас1 тркк_кадз %}

<и1 1с1="туиЬ">

{% гесигзекгее депге_т %}

<И>

<а ЫеБ="{% иг! 'тазкег :изег_ргос!иск_зкак' 1<1=пос1е. 16 %}">{{ поДе.пате }}</а>

{% йГ побе. 1з_1еаВ_пос1е %}

<зрап с1азз=”1еаВ">{ { посЫсобе }}</зрап>

{% е1зе %}

<зрап с1азз="сагек рагепк">{{ посЫсобе }}</зрап>

<и1 с1азз="пезкесГ>{ { сЫМгеп }}</и!>

{% епсИВ %}

</И>
{% епбгесигзекгее %}

</и!>

</Ыч> <!— Конец строки —>

</Ыч> <!— Конец контейнера —>

{% епсЫоск сака1од %}

<!— Центральная панель—>

<сИч с1азз=”со1-12 кехк-зкагк" з1су1е="Ьаскдгоип(1-со1ог:гдЬ(220, 242, 246) ;”>

<!— Блок для показа карточек с продуктами —>

{% Ыоск ргоЫскз %}

{% 1пс1ис1е "тазкег/д1ача_6/изег_ргос1ис11.Ыт1" %}

{% епсЫоск ргоЫскз %}

</Ы> <!— Конец центральной панели —>

В этом шаблоне созданы две панели: левая боковая панель для отображения раскры-
того дерева категорий продуктов и центральная панель для отображения карточек
с информацией о продуктах.
В центральной панели также присутствует блок для показа карточек с продуктами,
в который вставлено подключение к шаблону и8ег_ргос1ис1.К1т1 (см. листинг 6.12).

В первой строке левой боковой панели шаблона и8ег_са1а1од_81аПп1т1 имеется кнопка все
продукты. С этой кнопкой связана следующая ссылка:

<а Ьгеб="{% игб 'шазбег:изег_сабабод_збаб' %}" сбазз="Ьбп Ьбп-зиссезз Ьбп-зт">

<б с1азз="Ы Ьб-сагб4"х/б> Все продукты</а>

По ЭТОЙ ссылке В конечном итоге будет вызвано представление изег_сабабод_збаб, в кото-
ром будут сняты фильтры на категории продуктов, и в центральной панели отобразятся
все карточки продуктов из БД.

В левой боковой панели шаблона изег_сабабод_збаб.Ьбшб с наименованием категории про-
дукта связана следующая ссылка:

<	а Ьгеб="{% игб 'шазбег:изег_рго6исб_збаб' б6=по6е.б6 %}">{{ побе.пате }}</а>

По ЭТОЙ ссылке активируется ИВП-маршруТ изег_рго6исб_збаб (листинг 6.18), в который
передается идентификатор выбранной категории (бб=побе.бб).

Листинг 6.18.11КЬ-маршрут изег ргос1ис1 81а(

#	--- список товаров выбранной категории из каталога збаб—

рабЬ (' изег_рго6исб_збаб/<бпб: 1с1>/', чбемз. изег_рго6исб_збаб, паше=' изег_рго6исб_збаб'),

По этому маршруту активируется представление изег_рго6исб_збаб (листинг 6.19).

Листинг 6.19. Представление изег_ргос!ис1_8(а1

#	#####################################

#	Показать продукты из каталога-бгее #
######################################
беб изег_ргобисб_збаб(гедиезб, 66=0):

#	получить имя пользователя системы

#	изег = гедиезб.изег # снять комментарий в реальном проекте
изег = изег.оЬдесбз.деб(66=2) # удалить строку в реальном проекте

16 16 == 0: # если категория не выбрана
16_саб = гедиезб.зеззбоп['бб_саб']

е!зе: # если пришел вызов из каталога продуктов

16_саб = 66

#	запомнить категорию выбранного продукта
гедиезб.зеззбоп['16_саб'] = б6_саб

зебесб_саб = Сепге_т.оЬдесбз.деб(б6=б6_саб)

б6_го6_саб = зебесб_саб.рагепб_б6

бб б6_го6_саб бз Попе:
б6_го6_саб = 1

#	Получить запись с параметрами родительской категории
зебесб_го6_саб = Сепге_ш.оЬдесбз.абб()
#	категории, в которые входит выбранная категория и все дочерние категории
сабедогбез = зе1есб_саб.деб_6езсеп6апбз(1пс1и6е_зе1б=Тгие)

#	продукты, которые входят в выбранную категорию и во все дочерние

И 16 != 0: # если категория выбрана

ргобисбз = Ргобисб. оЬд есбз. Шбег (депге_1п=сабедог1ез) .ббзббпсбО .огбег_Ьу('пате')

пате_саб = зе1есб_саб.пате

е!зе: # если категория не выбрана

ргобисбз = Ргобисб.оЬдесбз.а!1()

пате_саб = "Все продукты"

#	Пагинатор

радбпабог = Радбпабог(ргобисбз, рег_раде=30)

раде_питЬег = гедиезб.СЕТ.деб('раде')

раде_окд = радбпабог.деб_раде(раде_питЬег)

сопбехб = {"ргобисбз": ргобисбз, "раде_обд": раде_оЬ^,

"пате_саб": пате_саб, "1б_саб": 1б_саб, 'изег': изег,
"зе!есб_гоб_саб": зе!есб_гоб_саб, "1б_гоб_саб": 1б_гоб_саб}
гебигп гепбег(гедиезб, "тазбег/д1ача_6/изег_саба1од_збаб.Ьбт1", сопбехб)

Это представление получает выбранную категорию продукта, и в объект ргобисбз загру-
жаются все продукты выбранной категории и всех дочерних категорий (если они есть).
Иными словами, на базу данных с продуктами накладывается фильтр по выбранной
категории продукта из древовидного каталога. Затем все полученные параметры загру-
жаются в словарь сопбехб, который передается в шаблон и8ег_са1а1од_81а1.И1т1 (см. лис-
тинг 6.17), где и отображаются карточки продуктов с учетом фильтра.

Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте надо
снять комментарий со строки # изег = гедиезб.изег и удалить или закомментировать строку
изег = Пзег.оЬдесбз.деб(16=2).

Итак, к этому моменту создан набор модулей, которые обеспечивают вывод страницы
магазина пользователя с выборкой и фильтрацией продуктов по их категориям. Теперь
можно проверить работу этих модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

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

При первоначальной загрузке шаблона и8ег_8Иор_та81ег.И1т1 (магазин пользователя)
в окне браузера он будет выглядеть так, как показано на рис. 6.8.

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.
ЕЛ Выбор типа каталога продуктов ’

Магазин- У1сГог	р Корзина->0	« Заказ->0

Доступных товаров - 6

О Пскулки-^0

К КОВОКДББД

Рис. 6.8. Шаблон и8ег_8Нор_та81ег.Н1т1 (магазин пользователя) при первоначальной загрузке

Как здесь можно видеть, левая боковая панель пока пустая (ее, собственно, еще вовсе
нет), а в центральной панели показаны некоторые элементы персонального магазина
пользователя:

♦	кнопка Выбор типа каталога продуктов;

♦	имя владельца персонального магазина;

♦	количество доступных товаров в БД;

♦	ссылка на корзину покупателя;

♦	ссылка на активный заказ покупателя (неоплаченный);

♦	ссылка на покупки клиента (оплаченные заказы);

♦	баннер платежной системы, с которой работает магазин пользователя.

Ссылки на корзину, заказ и покупки мы пока не рассматриваем (еще не описаны соот-
ветствующие программные модули), а если нажать на кнопку Выбор типа каталога
продуктов, появятся следующие опции выпадающего меню (рис. 6.9).

Ц] Вь бор т|*па каталога продусгов т

Корзина->Р

Левая панель (свернута)

Левая панель (раскрыта)

Верхняя панель	Сорумд

Рис. 6.9. Опции выбора типа каталога продуктов

Если выбрать здесь опцию Левая панель (свернута) (показать каталог категорий про-
дуктов в виде свернутого дерева), откроется шаблон и8ег_са(а1од_81а1.И1т1 (рис. 6.10).

Как здесь можно видеть, в левой боковой панели появились категории продуктов в ви-
де раскрытого дерева, а в центральной панели — карточки с информацией о продуктах.
При первоначальной загрузке этого шаблона на него будут выведены карточки всех
продуктов из БД (с учетом постраничной пагинации). Если же в каталоге категорий
продуктов выбрать одну из категорий — например, Рыбные, то содержимое централь-
ной панели изменится и в ней будут показаны продукты выбранной категории, включая
дочерние (рис. 6.11).

Обратите внимание, что дерево категорий продуктов в левой панели все время отобра-
жается в раскрытом виде, и пользователь всегда видит как категории продуктов, так и
все дочерние подкатегории.

Если теперь в дочерних категориях выбрать конечную ветку — например, Рыба соле-
ная, то в центральной панели останутся карточки с продуктами только этой категории
(рис. 6.12).
Рис. 6.10. Шаблон и8ег_са1а1од_81а1.Н1т1 при первоначальной загрузке

НВм
продукты

ЕЛ Выбор типа каталога продуктов ’

Магазин- У1с1ог	ГЗ Корзина->□

Заказ->0

О Покупки-

Категории продуктов

• Заморозка

о Изделия из теста
а Мороженое
р Рыба
о Ягоды, Грибы

 Кондитерские
о Ирис

5 Карамель
о Конфеты в
коробках
о КонФеты
шоколадные

о Шоколад

• Консервы
о Грибы
о Икра овощная
р Мясные
5 ОГУРЦЫ
о Помидоры
л Рыбные

Доступных товаров - 5

Выбрана категория: Рыбные

Стр. 1 из 1.

Рис. 6.11. Шаблон и8ег_са1а1од_81а1.Н1т1 при выборе категории продуктов Рыбные
ЪГВсе
продукты

ЛО Выбор типа каталога продуктов -

Категории продуктов

• Заморезка

о Изделия ив теста
о Мороженое
* Рыба

о йгоды. Грибы

•	Кондитерские
о Ирис
о Карамель
* Кояфеты в
коробках
о Коя феты
шоколадные

о Шоколад

•	Консервы
о Грибы
о Икра овощная
а Мясные
15 Огурцы
а Помидоры
а Рыбные

Магазин- Ук1ог	X? Корзина->0

Доступных товаров - б

Выбрана категория: Рыба соленая

Стр. 1 ив 1.

Рис. 6.12. Шаблон и8ег_са1а1од_81а1.Н1т1 при выборе категории продуктов Рыба соленая

Заметьте, что наименование продукта представляет собой ссылку, при переходе по ко-
торой откроется страница с полноразмерной фотографией и полной информацией об
этом продукте (рис. 6.13).

© Назад

Наименование продукта-Сельдь соленая

Цена -₽150,00

Описание продукта

Сельдь пряного посола в упаковке, Вес ВСЮ гр.

Рис. 6.13. Страница с подробными сведениями о продукте
Гпава 6

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

В шаблоне и8ег_8Иор_та81ег.И1т1 при выборе типа каталога продуктов Верхняя панель
активируется следующая ссылка:

<а с1азз="(1гор(1омп-1Кет" ЬгеК="{% иг1 'тазКег:изег_саКа1од_ир'%}">Верхняя панель</а>

По ЭТОЙ ссылке активируется ИКЬ-маршрут изег_саКа1од_ир (листинг 6.20).

Листинг 6.20. ЫНЬ-маршрут изег_са(а1од_ир

#	Категории продуктов в центральной панели (мегаменю)
раКЬ('изег_саКа1од_ир/', чгемз.изег_саКа1од_ир, паше=’изег_саКа1од_ир'),

По этому маршруту вызывается представление изег_саКа1од_ир (листинг 6.21).

Листинг 6.21. Представление изег_са(а1од_ир

###############################

#	Показать каталог-мегаменю #

#	##############################

(ЛеГ изег_саКа1од_ир(гедиезК):

#	получить имя пользователя системы

#	изег = гедиезК.изег # снять комментарий в реальном проекте

изег = изег .оЬдесКз .деК (1(1=2) # удалить строку в реальном проекте

пате_саК = 'Все продукты'

#	Запомнить тип каталога для корзины

гедиезК.зезз!оп['К1р_саК'] = 'шеда_шепи'

ргоНисКз = РгосЬсК.оЬдесКз.а11()

#	Пагинатор

радгпаКог = РадгпаКог(ргоНисКз, рег_раде=30)

раде_пишЬег = гедиезК.СЕТ.деК('раде')
раде_оЬ] = радгпаКог.деК_раде(раде_питЬег)

сопКехК = {'ргойисКз': ргоНисКз, 'раде_оЬд': раде_оЬ^л 'пагае_саК': пате_саК, 'изег': изег}
геКигп гепНег(гедиезК, "тазКег/д1ача_6/изег_саКа1од_ир.ЬКт1"л сопКехК)

Здесь переменная пате сак получает значение все продукты. Затем из БД подгружается
объект ргоПисКз — все продукты из БД, и создается пагинатор для отображения 30 кар-
точек продуктов на странице. Всё это через объект сопкехк передается в шаблон
и8ег_са1а1од_ир.И1т1 (листинг 6.22).

Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте надо снять
комментарий со строки # изег = гедиезк.изег и удалить или закомментировать строку изег
= изег .оЬдесКз .деК (1(1=2).
Листинг 6.22. Шаблон и8ег_са(а1од_ир.Ыт1

{% ехкепНз ”тазкег/д1ача_6/изег_зНор_тазкег .Нкт1" %}

{% 1оас1 зкаклс %}

{% Ыоск сака1од_ир %}

<сНч с1азз="сопка1пег-Б1иЫ"> <!— начало контейнера—>

<сНч с1азз=”гом кехк-Нагк ту-1"> <!— начало строки —>

<!— Начало каталога категорий —>

<сИч с1азз=’’гом’’>

<сИч с1азз=”со1-2”>

<а НгеБ="{% иг1 ’тазкег:изег_сака1од_ир' %}" с1азз=”Ып Ып-зиссезз Ькп-зт’’>

<1 с1азз=”Ы Ы-сагк4"></1> Все продукты</а>

</Ыч>

<сНч с1азз=”со1-10”>

<И5>Выберите категорию продукта из горизонтального меню</И5>

</Ыч>

</Ыч>

<зсг!рк згс="Нккрз: //сект) з. с!оиЫ1аге. сош/ад ах/ИЬз/ддиегу/1.12.0/д диегу .т!п. д з’’х/зсг1рк>

<Ипк ге1=''зку1езИеек'', Нгек=”{% зкакгс 'сзз/гопгсопз.тгп.сзз' %}”>

<Ипк ге1="зку1езИеек", Нгек="{% зкаЫс 'сзз/зку1е.сзз' %}">

<зсг!рк згс=’’{% зкаЫс ' дз/тедатепы. дз' %}"х/зсг!рк>

<Нг с1азз=”тк-1 тЬ-1”/> <!— Это горизонтальная полоса —>

<скч с1азз=’’тепи-сопка1пег"> <!— Начало мегаменю —>

<сНч с1азз=”тепи”>

{% 1оаН тркк_кадз %}

<и1>

{% гесигзекгее депге %}

<И>

<а Игек=”{% иг! ’тазкег:изег_ргос!иск_ир' Ы=пос1е.Ы %}’’>{{ поНе.пате }}</а>
{% 1Г пок поНе. 1з_1еак_пос1е %}

<и1 с1азз=”сЫ1с1геп">

{{ сЫЫгеп }}

</и1>

{% епсИк %}

</И>

{% епНгесигзекгее %}

</и1>

</Ыч>

</Ыч> <!— Конец мегаменю —>

<Иг с1азз=”тк-1 тЬ-1”/> <!— Это горизонтальная полоса —>

<!— Блок для показа карточек с продуктами —>

{% гпсЫНе ”тазкег/д1ача_6/изег_ргос1иск.Нкт1" %}

<Иг с1азз=”тк-1 тЬ-1”/> <!— Это горизонтальная полоса —>

</Ыч> <!— конец строки —>

</Ыч> <!— конец контейнера—>

{% епсЫоск сака1од_ир %}
В этом шаблоне создана центральная панель, в которой отображено мегаменю катего-
рий продуктов. В центральной панели также присутствует блок для показа карточек
с продуктами, в который вставлено подключение к шаблону и8ег_ргос1ис1.И1т1 (см. лис-
тинг 6.12).

В первой строке центральной панели шаблона и8ег_са1а1од_ир.И1т1 имеется кнопка все
продукты. С этой кнопкой связана следующая ссылка:

<а Ьгеб="{% иг1 'шазбег:изег_саба1од_ир' %}" с1азз="Ьбп Ьбп-зиссезз Ьбп-зт">

<1 с1азз=”Ы Ы-сагб4 "></!> Все продукты</а>

По ЭТОЙ ссылке В конечном итоге будет вызвано представление изег_саба1од_ир, в кото-
ром будут сняты фильтры на категории продуктов, и в центральной панели отобразятся
все карточки продуктов из БД.

В центральной панели шаблона и8ег_са1а1од_ир.К1т1 в мегаменю с наименованием кате-
гории продукта связана следующая ссылка:

<а Ьгеб="{% иг1 'шазбег:изег_ргобисб_ир' 16=побе.1б %}">{{ побе.паше }}</а>

По ЭТОЙ ссылке активируется ИВЪ-маршруТ изег_ргобисб_ир (листинг 6.23), в который
передается идентификатор выбранной категории (1б=побе.1б).

^Листинг 6.23. 1Ж1-маршрут изег ргос1ис1 ир

#		 список товаров выбранной категории из каталога ир—

рабЬ (’ изег_ргобисб_ир/<1пб: 16>/', чбемз. изег_ргобисб_ир, паше=' изег_ргобисб_ир'),

По этому маршруту активируется представление изег_ргобисб_ир (листинг 6.24).

Листинг 6.24. Представление изег_ргос!ис1_ир

######################################

#	Показать продукты из каталога-бгее #
######################################
беб изег_ргобисб_ир(гедиезб, 16=0):

#	получить имя пользователя системы

#	изег = гедиезб.изег	# снять комментарий в реальном проекте

изег = Пзег.оЬдесбз.деб(16=2) # удалить строку в реальном проекте

И 16 == 0: # если категория не выбрана

16_саб = гедиезб.зеззбоп['16_саб']

е1зе: # если пришел вызов из каталога продуктов

16_саб = 16

#	запомнить категорию выбранного продукта

гедиезб.зеззбоп[’16_саб'] = 16_саб

зе1есб_саб = Сепге_т.оЬдесбз.деб(16=16_саб)

16-Гоб-Саб = зе1есб_саб.рагепб_16

И 16_го6_саб 1з Попе:

16 гоб саб = 1
#	Получить запись с параметрами родительской категории

зе1есб_гоб_саб = Сепге_т.оЬдесбз.а11()

#	категории, в которые входит выбранная категория и все дочерние категории
сабедогбез = зе1есб_саб.деб_6езсепбапбз (1пс1ибе_зе1б=Тгие)

#	продукты, которые входят в выбранную категорию и во все дочерние

И 16 != 0: # если категория выбрана

ргобисбз = Ргобисб.оЬ^есбз. ГПбег (депге_1п=сабедог1ез) .ббзббпсбО .огбег_Ьу('пате')

пате_саб = зе1есб_саб.пате

е!зе: # если категория не выбрана

ргобисбз = Ргобисб.оЬдесбз.а!1()

пате_саб = "Все продукты"

#	Пагинатор

радбпабог = Радмтабог(ргобисбз, рег_раде=30)

раде_питЬег = гедиезб.СЕТ.деб('раде')

раде_оЬд = радбпабог.деб_раде(раде_питЬег)

сопбехб = {"ргобисбз": ргобисбз, "раде_оЬд": раде_оЬ^,

"пате_саб": пате_саб, "1б_саб": 1б_саб, 'изег': изег,
"зе!есб_гоб_саб": зе!есб_гоб_саб, "1б_гоб_саб": 1б_гоб_саб}
гебигп гепбег(гедиезб, "тазбег/д1ача_6/изег_саба1од_ир.Ьбт1", сопбехб)

Это представление получает выбранную категорию продукта, и в объект ргобисбз загру-
жаются все продукты выбранной категории и всех дочерних категорий (если они есть).
Иными словами, на базу данных с продуктами накладывается фильтр по выбранной
категории продукта из древовидного каталога в виде мегаменю. Затем все полученные
параметры загружаются в словарь сопбехб, который передается в шаблон и8ег_са1а1од_
ир.И1т1 (см. листинг 6.22), где и отображаются карточки продуктов с учетом фильтра.

Пояснение

Этот код работает в рамках интерактивной цифровой книги. В реальном проекте надо снять
комментарий со строки # изег = гедиезб.изег и удалить или закомментировать строку изег
= Пзег.оЬдесбз.деб(16=2).

Итак, к этому моменту создан набор модулей, которые обеспечивают вывод страницы
магазина пользователя с выборкой и фильтрацией продуктов по их категориям в древо-
видном мегаменю. Теперь можно проверить работу этих модулей.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

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

При первоначальной загрузке шаблона и8ег_8Иор_та81ег.И1т1 (магазин пользователя)
в окне браузера он будет выглядеть так, как показано на рис. 6.14.
ЕЛ Выбор типа каталога продуктов ’

Магазин- 71сГог	р Корзина->0

Доступных товаров - 6

» Заказ->0

О Пскулки-^0

К КОВОКДБ5Д

Рис. 6.14. Шаблон и8ег_8Нор_та81ег.Н1т1 (магазин пользователя) при первоначальной загрузке

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

Как здесь можно видеть, левая боковая панель пока пустая (ее, собственно, еще вовсе
нет), а в центральной панели показаны некоторые элементы персонального магазина
пользователя:

♦	кнопка Выбор типа каталога продуктов;

♦	имя владельца персонального магазина;

♦	количество доступных товаров в БД;

♦	ссылка на корзину покупателя;

♦	ссылка на активный заказ покупателя (неоплаченный);

♦	ссылка на покупки клиента (оплаченные заказы);

♦	баннер платежной системы, с которой работает магазин пользователя.

Ссылки на корзину, заказ и покупки мы пока не рассматриваем (еще не описаны соот-
ветствующие программные модули), а если нажать на кнопку Выбор типа каталога
продуктов, появятся следующие опции выпадающего меню (рис. 6.15).

^Г] Выбор типа каталога продуктов т

Корзина-> 0

Левая панель (свернута)

Левая панель (раскрыта)

Верхняя панель	^-°РУГ|9

Рис. 6.15. Опции выбора типа каталога продуктов

Если выбрать здесь опцию Верхняя панель (показать каталог категорий продуктов
в виде древовидного мегаменю), откроется шаблон и8ег_са1а1од_ир.И1т1 (рис. 6.16).

Как здесь можно видеть, левая боковая панель пустая, а в центральной панели отобра-
жаются категории продуктов в виде мегаменю, ниже которого находятся карточки
с информацией о продуктах. При первоначальной загрузке этого шаблона на него будут
выведены карточки всех продуктов из БД (с учетом постраничной пагинации). Если же
в каталоге категорий продуктов выбрать одну из категорий — например, Рыбные, то
содержимое центральной панели изменится и в ней будут показаны продукты выбран-
ной категории, включая дочерние (рис. 6.17).
Я Выбор типа каталога продуктов ’

Магазин-\ПсЬг	& Корзина->0	Заказ->0

Доступных товаров - 6

ОПокупки-Х)	РОВОКР*

У! Все продукты

Выберите категорию продукта из горизонтального меню

Заморозка Кондитерские Консервы Макаронные Молочные Мясные Напитки Напитки горячие Овощи Приправы, соусы Рыбные Семечки, орехи

Выбрана категория: Все продукты

В корзинуП

Рыбные

ВкорзинуС7

Рыба копченая

Рис. 6.16. Шаблон изег_са1а1од_ир.Н1т1 при первоначальной загрузке

Тд1 Все п родукты

Выберите категорию продукта из горизонтального меню

Заморозка Кондитерские Консервы Макаронные Молочные Мясные Напитки Напи'

Выбрана категория: Рыбные

Стр. 1 из1.
Если теперь в дочерних категориях мегаменю выбрать конечную ветку — например,
Рыба соленая, то в центральной панели останутся карточки с продуктами только этой
категории (рис. 6.18).

Все продукты

Выберите категории

Заморозка Кондитерские Консервы Макаронные

Выбрана категория: Рыба соленая

Стр. 1 из1.

Рис. 6.18. Шаблон и8ег_са1а1од_ир.Н1т1 при выборе категории продуктов Рыба соленая

© Наздд

Наименование продукта-Сельдь соленая

Цена -₽150.00

Описание продукта

Сельдь пряного посола в упаковке, Вес 300 гр.
Обратите внимание, что наименование продукта представляет собой ссылку, при пере-
ходе по которой откроется страница с полноразмерной фотографией и полной инфор-
мацией о данном продукте (рис. 6.19).

На рисунках, приведенных в предыдущих разделах, в карточках продуктов имеется
кнопка В корзину — она предназначена для того, чтобы пользователь положил этот
товар в корзину (создал предварительный заказ). Настало время создать программный
код, который обеспечит формирование корзины (предварительного заказа).

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

При формировании корзины покупатель должен иметь следующие возможности:

♦	добавить товар (продукт) в корзину;

♦	скорректировать информацию о товарах (продуктах), находящихся в корзине;

♦	удалить товар (продукт) из корзины.

Создадим программные модули для выполнения всех этих действий.

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

В шаблоне с карточками продуктов и8ег_ргос1ис1.111т1 (см. листинг 6.12) имеется кнопка
в корзину (фактически их там две, одна — традиционная — закомментирована). При на-
жатии на эту кнопку выбранный продукт будет добавлен в корзину. С традиционной
(закомментированной) кнопкой связана следующая ссылка:

ЬгеВ=’’{% иг1 'шазбег:сагб' 16=шЬ. 1с1 %}"

С кнопкой, для которой предусмотрен вращающийся спин, связана следующая ссылка:

асб1оп="{% иг1 'шазбег:сагб' 16=тЬ. 1с1 %}"

По этим ссылкам вызывается ПВЪ-маршрут сагб (листинг 6.25), в который передается
идентификатор выбранного продукта (1б=чоЬ.1б).

Листинг 6.25. 1Ж1_-маршрут саг!

#	положить товар в корзину

рабЬ (' сагб/<1пб: 1с1>/', чбемз. сагб, паше=' сагб'),

По этому маршруту активируется представление сагб (листинг 6.26).

Листинг 6.26. Представление саН

################################

#	Добавление товара в корзину #
################################
беб сагб(гедиезб, 16):

#	в объект Продукты получить данные о продукте
ргобисб = деб_оЬдесб_ог_404(Ргобисб, 16=16)
#	создать объект пользователь

#	изег = гедиезб.изег	# снять комментарий в реальном проекте

изег = изег.оЬдесбз.деб(66=2) # удалить строку в реальном проекте
# Добавить или открыть заказ

огбег, сгеабеб = Ргобисб_Огбег.оЬдесбз.деб_ог_сгеабе(изег=изег, збабиз=’сагб')

#	Проверить, задан ли номер заказа
пит_огбег = огбег.пит_огбег

66 пит_огбег бз Попе:

# формируем и записываем номер заказа

6 = огбег.сгеаббоп_6абе

6 = б.збгбббте('%6/%т/%У')

пит_огбег = збг(огбег.66) +	+ збг(изег.66) +	+ 6

огбег.пит_огбег = пит_огбег

огбег.заче()

# Проверить, есть ли товар в заказе

огбег_1бет = Ргобисб_0гбег1бет.оЬдесбз.ббббег(ог6ег_б6=огбег.66, рго6исб_16=бб)
66 1еп(огбег_1бет) == 0:

#	товара нет в заказе - добавить

огс1ег_1бет, сгеабеб = Ргобисб_0гбег1бет.оЬдесбз .деб_ог_сгеабе (ог6ег_16=огбег.б6,
рго6исб_б6=б6,
ргбсе=ргобисб.ргбсе,
диапбббу=1,
изег_16=изег.66)
ебзе:

#	товар есть в заказе - предупреждаем, что товар уже лежит в корзине
теззадез.зиссезз(гедиезб, 'Этот товар уже добавлен в корзину')

#	расчет суммы заказа

ог6ег_ббет = Рго6исб_0г6ег1бет.оЬдесбз.ббббег(огбег_б6=ог6ег.66)
з = 0

бог ббет бп огбег_ббет:

з=з+ ббет.диапбббу ★ ббет.ргбсе

#	обновить сумму заказа в заказе

ту_огбег = Рго6исб_0г6ег.обдесбз.деб(изег=изег, збабиз='сагб')

ту_огбег.атоипб = з
ту_огбег.заче()

#	Получить тип выбранного каталога из переменной сессии
ббр_саб = гедиезб.зеззбоп['ббр_саб']

#	вернуться к списку продуктов в магазине
бб ббр_саб == 'бгее':

гебигп геббгесб(гечегзе('тазбег:изег_сабабод_бгее'))

еббб ббр_саб == 'збаб':

гебигп геббгесб(гечегзе('тазбег:изег_сабабод_збаб'))
ебзе:

гебигп геббгесб(гечегзе('тазбег:изег_сабабод_ир'))
Это представление выполняет несколько функций:

♦	получить данные о продукте (объект ргойисг);

♦	получить данные о пользователе (объект изег);

♦	добавить или открыть заказ (на этом этапе — корзину);

♦	сформировать номер заказа (если его еще нет);

♦	проверить, есть ли выбранный товар в корзине (если товар уже добавлен в корзину,
то выдать соответствующее предупреждение);

♦	выполнить расчет суммы заказа (стоимость продуктов в корзине);

♦	вернуться к списку товаров выбранной категории.

Представление сагг получает идентификатор продукта, который нужно добавить в кор-
зину (м), загружает в объект ргойисг сведения об этом продукте, после чего ему нужно
получить данные о зарегистрированном пользователе системы (объект изег).

Примечание

В цифровой интерактивной книге в качестве примера из БД выбирается тестовый поль-
зователь с 1с1=2, а в реальном приложении нужно использовать инструкцию изег = гедиезС.

изег.

Затем добавляется новый заказ (корзина) или открывается существующий. Если заказ
создан и у него нет номера, то формируется номер заказа. В нашем приложении номер
заказа составной и уникальный — он складывается из 16 заказа в БД, Ш пользователя
и текущей даты.

И Все
продукты

выбор типа каталога продуктов ’

» Закаа->0

Категории продуктов

Заморозка ►

Кондитерскиа >
Консервы ►
Макаронные ►
Молочные ►
Мясные

Напитки ►

Напитки горячие ►

Овощи ►

Приправы, соусы к
Рыбные к

Семечки ОРЁМИ >
Сладости ►
Хлебобулочные ►

Магазин-	д Корзина-? 5

Доступных товаров - 6 а

Выбрана категория: Все продукты

Рис. 6.20. Ссылка на корзину с указанием количества добавленных в нее продуктов
Далее проверяется условие — есть ли выбранный продукт в заказе (в корзине). Если
его в заказе (в корзине) нет, то он добавляется в таблицу (в модель) РгобисР_0гбегкет.
Если же заданный продукт уже добавлен в корзину, то эта процедура пропускается,
И формируется текст сообщения Этот товар уже добавлен в корзину.

На следующем этапе делается пересчет суммы заказа (стоимость всех продуктов кор-
зины), и она обновляется в таблице (в модели) Ргобисб_0гбег.

В завершение из переменной сессии определяется, с каким типом каталога категорий
продуктов работал пользователь, и делается возврат к соответствующему шаблону. При
этом отрабатывается функция контекстного процессора сагб_ко1, в которой определяет-
ся количество продуктов, добавленных в корзину пользователя, и это значение автома-
тически обновляется в поле {{сагг_ко1}} шаблона и8ег_8Иор_та81ег.И1т1 (рис. 6.20).

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

Когда корзина сформирована, мы должны предоставить пользователю возможность
посмотреть ее содержание и выполнить некоторые действия: изменить количество
товара в корзине, удалить товар из корзины или на основе корзины сформировать
окончательный заказ. Создадим набор программных модулей, которые реализуют все
эти действия.

На странице магазина пользователя (в шаблоне и8ег_8Иор_та81ег.И1т1) имеется ссылка
корзина<колитество товаров>, в которой показано количество товаров в корзине:

<а Ьгеб="{% иг1 'шазбег:саг6_е616' %}"><! с!азз="Ы Ы-сагб"></1> Корзина->{ {сагб_ко1} }</а>

По этой ссылке активируется ИВЕ-маршрут сагб есЛб (листинг 6.27).

Листинг 6.27. 11КЬ-маршрут саН_ес1й

#	Страница для показа и редактирования товара в корзине
раРЬ (’ сагб_ес11б/ ', чтемз. сагР_есПб, паше=1 сагб_есПб1),

По этому маршруту вызывается представление сагб_есПб (листинг 6.28) для просмотра
и корректировки товаров в корзине

Листинг 6.28. Представление саг1_ес1й

#	вызов страницы для редактирования корзины #

беб сагб_есПб(гесрезб):

#	получить 16 пользователя

#	изег_16 = гедиезб.изег.16 # снять комментарий в реальном проекте
изег_16 =2 # удалить строку в реальном проекте

#	проверить, не пустая ли корзина

огбег = Ргобисб-Огбег.оЬдесбз.Шбег(изег_16=изег_16, збабиз=’сагб’)
И 1еп(огбег) == 1:

#	получить заказ на продукты, которые в корзине заказа

огбег = Ргобисб_Огбег.оЬдесбз.деб(изег_16=изег_16, збабиз='сагб')
зиш_огбег = огбег.ашоипб
#	расчет суммы по элементам заказа

ог6ег_1бет = Рго6исб_0г6ег!бет.оЬдесбз. УПбег (ог6ег_б6=ог6ег.16)
5 = []

Рог ббет 1п ог6ег_1бет:

з .аррепбЦбет.диапбббу * 1бет.рг1се)
ебзе:

#	Сообщить, что корзина пустая

гебигп гепбег(гедиезб, 'тазбег/дбача_6/сагб_е6бб.Ьбтб')

# Сохранить текущий заказ в сессии
гедиезб.зеззбоп['ог6ег_б6'] = огбег.66
# получить список товаров из элементов заказа
ргобисбз = Рго6исб_0г6ег1бет.оЬдесбз.ббббег(ог6ег_б6=огбег.66)
туббзб = гбр(ргобисбз, з)

сопбехб = {'огбег': огбег, 'ргобисбз': ргобисбз, ’зит_огбег': зит_огбег,
'тапу' : тапу, 'туббзб' : туббзб}

гебигп гепбег(гедиезб, "тазбег/д6ача_6/сагб_е6бб.Ьбтб", сопбехб)

Здесь объект изег бб получает идентификатор текущего пользователя, затем из БД
загружается набор параметров корзины, которые в итоге передаются в словарь сопбехб,
а этот словарь передается в шаблон сай_ес1К.К1т1.

В представлении сагб еббб нужно обратить внимание на одну особенность: в словарь
сопбехб передается объект тапу (валюта), однако в теле представления объект тапу не по-
лучает значения. Разберемся, что это за объект и откуда он взялся. Этот объект содер-
жит значок валюты — специальный знак рубля, доллара, евро и т. п. Для того чтобы
этот объект был доступен в любом модуле проекта, его нужно определить в файле
8ей1пд8.ру (листинг 6.29).

Листинг 6.29. Определение объекта тапу в файле зеШпдз.ру

#	символ обозначения валюты

#	МАМУ = 'Е'

#	МАМУ = '$'

#	МАМУ = ’€'

МАМУ = '₽'

Как можно видеть, здесь активной валютой является российский рубль. Но чтобы объ-
ект тапу стал доступным для всех представлений приложения, его нужно импортировать
из файла 8ей1пд8.ру (листинг 6.30).

Листинг 6.30. Импорт объекта МАК1У из файла зеКтдз.ру

#	обозначение валюты из файла зебббпдз.ру

бгот 6^апдо.сопб бтрогб зебббпдз

тапу = зебббпдз.МАМУ

В завершение представление сагб еббб загружает шаблон сай_ес1И.И{т1 (листинг 6.31).
Листинг 6.31. Шаблон саН есШ.КТт!

{% ехкепйз "тазкег/д1ача_6/изег_зкор_тазкег .Икт!” %

{% Ыоск сопкепк %}

<скч с!азз=”гом кехк-зкагк кехкЫагк 1И-2 тх-2">

<скч с1азз=”со1 кехк-зкагк кехк-скагк р-1">

<а кгек=”{% иг1 ’тазкег:изег_зИор_тазкег' %}" с!азз=”Ькп Ькп-зиссезз Ькп-зт”>

<-Вернуться в магазин</а>

</Ыч>

</Ыч>

<скч с1азз=”гом кехк-зкагк 1Н-2 тх-2">

<Н5>Список товаров в корзине для редактирования</Н5>

</Ыч>

<сИч с1азз=”со1-8 тх-2”>

{% 1Г ргоЫскз %}

<каЫе с1азз=”каЫе каЫе-зкгтрес! каЫе-ЬоЫегес! кехк-зкагк каЫе-зиссезз">

<ккеас1>

<кг>

<кк>1с1</кк>

<кЬ>Название продукта</кк>

<кЬ>Фото</кЬ>

<кЬ>Цена</кЬ>

<кЬЖол-во</кЬ>

<кЬ>Сумма</кЬ>

<кЬ>Удалить</кЬ>

</кг>

</ккеас1>

<кЬос!у>

{% Вог оЬ], з 1п туИзк %}

<кг>

<кс!> {{оЬз . Ы}}</кс!>

<	!— Название продукта —>

<кс1ха кгек="{% иг! ’тазкег :ргос!иск_с1ека11' рк=оЬ] .ргоНиск.Ы %}”>

{{оЬд . ргоНиск. пате}} </а></кс!>

<	!— Фото продукта —>

{% 1к оЬз.ргоНиск.ттаде %}

<кс!><1тд згс="{{ оЬд .ргосАиск.таде.иг!}}” а1к=”соппеск” зку1е=”тах-ке1дкк: 100рх’’>

</кс!>

{% е!зе %}

<кс!><р>Нет фото</рх/кс!>

{% епсИк %}

<	!— Цена —>

<кс!>{{тапу}} {{оЬд .ргтсе}}</кс!>

<!— Количество —>

<кс1ха кгек="{% иг! ’тазкег: ко 1_ргос1иск_ирс1аке' тЫоЬ^.Ы %} ”>{ {оЬ] .диапЫку}}

</ах/кс!>

{# <кс1ха Ьгек=”/ко1_ргос1иск_ирс1аке/{ {оЬд .Ы} }”>{ {оЬд .диапЫку} }</ах/кс!> #}
<!— Сумма —>

<бб>{ {тапу}} {{з}}

<!— Удалить продукт —>

<бб><а ЬгеВ="{% иг1 'тазкег:сагб_ргобисб_6е1' 16=063.16 %}">Удалить</ах/бб>

{# <бб><а ЬгеВ=’7сагб_ргобисб_6е1/{ {оЬд .16}} ">Удалить</ах/бб>#}

</вг>

{% епбВог %}

<бЬобу>

</Ше>

{% е!зе %}

<61V с1азз=”гом бехб-збагб бехб-бапдег 1Ь-2">

<М> В корзине нет продуктов для просмотра и редактирования</Ь4>

</с11у>

{% епббб %}

</с11у>

<61V с1азз=”гом бехб-збагб 1Н-2 тх-2">

<баЬ1е с1азз="баЬ1е бехб-збагб">

<бг>

{% 1В зпт_ог(1ег > 0 %}

<ббхЬ5>ИТ0Г0-{{тапу}} {{зпт_огс1ег} }</Ь5х/б6>

<ббха ЬгеВ="{% иг1 'тазбег:таке_огс!ег' %}">Создать заказ</ах/бб>

{% епббВ %}

</бг>

</баЬ1е>

</сНу>

<!— Сообщение о том, что у пользователя есть активный заказ —>

{% 6В теззадез %}

<иб с1азз=”теззадез бехб-збагб бехб-6апдег">

{% Вог теззаде бп теззадез %}
«13 с!азз=”{{ теззаде.бадз }}">
«эиШ)п с1азз=”ЬВп Ыт-бапдег Ыт-зт" опс11ск="й1збогу.Ьаск() "х-Назад</ЬиШт>
{{ теззаде|заВе }}

</ЬЗ>

{% епбВог %}

</и!>

{% епсНВ %}

<!— Конец сообщения —>

{% епбЫоск сопбепб %}

В этом шаблоне есть несколько ссылок:

♦	на названия продуктов;

♦	на количество товаров в корзине;

♦	на ОПЦИИ Удалить;

♦	на создание заказа.

С названием продукта связана следующая ссылка:

<а ЬгеВ="{% иг! ’тазбег:ргобисб_бебаИ' рк=оЬд.ргобисб.16 %}">{{об].ргобисб.пате}}</а>
По этой ссылке будет показана страница с детальной информацией о продукте (про-
граммный код обработки этой ссылки уже реализован и показан в предыдущих раз-
делах).

Создадим теперь программный код модулей для корректировки количества товара
в корзине.

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

Для корректировки количества товара в корзине необходимо создать соответствующую
форму — Рго6иск_ко1_Мо6е1Гогт (ЛИСТИНГ 6.32).

Листинг 6.32. Форма Ргос1ис1_ко1_Мос1е1Еогт

#	форма для изменения количества продуктов в корзине #
######################################################
Ргот .тобекз трогк Рго6иск_0г6ег1кет

сказз Рго6иск_ко1_Мо6е1Гогт(Рогтз .МобекГогт) :

с1азз Мека:

тобе! = Ргобиск_0гбег1кет
кбекбз = ['диапкбку' ]

В этой форме для корректировки доступно всего одно поле — диапкбсу (количество
товара в корзине).

При активации в шаблоне сай_ес1И.И{т1 ссылка на количестве товаров в корзине имеет
следующий вид:

<	а ИгеР="{% иг1 'тазкег:ко1_ргобиск_ирбаке' 1с1=оЬз . 1(1 %}">{{об].диапккку}}</а>

По ЭТОЙ ссылке активируется ИКЪ-маршруТ ко1_ргобиск_ирбаке (листинг 6.33), в который
передается идентификатор текущего продукта (1б=оЬ}.16).

Листинг 6.33.ЫНЬ-маршрут Ио1_ргос1ис(_ирс1а1е

#	страница для обновления количества товара в корзине

ракк (' ко1_рго6иск_ирбаке/<1пк: 16>/', члемз. ко1_ргобиск_ирбаке, паше=' ко1_ргобиск_ирбаке'),

По этому маршруту вызывается представление ко1_ргобиск_ирбаке (листинг 6.34), в кото-
рое передается идентификатор текущего продукта (1пк:1б).

Листинг 6.34. Представление ко1_ргос1ис(_ирс1а1е

#########################################

#	Изменение количества товара в корзине #
#########################################
бек ко1_ргобиск_ирбаке(гедиезк, 16):

ту_ргос1иск = Ргобиск_0г6ег1кет.оЬдескз.дек(16=16)
# получить наименование продукта

пате_ргобиск = Ргобиск.обдескз.дек(16=ту_рго6иск.ргобиск_16)
1Р гедиезР.теРЬоа == "РОЗТ":

тпзРапсе = РгоаисР_0гаег1Рет.оЬдесРз .деР (рк=1(1)

Рогт = РгоаисР_ко1_Моае1Гогт(гедиезР.РОЗТ, 1пзРапсе=1пзРапсе)

1Р Рогт. 1з_чаИа () :

Рогт.заче ()

зит_гак(гедиезР) # пересчет суммы заказа
# возврат к редактированию корзины

геРигп гесИгесР(гечегзе('тазРег:сагР_есНР'))
е!зе:

Рогт = Ргос1исР_ко1_Мос1е1Гогт(РпзРапсе=ту_рго(1исР)
сопРепР = {"Рогт": Рогт, "пате_ргос!исР": пате_ргос!исР}
геРигп гепйег(гедиезР, "тазРег/д1ача_6/ко1_ргос1исР_Рогт.ЬРт1", сопРепР)

Это представление получает идентификатор текущего продукта (та), на основе кото-
рого в объект ту ргоаиср загружаются сведения о текущем продукте, а в объект
пате ргоаиср— наименование продукта. Затем объекту Рогт передается форма РгоаисР_
ко! моаетгогт, в которую загружаются сведения о текущем продукте. Полученные па-
раметры загружаются в контекстный словарь сопРепР, который передается шаблону
Ио1_ргос1ис1_(огт.111т1 (листинг 6.35).

Листинг 6.35. Шаблон ко1_ргос!ис1_Гогт.Мт1

{% ехРепаз "тазРег/д1ача_6/изег_зНор.ЬРт1" %}

{% Ыоск сопРепР %}

<аРч с!азз="гом РехР-зРагР РехР-аагк 1Ь-2 тх-2">

<аРч с1азз="со! РехР-зРагР РехР-аагк р-1">

<ЬиРРоп с1азз="ЬРп ЬРп-зиссезз ЬРп-зт" опсИск="ЫзРогу.Ьаск() "><-Назад</ЬиРРоп>

</а1ч>

</а1ч>

<агч с1азз="гом РехР-зРагР РехР-аагк 1Н-2 тх-2">

<Рогт асР1оп="" теРЬоа="розР">

{% сзгР_Рокеп %}

<агч с1азз="гом РехР-зРагР 1Н-1">

<р>{{пате_ргоаисР}}</р>

</а1ч>

<РаЬ1е с1азз="РехР-зРагР">

{{ Рогт.аз_РаЬ1е }}

</РаЬ1е>

<а1ч с1азз="со1-3 РехР-зРагР">

<1приР Руре="зиЬт1Р" ча!ие="Сохранить" />

</а1ч>

</Рогт>

</а1ч>

{% епаЫоск сопРепР %}

В этом шаблоне для редактирования доступно всего одно поле — количество продукта
в корзине. После нажатия на кнопку сохранить будет в виде РО8Т-запроса выполнен воз-
врат к представлению ко1_ргоаиср_ирааре, где произойдет обновление количества товара
в корзине и общей суммы заказа.
ДЛЯ пересчета И обновления СуММЫ заказа СЛУЖИТ фуНКЦИЯ зит_гак(гедиезк) (лис-
тинг 6.36).

Листинг 6.36. Функция 8ит_нак

################
# сумма заказа #
################
с!еГ 5Ш_2ак(гедиезк) :

#	создать объект пользователь

#	изег = гедиезк.изег	# снять комментарий в реальном проекте

изег = Пзег.оЬдескз.дек(16=2) # удалить строку в реальном проекте

#	получить 16 заказа из сессии

ог6ег_16 = гедиезк.зеззкоп['ог6ег_16']

#	расчет и обновление суммы заказа

ог6ег_1кет = Рго6иск_0г6ег1кет.оЬдескз.РИкег(ог6ег_16=ог6ег_16)
з = 0

Рог 1кет йп ог6ег_1кет:

з=з+ 1кет.диапк1ку ★ 1кет.рг1се

#	обновить сумму заказа в заказе

ту_ог6ег = Рго6иск_0г6ег.обдескз.дек(изег=изег, зкакиз='сагк')

ту_ог6ег. атоипк = з

ту_ог6ег.заче()
гекигп

Не нужно забывать, что в файле У1е\л/з.ру код функции зит гак должен быть определен до
ТОГО, как написан КОД представления ко1_рго6иск_ир6аке.

Итак, посмотрим, как работают модули корректировки количества продукта в корзине.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

При вызове шаблона и8ег_8Кор_та81ег.Ыт1 (магазин пользователя) в окне браузера он
будет выглядеть так, как показано на рис. 6.21.

ИЗ Выбор типа каталога продуктов

Магазин-VIЛог	д Корзина-*5

Доступных товаров й Удалигь корадну
- 6

Й Заказ->0

ь? Покупки-*^

К ЙОВОКЙ55Й

Рис. 6.21. Ссылка на корзину с пятью продуктами в шаблоне и8ег_8Нор_та81ег.Н1т1

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.
Если здесь щелкнуть левой кнопкой мыши на ссылке корзина->5, будет показан шаблон
сай_ес1И.И{|п1 (рис. 6.22).

Как здесь можно видеть, в шаблоне в виде таблицы выведен список товаров, находя-
щихся в корзине. Под ним приведена сумма предварительного заказа и ссылка Создать
заказ. В каждой строке таблицы наименование продукта и количество продукта в кор-
зине представлены в виде ссылок.

Рис. 6.22. Шаблон саг1_ес1И.Н1т1 со списком продуктов, добавленных в корзину

Щелчок левой кнопкой мыши на наименовании продукта откроет страницу с подроб-
ной информацией о нем (рис. 6.23), а на количестве продукта в корзине — шаблон
Ио1_ргос1исЩогт.111т1 для корректировки этого количества (рис. 6.24).

По нажатию на кнопку Сохранить будет выполнен возврат к шаблону са11_ес1И.И1т1, где
будет отображена скорректированная информация (рис. 6.25). Как здесь можно видеть,
в корзине теперь находятся две банки продукта «Скумбрия», изменились сумма за этот
товар и общая стоимость предварительного заказа.
©Назад

Наименование продукта - Пломбир

Цена - ₽90,00

< -Назад

Скумбрия

Описание продукта

Мороженое пломбир. В бумажной упаковке. Вес 80 гр.

Количество продуктов в заказе:*------------------

Измените количество

| Сохранить |

Рис. 6.23. Страница с подробными сведениями
о продукте

Рис. 6.24. Страница для корректировки количества
продукта в корзине (в предварительном заказе)

<-Вернуться а магазин

Список товаров в корзине для редактирования

И Название продукта

2	Вл но 100 оттенков красного

Фото

3 Судак

4 Водка "Русасий характер1

5 Скумбрия

б Пломбир

Цена	Кол. Сумма	Удалить

₽250,00	1	₽2 50.00	Удалить

₽280,00	1	₽280.00	Удалить

₽250,00	1	₽2 50,00	Удалить

₽ 120,00	2	₽240,00 Удалить

₽90.00

₽90,00 Удалить

итого-₽шогоо

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

В шаблоне сай_ес1И.И{|п1 с опцией удалить связана следующая ссылка:

<	а НгеТ="{% иг1 'тазкег:сагк_ргоаиск_ае1' 1с1=оЬз . 1с1 %}">Удалить</а>

По этой ссылке активируется ИКЬ-маршрут сагк_ргоаиск_ае1 (листинг 6.37), в который
передается идентификатор текущего продукта (1а=оЬд ла).

Листинг 6.37.11КЬ-маршрут саг1_ргос1ис1_с1е1

ракН (' сагк_ргоаиск_ае1/<1пк: 1а>/',	. сагк_ргоаиск_ае1, пате=' сагк_ргоаиск_ае1') ,

По этому маршруту вызывается представление сагг_ргоаисг_ае1 (листинг 6.38), в которое
передается идентификатор текущего продукта (йпкла).

Листинг 6.38. Представление саН_ргос1ис(_с1е1

################################

#	удаление продукта из корзины #

#	###############################

бек сагк_ргоаиск_ае1(гедиезк, 16):

#	Получить продукт из корзины (из деталей заказа)

ту_ргоб = Ргоаиск_0гаег1кет.оЬдескз.дек(1а=1а)

#	Получить 1а заказа

огаег_1а = ту_ргоа.огаег_1а

#	сохранить 1а заказа в сессии

гедиезк.зеззлоп['огаег_1а'] = огаег_1а

#	вернулся из формы с вопросом

И гедиезк.текНоа == "РОЗТ":

#	Если нажата отмена, то ничего не делать

И 'по’ 1п гедиезк.РОЗТ:

#	возврат к редактированию корзины

гекигп геаТгеск (гечегзе ('тазкег: сагк_еа1к'))

#	нажата удалить, удаляем продукт

кгу:

ту_ргоа.ае1еРе()
зит_гак(гедиезк) # пересчет суммы заказа
# возврат к редактированию корзины

гекигп геаТгеск(гечегзе('тазкег:сагк_еа1к'))

ехсерк:

гекигп НккрРезропзеПокЕоипа("<Н2>Продукт не найден</Ь2>")

тЬ_1а = ту_ргоа.ргоаиск_1а # 1а продукта (получен из деталей заказа)
рг1се_ргоа = ту_ргоа.рг1се # цена продукта (получена из деталей заказа)
# получить объект продукт из БД

ргоаиск = Ргоаиск.оЬдескз.дек(1а=тЬ_1а) # объект продукт из БД продуктов
кхк1 = 'Наименование товара в корзине'

ае1_ргоа = ргобиск.пате + ', цена - ' + зкг(рг!се_ргоа) + ' руб.'
сопкепк = {"кхк1": кхк1, "ае1_ргоа": ае1_ргоа}
# вызов шаблона с вопросом на удаление из папки без маршрута ПКЬ
гебигп гепбег(гериезб, "тазбег/бе1_уезпо.Ибт1'\ сопбепб)

В этом представлении сначала запоминаются сведения об удаляемом товаре, которые
затем передаются в универсальный шаблон с1е1_уе8по.И1т1 для подтверждения или отме-
ны удаления. Нажатие в шаблоне с1е1_уе8по.И1т1 кнопки Удалить ведет к удалению из
корзины выбранного продукта, а нажатие кнопки Отмена — к отказу от выполнения
процедуры удаления. После удаления продукта из корзины вызывается функция
зит_2ак(гериезб), в которой выполняется пересчет суммы предварительного заказа.

Итак, посмотрим, как работают модули удаления продукта из корзины.

По щелчку на ссылке Удалить в строке шаблона сай_ес1К.И1т1 с продуктом Пломбир
будет вызван универсальный шаблон с1е1_уе8по.И1т1 (рис. 6.26).

Наименование товара в корзине
Пломбир, цена - 90.00 руб.

Удалить запись из БД?

<-Отмена I Удалить I [Ц| Удалить

Рис. 6.26. Шаблон с1е1_уе8по.Н1т1 сданными об удаляемом продукте

По щелчку здесь на кнопке Удалить будет выполнен возврат к шаблону сай_ес1И.И{т1,
в котором строки с этим продуктом уже не будет, а сумма предварительного заказа
окажется пересчитана (рис. 6.27).
6.5.5. Формирование заказа для оплаты на основе набора продуктов,
помещенных в корзину

Когда пользователь завершит формирование корзины, ее нужно трансформировать
в заказ, который можно оплатить. Для этого достаточно в модели Ргобисб_огбег изменить
Значение ПОЛЯ збабиз С сагб на бог_раутепб.

В шаблоне сай_ес1И.И{т1 ссылка на создание заказа имеет следующий вид:

<а Ьгеб=«{% иг1 'тазРег:таке_огбег' %}»>Создать заказ</а>

По ЭТОЙ ссылке активируется ИКЬ-маршруТ таке_огбег (листинг 6.39).

Листинг 6.39. 1Ж1_-маршрут таке_огс1ег

# Создание заказа для оплаты

рабЬ (’таке_огбег/', члемз .таке_огбег, пате='таке_огбег'),

По этому маршруту вызывается представление таке_огбег (листинг 6.40).

Листинг 6.40. Представление таке_огс1ег

###################
# Создание заказа #
###################
беб таке_огбег (гедиезб) :

#	создать объект пользователь

#	изег = гедиезб.изег	# снять комментарий в реальном проекте

изег = Пзег.оЬдесбз.деб(16=2) # удалить строку в реальном проекте

#	проверить есть ли активный заказ к оплате не к доставке

огбег = Ргобисб_Огбег .оЬдесбз. Шбег (изег=изег, збабиз=' бог_раутепб')
1Р Теп(огбег) == 1:

#	предупредить, что предварительный заказ уже есть (удалить или оплатить)

теззадез.зиссезз(гедиезб, 'У пользователя уже есть активный заказ, удалите или оплатите
заказ')

гебигп гепбег(гедиезб, ' тазбег/д1ача_6/сагб_е61б.Ьбт1', {'а1егб_Т1ад': Тгие})

#	гебигп гепбег(гедиезб, 'зНор/изег_зНор.11бт1', {'а1егб_Р1ад': Тгие})
е!зе:

#	Открыть заказ, который пока является корзиной

огбег = Ргобисб-Огбег.оЬдесбз.деб(изег=изег, збабиз='сагб')

#	Изменить статус заказа с "корзина" на "к оплате"
огбег.збабиз = 'Тог_раутепб'
огбег.заче()

#	получить продукты из заказа

огбег_1бет = Ргобисб_0гбег1бет.оЬдесбз.Шбег(ог6ег_16=огбег.16)

#	Получить тип выбранного каталога из переменной сессии
б!р_саб = гедиезб.зеззлоп['б1р_саб']

#	вернуться к списку продуктов в магазине
И б!р_саб == 'бгее':

гебигп гебггесб(гечегзе('тазбег:изег_саба1од_бгее'))
еИР к!р_сак == 'зкак':

гебигп гесПгеск(гечегзе ('шазбег :изег_сака!од_зкак'))
е1зе:

гебигп гесНгеск (гечегзе ('шазбег :изег_сака!од_ир'))

В этом представлении проверяется условие: есть ли у пользователя активные заказы.
Если активных заказов нет, то формируется заказ (огЬег.зикиз = ’Гог_раутепк’) и делается
возврат к одной из страниц со списком товаров магазина. Если у пользователя есть ак-
тивный заказ, то на странице саг1_ес1|Шт1 выдается соответствующее предупреждение.

На странице магазина пользователя и8ег_8Кор_та81ег.К1т1 имеется ссылка на активный
заказ: Заказ-хсуммэ заказа^ в которой показана сумма активного заказа. При переходе по
этой ссылке пользователь может посмотреть содержание активного заказа. С этой
ссылкой связан следующий программный код:

<а ЬгеР=«{% иг1 'тазкег :ту_огс1ег1 %}»><! с!азз=«Ы Ы-сагк4»х/1> Заказ->{{зит_сагк}}</а>

По этой ссылке вызывается ИКЕ-маршрут ту огйег (листинг 6.41).

Листинг 6.41. ЫНЬ-маршрут ту_огс1ег

#	показать активный заказ и перейти к оплате
ракЬ ('ту_огс!ег/', чгемз .ту_огс!ег, пате='ту_огс1ег1),

По этому маршруту вызывается представление ту огйег (листинг 6.42).

Листинг 6.42. Представление ту_огс1ег

#	Страница для показа и оплаты активного заказа #

Пек ту_огс!ег (гедиезк) :

#	Подключение модулей платежной системы гоЬоказза

Ьгорогк тоНиИ.гоЬоказза аз гк

#	Получить текущего пользователя магазина

#	изег = гедиезк.изег	# снять комментарий в реальном проекте

изег = Пзег.оЬдескз.дек(1с1=2) # удалить строку в реальном проекте

#	проверить, есть ли заказ к оплате

огЬег = Ргос1иск_Огс1ег .оЬдескз. ЬПкег (изег=изег, зкакиз=' Гог_раутепк')
1к 1еп(огЬег) == 1:

#	открыть заказ к оплате

огЬег = РгоЬиск_Огс1ег. оЬдескз.дек(изег=изег, зкакиз='Гог_раутепк’)
зит_ко_рау = огЬег.атоипк

#	расчет суммы по элементам заказа

огс!ег_1кет = Ргос1иск_Огс1ег1кет.оЬзескз. П1кег (огс!ег_1с1=огс1ег. 1с1)

з = []

Рог 1кет йп огЬег_1кет:

з.аррепсЦйкет.диапкйку * гкет.рггсе)
е1зе:

# нет активных заказов

гебигп гепйег(гедиезк, 'тазбег/д1ача_6/ту_огс1ег ,Ъкт1')

# получить список продуктов из элементов заказа

ргойискз = РгойискуЭгйегТкет.оЬдескз. Н1кег (огс!ег_1с1=огс1ег .М)

#	проверить, весь ли товар в наличии

ту_ру = 'Уез'

Рог оЬд 1п ргойискз:

гаг = оЬд.ргойиск.озкак - оЬд.диапктку

йк гаг <= 0: # часть товара продана

ту_ру = ’Мо’

теззадез.зиссезз(гедиезк, 'Вы опоздали с оплатой, '

'часть товара уже продана,'

' создайте новый заказ или '

'ждите поступления товара')

# получить текущую дату и время

с!_к = Дакекте. йакекше. пом (.)

с!_к = с!_к + йакекте. к!тес!е1ка (йоигз=20)

с!_к = с!_к. зкгкктте ("%У-%т-%с1 %Н:%М:%5")

#	сформировать ссылку на сервис ВоЬоказза

йк 1з_кезк == 1:

разз_1 = разз1_кезк

е!зе:

разз_1 = разз1

Ипк = гк.депегаке_раутепк_Ипк(1с1_зйор, разз_1, зит_ко_рау, огс1ег.1с1, огс!ег.пит_огс1ег, 1з_кезк)

туИзк = гйр (ргосЬскз, з)

сопкехк = {'огйег': огйег, ’ргосАискз': ргоскюкз, ' зит_ко_рау': зит_ко_рау, ' сЗ_к': с!_к,
'тапу': тапу, 'изег': изег, 'Ипк': Ипк, ’туИзк' : туИзк, 'ту_ру': ту_ру}

гекигп гепйег(гедиезк, "тазкег/д1ача_6/ту_огс1ег.Нкт1", сопкехк)

В этом представлении сначала подключаются модули платежной платформы
КоЬоказза, после чего создается объект изег (зарегистрированный пользователь магази-
на) и проверяется условие, есть ли у него активный заказ. Если активный заказ есть, то
в набор объектов из БД загружаются параметры заказа и выполняется проверка, есть ли
заказанные продукты в наличии (пока пользователь формировал корзину, часть товаров
могли приобрести другие покупатели, и их на складе магазина теперь нет).

Если хотя бы одного элемента заказа в наличии нет, то для пользователя формируется
сообщение: Вы опоздали с оплатой, часть товара уже продана, создайте новый заказ или ждите
поступления товара. Если же весь набор продуктов заказа на складе магазина присутству-
ет, то формируются текущая дата и время и ссылка на сервисы платежной платформы
КоЬоказза.
После этого список продуктов заказа вместе со стоимостью элементов заказа упаковы-
вается В объект туИзк.

В завершение все сформированные объекты упаковываются в словарь сопкехк, который
передается в шаблон ту_огс1ег.К1т1 (листинг 6.43).

Листинг 6.43. Шаблон ту_огс1ег.11(т1

{% ехкепНз ”тазкег/д1ауа_6/изег_з1лор_тазкег.Икт!" %}

{% 1оас1 зкакас %}

{% Ь1оск сопкепк %}

<сЦу с1азз=”гом кехк-зкагк кехк-с!агк Пл-2 тх-2">

<сИу с!азз="со1-2 кехк-зкагк кехк-с!агк р-1">

<Ьиккоп с!азз=”Ькп Ькп-зиссезз Ькп-зт" опсИск="Ызкогу.Ьаск() ”>

<1 с1азз="Ы Ы-аггом-1екк-здиаге"></1> Назад</Ьиккоп>

</сПу>

</сПу>

<сПу с!азз=”гом кехк-зкагк Пл-2 тх-2">

<й5>Сведения о заказе</1л5>

</сПу>

«Цу с!азз="со1-4 тх-2">

{% 1к ргойискз %}

<каЬ1е с!азз="каЬ1е каЫе-зкгарес! каЫе-Ьогс1егес1 кехк-зкагк каЬ1е-зиссезз”>

<ккеас1>

<кг>

<кЬ>Номер заказа</к1л>

<кЬ>Способ оплаты</к1л>

</кг>

</ккеас1>

<кЬос!у>

<кг>

<кс!> {{огйег. пит_огс1ег}} </кс1>

<кс!>Пластиковой картой</кс1>

</кг>

<кЬос!у>

</каЬ1е>

{% епсПк %}

</сПу>

<сПу с!азз=”гом кехк-зкагк Пл-2 тх-2">

<й5>Список товаров в заказе</1л5>

</сПу>

<сПу с1азз="со!-8 шх-2">

{% 1к ргойискз %}

<сПу зку1е="оуегк!ом:зсго11;">

<каЬ1е с!азз="каЬ1е каЫе-зкгтрес! каЫе-Ьогс1егес1 кехк-зкагк каЬ1е-зиссезз">
<У1еас1>

<кг>

<кЬ>№пп</кЬ>

<кЬ>Название продукта</кк>

<Ш>Фото</Ш>

<Ш>Цена</Ш>

<кЬЖол-во</кЬ>

<кЬ>Сумма</кЬ>

</кг>

</1±еас1>

<кЬос!у>

{% Вог оЬ^ л з 1п туИзк %}

<кг>

<	Ы> {{ВогВоор. соипкег}} </к<1>

<кс!ха ЪгеВ="{% иг! 'тазкег:ргос!иск_с1екаВ1' рк=оЬ] . ргоаиск. Вс1 %}">

{{оЬд . ргойиск. пате}} </ах/кс!>

{% 1В оЬ].ргоаиск.ттаде %}

<кдхВтд згс="{{ оЬд . ргоаиск. Втаде. игВ}}'' аВк=”соппеск”

зкуВе="тах-]леВдк1к:100рх"х/кс1>

{% еВзе %}

<кс1хр>Нет фото</рх/кс!>

{% епсНГ %}

<	ксВ> { {тапу}} {{оЬд .ргтсе} } </кс!>

<	ксВ> { {оЬд .диапкФку} }</Ы>

<	Ы>{ {тапу}} {{з}}

</кг>

{% епсИог %}

<кЬос!у>

</каЫе>

</сНу>

{% е!зе %}

<сНу с1азз=”гом кехк-зкагк кехк-с!апдег 1И-2">

<Ъ4> У пользователя нет активных заказов</к4>

</сНу>

{% епсНк %}

</сНу>

<сНу с1азз="гом кехк-зкагк 1И-2 тх-2">

{% 1к ргойискз %}

<Ъ5>ИТ0Г0 - {{тапу}} {{огс!ег. атоипк} }</Н5>

<Ъ5>ВСЕГ0 к оплате- {{тапу}} {{зит_ко_рау}}</Н5>

{% епсНк %}

</сНу>

<сИу с1азз=”гом кехк-зкагк 1И-2 тх-2">

<сИу с1азз=”со1-3 кехк-зкагк 1И-2 тх-2">

<каЫе с1азз=”каЫе кехк-зкагк">
<бг>

<ббха Ьгеб="{% иг1 'тазбег :рау_огбег' %}">Оплатить заказ (успешно) </ах/бб>

<бб><а Ьгеб="{% игб 'тазбег:рау_огбег_Ьаб' %}”>0платить заказ (ошибка) </ах/бб>
</бг>

</баЬбе>

</с1гу>

</б1У>

<ббу с1азз=”гом бехб-збагб 1Н-2 тх-2">

<ббу с1азз="со!-хз-12 со1-зт-5 соб-тб-4 со!-1д-2 бехб-епб">

<а Ьгеб="{{Ипк}} ” сбазз="Ьбп Ьбп-зиссезз ту-1">

<б с!азз=”Ы Ьб-сгеббб-сагб-2-бгопб"х/б> Оплатить заказ</а>

</сНу>

«Ну с!азз="со1-хз-12 со1-зш-5 соб-тб-4 со!-1д-2 бехб-епб">

<бтд згс=”{% збаббс 'бтадез/КоЬорау.дрд' %}" с1азз="бтд-ббибс1">

</сНу>

</сНу>

<!— сообщение о невозможности оплаты, т. к. товара уже нет на складе —>

<сНу с1азз=”гом бехб-збагб бехб-с!апдег">

{% бб ту_ру == ’Мо’ %}

{% бб теззадез %}

<иб с!азз="теззадез бехб-збагб бехб-бапдег">

{% бог теззаде бп теззадез %}

<ЬЗ с!азз="{{ теззаде.бадз }}">

<Ьиббоп с!азз=”Ьбп Ьбп-бапдег Ьбп-зт" опсббск="Ьбзбогу.Ьаск()">

<-Назад</Ьиббоп>

{{ теззаде| забе }}

</ЬЗ>

{% епббог %}

</и!>

{% епббб %}

{% епббб %}

</ббу> <!— Конец сообщения —>

{% епбЬбоск сопбепб %}

В этом шаблоне имеются две таблицы: со сведениями о заказе (номер заказа и способ
оплаты) и с продуктами, которые включены в заказ. После второй таблицы выводится
итоговая сумма К оплате. Далее следуют две ссылки: Оплатить заказ (успешно) И Оплатить
заказ (ошибка) — они служат для отладки работы модулей, которые будут обрабатывать
ответ от платежной платформы. При переходе по этим ссылкам реального обращения
к платежной платформе не произойдет, а будет выполнена соответственно: имитация
ответа от платежной платформы об успешной оплате заказа банковской картой или
имитация ответа о том, что оплата заказа банковской картой не прошла.

Пояснение

Оплата заказа банковской картой на платежной платформе КоЬокавва может производить-
ся в двух режимах: тестовой оплаты и реальной оплаты. Подробные сведения об этих
режимах и параметрах платежной системы КоЬокавва приводятся в разд. 6.5.8-6.5.11.
Реальное обращение к платежной платформе КоЬоказза будет происходить при нажа-
тии на кнопку оплатить заказ. С этой кнопкой связана следующая ссылка:

<а ЬгеЕ=” {{Ипк}} ” с1азз=”ЬРп ЬРп-зиссезз шу-1">

<1 с1азз=”Ы Ы-сгеа1Р-сага-2-ЕгопР"></1> Оплатить заказ</а>

То есть в ней указана переменная шаблона {{Ипк}}, значение которой присваивается
В представлении ту_огаег.

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

Сведения о продуктах в корзине и в предварительном заказе хранятся в одной модели
(таблице) — РгоаисРз_огаег. Корзину от предварительного заказа и от оплаченного заказа
(покупки) можно отличить по содержанию поля зРаРиз. У корзины это поле имеет зна-
чение сагр, у предварительного заказа — Еог_раутепр (к оплате), у оплаченного заказа —
раШ (оплачен). Перечень товаров, которые находятся в корзине, в предварительном за-
казе и в оплаченном заказе содержится в модели (таблице) РгоаисРз_огаег1Рет.

Таблица РгоаисРз_огаег связана с пользователем системы и зависима от него по схеме
каскадного удаления — т. е. при удалении пользователя автоматически будут удалены
и все его заказы. При этом сама таблица РгоаисРз_огаег является главной сущностью для
таблицы с элементами заказов РгоаисРз_огаег1Рет, которая, будучи дочерней по отноше-
нию к таблице РгоаисРз_огаег, также связана с ней по схеме каскадного удаления — т. е.
при удалении заказа автоматически будут удалены и все элементы заказа. Кроме того,
элементы заказа связаны с родительской таблицей РгоаисРз (продукты) по схеме связи
рротест, определяющей запрещение удаления продукта в том случае, если он присутст-
вует в одном из заказов.

Таким образом, для удаления корзины, предварительного заказа или оплаченного зака-
за достаточно удалить запись из таблицы РгоаисРз_огаег — при этом в связанной таблице
РгойисЕз_огс1егкет все связанные записи должны удалиться автоматически.

Кнопки для удаления активного заказа и корзины находятся на странице магазина
пользователя в шаблоне и8ег_8Кор_та81ег.И1т1:

<а ЬгеЕ="{% иг! 'тазРег: огс!ег_с1е1' 1(1=1 1а_хак=1а_сагР_т %}’’
с1азз=”ЬРп ЬРп-магп1пд ЬРп-зт ту-1">

<1 с1азз=”Ы Ы-РгазЬЗ”></1> Удалить корзину</а>

<а ЬгеЕ="{% иг1 'тазРег: огс!ег_с1е1' 1с1=2 1с1_хак=1с1_хак_т %}’’
с1азз=”ЬРп ЬРп-маггппд ЬРп-зт ту-1">

<1 с1азз=”Ы Ы-РгазЬЗ”></1> Удалить заказ</а>

Здесь активируется ИКЬ-маршрут огаег_ае1, но в него передаются разные значения
аргументов:

4 Удалить корзину — идентификатор нажатой кнопки ьа=1 и идентификатор удаляемой
записи 1(1_2ак=1с1_сагр_т (идентификатор корзины);

♦ Удалить заказ — идентификатор нажатой кнопки 1(1=2 и идентификатор удаляемой
записи 1(1_2ак=1(1_2ак_т (идентификатор активного заказа).

То есть в обоих случаях срабатывает ИКЬ-маршрут огаег_ае1 (листинг 6.44).
Листинг 6.44.11КЬ-маршрут огс1ег_с1е1

# Удалить корзину(заказ)

рабб (' огаег_аеб/<бпб: 1с1>/<1ггЬ: ба_хак>/', чбемз. огаег_аеб, пате= ’ огс!ег_с1е1'),

Этот маршрут принимает два параметра: бпб:ба — идентификатор нажатой кнопки и
бпб:ба_гак— идентификатор либо корзины, либо предварительного заказа.

По этому маршруту вызывается представление огаег_аеб (листинг 6.45).

Листинг 6.45. Представление огс1ег_с1е1

##############################################

#	Удаление корзины (заказа) с подтверждением #
##############################################

#	Здесь 1а - номер нажатой кнопки в шаблоне, ба_хак - 1а корзины или заказа

аеб огаег_ае1(гедиезб, ба=Еабзе, ба_хак=Еабзе):

бб 1а 1з Еабзе ог ба_гак бз Еабзе:

#	ничего не удаляем, возврат в магазин пользователя
гебигп геабгесб(гечегзе('тазбег:изег_зНор_тазбег'))

#	вернулся из формы с вопросом

бб гериезб.теббоа == "РОЗТ":

#	Если нажата отмена, то ничего не делать
бб 'по' бп гедиезб.РОЗТ:

#	возврат в магазин пользователя

гебигп геабгесб(гечегзе('тазбег:изег_зНор_тазбег'))
ебзе:

#	нажата кнопка удалить, удаляем запись
бгу:

бб ба == 1: # нажата кнопка удаления корзины (ба корзины)
# открыть предварительный заказ (еще корзина)
огаег = Ргоаисб_Огаег.об]есбз.деб(ба=ба_гак)
бгу:
огаег.аебебе() # удаляем запись
ехсерб:

гебигп НббрРезропзеМобГоипа("<]12>Запись не найдена</Ь2>")
еббб ба == 2: # нажата кнопка удаления заказа (ба заказа)

# открыть предварительный заказ

огаег = Ргоаисб_Огаег.об]есбз.деб(ба=ба_гак)
бгу:

огаег.аебебе() # удаляем запись
ехсерб:

гебигп НббрРезропзеМобГоипа("<]12>Запись не найдена</Ь2>")
гебигп геабгесб(гечегзе('тазбег:изег_зНор_тазбег'))
ехсерб:

гебигп НббрРезропзеМобГоипа("<Н2>Запись не найдена</Ь2>")

бхбб = Еопе

бб ба == 1: # нажата кнопка удаления корзины

бхбб = 'Будет удалено содержание активной корзины'
еИБ бб == 2: # нажата кнопка удаления заказа

6x61 = 'Будет удалено содержание активного заказа'

сопбепб = {"6x61": 6x61}

# вызов шаблона с вопросом на удаление

гебигп гепбег(гедиезб, "шазбег/бе1_уезпо.Нбш1", сопбепб)

Это представление получает два параметра: бб — идентификатор нажатой кнопки и
бб гак — идентификатор либо корзины, либо предварительного заказа (если эти два па-
раметра пусты, то производится возврат на страницу магазина пользователя). Затем
создается объект бехб1, в который — в зависимости от параметра бб — заносятся разные
текстовые значения.

Объект бехб1 через словарь сопбепб передается в универсальный шаблон-форму
с1е1_уе8по.К1т1, где пользователю будет предложено удалить либо активную корзину,
либо активный предварительный заказ. Из этого шаблона в виде РО8Т-запроса будет
получен идентификатор нажатой кнопки и идентификатор удаляемой записи. Затем,
в зависимости от нажатой кнопки, будет удалена запись с содержанием корзины или
с содержанием предварительного заказа.

Пояснение

В этом проекте корзина и предварительный заказ находятся в одной записи, и ее можно
было бы удалить в одной инструкции: огбег.бе1ебе() — без анализа нажатой кнопки. Одна-
ко с учетом того, что в ваших проектах для хранения корзины и предварительного заказа
могут быть задействованы разные модели, инструкции огбег.бе1ебе () разделены.

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

Итак, набор модулей для перевода корзины в предварительный заказ готов, и можно
проверить его работу.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

На странице магазина пользователя присутствует ссылка на корзину, в которой указано
количество продуктов, в нее помещенных (рис. 6.28).

ЛЗ Выбор типа каталога продуктов -

Магазин- УкГог	г? Корзина->4

Доступных товаров -6 у корзину

ев Заказов

ОПокупки->0

К КОВОКЙББР

Рис. 6.28. Магазин пользователя со ссылкой на активную корзину

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

Как здесь можно видеть, в корзину положено 4 продукта, а под ссылкой на корзину
появилась кнопка Удалить корзину. Если в этом шаблоне щелкнуть левой кнопкой
мыши на ссылке Корзина, откроется шаблон сай_ес1||.И1т1 со списком продуктов, кото-
рые лежат в корзине (рис. 6.29).

<-Вернуться в магазин

Список товаров в корзине для редактирования

1е1	Назеа н и е пр одукта

2 Вино 100 оттенков красного

Цена Кол. Сумма Удалить

3 Судак

4 Водка "Русский характер

5 Скумбрия

Фото

₽25ДОО 1	₽250,00 Удалить

₽280,00	1

₽250,00	1

₽120,00

₽280,00

₽2 50,00	Уд ал иг ±

₽240,00

Удалить

ИТОГО-₽Ю20,00

Создать заказ

Рис. 6.29. Шаблон саг!_ес1И.Н1т1 со списком продуктов, которые лежат в корзине

Если в этом шаблоне щелкнуть левой кнопкой мыши на ссылке Создать заказ, состоя-
ние корзины изменится (в ней останется 0 продуктов), а также изменится состояние
ссылки на предварительные заказы покупателя (рис. 6.30).

I Т' Выбор типа 1<а-алога продуктов ’			
Магазин- VI Лог	рКорзина->0  Доступных товаров - 6	Заказ-* 1020,00  Й валить заказ	О Покупки- * 0	К РОВОКР55П

Рис. 6.30. Результаты работы модулей перевода корзины в статус предварительного заказа

Как здесь можно видеть, корзина обнулилась, а на ссылке с предварительным заказом
появилась сумма заказа: Заказ->1020.00. При этом кнопка Удалить корзину исчезла,
но появилась кнопка Удалить заказ.

Если в этом шаблоне щелкнуть левой кнопкой мыши на ссылке Заказ->1020.00, откро-
ется шаблон ту_огс1ег.Ыт1 со списком продуктов, которые лежат в предварительном
заказе (рис. 6.31).
Рис. 6.31. Список продуктов, которые лежат в предварительном заказе

Как здесь можно видеть, в предварительный заказ включены те же продукты, что были
помещены в корзину, название продукта представляет собой ссылку — переход по этой
ссылке откроет страницу с подробной информацией о продукте (рис. 6.32), имеются
также две ссылки: Оплатить заказ успешно и Оплатить заказ (ошибка) — и кнопка
Оплатить заказ.

Функциональность ссылок Оплатить заказ (успешно), Оплатить заказ (ошибка)
и кнопки Оплатить заказ мы рассмотрим немного позднее, после создания модулей
приема оплаты по банковским картам, а пока проверим, как работает кнопка Удалить
корзину. Для этого пополним корзину, положив в нее какой-нибудь продукт
(рис. 6.33).

Если здесь нажать на кнопку Удалить корзину, то откроется шаблон с вопросом на
подтверждение или отмену удаления корзины (рис. 6.34).
©Назад

Наименование продукта - Скумбрия

Цена - Р120.00

Описание продукта

Скумбрия с добавлением масла. Производитель ' В ладком ‘-Вес 300 гр.

Рис. 6.32. Сведения о продукте, полученные из предварительного заказа

ИЙ Выбор типа каталога продуктов

Магазин- \ЛсТог д Корзина- >1

Доступных	Й Удалить корзину

товаров - 6

и Заказ->1020.00

Й Удалить заказ

Рис. 6.33. Активная корзина с одним продуктом

Будет удалено содержание активной корзины

Удалить запись из БД?

<-Отмена I Удалить I Ц] Удалигть

Рис. 6.34. Подтверждение/отмена удаления корзины

По нажатию на кнопку Удалить записи БД с корзиной и ее содержимым будут удале-
ны, а на странице магазина пользователя показана корзина с нулевым содержанием
(рис. 6.35).

Если теперь перейти по ссылке с обнуленной корзиной, пользователь получит сообще-
ние о том, что корзина пуста (рис. 6.36).

[Ж] Выбор типа каталога продуктов ’

Магазин- УзсЬог д Корзина->0

Доступных товаров

- 6

Заказ->1020.00

Ц Удалить заказ

Рис. 6.35. Состояние корзины после удаления данных
< -Вернуться в магазин

Список товаров в корзине для редактирования

В корзине нет продуктов для просмотра и редактирования

Рис. 6.36. Сообщение об отсутствии в корзине каких-либо продуктов

А теперь проверим, как работает кнопка Удалить заказ — для чего положим в корзину
какой-нибудь продукт и переведем ее в состояние предварительного заказа (рис. 6.37).

Выбор типа каталога продуктов т

Магазин- VIЛог	Корзина->0 та Заказ->250.00

Доступных	й Уд^И1Ь

товаров - 6

Рис. 6.37. Магазин пользователя со сформированным предварительным заказом

Если здесь нажать на кнопку Удалить заказ, то откроется шаблон с вопросом на под-
тверждение или отмену удаления заказа (рис. 6.38).

Будет удалено содержание активного заказа

Удалить запись из БД?

^-Отмена I Удалить I 111 Удалить

Рис. 6.38. Подтверждение/отмена удаления заказа

По нажатию на кнопку Удалить записи БД с предварительным заказом и ее содержи-
мым будут удалены, а на странице магазина пользователя показан предварительный
заказ с нулевым содержанием (рис. 6.39).

ЕЙ Выбор типа каталога продуктов

Магазин- УЭЛог Д Корзина->0
Доступных товаров
- 6

Я Заказ->0

Рис. 6.39. Состояние предварительного заказа после удаления данных

Н Назад

Сведения о заказе

Список товаров в заказе

У пользователя нет активных заказов

Оплатить заказ	Оплатить заказ

(успешно)	(ошибка).

Мы Прл ниггаем агкЛвту черйЭ:

П080КА55А
— в ‘ в СС □

е Оплатить зака;

Рис. 6.40. Сообщение об отсутствии активного заказа
Если теперь перейти по ссылке с обнуленным предварительным заказом, пользователь
получит сообщение о том, что у него активных заказов нет (рис. 6.40).

6.5.8.	Интеграция интернет-магазина
с платежной платформой КоЬокаееа

Чтобы реализовать оплату заказов банковскими картами, нужно загрузить в приложе-
ние параметры платежной системы, а для работы с системой: пройти регистрацию на
платежной платформе, получить параметры интернет-магазина и пароли для обмена
данными между приложением и платежной платформой, а также набор соответствую-
щих модулей или скриптов. Сведения о том, как зарегистрировать интернет-магазин на
платежной платформе КоЬоказза и получить набор необходимых атрибутов, приводят-
ся в приложении 2. А здесь мы подробно рассмотрим, как эти параметры использовать
в своем приложении.

Параметры доступа к платежной платформе КоЬоказза прописываются в файле
8ей1пд8.ру вашего проекта (листинг 6.46).

Листинг 6.46. Параметры платежной платформы КоЬоказза в файле зеКтдз.ру

#	Параметры магазина на платежной платформе КоЬоказза ---

#	ФИ магазина

ВОВОКАЗЗА_ЬОЗТП = 'хххххх'

#	Реальные пароли

КОВОКАЗЗА_РАЗЗЖЖО1 = ' хххххххххххххххххххх1

КОВОКАЗЗА_РАЗЗЖЖО2 = 'хххххххххххххххххххх'

#	тестовые пароли

РОВОКАЗЗА-РАЗЗИСЖ01-ТЕ8Т = 'хххххххххххххххххххх'

РОВОКАЗЗА_РАЗЗЖЖВ2_ТЕЗТ = 'хххххххххххххххххххх'

#	Тестовая (1) или реальная (0) оплата

13_ТЕЗТ =1 # Тестовая оплата
# 13_ТЕЗТ =0 # Реальная оплата

В этом файле нужно указать следующие регистрационные параметры:

♦	идентификатор магазина: ровоказза восш;

♦	реальные пароли: ровоказза_раззжжв1 и ровоказза_раззжжв2;

♦	тестовые пароли: ровоказза_раззжжв1_тезт и повоказза_раззионв2_тезт;

♦	тестовая оплата: тз_тезт = 1;

♦	реальная оплата: тз тезт = о.

При отладке программных модулей надо активировать режим тестовой оплаты
(13_тезт = 1) — в этом режиме деньги с банковских карт сниматься не будут. Когда
работа всех моделей будет отлажена, нужно закомментировать или удалить строку
13_ТЕЗТ = 1 и снять комментарий со строки тз тезт = о. После этого при оплате заказов
деньги с реальных карт покупателей будут поступать на счет магазина продавца.
Чтобы представления имели доступ к параметрам магазина, нужно выполнить соот-
ветствующую процедуру импорта в файле У1е\лл ру вашего приложения (листинг 6.47).

Листинг 6.47. Загрузка параметров магазина КоЬоказза в файле У1еууз.ру

#	Импорт параметров из файла зеЫНпдз .ру

Егот сЦапдо.сопЕ лпрогр зеЫНпдз
# 1с1 магазина

1Ь._зЬор = зеЬЫпдз .КОВОКАЗЗА_ЬОС1И

#	Реальные пароли

разз1 = зеШпдз .РОВОКАЗЗА_РАЗЗПОНО1

#	разз2 = зеШпдз .РОВОКАЗЗА_РАЗЗИОНО2

#	тестовые пароли

разз1_ЬезЬ = зеШпдз .РОВОКАЗЗА_РАЗЗИОНО1_ТЕЗТ

#	разз2_ЬезЬ = зеШпдз .РОВОКАЗЗА_РАЗЗИОНО2_ТЕЗТ

#	Тестовая или реальная оплата

13-РезР = зеРРгпдз.13-ТЕЗТ

Эти параметры можно использовать в представлении ту огйег:

#	сформировать ссылку на сервис ВоЬоказза

И 1з_РезР == 1:

разз_1 = разз1_кезк
е!зе:

разз_1 = разз1

Ипк = гк.депегаке_раутепЬ_Ипк(1с1_зЬор, разз_1, зит_Ьо_раул огЬегЛЬ, огЬег. пит_огс!ег, 1з_ЬезЬ)

Здесь делается проверка того, в каком режиме выполняется оплата заказа: если в тесто-
вом режиме, то в объект разз 1 загружаются тестовые пароли платежной платформы,
если в реальном — в объект разз 1 загружаются рабочие пароли. После этого формиру-
ется объект Ипк для соединения с платежной платформой, для чего используется функ-
ция депегаЬе_раутепЬ_Ипк модуля гк (гк.депегаке_раутепк_Ипк). Модуль гк был подключен
в первой строке представления ту огйег (см. листинг 6.42):

#	Подключение модулей платежной системы гоЬоказза

ггорогк тоЬиИ. гоЬоказза аз гк

Программный модуль гоЬоказза (МЫ ДВЛИ ему НОВОе ИМЯ аз гк) МОЖНО ПОЛУЧИТЬ на
официальном сайте платежной системы КоЬоказза и адаптировать под свой проект.
В нашем проекте мы создали каталог тобиН и добавили в него файл гоЬоказза.ру (лис-
тинг 6.48).

Листинг 6.48. Программный код модуля гоЬоказза.ру

трон Ьесгта!

лпрогк ЬазЬИЬ

Нот игШЬ ФтроН рагзе

Нот игШЬ. рагзе лпрогк иг1рагзе

Нек са1си1аке_з1дпакиге(*агдз) -> зкг:
””"Сгеаке зФдпакиге МВ5.

п п п

гекигп ЬазЬИЬ.тс!5 (’: ’.догн (зкг (агд) Иг агд гп агдз) .епсоЬе ()) .ЬехЫдезк ()
с!еГ рагзе_гезропзе(гедиезЕ: зЬг) -> сИсЬ:
п п п

:рагат гедиезЕ: Ипк.

:геЕигп: В1сЫопагу.
П п п

рагатз = {}

Еог 1Рет 1п иг!рагзе(гедиезЕ) .диегу.зрИЬ (' &') :

кеу, уа1ие = Иет.зрИЬ (' = ')
рагатз[кеу] = уа!ие
гебигп рагатз

ЬеЕ сЬеск_з1дпаЕиге_гези111 (

огЬег_питЬег:	1пЬ,	#	атгоасе питЬег

гесе1уес1_зит:	(Зеста!,	#	созЕ оЕ дооЬз,	КО

гесе1уес1_з1дпаЕиге:	кех,	#	ЗадпаЪигеУаХие

раззмогс!: зкг	#	МегскапЕ раззмогс!

) -> Ьоо1:

злдпаЕиге = са!си1аЕе_з1дпаЕиге (гесе1уес1_зит, огс!ег_питЬег, раззмогс!)

И з!дпаЕиге.1омег() == гесе1уес1_з1дпаЕиге.1омег () :
гебигп Тгие

гебигп Еа1зе

# Формирование ПНЬ переадресации пользователя на оплату.

кеЕ депегаЕе_раутепЕ_Ипк (
тегскапЕ_1од!п:	зЕг,	#	МегскапЕ 1од1п

тегскапЕ_раззмогс1_1: зЕг, #	МегскапЕ раззмогс!

созЕ: (Зеста!,	#	СозЕ оЕ доойз,	КО

питЬег: 1пЕ,	#	Ттготсе питЬег

йезсНрНоп: зЕг,	# ВезсНрНоп оЕ 1±е ригсказе

1з_ЕезЕ=0,

гоЬоказза_раутепЕ_иг!=' НЕрз: //аи1±. гоЬоказза. ги/МегскапЕ/1пс1ех. азрх',
) -> зЕг:

””"икь Еог гесИгесЫоп оЕ 1±е сизЕотег Ео 1±е зептсе.
п п п

злдпаЕиге = са1си1аЕе_з1дпа1тге(
тегскапЕ_1од1п,
созЕ,
питЬег,
тег сЬапЕ_раз з могс!_1

ЬаЕа = {
’МегсЬапЕЬодап’: тегсЬапЕ_1од1п,
’ОиЕЗит’: созЕ,
’ТтлЕсГ: питЬег,

' ЬезсНрЫоп’: ЬезсНрЫоп,

’31дпаЕиге7а1ие’: злдпаЕиге,
'ТзТезб': бзбезб

}

гебигп б’ {гоЬоказза_раутепб_игб} ? {рагзе .игбепсобе (баба)}'

#	Получение уведомления об исполнении операции (КезиббПНЬ) .

Неб гезибб_раутепб (тегсНапб_раззмогс!_2: збг, гедиезб: збг) -> збг:
"""Уегбббсаббоп об поббббсаббоп (КезиббНКЬ) .

:рагат гедиезб: НТТР рагатебегз.
п п п

рагат_гедиезб = рагзе_гезропзе(гедиезб)

созб = рагат_гедиезб[’ОибЗит']

питЬег = рагат_гедиезб['1пч1сГ ]

збдпабиге = рагат_гедиезб['ЗбдпабигеУабие']

бб сЬеск_з!дпабиге_гези1б (питЬег, созб, збдпабиге, тегсНапб_раззмогс!_2) :
гебигп б'0К{рагат_гедиезб["1пч1сГ]}'
гебигп "Ьаб збдп"

#	Проверка параметров в скрипте завершения операции (ЗиссеззННЬ).

беб сНеск_зиссезз_раутепб(тегсЬапб_раззмогс1_1: збг, гедиезб: збг) -> збг:

""" Уегбббсаббоп об орегаббоп рагатебегз ("сазНбег сНеск”) бп ЗиссеззННЬ зсгбрб.

:рагат гедиезб: НТТР рагатебегз
п п п

рагат_гедиезб = рагзе_гезропзе(гедиезб)

созб = рагат_гедиезб[’ОибЗит']

питЬег = рагат_гедиезб [' 1пч1сГ ]

збдпабиге = рагат_гедиезб['ЗбдпабигеУабие']

бб сНеск_збдпабиге_гезибб(питЬег, созб, збдпабиге, тегсНапб_раззмогс!_1):
гебигп "ТНапк уои бог избпд оиг зегчбсе"

гебигп "Ьаб збдп"

б б  пате  == " табп " :

тегсНапб_Тодбп = 'хх-хххх'	# Идентификатор магазина

тегсНапб_раззшэгс1_1 = 'хххххххххххххххххххх' # Пароль магазина

созб =10.5	# Стоимость заказа

питЬег = 345	# Номер счета (бб)

безсгбрббоп = 'Цифровая книга'	# Описание товара

бз_безб =1	# Тестовая оплата (1), реальная (0)

# Обращение к функции формирования ссылки на оплату товара

р = депегабе_раутепб_1бпк(тегс11апб_1одбп, тегсЬапб_раззмогс1_1, созб,
питЬег, безсгбрббоп, бз_безб)

Этот файл вы можете подключать к тем своим проектам, которые используют платеж-
ную платформу КоЬоказза. Здесь в функции _табп_ можно задействовать параметры
вашего магазина для проверки корректности подключения его к платежной платформе
(ссылка на платежную платформу будет сохранена в объекте р).
На этом мы закончили знакомство с процедурой интеграции нашего интернет-магазина
с платежной платформой КоЬоказза. Теперь можно вернуться к представлению шу_огбег
и шаблону ту_огс1ег.К1т1, чтобы познакомится с модулями ответа платежной платформы
об успешной (или неуспешной) оплате заказа банковской картой.

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

В случае сбоя оплаты заказа банковской картой пользователь должен получить соот-
ветствующее сообщение. Разработаем набор модулей, которые будут обрабатывать
такую ошибку. В шаблоне ту_ОГС1еГ.К1т1 СО ССЫЛКОЙ Оплатить заказ (ошибка) связан сле-
дующий программный код:

<а Нгеб="{% иг1 'шазбег:рау_огс!ег_ЬасГ %}">0платить заказ (ошибка)</а>

По этой ссылке будет активирован ИКЪ-маршрут рау_огбег_Ьаб (листинг 6.49).

Листинг 6.49. ЫНЬ-маршрут рау_огс1ег_Ьас1

#	Оплата заказа не прошла

рабН('рау_огбег_Ьаб/', убемз.рау_огбег_Ьаб, паше='рау_огбег_Ьаб'),

По этому маршруту будет вызвано представление рау_огбег_Ьаб (листинг 6.50).

Листинг 6.50. Представление рау_огс1ег_Ьас1

###################################

#	Информирование об ошибке оплаты #

#	##################################

беб рау_огбег_Ьаб(гедиезб):

ргбпб(’Попал в ошибку оплаты')

# вернулся из формы

бб гедиезб.тебНоб == "РОЗТ":

# возврат к странице с активным заказом

гебигп гесПгесб(геуегзе('шазбег:шу_огбег'))

# передать в шаблон две переменные

6x61 = 'На сайте платежной системы оплата не прошла.'

6x62 = 'Вернитесь к активному заказу и повторите оплату!'

сопбепб = {"6x61": 6x61, "6x62": 6x62}

гебигп гепбег(гедиезб, "шазбег/д1ауа_6/рау_огбег_Ьаб.Нбш1", сопбепб)

В этом представлении формируются две текстовые переменные: 6x61 и бхб2, которые
через словарь сопбепб передаются в шаблон-форму рау_огс1ег_Ьас1.К1т1 (листинг 6.51). По-
сле возврата из формы по РО8Т-запросу делается возврат к маршруту шу огбег (переход
к заказу).

Листинг 6.51. Шаблон-форма рау_огс!ег_Ьас1.№т1

{% ехбепбз "тазбег/д1ауа_6/изег_зНор_тазбег.Нбт!" %}
{% Ыоск сопбепб %}

<61V с!азз="гом бехб-збагб бехб-багк 1Н-2 тх-2">
<когт аск1оп=’"' текЬос!="розк">
{% сзгк_кокеп %}

<сНч с1азз="кехк-зкагк">

<ьб>{{ кхк1 }}</ьб>

<ьб>{{ т2 }}</ьб>

</сНч>

<сНч с1азз=”со1-3 кехк-зкагк">

<1прик куре="зиЬт1к" с!азз="Ькп Ькп-ргнпагу Ыт-зт"

ча1ие="Вернуться к заказу">

</сЫч>

</когт>

</сНч>

{% епсЫоск сопкепк %}

В этом шаблоне-форме выводится текстовое сообщение, а по нажатию кнопки вернуться
к заказу будет выполнен возврат к странице с текущим заказом.

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

В случае успешной оплаты заказа банковской картой пользователь должен получить
соответствующее сообщение, а заказ — сменить статус с предварительного на опла-
ченный.

Разработаем набор модулей, которые будут обрабатывать успешную оплату заказа.
В шаблоне ту_ОГС1еГ.К1т1 СО ССЫЛКОЙ Оплатить заказ (успешно) связан следующий про-
граммный код:

<	а Ьгек="{% иг1 'тазкег:рау_огс!ег' %}">0платить заказ (успешно)</а>

По этой ссылке будет активирован ИКЪ-маршрут рау огйег (листинг 6.52).

Листинг 6.52. ЫНЬ-маршрут рау_огс1ег

#	Оплата заказа прошла успешно

ракЬ(’рау_огс1ег/', чгемз .рау_огс!ег, пате='рау_огс1ег'),

По этому маршруту будет вызвано представление рау огйег (листинг 6.53).

Листинг 6.53. Представление рау_огс1ег

Вгот сЦапдо.сЬ гтрогк кгапзасклоп

Вгот сЦапдо.ПВВр Вшрогк НккрКезропзеКесНгесВ

@ВгапзасВВоп.акотВс

#	действия после оплаты заказа (тест и реальная) #
##################################################
сГеГ рау_огс!ег (гедиезк) :

#	Получить текущего пользователя магазина

#	изег = гедиезк.изег	# снять комментарий в реальном проекте

изег = Пзег.оЬдескз.дек(гс1=2) # удалить строку в реальном проекте
#	проверить, есть ли активный заказ (он всегда один)

огбег = Ргобисб_Огбег .оЬдесбз. ббббег (изег=изег, збабиз=' бог_раутепб')

бб беп(огбег) == 1:

#	открыть заказ

огбег = Ргобисб_Огбег .оЬдесбз .деб (изег=изег, збабиз=' бог_раутепб')

#	--- сменить статус заказа ----

огбег.збабиз = ’рабб'

огбег.заче ()

#	Выдать сообщение об успешной оплате

гебигп НббрКезропзеКеббгесб(гечегзе('тазбег:рау_огбег_ок'))

е1зе:

#	вернуться к пустому заказу

гебигп геббгесб(гечегзе('тазбег:ту_огбег'))

Это представление имеет префикс @бгапзасббоп.аботбс, а это значит, что оно обертывается
в транзакцию (вся цепочка операций по оплате заказа должна быть обязательно реали-
зована без ошибок). Для этого необходимо произвести импорт пакета для выполнения
транзакций:

бгот бдапдо.бЬ бтрогб бгапзасббоп

Кроме того, для этого представления необходимо также выполнить импорт и следую-
щего пакета:

бгот сЦапдо.Ьббр бтрогб НббрКезропзеКеббгесб

В представлении рау_огбег объект изег получает параметры пользователя магазина. За-
тем делается проверка — есть ли активный заказ (в нашем приложении он всегда один).
Если активного заказа нет, то просто вызывается шаблон с пустыми заказами пользова-
теля. Если активный заказ есть, то он переводится в категорию оплаченных заказов
(огбег. збабиз = ’рабб’), т. е. совершенных покупок. После этого активируется. ЦВЕ-марш-
рут рау огбег ок (ЛИСТИНГ 6.54).

Листинг 6.54. ЫНЬ-маршрут рау_огс1ег_ок

#	Выдать сообщение, что оплата заказа прошла успешно
рабб('рау_огбег_ок/', чбемз.рау_огбег_ок, пате='рау_огбег_ок'),

По этому маршруту вызывается представление рауогбегок (листинг 6.55).

Листинг 6.55. Представление рау_огс1ег_ок

#########################################

#	вызов страницы с сообщением об оплате #

#	########################################

беб рау_огбег_ок(гедиезб):

#	вернулся из формы с сообщением

бб гедиезб.теббоб == "РОЗТ":

#	возврат к магазину

гебигп геббгесб(гечегзе('тазбег:изег_зНор_тазбег'))
6x61 = 'На сайте платежной системы оплата выполнена успешно!'

6x62 = 'Можно войти в личный кабинет и открыть раздел "Мои покупки"'
сопбепб = {"6x61": 6x61, "6x62": 6x62}

# вызов шаблона с информацией об ошибке оплаты

гебигп гепбег(гедиезб, "шазбег/д1ача_6/рау_огбег_ок.Ьбш1", сопбепб)

В этом представлении формируются две текстовые переменные: 6x61 и бхб2, которые
через словарь сопбепб передаются в шаблон-форму рау_огс1ег_ок.К1т1 (листинг 6.56). По-
сле возврата из формы по РО8Т-запросу производится возврат к маршруту изег_збор_
шазбег (переход к магазину пользователя).

Листинг 6.56. Шаблон-форма рау_огс1ег_ок.Мт1

{% ехбепбз "шазбег/д1ача_6/изег_зНор_тазбег.Нбтб" %}

{% Ыоск сопбепб %}

<богш асббоп="" шеббоб="розб">

{% сзгб_бокеп %}

<ббч с1азз="бехб-збагб тх-2">

<Ь6>{{ 6x61 }} </Ь6>

<Ь6>{{ 6x62 }} </Ь6>

</б1Ч>

<ббч с!азз="со1-3 бехб-збагб шх-2">

<бприб 6уре="зиЬтбб" с!азз="Ьбп Ьбп-ргбтагу Ьбп-зт"
ча!ие="Вернуться в магазин">

</б1Ч>

</богт>

{% епбЫоск сопбепб %}

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

В шаблоне ту_огс1ег.К1т1 для выполнения реальной оплаты заказа через платежную
платформу КоЬоказза имеется кнопка оплатить заказ. С этой кнопкой связана следующая
ссылка:

<а Ьгеб=«{ {Ипк}}» с!азз=«Ьбп Ьбп-зиссезз шу-1»>

<б с!азз=«Ы Ы-сгеббб-сагб-2-бгопб»х/б> Оплатить заказ</а>

В этой ссылке присутствует переменная шаблона {{Ипк}}, значение которой присваива-
ется в представлении шу огбег:

Ипк = гк.депегабе_раутепб_Ипк(бб_зНор, разз_1, зит_бо_рау, огбег.бб, огбег.пит_огбег, бз_безб)

В этой инструкции на платежную платформу КоЬоказза через аргументы функции
гк.депегабе раушепб 1бпк передаются следующие параметры:

♦	бб збор — идентификатор магазина на платежной платформе КоЬоказза;

♦	разз_1 — пароль для входа в магазин на платежной платформе КоЬоказза;

♦	зиш бо рау — сумма к оплате (будет снята с банковской карты покупателя);

♦	огбег. бб — идентификатор заказа в БД сайта магазина продавца;
♦	огаег. пит огаег — номер заказа на сайте магазина продавца;

♦	тз гезг — код типа оплаты (тестовая — 1 или реальная — о).

В итоге, по нажатию на кнопку Оплатить заказ покупатель будет перенаправлен на
страницу с формой для ввода параметров банковской карты сайта платежной платфор-
мы КоЬоказза. После ввода параметров банковской карты и подтверждения оплаты
на платежной платформе деньги будут списаны с банковской карты покупателя и пере-
ведены на счет магазина продавца. После этого пользователь будет возвращен на сайт
магазина продавца в одно из представлений:

♦	в представление рау огаег — в случае успешного завершения оплаты;

♦	в представление рау огаег Ьаа — в случае ошибки при выполнении оплаты.

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

Теперь посмотрим, как работают модули оплаты заказа.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

Вернемся к странице магазина пользователя (рис. 6.41).

I [Г' Выбор типа каталога "родуктое ’ мН			
Магазин- У1с1ог	р Корзлна->0  Доступных товаров - 6	та Заказа 1020.00  1Й йалигь заказ	О Покупки- > 0	С РОВОКРБ5Й

Рис. 6.41. Магазин пользователя со сформированным предварительным заказом

Если пользователь сформировал из корзины предварительный заказ, то в ссылке Заказ
будет показана сумма предварительного заказа (в нашем случае: Заказ->1020.00). По
щелчку левой кнопкой мыши на этой ссылке откроется шаблон ту_огс1ег.К1т1 с инфор-
мацией об элементах заказа и кнопками оплаты (рис. 6.42).

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

Здесь можно увидеть, что в предварительном заказе лежат продукты, которые пользо-
ватель ранее поместил в корзину, название продукта представляет собой ссылку на
него, ниже таблицы с заказом расположены две ссылки: Оплатить заказ (успешно)
и Оплатить заказ (ошибка), а также кнопка Оплатить заказ.

Как уже ранее отмечалось, ссылки Оплатить заказ (успешно) и Оплатить заказ
(ошибка) служат для проверки работы модулей, в которых выполняется обработка от-
вета платежной системы о том, что оплата прошла или не прошла соответственно. Эти
ссылки нужно оставлять доступными только на этапе разработки и отладки работы
программных модулей, а при размещении сайта на публичном сервере их следует уда-
лить или закомментировать.

0 Назад

Сведения о заказе

Номер за каз а	С пособ опл аты

2_2_17/07/2024 Пластиковой картой

Список товаров в заказе

№пп Название продукта

1	Б ин □ 100 оттенков красного

2	Судак

3	Водка Русский характер

Фото

4 Скумбрия

Цена	Кол. Сумма

Р250.00	1	₽25О,ОО

Р230.00	1	₽280г00

Р250.00	1	₽250,00

Р120.00	2	Р240.00

ИТОГО - ₽ 1020,00

ВСЕГО к оплате- ₽ 1020,00

Оплзьлть заказ Оплатить
(успешно) заказ (ошибка)

Б Оплатить заказ

Мы пркниллаеги сплету лере!;

РО0ОКД55Й
зг с I 0

Рис. 6.42. Шаблон ту_огс!ег.Н1т1 с информацией об элементах заказа и кнопками оплаты

Так, при переходе по ссылке Оплатить заказ (ошибка) пользователь получит сле-
дующее сообщение (рис. 6.43).

На сайте платежной системы оплата не прошла.

Вернитесь к активному заказу и повторите оплату!

Вернуться к заказу
То есть если на реальной платежной платформе произойдет сбой перевода денег с бан-
ковской карты покупателя на счет продавца, то покупатель будет направлен на страни-
цу с этим сообщением. По нажатию на кнопку Вернуться к заказу покупатель вернет-
ся на страницу с текущим заказом.

Точно так же при переходе по ссылке Оплатить заказ (успешно) пользователь полу-
чит следующее сообщение (рис. 6.44).

На сайте платежной системы оплата выполнена успешно!

Можно войти в личный кабинет и открыть раздел "Мои покупки"

Вернуться в магазин

Рис. 6.44. Сообщение об успешной оплате заказа пластиковой картой

То есть если на реальной платежной платформе произойдет корректный перевод денег
с банковской карты покупателя на счет продавца, то покупатель будет направлен на
страницу с этим сообщением. По нажатию на кнопку Вернуться в магазин покупатель
вернется на страницу своего магазина, где сумма предварительного заказа обнулится,
и заказ будет переведен в статус оплаченного (рис. 6.45).

Рис. 6.45. Магазин покупателя после завершения оплаты предварительного заказа

Как здесь можно видеть, сумма предварительного заказа обнулилась, а сумма покупок
появилась в ссылке Покупки->1020.00. Эта сумма автоматически подсчитывается
в функции зит Ьи^ огйег контекстного процессора и выводится в шаблоне и8еГ_8Кор_
та81ег.К1т1.

По нажатию в шаблоне ту_огс1ег.К1т1 (см. рис. 6.42) на кнопку Оплатить заказ пользо-
ватель будет направлен на сайт платежной платформы, и ему будет показана форма для
ввода параметров банковской карты (рис. 6.46).

В этой форме покупатель должен заполнить необходимые поля (ввести адрес своей
электронной почты и параметры банковской карты). По нажатию на кнопку Оплатить
деньги с карты покупателя будут списаны и зачислены на счет магазина продавца, а
покупатель будет возвращен на сайт магазина. Обратите внимание, что в показанном
случае используется тестовый режим — т. е. идет проверка и отладка работы про-
граммных модулей, а реального списания денег со счета покупателя не происходит.

При размещении сайта на публичном сервере вам понадобится сменить режим оплаты
заказа с тестового на режим реальной оплаты. Для это надо в файле 8ей1пд8.ру изменить
признак:

13_ТЕ8Т =0 # Реальная оплата

После этого форма для ввода параметров банковской карты на сайте КоЬоказза приоб-
ретет следующий вид (рис. 6.47).
1 020,00₽ -= $10.68 Детали платежа

ТЕСТОВЫЙ РЕЖИМ

1 020,00₽ $10, 63	Детали платежа

Введите ЕтаП

Он нужен дня стправни чека сб оплате

Ета.11 для чека (обязательно]

Оплата картой

Номер карты

Введите ЕгпаП

Он	для 1'Тпрдбии чека по пппйге

ЬптаИ для чека (обязательно)

Оплата картой

Номер карты

ММ/УУ	СУС/СУУ ®

Рис. 6.46. Форма для ввода параметров
банковской карты на платежной платформе
РоЬоказза (тестовая оплата)

К РОВОКА55А

Рис. 6.47. Форма для ввода параметров
банковской карты на платежной платформе
РоЬоказза (реальная оплата)

При переходе на странице магазина (см. рис. 6.45) по ссылке Покупки пользователь
получит информацию обо всех оплаченных заказах. Если оплаченных заказов нет, то он
должен получить следующую страницу (рис. 6.48).

<-Назад

Список покупок (оплаченные заказы)

У пользователя нет оплаченных заказов

№пп Дата заказа	Номер заказа	Стоимость продуктов

ИТОГО за продукты-₽0
Впрочем, вы в своем проекте при переходе по этой ссылке можете получить ошибку,
поскольку мы еще не создали набор модулей для показа оплаченных заказов (поку-
пок), — этому вопросу посвящен следующий раздел.

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

В шаблоне магазина пользователя для показа оплаченных заказов покупателя исполь-
зуется следующая ссылка:

<а ЬгеР="{% иг1 'тазРег:ту_Ьиу' %}">

<1 с1азз="Ы Ы-т1песагР-1оас1ес1"></1> Покупки->{ {зит_ту_Ьиу} }</а>

По этой ссылке активируется ИВЪ-маршрут ту Ьиу (листинг 6.57).

Листинг 6.57. ЫНЬ-маршрут ту_Ьиу

# Показать оплаченные заказы

раРЬ('ту_Ьиу/', чгемз.ту_Ьиу, пате='ту_Ьиу'),

По этому маршруту вызывается представление ту_Ьиу, обеспечивающее просмотр всех
оплаченных заказов (листинг 6.58).

Листинг 6.58 Представление ту_Ьиу

###################################
# Мои оплаченные заказы (покупки) #
###################################
с!еГ ту_Ьиу (гедиезР) :

#	Получить текущего пользователя магазина

#	изег = гедиезР.изег	# снять комментарий в реальном проекте

изег = Пзег.оЬдесРз.деР(йс1=2) # удалить строку в реальном проекте

#	получить все оплаченные заказы

огНегз = Ргос1исР_Огс1ег .оЬдесРз. РНРег (изег=изег, зРаРиз='ра!с1') .огс!ег_Ьу (' -пит_огс!ег')

сопРехр = {'огЬегз': огЬегз, 'тапу': тапу}

геРигп гепЬег(гедиезР, "тазРег/д1ача_6/ту_Ьиу .ЬРт1", сопРехр)

В этом представлении объект изег получает текущего пользователя, после чего в объект
огПегз из БД загружаются все его оплаченные заказы. Затем формируется словарь
сопРехр, принимающий список оплаченных заказов, и этот словарь передается в шаблон
ту_Ьиу.К1т1 (листинг 6.59).

Листинг 6.59. Шаблон ту_Ьиу.Мт1

{% ехРепЬз "тазРег/д!ача_6/изег_зЬор_тазРег.ЬРт!" %}

{% Ыоск сопРепР %}

<сПч с1азз="гом РехР-зРагР РехР-Ьагк 1П-2 тх-2">

<сПч с1азз="со1-2 РехР-зРагР РехР-Нагк р-1">

<ЬиРРоп с!азз="ЬРп ЬРп-зиссезз ЬРп-зт" опсИск="МзРогу.Ьаск() "><-Назад</ЬиРРоп>
</ббч>

</ббч>

<ббч с1азз="гом бехб-збагб 1И-2 шх-2">

<Ь5>Список покупок (оплаченные заказы)</Н5>

</ббч>

<сНч с1азз=”со1-10 тх-2">

<сНч сбазз="баЬбе-гезропзбче"> <!— полоса прокрутки к таблице —>

<баЬбе сбазз="баЬбе баЬбе-збгбреб баЬбе-Ьогбегеб бехб-збагб баЫе-зиссезз">

<бЬеаб>

<бг>

<бЬ>№пп</бЬ>

<бЬ>Дата заказа</бб>

<бЬ>Номер заказа</бб>

<бЬ>Стоимость продуктов</бб>

</бг>

</бЬеаб>

<бЬобу>

{% бб огбегз %}

{% бог оЬд бп огбегз %}

<бг>

<6Ь>{{богбоор.соипбег}}</бб>

<бб>{ {оЬд .сгеаббоп_бабе} }</бб>

<ббХа Ьгеб=" {% иг! ' шазбег: Ьиу_огбег_ббзб' бб=оЬ] . б б %}">{{ оЬ] . пиш_огбег}} </ах/бб>

<бб>{ {тапу}}{{оЬд.атоипб}}</бб>

</бг>

{% епббог %}

{% ебзе %}

<Ь6> У пользователя нет оплаченных заказов</116>

{% епббб %}

<бЬобу>

</баЬбе>

</ббч>

</ббч>

<ббч сбазз="гом бехб-збагб 16-2 шх-2">

<Ь5>ИТОГО за продукты-}{тапу}}{{зит_ту_Ьиу}}</Н5>

</ббч>

{% епбЬбоск сопбепб %}

В этом шаблоне выводится таблица со списком оплаченных заказов, где номер заказа
представлен в виде ссылки:

<а Ьгеб="{% игб 'шазбег:Ьиу_огбег_ббзб' бб=оЬд.бб %}">{{об].пиш_огбег}}</а>

По этой ссылке активируется ИКЪ-маршрут Ьиу_огбег_1бзб (листинг 6.60), в который
передается идентификатор оплаченного заказа (бб=оЬд .бб).
Листинг 6.60. ЫНЬ-маршрут Ьиу_огс1ег_Н8(

# Показать список товаров в оплаченном заказе

ракЬ( ’Ьиу_огс1ег_11зк/<1пк: 1с1>/’, члемз .Ьиу_огс1ег_118кл пате=’Ьиу_огс!ег_11зк’),

По этому маршруту вызывается представление Ьиу_огЬег_Изк (листинг 6.61), в которое
передается идентификатор оплаченного заказа (ылым).

Листинг 6.61. Представление Ьиу_огс1ег_Н81

##############################

# товары в оплаченном заказе #
##############################
с1еГ Ьиу_огЬег_Изк (гедиезк, 1с1) :
# получить реквизиты запрошенного заказа
огЬег = Ргос1иск_Огс1ег. оЬд ескз. дек (1с1=1с1)

# расчет суммы по элементам заказа

огЬег_1кет = Ргос1иск_Огс1ег1кет.оЬзескз. РНкег (огс!ег_1с1=огс1ег. а_с1)
з = []

Рог 1кет 1п огс!ег_1кет:

з.аррепсЦткет.диапкЬку * гкет.рггсе)

# получить все продукты в оплаченном заказе

ргоЬискз = РгоЬиск_0гЬег1кет.оЬдескз. РНкег (огс!ег_1с1=1с1)

туИзк = 21р (ргоЬискз, з)

сопкехк = {'огЬег': огЬег, ’ргоЬискз’: ргоЬискз, 'тапу’ : тапу, ’туИзк’: туИзк}
гекигп гепЬег(гедиезк, Птазкег/д1ача_6/Ьиу_огс1ег_11зк.]лкт1", сопкехк)

Это представление получает идентификатор оплаченного заказа (м), и реквизиты
текущего заказа загружаются в объект огаег. Далее выполняется расчет суммы оплаты
по элементам этого заказа (з), и в объект ргоЬискз загружается список приобретенных
продуктов. Сведения о продуктах в оплаченном заказе упаковываются в объект туИзк.
Все полученные параметры загружаются в контекстный словарь сопкехк, который пере-
дается в шаблон Ьиу_огс1ег_Н8Шт1 (листинг 6.62).

Листинг 6.62. Шаблон Ьиу_огс1ег_Н81.Ыт1

{% ехкепЬз "тазкег/д1ача_6/изег_з1лор_тазкег .Икт1" %}

{% Ь1оск сопкепк %}

<сПч с1азз=”гом кехк-зкагк кехк-Ьагк Пл-2 тх-2">

<сПч с1азз=”со1-2 кехк-зкагк кехк-Ьагк р-1">

сЬиккоп с1азз=”Ькп Ькп-зиссезз Ыт-зт" опсИск="ЫзЬогу.Ьаск() "><-Назад</ЬиЬЬоп>

</сПч>

</сПч>

<сИч с1азз="гом кехк-зкагк кехк-Ьагк Пл-2 тх-2">

<Ь5>Реквизиты заказа: № {{огЬег. пит_огс!ег}}, от {{огЬег. сгеак!оп_с1аке}} </Ь5>

</сПч>
<ббу сбазз=”гом бехб-збагб 6И-2 тх-2">

<Ь5>Список приобретенных товаров в оплаченном заказе</Ь5>

</ббч>

<ббч с1азз="со1-10 тх-2">

<сНч сбазз=”баЬбе-гезропзбче"> <!— полоса прокрутки к таблице —>

<баЬбе сбазз="баЬбе баЬбе-збгбреб баЬбе-Ьогбегеб бехб-збагб баЫе-зиссезз”>

<бЬеаб>

<бг>

<бЬ>№пп</бЬ>

<бЬ>Наименование товара</бб>

<бЬ>Фото</бЬ>

<бЬ>Цена</бЬ>

<бЬЖоличество</бб>

<бЬ>Сумма</6Ь>

</бг>

</бЬеаб>

<бЬобу>

{% бб ргобисбз %}

{% бог оЬз л з би туббзб %}

<бг>

<бб>{{богбоор.соипбег}}</бб>

<бб><а Ьгеб=”{% игб ’тазбег:ргобисб_бебабб' рк=оЬ].ргобисб.бб %}”>
{{обд.ргобисб.пате}}</ах/бб>

{% бб обз.ргобисб.бтаде %}

<ббхбтд згс=”{{ оЬд.ргобисб.бтаде.игб}}" абб="соппесб"

збубе="тах-11ебд]1б: 100рх"х/бб>

{% ебзе %}

<ббхр>Нет фото</рх/бб>

{% епббб %}

<бб>{{тапу}}{{оЬд.ргбсе}}</бб>

<бб>{{оЬд.диапбббу}}</бб>

<бб>{{тапу}}{{з}}

{#<бб>{{тапу}}{% мббббгаббо оЬд.ргбсе б оЬд.диапбббу %}</бб>#}

</бг>

{% епббог %}

{% ебзе %}

<р> У пользователя нет оплаченных заказов</р>

{% епббб %}

<бЬобу>

</баЬбе>

</ббч>

</ббч>

<ббч сбазз=”гом бехб-збагб 6Н-2 тх-2">

<Ь5>ИТ0Г0 за продукты-{{тапу}}{{огбег.атоипб}}</Ь5>

</ббч>

{% епбЬбоск сопбепб %}
Этот шаблон представляет собой таблицу, в которой показан список продуктов, нахо-
дящихся в оплаченном заказе. Наименование товара представлено в нем в виде ссылки,
при переходе по которой будет выведена полная информация о приобретенном про-
дукте.

6.8.	Проверка работы модулей

для показа оплаченных заказов (покупок)

Теперь посмотрим, как работают модули показа оплаченных заказов.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 6 и перейти по ссылке Мой
магазин.

Вернемся к странице магазина пользователя (рис. 6.49).

Ц] Выбор типа каталога продуктов т

Магазин- VIЛог	р Корзина-> О	1г Зата?->0

Доступных товаров - 6

3 Покупка 1170.00	РОВОКЯ55Д

Рис. 6.49. Страница магазина покупателя при наличии оплаченных заказов

Если пользователь имеет оплаченные заказы (т. е. он совершал реальные покупки),
в ссылке Покупки будет показана сумма по всем оплаченным заказам (в нашем случае
Покупки->1170.00). Эта сумма автоматически подсчитывается В функции зш_ЬиГ_огс1ег
контекстного процессора и выводится в шаблоне и8ег_8Кор_та81ег.И1т1. По щелчку ле-
вой кнопкой мыши на этой ссылке откроется шаблон ту_Ьиу.Ыт1 со списком оплачен-
ных заказов (рис. 6.50).

		
Список покупок (оплаченные заказы)		
№пп	Дата заказа	Номар заказа	Стоимость продуктов
1	21 июля 2024 г.	Е 2 21/07/2024	₽150,00
2	17 июля 2024 г.	2 2 17/07/2024	₽1020,00
ИТОГО за продукты-₽1170Р00		

Рис. 6.50. Страница магазина покупателя со списком оплаченных заказов

Примечание

В интерактивной цифровой книге таблица будет заполнена тестовыми данными. При этом,
чтобы читатели интерактивной цифровой книги не испортили тестовые данные, на публич-
ном сервере в модулях корректировки данных строки программ, обновляющие записи в БД,
закомментированы.

Как здесь можно видеть, в нашем случае покупатель имеет два оплаченных заказа, и по
щелчку левой кнопкой мыши на номере заказа откроется шаблон Ьу_огс1ег_Н81.К1т1 со
списком продуктов, находящихся в заказе (рис. 6.51).
< -Назад

Реквизиты заказа: № 2_2_17/07/2024, от 17 июля 2024 г.
Список приобретенных товаров в оплаченном заказе

№пп Наименование товара

1	Вино 100 оттенков красного

2	Судак

3	Водка Русский характер

4	Скумбрия

Цена	Количество	Сумма

₽25О,ОО	1	₽250,00

₽280,00	1	₽280,00

₽25000	1	₽250г00

₽120,00	2	₽240,00

ИТОГО за продукты-₽1020,00

Рис. 6.51. Страница магазина покупателя со списком оплаченных заказов

Наименование товара здесь представлено в виде ссылки, и если щелкнуть на ней левой
кнопкой мыши, откроется шаблон ргос1ис1_с1е1а|1.И1т1, демонстрирующий подробные
сведения о продукте (рис. 6.52).

Рис. 6.52. Шаблон ргос1ис1_с1е1а|1.1Пт1 с подробными сведениями о продукте
6.9.	Краткие итоги

В этой главе представлен набор связанных программных модулей, из которых, как из
кирпичиков, можно собирать полноценные сайты электронной торговли. Вы можете
скачать коды представленных здесь примеров и использовать их в своих проектах
(новостные сайты, блоги, интернет-магазины и т. п.).

Теперь можно перейти к следующей главе, в которой приведены некоторые полезные
советы и приемы автора и сообщества программистов, практикующих создание прило-
жений на О]ап^о.
ГЛАВА 7

Полезные советы

В этой главе приведены некоторые полезные советы автора и сообщества программи-
стов, работающих с В]ап§о. Достаточно часто в процессе работы над проектом разра-
ботчик становится в тупик из-за того, что по всем канонам работающий модуль выдает
ошибку. Как правило, это некая мелочь типа: не там стоит точка или запятая, отсутст-
вует или, наоборот, присутствует лишний знак /, вместо знака / должно стоять двоето-
чие и т. и. В море документации найти ответ на встретившуюся проблему порой бывает
затруднительно и приходится искать ответ в Интернете у тех, кто с подобной пробле-
мой сталкивался. В любом случае это потеря времени. Поэтому здесь приводятся вари-
анты решения некоторых таких проблем с демонстрацией их в виде работающих про-
граммных модулей.

Из материалов этой главы вы узнаете:

♦	как создать документ формата РВР, чтобы на сайте у него присутствовало оглавле-
ние;

♦	как на НТМЬ-странице показать:

•	документ формата РИР из представления;

•	документ формата РБР из шаблона Р]ап§о;

•	документ РБР в формате флеш-анимации;

♦	как переводить страницы сайта на другие языки;

♦	как отправлять с сайта почтовые сообщения;

♦	как использовать 1ауа-скрипты в шаблонах В]ап§о;

♦	как использовать фреймворк РуБспр! в шаблонах В]ап§о;

♦	как использовать пакет ВгуЙюп для выполнения на НТМЬ-страницах программ на
РуЙюп;

♦	как правильно откатить миграцию, не нарушив целостность БД.

7.1.	Показываем на сайте документ РОЕ

Весьма часто на станицах сайта требуется показать документ в формате РИР: цифро-
вую электронную книгу, инструкцию к приложению, методическое пособие и т. и. Тра-
диционно пользователи готовят исходный документ в текстовом редакторе А^огс! с со-
хранением его в формате РВЕ. При этом очень важно задать при сохранении документа
нужные параметры — особенно в том случае, когда он достаточно большой и имеет
оглавление.

7.1.1.	Создание документа в формате РОЕ

Если в редакторе А^огб сохранить документ в формате РВЕ с параметрами по умолча-
нию, то при выводе такого документа на сайте у него не будут отображаться опции
оглавления. Поэтому, чтобы они всегда отображались, в редакторе А^огб перед сохра-
нением документа в формате РВЕ нужно выполнить следующие действия:

1.	В меню Файл выбрать опцию Сохранить как (рис. 7.1).

2.	В открывшемся окне Сохранение документа (рис. 7.2) выбрать в разделе Тип фай-
ла опцию РВЕ (*.рс!Г).

Рис. 7.1. Опция Сохранить как в меню Файл редактора \Л/огс!

Рис. 7.2. Опция РОЕ (*.рсК) в разделе Тип файла окна Сохранение документа редактора \Л/огс!
Рис. 7.3. Кнопка Параметры в окне сохранения документа редактора \Л/огс1
3.	В области, открывшейся в нижней части окна Сохранение документа (рис. 7.3),
нажать на кнопку Параметры.

4.	В открывшейся панели Параметры (рис. 7.4) установить флажок Создать заклад-
ки, используя:, включить опцию заголовки и нажать на кнопку ОК.

5.	Вернувшись в окно Сохранение документа (см. рис. 7.3), выбрать одну из опций
оптимизации:

•	Стандартная (публикация в Интернете и печать);

•	Минимальный размер (публикация в Интернете)

и нажать кнопку Сохранить.

В результате будет создан файл документа в формате РБР, предусматривающий показ
его оглавления.

7.1.2.	Вывод документа формата РОЕ из представления

Предположим, что РПР-файл с именем Ру1Коп_1ог_к1с1_с1ето.рсК загружен на сайт в ката-
лог 81аИс/рс1Р, и нам необходимо вывести содержимое этого документа, указав его пара-
метры в представлении.

Прежде всего, в главном меню или на одной из страниц сайта следует указать ссылку
на маршрут, через который будет вызвано это представление:

<а ЬгеЕ=’’{% иг1 'тазкег :рс!Е_уЕ ем'%}" 1загде1з ="_Ыапк">Показать РЭГ из представления</а>

По этой ссылке будет активирован ИКЪ-маршрут рав_у1ем (листинг 7.1).

Листинг 7.1. 11КЬ-маршрут рсИ_ М1е\л/

#	Показать файл РВЕ из представления

ракЬ (' рс!Е_уЕем/ ', уйемз. рс!Е_уЕем, паше=' рс!Е_уЕем'),

По этому маршруту вызывается представление рав_уЕем (листинг 7.2).

Листинг 7.2. Представление рсИ_У1е\л/

#	Импорт для показа РВЕ

Егот сЦапдо.ЬЕЕр ЕтрогЕ ЕНеКезропзе, НЕЕр404

ЕтрогЕ оз

######################################

#	Показать РВЕ-файл из представления #

#	#####################################

НеЕ рс!Е_уЕем(гедиезЕ) :

Егу:

ЕНераЕЬ = оз.раЕЬ.доЕп( 'зкаЕЕс', 'рс!Е/РуЕНоп_Еог_кЕс1_с1ето.рс1Е')

гекигп ЕНеКезропзе (ореп (ЕЫеракН, ' гЬ'), сопкепк_Еуре= ’ аррИсакЕоп/рПЕ')
ехсерк ЕИеМоЕЕоипс1Еггог:

гатзе Нккр404()
Для работы этого представления выполнен импорт необходимых библиотек, а в самом
представлении создан объект Шерагь, в котором указан полный путь к РВЕ-файлу.
Отображение РВЕ-файла на новой вкладке браузера осуществляется с использованием
функции В)ап§о ЕПеКезропзе (). Обратите внимание, что шаблон для отображения РВЕ-
файла в этом случае не создается.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Пока-
зать РОЕ из представления.

Если запустить на выполнение созданные в этом разделе программные модули, то
в окне браузера страница с содержимым РВЕ-файла будет выглядеть так, как показано
на рис. 7.5.

Рис. 7.5. Вкладка браузера с содержимым РОЕ-файла, выведенного из представления

Как здесь можно видеть, страница с содержимым РВЕ-файла имеет титульную строку и
две панели: левую и центральную. В левом углу титульной строки расположена кноп-
ка @ — она позволяет скрыть/показать левую боковую панель, на которой находятся
миниатюры страниц РВЕ-документа и две кнопки: верхняя кнопка | Д | -— предоставля-
ет возможность отобразить миниатюры страниц, нижняя кнопка ® — показывает
оглавление документа. С помощью левой боковой панели — либо из миниатюр стра-
ниц, либо из оглавления — можно быстро выбрать нужную страницу документа. Так,
при выборе из оглавления какого-либо раздела документа в центральной панели сразу
открывается первая страница выбранного раздела (рис. 7.6).
□ <>Э

□



Для детей РуЙпоп -Демо.рсК

42 /135

100%

Урок 4.1. Создание строк в РуХЬоп

Предисловие

> Тема 1. Знакомимся с
Руг Коп

Важно помнить, что строки в РуТЬоп относятся к неизменяемым
последовательностям. Отдельные символы в строке располагаются в

> Тема 2. Типы данных в

РуЙюп и элементарные
действия с данными

> Тема 3. Обработка
числовых данных в РуЙгоп

42

Тема 4. Обработка
строковых данных в Руйтоп

Урок 4.1. Создание
строк в Руйюп

строгом порядке слева направо. Строки индексированы, отдельный символ может быть
получен при помощи своего индекса (или номера). Значение индекса для первого
символа строки равно нулю. Добавить новый символ, изменить или удалить уже
существующий символ не получится, можно только создать измененную копию строки.

Урок 4.2. Доступ к
символам строки по
индексу и срезы строк

Урок 4.3.

Арифметические
операторы для
обработки строк

Краткие итоги темы 4

Следует добавить, что строки в РуНтоп могут хранить и двоичные значения (0, 1). Это
используется при обработке файлов изображений,
аудиофайлов и видео. Создать строку в коде
программы на Ру1Ноп довольно просто. Достаточно
заключить требуемую последовательность символов в
одинарные, двойные или тройные кавычки. Наш
ПиТолик написал небольшую программу, в которой
попросил компьютер рассказать сказку о золотой рыбке.

Эта программа приведена в примере 4.1.

электронной книги примеры

Вопросы для
самоконтроля к теме 4

> Тема 5. Списки в РуГЬоп

^Примечание. В демо-версии интерактивной
программ удалены.

> Тема 6. Кортежи в РуЙюп

Если выполнить данную программу, то она выдаст следующий текст.

> Тема 7. Словари в РуОтоп

> Тема 8. Множества в
РугЬоп

> Тема 9. Логический тип

Жил старик со своею старухой
У самого синего моря.

Они жили в ветхой землянке
Ровно тридцать лет и три года.
Старик ловил неводом рыбу.
Старуха пряла свою пряжу

Рис. 7.6. Быстрое пролистывание содержимого документа с использованием оглавления

В центре титульной строки имеются две кнопки: кнопка Д Д — позволяет увеличить
масштаб отображаемой страницы, а кнопка — его соответственно уменьшить. Пра-
вее находятся еще две кнопки: первая Н — позволяет раскрыть страницу на всю ши-
рину вкладки и свернуть ее до минимального размера, вторая — поворачивает
страницу на угол 90 градусов.

В правом углу титульной строки находятся еще три кнопки: Ц — скачать файл с доку-
ментом, — вывести текст документа на печать, — выполнить еще ряд действий,
предусмотренных этим меню.

Левая и центральная панель оснащены полосами прокрутки, которые позволяют быстро
прокручивать страницы текста.

7.1.3.	Вывод документа формата РОЕ из шаблона О]апдо

Предположим, что РЭР-файл с именем Ру1Коп_Гог_к1с1_с1ето.рс11: загружен на сайт в ката-
лог 81аИс/рсН7, и нам необходимо вывести содержимое этого документа, указав его пара-
метры в шаблоне.

Прежде всего, в главном меню или на одной из страниц сайта следует указать ссылку
на маршрут, через который в конечном итоге будет вызван этот документ:

<	а ЪгеР="{% иг1 ’тазкег: рЩ_кешр1аке' %}" Тзагде-Ь ="_Ыапк”>Показать РЭГ из шаблона</а>
По этой ссылке будет активирован ИКЕ-маршрут рбб_бетр1абе (листинг 7.3).

Листинг 7.3. ОКЬ-маршрут рбГ_1етр1а1е

#	Показать файл РВЕ из шаблона

рабЬ ('рбб_бетр1абе/', убемз .рбб_бетр!абе, пате=' рбб_бетр1абе'),

По этому маршруту вызывается представление рбб_бешр1абе (листинг 7.4).

Листинг 7.4. Представление рсК_(етр1а(е

################################

#	Показать РПЕ-файл из шаблона #

################################

беб рбб_бетр1абе(гедиезб):

гебигп гепбег(гедиезб, ”тазбег/д1ауа_7/рбб_бетр1абе.Ьбт1”)

Из этого представления вызывается шаблон рс1Г_1етр1а1е.1Дт1 (листинг 7.5).

Листинг 7.5. Шаблон рсИ_1етр1а1е.Мт1

{% ехбепбз "зЬор/Ьазе.ЬбтГ' %}

{% 1оаб збаббс %}

{% Ыоск сопбепб%}

соЬдесб

баба=’{% збаббс "рбб/РубНоп_бог_кбб_бето.рбб" %}'

буре=”арр1бсаббоп/рбб" ЫббН="100%" НебдНб="1000”>

</окдесб>

{% епбЫоск сопбепб%}

В этом шаблоне создан тег оЬдесб, в атрибуте баба которого указаны следующие пара-
метры:

♦	ЦВЕ-адрес, по которому на сайте находится документ в виде РВР-файла: {% збаббс "рбб/

РубЬоп_бог_кбб_бето.рбб" %};

♦	ТИП ВЫВОДИМОГО документа: буре=’’арр1бсаббоп/рбб";

♦	ширина и высота окна в пикселах, в котором будет показан документ: Ыббь="1оо%”
Ье1дЬб=”1000”).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Пока-
зать РОЕ из шаблона.

Если запустить на выполнение созданные в этом разделе программные модули, то
в окне браузера страница с содержимым РБЕ-файла будет выглядеть так, как показано
на рис. 7.7.

В тех случаях, когда файл с РВЕ-документом загружен на сайт через административ-
ную панель или через интерфейс, а его ЦКЕ-адрес хранится в БД в одной из моделей,
вывести его на вкладку браузера можно с использованием в шаблоне следующего кода
(в этом примере ИКЬ-адрес файла с РВР-документом хранится в поле с именем Ше_рсИ
модели Ьоок):

<оЬ]есЬ

Ьака=' {{Ьоок.Ы1е_рс1Ь.иг1}}'

куре="аррИсаЫоп/рс1Ь" Щ(Л±="100%" Не1дЫ1="1000">

</оЬ]еск>

Рис. 7.7. Вкладка браузера с содержимым РОЕ-файла, выведенного из шаблона

7.1.4.	Вывод РОЕ-документа в формате флеш-анимации

Любой документ, который хранится в формате РВР-файла, можно конвертировать
в файл с флеш-анимацией (в документ формата или формата Сапуаз НТМЬ5). Та-
кой документ создается с помощью специального инструментария РНр РОТ РгоГеззюпа!
и имеет более привлекательный вид и расширенную функциональность. Внешне доку-
мент с флеш-анимацией выглядит как книга или журнал с цветными иллюстрациями —
его можно просматривать, перелистывая страницы или быстро перемещаясь по оглав-
лению. Кроме того, на любую его страницу можно встроить аудио- или видеофайл. До-
кумент в формате флеш-анимации имеет серьезную защиту от незаконного копирова-
ния, поскольку его содержимое невозможно скопировать в буфер обмена. Конвертацию
РВР-документа в формат флеш-анимации мы здесь рассматривать не станем (для этого
надо обратиться к документации по приложению РНр РЭР РгоГеззюпа!), а сосредото-
чимся на том, как такой документ можно отобразить в шаблоне В)ап§о.

В качестве примера мы возьмем интерактивную цифровую книгу «Детям о птицах».
Эта книга подготовлена в текстовом редакторе А^огб, сохранена в формате РЭР, а затем
с использованием приложения РНр РЭР РгоГеззюпа!, конвертирована в формат Сапуаз
НТМР5 (рис. 7.8).

Рис. 7.8. Каталог В1гс1§5 с цифровой интерактивной книгой «Детям о птицах»

Стартовым для запуска анимированной книги в веб-браузере является находящийся
в каталоге В1гс1з5 файл В|гб85.И1т1 — именно его нужно указывать в ЦКЬ-адресе, когда
книгу необходимо открыть на сайте. Этот файл сопровождается другими файлами
с изображениями и бауа-скриптами. Все их нужно перенести на сайт, т. е. в нашем слу-
чае на сайт нужно скопировать весь каталог В1гб85, с использованием РТР-терминала
выложить этот каталог в каталог 81аВс на сервере (рис. 7.9).

Чтобы открыть документ формата Сапуаз НТМЬ5, надо в главное меню или в любой
другй шаблон добавить его ЦКЬ-адрес: 81а11с/В|гб85/В|гб85.И1т1.

В нашей интерактивной цифровой книге для вызова этого документа создадим ссылку:

<а ЬгеЕ=’’{% иг1 'тазбег: рс!Е_ап1таЕе'%}” ЕагдеЕ =”_Ь1апк”>Показать РЭГ с анимацией</а>

По этой ссылке будет вызван ПКЪ-маршрут раг аптаке (листинг 7.6).

Листинг 7.6.11К1_-маршрут рсйаттаТе

# Показать файл РВЕ с анимацией

раЕЬ (’ рс!Е_ап1таЕе/', утемз. рНЕ_ап1та11е, пате=' рс!Е_ап1таГе'),
с П Ргодес± т

п~	> [ ьНор

Ь йайс

№ В|гбь5

|]_1

Д	> Ь1ч1ё5

©

! гпеЫ1е

: В।гбь5.НПпI
Ьсюк.ыл^
ЬсюкСоп^епТцилгГ

(3 ьНоТрпд

Рис. 7.9. Каталог В1гс1§5 с цифровой интерактивной книгой «Детям о птицах»
помещен в каталог з1айс веб-приложения

По этому маршруту вызывается представление рбв_ап1таы (листинг 7.7).

Листинг 7.7. Представление рсК_атта(е

#################################

#	Показать РВЕ-файл с анимацией #

#################################

беЕ рбЕ_ап1таЕе (гедиезк) :

гекигп гепбег(гериезЕ, "тазкег/д1ауа_7/рбЕ_ап1таке.Ькт1")

Из этого представления вызывается шаблон рс1Г_ап1та1е.И1т1 (листинг 7.8).

Листинг 7.8. Шаблон рсИ_атта(е

{% ехкепбз "зЬор/Ьазе.ЬктГ’ %}

{% 1оаб зкакас %}

{% Ыоск сопкепк%}

<оЬдеак

бака=' {% зкакйс ”В1гс1з5/В1гс1з5.Нкт1" %}1

Вуре=”арр11саВ1Оп/рНЕ" ^ас11±="100%" Не1дН11="1000”>

</окрес±>

{% епбЫоск сопкепЫ}

В этом шаблоне создан тег окпеы, в атрибуте бака которого указаны следующие пара-
метры:

♦	ИКЬ-адрес, по которому на сайте находится документ в виде анимационного РВР-
файла: {% зВаЫс ”В1гбз5/В1гбз5.Ыш1" %};

♦	ТИП ВЫВОДИМОГО документа: Вуре=”аррИсаЫоп/рбЫ;

♦	ширина и высота окна в пикселах, в котором будет показан документ: ыбы="1оо%”
Ье1дЫ=”1000”.
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Пока-
зать РОЕ с анимацией.

Если запустить на выполнение созданные в этом разделе программные модули, то
в окне браузера страница с содержимым анимационного файла формата Сапуаз НТМЕ5
будет выглядеть так, как показано на рис. 7.10, — документ здесь представлен в виде
книги, которую можно перелистывать (рис. 7.11).

Рис. 7.10. Документ В1гс1з5.Н1т1 в шаблоне рс1Т_ап1та1е.Н1т1

На второй странице книги имеется оглавление — кроме него, в нее, как показано на
рис. 7.11, встроен также фрейм с видеофайлом. Этот видеофайл допускается просмот-
реть, не покидая страницу, а оглавление представляет собой набор ссылок, щелкая на
которых можно сразу переходить в соответствующие разделы книги. Когда открывает-
ся первая страница раздела с тем или иным видом птицы, автоматически проигрывает-
ся аудиофайл с ее голосом.

На нижней панели имеется ряд кнопок: перелистнуть страницу, перейти на первую (по-
следнюю) страницу, показать оглавление в дополнительной вкладке (рис. 7.12) — с его
помощью также можно переходить от раздела к разделу.


Постелит А. В.

Детям о птицах (читай, смотри, слушай и рисуй).
Интерактивная цифровая книга — Москва: Рог(о1И Ргезз,
2024. — 60 с.: ил.

Интерактивная цифровая книга предназначена для детей
дошкольного и младшего школьного возраста.

В ней приведены интересные сведения о птицах, которые
живут в городах, населенных пунктах и лесах в
непосредственной близи от людей. Эту книгу можно не только
читать, но и слушать и даже рисовать. К книге приложены аудио
файлы, которые позволяют услышать пение птиц, а также набор
контурных рисунков для раскраски и графический редактор. В
графический редактор можно загрузить контурный рисунок
одного из видов птиц и раскрасить его. Можно также рисовать
любые другие изображения. К книге также приложены тесты, в
которых в игровой форме ребенок может по характеру пения
определить, к какой птице относится это пение.

Уникальность интерактивной цифровой книги заключается в
том, что в рамках одного веб-приложения ребенок может
просматривать текст книги, рисунки, слушать аудиоконтент и
рисовать.



Рис. 7.11. Документ В1гс1з5.П1т1 с раскрытыми страницами

]



о, = а <•

<Т к- • Ц 5	-
Рис. 7.13. Анимация перелистывания страниц книги

В момент перелистывания страницы выполняется анимация перелистывания — тем
самым имитируется листание страниц бумажной книги (рис. 7.13).

В нижней строке с функциональными кнопками имеется кнопка, которая формирует
и показывает рК-код (рис. 7.14). По этому коду можно загрузить документ на смартфон
и просматривать его на мобильном устройстве.

Рис. 7.14. ОР-код для загрузки цифрового анимационного документа на мобильное устройство
7.2.	Переводим страницы сайта на другие языки

Самый простой способ обеспечить быстрый перевод страниц вашего сайта на другие
языки — использовать виджет Ооо§1е Переводчик. Этот виджет позволяет переводить
страницы сайта на более чем 100 языков мира, а для его подключения к сайту доста-
точно написать всего несколько строк программного кода.

Лучше всего загрузить виджет для выбора языка перевода на базовую страницу сайта
(Ьаве.Ыт!) — в этом случае переводчик будет доступен на всех других страницах, по-
скольку, как правило, они являются дочерними по отношению к базовой странице.

Прежде всего, к базовой странице сайта надо подключить скрипты, которые обеспечат
загрузку переводчика Сгоо§1е:

<!— Скрипты переводчика начало —>

<зсг!рк куре="кехк^ачазсг1рк">

ЕипскФоп доод1еТгапз1акеЕ1ешепк1п1к() {

нем доод1е.кгапз1аке.Тгапз1акеЕ1ешепк ({радеЬапдиаде: ’ги’}, 'доод!е_кгапз1аке_е1етепк');
}

</зсг!рк>

<зсг!рк куре="кехк/дачазсг1рк"

згс=”//кгапз1аке. доод!е. сот/кгапз1аке_а/е!етепк. дз?сЬ=доод1еТгапз1акеЕ1етепк1п1к”>

</зсг!рк>

<!— Скрипты переводчика конец —>

Затем поместить сам виджет (выпадающий список для выбора языка перевода) в один
из элементов страницы — в главное меню, в титульную строку или в «подвал» главной
страницы:

<сПч 1с1=”доод1е_кгапз1аке_е1етепк" с1азз="кехк-сепкег"></сПч>

В нашей интерактивной цифровой книге для демонстрации работы переводчика Сгоо§1е
создана следующая ссылка:

<а ЬгеЕ=’’{% иг! 'тазкег:д_кгапз!аке'%}" кагдек ="_Ыапк’’>Перевод страниц сайта</а>

По ЭТОЙ ссылке активируется ИКЬ-маршруТ д_кгапз!аке (листинг 7.9).

Листинг 7.9. 1Ж1_-маршрут д_(гап$1а(е

#	Перевод страниц сайта

ракЬ( 'д_кгапз1аке/', чтемз .д_кгапз!аке, паше='д_кгапз1аке'),

По этому маршруту вызывается представление д_кгапз1аке (листинг 7.10).

Листинг 7.10. Представление д_(гап$1а(е

#################################

#	Показать РПЕ-файл с анимацией #

#################################

НеЕ д_кгапз!аке(гедиезк) :

гекигп гепйег(гедиезк, ”тазкег/д1ача_7/д_кгапз1аке.Ькт1”)

Из этого представления вызывается шаблон д_1гап81а1е.К1т1 (листинг 7.11).
Листинг 7.11. Шаблон д_(гап81а(е.Мт1

{% ехкепйз "зкор/Ьазе.кктГ’ %}

<	!— Скрипты переводчика начало —>

<зсг!рк куре="кехк/дачазсг1рк">

кипскгоп доод1еТгапз1аСеЕ1ешепр1п1С(} {

нем доод1е. кгапз!аке.Тгапз1акеЕ1ешепк ({радеЬапдиаде: ' ги'}, ' доод!е_кгапз1аке_е1етепк');
}

</зсг!рк>

<зсг!рк куре="кехк^ачазсг1рк"

згс=’7/Ргапз1аЬэ. доод1е. сот/кгапз1аке_а/е!етепк. дз?сЬ=доод1еТгапз1акеЕ1ет.епк1п1к">
</зсг!рк>

<	!— Скрипты переводчика конец —>

{% Ыоск сопкепк%}

<Ыч с1азз="гом кехк-зкагк тх-2">

<Ъ4>Выберите язык из списка</Н4>

<!— Список языков —>

<скч с!азз=”со1-2 кехк-сепкег">

<скч 1с1=”доод1е_кгапз1аке_е1етепк" с1азз="кехк-сепкег"></сИч>

</сНч>

</<Цч>

<скч с1азз=”гом кехк-зкагк тх-2">

<Ъ2>Это пример текста для перевода на другие языки</Н2>

</сНч>

{% епсЫоск сопкепк%}

В этот демонстрационный шаблон подгружены необходимые скрипты, вставлен виджет
для выбора языка перевода и добавлен простой текст, который должен быть переведен.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Пере-
вод страниц сайта.

Если запустить на выполнение созданные в этом разделе программные модули, то
в окне браузера страница с переводчиком Оо§§1е будет выглядеть так, как показано на
рис. 7.15.

Здесь по умолчанию установлен русский язык, но пользователь может из выпадающего
списка выбрать и другой язык — например, английский (рис. 7.16). После этого тексто-
вое содержание всех страниц сайта будет переведено на английский язык (рис. 7.17).

Выбрав из выпадающего списка какой-нибудь экзотический язык — например, араб-
ский, мы получим страницу, показанную на рис. 7.18, а выбор из списка китайского
языка, на котором разговаривают порядка полутора миллиарда человек, приведет нас
на страницу, показанную на рис. 7.19.

Обратите внимание, что на тот или иной язык переводится не только демонстрационная
страница, но и все другие страницы сайта.
"УМНИК" - Учебные, Методические,
Научные Интерактивные Книги

0 Авторизоваться

' Домашняя Каталог [X.10 компании  Контакта - Отзывы - Владелец Ш Тесть ’ Вднимация -

Выберите язык из списка

(русский

Технолог/? Ое д1г Переводчик

Это пример текста для перевода на другие языки

((• 1пЛират	СорупдЬт © Смарт Информ ^]ГасеЬоок

Системы. Дизайнер: Анатолий
Постол ит.

Рис. 7.15. Демонстрационная страница с переводчиком 6оод!е (по умолчанию установлен русский язык)

Выберите язык из списка		
	Быоратъ язык	V |	
	Вь брать язык	
	азербайджанский	
	аймара	кета д/
	албанский	
	амхарский	
	английский	
	I арабский	
	I армянский	1

Рис. 7.16. Выбор из списка английского языка для перевода страниц сайта

"11ММ1К" - Едисабопа!, Мебюс1о1одка1,
Баепбйс 1п1егасбуе Воокз

0Егйгапсе

Ноте СаЕа1од Х!А(хнЛ сотрапу лСопТасЬ йешет - Ма&1ег Штез15 ’ Вд'платой •

5е1ес1 а 1апдиаде (гот (Не Пз1

(английский	у|

Техмлоп» "П Переводчик

ТЫз 15 ап ехатр1е Тех! к>г 1гапз1абоп 1п1о об1ег 1апдиадез

СорупдЬ! © 5таг11п(огт
5у51ет5. Ое51дпес1 Ьу Апа1о1у
РобТоКс

ЕЗ ЬсеЬоок

Рис. 7.17. Демонстрационная страница переведена переводчиком 6оод!е на английский язык
Рис. 7.19. Демонстрационная страница переведена переводчиком (Зоод1е на китайский язык

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

При создании сайтов достаточно часто требуется отправлять пользователям почтовые
сообщения— например, подтвердить оплату заказа банковской картой, сообщить
о выезде курьера для доставки товара, информировать о новых услугах и т. п. Такие
сообщения должны формироваться и отправляться пользователям сайта автоматически
в фоновом режиме. Для реализации указанных функций нужно подключить к сайту
и настроить почтовый сервис. Выбор почтового сервиса, который будет использоваться
для отправки почты, предоставляется программисту, — это могут быть сервисы
шаП.ги, уапс!ех.ги, §ша11.сош и пр. Кроме того, вы можете задействовать почтовую
службу провайдера, на серверной площадке которого размещен ваш сайт. Поскольку
сайт с нашей интерактивной цифровой книгой размещен на серверной площадке рос-
сийского провайдера ТппедуеЬ, в этом разделе мы рассмотрим настройку отправки поч-
ты с помощью его почтового сервиса. Но для начала разберемся с протоколом почто-
вых сообщений.

Протокол ЗМТР

8МТР (8|тр1е Май ТгапвГег Рго1осо1) — это протокол, который используется для отправки
электронной почты через Интернет. Если вы хотите отправлять электронные письма со
своего веб-сайта или из приложения, вам необходимо правильно настроить 8МТР-сервер.
Т1те\л/еЬ является одним из популярных хостинг-провайдеров, и в этом разделе мы рас-
смотрим, как настроить 8МТР-протокол Т1те\л/еЬ.

Прежде всего, для работы по 8МТР-протоколу ТппедуеЬ необходимо создать на своем
домене почтовый ящик. Это можно сделать через панель управления ТппедуеЬ. Создай-
те новый ящик, выбрав адрес электронной почты, пароль и прочие настройки по своему
усмотрению. Убедитесь, что вы запомнили данные для доступа к этому почтовому
ящику, т. к. они понадобятся вам позже.

Создав почтовый ящик, перейдите к настройке 8МТР-протокола ТппедуеЬ на своем веб-
сайте или в приложении. Вам понадобятся следующие данные: адрес 8МТР-сервера
(обычно зпйрЛйпеутеЬ.ги), порт (обычно 25 или 587), адрес вашей электронной почты
и пароль доступа к нему. В некоторых случаях может понадобиться указать 88Ь- или
ТЪ8-соединение для безопасной отправки почты.

В каждом веб-сайте или приложении настройка 8МТР-протокола может выполняться
по-разному, поэтому следуйте инструкциям, предоставленным разработчиками про-
граммного обеспечения. Обычно вам достаточно найти раздел настроек электронной
почты и ввести все данные, полученные на предыдущем шаге.

Завершив настройку, проверьте работу 8МТР-протокола ТппедуеЬ, отправив тестовое
письмо, например, на адрес своей электронной почты. Убедитесь, что письмо успешно
отправлено и доставлено адресату. Если возникнут проблемы, проверьте правильность
введенных данных и свяжитесь со службой поддержки ТппедуеЬ для получения допол-
нительной помощи.

7.3.1.	Регистрация в почтовом сервисе Пте^еЬ

Чтобы начать работу с почтовым сервисом ТппедуеЬ, необходимо в нем зарегистриро-
ваться. Это можно сделать, выполнив несколько простых шагов:

1.	Откройте официальный сайт ТппедуеЬ1 и перейдите в раздел Почта личного кабине-
та на сайте (рис. 7.20).

ЫтеУУеЬ Ьк	Новости о Есть идея им

|Э Дашборд

Л

С Сайты	V

Купить домен

@ Домены

(й Файл, менеджер него

в Почта*

Мой баланс

Рис. 7.20. Раздел Почта личного кабинета на сайте провайдера Т1теууеЬ

2.	Выберите на открывшейся странице (рис. 7.21) тот домен, для которого требуется
настроить почту (в нашем случае гишп1к.ги), и перейдите по ссылке Добавить.

1 См. ЬПрз^/Ьозбп^.йтеугеЬ.ги/.
3.	В открывшемся окне для создания нового почтового ящика (рис. 7.22) задайте адрес
электронной почты отправителя (вашего сайта), пароль для отправки почтовых со-
общений и нажмите на кнопку Создать ящик — вам будет показано окно сформи-
рованного почтового ящика (рис. 7.23).

Г	1

Новый почтовый ящик

Логин

1пГо	@гитп!к.ги

Используйте латинские буквы и цифры

Пароль	Сгенерировать

лчччччччччч	к

Рис. 7.22. Окно создания нового почтового ящика

гитгнк.ги

§ Дашборд

(^) Сайты

Поиск почтового ящика..

@ Домены

1г3! Файл, менеджер ыеу/	Почтовые ящики -1 шт.

0 Почта

1пГо@гитп!к.ги В
Конструктор сайтов А

Занято места

а

О

Рис. 7.23. Созданный почтовый ящик

Теперь откройте файл 8ей1пд8.ру вашего проекта и настройте почтовый клиент, добавив
в конец этого файла следующий код (листинг 7.12).

Листинг 7.12. Параметры почтового клиента в файле зейтдз.ру

# это отправка почты через зтЕр. ТлпемеЬ

ЕМА1Ь_ВАСКЕШ = ' сЦ апдо. соге .таН. Ьаскепйз. зткр. ЕтаНВаскепс! ’

ЕМА1Ь_НОЗТ = ' зткр. кшемеЬ. ги1
ЕМА1Ь_ПЗЕ_ЗЗЬ = Тгие # для отправки с кше^еЬ

ЕМА1Ь_РОРТ =465

ЕМА1Ь_НОЗТ_ПЗЕР = "1пко@гитпкк.ги" # от кого

ЕМА1Ь_НОЗТ_РАЗЗЖ)НО = "хххххххххх" # пароль почты отправителя

На этом создание почтового клиента для сайта гишп1к.ги с адресом электронной почты
тГо@гишп1к.ги завершено. Теперь мы можем приступить к созданию набора модулей
для отправки почтовых сообщений со страниц сайта.

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

В нашей интерактивной цифровой книге для демонстрации работы модулей отправки
электронных писем создана следующая ссылка:

<	а Ьгек="{% иг! 'тазкег :изег_таН'%}" кагдек ="_Ыапк">Отправка почты</а>

По ЭТОЙ ссылке будет вызван ПКЪ-маршруТ изегтаП (листинг 7.13).

Листинг 7.13.11КЬ-маршрут изегтаП

#	Отправка почты

ракЬ ('изег_таН/', ч!емз .изег_таП, пате='изег_таП'),

По этому маршруту вызывается представление изегтаП (листинг 7.14).

Листинг 7.14. Представление изег_таП

#	подключение почтового клиента

кгот сЦапдо.соге.таН гтрогк зепсИпаП

#	Импорт параметров из файла зеккгпдз.ру

кгот сЦапдо.сопк лпрогк зеккгпдз
кгот . когтз лпрогк МаНЕогт

#	#################

#	Отправка почты #

#	#################

(ТеГ изег_таН (гедиезк) :

#	Параметры письма по умолчанию
кет = 'Тема сообщения'

кехк_ги = 'Содержание тестового почтового сообщения'
изег_таП = 'тиртир@таН.ги'

#	возврат после ввода данных

1к гедиезк.текЬоб == "РОЗТ":

когт = МаНЕогт (гедиезк. РОЗТ)

йк когт.кз_чаНб() :

изег_етаН = когт. с1еапес1_с1ака [' изег_таН' ]
кет = когт. с1еапеб_с1ака [' кете_таН' ]
кехк_ги = когт. с1еапес1_с1ака ['Ьос1у_так1' ]
бб 'уез' бп гедиезб.РОЗТ:
# ------- отправка сообщения ----

зепсИпаН (Рет, бехб_ги, зебббпдз.ЕМА1Ь_НОЗТ_Е8ЕЕ, [изег_ешаП])
е1зе:

разз

гебигп геабгесб(гечегзе('тазбег:Ьоок_тазбег'))

#	загрузка в форму параметров письма по умолчанию

богт = МаПЕогт({ 'бете_таП': бет, ' Ьос1у_табб' : бехб_ги, 'изег_табб': изег_табб})
сопбехб = {'богт’: богт}

гебигп гепбег(гедиезб, "тазбег/дбача_7/изег_табб.Нбтб", сопбехб)

Обратите внимание, что для работы этого представления нужно выполнить импорт до-
полнительных пакетов Э)ап§о. Кроме того, для нашего примера в файле Гогтз.ру проек-
та необходимо создать форму маббгогт для отображения и корректировки параметров
почтового сообщения (листинг 7.15).

Листинг 7.15. Форма МаНЕогт

###################################

#	Форма для почтового отправления #

###################################

сбазз МаббЕогт( богтз.Еогт) :

изег_таб! = богтз. ЕтаббЕбебс1(баЬеб='е-табб получателя',
гедибгес!=Тгие,

мббдеб=богтз.Техбагеа(аббгз={'гомз': 1, 'собз': 40}))

бете_таб! = богтз.СЬагЕбебб(баЬеб='Тема письма',
мббдеб=богтз.Техбагеа(аббгз={'гомз': 1, 'собз': 40}))

Ьобу_таб1 = богтз.СЬагЕбебб(баЬеб='Содержание письма',
VIбдеб=богтз.Техбагеа(аббгз={'гомз': 6, 'собз': 40}))

В этой форме для ввода и корректировки данных созданы три поля:

♦	изегтабб — е-тай получателя;

♦	бете_табб — тема письма;

♦	Ьобу табб — содержание письма.

В представлении изегтабб сначала формируются параметры электронного письма по
умолчанию:

♦	бет — тема сообщения;

♦	бехб ги — текст почтового сообщения;

♦	изегтабб — электронный адрес получателя.

Здесь приведены данные простого примера для проверки работы почтового сервиса.
В реальном приложении тема сообщения и текст письма могут формироваться динами-
чески с выборкой информации из БД (например, номера заказа, стоимости продуктов
в заказе, даты оплаты заказа и т. п.). Электронный адрес получателя также может быть
считан в БД из модели с профилем зарегистрированного пользователя. То есть форми-
рование всех параметров письма и его отправка клиенту могут быть выполнены авто-
матически в фоновом режиме. В нашем же примере после формирования параметров
письма по умолчанию создается форма (объект когт), в которую передаются параметры
письма для их корректировки. Затем эта форма с параметрами письма по умолчанию
загружается в словарь сопкехк, который передается в шаблон и8ег_таП.И1т1 (лис-
тинг 7.16) для корректировки.

Листинг 7.16. Шаблон и8ег_таН.Гйт1

{% ехкепЬз "зЬор/Ьазе.Ькт!" %}

{% Ыоск сопкепк%}

<Ыу с1азз="гом кехк-зкагк тх-2">

<когт аск1оп=”” теккос1="розк">

{% сзгк_кокеп %}

<каЫе с!азз=”кехк-зкагк">

{{ когт.аз_каЫе }}

</каЫе>

<Ьиккоп

с1азз="Ькп Ькп-зиссезз Ькп-зт"

пате=”по” опсИск="Ызкогу.Ьаск() "><-Отмена

</Ьиккоп>

<1прик куре="зиЬткк" пате="уез"

с!азз="Ькп Ькп-ргвтагу Ькп-зт" уа1ие="0тправить письмо">

<1 с1азз="Ы Ы-зепсГ></1>

</когт>

</сПу>

{% епсЫоск сопкепк%}

В этом шаблоне выводится набор полей для корректировки данных и имеются две
кнопки: Отмена --- ДЛЯ Отмены отправки ПОЧТОВОГО сообщения И Отправить письмо — для

отправки почтового сообщения.

В форме этого шаблона вы можете написать свой адрес электронной почты, скорректи-
ровать текст темы и содержания письма. После нажатия на кнопку отправить письмо поль-
зователь будет возвращен в преставление изег таЫ в режиме РО8Т-запроса, при этом
объект когт получит из формы маыгогто скорректированные пользователем данные.

После проверки корректности формы из нее считывается скорректированная информа-
ция и формируются следующие объекты:

♦	ызет? етаН — котт.сТеапес! Ьака [ 'изег так!1 ] Электронный адрес получателя,

♦	кет = когт. ЫеапесЫака [' кете_таИ' ] — Тема ПИСЬМа;

♦	кехк_ги = когт.ЫеапесЫака [ 'Ьос1у_так1' ] —содержание ПИСЬМа.

Затем вызывается функция В)ап§о зепЬ таЫО, в которую передается набор параметров
почтового сообщения:

зепЫтаН (кет, кехк_ги, зекквпдз.ЕМА1Ь_НО8Т_ЬЗЕК, [изег_етаН])
В этой функции присутствуют следующие параметры:

♦	гет — тема почтового сообщения;

♦	гехг ги — содержание почтового сообщения на русском языке (к нему можно доба-
вить копию этого сообщения на других языках);

♦	зеШпдз.ЕМАть нозт изЕк — электронный адрес отправителя (в нашем случае это адрес
на серверной площадке ТппедуеЬ: 1пЕо@гитп1к.ги);

♦	изег етаИ — Электронный адрес получателя (по умолчанию тиртир@таИ. ги ИЛИ ТОТ
адрес, который пользователь ввел в форме МаНЕогт).

Именно эта функция активирует отправку почтового сообщения. После отправки поч-
тового сообщения пользователь будет направлен на страницу ЬооктазЕег.

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

Итак, теперь можно проверить, как работают модули отправки почтовых сообщений.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке От-
правка почты (рис. 7.24).

Переход по ссылке Отправка почты откроет форму мапгогто (рис. 7.25).

Глава 7. Показ примеров

•	Показать РРЕ яз представления

•	Показать РРЕ из шаблона

•	Показать РРЕ с анимацией

•	Перевод страниц сайта

•	Отправка почты ч

•	Новогодний снегопад

•	Кнопки с анимацией

•	Привет РуБспрс

•	Импорт пакета и Функции

•	Импорт тпру и рапсЗад

•	Визуализация данных

•	Привет ВгЛИоп

•	Змейка на ВгЛЬог

Рис. 7.25. Форма МаНЕогт () для корректировки
параметров почтового сообщения

Рис. 7.24. Вкладка Показ примеров: вызов
примера страницы отправки почты

Измените в этой форме почтовый адрес получателя (здесь вы можете указать свой лич-
ный адрес электронной почты), скорректируйте тему и содержание письма и нажмите
на кнопку Отправить письмо — в результате вы будете возвращены на страницу
Ьоок тазкег с вкладками интерактивной цифровой книги (рис. 7.26).

Откройте теперь свою личную почту — если все настройки были выполнены коррект-
но, то на нее придет электронное письмо от почтовой службы сайта гшшпк.ги
(рис. 7.27).
Вкладки интерактивной книги

Текст РОГ Листинги Показ примеров

—	г_4_4.р<1Т

1/8	—	64%	4-

□

1

2

4.4.	Функции с при»

Мы уже паем, что существуй
обращении к функциям им
поименованы» аргументов О
нужно передать аргументы, к
процессе работы программно!
«» Оператор звездочка ча
РуГпоп он имеет и другой
«распаковывать» объекты, в

В Ру1поп передать в фумк
можно двумя способами.

•	’агдв - для неименованш

•	'Псшагдв - для именована

Здесь «’агд$» — это сокраш
ант «кеужол) агдитепи» (и*
для распаковки аргументов
аргументов переменной дли

Если функция должна при
именем ее 1фини мающего
случае все принятые функщ

Если функция должна принт
ее принимающего парамец
случае нее принятые фу ниц

Рис. 7.26. Страница Ьоок тазТег после отправки почтового сообщения

тсн!

Главная

Почта 1

Все проекты

О 

Аренда сервера УЛЗ недорога Ай

2 дня теста бесплатно. Скоростные МУМе. Выбор панели управпенн

5^'еЬ.ги

01

Е

0	□ Отметить все прочитанными

Сегодня

Фильтр «

• 1пГс@гитп1к.ги Тема сообщения скорректированная Содержали.

Рис. 7.27. Письмо, полученное от почтовой службы сайта гиттк.ги

таП Главная Почта Все проекты V О.

<- О Удалить Э В архив ^3 В папку Спам	ф

Тема сообщения скорректированная
0

1ПГ0@П1ГПП1к Ш Сегодня, 13:57	д

Кому вам

Содержание тестового почтового сообщения. Проверка раооты почтовой службы сайта
Э готгнк.ги

Рис. 7.28. Содержание полученного сообщения от почтовой службы сайта гитгнк.ги
Вы можете открыть это письмо и прочитать его содержание (рис. 7.28). Как здесь мож-
но видеть, все настройки были выполнены корректно, и почтовая служба сайта доста-
вила получателю электронное письмо с актуальным содержанием.

7.4.	Используем скрипты в шаблонах О]апдо

Для встраивания на страницу сайта исполняемого кода используется элемент НТМЬ —
тег <зсг1рг>. Обычно такие теги служат для встраивания кода 1ауа8спр1. Однако этот
элемент также можно задействовать для встраивания кода и на других языках — на-
пример, на РуЙюп.

Чтобы включить код 1ауа8спр1 в шаблон В)ап§о, можно применить самостоятельный
тег <зсг1рг> (в этом случае скрипт будет работать только в рамках текущего шаблона):

<!-Включение кода скрипта —>

<зсг!рк>

// Код функции на ТачаЗсгФрВ

ЕипсЫоп туЕипсЫоп () {

// Программный код тела функции
}

</зсг!рк>

а можно использовать тег <зсг1рг> вместе с тегом В)ап§о {% Ыоск %} (обернуть код
скрипта в тег В)ап§о):

{% Ыоск ^аVазс^^рк %}

<!-Включение кода скрипта —>

<ЗСГ1рВ>

// Код функции на ПачаВсггрВ

ЕипсЫоп туЕипсЫоп () {

// Программный код тела функции
}

</зсг1рВ>

{% епбЫоск ^аVазс^^рк %}

В этом случае в дочерних шаблонах можно будет переопределить код текущего скрипта.

Все мы знаем, что в В)ап§о на языке РуЙюп выполняется создание модулей, работаю-
щих на стороне сервера, однако РуЙюп также можно использовать вместо ЗауаБспр! и
для создания скриптов, работающих на стороне клиента. Для этого достаточно под-
ключить к своему проекту пакет ВгуЙюп.

ВгуЙюп расшифровывается как «браузерный РуЙюп» — реализация РуЙюпЗ, запущен-
ная в браузере. Считается, что основная цель ВгуЙюп — это возможность заменить
1ауа8спр1 в качестве языка сценариев для браузера. Большинство современных браузе-
ров, работающих на компьютерах и смартфонах, поддерживают ВгуЙюп.

ВгуЙюп, в свою очередь, поддерживает большую часть синтаксиса РуЙюпЗ, включая
генераторы, классы, импорт и пр., а также многие модули интерпретатора СРуЙюп.
Кроме того, он включает библиотеки для взаимодействия с существующими библио-
теками ЗауаБспр! — такими как )()иегу, ЗВ, Н^йсйагТз, КарЬае! и др., поддерживает
последние спецификации НТМБ5/С883 и может использовать С88-фреймворки — та-
кие как Воо181гарЗ, ЬЕ88, 8А88 и т. п.
В 2022 году на конференции РуСоп 2022 компания Апасопба анонсировала фреймворк
Ру8спр1, который позволяет задействовать РуЙюп в интернет-браузерах на стандартных
НТМЬ-страницах. В последующих разделах мы на небольших примерах покажем, как
можно применять 1ауа-скрипты, РуЙюп-скрипты и фреймворк РуЗспр! в шаблонах
□)ап^о.

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

Многие сайты в преддверии праздников меняют оформление своих страниц. Например,
перед Новым годом добавляют снежинки и сосульки, перед 23 февраля — элементы
воинской атрибутики, перед 8 Марта — букеты цветов. Для этого в шаблоны р)ап§о
встраиваются 1ауа-скрипты, реализующие указанные эффекты. При этом можно опре-
делить автоматическую активацию таких скриптов при наступлении заданных дат и
отключение их, когда праздничные дни завершаются.

В этом разделе мы рассмотрим, как можно в шаблон Р]ап§о встроить 1ауа-скрипт, соз-
дающий иллюзию падающих снежинок. Его также можно активировать перед Новым
годом, а после новогодних праздников — закомментировать. Самое главное здесь то,
что для создания всех этих эффектов нет необходимости разрабатывать программный
код на языке 1ауа — достаточно подключить готовый скрипт.

Для запуска страницы с новогодним снегопадом в главном меню или на одной из стра-
ниц вашего сайта нужно создать ссылку:

<а Нгеб="{% иг! 'тазбег:Ьоок_зпом'%}" багдеб ="_Ыапк">Новогодний снегопад</а>

По этой ссылке будет вызван 1ЖЕ-маршрут Ьоок зпом (листинг 7.17).

Листинг 7.17. ОКЬ-маршрут Ьоок_8по>/у

#	Новогодний снегопад

рабН(’Ьоок_зпом/’, чбемз.Ьоок_зпом, паше='Ьоок_зпом'),

По этому маршруту вызывается представление Ьоок зпом (листинг 7.18).

Листинг 7.18. Представление Ьоок_8поуу

#	Интерактивная книга с Новогодним снегопадом #

Неб Ьоок_зпом(гедиезк):

тез = 'Это сообщение получено из представления'

баЬ = ['Текст РВЕ', 'Листинги', 'Показ примеров']

сопбепб = {'тез': тез, 'баЬ': баЬ}

гебигп гепбег(гедиезб, 'тазбег/Ьоок_зпом.Нбт!', сопбепб)

Из этого представления вызывается шаблон Ьоок_8по\л/.И1т1 (листинг 7.19).

Листинг 7.19. Шаблон Ьоок_8ПО5/у.Гйт1

{% ехбепбз "тазбег/д1ача_7/Ьазе_зпом.Нбт!" %}
{% 1оаб збабгс %}
{% Ыоск сопкепк%}

<Ьг сВазз="тк-В тЬ-В’7> <!— линия —>

«Нч сВазз="гом">

<сИч с1азз=”со1-6 кехк-сепкег">

<Ъ2>Вкладки интерактивной книги</Ы>

</сИч>

</сНч>

<!— начало вкладок заголовки—>

<иВ с1азз=”пач пач-каЬз">

{% Вог оЬд 1п каЬ %}

<11 сВазз="пач-1кет ”>

<а йгеВ="#ч{{ ВогВоор.соипкег }}"

с1азз=”пач-Ипк {% йВ ВогВоор.ВВгзк %}аск1че{% епсИВ %}”

йака-Ьз-коддВе="каЬ">{ {оЬд} }</а>

</И>

{% епйВог %}

</иВ>

<!— содержимое вкладок—>

<сИч сВазз="каЬ-сопкепк">

{% Вог оЬд 1п ВаЬ %}

<сИч сВазз="каЬ-рапе Вайе {% 1В ВогВоор.Втгзк %}зВюм асВ1че{% епсИВ %}”

Вй="ч{ { ВогВоор.соипкег }}”>

<скч сВазз=”гом ту-В">

<скч сВазз=”соВ-В2 кехк-зкагк">

{% 1В ВогВоор.соипкег == В %}

{% ВпсВийе "тазкег/Ьоок/Ьоок_рйВ.В1ктВ" %}

{% еВ1В ВогВоор.соипкег == 2 %}

{% ВпсВийе "тазкег/Ьоок/Ьоок_ВВзкВпд.В1ктВ" %}

{% еВ1В ВогВоор.соипкег == 3 %}

{% ВпсВийе "тазкег/Ьоок/Ьоок_га2ЙеВ.кктк" %}

{% епсИВ %}

</(Ы>

</(Ы>

</сЫ>

{% епйВог %}

</сЫ>

<!— конец вкладок —>

{% епсЫоск сопкепк %}

Этот шаблон является наследником базового шаблона Ьа8е_8по\л/.К1т1 (листинг 7.20).
Именно в этом базовом шаблоне подключены 1ауа-скрипты, обеспечивающие анима-
цию новогоднего снегопада.

Листинг 7.20. Шаблон Ьа8е_8по\л/.Мт1

<ЮОСТУРЕ ЫтВ>

{% Воай апаВукВсаВ %}
<Ыт1 1апд="еп">

<Ьеас1>

{% апа1уЫса1_Ьеас1_1:ор %}

{% 1оас1 зкакхс %}

<ЫЫе>{% Ыоск ЫЫе %}{% епйЫоск %}</ЫЫе>

<!— подключение Воокзкгар локально —>

<тека скагзек="ЕТЕ-8">

<тека пате="ч1емрогк" сопкепк="ЫЫк=с1еч1се-Ыс1кк, 1п1Ыа1-зса1е=1">

<!— Подключение Воокзкгар локально —>

<Ипк ге1="зку1езкеек" ЫеГ="/зкаЫс/сзз/Ьоокзкгар.т1п.сзз" >

<зсг!рк с!еГег згс="/зкаЫс/] з/Ьоокзкгар.ЬипсПе .т!п. ]з"></зсг1рк>

<!— Подключение Воокзкгар из сети —>

{#<Ыпк ЬгеГ="Ыкрз://сс!п.]зйеИуг.пек/прт/Ьоокзкгар@5.3.З/сИзк/сзз/Ьоокзкгар.тдп. сзз" ге!="зку1езкеек">#}

{#<зсг1рк згс="Ыкрз: //сс!п. ] зйеИчг. пек/прт/Ьоокзкгар@5.3.3/сНзк/]з/Ьоокзкгар. ЬипсПе.ппп. ]з"></зсЫрЫ#}

<!— Подключаем иконки Воокзкгар Тсопз 2000—>

<Ипк кгек="ЬЫрз: / / сЬп. ] збеИзг. пек/прт/Ьоокзкгар-1сопз@1.10.5/ГопЬ/ЬоокзЬгар-гсопз. сзз"
ге1="зку1езкеек">

<!— Подключение приеду локально—>

<зсг!рО згс="ЬЫрз: //а]ах. доод1еар!з. сот/а]ах/ИЬз/]диегу/3.5.1/]диегу.пап. ] з"></зсг1рк>

<теОа пате="с1езсг1рЫоп" сопОепЫ"Русские магазины в Лондоне: КаИпка, каИпка-зкор,

каИпка ГооЬ, гизздап зкор, гизздап ГооЬ, калинка">

<теОа пате="кеумогс!з" сопкепЫ" КаИпка, каИпка зкор, каИпка ГооЬ, гизздап зкор,
гиззгап ГоосО калинка, ЬопЬоп, Лондон, продукты">

<теОа пате="аиЫюг" сопЬепЬ="АпаЬо1И РозОоИО, Анатолий Постолит">

<!— Переводчик начало —>

<зсг!рО 0уре="0е2:-Ь/]ачазсг1рк">

ГипсЫоп доод1еТгапз1а-ЬеЕ1етепЫп1-Ь () {

пей доод1е.0гапз1а1:е.Тгапз1а'ЬеЕ1етеп'Ь ({радеЬапдиаде: 'ги'}, ’доод1е_'Ьгапз1а'Ье_е1етеп'Ь’);

}

</зсг1рк>

<зсг!рО 0уре="0ех0/]ачазсг1р0"

згс="//0гапз1а'Ье. доод1е. сот/ -Ьгапз1а0е_а/е1етепк. ]з?сЬ=доод1еТгапз1а'ЬеЕ1етепЫп1'Ь">

</зсг!рО>

<!— Переводчик конец —>

{% апа1у01са1_Неас1_ЬоЫот %}

</Ьеас1>

<Ьос1у>

{% апа1уЫса1_Ьос!у_0ор %}

<!— Подключение скриптов Новогоднего снегопада—>

<Ипк ЫеЫ'ЧтЫрз: //сс!п. ]зсЗеИчг.пеО/дк/А1аеч-Со/зпоиПакез/Ызк/зпои.тдп.сзз" ге1="з-Ьу1езкее-Ь">

Ы— Запуск скриптов для анимации снегопада—>

<зсг1рО згс="Ы0рз: //сс!п. ]зс1е11?г.пек/дк/А1аеч-Со/зпоиПакез/сИзО/Зпои.тгп. ]з"></зсг1рк>

<зсг1рк>

пей Зпои ();

</зсг1рк>

<!— Конец снегопада—>
<!— Строка заголовка сайта —>

<сЦу с1азз="сопка1пег-Пи1Ь р-1 Ьд-лпаде кехк-иЫке кехк-сепкег" зку1е="Ьаскдгоипс1-лпаде:

иг1 ('/зкактс/лпадез/рапе!. дрд’) ;">

<сЦу с1азз="гои">

<!— логотип слева —>

<Ыч с1азз="со1-2 кехк-зкагк">

<1тд згс="{% зкакгс '1тадез/итп1к.д1Г' %}" с1азз="1тд-Г1и1сГ а1к="СГС">

</сЦу>

<!— логотип в центре —>

<с!1у с1азз="со1-8 ту-аико">

<Ь2>"УМНИК" - Учебные, Методические, Научные Интерактивные Книги</Ь2>

</Ь1Ч>

<!— Кнопки входа справа —>

<сИч с1азз="со1-2 кехк-сепкег ту-аико">

{% 1Г изег.1з_аикЬепк!сакес1 %} <!— Вошел зарегистрированный пользователь —>

{{ изег .дек_изегпате }}-> <а с1азз="Ькп Ькп-оиЬИпе-Идйк Ькп-зт"

Ьгек="{% иг1 'изегз:саЫпек' %}">

<1 с1азз="Ы Ы-регзоп"></1>
Кабинету/а>

<а с1азз="пач-Ипк" Ьгек="{% иг1 '1одоик'%}?пехк=/">

<1 с1азз="Ы Ы-Ы1е-аггои-ир"></1> Выход</а>

{% е1зе %} <!— Конец блока зарегистрированный пользователь —>

<а с1азз="пач-Ипк" Ьгек="{% цг1 '1од1п'%}?пехк={{гедиезк.ракй}}">

<1 с1азз="Ы Ы-Ы1е-аггои-боип"></1> Вход</а>

{% епсИГ %}

</Ыч> <!— Конец блока зарегистрированный пользователь —>

</с11у>

</сИч> <!— Конец строки заголовка сайта —>

<1— Главное меню —>

<с11у с1азз="сопка1пег-Г1и1Ь">

<сНч с1азз="гои Ьд-магптпд кехк-сепкег">

<Ь6>

<а ЬгеГ="{% иг1 'зЬор:гпбех' %}"><! с1азз="Ы Ы-Ьоизе-с1оог"></1> Домашняя</а>

<а ЬгеГ="{% иг1 'зЬор:а11_зЬор' %}"><! с1азз="Ы Ы-1ауоик-кехк-м1пскж"></1> Каталог</а>

<а ЬгеГ="{% иг1 'зЬор:аЬоик' %}"><! с1азз="Ы Ы-регзоп-здиаге"></1> 0 компании</а>

<а ЬгеГ="{% иг1 'зЬор:сопкаск' %}"> <1 с1азз="Ы Ы-Ье1ерЬопе-1пЬоипс1"></1> Контакты</а>

<а ЬгеГ="{% иг1 'зЬор:и1зЬ_зЬом' %}"><! с1азз="Ы Ы-Ьос1у-кехЬ"Х/1> Отзывы</а>

{# <а ЬгеГ="{% иг1 ' зЬор: зЬои_теЫа' %}"><! с1азз="Ы Ы-ЬоЬу-ЬехЬ"></!> Медиа</а> #}

<а ЬгеГ="{% иг1 'тазкег:Ьоок_тазкег' %}"><! с1азз="Ы Ы-ЬоЬу-кехк"></!> Мастер</а>

<!— Меню Тесты—>

<Ьиккоп с1азз="Ькп Ькп-зт Ьгорскжп-кодд1е" куре="Ьиккоп"
Ьака-Ьз-кодд1е="с1горскжп" аг!а-ехрапс!ес1="Га1зе">
<1 с1азз="Ы Ы-кехкагеа-к"></1> Тесты

</Ьиккоп>

<и1 с1азз="с!горскжп-тепи">

<И><а с1азз="с!горс1оип-1кет пате=1"

Ьгек="{% иг1 'зЬор:а11_кезк' 16=1 %}">

<1 с1азз="Ы Ы-Ьоок"></1> Пройти тест</а></И>

<И><а с1азз="с!горс1оип-1кет"

Ьгек="{% иг1 'зЬор:а11_кезк' 16=2 %}">

<1 с1азз="Ы Ы-тогкагЬоагсГ></1> Итоги тестов</ах/И>

</и1>
<!— Меню Анимация—>

сЬиббоп сбазз="Ьбп Ьбп-зт Ыорскжп-боддбе" буре="Ьиббоп"
Ьаба-Ьз-боддбе="с1горскжп'' агба-е>:рапс!ес1="бабзе">

<б с1азз="Ы Ьб-бббт"ж/б> Анимация

</Ьиббоп>

<иб Ыазз="с1горсЫп-тепи''>

сббжа Ыазз="ЫорсЫп-ббет пате=1"

Ьгеб="{% иг б 'збюр:зЬои_ббазЬ' %}">

<б с1азз="Ы Ьб-бббт"ж/б> Анимация ЕбазЬ</аж/1б>
сббжа Ыазз="ЫорсЫп-ббет"

Ыеб="{% игб 'зЬор:зНои_Ьбтб5' %}">

сб с1азз="Ы Ьб-бббт"ж/б> Анимация НТМЬ5</а></И>

</ц1>

с/Ь6>

с/с16у>

<	/сИ^> с!— Конец главного меню —>

<	!— Центральный блок —>

{% Ыоск раде %}

{% Ыоск бебб_сопбепб %}{% епсЫоск бебб_сопбепб %} <!— Это левый контент —>

{% Ыоск кагизеб %}{% епсЫоск кагизеб %} <!— Это карусель —>

{% Ыоск ЬеаЬег %}{% епсЫоск ЬеаЬег %} <!— Это заголовок перед контентом —>

{% Ыоск зЬор %}{% епсЫоск зЬор %} <!— Это магазин —>

{% Ыоск сопбепб %}{% епсЫоск сопбепб %} <!— Это центральный контент —>

{% Ыоск гбдЬб_сопбепб %}{% епсЫоск гбдЬб_сопбепб %} <!— Это правый контент —>
{% епсЫоск раде %} <!— Это конец центрального блока—>

<	!— Подвал начало —>

<	Ыг Ыазз="сопбабпег-б1ибсГ>

сЬбч с1азз="гои Ьд-бпбо Ьд-ораЫбу-50 бе>:б-сепбег беиб-Ьагк зта11 бЬ-зт рб-2 ту-2">

{% Ыоск бообег %}

<Ыч Ыазз="со1-2 бехб-сепбег">

{#<а Ьгеб="Ьббрз://ишЫпзбадгат.сот/каИпка. 1опс1оп/?узс11с1=1г3е>:др3аи212883232"

багдеб="_Ыапк">#}

сбтд згс="{% збаббс ’бтадез/бпзбадгат.рпд' %}" с1азз="1тд-Ыи1с1"ж/а>

</Ыч>

<сИл Ыазз="со1-2 бехб-сепбег">

<бтд згс="{% збаббс 'бтадез/ок.рпд' %}" сбазз="бтд-ббибс1">

</Ыч>

Ыбч сбазз="соб-4 бехб-сепбег">

<Ь5> СоругбдЬб © Зтагб бпбопп Зузбетз. Эезбдпеб Ьу Апабобу Розбо1бб</Ь5>

<	/Ыч>

<±Ы сбазз="соб-2 бехб-сепбег">

{#<а Ьгеб="Ьббрз://басеЬоок.сот/ргобббе.рЬр?бб=100084313734392" багдеб="_Ыапк">#}

<бтд згс="{% збаббс 'бтадез/Яо.рпд' %}" сбазз="бтд-ббибс1"ж/а>

<	/Ыч>

<с!бч сбазз="соб-2 бехб-сепбег">

<Ыч бс!="доодбе_бгапзбабе_ебетепб" сбазз="бехб-сепбег"ж/Ыч> <!— Переводчик —>

<	/Ыч>
{% епсЫоск Гоокег%}

</сИу>

</сИ^> <!— Подвал конец —>
{% апа1ук!са1_Ьос1у_Ьоккот %}

</Ьос1у>

</МтГ>

У этого шаблона достаточно большой и сложный код, но нам сейчас важны всего не-
сколько его строчек — тех, где происходит подключение и активация скриптов:

<!— Подключение скриптов Новогоднего снегопада—>

<Ипк Ьге^=”ЬГкрз://сс!п.дзЦе^дуг.пе^/дН/АТаеу-Со/впо^Иакев/сНвк/зпо^.тгп.сзз” ге1=”зГу1езЬееГ">

<!— Запуск скриптов для анимации снегопада—>

<зсг!рк згс="ЬТТрз://сбп. дзбеЫчг.пеЬ/дЪ/АТаеч-Со/зпо^Пакез/сПзТ/Зпо^.тп. дз"></5СГ1р|;>

<зсг!рГ> нем Зпом (); </зсг!рк>

<!— Конец снегопада—>

Здесь с использованием тега <Ипк ... > происходит подключение к удаленным скрип-
там в сети Интернет, а в двух следующих тегах <зсг1рг>.. .</зсг1рг> обеспечивается
запуск кода скриптов на выполнение.

Итак, теперь можно проверить, как работают модули придания странице сайта ново-
годнего стиля.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Ново-
годний снегопад (рис. 7.29).

Переход по ссылке Новогодний снегопад вызовет открытие страницы с шаблоном
Ьоок_8по\л/.И1т1 (рис. 7.30).

Глава 7. Показ примеров

X

Показать РРЕ из представления
Показать РРЕ из шаблона
Показать РРЕ с анимацией
Перевод страниц сайта
Отправка почты
Новогодний снегопад 4
Кнопки с анимацией
Привет РуБсг-щ
Импорт пакете и Функции
Импорт гитру и рапоаз
Визуализация данных
Привет ВгДИол

Змейка на ВгуУтоп
Вкладки интерактивной книги

80%	+

г_4_4.р<1Т

|екст РОЕ Листинги Показ примеров

4.4. Функции с приемом пе

/ 8

Если функция должна принять разн
именем ее принимающего параметра
случае все принятые функцией данные

Если функция должна принять разное
ее принимающего параметра ставите
случае все принятые функцией данные

Здесь «*агдз» — это сокращение от ан
анг. «кеу\\гого агдитеп1з» (именованны
для распаковки аргументов соответстЕ
аргументов переменной длины.

В РугЬоп передать в функцию пере»
можно двумя способами;

• ’агдз - для неименованных аргумен

• ~к«агд5 * для именованных аргуме!

Чтобы код программы был более пот
имен таких параметров использовать
ции эл- —'лледовательности
но. Например,

Мы уже знаем, что существуют два вида
обращении к функциям им необходим!
поименованных аргументов Однако прогр
нужно передать аргументы, количество
процессе работы программного модуля. ||
«’» Оператор звездочка чаще всего
РуФоп он имеет и другой смысл. 3|
«распаковывать» объекты, внутри кото

Рис. 7.30. Страницы в новогоднем стиле с падающими снежинками и растущими сугробами

Как здесь можно видеть, сверху появились падающие снежинки, а в нижней части
страницы растут снежные сугробы. Когда сугробы достигают определенной высоты,
выезжает трактор и отвалом убирает выросшие сугробы (рис. 7.31).

случае все принятые функцией данные

Если функция должна принять разное
ее принимающего параметра ставите
случае все принятые функцией данные

Чтобы код программы был более пот
имен таких параметров использовать
тела функции эти последовательности
это совсе не обязательно. Например.

Рис. 7.31. Трактор, убирающий снежные сугробы

Всего несколько строк программного кода для подключения 1ауа-скриптов, добавлен-
ные в этом примере, придают страницам книги живость за счет симпатичных анимаци-
онных эффектов. Это обеспечивает привлекательность сайта и создает у пользователей
праздничное настроение.
7.4.2.	Скрипты для анимации кнопок

Страница сайта становится более «живой» и в том случае, когда кнопки откликаются на
действия пользователя, — например, при нажатии на них меняют цвет, размер или над-
пись. Так, при большом количестве записей в БД добавление, обновление или удаление
данных может занимать некоторое время. В этом случае при нажатии, например, на
кнопку с надписью Удалить на ней может появиться вращающий спин, и он должен
присутствовать на кнопке до тех пор, пока процедура удаления записи из БД не будет
завершена. Или — другой вариант: при нажатии на кнопку с надписью Удалить она
должна стать недоступной, а надпись на ней смениться на ЖДИТЕ.... Для анимации
кнопок также используются 1ауа-скрипты.

Напишем пример программного кода, в котором создадим три кнопки с анимацией:
первая кнопка при нажатии будет уменьшаться в размерах, на второй надпись в про-
цессе выполнения некоторого действия будет заменена на вращающийся спин, третья
кнопка после нажатия станет недоступной с заменой надписи.

Для демонстрации страницы с анимированными кнопками в главном меню или на
одной из страниц вашего сайта нужно создать ссылку:

<а Ь.геТ="{% иг1 'тазкег:а_ЬиГ1:оп' %}" 1загде1з ="_Ыапк">Кнопки с анимацией</а>

По этой ссылке будет вызван ПКЬ-маршрут а Ьи^оп (листинг 7.21).

Листинг 7.21. ЫНЬ-маршрут а_Ьийоп

ра1± (’ а_ЬиГСоп/', утемз. а_ЬиГГоп, пате=' а_Ьи1111оп'),

По этому маршруту вызывается представление а Ьи^оп (листинг 7.22).

Листинг 7.22. Представление а_Ьийоп

######################
# Кнопки с анимацией #
######################
сЯеГ а_ЬиШ)п(гериезК) :

геКигп гепйег(гедиезВ, "тазКег/д1ауа_7/а^иККоп.Ылп1”)

Из этого представления вызывается шаблон а_Ьийоп.К1т1 (листинг 7.23).

Листинг 7.23. Шаблон а_Ьийоп.Мт1

{% ехКепйз "зйор/Ьазе.ЪКт!" %}

<!— Стиль для анимации кнопки —>

<зКу1е>

.ЬиККоп {

раскНпд: 15рх ЗОрх;

^опК-злге: 18рх;

со1ог: мЫКе;

Ьаскдгоипс1-со1ог: #007ВГГ;

Ьогйег: попе;

сигзог: ротпВег;
кгапзйкйоп: Ьаскдгоипб-соког О.Зз;

}

.Ьиккоп:коуег {
Ьаскдгоипб-соког: #0056ЬЗ;
кгапзкогт: зса!е(1.1);

}

</зку!е>

{% Ыоск сопкепкк}

<(Ы с1азз=”гом кехк-зкагк тх-2 ту-2">

<с11у с!азз="со1-2 кехк-зкагк тх-2">

<!— Кнопка с изменения размера —>

<Ьиккоп

с!азз="Ьиккоп Ькп Ькп-зиссезз" 1с1="туВиккоп">

<1 с!азз="Ы Ы-кгазЬЗ"></1> Кнопка с анимацией
</Ьиккоп>

</Ыу>

<(Ы с1азз=”со1-2 кехк-зкагк тх-2">

<!— Кнопка с крутящимся спином —>

<Ьиккоп куре="зиЬткк" с!азз="Ькп Ькп-зиссезз кодд!е-кехк">
<зрап><1 с!азз=”Ы Ы-ЬгазкЗ"></1> Кнопка со спином</зрап>
<зрап с1азз=”Ыс1с1еп зртппег-ЬогЬег зраппег-ЬогЬег-зт”
го1е=”зкакиз” аг1а-ЫсК1еп="Ьгие"></зрап>

</Ьиккоп>

</Ыу>

<(Ы с1азз=”со1-3 кехк-зкагк тх-2">

<!— Кнопка с блокировкой и сменой надписи—>

<Ьиккоп пате=”уез” Ьс1="туВиккоп2" с!азз="Ькп Ькп-с1апдег”>

<1 с!азз="Ы Ы-кгазЬЗ"></1> УДАЛИТЬ ЗАПИСЬ ИЗ БД
</Ьиккоп>

</Ыу>

</Ыу>

<!— Скрипт для вращения спина на кнопке —>

<зсгЬрк>

$ (' . Ыббеп') . гетоуеСТазз (' ЫсЫеп') . ЬЫе () ;

$ (’ . Ьодд1е-ЬехЬ') . сИск (кипсЫоп () {

$ (кЫз) . ккпс!( ’зрап’) .еасЬ (кипсЫоп () { $ (кЫз) .коддЬе (); });

});

</зсгЬрк>

<!— Скрипт для анимации кнопки —>

<зсгЬрк>

сопзк Ьиккоп = боситепк.декЕ1етепкВу1с1('туВиккоп');

Ьиккоп. аббЕуепкЫзкепе г ('тоизебомп', 0 => {

Ьиккоп.зкуке.кгапзкогт = 'зса!е(0.9)
});

Ьиккоп.аббЕуепкЫзкепег ('тоизеир', 0 => {

Ьиккоп.зкуТе.кгапзкогт = 'зса!е(1)
});

</зсгкрк>
<!— Скрипт для блокировки кнопки и смены надписи —>
<зсг!рб буре="бехб^ауазсг1рб">

$ (боситепб) .геабу (бипсЫоп () {

$ ("#туВиббоп2") . сЫск (бипсЫоп () {
// БбзаЫе ббе Ьиббоп

$(бЫз) .ргор ("ббзаЫеб", бгие);

$ ('#туВиббоп2') . Ьбт! ('ЖДИТЕ.

});

});

</зсг!рб>

{% епбЫоск сопбепб %}

В этом шаблоне созданы три кнопки:

♦	Кнопка с анимацией — уменьшается при нажатии;

♦	кнопка со спином — при первом нажатии появляется спин, при втором нажатии он ис-
чезает;

♦	удалить запись из бд — при нажатии кнопка становится недоступной, и на ней меняет-
ся надпись.

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

Теперь можно проверить, как работают модули анимации кнопок.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Кнопки
с анимацией (рис. 7.32).

При переходе по ссылке Кнопки с анимацией будет показан шаблон а_Ьийоп.И1т1
(рис. 7.33).

Глава 7. Показ примеров

•	Показать РРЕ цз предстаЕдення

•	Показать РОЕ У13 шаблона

•	Показать РРЕ с анимацией

•	Перевод страниц сайта

•	Отправка почты

•	Новогодний снегопад

•	Кюгкл с ан и масле и "

•	Привет РуБспрь

•	Импорт пакета и Функции

•	Импорт плтру и рапбаа

•	Бквуа.г-г1зация данных

•	Привет ВгДИол

•	Змейка на БгуФог

Рис. 7.32. Вкладка Показ примеров: вызов примера страницы с анимированными кнопками
Й Кнопка с анимацией

Й Кнопка со спином

Й УДАЛИТЬ ЗАПИСЬ ИЗ БД

Рис. 7.33. Внешний вид страницы с анимированными кнопками

Если здесь нажать на кнопку с надписью Кнопка с анимацией, она уменьшится в раз-
мерах, а когда вы ее отпустите, кнопка вернется к своим прежним размерам.

Если нажать на кнопку с надписью Кнопка со спином, надпись на кнопке будет заме-
нена на вращающийся спин (рис. 7.34), а при повторном нажатии на нее она примет
прежний вид.

8 Кнопка с анимацией

8 УДАЛИТЬ ЗАПИСЬ ИЗ БД

Рис. 7.34. Внешний вид кнопки с вращающимся спином

В реальном проекте спин будет вращаться на кнопке до тех пор, пока процесс, с кото-
рым она связана, не завершится (например, это может быть удаление записи из БД).
А по завершении процесса произойдет переход к другой странице сайта, и кнопка
с вращающимся спином просто исчезнет с экрана.

При нажатии на кнопку УДАЛИТЬ ЗАПИСЬ ИЗ БД она заблокируется и станет не-
доступной, при этом на кнопке появится новая надпись: ЖДИТЕ... (рис. 7.35).

5 Кнопка с анимацией й Кнопка со спином	ЖДИТЕ...

Рис. 7.35. Внешний вид кнопки УДАЛИТЬ ЗАПИСЬ ИЗ БД после блокировки и смены надписи

7.5.	Используем фреймворк Ру8спр1 в шаблонах О|апдо

РуБспр! — это интерфейсная среда РуЙюп, которая позволяет пользователям создавать
программы на РуЙюп с использованием НТМЕ-интерфейса в браузере. Она была разра-
ботана с использованием возможностей современных веб-технологий.

За последние пару десятилетий РуЙюп и продвинутые языки пользовательского интер-
фейса— такие как современные НТМЕ, С88 и 1ауа8спр1 — существовали в отрыве
друг от друга. У РуЙюп не было простого механизма для создания привлекательных
пользовательских интерфейсов в веб-приложениях, в то время как НТМЕ, С88 и
ЗауаБспр! активно развивались в этом направлении. Однако среда РуБспр! не предна-
значена для того, чтобы заменить ЗауаБспр! в браузере — скорее, она призвана предос-
тавить разработчикам РуЙюп, особенно специалистам по обработке данных, больше
гибкости и удобств при разработке веб-приложений.

РуБспр! предоставляет язык программирования с единообразными соглашениями
о стиле, большей выразительностью и простотой изучения и реализует следующие воз-
можности:

♦	работает непосредственно в браузере, обеспечивая поддержку кода на РуЙюп без
дополнительных настроек;
457

♦	осуществляет двунаправленное взаимодействие между объектами и пространствами
имен РуЙюп и 1ауа8спр{;

♦	поддерживает популярные пакеты РуЙюп, такие как рапбаз, МппРу и многие другие;

♦	позволяет легко создавать расширяемые компоненты непосредственно на РуЙюп;

♦	позволяет разработчикам выполнять импорт файлов и пакетов, которые следует
добавить в код своей страницы;

♦	позволяет создавать проекты с использованием доступных компонентов пользова-
тельского интерфейса — таких как кнопки, контейнеры и др.

Чтобы использовать Ру8спр1 на НТМЬ-странице, нужно обеспечить доступ к интер-
фейсу Ру8спр1 с использованием следующего кода:

<Ипк ге1="зРу1езЬееР" ЬгеР='ЪРРрз://рузсгРрР.пеР/аРрЬа/рузсгйрР.сзз” />

<зсгРрР НеРег згс=”ЬРРрз: //рузсгтрр.пеР/а1рПа/рузсгРрР. дз”х/зсгРрР

7.5.1.	Ру8спр1: отображение в шаблоне О]апдо
содержимого символьной переменной и списка

Напишем простой код на Ру8спр1, который отобразит в шаблоне Э]ап§о содержимое
символьной переменной и списка. Для демонстрации страницы с кодом на РуЗспр!
в главном меню или на одной из страниц вашего сайта нужно создать ссылку:

<	а ЬгеР=”{% иг! 'тазРег:Ье11о_рз'%}" РагдеР ="_Ыапк">Привет РуЗсгйрР</а>

По этой ссылке будет вызван ПКП-маршрут Ье11о_рз (листинг 7.24).

Листинг 7.24. Маршрут IIК1_ с именем Ье11о_р8

#	Скрипт Ье11о_рз на РуРЬоп

раРЬ(’Ье11о_рз/’, уремз.Ье11о_рз, пате='Пе11о_рз'),

По этому маршруту вызывается представление Ье11о_рз (листинг 7.25).

Листинг 7.25. Представление Ье11о_рв

##############################

#	Пример страницы с РуЗсгРрР #
##############################

НеР Ье11о_рз(гедиезР) :

геРигп гепНег(гедиезР, "тазРег/д1ауа_7/Пе!1о_рз.ЬРтГ’)

Из этого представления вызывается шаблон Ие11о_р8.И1т1 (листинг 7.26).

Листинг 7.26. Шаблон 11е11о_р8.№т1

{% ехРепйз "зЬор/Ьазе.ЬРт!" %}

{% Ыоск сопРепР %}

<Ипк ге1="зРу1езЬееР" ЬгеР="ПРРрз://рузсгтрр.пеР/а1рЬа/рузсгРрР.сзз" />

<зсгтрр НеРег згс="ЬРРрз://рузсгтрр.пеР/аРрПа/рузсгРрР.дз"х/зсгйрр>
«11V с1азз="гом бехб-збагб тх-2">

<ЬЗ>Это пример работы РуЗсг1рб</кЗ>

<ЬЗ>В шаблоне ^^апдо</ЬЗ>

<ЬЗ>---------------------------</НЗ>

</сИу>

<6гу с1азз="гом бехб-збагб тх-2">

<ру-зсгБрб>

ргбпб ("Программа на РубЬоп, выполненная в браузере")

Изб = ['Бананы', 'Яблоки', 'Груши', 'Апельсины']

Бог Б Бп гапде (1еп(Изб)) :

Ббет = Изб [Б]

ргБпб(Б'{1+1}. {Ббет}')

</ру-зсгБрб>

</сНу>

{% епбЫоск сопбепб %}

В самом начале этого шаблона выполняется подключение модулей фреймворка
Ру8спр1. Затем создается тег <ру-зсг1рб>.. .</ру-зсгБрб>, в теле которого содержится са-
мый обычный код на РуЙюп: печатается текстовая строка и создается список Изб, кото-
рый выводится на печать с использование цикла бог.

Теперь можно проверить, как работают скрипты фреймворка РуЗспрй

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Привет
РуЗспр! (рис. 7.36).

При переходе по ссылке Привет Ру8сг1р€ будет показан шаблон Ке11о_р8.И1т1
(рис. 7.37). Как здесь можно видеть, скрипт вывел на НТМЬ-страницу содержимое тек-
стовой переменной и список фруктов.

Глава 7. Показ примеров	X

•	Показать РРЕ -из представления

•	Показать РРЕ из шаблона

•	Показать РРЕ с анимацией

•	Перевод страниц сайта

•	Отправка почты

•	Новогодний снегопад

Кнопки с ангмаьией

Привет РуБспр!

•	Импорт пакета и Функции

•	Импорт тпру и рапоаа

•	Визуализация данных

•	Привет ВгЛИол

•	Змейка на БгутЬог

Это гример работы РуБспрГ
в шаблоне Р)апдо

Программа на РуЖоп, выполненная в браузере

1.	Бананы

2.	Яблоки

3.	Груши

4.	Апельсины

Рис. 7.36. Вкладка Показ примеров: вызов
примера страницы с показом содержимого
символьной переменной и списка

Рис. 7.37. Внешний вид страницы с показом
содержимого символьной переменной и списка
7.5.2.	Ру8спр1: импорт дополнительных библиотек,
создание функции и выполнение обращений к ним

В скриптах Ру8спр1 можно выполнять импорт дополнительных библиотек, создавать
функции и выполнять обращение к ним.

Для демонстрации возможностей импорта пакетов и создания функций на Ру8спр1
в главном меню или на одной из страниц вашего сайта нужно создать ссылку:

<а йгек="{% иг1 'тазкег:1трогк_р' %}" 1загде1з ="_Ыапк">Импорт пакета и функции</а>

По этой ссылке будет вызван 1ЖЬ-маршрут шрогг р (листинг 7.27).

Листинг 7.27. ЫНЬ-маршрут 1тро11_р

# Импорт пакета и создание функций

ракй (’ 1трогк_р/', укемз. йтрогк_р, пате=11трогк_р1),

По этому маршруту вызывается представление шрогг р (листинг 7.28).

Листинг 7.28. Представление 1тро11_р

####################################
# Импорт пакета и создание функций #
####################################
бек лпрогк-Р(гедиезк):

гекигп гепбег(гедиезк, "тазкег/д1ауа_7/ктрогк_р.к1кт1”)

Из этого представления вызывается шаблон 1трой_р.И1т1 (листинг 7.29).

Листинг 7.29. Шаблон 1тро11_р.Гйт1

{% ехкепбз "зйор/Ьазе.йкт!" %}

{% Ыоск сопкепк %}

<Ипк ге1=”зку1езйеек" йгек="]тккрз://рузсгкрк.пек/акрйа/рузсгкрк.сзз” />

<зсг1рк бекег згс="йккрз: //рузсгкрк.пек/акрка/рузсгтрк. дз”х/зсг1рк>

<сПу с1азз="гом кехк-зкагк тх-2">

<ЪЗ>Это пример работы РуЗсг1рк</йЗ>

<ЪЗ>В шаблоне ^^апдо</йЗ>

<ЪЗ>---------------------------</ЬЗ>

</аы>

<61V с1азз="гом кехк-зкагк тх-2">

<ру-зсг!рк>

кгот гапбот лпрогк гапсИпк

бек абс!_кш_питЬегз (х, у) :
гекигп х + у
с!еГ депегаТе_гапбот_пш1Ьег () :
х = гапсИпТ (0, 10)
гебигп х

у = депегаТе_гапбот_питЬег ()
рг!пТ(Г’{"Случайное число-"} {у}')

х1 = депегаТе_гапбот_питЬег ()

у1 = депегаТе_гапбот_пи1пЬег ()

2 = абб_Тто_питЬегз (х1, у1)

рглпТ (Р {"Сумма двух случайных чисел-"} {г}')

</ру-зсг!рТ>

</сНч>

В самом начале этого шаблона выполняется подключение модулей фреймворка
Ру8спр1. Затем создается тег <ру-зсг1рт>...</ру-зсг1рт>, в теле которого содержится са-
мый обычный код на РуЙюп. В этом коде выполняется импорт пакета для генерации
целых случайных чисел: Ггот гапбот трогт гапсНпг. Определены также две функции: для
сложения двух чисел: бег абб_^о_пигоЬегз (х, у) и для генерации случайного числа в ин-
тервале ОТ О ДО 10: бе! депегаТе_гапбот_пш1Ьег().

Теперь можно проверить, как работают скрипты РуЗспрС

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Им-
порт пакета и функции (рис. 7.38).

При переходе по ссылке Импорт пакета и функции будет показан шаблон
1трой_р.Ыт1 (рис. 7.39). Как здесь можно видеть, скрипт вывел на НТМЬ-страницу ре-

Глава 7. Показ примеров

•	Показать РРЕ яз представлен г я

•	Показать РРЕ яз шаблона

•	Показать РРЕ с анимацией

•	Перевод страниц сайта

•	Отправка почты

•	Новогодний снегопад

•	Кнопки с ангмаыей

•	Привет РуБсп-РТ

•	Импорт пакета к Функции

•	Импорт питру и ратюаз

•	Енвуа.р изация данных

•	Привет ВгЛИоп

•	Змейка на БгуФог

Это пример работы РуБспр!
в шаблоне О]апдо

Случайное число- 5

Сумма двух случайных чисел- 1С

Рис. 7.38. Вкладка Показ примеров: вызов примера
страницы для импорта дополнительных библиотек,
создания функции и выполнения обращений к ним

Рис. 7.39. Внешний вид страницы
с результатами работы функций
зультаты работы функций. Поскольку функции работают со случайными числами, то
при каждом обновлении страницы будет получен другой результат.

7.5.3.	Ру8спр<: работа с пакетами МитРу и рагИаз

В скриптах Ру8спр1 можно задействовать такие библиотеки для обработки данных, как
МппРу и рапбаз.

Для демонстрации возможностей работы с пакетами МитРу и рапбаз в главном меню
или на одной из страниц вашего сайта нужно создать ссылку:

<	а ИгеГ="{% иг1 'тазкег:1трогк_р2'%}" кагдек ="_Ыапк">Импорт питру и рапбаз</а>

По этой ссылке будет вызван ПКЪ-маршрут 1трогк_р2 (листинг 7.30).

Листинг 7.30. 11К1_-маршрут 1тро11_р2

#	Импорт питру и рапбаз

ракЬ ('1трогк_р2/', у!емз.1трогк_р2, пате='1трогк_р2'),

По этому маршруту вызывается представление 1трогк_р2 (листинг 7.31).

Листинг 7.31. Представление 1тро11_р2

#########################

#	Импорт питру и рапбаз #
#########################
сГеГ 1трогк_р2 (гедиезк) :

гекигп гепбег(гедиезк, "тазкег/д1ауа_7/1трогк_р2.ИктГ’)

Из этого представления вызывается шаблон 1трой_р2.И1т1 (листинг 7.32).

Листинг 7.32. Шаблон 1тро11_р2.Ыт1

{% ехкепбз "зЬор/Ьазе.Ькт!" %}

{% Ь1оск сопкепк %}

<Ипк ге1="зку1езкеек" кгеГ="кккрз://рузсг1рк.пек/а1рка/рузсг1рк.сзз" />

<зсг!рк бекег згс="кккрз: //рузсгарк.пек/а1рка/рузсг1рк. дз"х/зсг1рк>

<61V с1азз="гом кехк-зкагк тх-2">

<ИЗ>Это пример работы РуЗсг1рк</ИЗ>

<ИЗ>В шаблоне ^^апдо</кЗ>

<ИЗ>---------------------------</ИЗ>

</сИу>

<61V с1азз="гом кехк-зкагк тх-2">

<ИЗ>Импорт библиотек питру и рапбаз</ИЗ>

<ру-етт>

-	питру

-	рапбаз

</ру-епу>
<ру-8СГ1р^>

лпрогк питру аз пр

йпрогр рапбаз аз рс!

х = рб.Зегбез([1,2,3,4,5,6,7,8,9,10])

рг1пР([1**2 Рог 1 1п х])

</ру-зсг!рР>

</сНу>

{% епбЫоск сопкепк %}

В самом начале этого шаблона выполняется подключение модулей фреймворка
Ру8спр1. Затем создается тег <ру-зсг1рк>...</ру-зсг1рк>, в теле которого содержится са-
мый обычный код на РуЙюп. В этом коде выполняется импорт пакетов МпшРу и рапбаз
для обработки статистики и определен объект х, в который с использованием библиоте-
ки рапбаз загружен одномерный массив. Затем с помощью цикла Гог этот массив выво-
дится на печать.

Теперь можно проверить, как работают скрипты фреймворка РуЗспрй

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Им-
порт питру и рапйаз (рис. 7.40).

При переходе по ссылке Импорт питру и рапйаз будет показан шаблон 1трог1:_р2.И1т1
(рис. 7.41).

Глава 7. Показ примеров

Показать РРЕ яз псёдстзелён^я
Показать РРЕ из шаблона
Показать РРЕ с анимацией
Перевод страниц сайта
Отправка почты
Новогодний снегопад
Кнопки с анимацией

Привет РуБспрг

Импорт пакета и функции
Импорт питру и рапсЗаз
Визуализация данных
Привет- ВгЛИоп

Змейка на Бгубчог

Рис. 7.40. Вкладка Показ примеров:
вызов примера страницы для работы
с пакетами ЫитРу и рапбаз

Это гример работы РуЗапр!
в шаблоне Цапдо

Импорт библиотек питру и рапбаз
[1. 4. 9. 16, 25, 36, 49. 64. 81. 100]

Рис. 7.41. Внешний вид страницы с результатами
работы с пакетами ЫитРу и рапбаз
7.5.4. Ру8спр1: работа с внешними библиотеками
для обработки и визуализации данных

В скриптах Ру8спр1 можно задействовать внешние библиотеки для обработки и визуа-
лизации данных.

Для демонстрации возможностей работы библиотек, выполняющих обработку и визуа-
лизацию данных, в главном меню или на одной из страниц вашего сайта нужно создать
ссылку:

<а ВгеЕ="{% иг1 ’тазкег :1трогр_р3’%}’’ 1загде1з ="_Ыапк" визуализация данных</а>

По этой ссылке будет вызван ПКЪ-маршрут трогк рЗ (листинг 7.33).

Листинг 7.33. 11К1_-маршрут 1тро11_рЗ

# Визуализация данных

раЫ (’ 1трогЕ_рЗ/', у!емз. 1трогЕ_рЗ, пате=' 1трогЕ_рЗ'),

По этому маршруту вызывается представление ипроы_рЗ (листинг 7.34).

Листинг 7.34. Представление 1тро11_рЗ

#######################

# Визуализация данных #
#######################
йеВ 1трогЕ_рЗ(гедиезк) :

геЕигп гепсЗег (гериезЕ, ”тазкег/д1ауа_7/1трог11_рЗ .ЫтГ’)

Из этого представления вызывается шаблон 1трой_рЗ.И1т1 (листинг 7.35).

Листинг 7.35. Шаблон 1тро11_рЗ.Мт1

{% ехЕепйз "зЬор/Ьазе.ЫтГ' %}

{% Ыоск сопкепк %}

<Ипк ге1=”зку1езкеек" ИгеЫ'ЪЫрз://рузсг1рк.пек/а1рка/рузсг1рк.сзз” />

<зсг1рк (ЗеВег згс="ЫЕрз: //рузсЫрк.пек/аХрВа/рузсгарк. ]з”х/зсг1рк>

<зсг1рк Вуре="кехк/зауазсг1р11"

згс="ЫЕрз: //сс1п.ЬокеЫогд/Ьокек1/ге1еазе/Ьокек-2.4.2 .тп.зз”х/зсг1рк>

<зсг1рк Вуре="кехк/зауазсг1р11"

згс=”ВЫрз: //сс!п.ЬокеЫогд/Ьокек1/ге1еазе/Ьокек-д1-2.4.2 .тп. дз"х/зсг1рк>

<зсг1рк Вуре="кехк/зауазсг1р11"

згс="ЫЕрз: //сс!п.ЬокеЫогд/ЬокеЫге1еазе/ЬокеЫЫс1декз-2.4.2 .тп. дз’’х/зсг1рк>

<зсг1рк Вуре="кехк/зауазсг1р11"

згс="ЫЕрз: //сс!п.Ьокек.огд/Ьокек1/ге1еазе/Ьокек1-каЫез-2.4.2 .пйп. дз”х/зсг1р11>

<зсг1рк Вуре="кехк/зауазсг1р11"

згс=”ВЫрз://сйп.Ьокек. огд/Ьокек/ге1еазе/Ьокек-такк] ах-2.4.2 .тлп. зз”х/зсг!рк>

<ЫЫе>Скагк Ехатр1е</ЫЫе>

<ЫЫе>Скагк Ехатр1е</ЫЫе>
<ру-етт>

- Ьокек

- питру
- рапбаз
</ру-епу>

<сИV с1азз="гом кехк-зкагк тх-2">

<ЪЗ>Это пример работы РуЗсг1рк</йЗ>

<ЪЗ>В шаблоне ^^апдо</йЗ>

<ЪЗ>--------------------------</НЗ>

</бЫ>

<61V с1азз="гом кехк-зкагк тх-2">

<ЪЗ>Импорт библиотек ^зоп, руосНбе и Ьокек</к13>

<Ь2 >В1стограмма</к2 >

<6Ы 1б="скагк"></бЫ>

<ру-зсг!рк>

трог к ^зоп

ттрогк руобббе

кгот дз нпрогк Вокей, сопзо1е, ЛЗОМ

кгот Ьокей.етЬеб нпрогк ^зоп_^кет

кгот Ьокек.ркокккпд нпрогк кбдиге

кгот Ьокей.гезоигсез нпрогк СОМ

уедекаЫез = ['Морковь', 'Лук', 'Картофель', 'Капуста', 'Чеснок']

уакиез = [15, 23, 34, 14, 12]

р1 = кбдиге(х_гапде=уедекаЫез, Ье1дйк=350, к1к1е="Продажа овощей за прошлый месяц",
коо1Ьаг_1осак!оп=Копе, коо!з="")

р1.уЬаг(х=уедекаЫез, кор=уа1иез, Ыбкк=0.9)

р1.хдг1б.дг1б_Ипе_со1ог = Попе

р1.у_гапде.зкагк = О

р_дзоп = дзоп.битрз(дзоп_1кет(р1, "сйагк"))

Вокей.етЬе6.етЬеб_1кет(бЗОМ.рагзе (р_дзоп))

</ру-зсг!рк>

</бЫ>

{% епбЫоск сопкепк %}

В самом начале этого шаблона выполняется подключение модулей фреймворка
РуЗспр! и ряда других 1ауа-скриптов. Затем создается тег <ру-зсг1рк>.. .</ру-зспрк>,
в теле которого содержится самый обычный код на РуЙюп. В этом коде выполняется
импорт пакетов для обработки и визуализации данных и создаются два списка со ста-
тистическими данными. Затем с использованием библиотек для визуализации данных
выводится гистограмма продаж овощей за последний месяц.

Теперь можно проверить, как работают эти скрипты фреймворка Ру8спр1.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Визуа-
лизация данных (рис. 7.42).

При переходе по ссылке Визуализация данных будет показан шаблон 1трог1:_рЗ.И1т1
(рис. 7.43).
Глава 7. Показ примеров

•	Показать РРЕ из пдедстаЕленгя

•	Показать РРЕ из шаблона

•	Показать РРЕ с анимацией

•	Перевод страниц сайта

•	Отправка почты

•	Новогодний снегопад

•	Кнзгки с анимацией

•	Привет РуБспрс

•	Импор~ пакете к Функции

•	Импорт пдтру и рапоаа

•	Визу а лизания данных 4—

•	Привет ВгуМпоп

•	Змейка на Вгутбог

Рис. 7.42. Вкладка Показ примеров: вызов примера страницы для работы с внешними библиотеками,
обеспечивающими обработку и визуализацию данных

Это пример работы РуЗспрТ
в шаблоне Цапдо

Импорт библиотек ]50п. руоб1с1е и бокеН
Гистограмма

Рис. 7.43. Внешний вид страницы с результатами работы с внешних библиотек,
обеспечивающих обработку и визуализацию данных
* * *

Из материалов этого раздела вы узнали, что такое РуЗспр! и как использовать его для
запуска кода РуЙюп в веб-браузерах. РуЗспр! находится пока на ранних стадиях разви-
тия (альфа-тестирование) и сталкивается с такой проблемой, как длительное время
загрузки модулей. Но он будет развиваться и совершенствоваться, и уже сейчас вы мо-
жете использовать его в своих проектах.

Как показано в рассмотренных в этом разделе примерах, фреймворк РуЗспр! может
быть прекрасным дополнением к фреймворку В)ап§о. Оба фреймворка используют
язык программирования РуЙюп, а значит, вы можете в проектах задействовать знако-
мый и привычный набор библиотек РуЙюп для обработки и визуализации данных.

7.6.	Используем пакет Вгу1Ноп

для создания программ на РуНтоп для НТМЬ-страниц

Хотя 1ауа8спр1 является общепринятым языком интерфейсной веб-разработки, у вас
может быть несколько причин искать альтернативные возможности:

♦	вам не нравится писать код на 1ауа8спр1, и вы его плохо знаете;

♦	у вас нет времени на изучение 1ауа8спр1.

♦	у вас большой опыт и практические навыки в использовании РуЙюп.

Какова бы ни была причина, многие разработчики предпочли бы найти в РуЙюп аль-
тернативу 1ауа8спр1 для создания программ, работающих не только на сервере, но и
в браузере клиента. Однако одним из негативных эффектов использования РуЙюп
в браузере является потеря производительности по сравнению с тем же кодом на
1ауа8спр1, и пакет Вгуйюп позволяет преодолеть этот эффект, компилируя код на
РуЙюп в код на 1ауа8спр1.

Чтобы использовать ВгуЙюп на НТМЬ-странице, нужно обеспечить доступ к модулям
этого пакета:

<зсг!рГ Гуре = "ГехГ^ауазсгарГ"

зге = ’ЪГГрз://сйп. ^зс1е1^V^ .пеГ/прш/ЬгуГНоп@3.8.9/ЬгуГЬоп.т1п.]з”>
</зсг!рГ>

<Ьос1у оп1оас! = "ЬгуГЬоп()">

<зсг!рГ Гуре = "ГехГ/руГЬоп">

<код на РуГЬоп>

</зсг1рГ>

</Ьос1у>

Здесь сначала загружаются 1ауа-скрипты, обеспечивающие работу программных моду-
лей Вгуйюп в среде браузера (ьгугьоп.тп.дз). После этого вызывается функция ЬгугьопО,
которая читает код РуЙюп в текущей области видимости и компилирует его
в 1ауа8спр1. Затем тег <зсг1рг гуре = ”гехг/ругьоп”>.. .</зсг1рг> устанавливает тип сцена-
рия гехг/ругьоп — это указывает ВгуЙюп, что внутри тега находится код РуЙюп, который
необходимо скомпилировать и выполнить.
7.6.1. Вгу111оп: вывод на НТМЬстраницу
обычной символьной строки

Напишем для примера простой код на РуЙюп, который отобразит на НТМЬ-странице
обычную символьную строку. Для демонстрации этой страницы в главном меню или на
одной из страниц вашего сайта нужно создать ссылку:

<а ЬгеВ="{% иг1 'тазкег:Ье11о_Ьг'%}" 1загде1з ="_Ыапк">Привет ВгукЬоп</а>

По этой ссылке будет вызван УКЬ-маршрут Ье11о_Ьг (листинг 7.36).

Листинг 7.36. ЫНЬ-маршрут Ье11о_Ьг

# Привет ВгтдЬкоп

ракЬ(’Ье11о_Ьг/', утемз.Ье11о_Ьг, пате='Не11о_Ьг'),

По этому маршруту вызывается представление Ье11о_Ьг (листинг 7.37).

Листинг 7.37. Представление Ье11о_Ьг

###################
# Привет ВгукЬоп #
###################

НеВ Ье11о_Ьг(гедиезк):

гекигп гепйег(гедиезк, "тазкег/д!ауа_7/Не11о_Ьг.Нкт1”)

Из этого представления вызывается шаблон Ке11о_Ьг.И1т1 (листинг 7.38).

Листинг 7.38. Шаблон Ье11о_Ьг.11(т1

<!Воскуре Ькт1>

<Ькт1>

<Ьеас1>

стека сЬагзек = "икк-8">

сзсгтрк куре = "кехк/дауазсгйрк"

зге = "Ьккрз ://сс!п.^зс1е1^V^ .пек/прт/ЬгукНоп@3.8.9/ЬгукЬоп.т1п.]з">

</зсг1рк>

</Ьеас1>

<Ьос1у оп1оас! = "ЬгукЬоп()">
сзсгтрк куре = "кехк/рукЬоп">
кгот Ьгомзег лпрогк Носитепк
Носитепк <= "Привет ВгукНоп!"

</зсг1рк>

</Ьос1у>

</Ькт1>

В этом шаблоне сначала загружаются 1ауа-скрипты, а затем вызывается функция
ЬгукЬопО, которая читает код РуЙюп, в котором выполняется импорт пакета ВгуЙюп,
и в окне браузера выводится строка привет вгукЬоп!.

Теперь можно проверить, как работает код РуЙюп в среде ВгуЙюп.
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Привет
ВгуЩоп (рис. 7.44).

Глава 7. Показ примеров

•	Показать РРЕ ^13 предстаЕленгя

•	Показать РРЕ ;13 шаблона

•	Показать РРЕ с анимацией

•	ПесЁБСд страниц сайта

•	Отправка почты

•	Новогодней снегопад

•	Кнопки с ан и манией

•	Привет РуБспрг

•	Импорт пакета и функции

•	Импорт пиппру и рапоаг

•	В к зу аризация данных

•	Приве~ ВгЛИоп ч —

•	Змейка на ВгутИог

Рис. 7.44. Вкладка Показ примеров: вызов примера страницы для вывода
с помощью пакета ВгуИлоп простой символьной строки

При переходе по ссылке привет вгутьоп будет показан шаблон Ке11о_Ьг.И1т1 (рис. 7.45). Как
здесь можно видеть, скрипт вывел на НТМЬ-страницу содержимое текстовой перемен-
ной.

0	© 127.0.0.1:8000/тайегЬе11о_Ьг/

0 Яндекс Яндекс Маркет 11г АУАТВ © аруИлоп.т

Привет Вг.ТВсп!

Рис. 7.45. Внешний вид страницы, демонстрирующей вывод с помощью пакета ВгуИлоп
простой символьной строки

7.6.2. ВгуНюп: игра «Змейка»

(создание окон, функций и обращений к ним)

Рассмотрим пример с более сложным кодом, где создаются окна, функции и обращения
к ним (например, игру «Змейка»). Для вызова такого кода создадим следующую ссылку:

<И><а ИгеВ="{% иг1 'тазТег:Ье11о_Ьг1’%}" ТагдеТ ="_Ь1апк">Змейка на ВгуТЪоп</ах/И>

По этой ссылке будет вызван ПКЪ-маршрут Ье11о_Ьг1 (листинг 7.39).

Листинг 7.39. 11К1_-маршрут Ье11о_Ьг1

# Игра "Змейка”

раТИ(’Ье11о_Ьг1/’, угемз.Ие11о_Ьг1, пате='Ие11о_Ьг1'),
По этому маршруту вызывается представление Ье11о_Ьг1 (листинг 7.40).

Листинг 7.40. Представление Ье11о_Ьг1

#################

# Игра "Змейка" #

#################

(ДеГ Ъе11о_Ьг1 (гедиезк) :

гекигп гепбег(гедиезк, "тазкег/д1ауа_7/Ие11о_Ьг1.Икт1")

Из этого представления вызывается шаблон Ке11о_Ьг1 .Ыт! (листинг 7.41).

Листинг 7.41. Шаблон Ье11о_Ьг1.11(т1

сЮОСТУРЕ Ькт1>

<Ькт1 1апд="еп">

<Иеас1>

<тека сйагзек="иТЕ-8">

<тека пате="у1емрогк" сопкепк="Ыс1кЬ=с1еу1се-Ыс1кЬ, 1пгЫа1-зса1е=1.0">

<Г1Г1е>ВгуШоп Зпаке</к1к1е>

<зсг!рк куре="кехк/дауазсг1рк" згс="йккрз://сс!п. дзс!е11уг .пек/прт/ЬгукЬоп@3.8.9/Ьгукйоп.т1п. ]з">

</зсг!рк>

<зсг!рк куре="кехк^ауазсг!рк"

згс="йккрз: //сс!п. ^зс1е1^V^ .пек/прт/ЬгукИоп@3.8.9/Ьгукйоп_зкс111Ь. ]з">

</зсг!рк>

<Ипк ге1="зку1езйеек" ИгеЕ="йЕЕрз: //зкаскракЬ.Ьоокзкгарсс1п.со1п/Ьоо1:з1:гар/4.5.0/сзз/

ЬооЕзкгар.тгп.сзз"

1пЕедг1Еу="зка384-9а1Е2пКрС12ик9д39ЬаО1411Е0АрПпС2бЕШОН8Ид215МУУхЕЕс+МсРЫ(1КСз73к"
сгоззог1д1п="апопутоиз">

<зку1е>
Ы {
тагдгп-кор: 8%;
со!ог: гдЬ(83, 238, 36);

}

ИЗ {
со1ог:гдЬ(190, 187, 187);

}

кб {
со1ог:гдЬ(117, 117, 117);

}

а {
со1ог: гдЬ(83, 238, 36);

}

Ьиккоп {
сПзр1ау: Ыоск;
тагд1п-1еЕк: аико;
тагдап-ЫдЫ.: аико;

Ьаскдгоип1-со1ог: кгапзрагепк ! нпрогкапк;

Ьог1ег-со1ог: гдЬ(155, 156, 155) !нпрогкапк;

со1ог: гдЬ(155, 156, 155) !трогкапк;

1опк-з12е: 8рх ! нпрогкапк;
расШпд: Зрх ! шрогкапк;
}

Ьиккоп:йоуег {

Ьог1ег-со1ог: гдЬ(68, 241, 68) !нпрогкапк;
со1ог: гдЬ(194, 196, 194) ИтроЫапк;
}

Ьо1у {
Ьаскдгоип1-со1ог: Ыаск;
}

сапуаз {
тагд!п-кор: 1%;
расШпд-1еЫ: 0;
расШпд-ЫдЫ: 0 ;
тагд!п-1еЫ: аико;
тагдап-гадМ: аико;
Ызр1ау: Ыоск;
ЬоЫег: 1рх;

Ьог1ег-зку1е: зоШ;

Ьог1ег-со1ог: #535353;
}
</зку1е>

</Ъеас1>

<Ьо1у оп1оа1="ЬгуЫоп () ">

<Ы с1азз=”кехк-сепкег”>3мейка, написанная на <а НгеЫ’ЪЫрз://ЬгуЫоп.1п#о”>РуЫоп!</а></Ы>
<сат/аз 1(1="дате-Ьоагс1" Ы1кРт=”400” ке1д1111="400"></сапуаз>
<Ьг>

<ЪЗ 1с1=”зсоге” с1азз="кехЫсепЫг">Зсоге: 0</кЗ>

<Ьг>

<йб 1с1="Ыдй-зсоге" с1азз="11ех11-сеп11ег">Н1д11 Зсоге: 0</И6>

<Ьг>

<сИу с1азз="кехЫсепкег”>

<ЬиЫоп 1(1="1пзкгисЫопз-Ы1п" с1азз="Ыт Ып-1п#о”>Инструкция</Ьик1оп>
</Ыу>

<зсг!рр Руре="РехЫруЫоп">

Ргот Ьгомзег трогк йоситепР, Ыт1, Ыпс1ом
лпрогк гапсЬт
зсоге = 0
Ыдй_зсоге = 0
рх = ру = 10
дз = кс = 20
ах = ау = 15
XV = уу = 0
кгаП = []
каН = 5

рге_раизе = [0,0]
раизеб = Га1зе

бек дате () :

д1оЬа1 рх, ру, кс, дз, ах, ау, кгаН, 1заИ, зсоге

РХ += XV

ру += уу

11 рх < 0:

рх = кс-1

И рх > кс-1:

рх = 0

И ру < 0:

ру = кс-1

И ру > кс-1:

ру = О

скх.Н113ку1е = "Маск"

скх.ВШКеск(0, 0, сапуаз .Мбкй, сапуаз.НеадВД

скх. Н113ку1е = "Ите"

Вог 1 1п гапде (1еп (кгаП)) :

скх.НПВеск (кгаП [1] [О]*дз, кгаПЦ] [1]*дз, дз-2, дз-2)

И кгаНЦ] [0] == рх апб кгаНЩ [1] == ру:

зсоге = зсоге И раизеб е!зе 0

каП = каН И раизеб е1зе 5

кгаН.йпзегк(0, [рх, ру])

мМ1е 1еп(кгаН) > каН:

кгаП.рор ()

И ах == рх апб ау == ру:

каН += 1

ах = 1пк (гапбот. гапбот () *кс)

ау = 1пк(гапбот. гапбот()* кс)

зсоге += 1

ирбаке_зсоге (зсоге)

скх.Н113ку1е = "гесГ

скх.ИНКеск(ах*дз, ау*дз, дз-2, дз-2)

бек ирс!аке_зсоге (пем_зсоге) :

д1оЬа1 МдЬ_зсоге

Мситепк["зсоге"].1ппегНТМЬ = "Счет: " + зкг(пем_зсоге)

И пем_зсоге > Мдк_зсоге:

сЬситепк["МдЬ-зсоге"] .аппегНТМЬ = "Высокий балл: " + зкг(пею_зсоге)
Мдй_зсоге = пем_зсоге
с!еГ кеу_ризк (еу^) :

д1оЬа1 XV, уу, рге_раизе, раизеб
кеу = еур.кеуСойе

П кеу ==37 апб пок раизеск

XV = -1

уV = О

еШ кеу ==38 апб пок раизеск

XV = О

УV = -1

еИк кеу ==39 апб пок раизеск

XV = 1

УV = О

еИк кеу ==40 апб пок раизеск

XV = 0

УV = 1

еШ кеу == 32:

кетр = [XV, у\И

XV = рге_раизе[0]

уV = рге_раизе[1]
рге_раизе = [*кетр]
раизеб = пок раизеб

бек зком_1пзкгиск1опз ^к) :

м1пскж.а!егк("Используйте клавиши со стрелками для изменения направления и нажмите
пробел, чтобы приостановить игру.")

сат/аз = боситепк["дате-ЬоагсГ]

скх = сатлаз.декСопкехк("26")

боситепк. асЖуепкЫзкепег ("кеускжп", кеу_ризк)

дате_1оор = м!пс1ом. зекТпкегуа! (дате, 1000/10)

1пзкгиск1опз_Ькп = боситепк["гпзкгискгопз-Ькп"]

гпзкгискгопЗ-Ькп.абсШк/епкЫзкепег ("сИск", зкюм_1пзкгиск1опз)

</зсг!рк>

</Ьобу>

</Ъкт1>

В этом шаблоне сначала загружаются 1ауа-скрипты и задаются стили элементам ин-
терфейса, а затем вызывается функция ЬгукЬопО, читающая и исполняющая код на
РуЙюп, в котором создано несколько функций для обработки нажатия клавиш со стрел-
ками.

Теперь можно проверить, как работает код РуЙюп в среде ВгуЙюп.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 7 и перейти по ссылке Змейка
на Вгуйюп (рис. 7.46).

При переходе по ссылке Змейка на ВгуОюп будет показан шаблон Ке11о_Ьг1.1п1т1
(рис. 7.47).
Глава 7. Показ примеров

X

Показать РРЕ из представления
Показать РРЕ ,13 шаблона
Показать РРЕ с анимацией
Перевод страниц сайта
Отправка гонты
Новогодний снегопад
Кнопки с анимацией
Привет РуБспрт

Импорт пакета к Функции
Импорт питру и рапоаз
Визуадизация данных

Привет ВгЛИоп

Змейка на БгутЬог ч

Рис. 7.46. Вкладка Показ примеров: вызов примера страницы
со скриптами игры «Змейка» на Ру11топ

Рис. 7.47. Внешний вид страницы с игрой «Змейка»

Как здесь можно видеть, в окне браузера имеется поле, в котором передвигается змейка
(зеленый квадрат). Нажатием на стрелки на клавиатуре компьютера запускается пере-
мещение змейки (рис. 7.48) — стрелки «вверх», «вниз», «вправо» и «влево» меняют
направления перемещения змейки, а клавиша «пробел» — делает паузу в игре. В игре
Змейка, написанная на Ру1Ноп!

Счет: О

Высокий балл: 2

Рис. 7.48. Момент игры «Змейка» в окне браузера

надо менять направление движения змейки таким образом, чтобы она съела мышку
(красный квадрат).

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

В процессе разработки и отладки веб-приложения часто возникают ситуации, когда
нужно откатить миграцию, не нарушив при этом целостность БД. Для отката миграции
необходимо в терминале РуСЬагт выполнить определенные команды. Например, что-
бы откатить последнюю миграцию: 0011_т1дгаг1оп_го_геуегг до предпоследней: оою_
р^1оиз_т1дгаГ1оп — следует выполнить команду:

руГЪоп тападе.ру тадгаГе ту_арр 0010_ргеУ1оиз_т1дгаТ1оп

где ту арр — имя вашего приложения.

Впрочем, даже не обязательно использовать полное имя миграции — достаточно ука-
зать лишь ее номер:

руГЪоп тападе.ру тадгаГе ту_арр 0010

Затем ВЫ можете В приложении удалить файл миграции 0011_т1дгаГ1оп_Го_геуегГ.

Для отката всех миграций нужно выполнить команду:

руГЪоп тападе.ру пйдгаГе <уоиг_арр_пате> гего

после чего удалить все файлы миграций.
7.8.	Краткие итоги

В этой главе приведены советы по решению только небольшого круга задач. При воз-
никновении любой проблемы или вопроса на просторах Интернета вы найдете ответ от
сообщества пользователей В]ап§о, но для этого понадобится время и терпение. А чтобы
уменьшить непроизводительные затраты времени, документируйте и описывайте раз-
рабатываемые вами программные модули. Через какое то время именно в них вы буде-
те быстрее находить ответы на возникшие вопросы.

ГЛАВА 8

Визуализация данных в С;апдо

В этой главе описываются способы вывода в шаблоны В)ап§о данных в виде статичных
и интерактивных 2В-графиков, а также в виде динамичных трехмерных ЗЭ-изображе-
ний линий и поверхностей. Для этих целей мы задействуем библиотеки Р1о11у, МишРу,
рапбаз, 8к1ша§е и ряд других. Построение и вывод графиков с использованием этих
библиотек на «чистом» РуЙюп не вызывает трудностей. Однако вывод с их помощью
данных на НТМЬ-страницы может вызвать затруднения даже у опытных программи-
стов. В документации на упомянутые библиотеки содержатся только фрагменты эле-
ментарных примеров, а на просторах Интернета присутствует достаточно много не
полных и не всегда работающих примеров использования этих библиотек. Кроме того,
создание «живых» интерактивных графиков требует взаимодействия шаблонов О)ап^о
с 1ауа-скриптами, при этом любая элементарная ошибка в скрипте приводит к «обвалу»
целой цепочки программных модулей.

Здесь же приводятся проверенные и реально работающие программные модули, кото-
рые в том или ином виде встроены в шаблоны В)ап§о на сайтах в сети Интернет, а так-
же делается разбор функциональной сущности наиболее значимых фрагментов их про-
граммного кода.

Из материалов этой главы вы узнаете:

♦	как реализовать визуализацию данных в виде статичных 2В-графиков;

♦	как «оживить» 2В-графики и сделать их динамичными (интерактивными);

♦	как реализовать визуализацию данных в виде объемных ЗБ-графиков;

♦	как реализовать анимацию ЗИ-диаграмм;

♦	как вывести наборы данных на географические карты;

♦	как реализовать анимацию объектов, выведенных на географические карты.

8.1.	Визуализация данных с библиотекой р1о!1у.ру:
двумерная графика (20)

Библиотека Р1о11у РуЙюп — это интерактивная библиотека с открытым исходным ко-
дом для построения графиков, которая поддерживает более 40 уникальных типов диа-
грамм, охватывающих широкий спектр статистических, финансовых, географических и
научных вариантов использования. Созданная на основе библиотеки Р1оЙу 1ауа8спр1
(р1ойу.)$), Р1оЙу РуЙюп позволяет пользователям РуЙюп создавать красивые интерак-
тивные веб-визуализации, которые можно сохранять в автономных файлах НТМЕ или
задействовать как часть веб-приложений, созданных на «чистом» РуЙюп, а также с ис-
пользованием фреймворков Вазй или Э)ап§о. Библиотеку Р1оЙу РуЙюп иногда называ-
ют р1ойу.ру — чтобы отличать ее от библиотеки Р1оЙу 1ауа8спр1 (р1ойу.)з).

Совет

Для использования р1ойу.ру не требуется подключения к Интернету, создания учетной за-
писи или оплаты, и до версии 4 эта библиотека могла работать как в онлайн-, так и в оф-
лайн-режиме. Однако, начиная с версии 4, все онлайн-функции были из пакета р1ойу уда-
лены, но стали доступны в другом самостоятельном пакете: СЬай-81ис1|0. Исходя из этого,
нужно очень осторожно относиться к примерам программного кода, циркулирующим в Ин-
тернете, — многие примеры просто не работают или работают некорректно, т. к. в них нет
ссылок на версию библиотеки р1о!1у.ру, а используемая там версия может не соответство-
вать той, которую используете вы.

Для начала работы с библиотекой Р1оЙу необходимо ее установить, поскольку она не
входит в стандартный пакет РуЙюп. Для этого рекомендуется воспользоваться коман-
дой р1р:

р!р ФпзЕаН р!оВ1у

Для работы с графикой (загрузки и обработки сырых данных) нам также понадобятся
библиотеки рапйаз, МишРу, 8кппа§е и ряд других. Все эти библиотеки необходимо им-
портировать в модуль приложения у!е\л/.ру. Далее приведен перечень инструкций, кото-
рые использовались в книге для импорта необходимых пакетов:

#	Импорт пакетов для построения графиков

ггорогГ р1оГ1у.дгарЪ_оЬдеск5 аз до

Егот р1оГ1у. зиЬр1оГз лпрогГ таке_зиЬр1о113

мпрогк питру аз пр

Егот йесЕта! ЕтрогЕ Веста!

ЕтрогЕ рапйаз аз рс!

ЕтрогЕ таГк

Совет

В целях исключения дублирования одних и тех же фрагментов программного кода в лис-
тингах программных модулей этой книги отсутствуют инструкции по импорту указанных
библиотек и пакетов. Учтите это при копировании листингов программ для использования
в своих проектах и не забывайте о включении в них строк для импорта необходимых биб-
лиотек.

Кроме того, следует определить переменные с путями к базовым каталогам проекта:

#	Для загрузки правильных путей в мЕпс!омз и ЕЕпих

Егот раЕШЕЬ ЕтрогЕ РаЕЬ

#	Каталоги проекта

Ьазе_сИг = зеЕЕЕпдз.ВАЗЕ_В1Р

тесИа_сИг = зеЕЕЕпдз.МЕВ1А_РООТ

Объекты Ьазе сЛг и тесЦа сИг и пакет РаЕЬ используются в модулях, где необходимо чте-
ние текстовых файлов или файлов с изображениями из каталогов приложения 81айс и
тесЛа. Дело в том, что в разных операционных системах для указания путей к файлам
применяются разные типы слешей (косой черты): в А^тбодуз — «\», а в Ыпих — «/»).
Из-за этого программисты, которые разработали веб-приложение на А^тбодуз, могут
потерять и не загрузить нужные файлы после развертывания своих приложений на пуб-
личных серверах, которые, как правило, работают под 1лппх. Чтобы избежать таких
ошибок, надо для указания путей к файлам задействовать пакет Рагь, который автома-
тически определяет тип операционной системы и корректно формирует пути к нужно-
му файлу. Кроме того, в представлениях (ухедуз) следует избегать вызовов файлов из
каталога 81айс, т. к. этот каталог на локальном сервере и на публичном сервере досту-
пен по разным путям. Для размещения подгружаемых файлов лучше использовать ка-
талог тесЛа, т. к. пути к этому каталогу на локальном и публичном серверах идентичны.
В р1о!1у.ру для формирования и вывода фигур (графиков, диаграмм, карт, рисунков
и т. п.) используется библиотека р1о!1у.)з языка 1ауа$спр{, но 1ауа8спр1 вам знать и пи-
сать на нем код вовсе не придется. Фигуры представляются данными в формате 18ОМ
(1ауа8спр1 ОЬ)ес1 Но1айоп), который по структуре мало чем отличается от словаря (сПсг)
в РуЙюп. Доступ к элементам графика возможен через вызов класса р1оПу.дгарЬ_
о^есГз.Пдиге. Чтобы посмотреть структуру созданного вами графика в формате .18ОМ
следует применять инструкцию ртЦНд), а инструкция Пд.зЬоН) выведет саму фигуру
в формате Н1МЕ в окно браузера.

Пояснение

Инструкция Нд.зИомО применяется в тех случаях, когда вы работаете с приложением на
чистом Ру1Гюп (например, в настольном приложении). В Щапдо используется иной подход
для вывода графиков: сначала объект Нд преобразуется в другой объект формата НТМ1_,
который затем передается в шаблон Цапдо для отображения в окне браузера.

Поскольку фигура (график) представляется в формате 18(Ж, то доступ к атрибутам
осуществляется за счет полного прописывания пути к нужному параметру. Например,
запись 1ауоиг.м1сО обращается к ширине (щсо) макета (1ауоит), в котором размещен
график. Если же значением какого-либо атрибута является список (изг), а не словарь,
то используются квадратные скобки — например: Тауоиг.ашюиНопз [] лехг.

Для изменения значений атрибутов можно либо просто передать им новое значение,
либо задействовать методы обновления. Вот так в РуЙюп выглядят оба способа для
изменения шрифта:

Пд. 1ауоиГ. Г1Г1е. ^опГ. ГатНу="Ореп Запз "

Г1д.ирс1аГе_1ауоиГ(Г1Г1е_ГопГ_1гат11у=''Ореп Запз")

В Р1оЙу есть три корневых атрибута: йага (данные), 1ауоиг (макет) и Ггатез (кадр, рамка).

♦	Корневой атрибут аага (данные).

Первый корневой атрибут — аага — представляет собой список словарей. Эти сло-
вари называются трейсоми (1гасез — следы, трассы) и обладают следующими
характеристиками:

•	каждый атрибут Ггасе имеет ОДИН ИЗ 40 ТИПОВ (Гуре) фигур: зсаГГег — точки и ли-
нии, Ьаг — столбчатая диаграмма, р1е - круговая диаграмма и т. и.;

•	каждый трейс отображается в собственном графическом окне (зиЫог);

•	каждый трейс может иметь одну легенду, за исключением круговой диаграммы
(рте) И воронкообразного графика (Гиппе! сЬагГ);
•	некоторые типы фигур поддерживают спектр цветов, которые ассоциируются
с цветной полосой (цвета таких фигур могут изменяться напрямую либо через
атрибут соХогахХз В ХауоиХ).

♦ Корневой атрибут Хауоит (макет).

Второй корневой атрибут — Хауоит — представляет собой словарь. Этот атрибут
обеспечивает настройку параметров, не связанных с данными фигуры. К таким
параметрам относятся:

•	размеры и координаты фигуры;

•	макетные параметры фигуры: шаблоны, шрифты, цвета, метки при наведении;

•	заголовок и легенда;

•	графические окна для расположения в них самих графиков (тгасез).

Для каждого типа тгасез нужно задавать свои атрибуты:

•	хах1з, уах1з, хах1з2, уах1з2 и т. д. — для диаграмм в декартовой системе координат;

•	зсепе, зсепе2, зсепеЗ И Т. Д. 00 ДЛЯ ЗЭ-ГрафиК0В;

•	Гегпагу, Гегпагу2, ГегпагуЗ, ро1аг, ро1аг2, ро1агЗ, део, део2, деоЗ, тарЬох, тарЬох2, таЬохЗ
и т. д. — для тернарных, полярных и географических окон соответственно.

Можно указать не относящиеся к данным метки, которые могут быть расположены
в «макетных» координатах или в двумерной декартовой системе координат (о тех
и других см. далее):

•	аннотации;

•	формы (линии, прямоугольники и т. д.);

•	рисунки.

Можно также указать элементы управления, которые могут быть расположены в ма-
кетных координатах и способны запускать функции р1о11у.)8 при взаимодействии
с пользователем:

•	меню обновлений (ирсйгетепиз): кнопки, выпадающие списки, переключатели
ит. д.;

•	слайдеры (зИТегз).

♦ Корневой атрибут Хгатез (рамка, кадр).

Третьим корневым атрибутом является Хгатез — значения для фреймов представле-
ны списком словарей. Эти словари соответствуют кадрам в анимированном графике.
Каждый кадр содержит свой собственный атрибут данных, а также другие парамет-
ры. Анимация обычно запускается и управляется с помощью элементов управления,
определенных В параметрах ХауоиГ.зХХйегз И (или) ХауоиГ.ирааГетепиз.

Позиционирование макетных координат

Различные компоненты Р1о11у поддерживают атрибуты х и у, которые определяют положе-
ние компонента. К таким атрибутам могут относиться, например, ХауоиХ.хахХз.ботаХп,
ХауоиХ. Хедепс!. х или ХауоиГ.аппоГаГХоп[] .х.

Позиционирование элементов макета в макетных координатах не соответствует экранному
позиционированию в пикселах. Макетные координаты — это доли, которые приходятся на
компоненты. Например, если два графика занимают половину пространства, тогда каждому
приходится по 1/2 доли. Макетные координаты определяются двумя характеристиками:

•	начальными координатами: (0,0) в 1ауоиТ.тагд1п.1, 1ауоиТ.тагд1п.Ь;

•	шириной и высотой: (1,1) в 1ауоиТ.м1сО-1ауоиТ.тагд1п.г, 1ауоиТ.Ъе1дЪТ-1ауоиТ.тагд1п.Т.

Здесь символы 1, г, т и ь обозначают сокращения от английских слов: 1еТС (левый), пдЫ
(правый), 1ор (верхний) и ЬоНот (нижний). Значения макетных координат могут быть мень-
ше 0 и больше 1 —тогда они относятся к областям в пределах границ фигуры.

Декартова система координат

В Р1о11у наиболее часто используются графические окна типа зиЬр1оТз — двумерные графи-
ки в декартовой системе координат. Фигуры таких окон поддерживают атрибуты хах!з и
уах1з, значения которых должны относиться к соответствующим частям фигуры. Например,
хах1з=х и уах1з=у (значения по умолчанию) отображает график (Тгасе) в координатной сетке,
которая определена в 1ауоиТ.хах1з и 1ауоиТ.уах1з. А вот график с параметрами хах!з=х2
и уах1з=у2 соответствует координатной сетке со значениями координат 1ауоиТ.хах1з2 и
1ауоиТ.уах1з2. Атрибуты 1ауоиТ.хах1з и 1ауоиТ.хах1з2 могут быть не прописаны явно — это
значит, что они имеют значения по умолчанию.

Оси координат Хи У имеют свой тип (Руре), который может быть представлен:

•	непрерывными значениями (руре=Ипеаг, руре=1од);

•	временными значениями (руре=с!аРе), что соответствует датам;

•	категориальными значениями (руре=саРедог, Руре=гш1Р1саРедогу).

В следующих разделах будут показаны примеры программного кода, изучая которые
вы сможете более детально познакомиться с параметрами фигур (графиков).

Знакомство с библиотекой р1о!1у.ру мы начнем с рассмотрения возможностей форми-
рования статичной двумерной графики (20). Для создания и отображения статичных
графиков на НТМЬ-страницах нужно последовательно выполнить следующие дей-
ствия:

1.	Получить массив данных по осям (х, у) для построения графика (данные могут быть
загружены из Интернета, сформированы при обращении к специализированным
функциям пользователя или заданы в виде числовых констант.

2.	Сформировать фигуру (координатную сетку): Пд.

3.	Добавить к координатной сетке полученные данные: Пд.абб_Ргасе.

4.	Добавить к координатной сетке описание элементов графика: Р1д.ирс1аРе_1ауоиР (на-
звание графика, подписи осей, метки линий, размер и т. п.).

5.	Трансформировать график в формат НТМЬ: Пд.и_ьгт1.

6.	Загрузить график формата НТМЬ в объект сопрехр.

7.	Передать объект сопрехр в шаблон Э)ап§о.

Далее мы рассмотрим несколько примеров визуализации данных формата 20 в шабло-
нах Э)ап§о.

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

В качестве примера сформируем простейший 2В-график линии, построенной по точ-
кам, для чего нам понадобится создать несколько модулей, работающих в единой связке.
Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, акти-
вирующую нужный маршрут для формирования графика (листинг 8.1).

Листинг 8.1. Ссылка активации маршрута для построения графика линии

а Ьгеб="{% иг1 'тазбег:збаб_дгаб_2О'%}" багдеб =”_Ыапк”>1. Статичный график 20</а>

По этой ссылке будет активирован ИКП-маршрут збаб_дгаб_2о (листинг 8.2).

Листинг 8.2. 11КЬ-маршрут 81а1_дгаТ_20

# Показать статичный график 2Б

рабЬ (’ збаб_дгаб_2О/' , чбемз. збаб_дгаб_20, паше=' збаб_дгаб_2О'),

По этому маршруту вызывается представление збаб_дгаб_2о (листинг 8.3).

Листинг 8.3. Представление (у1еу\л) з^а^дга^го

######################################
# График рТобТу.ру в 20 (одна линия) #
######################################
беб збаб_дгаб_20(гедиезб):

#	Исходные данные для графика
х_баба = [0, 1, 2, 3]

у_баба = [х ** 2 Тог х бп х_баба]

#	Данные для фигуры (графика)

баба_Т1д = до.Зсаббег (х=х_с!аба, у=у_с!а'Са)

#	Создаем Тауоиб (описание) графика

Тауоиб = до.Ьауоиб(хахТз=сНсб(б!б1е="0сь X"),
уах1з=П1сб(б!б1е="0сь У"),
ббб1е=' График (20) с рТобТу.ру (одна линия)',
мбс1бЬ=8 00,
Ье1дЬб=600,

Топб=сНсб (ТатПу="МеТгуо", з1хе=14), # Параметры шрифта
Ьочегтобе='х ипТГхеб',

Ьочег1аЬе1=сНсб(Топб_зТге=16),
)

#	Формирование фигуры (графика)

Пд = до.Ндиге (с!аба=с1аба_ТТд, 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ьбт!

р1оО_сНч = Пд.Со_Ь0т1 (Ги11_Ылп1=Еа1зе)

#	Создание объекта сопбехб
сопбехб = {'р!об_сНч': р!об_сНч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2О.Ьбт1", сопбехб)
В этом представлении созданы:

♦	два списка с данными для графика: х_бака — данные для оси х и у_бака — данные для
оси у;

♦	объект бака_ккд, и в него переданы списки с данными, которые будут располагаться
по осям графика х и у;

♦	элементы с описанием параметров графика (кауоик) — подписи для осей х и у, заго-
ловок графика, ширина и высота графика в пикселах;

♦	объект Пд (фигура, или собственно график) и в него переданы отображаемые дан-
ные (бака_ккд) и параметры элементов графика (кауоик).

После этого с использованием метода ПдЛо_Ылп1 выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте ркок_Ыу.

На заключительном этапе объект р1ог_сПу через словарь сопкехк передан в шаблон
81а1_дгаГ_2с1.1'Дт1 (листинг 8.4).

Листинг 8.4. Шаблон з1а1_дга1:_2с1.Ыт1

{# зкак_дгак_2Э #}

{% ехкепбз *’зкор/Ьазе.ЬШ1" %}

{% Ыоск сопкепк %}

<61V сказз="гом"> <!— Это начало строки —>

<!— Это колонка —>

<сНу с1азз="со1-12 со1-зт-12 со!-тс1-12 со!-1д-12 со!-х!-12 со1-хх1-6”>

{% аикоезсаре окк %}

{{ р!ок_сПу }}

{% епбаикоезсаре %}

</сПу>

</сПу>

{% епбЫоск сопкепк %}

Это достаточно простой шаблон — он содержит тег Р]ап§о {{ р1ок_аы }}, в котором и
будет отображен график, сформированный в представлении. По сути, 81а1_дгаГ_2с1.И1т1
представляет собой универсальный шаблон, в котором можно отображать графики раз-
личной конфигурации.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы  и перейти по ссылке 1. Ста-
тичный график 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.Е

О ЦВЕТНЫХ ИЛЛЮСТРАЦИЯХ ГЛАВ 8 И 9

Поскольку цветные иллюстрации в черно-белом издании утрачивают свою информатив-
ность, все иллюстрации глав 8 и 9, содержащие важную для их понимания цветную состав-
ляющую, вынесены в РОЕ-файл, скачать который можно с сервера издательства «БХВ» по
ссылке Ьйр8://н1р.ЬЬу.ги/9785977520560.21р, а также со страницы книги на сайте Ьйрз://
ЬЬу.ги.
График (20) с рЬНу.ру (одна линия)

Рис. 8.1. Визуализация графика линии, построенной по точкам

Как здесь можно видеть, на графике отображена одна линия, график имеет подписан-
ные оси хи у, сверху присутствует название графика.

Поскольку на графике показана всего одна линия, то легенда, касающаяся этой линии,
не приводится (даже если указать ее имя в параметрах графика), и чтобы показать
легенду для одной линии графика, надо для параметра 1ауоит задать свойство
зЬом1едепс!=Тгие.

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

Если требуется на одной сетке показать несколько линий, то для каждой линии нужно
сформировать свой набор данных и для каждой группы данных создать свой набор
объектов кгасе.

В качестве примера сформируем простейший 2В-график, на котором будут показаны
две линии, построенные по точкам.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, акти-
вирующую нужный маршрут для формирования графика (листинг 8.5).

Листинг 8.5. Ссылка активации маршрута для построения графика двух линий

<а Ьге^="{% иг1 'тазбег:зкак_дга^_2П2’%}” кагдек =”_Ыапк”>2. Две линии на графике 20</а>

По ЭТОЙ ссылке будет активирован ИКЬ-маршруТ зкак_дгаГ_202 (листинг 8.6).

Листинг 8.6. 1Ж1_-маршрут 81а1_дгаТ_202

# Показать статичный график 2Б

ракЬ (' зкак_дга^_2П2/', чгемз. з1:а1:_дгаГ_2В2, паше=' зкак_дга^_2П2'),
По этому маршруту вызывается представление збаб_дгаб_202 (листинг 8.7).

Листинг 8.7. Представление (у|еллл) 81а1_дгаТ_2О2

#####################################
# График рТобТу.ру в 20 (две линии) #
#####################################
(ТеГ збаб_дгаб_202 (гедиезб) :

#	Исходные данные для графика 1
х1 = [0, 1, 2, 3]
у1 = [х ** 2 бог х 1п х1]

#	Исходные данные для графика 2
х2 = [0, 1, 2, 3]

у2 = [х ** 3 Тог х 1п х1]

#	Формирование пустой фигуры (графика)
Пд = до. Идите ()

#	Добавляем к фигуре (графику) данные х1, у1

Т1д.абб_бгасе(до.Зсаббег(х=х1, у=у1, паше='График У=Х**2'))

#	Добавляем к фигуре (графику) данные х2, у 2

ббд. абс1_бгасе(до.Зсаббег(х=х2, у=у2, паше='График У=Х**3’))

#	Обновляем у фигуры (графика) Тауоиб (описание)
Т1д.ирбабе_1ауоиб(хах1з=сПсб(б1б!е="0сь X"),
уах!з=сПсб(б1б!е="0сь У”),
б1б!е=' График (20) с рТобТу.ру (две линии)',
™1сГЬЬ.=8 00,
Ье1дЬб=600,

Топб=сИсб (ТатПу="Ме1гуо", з1хе=14), # Параметры шрифта макета
Ьочегтобе='х ипЮбеб',
Ьочег1аЬе1=сПсб(Топб_з1ге=16), # Размер шрифта для данных
)

#	Трансформация фигуры в Ьбш!

р!об_сПч = Т1д.бо_Ьбт1 (Ти11_Нбт1=Га1зе, 1пс1ис1е_р1об1у]3='ссДГ )

#	Создание объекта сопбехб

сопбехб = {'р1об_сПч': р!об_сИу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2О.Ьбт1", сопбехб)

В этом представлении созданы:

♦	две группы списков с данными для графика 1 (х1, у1) и для графика 2 (х2, у2);

♦	пустая сетка для будущего графика (тбд).

На следующем шаге с использованием методов Пд.абб_бгасе в сетку графика загружены
две группы списков сформированных данных: х1, у1 и х2, у2. Для каждой линий создана
легенда (пате). Затем с помощью метода Г1д.ирбабе_1ауоиб к сетке добавлены параметры
графика (подписи для осей, заголовок графика, ширина и высота графика в пикселах).
Далее с использованием метода Пд.то_ьтт1 выполнено преобразование графика в фор-
мат НТМЕ и результаты преобразования сохранены в объекте р1от_сПу.

На заключительном этапе объект р1от_сПу через словарь соптехт передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке 2. Две
линии на графике 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.2.

График (20) с р!о11у.ру (две линии)

Рис. 8.2. Визуализация графика двух линий, построенных по точкам

Как здесь можно видеть, на графике в одной координатной сетке отображены две
линии, график имеет подписанные оси х и у, сверху присутствует название графика.

Поскольку на графике имеются две линии, то рядом с сеткой приводится легенда, ка-
сающаяся каждой линии. При наличии нескольких линий легенда, характеризующая
сущность каждой линии, отображается всегда, даже если ее не задать в параметрах
графика. Если пользователь не задал имена легендам, то по умолчанию им будут при-
своены имена: Тгасе1, Тгасе2, ТгасеЗ И Т. Д.
8.1.3. Отображение двух графиков в одном окне макета

Если требуется в одном окне создать две самостоятельные сетки и в каждой сетке пока-
зать разные графики, ТО надо использовать функцию таке_зиЬр1окз библиотеки р1о!1у.ру
и сформировать для каждой сетки свой набор данных.

В качестве примера сформируем два графика: на первом — отобразим линию, на вто-
ром — столбчатую гистограмму.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, акти-
вирующую нужный маршрут для формирования окна с двумя графиками (листинг 8.8).

Листинг 8.8. Ссылка активации маршрута для вывода двух графиков в одном окне

<а ЬгеГ="{% иг1 'тазкег:зкак_2дгак'%}" кагдек ="_Ь1апк">3. Два графика в одном окне</а>

По ЭТОЙ ссылке будет активирован ИКЬ-маршруТ зкак_2дгаГ (листинг 8.9).

Листинг 8.9. 1Ж1_-маршрут з(а(_2дгаГ

#	Показать два графика 20 в одном окне

ракЬ(’зкак_2дгак/’, угемз.зкак_2дгак, паше='зкак_2дгак'),

По этому маршруту вызывается представление зкак_2дгаг (листинг 8.10).

Листинг 8.10. Представление (у|еш) 81а 12 д га 1

############################

#	Два графика в одном окне #

############################

беГ зкак_2дгаГ(гедиезк):

#	Исходные данные для графика 1

х1 = []

Гог 1 1п гапде(0, 31):

х1.аррепс!(1)

у1 = [х ** 2 Гог х 1п х1]

#	Исходные данные для графика 2

х2 = ['Пон.', 'Вт.', ’Ср.', 'Чет.', 'Пят.', 'Суб.', 'Вос.']
у2 = [1, 2, 4, 8, 4, 2, 1]

#	Формирование пустой фигуры (графика)

Ид = таке_зиЬр1окз(гомз=1, со1з=2, зиЬр1ок_к1к1ез=("График линии", "Гистограмма"))

#	Добавляем к фигуре (графику) данные х1, у1

Пд.ас1с1_кгасе (до.Всаккег (х=х1, у=у1, паше=' График У=Х**2 '), гом=1, со1=1)

#	Добавляем к фигуре (графику) данные х2, у 2

Пд.ас1с1_кгасе (до.Ваг (х=х2, у=у2, паше='Гистограмма'), гом=1, со1=2)

#	Обновляем у фигуры (графика) 1ауоик (описание)

Пд.ирс1аке_1ауоик(к1к1е='Два графика (2В) с р1ок1у.ру в одном окне',

Ис1кЬ=1000,

Ье1дЬк=600,
Гопб=б1сб(Гат11у="Ме1гуо", з1хе=14), # Параметры шрифта макета

Ьочегтобе=' х ипТыеб1,
Ьочег1аЬе1=сПсб (Гопб_з1хе=16), # Размер шрифта для данных
)

#	Формирование меток осей для двух графиков

ббд [ Тауоиб’][’хахбз’][’б1б!е ’ ] = 'Ось х-1'

ббд[ Тауоиб'][’хах1з2']['б1б1е' ] = 'Ось х-2'

РФд[ Тауоиб' ][ ’уахФз' ][ 'б1б1е' ] = 'Ось у-1'

РФд[ Тауоиб' ][ 'уах!з2 ' ][ 'б1б1е' ] = 'Ось у—2'

#	Трансформация фигуры в Ьбт1

р1об_сПч = Г1д.бо_Ьбт1 (Ги11_Ибт1=Еа1зе, 1пс1ис1е_р1об1у]5='сс!п')

#	Создание объекта сопбехб
сопбехб = {'р1об_сИч': р1об_сНу}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении созданы:

♦	две группы списков с данными для графика линии (х1, у1) и данными для столбчатой
гистограммы (х2, у2);

♦	ОКНО ДЛЯ будущих графиков (Тд) С использованием функции таке_зиЬр1обз.

В этой функции, по сути, сформирована таблица, состоящая и одной строки (го^з=1)
и двух колонок (со1з=2). Для каждой колонки задано название графика: зиЬр1об_б1б1ез=
("График линии", "Гистограмма").

На следующем шаге с помощью методов Пд.абб бгасе в сетки графиков загружены две
группы списков сформированных данных (х1, у1 и х2, у2):

♦	в первом методе Пд.абб бгасе указано, что первый график будет представлять собой
линию, построенную по точкам, задана для линии легенда и определено, в какой
строке и в каком столбце мнимой таблицы будет расположен этот график:

Пд.абб_бгасе(до.Зсаббег(х=х1, у=у1, паше='График У=Х**2'), гом=1, со!=1)

♦	во втором методе Пд.абб бгасе указано, что второй график будет представлять собой
гистограмму, задана легенда и определено, в какой строке и в каком столбце мни-
мой таблицы будет расположен этот график:

бйд.абб-бгасе(до.Ваг(х=х2, у=у2, паше='Гистограмма'), гом=1, со!=2)

После этого с использованием метода Пд.ирбабе_1ауоиб к окну двух графиков добавлены
параметры окна (заголовок для окна, ширина и высота окна в пикселах).

На следующем шаге выполняется формирование меток осей для двух графиков:

ббд['Гауоиб']['хахбз']['б1б!е'] = 'Ось х-1'

Г1д[Тауоиб']['хах1з2']['б1б1е'] = 'Ось х-2'

ббд[ Тауоиб']['уахбз']['б1б1е' ] = 'Ось у-1'

Г1д[Тауоиб']['уах1з2']['б1б1е'] = 'Ось у—2'

После этого с помощью метода Тд.бо Ьбт! выполнено преобразование графика в формат
НТМЕ и результаты преобразования сохранены в объекте р1об_сИу.
На заключительном этапе объект р1ок_сПу через словарь сопрехр передается в шаблон
§1а1:_дгаТ_2с1.Мт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке 3. Два
графика в одном окне.

Если запустить на выполнение код этого примера, то в окне браузера сформированная

на его основе страница будет выглядеть так, как показано на рис. 8.3.

Два графика (20) с р1оГ1у.ру в одном окне

Г рафик линии

Гистограмма

Ось к-1

Ось х-2

----График У=Х**2

Рис. 8.3. Визуализация двух графиков в одном окне

Как здесь можно видеть, в одном окне показаны две координатные сетки и два разных
графика. Каждый график имеет подписанные оси х и у, сверху присутствуют названия
графиков. Вверху окна представлена надпись, относящаяся к обоим графикам.

Поскольку в окне содержатся два графика, то в правом углу окна приведена легенда,
касающаяся каждого графика.

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

Если требуется в одном окне создать произвольную группу самостоятельных сеток и
в каждой сетке показать разные графики, то для этого также надо использовать функ-
цию таке_зиЬр1оГз библиотеки р1о!1у.ру и сформировать для каждой сетки свой набор
данных и свой набор параметров.

В качестве примера отобразим четыре графика в одном окне.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, акти-
вирующую нужный маршрут для формирования окна с группой из четырех графиков
(листинг 8.11).
Листинг 8.11. Ссылка активации маршрута для вывода четырех графиков в одном окне

<а ЬгеВ="{% иг1 'тазбег:збаб_4дгаВ'%}" 1загде1з ="_Ыапк">4. Четьре графика в одном окне</а>

По этой ссылке будет активирован ИКЬ-маршрут зиб_4дгаг (листинг 8.12).

Листинг 8.12. 1Ж1_-маршрут з(а(_4дгаГ

#	Показать 4 графика 20 в одном окне

раОЬ (’ зба0_4дгаб/ ’, уфемз. зба0_4дгаб, паше=' зба0_4дгаб'),

По этому маршруту вызывается представление зоао_4дгаб (листинг 8.13).

Листинг 8.13. Представление (у|еу\л) 8(а(_4дгаГ

#	#########################

#	4 графика в одном окне #
##########################
беб зба0_4дгаб(гедиезб):

#	Создание окна для графиков (бгд) функцией зиЬрТобз

Пд = таке_зиЬр!обз (
гомз=2, со!з=2,
зиЬр1об_б1б1ез= ("График 1", "График 2", "График 3”, "График 4")
)

#	Исходные данные для 4-х графиков

ббд.ас1с1_бгасе (до.Зсаббег (х= [1, 2, 3], у=[4, 5, 6],

пате="1ф)афик 1"), гом=1, со!=1)

ббд.ас1с1_бгасе (до.Зсаббег (х=[20, 30, 40], у=[50, 60, 70],
пате="1ф)афик 2"), гом=1, со!=2)

01д.ас1с1_бгасе (до.Зсаббег (х= [300, 400, 500], у=[600, 700, 800],
пате="1ф)афик 3"), гом=2, со1=1)

бйд. аск1_бгасе(до.Зсаббег(х= [4000, 5000, 6000], у=[7000, 8000, 9000],
пате="1ф)афик 4"), гом=2, со1=2)

#	Обновить параметры для осей х (хахгз)

0бд.ирс1абе_хахез (б!б1е_бехб="Ось х-1", гом=1, со1=1)

ббд.ирс1абе_хахез (б!б1е_бехб="Ось х-2", гапде=[10, 50], гом=1, со1=2)
б1д.ирбабе_хахез(б!б1е_бехб="Ось х-3", зЬомдг1б=Га1зе, гом=2, со1=1)
01д.ирс1абе_хахез (б!б1е_бехб="Ось х-4", буре="1од", гом=2, со1=2)

#	Обновить параметры для осей у (уахгз)

Нд.ирбабе_уахез(Г1б1е_бехб="Ось у-1", гом=1, со1=1)

Нд.ирбабе_уахез(б1Г1е_бехб="Ось у-2", гапде=[40, 80], гом=1, со1=2)

Нд.ирбабе_уахез(Г1б1е_бехб="Ось у-3", зНомдг1б=Га1зе, гом=2, со1=1)

Нд.ирбабе_уахез(Г1б1е_бехб="Ось у-4", гом=2, со1=2)

#	Обновить название (Г1Г1е) окна с графиками и задать высоту (ЬеФдВД
Нд.ирбабе_1ауоиб(Г1б1е_бехб="Вывод 4-х графиков в одном окне",

Ье1дЬб=700,
Гопб=б1сб(Гат11у="Ме1гуо", з1хе=14), # Параметры шрифта макета

Ьочегтобе=' х ипбббеб',

Ьочег1аЬе1=сПсб (бопб_з1хе=16), # Размер шрифта для данных
)

#	Трансформация фигуры в Ьбш!

р1об_сИч = Пд. бо_Ьбт! (Ги11_Пбт1=Еа1зе, 1пс1ис1е_р1об1у] з=' сбп')

#	Создание объекта сопбехб

сопбехб = {'р1об_б1у': р!об_сНу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ауа_8/збаб_дгаб_2П.Ьбт1", сопбехб)

В этом представлении на первом шаге с использованием функции таке зиЬрТобз создано
окно (пд) для отображения группы графиков:

Пд = таке_зиЬр!обз (
гомз=2, со!з=2,
зиЬр1об_б1б!ез=("График 1", "График 2", "График 3", "График 4"))

Здесь указано, что в окне будет находиться мнимая таблица, состоящая из двух строк
и двух колонок (всего четыре ячейки). В каждой ячейке должен располагаться свой
график. Здесь же заданы наименования для каждого графика.

Далее с использованием метода Пд.абб бгасе в окно (пд) добавлены четыре графика
и для каждого графика указаны следующие параметры:

♦	списки с данными для осей х и у;

♦	легенда (физический смысл отображаемых данных);

♦	номер ячейки мнимой таблицы (строки — гош и столбца — со1), в которой будет ото-
бражен график.

На следующем шаге С использованием методов Пд.ирбабе_хахез И Пд.ирбабе_уахез задают-
ся названия осей х иу для всех четырех графиков, при этом указывается, в какую ячей-
ку мнимой таблицы нужно поместить каждое название:

#	Обновить параметры для осей х (хахбз)

Пд.ирбабе_хахез(б1б!е_бехб="Ось х-1", гом=1, со1=1)

Пд.ирбабе_хахез(б1б1е_бехб="Ось х-2", гапде=[10, 50], гом=1, со1=2)

Пд.ирбабе_хахез(б1б1е_бехб="Ось х-3", зЬомдг1б=Еа1зе, гом=2, со1=1)

Пд.ирбабе_хахез(б1б!е_бехб="Ось х-3", буре="1од", гом=2, со!=2)

# Обновить параметры для осей у (уахгз)

Пд.ирбабе_уахез(б1б!е_бехб="Ось у-1", гом=1, со1=1)

Пд.ирбабе_уахез(б1б1е_бехб="Ось у-2", гапде=[40, 80], гом=1, со!=2)

Пд.ирбабе_уахез(б1б1е_бехб="Ось у-3", зЬомдг1б=Еа1зе, гом=2, со!=1)

Пд.ирбабе_уахез(б1б!е_бехб="Ось у-4", гом=2, со!=2)

После этого с использованием метода Пд.ирбабе_1ауоиб к окну четырех графиков добав-
лены параметры окна — заголовок для окна и высота окна в пикселах.

Затем с использованием метода Пд.бо Ьбт! выполнено преобразование графиков в фор-
мат НТМЕ, а результаты преобразования сохранены в объекте р1об_бйч.
На заключительном этапе объект р1ог_сПу через словарь сопгехг передается в шаблон
81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
4. Четыре графика в одном окне.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.4.

Вывод 4-х графиков в одном окне

* График 1

•	График 2

•	График 3

♦ График 4

Рис. 8.4. Визуализация четырех графиков в одном окне

Как здесь можно видеть, в одном окне показаны четыре координатные сетки и четыре
разных графика. Каждый график имеет подписанные оси х и у, сверху присутствуют
названия графиков. Вверху окна представлена надпись, относящаяся ко всем графикам.

Поскольку в окне содержатся четыре графика, то в правом углу окна приведена леген-
да, касающаяся каждого графика.

Таким образом, С использованием функции таке_зиЬр1оГ8 можно в едином окне создать
мнимую таблицу с произвольным количеством ячеек, в которых отобразить совершен-
но разные графики.

8.1.5.	Создание 20-диаграммы рассеяния

Если требуется на одной сетке показать рассеяние множества точек, то для каждой
группы точек нужно сформировать свой набор данных и свой набор объектов ггасе.

В качестве примера сформируем 2В-диаграмму рассеяния, на которой будут показаны
две группы точек.
Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, акти-
вирующую нужный маршрут для формирования диаграммы (листинг 8.14).

Листинг 8.14. Ссылка активации маршрута для построения диаграммы рассеяния

<а Ьгеб="{% иг1 'тазбег:збаб_5дгаб'%}" ТзагдеТз ="_Ь1апк">5. Диаграмма рассеяния 2Б</а>

По этой ссылке будет активирован ИКП-маршрут збаб_5дгаб (листинг 8.15).

Листинг 8.15. 11КЬ-маршрут 81а1_5дга1

#	Показать 2В-диаграмму рассеяния

рабЬ (' збаб_5дгаб/', чбемз. збаб_5дгаб, паше=' збаб_5дгаб'),

По этому маршруту вызывается представление збаб_5дгаб (листинг 8.16).

Листинг 8.16. Представление (у|еш) 81а 15 д га 1

#	#########################

#	20 -диаграмма рассеяния #

#	#########################

Не# збаб_5дгаб(гедиезб):

#	Исходные данные для графика 1

х1 = пр.гапбот.гапсНпб(1, 50, 100)

у1 = пр.гапбот.гапсНпб(1, 50, 100)

#	Исходные данные для графика 2

х2 = пр.гапбот.гапсНпб(20, 70, 100)

у 2 = пр.гапбот.гапсНпб(20, 70, 100)

#	Формирование пустой фигуры (графика)

Ид = до.Идиге()

#	Добавляем к фигуре (графику) данные х1, у1

Ид. абс1_бгасе (до.Зсаббег (х=х1, у=у1,
тобе='тагкегз',
пате='Точки х1, у1'))

#	Добавляем к фигуре (графику) данные х2, у 2

Ид. абс1_бгасе (до. Зсаббег (х=х2, у=у2,
тобе='тагкегз ’,
пате='Точки х2, у 2'))

#	Обновляем у фигуры (графика) 1ауоиб (описание)

Ид.ирбабе_1ауоиб (хах1з=сНсб (б1б1е="Ось X"),
уах1з=с11сб(б1б1е="Ось У"),
б1б1е=’20-диаграмма рассеяния',
Ис1бЬ=800,
Ье1дЬб=600,

Ьочег1аЬе1=сНсб(бопб з1хе=16), # Размер шрифта для данных
#	Трансформация фигуры в Ьбт!

р1об_сИч = Гйд.бо_Ьбт1 (би11_Нбш1=Га1зе, 1пс1ис1е_р1об1у]8=' сбп’)

#	Создание объекта сопбехб

сопбехб = {'р1об_б1у': р!об_сИу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении с использованием функции пр.гапбот.гапбйпб библиотеки Шт Ру
созданы две группы списков с данными о точках рассеяния (х1, у1) и (х2, у2). Затем соз-
дана пустая сетка для будущей диаграммы (гбд). На следующем шаге с помощью мето-
да Пд.абб_бгасе в сетку диаграммы загружены две группы сформированных данных
(х1, у1) и (х2, у2) и для каждой группы точек создана легенда (пате). Далее с использова-
нием метода ббд.ирбабе_1ауоиб к сетке добавлены параметры диаграммы (подписи для
осей х и у, заголовок, ширина и высота в пикселах). После этого с помощью метода
ттд.бо Ьбт! выполнено преобразование диаграммы в формат НТМЬ и результаты преоб-
разования сохранены в объекте р1об_бйч.

На заключительном этапе объект р1об_ббч через словарь сопбехб передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

►	Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке 5. Диа-
грамма рассеяния 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.5.

20-диаграмма рассеяния
Как здесь можно видеть, на диаграмме в одной координатной сетке отображены две
группы точек, сетка имеет подписанные оси х и у, сверху присутствует название диа-
граммы.

Поскольку на диаграмме имеются две группы точек, то рядом с сеткой показана леген-
да, касающаяся каждой группы точек. При наличии нескольких групп точек легенда,
характеризующая сущность каждой группы, отображается всегда, даже если ее не
задать в параметрах диаграммы. Если пользователь не задал имена легендам, то по
умолчанию легендам будут присвоены имена: кгасе1, кгасе2, кгасеЗ и т. д.

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

Круговая диаграмма

Круговая диаграмма — это окружность, разделенная на секторы, символизирующие долю
или процент содержания неких элементов в общем объекте. Каждый сектор несет наиме-
нование и числовое значение. Круговые диаграммы имеют большую наглядность, если
каждый сектор выделен своим цветом.

В этом примере мы построим простейшую круговую диаграмму, для чего нам потребу-
ется создать несколько модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для построения диаграммы (листинг 8.17).

Листинг 8.17. Ссылка активации маршрута для построения диаграммы

<а ЬгеЕ="{% иг1 'тазкег:кгид_20'%}" кагдек =”_Ыапк”>6. Круговая диаграмма 20</а>

По этой ссылке будет активирован ИКЕ-маршрут кгид_2о (листинг 8.18).

Листинг 8-1 -к 11НЬ-маршрут кгид_2О

#	20 круговая диаграмма

ракЬ(’кгид_2 0/’, уфемз.кгид_2В, паше='кгид_2О'),

По этому маршруту вызывается представление кгид_2о (листинг 8.19).

Листинг 8.19. Представление (у|еллл) кгид_20

#########################

#	20 круговая диаграмма #

#	########################

бек кгид_20(гедиезк):

#	Данные к диаграмме

Огигк = рс!. ОакаГгате ({

"пате”: ["Яблоки", "Груши", "Абрикосы", "Сливы", "Персики"],
"питЬег": [1000, 1200, 800, 600, 500]})

#	Суммарный объем продаж

з = Ггш.к [’ питЬег']. зит ()

#	Доля каждого типа фруктов в общем объеме продаж

Егигк['питЬег’] = (ГгиФк[’питЬег'] / з) * 100

Егигк['питЬег'] = гоипсЦЕгиЕк['питЬег'], 2)
#	Создание фигуры (диаграммы)

Ыд = до.ЕбдигеО

#	Заполнение фигуры данными

Ыд. абб_бгасе (до. Р1е (уа1иез=РгиП: [' питЬег' ] ,

1аЬе1з=бги1б[’паше'],
))

#	Добавить описание графика (легенда горизонтально)

Ыд. ирбабе_1ауоиб (1едепб_ог1епбаЫоп="Н",

ЫЫе='Данные о продаже фруктов',
ЫббЬ=7 0 0, Ье1дЬб=7 00,)

#	Добавить описание графика (легенда вертикально)

Ыд.ирбабе_1ауоиб (ЫЫе='Данные о продаже фруктов',

ЫббЬ=700, Ье1дЬб=700,
)

#	Трансформация фигуры в Ьбт1

р1об_сНу = Ыд.бо_Ьбт1 (Ги11_Ьбт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_ббч': р1об_б1ч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении с использованием библиотеки рапдаз создается набор данных
(бабабгате), состоящий из пяти элементов (объект Тгибб). В объекте бгибб содержится ин-
формация об объемах продаж фруктов в супермаркете за определенный период. В на-
боре данных бабабгате массив пате представляет собой наименования фруктов, а массив
питЬег---КОЛИЧеСТВО проданных фруКТОВ.

На следующем шаге делается расчет суммарного объема продаж (объект з) и определя-
ется ДОЛЯ каждого вида фруктов В ЭТОМ объеме (бгибб [' питЬег' ]). Эта доля округляется до
двух знаков после запятой.

Затем с помощью метода до.Пдиге создается фигура Ыд (диаграмма) и выполняется
заполнение диаграммы данными (ыд.абб_ыасе). Для заполнения данными круговой диа-
граммы используется метод до.Рбе, в который передаются следующие параметры:

♦	ча1иез=бги!б [' питЬег' ] — числовые значения для каждого сектора;

♦	1аЬе1з=бги1б [' пате' ] — наименования каждого сектора.

Далее создаются элементы с описанием параметров макета (1ауоиб): заголовок (ыые),
ширина макета (ыбьь) и высота макета (ьебдьь). По умолчанию легенда диаграммы будет
расположена с правой стороны от макета.

Совет

Если нужно расположить легенду под макетом, то надо дополнительно задать еще один
параметр: 1едепб_оЫепбаЫоп="Ь" — см. закомментированные строки (между тройными
кавычками).
После этого с использованием метода Пд.го_ььп1 выполнено преобразование диаграммы
в формат НТМЕ и результаты преобразования сохранены в объекте р1ог_сПу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке 6. Кру-
говая диаграмма 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.6.

Данные о продаже фруктов

В Груши
 Яблоки

I Абрикосы

 Сливы

В Персики

Рис. 8.6. Визуализация круговой диаграммы

Как здесь можно видеть, на графике отображены данные в виде круговой диаграммы
с секторами разных цветов. Если навести курсор мыши на любой из секторов, то рядом
с ним появится дополнительный поясняющий текст. Такие подсказки окажутся очень
полезными в тех случаях, когда диаграмма состоит из большого количества секторов.

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

Если требуется на одной сетке показать столбчатую гистограмму, то в качестве пара-
метра х необходимо задать подписи для столбцов, а в качестве параметра у — значение
для каждого столбца. Если параметр х не задавать, то по умолчанию столбцы будут
пронумерованы: 1, 2, 3, ... и т. д.
В качестве примера сформируем простейший 2В-график, на котором будут показаны
7 столбцов столбчатой гистограммы.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика с гистограммой (лис-
тинг 8.20).

Листинг 8.20. Ссылка активации маршрута для построения гистограммы

<а Ьгеб="{% иг1 'шазбег:збаб_д!зб' %}" Тзагде1з ="_Ыапк">7. Столбчатая гистограмма 20</а>

По этой ссылке будет активирован ИКЬ-маршрут збаб_дбзб (листинг 8.21).

Листинг 8.21. ЫНЬ-маршрут 81а1_д181

# Показать столбчатую гистограмму 20

рабЬ('збаб_д!зб/', чгемз.8баб_дгзб, паше='збаб_д!зб'),

По этому маршруту вызывается представление збаб_дбзб (листинг 8.22).

Листинг 8.22. Представление (у1еш) 81а1_д181:

#######################
# График гистограмма #
#######################
беб збаб_д!зб(гедиезб) :

#	Исходные данные для графика 1

х= ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье']
у = [1, 2, 4, 8, 4, 2, 1]

#	Формирование пустой фигуры (графика)
ббд = до. Идите ()

#	Добавляем к фигуре (графику) данные х, у

Нд. абб_бтасе (до.Ваг (х=х, у=у))

#	Обновляем у фигуры (графика) Тауоиб (описание)
Т1д.ирбабе_1ауоиб(хах1з=б1сб(б1б1е="0сь X"),
уах!з=б1сб(б!б1е="0сь У"),
ббб1е='График (20) с рТобТу.ру (гистограмма)',
ИббЬ=800,
Ье1дЬб=600,
Топб=б1сб (ВатИу="Ме1гуо", зТге=Т4), # Параметры шрифта макета
Ьочегшобе=' х ипИТеб',
ЬочетТаЬеТ=б1сб(Топб_зТге=Т6), # Размер шрифта для данных
)

#	Трансформация фигуры в ЬбтТ

рТоб_ббч = Ид. бо_ЬбшТ (ТиТТ_НбтТ=ГаТзе, ТпсТибе_рТобТу] з=' сбп')

#	Создание объекта сопбехб

сопбехб = {'рТоб_бгу': рТоб_бТч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбет/дТача_8/збаб_дгаТ_20.ЬбтТ", сопбехб)
В этом представлении созданы:

♦	список с подписями для столбцов гистограммы (х) и значения для каждого столб-
ца (у);

♦	пустая сетка для будущего графика (пд).

На следующем шаге с использованием метода Пд.ас1с1_ггасе в сетку графика загружены
исходные данные (х, у). Затем с помощью метода Нд.ирс1аГе_1ауоъл к сетке добавлены
параметры графика (подписи для осей, заголовок графика, ширина и высота графика
в пикселах).

После этого с использованием метода ПдЛо_ьгт1 выполнено преобразование гисто-
граммы в формат НТМЕ и результаты преобразования сохранены в объекте р1ог_сЦу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
7. Столбчатая гистограмма 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.7.

График (20) с р!оЕ1у.ру (гистограмма)
Как здесь можно видеть, на графике в координатной сетке отображена гистограмма,
которая имеет подписанные оси х и у, маркеры с наименованиями столбцов, сверху
присутствует название графика.

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

ГИСТОГРАММА

Гистограмма — это визуальное представление распределения набора количественных
данных. Для построения гистограммы первым шагом является разделение всего диапазона
значений на ряд интервалов с последующим подсчетом количества значений, попадающих
в каждый интервал. Гистограммы дают грубое представление о плотности базового рас-
пределения данных, однако данные гистограмм можно аппроксимировать плавными кри-
выми.

В этом примере мы сгенерируем набор экспериментальных данных и на их основе по-
строим гистограмму и аппроксимирующую ее кривую нормального распределения. Для
генерации данных можно использовать библиотеку 8с1Ру — в частности, ее модуль
зкакз. Необходимые для расчета ее модули подключаются с использованием следующей
инструкции:

Ггот зсГру.зкакз гтрогр погт

Для построения гистограммы нам потребуется создать несколько модулей, работающих
в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для построения гистограммы (листинг 8.23).

Листинг 8.23. Ссылка активации маршрута для построения гистограммы

<а ЬгеГ="{% иг1 ’тазбег :д_погт_2В' %}" кагдек ="_Ыапк”>8. Гистограмма нормального распределения 2Р</а>

По этой ссылке будет активирован ИКЬ-маршрут д_погт_2Р (листинг 8.24).

Листинг 8.24. ЫНЬ-маршрут д_погт_2О

#	20 Гистограмма нормального распределения
ракЬ(’д_погт_20/’, чгемз.д_погш_20, пате='д_погт_20'),

По этому маршруту вызывается представление д_погт_20 (листинг 8.25).

Листинг 8.25. Представление (у|едлл) д_погт_2О

#########################################

#	Гистограмма нормального распределения #

#	########################################

йеГ д_погт_20(гедиезк):

#	Ггот зсГру.зкакз гтрогк погт

#	Генератор случайных данных нормального распределения

ти, зГдта = 0, 0.1 # среднее значение и стандартное отклонение

г = пр.гапсГот.погта! (ти, згдта, 1000)

х_погт = пр.Ипзрасе (-0.3, 0.3, 100)

у	! = 1 / (згдта * пр.здгк(2 * пр.рй)) * пр.ехр(- (х_погт - ти) ** 2 / (2 * згдта ** 2))
#	Создание фигуры (графика)

Ид = до. Идите ()

#	Добавление трассы со случайными данными (гистограмма)

Нд.абб_бгасе (до.Н1збодгаш(х=г,

Ызбпогт='ргоЬаЫИбу бепзгбу1,
пате=’Экспериментальные данные1))

#	Добавление трассы с теоретическими данными (плотность вероятности)

Ид.асМ_бгасе(до.Зсаббег(х=х_погш,

У=УЪ

пате='Теоретическая кривая1))

#	Создание описания макета фигуры

Ид.ирс!абе_1ауоиб(

б1б1е=”В1Стограмма нормального распределения и сглаживающая кривая”,

1едепб=сНсб(х=.5, хапсИог="сепбег", ог1епбаб1оп="Ь"),

ЩсН±=700, Ье1дЬ6=500,

тагд1п=сИсб(1=10, г=10, 6=30, Ь=10))

#	Трансформация фигуры в Ьбт1

р1об_сПу = Ид.бо_Ьбт1 (6и11_Ы1т1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сНу': р1об_сНу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ауа_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении с использованием библиотеки ИишРу формируются набор слу-
чайных данных нормального распределения (объект г) и набор данных для построения
теоретической кривой нормального распределения (объекты х погт и у1).

Внимание!

В листинге 8.25 ссылка на библиотеку 8с|Ру, которую также можно использовать в качестве
генератора чисел нормального распределения, закомментирована, поскольку обращаться
с ней следует с осторожностью. Библиотека 8с1Ру прекрасно работает на локальном сер-
вере разработчика, но может отказаться работать после развертывания приложения на
публичном сервере АрасЬе. Автор столкнулся с этой проблемой, как и многие другие раз-
работчики. Наличие строки бгот зебру.збабз бтрогб погт просто «обваливает» все прило-
жение без диагностических сообщений, и даже администраторы серверной площадки
порой не могут найти причину такого сбоя. Похожие проблемы могут возникнуть при ис-
пользовании библиотеки 8к1пладе.

Далее с помощью метода до.Идиге создается объект Ид (фигура, диаграмма), который
с использованием метода Нд.а(И_бгасе заполняется случайными (экспериментальными)
и теоретическими данными.

На следующем шаге создаются элементы с описанием параметров макета (1ауоиб):

♦	б1б1е — заголовок гистораммы;

♦	1едепа — легенда;

♦	ИсО — ширина;
♦	Ье1дЬГ — высота;

♦	тагдГп — ОТСТупы ОТ края.

После этого с использованием метода Г1дла_шй выполняется преобразование гисто-
граммы в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сПу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке 8. Гис-
тограмма нормального распределения 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.8.

Гистограмма нормального распределения и сглаживающая кривая

 Экспериментальные данные ------ Георетнчесйзя кривая

Рис. 8.8. Визуализация гистограммы нормального распределения и сглаживающей кривой

Как здесь можно видеть, на графике отображены данные в виде гистограммы со сгла-
живающей кривой. Если навести курсор мыши на любой из элементов гистограммы
или на кривую, то рядом с ним появится дополнительный поясняющий текст.

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

Тепловые карты

Тепловые карты — это различные дополнения к визуализации числовых данных. Как пра-
вило, тепловая карта представляет собой цветную шкалу со спектром цветов, где каждый
оттенок цвета соответствует определенному числовому значению. Тепловая карта может
быть показана в виде полупрозрачного слоя на некой поверхности (например, на географи-
ческой карте), где различной глубиной палитры цветов выделяется числовая информация
(например, плотность населения)

Основная цель тепловых карт — повысить наглядность визуализации общего количества
мест или событий, включенных в набор данных, а также направить внимание пользовате-
лей на наиболее важные аспекты отображаемых данных. В последние годы в области ана-
литики данных наблюдается рост использования тепловых карт — во многом это происхо-
дит благодаря гибкости и эффективности, с которыми они выявляют повторяющиеся тен-
денции.

В качестве примера сформируем простейший 2В-график синусоиды, построенной
по точкам различных цветовых оттенков, для чего нам потребуется создать несколько
модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.26).

Листинг 8.26. Ссылка активации маршрута для построения графика линии

<а Иге1="{% иг1 'тазбег :1пбег_дга16_2О'%}’’ багдеб =”_Ыапк">9. График с тепловой картой 20</а>

По этой ссылке будет активирован ИКЬ-маршрут 1пбег_дгабб_2о (листинг 8.27).

Листинг 8.27. 1Ж1_-маршрут т(ег_дга1:6_2О

#	20-шкала тепловой карты

рабИ(’1пбег_дгаО6_2О/', чгемз.1пбег_дга06_20, паше='1пбег_дгаб6_2О'),

По этому маршруту вызывается представление 1поег_дгабб_2о (листинг 8.28).

Листинг 8.23. Представление (у1е>лл) т1ег_дгаге_2О

#############

#	Функции #

##############

скеГ зФп(х) :

гебигп пр.зйп(х)

############################

#	20-шкала тепловой карты #
############################

с!еГ 1пбег_дгабб_20(гедиезб) :
# Начальные данные

х = пр.агапде(0, 9.5, 0.1)

#	Создать фигуру (график)

Пд = до. Идите ()

#	Добавить трассу (данные)

Ид. абс1_бгасе (до. Зсаббет (х=х, у=з!п (х),
тос!е='тагкегз ’,
пате='График у=згп(х)
тагкег=б!сб (со1ог=з!п (х),

со1огЬаг=сИсб (б!б1е="у=з1п (х) "),

со1огзса1е='Тпбегпо',

312е=25)

))

#	Добавить описание графика (макета)

Ид. ирбабе_1ауоиб (1едепб_ог1епбаб1оп="1Г,

б!б1е=’Синусоида с маркерами и тепловой картой',
хах!з=б1сб(б!б1е=”Ось х”), # Подпись к оси х
уах!з=б1сб(б!б1е=”Ось у”), # Подпись к оси у
1едепб=сПсб(х=0.8, хапскюг="сепбег"), # положение легенды
# на шкале х
зЬом1едепб=Тгие, # Обязательное отображение легенды
тагд1п=сПсб(1=0, г=0, 1=50, Ь=0) # Отступы
)

#	Добавить отображение значения точек графика при наведении курсора мыши
Ид.ирбабе_бгасез(Ьочег1пбо="а11”, Ьочегбетр1абе="х=%{х},<Ьг>у=%{у}")

#	Трансформация фигуры в Ьбт1

р1об_сПч = Ид.бо_Ьбт1 (Ти11_Ылп1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сПч': р1об_б!ч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

Это представление для генерирования данных синусоиды и формирования палитры
цветов тепловой карты задействует дополнительную функцию зйп(х).

Сначала с использованием библиотеки МиптРу в нем генерируется массив данных х для
построения синусоиды:

х = пр.агапде(0, 9.5, 0.1)

Затем создается объект Ид (пустой макет), к которому добавлены данные (бгасе). При
формировании этих данных и нашла применение дополнительная функция з1п() — на
ее основе получены данные для оси у (у=зйп(х)) и сформирована палитра цветов для
тепловой карты (со1ог=зйп(х)). Все параметры, связанные с тепловой картой, загружены
в свойство тагкег, которое имеет тип «словарь».

На следующих шагах созданы элементы с описанием параметров графика (1ауоиб): заго-
ловок (б1б1е), подписи для осей х и у, указано положение легенды и обязательность ее
вывода (зЬом1едепб=Тгие), а данные графика добавлены К ОСНОВНОЙ фигуре (Нд.ирбабе_
бгасез).

После этого с использованием метода Ид.бо Ьбт! выполняется преобразование графика
в формат НТМЕ и результаты преобразования сохраняются в объекте р1об_сПч.

На заключительном этапе объект р1об_сПч через словарь сопбехб передается в шаблон
81а1_дга(_2с1.111т1 (см. листинг 8.4).
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
9. График с тепловой картой 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.9.

Синусоида с маркерами и тепловой картой

о

'рафик у=51п(х)

у=5:П(х)

Рис. 8.9. Визуализация синусоиды в виде маркеров с тепловой картой

Как здесь можно видеть, на графике отображена цветная синусоида с маркировкой зна-
чений в виде различных цветов. Максимальные значения имеют более светлые и яркие
оттенки, минимальные значения — более темные тона. Рядом с графиком показана
шкала тепловой карты с палитрой цветов, относящихся к различным значениям сину-
соиды.

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

Пузырьковые диаграммы

Пузырьковые диаграммы — это такой тип 20-диаграмм, в которых отображаются данные
в трех измерениях. Каждый элемент связанных данных представляется в виде маркера
(или диска), выражающего два значения через положение маркера на осях х и у, а
третье — через размер маркера. Пузырьковые диаграммы могут облегчить понимание
социальных, экономических, медицинских и других научных взаимосвязей. В целом они
являются разновидностью диаграмм рассеяния, в которых точки данных заменяются мар-
керами разных размеров или разного цвета (их еще называют пузырьками).

В качестве примера сформируем простейшую пузырьковую диаграмму с одноцветны-
ми маркерами разных размеров, для чего нам потребуется создать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования диаграммы (листинг 8.29).
Листинг 8.29. Ссылка активации маршрута для формирования диаграммы

<11><а ЬгеЕ="{% иг1 'тазбег:ЬиЬЫе_1'%}" 1загде1з ="_Ыапк’’>10. Пузырьковая диаграмма 2П</а></И>

По этой ссылке будет активирован ИКЬ-маршрут ЬиЬЫе_1 (листинг 8.30).

Листинг 8.30. ЫНЬ-маршрут ЬиЬЫе_1

# 2П-анимация на базе Егатез и слайдера

рабЬ(’Егатез2_2П/’, чбемз. Егатез 2_2 В, пате='Егатез2_2П'),

По этому маршруту вызывается представление ЬиЬЫе_1 (листинг 8.31).

Листинг 8.31. Представление (у|еш) ЬиЬЫе_1

#################################
# Простая пузьрьковая диаграмма #
#################################
беЕ ЬиЬЫе_1(гедиезб):

Ебд = до.Ебдиге(баба=[до.Зсаббег(

х= [ 1, 2, 3, 4],

у=[Ю, 11, 12, 13],

тобе=’тагкегз’,
тагкег={”з12е”: [40, 60, 80, 100]})
])

Е1д.ирбабе_1ауоиб(б1б1е="Пузырьковая диаграмма",
хах1з_б1б1е="0сь X",
уах1з_б1б1е="0сь У",)

# Трансформация фигуры в Ьбт1

р1об_бгу = Е1д.бо_Ьбт1(Еи11_Нбт1=Еа1зе)
# Создание объекта сопбехб
сопбехб = {'р1об_б1ч': р1об_б!ч}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаЕ_2В.Ьбт1", сопбехб)

В этом представлении с использованием метода до.Пдиге создается фигура Ид (график).
Этому методу мы передаем следующие параметры:

♦	баба — данные для осей хи у;

♦	тобе=’тагкегз ’ — режим отображения данных в виде маркеров (пузырьков);

♦	тагкег — словарь, в котором определены размеры маркеров (зйге) в виде списка.

На следующем шаге создаются элементы с описанием параметров диаграммы (тауоиб):
заголовок (б1б1е), подписи для осей х и у.

После этого с использованием метода Ид.бо Ьбт! выполняется преобразование диа-
граммы в формат НТМЬ и результаты преобразования сохраняются в объекте р1об_б1ч.

На заключительном этапе объект р1об_б1ч через словарь сопбехб передается в шаблон
81а1_дга1:_2с1.К1т1 (см. листинг 8.4).
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
10. Пузырьковая диаграмма 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.10.

Пузырьковая диаграмма

Рис. 8.10. Визуализация простой пузырьковой диаграммы

Как здесь можно видеть, на диаграмме отображены данные в виде маркеров различных

размеров. Размер маркера определяет значение данных для третьего измерения.

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

В пузырьковых диаграммах для выделения значений тех или иных данных можно ис-
пользовать не только размер маркеров, но и их цвет.

В качестве примера сформируем простейшую пузырьковую диаграмму с разноцветны-
ми маркерами разных размеров, для чего нам потребуется создать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования диаграммы (листинг 8.32).

Листинг 8.32. Ссылка активации маршрута для формирования диаграммы

<а Ьге^="{% иг1 'тазкег:ЬиЬЬ1е_2'%}" 1загде1з ="_Ь1апк">11. Пузырьковая диаграмма с цветньвди
маркерами 2П</а>

По этой ссылке будет активирован ИКЕ-маршрут ЬиЬЬ1е_2 (листинг 8.33).

Листинг 8.33. ЫНЬ-маршрут ЬиЬЫе_2

# Пузьрьковая диаграмма с цветными маркерами
ракЬ (’ ЬиЬЫе_2 /', угемз. ЬиЫэ1е_2, пате=1 ЬиЫэ1е_21),
По этому маршруту вызывается представление ЬиЬЫе_2 (листинг 8.34).

Листинг 8.34. Представление (у|еуу) ЬиЬЫе_2

#####################################################
# Простая пузьрьковая диаграмма с цветными маркерами #
######################################################
(ТеГ ЬиЬЫе_2 (гедиезб) :

Ид = до.Идиге (баба= [до.Зсаббег (
х=[1, 2, 3, 4], у=[10, 11, 12, 13],
тобе='тагкегз ’,
тагкег=б!сб (
со1ог=[’гдЬ(93, 164, 214)’, 'гдЬ(255, 144, 14)',
’гдЬ(44, 160, 101)', ’гдЬ(255, 65, 54)'],
орасббу=[1, 0.8, 0.6, 0.4],
812е=[40, 60, 80, 100],
)
)])

Ид.ирбабе_1ауоиб(б1б1е="Пузырьковая диаграмма с цветными маркерами”,
хах1з_б1б1е="0сь X",
уах1з_б1б1е=''0сь У",)

# Трансформация фигуры в Ьбт1
р1об_б!ч = Ид.бо_Ьбт1 (Ги11_Ьбт1=Еа1зе)
# Создание объекта сопбехб
сопбехб = {’р1об_сНу': р1об_б!ч}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ’’тазбег/д1ача_8/збаб_дгаб_2В.ЬбтГ', сопбехб)

В этом представлении с использованием метода до.Ндиге создается фигура Ид (график).
Этому методу мы передаем следующие параметры:

♦	баба — данные для осей х и у;

♦	тобе='тагкегз' — режим отображения данных в виде маркеров (пузырьков);

♦	тагкег — словарь, в котором определены размеры маркеров (зйге) в виде списка.

В этом примере для маркеров (пузырьков) заданы следующие параметры:

♦	со1ог — список цветов;

♦	орасббу — список степени прозрачности;

♦	загс — список размеров.

На следующем шаге создаются элементы с описанием параметров диаграммы (1ауоиб):
заголовок (б1б1е), подписи для осей х и у.

После этого с использованием метода Ид.бо_Ьбт1 выполняется преобразование диа-
граммы в формат НТМЕ и результаты преобразования сохраняются в объекте р1об_б1ч.

На заключительном этапе объект р1об_б1ч через словарь сопбехб передается в шаблон
81а1_дга1:_2сШт1 (см. листинг 8.4).
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке

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

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.11.

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

14

13

3 12
о

11

1	1.5	2	2.5	3	3.5	4	4.5

_______________________________ОСо X________________________

Рис. 8.11. Визуализация пузырьковой диаграммы с разноцветными маркерами разных размеров

Как здесь можно видеть, на диаграмме отображены данные в виде маркеров различных
размеров и разных цветов. Размер и цвет маркера определяют значение данных для
третьего измерения.

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

В пузырьковых диаграммах данные, определяющие размер маркера, могут иметь дос-
таточно большую величину (тысячи единиц, миллионы и т. п.). Если для маркеров ука-
зывать такие абсолютные размеры, то они просто не поместятся в макете графика, а
вернее, заполнят всё его пространство. Поэтому для данных с большими значениями
маркеры нужно масштабировать — т. е. уменьшать их размерность на заданную вели-
чину.

В качестве примера сформируем простейшую пузырьковую диаграмму с масштабируе-
мыми размерами маркеров, для чего нам потребуется создать несколько модулей, рабо-
тающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования диаграммы (листинг 8.35).

Листинг 8.35. Ссылка активации маршрута для формирования диаграммы

<а Ьге^="{% иг1 'тазГег:ЬиЫэ1е_3'%}" ^агде^Ь ="_Ыапк">12. Пузырьковая диаграмма с масштабируемьвди
маркерами 2П</а>

По этой ссылке будет активирован ИВЕ-маршрут ЬиЬЫе З (листинг 8.36).
Листинг 8.36. 11К1_-маршрут ЬиЬЫеЗ

# Пузьфьковая диаграмма с масштабируемыми маркерами
рабЬ (' ЬиЬЫе_3/ ’, чФемз. ЬиЬЫе_3, паше=' ЬиЬЫе_3')г

По этому маршруту вызывается представление ЬиЬЫе_з (листинг 8.37).

Листинг 8.37. Представление (у>еллл) ЬиЬЫеЗ

######################################################
# Пузьфьковая диаграмма с масштабируемыми маркерами #
######################################################
беб ЬиЬЫе_3(гедиезб):

312е = [2000, 4000, 6000, 8000, 10000, 8000, 6000, 4000, 2000, 4000]

Ид = до.Ебдиге (баба= [до.Зсаббег (
х=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
у=[11, 12, 10, 11, 12, 11, 12, 13, 12, 11],
тобе=’тагкегз',
тагкег=б!сб (

З12е=з12е,

З12етос1е='агеа',

312егеб=2. * тах(з1ге) / (40. ** 2),
312ет1п=4

)
)])

Ид.ирбабе_1ауоиб(б1б1е="Пузырьковая диаграмма с масштабируемьвли маркерами”,
хах1з_б1б1е="0сь X",
уах1з_б1б1е="0сь У",)

# Трансформация фигуры в Ьбт1

р1об_б!ч = Ид.бо_Ьбт1 (би11_Нбт1=Га1зе)
# Создание объекта сопбехб
сопбехб = {'р1об_б1ч': р1об_б1ч]
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении создан список с размерами маркеров (збге), имеющими величину
в несколько тысяч. Затем с использованием метода до.Ейдиге создается фигура Пд (гра-
фик). Этому методу мы передаем следующие параметры:

♦	х — координаты точек для оси х;

♦	у — координаты точек для оси у;

♦	тобе=’тагкегз ’ — режим отображения данных в виде маркеров (пузырьков);

♦	тагкег — словарь, в котором определены параметры маркеров.

Здесь для маркеров (пузырьков) заданы следующие параметры:

♦	зФге — список абсолютных размеров маркеров;

♦	з12етобе=’ агеа' — режим отображения маркеров;
♦	зтгегеГ — формула, по которой масштабируются абсолютные значения маркеров;

♦	з12ет1п — минимальный абсолютный размер маркера.

В этом примере абсолютные значения маркеров масштабируются по следующей фор-
муле:

812егеГ=2. * тах(з12е) / (40. ** 2)

Примечание

Обратите внимание, что установка ’зГгегеГ’ на значение больше 1 уменьшает размеры
отображаемых маркеров, а установка ’зГгегеГ’ на значение меньше 1 увеличивает разме-
ры отображаемых маркеров.

На следующем шаге создаются элементы с описанием параметров диаграммы (1ауоиг):
заголовок (г1г1е), подписи для осей х и у.

После этого с использованием метода Пд.то_ьгт1 выполняется преобразование диа-
граммы в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сИу.

На заключительном этапе объект р1от_сПу через словарь сопгехг передается в шаблон
§1а1:_дгаТ_2с1.Мт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
12. Пузырьковая диаграмма с масштабируемыми маркерами 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.12.

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

Рис. 8.12. Визуализация пузырьковой диаграммы с масштабируемыми маркерами

Как здесь можно видеть, на диаграмме отображены данные в виде маркеров различных
размеров. Несмотря на то что исходные размеры маркеров были в пределах от 2000
до 10 000, они успешно масштабировались и поместились в пределах макета диаграммы.
8.1.13. Пузырьковая диаграмма с поясняющим текстом на маркерах

В пузырьковых диаграммах в рамках макета могут быть разбросаны десятки маркеров
различных размеров и цветов. Для того чтобы конечный пользователь мог определить,
какое значение имеет тот или иной маркер, на них нужно поместить поясняющий текст.

В качестве примера сформируем простейшую пузырьковую диаграмму с текстовыми
метками на маркерах, для чего нам потребуется создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования диаграммы (листинг 8.38).

Листинг 8.38. Ссылка активации маршрута для формирования диаграммы

<а Ьгеб=''{% иг1 'тазбег:ЬиЬЬ1е_4'%}" 1загде1з ="_Ыапк">13. Пузьрьковая диаграмма с текстовыми
метками 2Р</а>

По этой ссылке будет активирован ИКЪ-маршрут ЬиЬЬ1е_4 (листинг 8.39).

Листинг 8.39. 11К1_-маршрут ЬиЬЫе_4

# Пузьфьковая диаграмма с текстовыми метками
рабЬ (’ ЬиЬЬ1е_4/' , угемз. ЬиЬЫе_4, пате=1 ЬиЬЫе_41),

По этому маршруту вызывается представление ЬиЬЬ1е_4 (листинг 8.40).

Листинг 8.40. Представление (у|еуу) ЬиЬЫе_4

##############################################
# Пузьфьковая диаграмма с текстовыми метками #
##############################################
беб ЬиЬЬ1е_4 (гедиезб) :

Пд = до.Пдиге (баба= [до.Зсаббег (
х=[1, 2, 3, 4], у=[10, 11, 12, 13],
бехб=['Метка<Ьг>Размер: 40', 'Метка<Ьг>Размер: 60',
’Метка<Ьг>Размер: 80', 'Метка<Ьг>Размер: 100'],
тобе=’тагкегз',
тагкег=сИсб (
со1ог=['гдЬ(93, 164, 214)', 'гдЬ(255, 144, 14)',
’гдЬ(44, 160, 101)', ’гдЬ(255, 65, 54)'],
з1ге=[40, 60, 80, 100],
)
)])

Г1д.ирс1абе_1ауоиб(б1б1е="Пузырьковая диаграмма с текстовьвли метками",
хах1з_б1б1е="0сь X",
уах1з_б1б1е="0сь У",)

#	Трансформация фигуры в Ьбт1

р1об_сПу = Г1д.бо_Ьбт1(би11_Ибт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сИу': р1об_сИу}
#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении с использованием метода до.Пдиге создается фигура ббд (график).
Этому методу мы передаем следующие параметры:

♦	х — координаты точек для оси х;

♦	у — координаты точек для оси у;

♦	бехб — список текстовых меток для каждого маркера;

♦	тобе='тагкегз ’ — режим отображения данных в виде маркеров (пузырьков);

♦	тагкег — словарь, в котором определены параметры маркеров.

Здесь для маркеров (пузырьков) заданы следующие параметры:

♦	со1ог — список цветов маркеров;

♦	загс — список размеров маркеров.

На следующем шаге создаются элементы с описанием параметров диаграммы (1ауоиб):
заголовок (б1б1е), подписи для осей х и у.

После этого с использованием метода Пд.бо_Ьбт1 выполняется преобразование диа-
граммы в формат НТМЕ и результаты преобразования сохраняются в объекте р1об_бйч.

На заключительном этапе объект р1об_сПч через словарь сопбехб передается в шаблон
81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
13. Пузырьковая диаграмма с текстовыми метками 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.13.

Пузырьковая диаграмма с текстовыми метками

4

Рис. 8.13. Визуализация пузырьковой диаграммы с текстовыми метками на маркерах
Как здесь можно видеть, на диаграмме отображены данные в виде маркеров различных
размеров и цветов. Если навести курсор на цветной маркер, то рядом с ним появится
поясняющий текст со следующей информацией:

♦	координаты х и у размещения метки в макете диаграммы;

♦	текст с расшифровкой данных, относящихся к этой метке.

Такие подсказки окажутся очень полезными в тех случаях, когда на график вынесено
большое количество меток.

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

Если в пузырьковой диаграмме много типов данных или количество данных меняется
динамично, то вручную задать цвета маркерам окажется проблематично. В этом случае
можно воспользоваться тепловой картой, благодаря которой каждому типу данных
будет присвоен свой цветовой оттенок.

В качестве примера сформируем простейшую пузырьковую диаграмму с тепловой кар-
той, для чего нам потребуется создать несколько модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования диаграммы (листинг 8.41).

Листинг 8.41. Ссылка активации маршрута для формирования диаграммы

<	а Ьге1="{% иг1 'тазкег:ЬиЬЬ1е_5'%}" 1загде-Ь ="_Ыапк">14. Пузырьковая диаграмма с тепловой картой
20</а>

По этой ссылке будет активирован ИКЕ-маршрут ЬиЬЬ1е_5 (листинг 8.42).

Листинг 8.42. 11К1_-маршрут ЬиЬЫе_5

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

ракЬ (' ЬиЬЫе_5/', угемз. ЬыЬЫе_5, паше=' ЬыЬЫе_5'),

По этому маршруту вызывается представление ЬиЬЬ1е_5 (листинг 8.43).

Листинг 8.43. Представление (у1еллл) ЬиЬЫе_5

###########################################

#	Пузьрьковая диаграмма с тепловой картой #
###########################################
Нек ЬиЬЫе_5 (гедиезк) :

Пд = до.Пдиге (Нака= [до.Зсаккег (
х=[1, 3.2, 5.4, 7.6, 9.8, 12.5],
у=[1, 3.2, 5.4, 7.6, 9.8, 12.5],
тос!е='тагкегз',
тагкег=сИск (

СО1ОГ=[1, 2, 3, 4, 5, 6],
312е=[15, 30, 55, 70, 90, 110],
зЬомзса1е=Тгие

)

)])
У1д.ирбабе_1ауоиб(б1б1е="Пузырьковая диаграмма с тепловой картой",
хах1з_б1б1е="0сь X",
уах1з_б1б1е="0сь У",)

#	Трансформация фигуры в Ьбт!

р1об_сПч = У1д.бо_Ьбт1(Уи11_Нбш1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_б1ч': р!об_сНу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении с использованием метода до.Пдиге создается фигура Т1д (график).
Этому методу мы передаем следующие параметры:

♦	х — координаты точек для оси х;

♦	у — координаты точек для оси у;

♦	бехб — список текстовых меток для каждого маркера;

♦	тобе='тагкегз ’ — режим отображения данных в виде маркеров (пузырьков);

♦	тагкег — словарь, в котором определены параметры маркеров.

Здесь для маркеров (пузырьков) заданы следующие параметры:

♦	соТог — список цветов маркеров;

♦	зТге — список размеров маркеров;

♦	зЬомзса1е=тгие — показать тепловую карту.

На следующем шаге создаются элементы с описанием параметров диаграммы (тауоиб):
заголовок (бббТе), подписи для осей х и у.

После этого с использованием метода ттд.бо Ьбт! выполняется преобразование диа-
граммы в формат НТМЬ и результаты преобразования сохраняются в объекте р1об_сПч.

На заключительном этапе объект р1об_сНч через словарь сопбехб передается в шаблон
81а1_дга1:_2сШт1 (см. листинг 8.4).

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

15

Ось х

Рис. 8.14. Визуализация пузырьковой диаграммы с тепловой картой
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
14. Пузырьковая диаграмма с тепловой картой 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.14.

Как здесь можно видеть, на диаграмме отображены данные в виде маркеров различных
размеров и цветов. Маркеры находятся на разных уровнях, при этом цвет каждого мар-
кера соответствует цвету на шкале тепловой карты.

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

Библиотека Р1о11у поддерживает множество разных видов диаграмм для визуализации
данных, и показать здесь их все практически невозможно, однако нельзя не рассмот-
реть еще одну замечательную возможность этой библиотеки — вывод данных на гео-
графические карты. Для этого в библиотеке необходимо задействовать метод
до.ЗсаГГегтарЬох.

В этом примере мы воспользуемся картой О8М (Ореп81гее1Мар, открытая карта
улиц) — это некоммерческий картографический веб-проект, в рамках которого создана
карта мира, открытая для свободного и бесплатного использования. Она коренным об-
разом отличается от коммерческих карт (например, от карты Ооо§1е Марз), подклю-
читься к которым можно только с разрешения правообладателя.

При работе с географическими картами важными атрибутами для отображения различ-
ных объектов являются широта и долгота их местоположения. Мы задействуем здесь
немного модифицированный файл формата С8У с населенными пунктами РФ и их ко-
ординатами. Оригинальный файл вы можете найти в Интернете по следующим ссыл-
кам:

♦	^ййиЬ.сот/ЫПаЬз/сйу/ЫоЬ/та^ег/сйу.сзу;

♦	ййр8://гауу.§ййиЬи8егсоп€епЕсот/ЫПаЬ8/сйу/та81:е17сйу.С8У.

Главными атрибутами, определяющими положение города на карте в этом файле,
являются:

♦	1аг (широта);

♦	1оп (долгота).

Для отображения городов на карте нам потребуется создать несколько модулей, рабо-
тающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для построения карты (листинг 8.44).

Листинг 8.44. Ссылка активации маршрута для построения карты

<а ЬгеГ=’’{% иг1 ’1лазГег:тар_1'%}" ГагдеГ ="_Ыапк">15. Географическая карта с городами России 2Г</а>

По этой ссылке будет активирован ИКЕ-маршрут тар_1 (листинг 8.45).
Листинг 8.45. 11К1_-маршрут тар_1

#	20 Географическая карта

рабН(’тар_1/', чГемз.тар_1, пате='тар_1'),

По этому маршруту вызывается представление тар_1 (листинг 8.46).

Листинг 8.46. Представление (у1еш) тар_1

#	#########################

#	Географические карты 1 #
##########################

Неб тар_1(гедиезб):

#	Загрузить файл СЗУ из сети Интернет

#	сГббез = рс!.геас1_сзч( ’Нббрз: //гам.дГбНиЬизегсопбепб.сот/НПаЬз/сббу/тазбег/сббу.сзу’)

#	Загрузить локальный файл СЗУ в мгпбомз

#	сГббез = рс!.геас1_сзч( ’тебГа/тазбег/сзу/с1бу_1.сзу’)

#	Загрузить локальный файл СЗУ в мгпбомз и Иных

ПГепате = РабН (тесПа_сПг + "тазбег/сзч/сГбу_1.сзч")
сГббез = рб.геаб_сзч (ПГепате)

#	Фильтрация данных о городах в объекте сГбгез
сГббез.Гос[сГббез [ ’сГбу’ ] Лзпа (), 'сгбу'] = сГбгез. Гос [сГббез [' сббу' ] Пзпа (), ’аббгезз']

#	Создание фигуры (карты) и загрузка данных

Нд = до. Идите (до.ЗсаббегтарЬох (Таб=С1бГез [ 'део_Габ' ],
Гоп=сГбГез['део_1оп'],
бехб=С1бГез['сгбу']))

#	Найти центр карты, который отобразится в объекте Нд
тар_сепбег = до.Гауоиб.тарЬох.Сепбег(

Габ= (сгЫез [ ’део_Габ' ] .тах () + сЛГез [ 'део_Габ' ] .тГп()) / 2,
1оп= (сГбГез [’део_1оп']-шах () + сГббез [' део_1оп' ] .пап ()) / 2)

#	Создание описания макета фигуры

Пд. ирбабе_1ауоиб (тарЬох_збу1е="ореп-з11гееб-тар",
тарЬох=сИсб(сепбег=тар_сепбег, хоот=2),
НГ1е= ’ Города России',
И(1бИ=1500, ИеГдИб=1000, )

#	Трансформация фигуры в ЫлпГ

р1об_сПч = Нд.бо_Ыдп1 (Ги11_Нт1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_с1Гч': р1об_сПу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2Г.Нбт1”, сопбехб)
Обратите внимание, что для работы этого модуля нужно обязательно подключить биб-
лиотеку рапбаз (она необходима для загрузки файла формата С8У из Интернета по
приведенной в представлении ссылке):

шрогГ рапйаз аз рс!

В представлении тар 1 данные из Интернета с использованием библиотеки рапбаз за-
гружаются в объект сШез (города), после чего с помощью метода 1ос выполняется
фильтрация загруженных данных.

Пояснение

Функция 1ос — это мощный инструмент в библиотеке рапбаз для выбора данных из множе-
ства йаГаГгате на основе набора меток. Обычно она используется для выбора подмножеств
данных на основе меток строк и столбцов. Функция 1ос принимает два аргумента: метку
строки и метку столбца — и возвращает подмножество йаГаГгате, которое соответствует
указанным меткам.

Обратите внимание, что загрузка данных в объект сДДез (города) из Интернета в рас-
сматриваемом модуле закомментирована и эти данные подгружаются из локального
файла. Дело в том, что для корректной работы модуля в оригинальный файл, который
выложен в Интернет, нами внесены некоторые изменения, и по указанному локальному
пути загружается уже измененный файл. Кроме того, для корректного задания путей
к локальному файлу в операционных системах АУшбодуз и 1лпих используется пакет
Рагь, поэтому строка кода, в которой эта опция не задействована, также закомментиро-
вана.

Далее с использованием метода до.Пдиге создается объект Нд (в нашем случае карта),
который заполняется данными из объекта сШез:

♦	1аг=с1Г1ез [' део_1аг' ] — широта расположения города;

♦	1оп=с1г1ез [' део_1оп ’ ] — долгота расположения города;

♦	гехг=с1Ыез [' сИ:у' ] — название города.

На следующем шаге созданы элементы с описанием параметров макета (1ауои1):

♦	тарЬох_зРу1е="ореп-зГгеег-шар" — подключена карта Ореп81гее1Мар;

♦	тарЬох=сИсг (сепрег^пар сепрег, 2оот=2) — указан центр карты и масштаб увеличения;

♦	Ш1е='города России' — задан заголовок макета;

♦	щагь=1500, Ье1дьг=юоо — заданы ширина и высота макета.

После этого с использованием метода Пд.го ьгт! выполняется преобразование диа-
граммы в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сНу.

На заключительном этапе объект р1ог_сЦу через словарь сопгехг передается в шаблон
81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
15. Географическая карта с городами России 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.15.
Как здесь можно видеть, на карте точками показано расположение городов России
в соответствии с их координатами. Если навести курсор мыши на любую из точек,
то рядом с ней появятся координаты города и его название. Карту с помощью мыши
можно перемещать и масштабировать, увеличивая ее до показа региона, плана города,
района города, улиц и номеров домов (рис. 8.16).

Используя библиотеку Р1оИу, на карту можно наносить различные объекты, указывая
их координаты.

Города России

+

Храм сея1И1елей
Афанасия
и Кирилла
на Сивцевом
Вражке

Гоголевский
бульвар







Рис. 8.16. Визуализация плана города с названиями улиц и номерами домов
8.2.	Визуализация данных с библиотекой р1о(1у.ру:
трехмерная графика (30)

Продолжим знакомство с библиотекой р1о!1у.ру и рассмотрим возможность формиро-
вания трехмерной графики (ЗВ). Графики формата ЗВ имеют встроенную динамич-
ность — т. е. с помощью мыши можно масштабировать и поворачивать изображение
вокруг его осей и отображать на нем координаты его элементов.

Для создания и отображения ЗВ-графиков на НТМЬ-страницах надо последовательно
выполнить следующие действия:

1.	Получить массив данных по осям (х, у, г) для построения графика (данные могут
быть загружены из Интернета, сформированы при обращении к специализирован-
ным функциям пользователя или заданы в виде числовых констант).

2.	Сформировать пустую координатную сетку: Пд.

3.	Добавить к координатной сетке полученные данные: Пд.аскМзгасе.

4.	Добавить к координатной сетке описание элементов графика: Пд.ирс1аге_1ауоиг (на-
звание графика, подписи осей, метки линий, размер и т. п.).

5.	Трансформировать график в формат НТМЬ: Пд.го_Ычп1.

6.	Загрузить график формата НТМГ в объект сопгехг.

7.	Передать объект сопгехг в шаблон В)ап§о.

Далее мы рассмотрим несколько примеров визуализации данных формата ЗВ в шабло-
нах В)ап§о.

8.	2.1. Создание 30-графика линии по точкам

В качестве примера сформируем простейший ЗВ-график линии, построенной по точ-
кам, для чего нам понадобится создать несколько модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.47).

Листинг 8.47. Ссылка активации маршрута для построения 30-графика линии

<а ЪгеВ="{% иг1 'тазкег :Ип_ЗВ_1'%}" 1загде1з ="_Ыапк">16. Линия с параметрами по умолчанию ЗВ</а>

По этой ссылке будет активирован ИКЬ-маршрут Ип_зв_1 (листинг 8.48).

Листинг 8.48. ЫНЬ-маршрут Нп_30_1

# ЗВ-линия с параметрами по умолчанию

раВЪ (' Ип_ЗВ_1/’, ч!емз .Ип_ЗВ_1, паше='11п_ЗВ_1'),

По этому маршруту вызывается представление Ип_3в_1 (листинг 8.49).

Листинг 8.49. Представление (у1еу\л) Нп_30_1

########################################
# ЗВ-линия 1 с параметрами по умолчанию #
########################################
с!еГ ИП-ЗВ-1 (гедиезб) :

#	Исходные данные для графика

Паба_х1 = [0, 2, 3, 4, 5, 6]

баба_у1 = [0, 4, 9, 16, 25, 36]

баба_г1 = [0, 4, 9, 16, 25, 36]

#	Данные для фигуры (графика)

баба_Ид = до.3саббег3б(х=баба_х1, у=с!а'Ьа_у1, 2=баба_21,
тобе=’ Ипез ’)

#	Надписи для фигуры (графика)

1ауоиб = до.Ьауоиб(

б1б1е=‘ЗИ-график линии с параметрами по умолчанию в р1об1у.ру’,

аибоз12е=Га1зе,

Ис1бЬ=8 00,

Ье1дЬб=800,

тагд!п=сИсб(1=65, г=50, Ь=65, 11=90),

зсепе={"хахбз": {"б!б1е": "Ось X", "аибогапде": 'гечегзес!’},

"уахбз": {"б1б1е": "Ось У", "аибогапде": 'гечегзес!'},

"гахФз": {"б1б1е": "Ось 2"}},

Ьочег1аЬе1=(Псб(1опб_з1хе=16), # Размер шрифта для данных

)

#	Формирование фигуры (графика)

Ид = до.Идиге (баба=баба_Ид, 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ьбш1

р1об_сИч = У1д.бо_Ьбт1(Ги11_Ьбт1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сИч': р1об_сНч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении созданы:

♦	три списка с данными для графика: баба_х1 — данные для оси х, баба_у1 — данные
для оси;/, баба_21 — данные для оси 2;

♦	объект баба_Ид, и в него переданы списки с данными, которые будут располагаться
по осям графика х, у и з;

♦	элементы с описанием параметров графика (1ауоиб): заголовок графика, ширина и
высота графика в пикселах, отступы от края окна (слева — 1, справа — г, снизу — ь,
сверху — б), подписи для осей х, у и 2. При этом для осей х и у изменен порядок воз-
растания данных — от меньшего значения к большему (по умолчанию данные ото-
бражаются от большего значения к меньшему);

♦	объект Ид (фигура, или собственно график) и в него переданы отображаемые дан-
ные (баба_Ид) и параметры элементов графика (1ауоиб).

После этого с использованием метода Ид.бо Ьбт! выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте р1об_сПч.
На заключительном этапе объект р1ог_сИу через словарь

81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

сопгехг передан в шаблон

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке

16. Линия с параметрами по умолчанию 30.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.17.

30-график линии с параметрами по умолчанию в р1оЦу.ру

Рис. 8.17. Визуализация 30-графика линии с параметрами по умолчанию

Как здесь можно видеть, на ЗВ-графике отображена одна линия, график имеет подпи-
санные оси х, у и 7, сверху присутствует название графика.

Поскольку на графике показана всего одна линия, то легенда, касающаяся этой линии,
не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек.

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

В качестве примера сформируем простейший ЗВ-график линии, построенной по точ-
кам, изменив при этом цвет и толщину линии, для чего нам понадобится создать
несколько модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.50).
Листинг 8.50. Ссылка активации маршрута для построения ЗО-графика линии

<	а Ьгеб="{% иг1 'тазкег:Ип_ЗВ_2'%}” багдеб =”_Ыапк”>17. Линия с указанием ее параметров ЗВ</а>

По этой ссылке будет активирован ИКП-маршрут Ип_зв_2 (листинг 8.51).

Листинг 8.51. 11КЬ-маршрут Нп_ЗО_2

#	ЗВ-линия с заданными параметрами

рабЬ(’Ип_ЗВ_2/', у1ем5.Ип_ЗВ_2, пате=' Ип_ЗВ_2'),

По этому маршруту вызывается представление Ип_зп_2 (листинг 8.52).

Листинг 8.52. Представление (у|еу\л) Нп_ЗО_2

#	####################################

#	ЗВ-линия2 с заданными параметрами #
#####################################
Неб Ип_ЗВ_2 (гедиезк) :

#	Исходные данные для графика
(1аба_х1 = [0, 2, 3, 4, 5, 6]
(1аба_у1 = [0, 4, 9, 16, 25, 36]
баба_г1 = [0, 4, 9, 16, 25, 36]

#	Данные для фигуры (графика)

баба_б1д = до.3саббег3с!(х=с1аба_х1, у=с!а1са_у1, 2=с1аба_21, шос1е=’Ипез ’)

#	Надписи для фигуры (графика)

1ауоиб = до.Ьауоиб(

б1б1е=’ЗВ-график линии с заданными параметрами в р1об1у.ру',
аибоз12е=Га1зе,

Ис1бЬ=800,

Ье1дЬб=800,

тагд!п=сНсб(1=65, г=50, Ь=65, 6=90),

зсепе={"хахбз": {"61б1е": "Ось X", "аибогапде": 'геуегзесГ },
"уахгз": ("61б1е": "Ось У", "аибогапде": 'геуегзес!'},
"гахФз": {"б161е": "Ось 2"}},

Ьоуег1аЬе1=Н1сб(Топб_з1ге=16), # Размер шрифта для данных
)

#	Формирование фигуры (графика)

Ид = до.Идиге (с1аба=с1аба_Ид, 1ауоиб=1ауоиб)

#	Формирование параметров линии

Г1д.ирс1абе_бгасез (Ипе=<Нсб(со1ог='гесГ , ^кШ1=10))

#	Трансформация фигуры в Ьбш1

р1ок_сНу = Нд.ко_Ькт1 (Ги11_Ылп1=Еа1зе)

#	Создание объекта сопбехб
сопбехб = {’р1об_сНу': р1об_сНу}
#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении созданы:

♦	три списка с данными для графика: баба_х1 — данные для оси х, баба_у1 — данные
для оси;/, баба_21 — данные для оси 7;

♦	объект баба ббд и в него переданы списки с данными, которые будут располагаться
по осям графика х, у и 7;

♦	элементы с описанием параметров графика (1ауоиб): заголовок графика, ширина и
высота графика в пикселах, отступы от края окна (слева — 1, справа — г, снизу — ь,
сверху — б), подписи для осей х, у и 7. При этом для осей х и у изменен порядок воз-
растания данных — от меньшего значения к большему (по умолчанию данные ото-
бражаются от большего значения к меньшему);

♦	объект ббд (фигура, или собственно график), и в него переданы отображаемые дан-
ные (баба ббд) и параметры элементов графика (1ауоиб).

Далее с использованием метода Пд.ирбабе_бгасез заданы параметры линии: красный цвет
(со!ог='гесг) И ширина 10 ПИКСеЛОВ (м1ббЬ=1 о).

После этого с использованием метода ббд.бо Ьбт! выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте р1об_бйч.

На заключительном этапе объект р1об_бйч через словарь сопбехб передан в шаблон
81а1_дга1:_2с1.К1т1 (см. листинг 8.4).

Рис. 8.18. Визуализация 30-графика линии с указанием ее параметров
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
17. Линия с указанием ее параметров 30.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.18.

Как здесь можно видеть, на ЗВ-графике отображена одна широкая линия красного цве-
та, график имеет подписанные оси х, у и 7, сверху присутствует название графика.

Поскольку на графике показана всего одна линия, то легенда, касающаяся этой линии,
не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек.

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

В качестве примера сформируем простейший ЗВ-график плавной витой линии, постро-
енной с использованием функций, для чего нам понадобится создать несколько моду-
лей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.53).

Листинг 8.53. Ссылка активации маршрута для построения 30-графика линии

<а Нге1=’’{% иг1 'тазГег:Ип_ЗБ_3'%}" ГагдеГ ="_Ыапк">18. Плавная витая линия ЗБ</а>

По этой ссылке будет активирован ИКЬ-маршрут Ип_зо_з (листинг 8.54).

Листинг 8.54. 1Ж1_-маршрут Нп_30_3

#	ЗБ плавная витая линия

раГЬ (’ Ип_30_3/', угемз .Ип_30_3, пате=' Ип_30_3'),

По этому маршруту вызывается представление Ип_зо_3 (листинг 8.55).

Листинг 8.55. Представление (у|едлл) Нп_30_3

###################################

#	ЗП-график 3 плавная витая линия #
###################################

с!еГ ИП-ЗП-З (гесрезГ) :

# Исходные данные для графика

Г = пр.Ипзрасе (0, 10, 100)

х, у, 2 = пр. соз (Г), пр.з1п(Г), 11

с!аГа_11д = до.ЗсаГГегЗс!(х=х, у=у, 2=2, шос!е='Ипез')

#	Надписи для фигуры (графика)

1ауоиГ = до.ЬауоиГ(

ГгЫе=’ЗП-график витой линии в р1оГ1у.ру',
аибоз12е=Га1зе,

м1ббЬ=8 00 ,

Ье1дЬб=800,

тагд1п=сИсб(1=65, г=50, Ь=65, 11=90),

зсепе={ "хах1з": {"б!б1е": "Ось X", "аибогапде": ' геуегзеб’},

"уахбз": {"б!б1е": "Ось У", "аибогапде": ' геуегзеб’},

"2ах1з": {"б!б1е": "Ось 2"}},

Ьочег1аЬе1=сПсб (1опб_з1хе=16), # Размер шрифта для данных

)

#	Формирование фигуры (графика)

Ид = до.Идите (баба=баба_Ид, 1ауоиб=1ауоиб)

#	Формирование параметров линии

Ид.ирбабе_бгасез (Ипе=сПсб (со1ог='гесГ , ™1с±Ы1=10))

#	Трансформация фигуры в Ьбт1

р1об_сИч = Ид.бо_Ьбт1 (1и11_]лбт1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сИч': р1об_с11у}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении созданы:

♦	с использованием функций библиотеки МишРу три массива данных для графика:
х — данные для оси х, у — данные для оси у, г — данные для оси 7;

♦	объект бабаЦд, и в него переданы переданы массивы с данными, которые будут рас-
полагаться по осям графика х, у и 7;

♦	элементы с описанием параметров графика (тауоиб): заголовок графика, ширина и
высота графика в пикселах, отступы от края окна (слева — 1, справа — г, снизу — ь,
сверху — б), подписи для осей х, у и 7. При этом для осей х и у изменен порядок воз-
растания данных — от меньшего значения к большему (по умолчанию данные ото-
бражаются от большего значения к меньшему);

♦	объект бгд (фигура, или собственно график) и в него переданы отображаемые дан-
ные (бабаЦд) и параметры элементов графика (1ауоиб).

Далее с использованием метода Ид.ирбабе бгасез заданы параметры линии: красный цвет
(со1ог='гесг) И ширина 10 пикселов (Ис1бЬ=10).

После этого с использованием метода Ид.бо Ьбт! выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте р1об_сИч.

На заключительном этапе объект р1об_сПч через словарь сопбехб передан в шаблон
81а1_дга(_2с1.111т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
18. Плавная витая линия 30.
Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.19.

Как здесь можно видеть, на ЗВ-графике отображена плавная витая линия красного цве-
та, график имеет подписанные оси х, у и л, сверху присутствует название графика.

Рис. 8.19. Визуализация 30-графика плавной витой линии

Поскольку на графике показана всего одна линия, то легенда, касающаяся этой линии,
не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек.

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

В качестве примера сформируем простейший ЗБ-график линии с указанием ключевых
точек. Ключевые точки позволят с помощью указателя мыши отобразить координаты
этих точек на трехмерной координатной сетке.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.56).

Листинг 8.56. Ссылка активации маршрута для построения ЗО-графика линии

<а ЪгеЛ="{% иг1 ’тазГег:Ип_ЗБ_4'%}" 1загде1з ="_Ыапк">19. Линия с ключевьми точками ЗБ</а>
По этой ссылке будет активирован ИКЬ-маршрут Пп_зо_4 (листинг 8.57).

Листинг 8.57. 1Ж1_-маршрут Нп_ЗО_4

# ЗВ-линия с ключевыми точками

рабН (' Ип_ЗВ_4/', чбемз .Ип_ЗВ_4, паше=' Пп_ЗВ_4'),

По этому маршруту вызывается представление Ип_зв_4 (листинг 8.58).

Листинг 8.58. Представление (у|еу\л) 1т_ЗО_4

##################################
# ЗВ-линия 4 с ключевыми точками #
##################################
сЗеГ Ип_ЗВ_4 (гедиезб) :

#	Исходные данные для графика

баба_х1 = [0, 2, 3, 4, 5, 6]

баба_у1 = [0, 15, 20, 25, 30, 36]

баба_г1 = [0, 10, 20, 25, 30, 36]

#	Данные для фигуры (графика)

баба_Ид = до.3саббег3с!(х=с1аба_х1, у=с!а1са_у1, 2=баба_21)

#	Надписи для фигуры (графика)

1ауоиб = до.Ьауоиб(

б1б1е='ЗВ-график линии с ключевыми точками (р1об1у и РубНоп)',
аибоз12е=Га1зе,
ИббН=800,
Не1дНб=800,
тагд!п=б1сб(1=65, г=50, Ь=65, 6=90),
зсепе={ ”хах1з”: {"бхббе": "Ось X", "аибогапде": ’гечегзесГ},

"уахгз": {"61б1е": "Ось У", "аибогапде": 'гечегзес!'},
"гахФз": {"б1б1е": "Ось 2"}},

Ьочег1аЬе1=сИсГ(ГопГ_з1хе=16), # Размер шрифта для данных
)

#	Формирование фигуры (графика)

Ид = до.Идите (баба=баба_Ид, 1ауоиб=1ауоиб)

#	Формирование параметров линии

Г1д.ирбабе_бтасез (
тагкег=сНсГ(со1ог=’Ь1ие', з!хе=10),
Ипе=сНсб (со1ог=' теб', ™1сНс11=10)
)

# Трансформация фигуры в Нбт1

р1об_сНч = Г1д.бо_Нбт1(Ги11_Нбт1=Еа1зе)
# Создание объекта сопбехб

сопбехб = {’р1об_сНч': р1об_сИч}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Нбт1", сопбехб)
В этом представлении созданы:

♦	три списка с данными для графика: аака_х1 — данные для оси х, аака_у1 — данные
для оси;/, аа^а_21 — данные для оси 7;

♦	объект с1ака_г1д, и в него переданы списки с данными, которые будут располагаться
по осям графика х, у и 7;

♦	элементы с описанием параметров графика (1ауоик): заголовок графика, ширина и
высота графика в пикселах, отступы от края окна (слева — 1, справа — г, снизу — ь,
сверху — к), подписи для осей х, у и 7. При этом для осей х и у изменен порядок воз-
растания данных — от меньшего значения к большему (по умолчанию данные ото-
бражаются от большего значения к меньшему);

♦	объект Пд (фигура, или собственно график), и в него переданы отображаемые дан-
ные (<1ака_г1д) и параметры элементов графика (1ауоик).

Далее с использованием метода Пд.ирйаке_кгасез заданы параметры ключевых точек
(тагкег) И Самой ЛИНИИ (Ипе). Маркеры точек будут иметь СИНИЙ цвет (со1ог='Ь1ие') и
размер 10 пикселов (з1ге=ю), а линия — красный цвет (со1ог='гесг) и ширину 10 пиксе-
лов (м!сО=10).

После этого с использованием метода Пд.го_Ькт1 выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте р1оу_сНу.

На заключительном этапе объект р1ок_сПу через словарь сопкехк передан в шаблон
81а1_дгаГ_2с1.1'11т1 (см. листинг 8.4).

30-график линии с ключевыми течками (р1о11у и РукКоп)

Рис. 8.20. Визуализация 30-графика линии с ключевыми точками
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
19. Линия с ключевыми точками 30.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.20.

Как здесь можно видеть, на ЗВ-графике отображена линия красного цвета с выделен-
ными ключевыми точками синего цвета, график имеет подписанные оси х, у и 7, сверху
присутствует название графика.

Поскольку на графике показана всего одна линия, то легенда, касающаяся этой линии,
не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек. При наведении указателя мыши на ключевую точку на
координатной сетке будут показаны координаты этой точки (рис. 8.21).

Рис. 8.21. Визуализация 30-графика линии с отображением координат ключевой точки

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

В качестве примера сформируем ЗБ-график поверхности, построенной по координатам
точек, для чего нам понадобится создать несколько модулей, работающих в единой
связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.59).
Листинг 8.59. Ссылка активации маршрута для построения ЗО-графика плоской поверхности

<а Ьгеб="{% иг1 'тазбег:р!_ЗВ_1'%}" 1загде1з ="_Ыапк">20. Плоская поверхность ЗБ</а>

По этой ссылке будет активирован ИКП-маршрут р1_зо_1 (листинг 8.60).

Листинг 8.60. 11К1_-маршрут р1_30_1

#	ЗБ плоская поверхность

рабЬ('р!_ЗП_1/', чбемз.р!_ЗВ_1, паше='р1_ЗВ_1'),

По этому маршруту вызывается представление р1_зо_ 1 (листинг 8.61).

Листинг 8.61. Представление (у|еу\л) р1_30_1

#	################################

#	График ЗБ плоская поверхность #
#################################

(ЛеГ р1_ЗЭ_1 (гедиезб) :

#	Исходные данные для графика

х = [0, 2, 4, 6]

у = [0, 2, 4, 6]

2 = [ [О, О, О], [2, 2, 2], [4, 4, 4]]

#	Формирование фигуры (координатной сетки графика)

Нд = до.Идите ()

#	Формирование данных для фигуры (графика)

зсаббег = до.ЗигГасе(х=х, у=у, 2=х)

#	Формирование параметров графика

Т1д.ирбабе_1ауоиб(б!б1е='ЗЭ-график плоской поверхности по точкам с рТобТу.ру',

Ье1дЬб=800,

ИббЬ=800,

тагд1п=сНсб(1=65, г=50, Ь=65, 6=90),

зсепе={"хахбз": {"б161е": "Ось X", "аибогапде": 'гечегзес!’},
"уахгз":	"Ось У", "аибогапде": 'гечегзесТ},

"хахгз": {"ННе": "Ось 2"}},

Ьочег1аЬе1=сИсб (Топб_з1хе=16), # Размер шрифта для данных
)

#	Загрузка данных в координатную сетку

Нд. абс1_бгасе (зсаббег)

#	Трансформация фигуры в Ьбт1

р1об_сИч = Нд.бо_Ьбт1 (Ги11_Ьбт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_с11ч’: р1об_<Нч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаТ_2В.Ьбт1", сопбехб)

В этом представлении созданы:

♦	три списка с данными для графика: х — данные для оси х, у — данные для оси у, г —
данные для оси 7;
♦	объект Пд (пустая сетка для графика);

♦	объект зсаггег, и в него загружены списки с данными, которые будут располагаться
по осям графика х. у и 7.

Далее с использованием метода Пд.ирааге_1ауоиг созданы элементы с описанием пара-
метров графика (1ауоиг): заголовок графика, ширина и высота графика в пикселах, от-
ступы от края окна (слева — 1, справа — г, снизу — ь, сверху — г), подписи для осей х,
у и 7. При этом для осей х и у изменен порядок возрастания данных — от меньшего
значения к большему (по умолчанию данные отображаются от большего значения
к меньшему).

Затем с помощью метода Пд.асАффгасе в координатную сетку (пд) загружены данные из
объекта зсаГГег.

После этого с использованием метода Пд.го_Ыю1 выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте р1от_сПу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передан в шаблон
§1а1:_дгаТ_2с1.Мт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
20. Плоская поверхность 30.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.22.

30-график плоской поверхности по точкам с р1оНу.ру

Рис. 8.22. Визуализация 30-графика плоской поверхности
Как здесь можно видеть, на ЗВ-графике отображена плоская поверхность и шкала, на
которой указана палитра цветов повышения уровня поверхности по оси г относительно
нулевой точки. Синий цвет показывает нижний уровень, красный и желтые цвета ото-
бражают более высокие уровни.

Поскольку на графике имеется всего одна плоскость, то легенда, касающаяся этой
плоскости, не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек плоскости на координатной сетке.

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

В качестве примера сформируем ЗБ-график изогнутой поверхности. Множество точек,
необходимых для создания нужной поверхности, мы получим с помощью функций.

Для формирования такого графика нам понадобится реализовать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.62).

Листинг 8.62. Ссылка активации маршрута для построения ЗО-графика
изогнутой поверхности

<	а КгеВ="{% иг1 ’тазбег:роч_ЗВ' %}" 1загде1з ="_Ыапк">21. Изогнутая поверхность ЗВ</а>

По этой ссылке будет активирован ИКЬ-маршрут роч_зв (листинг 8.63).

Листинг 8.63. ЫНЬ-маршрут роу_ЗО

#	ЗВ изогнутая поверхность

раВК('роч_ЗВ/', чгемз.роч_ЗВ, паше='роч_ЗВ'),

По этому маршруту вызывается представление роч_зв. Поскольку данные для построе-
ния нашего графика будут получены из функции пользователя, приведем сначала про-
граммный код этой функции (листинг 8.64).

Листинг 8.64. Функция формирования поверхности полезности Кобба — Дугласа (с1а(а_кс1)

#######################################

#	Функция к поверхности Кобба - Дугласа #

#######################################

беВ баВа_кб(Х_тах, У_тах, а, Ь):

#	Массив количества товара X

х = []

Вог 1 ги гапде(0, Х_тах + 1):
х.аррепсЩ)

#	Массив количества товара у
У = □
Вог 1 1п гапде(0, У_тах + 1):
у.аррепсШ)

#	Создаем двумерную матрицу-сетку плоскости х-у как массив пр
х_дг1с1, у_дг1с1 = пр.тезИдггсЦх, у)

#	Рассчитываем значения В в узлах сетки х-у на основе массивов пр

2 = х_дг1с1 *★ а ★ у_дг1с1 ** Ь
гебигп х, у, 2

Функция Кобба — Дугласа используется в экономике для формирования поверхности
полезности при выборе двух товаров. Мы не станем вдаваться здесь в детали экономи-
ческого анализа, а приведем лишь формулу, по которой вычисляются параметры по-
верхности полезности:

2=х**а*у**Ь

Исходя из этой формулы, в приведенном в листинге 8.64 программном коде функция
баба_ы принимает следующие параметры: х_тах — максимальное значение данных по
оси х, У тах — максимальное значение данных по оси у, а — показатель степени при х,
ь — показатель степени при у.

В теле функции в цикле формируются два массива данных — для осей х и у. Затем
с использованием функции пр.тезЬдгМ библиотеки МишРу создается координатная сетка
для плоскости х-у и делается расчет координаты и для этой сетки по приведенной ранее
формуле.

Код представления роч_зв, которое и создаст ЗВ-график, приведен в листинге 8.65.

Листинг 8.65. Представление (у1еш) роу_ЗО

# ЗВ изогнутая поверхность функции Кобба - Дугласа #

Неб роч_ЗВ(гедиезб):

#	Исходные данные для графика

Х_тах =50 # Максимальное количество товара X

У	_тах =50 # Максимальное количество товара У
а = 0.5

Ь = 1 - а

#	обращение к функции для формирования данных
х, у, 2 = баба_кс1(Х_тах, У_тах, а, Ь)

#	Данные для фигуры (графика)
с!аба_б1д = до.Зигбасе(х=х, у=у, 2=2)

#	Надписи для фигуры (графика)

1ауоиб = до.Ьауоиб(

бйб1е=’ЗВ-график изогнутой поверхности с р1об!у.ру’,
аибоз12е=Га1зе,
м!ббЬ=8 О О,

Ье1дЬб=800,

тагд!п=б1сб(1=65, г=5О, Ь=65, 11=90),

зсепе={”хах1з”: {"б!б1е": "Ось X", "аибогапде": 'гечегзеб'},
"уахбз": {"б1б!е": "Ось X", "аибогапде": 'геуегзеб’},
"хахаз": ("б!б1е": "Ось 2"}},

Ьочег1аЬе1=б1сб (1опб_з1хе=16), # Размер шрифта для данных

)

#	Формирование фигуры (графика)

Пд = до.Пдиге (баба=баба_Нд, 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ьбт1

р1об_бйч = Ид.бо_Ьбт1 (1и11_Ы1т1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сНу’: р1об_с11у}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении заданы и переданы в функцию баба ка исходные данные для по-
строения графика: х_тах, у_тах, а, ь. Полученные из функции значения переданы в три
списка для формирования осей графика: х — данные для оси х, у — данные для оси у,
г — данные для оси 2, и полученные списки переданы в объект бабаЦд (это, по сути,
и есть данные для загрузки в координатную сетку).

На следующем шаге С использованием метода до.Тауоиб создан объект Тауоиб, в котором
заданы параметры графика: заголовок графика, ширина и высота графика в пикселах,
отступы от края окна (слева — т, справа — г, снизу — ь, сверху — б), подписи для
осей х, у и 2. При этом для осей х и у изменен порядок возрастания данных — от мень-
шего значения к большему (по умолчанию данные отображаются от большего значения
к меньшему).

Затем с помощью метода до.ттд создан объект Ид, и в него передан массив данных для
формирования графика (баба=баба_Ид) И параметры координатной сетки (Тауоиб=Тауоиб).

После этого с использованием метода бТд.бо ЬбтТ выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте рТоб бТч.

На заключительном этапе объект р1об_б1ч через словарь сопбехб передан в шаблон
81а1_дга1:_2сШт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
21. Изогнутая поверхность 30.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.23.

Как здесь можно видеть, на ЗВ-графике отображена плавная изогнутая поверхность
и шкала, на которой указана палитра цветов повышения уровня поверхности по оси 2
относительно нулевой точки. Синий цвет показывает нижний уровень, красный и жел-
тые цвета отображают более высокие уровни.
30-график изогнутой поверхности с р1оГ1у.ру

50

Рис. 8.23. Визуализация 30-графика изогнутой поверхности

Поскольку на графике имеется всего одна поверхность, то легенда, касающаяся этой
поверхности, не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек плоскости на координатной сетке.

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

В качестве примера сформируем ЗВ-график изогнутой поверхности, на который, кроме
самой поверхности, нанесены контурные линии, показывающие форму поверхности на
различных уровнях. Такие контуры, например, используются на плоских географиче-
ских картах для показа высоты местности над уровнем моря. По сути, эти линии пред-
ставляют собой проекцию пересечения изогнутой поверхности горизонтальной плоско-
стью. Множество точек, необходимых для создания нужной поверхности, мы получим
с помощью функций.

Для формирования такого графика нам понадобится реализовать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.66).
Листинг 8.66. Ссылка активации маршрута для построения ЗО-графика изогнутой
поверхности с контурными линиями по оси 2

<	а Нгеб="{% иг1 'тазбег:роч_сопбоиг_ЗВ'%}" 1загде1з ="_Ыапк">22. Поверхность с контурами по оси х
30</а>

По этой ссылке будет активирован ИКЬ-маршрут роч_сопбоиг_зо (листинг 8.67).

Листинг 8.67. ЫНЬ-маршрут роу_соп(оиг_ЗО

#	ЗП-поверхность с контурами по х

рабН(’роч_сопбоиг_ЗП/', чйемз.роч_сопбоиг_ЗВ, пате=1роч_сопбоиг_ЗП’),

По этому маршруту вызывается представление роу_сопгоиг_зп (листинг 8.68).

Листинг 8.68. Представление (у!е>лл) роу_соп1оиг_ЗО

#	ЗП-поверхность Кобба - Дугласа с контурами по х #

Неб роч_сопбоиг_ЗП(гедиезб):

#	Исходные данные для графика

Х_тах =50 # Максимальное количество товара X

У	_тах =50 # Максимальное количество товара У
а = 0.5

Ь = 1 - а

#	Обращение к функции для формирования данных
х, у, х = баба_кс1(Х_тах, У_тах, а, Ь)

#	Создание контуров по оси х
сопбиг = {

"х": {"зНом": Тгие, "збагб": 1, "епсГ: 50, "збхе": 5}
}

#	Данные для фигуры (графика)

баба_Ид = до.Зигбасе(сопбоигз=сопбиг, х=х, у=у, х=х)

#	Надписи для фигуры (графика)

1ауоиб = до.Ьауоиб(

61б1е='ЗП-график изогнутой поверхности с контурами по оси х (с р1об1у.ру)',
аибоз1хе=Еа1зе,
м!с1бН=800,

Не1дНб=800,

тагд!п=сНсб(1=65, г=50, Ь=65, 6=90),
зсепе={"хахбз": {"61б1е": "Ось X", "аибогапде": 'гечегзесТ},
"уахгз": {"6161е": "Ось У", "аибогапде": 'гечегзесТ},
"хахФз": {"61б1е": "Ось 2"}},

Ночег1аЬе1=сНсб(1опб_з1хе=16), # Размер шрифта для данных
#	Формирование фигуры (графика)

Пд = до.Гбдиге(баба=баба_б!д, 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ьбш!

р1об_ббч = б1д.бо_Ьбт!(би11_Нбш1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_бгу': р1об_б1у}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении заданы и переданы в функцию баба ка (см. листинг 8.64) исход-
ные данные для построения графика: х_тах, у тах, а, ь. Полученные из функции значения
переданы в три списка для формирования осей графика: х — данные для оси х, у —
данные для оси у,2 — данные для оси 7.

Далее создан объект сопбиг, в котором заданы параметры контурных линий для оси 2,
и этому объекту передан вложенный словарь, содержащий следующие элементы:

♦	”г” — ключ внешнего словаря (вертикальная ось трехмерного графика);

♦	"зПсж": тгие — ключ вложенного словаря (предписывает отображать контурные
линии);

♦	"збагб": 1 — ключ вложенного словаря (начальное положение контурных линий по
оси х);

♦	”епб”: 50 — ключ вложенного словаря (конечное положение контурных линий по оси 2);

♦	”з12еп: 5 — ключ вложенного словаря (размер шага между контурными линиями по
оси х).

Затем объект сопбиг и полученные из функции баба_кб списки переданы в объект баба_ббд
(это, по сути, и есть данные для загрузки в координатную сетку).

На следующем шаге с использованием метода до.1ауоиб создан объект 1ауоиб, в котором
заданы параметры графика: заголовок графика, ширина и высота графика в пикселах,
отступы от края окна (слева — 1, справа — г, снизу — ь, сверху — б), подписи для
осейх, у и 2. При этом для осей хиу изменен порядок возрастания данных — от мень-
шего значения к большему (по умолчанию данные отображаются от большего значения
к меньшему).

Далее с помощью метода до.ббд создан объект ббд, и в него передан массив данных для
формирования графика (баба=баба_ббд) И параметры координатной сетки (1ауоиб=1ауоиб).

После этого с использованием метода Убд.бо Ьбт! выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте р1об_ббч.

На заключительном этапе объект р1об_ббч через словарь сопбехб передан в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
22. Поверхность с контурами по оси 2 30.
Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.24.

Как здесь можно видеть, на ЗВ-графике отображена плавная изогнутая поверхность
и шкала, на которой указана палитра цветов повышения уровня поверхности по оси 2
относительно нулевой точки. Синий цвет показывает нижний уровень, красный и жел-
тые цвета отображают более высокие уровни. Кроме того, на поверхность с заданным
шагом нанесены контурные линии, показывающие форму сечения изогнутой поверхно-
сти горизонтальной плоскостью.

ЗО-график изогнутой поверхности
с контурами по оси т (с р1оЫу. ру)

Рис. 8.24. Визуализация ЗЮ-графика изогнутой поверхности с контурными линиями по оси 2

Поскольку на графике имеется всего одна поверхность, то легенда, касающаяся этой
поверхности, не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек плоскости на координатной сетке.

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

В качестве примера сформируем ЗВ-график поверхности, на который, кроме самой по-
верхности, нанесены контурные линии по трем осям: х, у и 2. Эти линии показывают
форму поверхности не только на различных уровнях, но и в вертикальных разрезах.
Такие контуры, например, используются для более выразительного показа решетки,
образующей поверхность. Множество точек, необходимых для создания нужной
поверхности, мы получим из списков, заданных с помощью числовых констант.
Для формирования такого графика нам понадобится реализовать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.69).

Листинг 8.69. Ссылка активации маршрута для построения ЗО-графика поверхности
с контурными ЛИНИЯМИ ПО ОСЯМ X, у И 2

<а ЬгеЕ="{% иг1 'тазкег :роу_соп1соиг2_ЗВ'%}" 1загде1з ="_Ь1апк">23. Поверхность с контурами
по осям х,у, 2 ЗП</а>

По этой ссылке будет активирован ИКП-маршрут роу_сопгоиг2_зо (листинг 8.70).

Листинг 8.70. ЫНЬ-маршрут роу_соп(оиг2_ЗО

#	ЗП-поверхность 2 с контурами по х, у, т.

ракЬ(’роу_сопкоиг2_ЗП/', угемз.роу_сопкоиг2_ЗВ, паше=1роу_сопкоиг2_ЗП’),

По этому маршруту вызывается представление роу_сопгоиг2_зо (листинг 8.71).

Листинг 8.71. Представление (у1еу\л) роу_соп1оиг2_ЗО

#########################################

#	ЗП-поверхность с контурами по х, у, 2 #

#########################################

с1еГ роу_сопкоиг2_ЗП (гедиезк) :

#	Создание контуров по осям х, у, 2
сопкиг = {

”х”:	{"зЬом”:	Тгие,	"зкагк":	1,	"епсГ:	5,	"зТге":	0.5},

"у":	{"зЬом":	Тгие,	"зкагк":	1,	"епсГ:	5,	"з1хе”:	0.5},

”2”:	{"зЬом":	Тгие,	"зкагк":	1,	"епсГ:	3,	"зТге":	0.5}

}

#	Формирование фигуры (графика)

Т1д = до.Ейдиге(до.ЗигТасе(

сопкоигз=сопкиг,

х= [ 1, 2, 3, 4, 5],

у=[1, 2, 3, 4, 5],

2=[

[О,	3,	0,	3,	0],

[3,	0,	3,	0,	3],

[0,	3,	0,	3,	0],

[3,	0,	3,	0,	3],

[0,	3,	0,	3,	0]

]))

#	Формирование фигуры (графика)

Т1д. ирс!аке_1ауоик (

к1к1е=’ЗП-поверхность с контурами по осям х, у, 2 (с рТокТу.ру)’,
аикоз12е=Га1зе,
м!ббЬ=8 О О,

Ье1дЬб=800,

Ьочег1аЬе1=сПсб(бопб_812е=16), # Размер шрифта для данных

)

#	Трансформация фигуры в Ьбт!

р1об_сИч = б1д.бо_Ьбт! (би11_Нбт1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сИч': р1об_сНу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении создан объект сопбиг, в котором заданы параметры контурных
линий для трех осей: х, у и 7, и этому объекту передан вложенный словарь, содержащий
следующие ключи для каждой оси:

♦	"зЬом” — ключ вложенного словаря (предписывает отображать контурные линии);

♦	"збагб” — ключ вложенного словаря (начальное положение контурных линий оси);

♦	”епб” — ключ вложенного словаря (конечное положение контурных линий оси);

♦	"загс" — ключ вложенного словаря (размер шага между контурными линиями оси).

Далее с использованием метода до.Идите создан объект Ид, и в него переданы парамет-
ры контурных линий (сопбоигз=сопбиг) и списки данных для формирования осей графи-
ка X, у И 7.

На следующем шаге с помощью метода Г1д.ирбабе_1ауоиб заданы параметры графика:
заголовок графика и его ширина и высота в пикселах.

После этого с использованием метода ббд.бо Ьбт! выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте р1об_сПч.

На заключительном этапе объект р1об_сПч через словарь сопбехб передан в шаблон
81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
23. Поверхность с контурами по осям х, у, 2 30

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.25.

Как здесь можно видеть, на ЗЭ-графике отображена изогнутая поверхность и шкала, на
которой указана палитра цветов повышения уровня поверхности по осям х, у и г отно-
сительно нулевой точки. Синий цвет показывает нижний уровень, красный и желтые
цвета отображают более высокие уровни. Кроме того, на поверхность с заданным ша-
гом нанесены контурные линии, показывающие форму сечения изогнутой поверхности
горизонтальной и вертикальными плоскостями.

Поскольку на графике имеется всего одна поверхность, то легенда, касающаяся этой
поверхности, не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек плоскости на координатной сетке.
Рис. 8.25. Визуализация 30-графика поверхности с контурными линиями по осям х, у, 2

8.2.9.	Создание ЗО-графика поверхности

с указанием параметров сцены и положения камеры

Когда ЗВ-график выводится на НТМЬ-страницу, то размер контейнера (пропорции
ЗВ-куба), в котором расположен график, и положение камеры определяются парамет-
рами по умолчанию, которые не всегда соответствуют требованиям пользователей.

Самостоятельно задать соотношение сторон куба, в котором помещен ЗВ-график, мож-
но с помощью параметра азресГгаПо, который представляет собой словарь, имеющий
три ключа: х,у и г. По умолчанию значения этих ключей равны единице (равносторон-
ний куб). Если требуется, чтобы куб имел разные размеры граней, то эти параметры
можно менять, например, следующим образом:

♦	если нужно, чтобы куб имел в два раза больший размер по оси х, то параметры сле-
дует задать так: х=2, у=1, 2=1;

♦	если нужно, чтобы куб имел в два раза больший размер по оси у, то параметры сле-
дует задать так: х=1, у=2, 2=1;

♦	если нужно, чтобы куб имел в два раза больший размер по оси 2, то параметры сле-
дует задать так: х=1, у=1, 2=2.

Самостоятельно задать положение камеры относительно центра сцены можно с помо-
щью параметра сатега_еуе, который представляет собой словарь, также имеющий три
ключа: х, у иг. По умолчанию значения этих ключей равны 1,25 (число может быть по-
ложительным или отрицательным). Меняя эти параметры, камеру можно переместить
в любую точку сцены (т. е. куба): установить ее правее, левее, сделать вид сверху или
снизу.

В качестве примера сформируем ЗБ-график поверхности и зададим ему параметры
сатега еуе и азрескгакйо. Множество точек, необходимых для создания этой поверхности,
мы получим из списков, заданных с помощью числовых констант.

Для формирования такого графика нам понадобится реализовать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.72).

Листинг 8.72. Ссылка активации маршрута для построения 30-графика поверхности
с указанием положения камеры и размера сцены (куба)

<	а ЬгеТ="{% иг1 'тазкег:роу_сопкоигЗ_ЗВ'%}" 1загде1з ="_Ыапк">24. Поверхность с положением камеры
30</а>

По этой ссылке будет активирован ИКЬ-маршрут роу сопгоигз зп (листинг 8.73).

Листинг 8.73. ЫНЬ-маршрут роу_соп(оигЗ_ЗО

#	ЗП-поверхность 3 с контурами и камерой

ракЬ('роу_сопкоигЗ_ЗП/’, уйемз.роу_сопкоигЗ_ЗВ, паше='роу_сопкоигЗ_ЗБ’),

По этому маршруту вызывается представление роу_сопгоиг3_зп (листинг 8.74).

Листинг 8.74. Представление (у|еуу) роу_соп!оигЗ_ЗО

#	#################################################

#	ЗП-поверхность с контурами и положением камеры #
##################################################
с1еГ роу_сопкоигЗ_ЗП (гедиезк) :

#	Создание контуров по осям х, у, 2
сопкиг = {

"х":	{"зЬом":	Тгие,	"зкагк":	1,	"епсГ':	5,	"з1хе":	0.5},

"у":	{"зЬом":	Тгие,	"зкагк":	1,	"епс1":	5,	"захе”:	0.5},

"2":	{"зЬом":	Тгие,	"зкагк":	1,	"епс1":	3,	"згге":	0.5}

#	Формирование фигуры (графика)

Пд = до.Ейдиге (до.Зигкасе (
сопкоигз=сопкиг,
х=[1, 2, 3, 4, 5],
у=[1, 2, 3, 4, 5],
2=[

[0,	3,	0,	3,	0],

[3,	0,	3,	0,	3],

[0,	3,	0,	3,	0],

[3,	0,	3,	0,	3],

[0,	3,	0,	3,	0]
#	Формирование фигуры (графика) и сцены

Ид. ирбабе_1ауоиб (

б1б1е='ЗП-поверхность с указанием размера сцены и положения камеры (р1об1у.ру)
аибоз1хе=Га1зе,

Ис1бЬ=8 00,

Ье1дЬб=800,

Ьочег1аЬе1=сПсб(бопб_з1хе=16), # Размер шрифта для данных графика
зсепе={

”хах1з”:	{"пбгскз”:	10},	#	количество	меток	на	оси	х

"уахгз":	{"пбгскз”:	10},	#	количество	меток	на	оси	у

”хах!з”:	{"пбгскз”:	10},	#	количество	меток	на	оси	2

’сатега_еуе': {"х": -2, "у": -1, "х": -1}, # вид снизу

"азресбгаббо": {”х”: 1.5, "у": 1, "х": 1} # соотношение сторон куба

})

#	Трансформация фигуры в Ьбт1

р1об_сИч = Ид.бо_Ьбт1 (би11_Нбт1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сНч': р1об_сИу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении создан объект сопбиг, в котором заданы параметры контурных
линий для трех осей: х, у и 2, и этому объекту передан вложенный словарь, содержащий
следующие ключи для каждой оси:

♦	"зЬом" — ключ вложенного словаря (предписывает отображать контурные линии);

♦	"збагб" — ключ вложенного словаря (начальное положение контурных линий оси);

♦	"епб" — ключ вложенного словаря (конечное положение контурных линий оси);

♦	"згге" — ключ вложенного словаря (размер шага между контурными линиями оси).

Далее с использованием метода до.Ндиге создан объект Ид, и в него переданы парамет-
ры контурных линий (сопбоигз=сопбиг) и списки данных для формирования осей графи-
ка X, у И 2.

На следующем шаге с помощью метода Г1д.ирбабе_1ауоиб заданы параметры графика:
заголовок графика и его ширина и высота в пикселах.

Сцена (зсепе) представляет собой вложенный словарь. В его внутренних словарях зада-
ны следующие параметры:

♦	"хахбз": {"пббскз": 10}—количество меток на оси х;

♦	”уах1з”: {”пб1скз”: 10}—количество меток на оси у;

♦	"хахбз" : {"пбгскз" : 10} — количество меток на ОСИ 2\

♦	'сатега еуе' : {"х": -2, ”у”: -1, "х": -1} —положение камеры (ВИД СНИЗу);

♦	"азресбгабго": {"х": 1.5, "у": 1, "х": 1} —Соотношение СТОрОН куба.

После этого с использованием метода Пд.бо_Ьбш1 выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте р1об_сПч.
На заключительном этапе объект р1ог_сПу через словарь

81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

сопгехг передан в шаблон

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке

2	4. Поверхность с положением камеры 30

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.26.

30-поверхность с указанием размера сцены и положения камеры (р!оНу.ру)

з

Рис. 8.26. Визуализация 30-графика поверхности с положением камеры «вид снизу»

Как здесь можно видеть, на ЗВ-графике отображена изогнутая поверхность и шкала, на
которой указана палитра цветов повышения уровня поверхности по осям х,уиг отно-
сительно нулевой точки. Синий цвет показывает нижний уровень, красный и желтые
цвета отображают более высокие уровни. Кроме того, на поверхность с заданным ша-
гом нанесены контурные линии, показывающие форму сечения изогнутой поверхности
горизонтальной плоскостью и вертикальными плоскостями. При заданных параметрах
камеры при первоначальной загрузке графика пользователь видит график поверхности
снизу.

Поскольку на графике имеется всего одна поверхность, то легенда, касающаяся этой
поверхности, не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек плоскости на координатной сетке. При этом если мышью
повернуть график и сместить положение камеры на вид сверху, то станет видно, что
сцена (куб) вытянута в направлении оси х (рис 8.27), — по этой оси она имеет размер
в полтора раза больше, чем по оси у, т. к. в параметрах сцены были указаны следующие
значения свойства азрес^га^ю: {"х”: 1.5, "у": 1, "г”: 1}.

Рис. 8.27. Визуализация 30-графика: изменены параметры сцены (соотношение сторон куба)

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

В качестве примера сформируем ЗБ-график поверхности, на который, кроме самой
поверхности, нанесена контурная сетка по трем осям: х,уиг. Такая контурная сетка,
состоящая из плавных кривых линий, позволяет более детально показать форму по-
верхности.

В этом примере множество точек, необходимых для создания поверхности, мы полу-
чим из списков, заданных с помощью числовых констант.

Для формирования такого графика нам понадобится реализовать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.75).

Листинг 8.75. Ссылка активации маршрута для построения ЗО-графика поверхности
с контурной сеткой по осям х, у и н

<а Ьге1=’’{% иг1 'тазбег:роу_соп1оиг4_ЗВ'%}" 1загде1з ="_Ыапк”>25. Поверхность с контурной сеткой
30</а>
По этой ссылке будет активирован ИКЬ-маршрут роу_сопбоиг4_зп (листинг 8.76).

Листинг 8.76. ЫНЬ-маршрут роу_соп(оиг4_ЗО

#	ЗЭ-поверхность 4 с контурной сеткой

рабЬ('роч_сопбоиг4_ЗП/', чбемз.роч_сопбоиг4_ЗВ, паше='роч_сопбоиг4_ЗБ'),

По этому маршруту вызывается представление роч_сопбоиг4_зп (листинг 8.77).

Листинг 8.77. Представление (у|еуу) роу_соп1оиг4_ЗО

################################################

#	ЗЭ-поверхность с контурной сеткой по х, у, х #
################################################

(ДеГ роч_сопбоиг4_ЗП (гедиезб) :

#	Создание контуров по осям х, у, х
сопбиг = {

”х”:	{"зЬои":	Тгие,	"збагб":	1,	”епб":	5,	"збхе":	0.05},

"у”:	{"зЬом":	Тгие,	"збагб";	1,	"епб":	5,	"збхе":	0.05},

”х”:	{"зЬом":	Тгие,	"збагб":	1,	"епб":	3,	"збхе":	0.05}

}

#	Формирование фигуры (графика)

Тгд = до.Пдиге (до.ЗигГасе (
сопбоигз=сопбиг,
х=[1, 2, 3, 4, 5],
у=[1, 2, 3, 4, 5],
х=[

[0,	3,	0,	3,	0],

[3,	0,	3,	0,	3],

[0,	3,	0,	3,	0],

[3,	0,	3,	0,	3],

[0,	3,	0,	3,	0]

]))

#	Формирование фигуры (графика)

Пд. ирбабе_1ауоиб (

б1б1е=’ЗП-график поверхности с контурной сеткой с рТобТу.ру’,
аибозТхе=ГаТзе,
мТббЬ=800,
ЬеТдЬб=800,

ЬочегТаЬеТ=б1Сб(Топб_з1хе=Т6), # Размер шрифта для данных
)

#	Трансформация фигуры в ЬбтТ

р1оГ_сИу = Г1д.Го_Ыдп1 (Ги11_Ыдп1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сНу': р!об_сИу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)
В этом представлении создан объект сопгиг, в котором заданы параметры контурных
линий для трех осей: х, у и 2, и этому объекту передан вложенный словарь, содержащий
следующие ключи для каждой оси:

♦	"зЬом" — ключ вложенного словаря (предписывает отображать контурные линии);

♦	"згагг" — ключ вложенного словаря (начальное положение контурных линий оси);

♦	”елсГ — ключ вложенного словаря (конечное положение контурных линий оси);

♦	"з12е" — ключ вложенного словаря (размер шага между контурными линиями оси).

Расстояние между линиями сетки зависит от значения параметра з1ге — чем меньше
это значение, тем больше линий будет в сетке. В нашем примере параметр з1ге имеет
значение 0,05 для всех осей.

Далее с использованием метода до.Пдиге создан объект Пд, и в него переданы парамет-
ры контурных линий (сопГоигз=сопГиг) и списки данных для формирования осей графи-
ка X, у И 2.

На следующем шаге с помощью метода Г1д.ирс1аге_1ауоиг заданы параметры графика:
заголовок графика и его ширина и высота в пикселах.

После этого с использованием метода Пд.го_ьгт1 выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте р1ог_сПу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передан в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

Рис. 8.28. Визуализация 30-графика поверхности с контурной сеткой по осям х, у, 2
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
25. Поверхность с контурной сеткой 30.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.28.

Как здесь можно видеть, на ЗЭ-графике отображена изогнутая поверхность и шкала, на
которой указана палитра цветов повышения уровня поверхности по осям х, у и г отно-
сительно нулевой точки. Синий цвет показывает нижний уровень, красный и желтые
цвета отображают более высокие уровни. Кроме того, на поверхность с заданным ша-
гом нанесена сетка из контурных линий, которая подчеркивает форму поверхности.

Поскольку на графике имеется всего одна поверхность, то легенда, касающаяся этой
поверхности, не отображается (даже если указать ее имя в параметрах графика).

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек поверхности на координатной сетке.

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

На практике достаточно часто возникает потребность отобразить в пространстве рас-
сеяние множества точек, принадлежащих разным выборкам.

В качестве примера сформируем ЗВ-диаграмму для двух наборов точек, для чего нам
понадобится реализовать несколько модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для построения диаграммы (листинг 8.78).

Листинг 8.78. Ссылка активации маршрута для построения 30-диаграммы рассеяния точек

<а ИгеГ="{% иг1 'тазкег:роч_соп1юиг5_ЗВ’%}" 1загде1з ="_Ыапк”>26. Диаграмма рассеяния ЗВ</а>

По этой ссылке будет активирован ИКЬ-маршрут роч_сопгоиг5_зв (листинг 8.79).

Листинг 8.79. Маршрут 11К1_-маршрут роу_соп(оиг5_ЗО

#	ЗВ-точки рассеяния

раГИ(’роч_сопГоиг5_ЗВ/', чФемз.роч_соп1юиг5_ЗВ, паше=1роч_сопГоиг5_ЗВ *),

По этому маршруту вызывается представление роч_сопгоиг5_зв (листинг 8.80).

Листинг 8.80. Представление (у|еллл) роу_соп!оиг5_ЗО

#	#######################

#	ЗВ-точки рассеяния #
########################
йеВ роч_сопГоиг5_ЗВ(гедиезк):

#	Исходные данные для графика 1

В1 = пр.Ипзрасе (0, 10, 100)

х1, у1, 21 = пр.соз (Г1), пр.з!п(111), к1

(1ака_Г1д1 = до.8саВВегЗс1(х=х1, у=у1, 2=21, шос!е='тагкегз', пате='График 1')
#	Исходные данные для графика 2

62 = пр.Ипзрасе (О, 10, 100)

х2, у2, 22 = пр.з1п(б2), пр.соз(б2), 112

баба_Ид2 = до.Зсаббег36(х=х2, у=у2, 2=22, шобе='шагкегз', пате= ’График 2')

#	Надписи для фигуры (графика)

1ауоиб = до.Ьауоиб(

61б1е='ЗВ-диаграмма рассеяния в р1об1у.ру',

аибоз12е=Га1зе,

м1ббЬ=8 00,

Ье1дЬб=800,

тагд1п=61сб(1=65, г=50, Ь=65, 11=90),

зсепе={”хах1з”: {"61б1е": "Ось X", "аибогапде": 'гечегзеб'},
"уахбз": {"61б1е": "Ось У", "аибогапде": 'геуегзесГ},
"гахФз": ("бббХе": "Ось 2"}}

)

#	Формирование фигуры (графика)

Ид = до.Идиге (баба= (6аба_Ид1, 6аба_Ид2), 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ыип1

р1об_61ч = Ид.бо_Ьбт1 (Еи11_Ы1т1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сНу': р1об_с11у}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Нбт1", сопбехб)

В этом представлении с использованием функций библиотеки ИишРу созданы два на-
бора точек для трехмерного пространства: х1, у1, 21 и х2, у2, г2. Точки закручены в две
спирали в ограниченном пространстве.

Затем на основе сформированных наборов точек для диаграммы созданы два набора
данных: баба_Ид1 и бабаЦд2. В каждый набор переданы координаты точек х1, у1, 21 и х2,
у2, 22 И указано, ЧТО отображать нужно не ЛИНИИ, а ТОЧКИ (тобе='тагкегз’)- Для каждого
набора точек задана легенда: пате='График 1' И пате='График 2'.

На следующем шаге с использованием метода до.1ауоиб создан объект 1ауоиб, в котором
заданы следующие параметры диаграммы: заголовок, ширина и высота диаграммы
в пикселах, параметры сцены (подписи для осей).

Далее с помощью метода до.Ид создан объект Пд, и в него переданы данные для фор-
мирования осей диаграммы (баба_Ид1, баба_Ид2) И параметры сцены (1ауоиб=1ауоиб).

После этого с использованием метода Ид.бо Ьбт! выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте р1об_б1ч.

На заключительном этапе объект р1об_б1ч через словарь сопбехб передан в шаблон
§1а1:_дгаТ_2с1.Мт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
26. Диаграмма рассеяния 30.
Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.29.

Как здесь можно видеть, на ЗВ-диаграмме показаны положения точек из двух разных
наборов данных в трехмерном пространстве. Каждый набор точек имеет свой цвет
(красные и синие).

Рис. 8.29. Визуализация ЗО-диаграммы рассеяния точек

Поскольку на графике показаны два набора точек, то легенда, касающаяся каждого на-
бора, отображается рядом с диаграммой.

С помощью мыши график можно вращать вокруг любой оси, масштабировать и ото-
бражать координаты точек на координатной сетке.

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

Продолжим знакомство с библиотекой р1о!1у.ру и рассмотрим возможность формиро-
вания интерактивных графиков. Интерактивные графики отличаются от статичных тем,
что имеют слайдер, с помощью которого пользователи могут анимировать («ожив-
лять») элементы графика.
Для создания и отображения интерактивных графиков на НТМЕ-страницах надо после-
довательно выполнить следующие действия:

1.	Получить массив данных по осям (х, у) для построения статичного элемента графика
(данные могут быть загружены из Интернета, сформированы при обращении к спе-
циализированным функциям пользователя или заданы в виде числовых констант).

2.	Сформировать пустую координатную сетку (пд) и загрузить в нее данные статично-
го элемента графика.

3.	Создать набор кадров интерактивной части графика и в каждый кадр загрузить дан-
ные динамичного элемента графика;

4.	Создать список шагов и для каждого шага определить набор параметров, отобра-
жаемых в каждом кадре динамичного графика.

5.	Создать слайдер (в виде словаря) и загрузить в него список созданных шагов (кад-
ров), указав, какой кадр нужно показать при начальном отображении графика.

6.	Добавить слайдер к макету графика.

7.	Трансформировать график в формат НТМЕ: Пд.го_Ып1.

8.	Загрузить график формата НТМЕ в объект сопгехг.

9.	Передать объект сопгехг в шаблон Э)ап§о.

Далее мы рассмотрим несколько примеров визуализации интерактивных графиков
в шаблонах В)ап§о.

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

В качестве примера сформируем простейший 2В-график линий, построенных по коор-
динатам точек, для чего нам понадобится создать несколько модулей, работающих
в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.81).

Листинг 8.81. Ссылка активации маршрута
для построения интерактивного 20-графика линий

<а йге#="{% иг1 'тазкег:1пГег_дга#_20'%}” ГагдеГ =”_Ь1апк”>27. Интерактивный график (линия)
20</а>

По этой ссылке будет активирован ЕГКЕ-маршрут 1поег_дга#_2о (листинг 8.82).

Листинг 8.82. 11КЬ-маршрут 1п1ег_дга^_2О

# 20 интерактивный график 1-я линия

раОй (’ 1п0ег_дга0_20/ ’ ,	. 1п0ег_дга1_20А паше=11п0ег_дга#_20 ’) ,

По этому маршруту вызывается представление 1поег_дга#_2о (листинг 8.83).

Листинг 8.83. Представление (у|еллл) 1п1ег_дга1:_20

#################################
#20 интерактивный график линии #
#################################
беГ ГпГег_дгаГ_2Г (гедиезб) :

тах_х =50

#	Массив X

х = []

Гог 1 1п гапде(0, тах_х):
х.аррепсШ)

#	Массив у

У = □

Гог 1 1п гапде(0, тах_х):
у.аррепсШ)

#	Создание фигуры (статичный график по точкам)

Пд = до. Идите (до.ЗсаГГег (х=х, у=у, шобе='шагкегз', пате='График статичный'))

#	Создать набор трасс для каждого шага слайдера

Гог збер 1п пр.агапде(0, 2, 0.05):

х = пр.Ппзрасе (0, тах_х, тах_х)

Пд.абб_Ггасе (

до.Зсаббег(
х=х,

у=збер ★ пр.Ппзрасе(0, тах_х, тах_х) + збер,

пате=' График динамичный',

чГз1Ые=Тгие 1Г збер == 1 е!зе ГаГзе
)
)

#	Создать список шагов слайдера
зберз = []

Гог 1 Фи гапде(0, 1еп(Пд.баГа)) :

збер = бГсГ(

теГЬоб="ирбабе",

агдз=[{"чГз1Ые": [ГаГзе] * Геп(ГГд.баба)},

{"Ш1е": "Кадр при значении слайдера: " + зГг(1)}], # Гауоиб атрибут
)

збер["агдз"] [0] ["чГзГЫе"] [0] = Тгие # Сохранять видимой нулевую трассу

збер["агдз"] [0] ["чГзгЫе"] [Г] = Тгие # Переключение 1-й трассировки на "видимую"
зберз.аррепб(збер) # добавить 1-й шаг слайдера к списку

#	Создать слайды в виде словаря и указать их параметры
зПбегз = [сИсГ (

асГ1че=20, # активный кадр слайдера при загрузке графика
сиггепбча1ие= {"ргеПх": "Текущее значение: "},
зберз=зберз
)]

#	Добавить слайдер к описанию графика

Пд. ирбабе_1ауоиГ (

хахГз=б1сГ(Г1Г1е="Ось X"),

уахГз=б1сГ(Г1Г1е="Ось У"),
м1ббЬ=8 00,

Ье1дЬб=500,

зИс1егз=з11с1егз,

аибоз12е=Еа!зе,

бопб=сПсб(ТатПу="Ме1гуо", з!ге=14), # Параметры шрифта для надписей макета
Ьочегтобе=' х ипбПеб’,

Ьочег1аЬе1=сПсб(бопб_з1хе=16), # Размера шрифта для данных графика
)

#	Трансформация фигуры в Ьбш!

р1об_сИч = Т1д.бо_Ьбт1 (Ти11_Ьбт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {’р1об_сИч': р1об_сИч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом представлении последовательно:

♦	созданы два списка с данными для статичного элемента графика: х — данные для
оси х, у — данные для оси у;

♦	создан объект ббд (фигура, или собственно график) и в него переданы отображаемые
данные (х и у), а также некоторые параметры элементов графика: тобе='тагкегз' (по-
казать график в виде точек) и пате=' график статичньм' (легенда для этого графика);

♦	в цикле с помощью метода Пд.абб_бгасе создан набор трасс (набор данных для дина-
мичного элемента графика).

Фактически это набор кадров статичных графиков при определенных значениях х
и у (в нашем примере будет создано 40 таких кадров). В теле цикла, кроме формиро-
вания данных (х и у), создана легенда для динамичной линии графика (пате) И задано
значение видимости (чгзбЫе) только одной трассы из сорока созданных кадров;

♦	создан список шагов слайдера (зберз) — т. е. список параметров каждого кадра, ото-
бражаемого при каждом шаге изменения значения слайдера. В этом цикле заданы
следующие параметры:

•	Скрыть (не показывать) все кадры: чгзгЫе”: [Еа1зе] * Теп(ббд.баба);

•	отображать наименование (бббТе) /-го кадра графика;

•	всегда сохранять видимость линии статичного графика:

(збер["агдз"] [0] ["чйзйЫе"] [0] = Тгие);

•	отображать /-й кадр с линией динамичного графика:

(збер["агдз"] [0] ["чбзгЫе"] [1] = Тгие);

♦ создан объект зИбегз (слайдер) в виде словаря, в котором заданы значения следую-
щим ключам:

•	асб1че=20 — показать активным 20-й кадр при загрузке графика;

•	сиггепбча!ие={"ргебТх": "Текущее значение: "}—текущий кадр Слайдера;

•	зберз=зберз — шаги слайдера (кадры);
♦ с помощью метода Пд.ирс1аге_1ауоиг к макету графика добавлены слайдер и следую-
щие параметры :

•	хах!з=сПсГ (Г1Г1е="Ось X”) — ПОДПИСЬ К ОСИ х;

•	уах!з=сПс±(Ш1е=’’0сь У”) —подпись к оси у;

•	м1со=8 оо — ширина сетки (макета) графика;

•	Ье1дьг=5оо — высота сетки (макета) графика;

•	зИс1егз=з11с1егз — слайдер;

•	аигоз12е=га1зе — запретить изменение размера слайдера;

•	параметры шрифтов графика.

После этого с использованием метода Пд.го_ъш1 выполнено преобразование графика
в формат НТМЕ и результаты преобразования сохранены в объекте р1ог_сПу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передан в шаблон
81а1_дга(_2с1.К1т1 (листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
27. Интерактивный график (линия) 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.30.

Рис. 8.30. Визуализация интерактивного 20-графика двух линий (кадр 20)

Как здесь можно видеть, на 2В-графике отображены две линии: график линии, нарисо-
ванной точками, является статичным и не меняется при перемещении слайдера с по-
мощью мыши, а линия, нарисованная красным цветом, меняет свое положение. Так,
если бегунок слайдера переместить на 35-й кадр, то красная линия относительно коор-
динатной сетки плавно переместится вверх, и изменится содержание шкалы по оси у,
а положение синей линии относительно координатной сетки не изменится (рис. 8.31).
При этом, чем больше кадров будет создано для слайдера, тем более плавно будет
меняться содержимое графика.

Рис. 8.31. Визуализация интерактивного 20-графика двух линий (кадр 35)

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

На практике достаточно часто возникает потребность в рамках одного шаблона пока-
зать интерактивную (управляемую) диаграмму вместе с анимированными или статич-
ными изображениями.

В качестве примера создадим страницу, содержащую три фрагмента:

♦	статичное изображение формата 1РО;

♦	анимированный рисунок формата СИР;

♦	интерактивную диаграмму, управляемую слайдером.

На статичном изображении покажем простейшую схему генератора переменного тока,
на выходе которого формируется переменный ток с напряжением, меняющимся по си-
нусоиде. На анимированном рисунке покажем схему работы трансформатора, который
понижает (или повышает) напряжение переменного тока. На интерактивной (управляе-
мой) диаграмме покажем, как меняется форма синусоиды в зависимости от частоты
вращения ротора генератора.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.
Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графиков (листинг 8.84).

Листинг 8.84. Ссылка активации маршрута для формирования группы графиков

<	а Ьгеб="{% иг1 'шазбег:1пбег_дгаб1_2Р'%}" багдеб ="_Ыапк">28. Интерактивньм график
с изображениями 2Р</а>

По этой ссылке будет активирован ИКП-маршрут 1пбег_дгаб1_2о (листинг 8.85).

Листинг 8.85. 11К1_-маршрут т(ег_дгаГ1_2О

#	Группа интерактивных графиков (збп)

рабй (' 1пбег_дгаб1_2Р/', чбемз. 1пбег_дгаб1_2Р, паше=' 1пбег_дгаб1_2Б'),

По этому маршруту вызывается представление 1пбег_дгаб1_2Р (листинг 8.86).

Листинг 8 Вб. Представление (у1еу\л) 1п1ег_дгаН_2О

#	####################################

#	20 интерактивный график синусоиды #
#####################################
беб Фпбег_дгаб1_20(гедиезб):

#	Массив х (от 0 до 10), 100 значений с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0)
х = пр.Ипзрасе (0, 10, 101)

#	Список данных для интерактивного графика
баба = []

#	Создание данных для интерактивного графика, список от 0 до 5,

#	всего 50 кадров с шагом 0,1 (0.0, 0.1, 0.2, ..., 5.0)

бог збер Фп пр.Ипзрасе (0, 5, 51):

збер = гоипб(збер, 1) # Округление шага да 2-х знаков
у = пр.збп(збер * х) # Расчет значения для оси у
# Создание трассы (кривой линии) для синусоиды
бгасе = до.Зсаббег(

х=х, # Значения для оси х

у=у, # Значения для оси у

паше="збп {:.16} Нг".богтаб(збер), # Легенда

Ипе=б1сб (со1ог=”геб", мбббН=3), # Цвет и ширина линии
чбзбЫе=Еа1зе, )	# Сделать все наборы бгасе невидимьвли

баба.аррепб(бгасе) # Добавить набор бгасе в список бабе

#	Сделайте 10-й набор данных (10-й кадр) видимым в начальном состоянии
ч_збер =10

баба [ч_збер] . чбзбЫе = Тгие

#	Шаги отображения графиков по положению ползунка слайдера,

#	скрыть или показать один из 50-ти кадров

зберз = [] # Список шагов слайдера (кадр в каждом положении ползунка)
п п п

В цикле Вог для всех шагов (з) сделать все 50 кадров невидимьвли (уВзВЬВе: ЕаВзе) .

а кадр 10-го шага сделать видимым (чВзВЬВе: Тгие) .
п п п

#	Цикл по количеству шагов слайдера

Вог з 1п гапде(Веп(баВа)):

#	В цикле скрыть все 50 кадров (графиков)

зВер = ббсВ (теВЬоб="ирбаВе",
агдз=[{”чВз1Ые": [ЕаВзе] * Веп(баВа)}, # Скрыть все кадры графика
{"В1ВВе": "Текущий шаг слайдера: {}".ВогшаВ(з)}]

# Заголовок в зависимости от положения ползунка
)

#	Сделать видимьш только кадр з-го шага слайдера
зВер["агдз"] [0] ["чВзВЫе"] [з] = Тгие

#	Добавить в зВерз параметры видимости графиков на каждом шаге
зВерз.аррепб(зВер)

#	Создать слайды в виде словаря и указать их параметры
зВВбегз = [ббсВ(

асВ1че=ч_зВер, # Начальное значение ползунка

сиггепВчаВие=бВсВ (ргеИх="Кадр: "), # Префикс к значению ползунка
раб=бВсВ (В=50), # Отступ слайдера от макета сверху
зВерз=зВерз)] # Параметры видимости графиков на каждом шаге

#	Создать макет для графиков, задать параметры макета

ВауоиВ = до.ЬауоиВ(

В1В1е="Текущий шаг слайдера: " + зВг(ч_зВер), # Заголовок интерактивного графика
хахВз=б1сВ(В1ВВе="Ось х"), # Подпись к оси х
уахВз=б1сВ(В1ВВе="Ось у"), # Подпись к оси у

ВопВ=сИсВ(ВатВ1у="МеВгуо", З12е=16), # Параметры шрифта для надписей макета

#	Как отображать значения чисел при наведении курсора мыши на график

#	Возможны значения для "х", "у" ("сВозезВ", ЕаВзе, "х ипФИеб", "у ипВИеб")
Ьочегтобе="х ипВГВеб",

ЬочегВаЬеВ=б1сВ(ВопВ_312е=В6), # Размер шрифта для данных графика
зВ1бегз=зВ1бегз, # Добавить слайдер к макету
зЬомВедепб=Тгие) # Отображать легенду

#	Создать фигуру (график)

Ид = до.ЕВдиге (баВа=баВа, ВауоиВ=ВауоиВ)

#	Трансформация фигуры в НВшВ

рВоВ_б1ч = Ид.Во_ЬВтВ (ВиВВ_НВшВ=ЕаВзе)

#	Создание объекта сопВехВ

сопВехВ = {'рВоВ_б1ч': рВоВ_бгу}

#	Передача сопВехВ в шаблон

геВигп гепбег(гедиезВ, "тазВег/дВача_8/депегаВ.НВшВ", сопВехВ)

В этом представлении:

♦	создан массив х (данные для оси х);

♦	в инструкции х = пр.ввпзрасе(0, во, вов) для оси х созданы 100 значений в интерва-
ле 0-10 с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0);
♦	сформирован пустой список (аака) — объект для хранения данных интерактивного
графика;

♦	в цикле Гог выполняется формирование элементов кгазе интерактивного графика
(данные для осей х и у). В нашем случае создаются 50 шагов изменения положения
слайдера (50 кадров) — т. е. 50 наборов кгазе;

♦	в следующих инструкциях обеспечивается видимость 10-го кадра в начальном со-
стоянии (при первом открытии шаблона В)ап§о):

ч_зкер =10

йака[ч_зкер].ч1з1Ь1е = Тгие

♦	создается пустой список шагов слайдера (зкерз []) и организован цикл Гог, в котором
на каждом шаге слайдера делается видимым только один кадр с индексом з, а все
остальные кадры скрываются;

♦	создается объект зиаегз (слайды, кадры), в который загружаются параметры всех
шагов слайдера (параметры кадров каждого шага слайдера);

♦	задаются параметры макета интерактивного графика (1ауоиг):

•	ппе — заголовок интерактивного графика;

•	хах1з — подпись к оси х;

•	уах1з — подпись к оси у;

•	Гопк — параметры шрифта для надписей макета;

•	Ьоуегтойе — способ отображать значения чисел при наведении курсора мыши на
график, может иметь следующие значения: "сТозезг”, га1зе, "х цпШесГ, "у ипШес!";

•	Ьоуег1аЬе1 — размера шрифта для данных графика;

•	зиаегз — добавить слайдер к макету;

•	зшяедеп — отображать легенду.

После этого с использованием метода Пд.го ьгт! выполнено преобразование графика
в формат НТМЬ и результаты преобразования сохранены в объекте р1ок_сИу.

На заключительном этапе объект р1ок_сИч через словарь сопкехк передан в шаблон
депега!.К1т1 (листинг 8.87).

Листинг 8.87. Шаблон депега(.Мт1

{# депегак.Ькт! #}

{% ехкепсАз "зкор/Ьазе.ЪктГ’ %}

{% 1оас1 зкаклс %}

{% Ыоск сопкепк %}

<сПу с1азз=”гом"> <!— Это начало строки —>

<!— Это колонка для рисунка дрд —>

<сИч с1азз=”со1-3 гох-2”>

<Ъ5>Генератор переменного тока</Н5>

<1тд згс=”{% зкаЫс 'тазкег/гтадез/депегаког.дрд’ %}” с1азз=”1тд-Г1и1сГ а1к="СГС’’>

</сИч>
<!— Это колонка для рисунка дЫ —>

<с11у с1азз="со1-3 тх-2”>

<Ъ5>Трансформатор</Ъ5>

<1тд згс=”{% зкакФс ' тазкег/тадез/депег. дЫ' %}" с1азз=”1тд-к1и1сГ а1к=”СГ(3”>

</бгу>

</бгу>

<Ыч с1азз=”гом”> <!— Это начало строки —>

<!— Это колонка для интерактивного графика—>

<сНч с1азз="со1-12 со1-зт-12 со!-тб-12 со1-1д-12 со1-х1-12 со1-хх1-6”>

<Ъ5> Вид синусоиды при разной частоте</В5>

{% аикоезсаре окк %}

{{ р1ок_Ыч }}

{% епбаикоезсаре %}

</сНч>

</сНч>

{% епбЫоск сопкепк %}

В этом шаблоне созданы три адаптивных блока со следующим содержимым:

♦	изображение формата ОРО;

♦	изображение формата ОШ;

♦	интерактивный график со слайдером.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
28. Интерактивный график с изображениями 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.32.

Как здесь можно видеть, на НТМЬ-странице отображены три объекта:

♦	изображение формата ОРО;

♦	изображение формата О1Е;

♦	интерактивный график (синусоида), управляемый с помощью слайдера.

Анимированное ^-изображение в динамике демонстрирует работу трансформатора:
меняется направление движения тока и магнитных линий, а также характер напря-
жения.

На интерактивном графике синусоида меняет свою форму при изменении положения
бегунка слайдера (изменении частоты). Так, если бегунок слайдера переместить на ну-
левой кадр (частота 0 Гц, ротор генератора не вращается, и выходное напряжение равно
нулю), то синусоида превращается в линию (рис. 8.33, а). А если бегунок слайдера
переместить на 50-й кадр (частота 5 Гц), то прямая линия принимает форму синусоиды
с изменяющимся периодом (рис. 8.33, б). При этом чем больше кадров будет создано
для слайдера, тем более плавно будет меняться содержимое интерактивного графика.
Генератор переменного тока

Вид синусоиды при разной частоте

Текущий шаг слайдера: 10

з1:ер-0 зГер-7 з!ер-14 зГер-21 зГер-28 з!ер-35 з1ер-42 зГер-49

Рис. 8.32. Визуализация изображений и интерактивного графика

1

“ 51П 0.0 Н2

0.5

-0.5

Ч	2	4	6	8	10

Ось х

Кадр: зГер-0

з1ер-0 зСер-7 з1ер-14 з1ер-21 зГер-28 з!ер-35 з1ер-42 зСер-49

а

Рис. 8.33. Изменение формы синусоиды при перемещении слайдера
8.3.3. Вывод двух интерактивных графиков
в одну координатную сетку

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

Конденсатор

Конденсатор состоит из двух пластин, разделенных диэлектриком. При возрастании напря-
жения по цепи, содержащей конденсатор, начинают бежать электроны — т. е. появляется
ток. Электроны могут добежать только до пластин — дальше некуда. На пластинах «место»
ограничено, поэтому чем больше электронов там уже есть, тем медленнее прибегают но-
вые, — т. е. ток постепенно спадает. Из-за того, что напряжение у нас синусоидальное, ток
спадает до нуля ровно в тот момент, когда напряжение достигает максимума. При сниже-
нии напряжения электронам на пластинах удерживаться сложнее — они начинают бежать
обратно, т. е. ток меняет направление. Быстрее всего они бегут тогда, когда напряжение
равно нулю (ток становится максимальным). Далее все происходит в обратной последова-
тельности, и этот процесс многократно повторяется. Изменения тока и напряжения носят
синусоидальный характер (рис. 8.34).

Рис. 8.34. Характер изменения тока и напряжения на конденсаторной емкости

В качестве примера создадим страницу, на которой будет показана динамика измене-
ния тока и напряжения на конденсаторной емкости при изменении частоты перемен-
ного тока.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графиков (листинг 8.88).
Листинг 8.88. Ссылка активации маршрута для формирования группы графиков

<а ИгеР="{% иг1 'шазбег:1пбег_дгаР2_2В'%}" 1загде1з ="_Ыапк">29.

Два интерактивных графика (з1п, соз) 2Р</а>

По этой ссылке будет активирован ИКП-маршрут 1пбег_дгаб2_2о (листинг 8.89).

Листинг 8.89. 11КЬ-маршрут 1п(ег_дга^2_2Э

# Два 2Р интерактивных графика (злп, соз)

рабЬ(’1пбег_дгаТ2_2Р/', чбемз.1пбег_дгаТ2_2Р, пате='1пбег_дгаТ2_2Р'),

По этому маршруту вызывается представление 1пбег_дгаб2_2о (листинг 8.90).

Листинг 8.90. Представление (у|еу\л) т(ег_дгаГ2_2О

#########################################
# 20 интерактивный график две синусоиды #
#########################################
беб 1пбег_дгаТ2_2О(гедиезк):

#	Список от 0 до 10 для з1п_баба, соз_баба

#	всего 100 значений с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0)
х = пр.Ипзрасе (0, 10, 101)

#	Списки данных для интерактивного графика
з!п_баба, соз_баба = [], []

#	Создание 2-х графиков, список от 0 до 5

#	всего 50 графиков (кадров) с шагом 0,1 (0.0, 0.1, 0.2, ..., 5.0)
Тог збер 1п пр.Ипзрасе (0, 5, 51):

#	Расчет значений у в зависимости от х
у = пр.з!п(збер * х)
у 2 = пр.соз(збер * х)

#	Трасса (данные) для з!п(х)
з!п_бгасе = до.Зсаббег(
х=х,
У=Уг

пате=”з1п {:.И} Нг” Иогтаб (збер),
Ипе=сНсб(со1ог=”гесГ, ИббЬ=3),
ч1з1Ь1е=Га1зе, )

#	Трасса (данные) для соз(х)
соз_бгасе = до.Зсаббег(
х=х,
У=У2,
пате=”соз {:.И} Нг” Иогтаб (збер),
Ипе=сНсб (со1ог=”Ь1ие ", ИсН±=3),
ч1з1Ь1е=Га1зе, )

#	Добавить наборы бгасе в списки зтп_баба, соз_баба
з!п_баба.аррепб(з!п_бгасе)

соз_баба.аррепб(соз_бгасе)
#	Сделайте 10-й кадр (набор данных) видимым в начальном состоянии

ч_збер =10

з1п_баба [ч_збер] . чгзФЫе = Тгие

соз_баба [ч_збер] .ч1з1Ые = Тгие

#	Объединить данные 2-х графиков в общий список
баба = з1п_баба + соз_баба

#	Шаги отображения графиков по положению ползунка слайдера,
# скрыть или показать один из 50-ти кадров

зберз = [] # Список шагов слайдера (кадр в каждом положении ползунка)
п п п

з1п_баба, соз_баба отображать/скрыть

Например, когда ползунок в положении 2, будет видимым 3-й кадр

з1п_ч1з1Ые = [Еа1зе, Еа1зе, Тгие, Еа1зе,...]

соз_ч1з1Ые = [Еа1зе, Еа1зе, Тгие, Еа1зе,...]

Остальные кадры обоих графиков будут скрыты
п п п

#	Цикл по количеству шагов слайдера

Тог з Фи гапде(1еп(з1п_баба)):

#	скрыть все кадры слайдера для динамичных графиков з1п_баба и соз_баба
з1п_ч1з1Ые, соз_ч1з1Ые = [Еа1зе] * 1еп (з1п_баба), [Еа1зе] * 1еп (соз_баба)

#	Сделать видимьш только кадр з-го шага слайдера

з1п_ч1з1Ые [з], соз_у1з1Ые [з] = Тгие, Тгие

#	Задать параметры текущему шагу (кадру) слайдера

збер = сНсб(тебНоб="ирбабе",

агдз= [{"чгзФЫе": з1п_ч1з1Ые + соз_ч1з1Ые},
{”Н1Н1е": "Текущий шаг слайдера: {}".Еогтаб(з)}]
)

#	Добавить в зберз параметры видимости графиков на каждом шаге
зберз.аррепб(збер)

#	Создать слайды в виде словаря и указать их параметры

зИбегз = [б1сб(

асб1че=ч_збер, # Начальное значение ползунка

сиггепбча1ие=сНсб(ргеЕ1х="Кадр: "), # Префикс к значению ползунка

раб=Н1сб(6=50), # Отступ слайдера от макета сверху
зберз=зберз)] # Параметры видимости графиков на каждом шаге ползунка

#	Создать макет для графиков, задать параметры макета

1ауоиб = до.Ьауоиб(

6161е="Текущий шаг слайдера: " + збг(ч_збер), # Заголовок интерактивного графика
хах1з=сНсб(6161е="0сь х"), # Подпись к оси х

уах1з=сНсб(6161е="0сь у"), # Подпись к оси у

Еоп6=сНсб(ЕатПу="Ме1гуо", з!ге=16), # Параметры шрифта для надписей макета
#	Как отображать значения чисел при наведении курсора мыши на график

#	Возможны значения для "х", "у" ("с1озезб", Еа1зе, "х ипбббеб", "у ипбббеб")
Ьочегтобе= ’ х ипйбйеб ’,

Ьочег1аЬе1=сНсб(бопб_з12е=16), # Размер шрифта для данных графика
зИбегз=зИбегз, # Добавить слайдер к макету
зЬом1едепб=Тгие) # Отображать легенду

#	Создать фигуру (график)

ббд = до.Ебдиге (баба=баба, 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ьбт1

р1об_сНч = ббд.бо_Ьбт1 (би11_Нбш1=Еа1зе)

#	Создание объекта сопбехб
сопбехб = {'р1об_с11ч': р1об_б!ч}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

Поскольку и ток, и напряжение изменяются по синусоиде, имея сдвиг по фазе на
90 градусов, для отображения динамики изменения напряжения можно использовать
функцию зш(х), а для отображения динамики изменения тока — функцию соз(х).

Исходя из этого, в нашем представлении:

♦	создан массив х (данные для оси х);

♦	в инструкции х = пр.Ппзрасе(0, ю, 101) для оси х созданы 100 значений в интерва-
ле 0—10 с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0);

♦	сформированы два пустых списка: збп_баба — объект для хранения данных с дина-
микой изменения напряжения и соз_баба — объект для хранения данных с динамикой
изменения тока;

♦	в цикле бог выполняется формирование элементов бгазе интерактивных графиков
збп бгасе и соз бгасе (данные для осей х, у и х, у2). В нашем случае создаются 50 ша-
гов изменения положения слайдера (50 кадров) — т. е. 50 наборов бгазе;

♦	в следующих инструкциях обеспечивается видимость 10-го кадра в начальном со-
стоянии (при первом открытии шаблона Э)ап§о):

ч_збер =10

збп_баба [ч_збер] .чбзбЫе = Тгие

соз_баба [ч_збер] .чбзбШе = Тгие

♦	выполняется объединение данных для двух графиков в общий список:
баба = збп_баба + соз_баба

♦	создается пустой список шагов слайдера (зберз[]) и организован цикл бог, в котором
на каждом шаге слайдера делается видимым только один кадр с индексом з, а все
остальные кадры скрываются;

♦	создается объект зИбегз (слайды, кадры), в который загружаются параметры всех
шагов слайдера (параметры кадров каждого шага слайдера);

♦	задаются параметры макета интерактивного графика (1ауоиб):

•	ббб1е — заголовок интерактивного графика;

•	хахбз — подпись к оси х;
уахГз--ПОДПИСЬ К ОСИ у\

Гопт — параметры шрифта для надписей макета;

•	Ьоуегтойе — способ отображать значения чисел при наведении курсора мыши на
график, может иметь следующие значения: "сТозезТ", Га1зе, "х ипШесТ’, "у ипШесГ';

•	Ьоуег1аЬе1 — размер шрифта для данных графика;

•	зиаегз — добавить слайдер к макету;

•	зшяедеп — отображать легенду.

После этого с использованием метода Пд.го_ььп1 выполняется преобразование графика
в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сНу.

На заключительном этапе объект р1от_сИу через словарь сопгехг передается в шаблон
з1а1:_дгаТ_2с1.Мт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке 29. Два
интерактивных графика (ат, соз) 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.35.

Текущий шаг слайдера: 10

зГер-0 БГер-7 Бкер-14 з1ер-21 аЬер-28 а^ер-35 зГер-42 зГер-49

Рис. 8.35. Визуализация двух графиков в одной координатной сетке

Как здесь можно видеть, на НТМЬ-странице отображены два графика:

♦	синусоида красного цвета — характеризует колебания напряжения;

♦	синусоида синего цвета — характеризует колебания тока.

Чем больше кадров будет создано для слайдера, тем более плавно будет меняться со-
держимое интерактивного графика.
8.3.4.	Вывод статичных и интерактивных графиков
в одну координатную сетку

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

В качестве примера создадим страницу, на которой будут показаны один статичный
график и два интерактивных.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графиков (листинг 8.91).

Листинг 8.91. Ссылка активации маршрута для формирования группы графиков

<а ИгеТ=’’{% иг1 'тазбег:1пбег_дгаТЗ_2В'%}" ГагдеГ ="_Ыапк”>30. Сочетание статичных
и интерактивных графиков 2Р</а>

По этой ссылке будет активирован ИКЬ-маршрут 1пбег_дгатз_2о (листинг 8.92).

Листинг 8.92. 1Ж1_-маршрут 1п(ег_дга1:3_2О

#	20 сочетание статичных и динамичных графиков

раОИ('1пГег_дгаОЗ_2О/', чФемз.1пбег_дгаТЗ_2О, паше='1пГег_дгаОЗ_2О'),

По этому маршруту вызывается представление 1пгег_дгаоз_2о (листинг 8.93).

Листинг 8.93. Представление (у|еу\л) 1п1ег_дга13_2О

#########################################
#20 интерактивный график три синусоиды #
#########################################
йеО 1пГег_дгаОЗ_2О(гедиезб):

#	Список от 0 до 10 для з1п_с!аба, соз_с!аба

#	всего 100 значений с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0)
з!п_с1аба, соз_баба = [], []

х = пр.Ипзрасе (0, 10, 101)

баба = [] # Список данных для 3-х графиков

#	Трасса (данные) для статичного графика
бгасе = до.Зсаббег(
х=х,
у=2 * пр.соз(х),
пате=”2 * соз",
Ипе=сНсб (со1ог=”дгееп", ЩббН=3),
ч1з1Ые=Тгие, )	# эти данные сделать видимыми

#	Добавить в список нулевую трассу для статичного графика

баба.аррепсЦ бгасе) # Нулевая часть данных - это фиксированный график
#	Трассы (данные) для динамичных графиков с анимацией слайдером
Тог збер 1п пр.Ппзрасе(0, 5, 51):

у = пр.збп(збер * х)

у 2 = пр.соз(зТер * х)
збп_бгасе = до.3саббег(

х=х,

У=Уг

пате=”з1п {:.16} Нг".боппаб(збер),

11пе=сИсТ(собог=”гесГ, м1с1бк1=3) ,
У131Ые=Еа1зе, )

соз_бгасе = до.3саббег(
х=х,
У=У2,
пате=’’соз {:.16} Нг”. богтаб (збер),
11пе=с11сТ (со1ог=”Ыие ”, м1с1бН=3),
У131Ые=Еа1зе, )

#	Добавить в список трассы (данные) для динамичных графиков
з1п_баба. аррепб(збп_бгасе)
соз_с1аба. аррепб (соз_бгасе)

#	Сделайте 10-й кадр видимым в начальном состоянии

у_збер =10

з1п_с1аба [у_збер] . У131Ые = Тгие

соз_с!аба [у_збер] .убзТЬТе = Тгие

#	Добавить в список 1-й и 2-й блоки данных для динамичных графиков
баба += з1п_баба + соз_баба

#	Шаги отображения графиков по положению ползунка слайдера,
# скрыть или показать один из 50-ти кадров (графиков)

зберз = [] # Список шагов слайдера (кадр в каждом положении ползунка)

п п п

Всегда показывать статичные графики, для них ч1з1Ые=Тгие
п п п

#	Цикл по количеству шагов слайдера
бог з би гапде(Теп(збп_баба)):

#	скрыть все кадры слайдера динамичных графиков з!п_баба и соз_баба - невидимые
збП-УбзТЫе, соз_уТзТЫе = [ЕаТзе] * Теп(з1п_баба), [ЕаТзе] * Теп (соз_баба)

#	Сделать видимьш только кадр з-го шага слайдера для бп_баба и соз_баба
зТп_У1зТЬТе[з], соз_У1зТЬТе[з] = Тгие, Тгие

#	Задать параметры текущему шагу (кадру) слайдера
збер = сНсб(тебЬоб=”ирбабе",

агдз=[{"убзТЬТе": [Тгие] + з1п_ч1зТЬТе + соз_У1зТЬТе}, # Нулевая трасса
видима всегда

{"бТбТе": "Текущий шаг слайдера: {}".богтаб(з)}]
)

зберз.аррепсЦ збер)
#	Создать слайды в виде словаря и указать их параметры

зИбегз = [ббсб (

асб!че=ч_збер, # Начальное значение ползунка

сиггепбча1ие=б!сб (ргеИх="Кадр: "), # Префикс к значению ползунка

раб=б!сб (6=50), # Отступ слайдера от макета сверху

зберз=зберз)] # Параметры видимости графиков на каждом шаге ползунка

#	Создать макет для графиков, задать параметры макета

1ауоиб = до.Ьауоиб(

61б1е=”Текущий шаг слайдера: " + збг(ч_збер), # Заголовок интерактивного графика
хах1з=б1сб(61б1е=”0сь х"), # Подпись к оси х

уах1з=б1сб(61б1е="0сь у"), # Подпись к оси у

бопб=б1сб (ТатПу=”Ме1гуо", з1хе=16), # Параметры шрифта для надписей макета

#	Как отображать значения чисел при наведении курсора мыши на график

#	Возможны значения для ”х”, ”у” (”с1озезб”, Еа1зе, ”х ипШеб", "у ипбббеб")

Ьочегтобе=' х ипШеб ’,

Ьочег1аЬе1=б1сб(бопб_з12е=16), # Размер шрифта для данных графика
зИбегз=зИбегз, # Добавить слайдер к макету
зЬои1едепб=Тгие) # Отображать легенду

#	Создать фигуру (график)

Пд = до.Ебдиге(баба=баба, 1ауоиб=1ауоиб)

#	Трансформация фигуры в Ьбш1

р1об_б!ч = Е1д.6о_Ьбт1 (Еи11_Нбт1=Га1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_с11ч': р1об_б1ч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1”, сопбехб)

В этом представлении:

♦	создан массив х (данные для оси х);

♦	в инструкции х = пр.Ипзрасе(0, 10, 101) для оси х созданы 100 значений в интерва-
ле 0—10 с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0);

♦	создан пустой список для хранения данных (баба) и сформированы данные для ста-
тичного графика (объект бгасе — нулевой элемент для списка баба);

♦	объект бгазе добавлен К списку баба инструкцией баба.аррепб(бгасе) — Т. е. объект
бгасе стал нулевым элементом списка баба. Обратите внимание, что все данные ста-
тичного графика будут видны всегда, поскольку параметр, обеспечивающий види-
мость, имеет значение ч1з1Ые=тгие;

♦	в цикле бог выполняется формирование элементов бгазе интерактивных графиков
збп бгасе и соз бгасе (данные для осей х, у и х, у2). В нашем случае создаются 50 ша-
гов изменения положения слайдера (50 кадров) — т. е. 50 наборов бгазе. Обратите
внимание, что все данные интерактивных графиков будут скрыты, поскольку пара-
метр, обеспечивающий их видимость, имеет значение ч1з1Ые=га1зе;

♦	в следующих инструкциях обеспечивается видимость 10-го кадра интерактивных
графиков збп баба и соз баба в начальном состоянии (при первом открытии шаблона
Р)ап§о):
у_з^ер =10

81п_с1а^а [у_зЬэр] . У181Ые = Тгие

соз_с1а^а [у_8Ьэр] .У181Ые = Тгие

♦	к объекту аа^а добавляются еще два набора данных (после этого список аа^а будет
содержать три элемента с индексами 0, 1 и 2):

йа^а += 81п_аа^а + соз_аа^а

♦	создается пустой список шагов слайдера (з-ьерз [ ]) и организовывается цикл 1ог, в ко-
тором на каждом шаге слайдера все кадры интерактивных графиков скрываются
и делается видимым только один кадр с индексом з;

♦	создается объект зпаегз (слайды, кадры), в который загружаются параметры всех
шагов слайдера (параметры кадров каждого шага слайдера);

♦	задаются параметры макета интерактивного графика (1ауоиЕ):

•	Ш1е — заголовок интерактивного графика;

•	хах1з — подпись к оси х;

•	уахгз — подпись к оси у;

•	1опр — параметры шрифта для надписей макета;

•	Ьоуегтойе — способ отображать значения чисел при наведении курсора мыши на
график, может иметь следующие значения: "с1озез^”, Га1зе, ”х ипШесГ', "у ипШес!";

•	Ьоуег1аЬе1 — размер шрифта для данных графика;

•	зпаегз — добавить слайдер к макету;

•	зшяедеп — отображать легенду.

После этого создается объект Нд (фигура или график) и с использованием метода
Пд.го_11Ст1 выполняется преобразование графика в формат НТМЕ. Результаты этого
преобразования сохраняются в объекте р1о^_сНу.

На заключительном этапе объект р1о^_сНу через словарь сопрехр передается в шаблон
81а1_дга1:_2сШт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
30. Сочетание статичных и интерактивных графиков 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.36.

Как здесь можно видеть, на НТМЕ-странице отображены три графика:

♦	интерактивная синусоида красного цвета с амплитудой 1;

♦	интерактивная синусоида синего цвета с амплитудой 1;

♦	статичная синусоида зеленого цвета с амплитудой 2.

При изменении положения бегунка слайдера интерактивные синусоиды будут изме-
няться, а статичная синусоида останется неизменной.

Чем больше кадров будет создано для слайдера, тем более плавно будет меняться
содержимое интерактивных графиков.
Рис. 8.36. Визуализация трех графиков в одной координатной сетке

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

При визуализации интерактивных данных иногда требуется на одной координатной
сетке скрыть/вернуть какой-либо из визуальных элементов.

В качестве примера создадим страницу, на которой будет показан один статичный гра-
фик и два интерактивных. При этом по достижении бегунком слайдера заданной пози-
ции один из интерактивных элементов исчезнет.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графиков (листинг 8.94).

Листинг 8.94. Ссылка активации маршрута для формирования группы графиков

<	а Ьге^=”{% иг1 ’тазкег:1пРег_дга^4_2В' %}" 1загде1з ="_Ь1апк”>31. Анимация с исчезновением элемента
20</а>

По этой ссылке будет активирован ИКП-маршрут 1глег_дган_2о (листинг 8.95).

Листинг 8.95. ЫНЬ-маршрут т(ег_дга14_2О

#	2В-анимация с исчезновением

ракЬ (' 1пГег_дгаГ4_2Э/ ’, ч!емз. 1п1:ег_дга1:4_2В, пате=' 1пРег_дгаН_2В ’),

По этому маршруту вызывается представление 1пгег_дгаГ4_2о (листинг 8.96).

Листинг 8.96. Представление (у|еу\л) т(ег_дгаМ_2О

###############################

#	2В-анимация с исчезновением #
###############################
с!еГ 1пбег_дгаб4_2О(гедиезб) :

#	Список от 0 до 10 для збп_с1аба, соз_с1аба

#	всего 100 значений с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0)
х = пр. Ипзрасе (0, 10, 101)

баба = [] # Список данных для всего макета

#	Список данных для графиков збп_с1аба, соз_с!аба
з!п_баба, соз_баба = [], []

#	Трасса для статичного графика
бгасе = до.Зсаббег (
х=х,
у=2 * пр.соз(х),
пате="2 * соз",
Ипе=сНсб (со1ог=”дгееп", ™1с±Ы1=3),
ч1з1Ые=Тгие, )	# эти данные сделать видимыми

#	Добавить в список нулевой блок данных для статичного графика
баба.аррепб(бгасе) # Нулевая часть данных - это фиксированный график

#	Трассы для динамичных графиков с анимацией слайдером
Тог збер бп пр. Ипзрасе(0, 5, 51):
у = пр.збп(збер ★ х)
у 2 = пр.соз(збер * х)

#	Трасса для збп
збп_бгасе = до.Зсаббег(
х=х,
У=Уг

пате=”з1п {:.1б} Нг”.богтаб(збер),
1бпе=ббсб(со1ог="геб", ИббН=3),
чбзбЬ1е=Еа1зе, )

#	Трасса для соз

бб збер <3: # Создать трассу для збер меньше 3 (х<30)
соз_бгасе = до.Зсаббег(
х=х,
У=У2,
пате="соз {:.16} Нг".богтаб(збер),
1бпе=ббсб (со1ог="Ыые ", мбббН=3),
чбзбЫе=Еа1зе, )

е1зе: # Создать пустую трассу для збер больше 3 (х>30)
соз_бгасе = до.Зсаббег(х=Иопе, у=Иопе) # задать пустые данные

збп_баба. аррепб(збп_бгасе)
соз_баба.аррепб(соз_бгасе)

#	Сделайте 10-й кадр видимым в начальном состоянии
ч_збер =10
31п_баба [ч_збер] . чбзТЫе = Тгие

соз_с!аба [ч_збер] .чбзТЫе = Тгие

#	Добавить в список 1-й и 2-й блоки данных для динамичных графиков
баба += З1п_с1аба + соз_баба

#	Шаги отображения графиков по положению ползунка слайдера,
# скрыть или показать один из 50-ти графиков

зберз = [] # Список шагов слайдера (графики в каждом положении ползунка)

п п п

Всегда показывать фиксированные графики, для них всегда чТзТЫе=Тгие
п п п

#	Цикл по количеству шагов слайдера

Тог з 1п гапде(Теп(зТп_баба)):

#	скрыть все кадры слайдера динамичных графиков з1п_баба и соз_баба
з1п_ч1з1ЬТе, соз_чТз1Ые = [ЕаТзе] * Теп (з1п_баба), [ЕаТзе] * Теп(соз_баба)

#	Сделать видимьш только кадр з-го шага слайдера
з1п_ч1з1ЬТе[з], соз_У1зТЬТе[з] = Тгие, Тгие

#	Задать параметры текущему кадру (шагу) слайдера
збер = ббсб(теббоб=”ирбабе",

агдз=[{"чТзТЬТе”: [Тгие] + з1п_ч1зТЬТе + соз_ч1зТЬТе}, # Нулевая трасса видима всегда
{"бТбТе": "Текущий шаг слайдера: {}".богтаб(з)}]
)

зберз.аррепб(збер)

#	Создать слайды в виде словаря и указать их параметры
зТббегз = [бйсб(

асб1че=ч_збер, # Начальное значение ползунка
сиггепбчаТие=НТсб(ргеЫх="Кадр: "), # Префикс к значению ползунка
раб=НТсб(6=50), # Отступ слайдера от макета сверху
зберз=зберз)] # Параметры видимости графиков на каждом шаге ползунка

#	Создать макет для графиков, задать параметры макета

Тауоиб = до.Ьауоиб(

бТбТе="Текущий шаг слайдера: " + збг(ч_збер), # Заголовок интерактивного графика
хах18=сНсб(61б1е="0сь х"), # Подпись к оси х
уах18=сНсб(61б1е="0сь у"), # Подпись к оси у

бопб=сНсб (батПу="Ме1гуо", з1ге=16), # Параметры шрифта для надписей макета

#	Как отображать значения чисел при наведении курсора мыши на график

#	Возможны значения для "х", "у" ("сТозезб", ЕаТзе, "х ипИТесГ, "у ипЬЫесГ)
Ночегтобе=' х ипбЫеб ',

НочегТаЬеТ=Н1сб(бопб_з12е=Т6), # Размер шрифта для данных графика
зТ1бегз=зТ1бегз, # Добавить слайдер к макету
зНом1едепб=Тгие) # Отображать легенду

#	Создать фигуру (график)

Ыд = до.Ебдиге(баба=баба, 1ауоиб=1ауоиб)
#	Трансформация фигуры в Ьбт1

р1об_ббч = ббд.бо_Ьбт1 (би11_Ибт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_бгу': р1об_ббу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, ”тазбег/д1ача_8/збаб_дгаб_2Р.Ьбт1”, сопбехб)

В этом представлении:

♦	создан массив х (данные для оси х);

♦	в инструкции х = пр.Ппзрасе(0, ю, 101) для оси х созданы 100 значений в интерва-
ле 0-10 с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0);

♦	создан пустой список для хранения данных всего макета (баба) и два пустых списка
ДЛЯ хранения данных ИНТеракТИВНЫХ графиков (збп_баба и соз баба):

баба = []

з1п_баба, соз_баба = [], []

♦	сформированы данные для статичного графика (объект бгасе — нулевой элемент для
списка баба);

♦	объект бгазе добавлен К списку баба инструкцией баба.аррепб(бгасе) — Т. е. объект
бгасе стал нулевым элементом списка баба. Обратите внимание, что все данные ста-
тичного графика будут видны всегда, поскольку параметр, обеспечивающий види-
мость, имеет значение ч1з1Ые=тгие;

♦	в цикле бог выполняется формирование элементов бгазе интерактивных графиков
збп бгасе и соз бгасе (данные для осей х, у и х, у2). В нашем случае создаются 50 ша-
гов изменения положения слайдера (50 кадров) — т. е. 50 наборов бгазе. Обратите
внимание, что все данные интерактивных графиков будут скрыты, поскольку пара-
метр, обеспечивающий их видимость, имеет значение ч1з1Ые=га1зе. Кроме того, с ис-
пользованием разветвления бб данные объекта соз бгазе формируются только для
первых тридцати кадров, а начиная с 31-го кадра, они будут пустыми;

♦	в следующих инструкциях обеспечивается видимость 10-го кадра интерактивных
графиков збп баба и соз баба в начальном состоянии (при первом открытии шаблона
О|ап§о):

ч_збер =10

збп_баба [ч_збер] .чбзбЫе = Тгие

соз_баба [ч_збер] .чйзйЫе = Тгие

♦	к объекту баба добавляются еще два набора данных (после этого список баба будет
содержать три элемента с индексами 0, 1 и 2):

баба += збп_баба + соз_баба

♦	создается пустой список шагов слайдера (зберз []) и организовывается цикл бог, в ко-
тором на каждом шаге слайдера все кадры интерактивных графиков скрываются
и делается видимым только один кадр с индексом з;

♦	создается объект зПбегз (слайды, кадры), в который загружаются параметры всех
шагов слайдера (параметры кадров каждого шага слайдера);
♦	задаются параметры макета интерактивного графика (1ауоит):

•	тше — заголовок интерактивного графика;

•	хах1з — подпись к оси х;

•	уахгз — подпись к оси у;

•	Гопт — параметры шрифта для надписей макета;

•	Ьоуегтойе — способ отображать значения чисел при наведении курсора мыши на
график, может иметь следующие значения: ”с1озезТ”, Га1зе, "х ипШед", "у ипШесГ';

•	Ьоуег1аЬе1 — размер шрифта для данных графика;

•	зиаегз — добавить слайдер к макету;

•	зшяедеп — отображать легенду.

После этого создается объект Пд (фигура или график) и с использованием метода
Пдло ьип! выполняется преобразование графика в формат НТМЕ. Результаты этого
преобразования сохраняются в объекте р1от_сПу.

Рис. 8.37. Визуализация трех графиков в одной координатной сетке
с исчезновением интерактивного элемента
На заключительном этапе объект р1ог_сИу через словарь сопгехг передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
31. Анимация с исчезновением элемента 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.37.

Как здесь можно видеть, на НТМЬ-странице отображены три графика:

♦	интерактивная синусоида красного цвета с амплитудой 1;

♦	интерактивная синусоида синего цвета с амплитудой 1;

♦	статичная синусоида зеленого цвета с амплитудой 2.

При движении бегунка слайдера в интервале 0-29 интерактивные синусоиды станут
изменяться, но на графике будут видны все три синусоиды (см. рис. 8.37, о). При дви-
жении бегунка слайдера в интервале 30-50 одна синусоида исчезнет (см. рис. 8.37, б)
и появится лишь после того, как бегунок вернется в положение 0-29.

Чем больше кадров будет создано для слайдера, тем более плавно будет меняться со-
держимое интерактивных графиков.

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

При визуализации интерактивных данных иногда требуется на одной координатной
сетке показать какой-либо из визуальных элементов при определенном положении
слайдера.

В качестве примера создадим страницу, на которой покажем статичный график с одним
интерактивным элементом. При этом по достижении бегунком слайдера заданной
позиции на графике будет появляться новый элемент.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графиков (листинг 8.97).

Листинг 8.97. Ссылка активации маршрута для формирования группы графиков

<а Ьге^="{% иг1 ’тазкег:1пГег_дга^5_2В'%}" Рагдек ="_Ыапк”>32.

Анимация с появлением элемента 2Р</а>

По этой ссылке будет активирован ИКЬ-маршрут 1пкег_дгак5_2Р (листинг 8.98).

Листинг 8.98. 1Ж1_-маршрут т(ег_дгага_2О

# 20-анимация с появлением элемента

ракк(’1пкег_дгак5_2Р/', улемз.1пкег_дгак5_2Р, пате=11пкег_дгак5_2Р’),

По этому маршруту вызывается представление 1пкег_дгак5_2о (листинг 8.99).
Листинг 8.99. Представление (у|еу\л) т(ег_дгаГ5_2О

#####################################
# Функция для анимации с появлением #
#####################################
беР баРа_орР(Х_тах, М, Рх, Ру):

#	Массив X
х = []

Рог 1 1п гапде(0, Х_тах + 1) :
х.аррепсШ)

#	Зависимость и1 от X при М1=100
и1 = []

У	= □
х.рор(О)
Рог 1 1п х:

X = 1

у = (М / Ру) - ((Рх * X) / Ру)

т = гоипсЦ (М / X) , 2)

и1. аррепб (т)

Х.аррепсЦу)
геРигп х, и1, X

############################
# 2П-анимация с появлением #
############################
сРеР 1пРег_дгаР5_2Р (гедиезР) :

Рх = 200 # Стоимость товара X

Ру = 200 # Стоимость товара X

М = 10000 # Максимальный доход потребителя

Х_тах = 1пР(М / Рх) # Максимальное количество товара X
Х_тах = РпР(М / Ру) # Максимальное количество товара X

#	Получить массив значений для кривой полезности
М2 = 250

х2, и2, у 2 = баРа_орР(Х_тах, М2, Рх, Ру)

#	Данные для точки в оптимуме
М3 = 3150

х_орр = М3 / Рх

у_орр = М3 / Ру

хР_орР = [х_орр] # Координата х точки опт
ур_орр = [у_орр] # Координата у точки опт

#	Данные для координат линий точки оптимума
х_Ип, у_Ип = [0, х_орр, у_орр, х_орр], [х_орр, у_орр, х_орр, 0]

#	Список от 0 до 5 для х (для всего макета)

#	всего 50 значений с шагом 0.1 (0.0, 0.1, 0.2, ..., 50.0)

х = пр.Ипзрасе (0, 5, 51)
баба = [] # Список данных для всего макета
# Список данных для отдельных графиков

Ьиб_баба, Ьг1_баба, базб_баба, орб_баба, и_баба = [], [], [], [], []

#	Данные для статичной касательной линии
М2 = 6300

х_Ь, и_Ь, у_Ь = баба_орб(Х_тах, М2, Рх, Ру)

#	Данные для статичной линии бюджета (нулевая трасса)
Ьиб_бгасе = до.Зсаббег(

х=х_Ь,

у=у_Ь,

пате="Бюджет",

Ипе=сНсб(со1ог="Ыие", м1ббб=2),

ч131Ые=Тгие, )	# эти данные сделать видимыми

#	Добавить в список нулевой блок данных для статичного графика
баба.аррепб(Ьиб_бгасе) # Нулевая часть данных - это фиксированный график

#	Данные для статичной кривой безразличия (1-я трасса)
Ьг1_бгасе = до.Зсаббег(
х=х2,
у=и2,
пате="Н опт.",
Ипе=б1сб (со1ог=" геб", м!ббН=1),
ч1з1Ые=Тгие, )	# эти данные сделать видимыми

Ьг1_баба.аррепб(Ьг1_бгасе)

#	Добавить в список 1-й блок данных для статичного графика

баба.аррепб(Ьг1_бгасе) # 1-я часть данных - это фиксированньм график

#	Данные для статичной точки оптимума
рорб_бгасе = до.Зсаббег(
х=хб_орб,
у=уб_орб,
тобе='тагкегз',
тагкег={’згге': 10, ’со1ог': 'геб'}а
пате='Точка отп.',
ч1з1Ые=Тгие, )

#	Добавить в список 2-й блок данных для статичного графика

баба.аррепб(рорб_бгасе) # 2-я часть данных - это фиксированньм график

#	Данные интерактивных пунктирных линий для координат точки оптимума
Ипор_бгасе = до. Зсаббег (

х=х_11п,

у=у_Ип,

збом1едепб=Еа1зе,

Ипе=б1сб(со1ог='геб', м!ббб=2, базб='базб'),
ч1з1Ые=Еа1зе, )

#	Добавить в список 3-й блок данных для статичного графика

баба.аррепб(Ипор_бгасе) # 3-я часть данных - это фиксированньм график
#	Данные для интерактивной кривой безразличия с анимацией слайдером

бог збер бп пр.Ипзрасе (100, 500, 51):

#	Получить массив значений для кривых полезности

хб, иб, уб = баба_орб(Х_тах, збер, Рх, Ру)

и_бгасе = до.3саббег(

х=хб,

у=иб,

пате=”П”,

Ипе=сНсб (со1ог=”дгееп", м1ббН=3),

У131Ые=Еа1зе, )

и_баба.аррепб(и_бгасе)

#	Сделайте 5-й кадр видимым в начальном состоянии

у_збер = 5

и_баба [у_збер] .убзбЫе = Тгие

#	Добавить в список 3-й блок данных для динамичных графиков
баба += и_баба

#	Шаги отображения графиков по положению ползунка слайдера,

#	скрыть или показать один из 50-ти графиков

зберз = [] # Список шагов слайдера (графики в каждом положении ползунка)

#	Цикл по количеству шагов слайдера

Тог з бп гапде(1еп(х)):

#	скрыть все слайды для динамичных графиков - и_баба

и_баба_У131Ые = [ЕаТзе] * (Теп(и_баба) + 3)

#	Сделать видимым только кадр з-го шага слайдера для и_баба
и_баба_уТзТЬТе[з] = Тгие

#	Задать параметры текущему шагу слайдера

збер = бТсб(тебЬоб=”ирбабе",

агдз=[{"уТзТЬТе”: [Тгие] + и_баба_убзбЬ1е}, # Показать значение и_баба
{"бТбТе”: "Текущий шаг слайдера: {}".богтаб(з)}]
)

#	збер["агдз"][0]["убзбббе"] [0] = Тгие # Нулевая трасса видима всегда

збер["агдз"][0]["убзбЫе"][1] = Тгие # Сохранять видимой Т-ю трассу - ЬгТ_бгасе
збер["агдз"][0]["убзбЫе"][2] = Тгие # Сохранять видимой 2-ю трассу - рорб_бгасе
бб з == 22:

збер["агдз"][0]["убзбЬбе"] [3] = Тгие # Сделать видимой 3-ю трассу - Тбпор_бгасе
зберз.аррепб(збер)

#	Создать слайды в виде словаря и указать их параметры

зТббегз = [ббсб(

асббуе=у_збер, # Начальное значение ползунка

сиггепруа1ие=ббсб(ргеббх="Кадр: "), # Префикс к значению ползунка

раб=ббсб(6=50), # Отступ слайдера от макета сверху

зберз=зберз)] # Параметры видимости графиков на каждом шаге ползунка
#	Добавить описание к макету графика

1ауоиб = до.Ьауоиб(б1б1е='Точка оптимума:',

хах!з=б1сб (б1б1е="Ось х"), # Подпись к оси х

уах!з=б1сб(б1б1е="Ось у"), # Подпись к оси у

ю_ббП=700, Ье1дЬб=600, # Ширина и высота макета
зИбегз=зИбегз,	# Слайды (кадры)

аибоз1ге=Еа1зе,

)

#	Создать фигуру (график)

Ыд1 = до.ЕФдиге (баба=баба, # Данные

1ауоиб=1ауоиб, # Описание макета

1ауоиб_хах1з_гапде=[0, Х_шах], # Размерность оси х
1ауоиб_уах1з_гапде=[0, У_шах] # Размерность оси у
)

#	Трансформация фигуры в Ьбш1

р1рб_б1ч = Ыд1 .бо_Ьбт1 (Еи11_Ьбт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_с11ч': р1об_бЬу}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

В этом примере в качестве статичного и подвижного элементов используются кривые
Кобба — Дугласа — на этом элементе экономической теории мы здесь останавливаться
не станем. Отметим лишь, что данные для построения кривых Кобба — Дугласа фор-
мируются у нас В фуНКЦИИ С Именем баба_орб.

В представлении 1пбег_дгаб5_2О:

♦	задаются данные, необходимые для формирования кривой Кобба — Дугласа (рх = 2 о о,
Ру = 200, М = 1000о), И вычисляется максимальное количество товаров (х_тах, У_тах), ко-
торые можно приобрести при заданных стоимости и бюджете;

♦	определяются параметры некоторых отображаемых элементов графика: координаты
точки оптимума (хб орб, уб орб) и координаты линий проекции точки оптимума на
оси х и у (х_Ип, у_Ип);

♦	создается массив х (данные для оси х);

♦	в инструкции х = пр.Ипзрасе(0, 10, 101) для оси х создаются 100 значений в интерва-
ле 0-10 с шагом 0.1 (0.0, 0.1, 0.2, ..., 10.0);

♦	создаются пустой список для хранения данных всего макета (баба) и пустые списки
для хранения данных других элементов графика:

•	Ьиб баба — статичная линия бюджетного ограничения;

•	Ьг1_баба — статичная кривая безразличия;

•	базЬбаба — пунктирные линии проекций точки оптимума на осях хи у;

•	орб баба — координаты точки оптимума;

•	и баба — интерактивная (подвижная) кривая безразличия;
♦ формируются данные для следующих элементов графика (объекты ггасез):

•	х_ь, и_ь, у_ь — данные для статичной касательной линии;

•	Ьий Ггасе — данные ДЛЯ Статичной ЛИНИИ бюджета (у131Ь1е=Тгие);

•	Ьг1_Ггасе — данные ДЛЯ статичной кривой безразличия (у1з1Ь1е=Тгие);

•	рорГ_Ьгасе — данные ДЛЯ статичной ТОЧКИ оптимума (у131Ые=Тгие);

•	Ипор_ггасе — данные интерактивных пунктирных линий для координат точки
оптимума (у131Ые=Га1зе).

Обратите внимание, что элементы статичных графиков будут видны всегда, по-
скольку параметр, обеспечивающий видимость, имеет значение у1з1Ые=тгие. А вот
последний элемент будет ПОЯВЛЯТЬСЯ, поэтому изначально ОН скрыт (у1з1Ь1е=Га!зе).

♦	в цикле Гог выполняется формирование элементов ггазе интерактивного графика
и ггасе (данные для осей х и у). В нашем случае создаются 50 шагов изменения
положения слайдера (50 кадров) — т. е. 50 наборов ггазе. Обратите внимание, что
все данные интерактивных графиков будут скрыты, поскольку параметр, обеспечи-
вающий их видимость, имеет значение у1з1Ь1е=га1зе;

♦	в следующих инструкциях обеспечивается видимость 5-го кадра интерактивного
элемента графиков и йага в начальном состоянии (при первом открытии шаблона
Р)ап§о):

у_зГер = 5

и_с!аГа [у_зГер] . у1з1Ые = Тгие

♦	К объекту ааГа добавляется набор данных и_с!аГа (после ЭТОГО СПИСОК ааГа будет
содержать четыре элемента с индексами 0, 1, 2 и 3):

йаГа += и_с!аГа

♦	создается пустой список шагов слайдера (згерз []) и организовывается цикл Гог, в ко-
тором на каждом шаге слайдера все кадры интерактивных графиков скрываются
и делается видимым только один кадр с индексом з.

Нулевая трасса будет видна всегда (по умолчанию), поэтому для нее признак види-
мости можно не менять. А вот графики с трассами, имеющими индекс 1 и 2, делаем
видимыми принудительно для всех кадров:

зГер["агдз"] [0] ["уйзйЫе”] [1] = Тгие
зГер["агдз"] [0] ["уйзйЫе"] [2] = Тгие

Трассу же с индексом 3 делаем видимой только тогда, когда будет показан
22-й кадр:

И з == 22:

зГерГ'агдз”] [0] ["уйзГЫе"] [3] = Тгие

Чего мы добились в инструкциях этого цикла:

•	статичные элементы графика будут видны всегда;

•	динамичная линия кривой безразличия станет менять свое положение в каждом
кадре;
•	прерывистые линии проекции точки оптимума на оси х и у будут появляться
только в кадре с номером 22.

♦	создается объект зИДегз (слайды, кадры), в который загружаются параметры всех
шагов слайдера (параметры кадров каждого шага слайдера);

♦	задаются параметры макета интерактивного графика (1ауоиг):

•	Ш1е — заголовок интерактивного графика;

•	хах13-ПОДПИСЬ К ОСИ Х\

•	уах1з — подпись к оси у;

•	м1со — ширина макета;

•	Ье1дьг — высота макета;

•	зиаегз — добавить слайдер к макету;

♦	создается объект Пд (фигура или график), в который передаются данные (йага), опи-
сание макета (1ауоиг) и размерности осей хи у;

♦	с использованием метода Пдло_ьст1 выполняется преобразование графика в формат
НТМЬ и результаты этого преобразования сохраняются в объекте р1ог_сИу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передается в шаблон
81а1_дга1:_2сШт1 (см. листинг 8.4).

Текущий шаг слайдера: 8

Рис. 8.38. Вид графиков при положении слайдера на шаге 8
► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
32. Анимация с появлением элемента 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.38.

Как здесь можно видеть, на НТМЬ-странице отображены все статичные элементы гра-
фика и подвижная кривая безразличия.

При установке бегунка слайдера на шаг 22 (точка оптимума) на графике появится
новый элемент — линии проекции точки оптимума на оси хиу (рис. 8.39).

Чем больше кадров будет создано для слайдера, тем более плавно будет меняться
содержимое интерактивных графиков.

Рис. 8.39. Вид графиков при положении слайдера на шаге 22

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

Важными элементами для анимации данных являются фреймы (Ггашез), значения кото-
рых представляют собой списки словарей. Эти словари соответствуют кадрам в аними-
рованном графике: каждый кадр содержит свой собственный атрибут данных, а также
другие параметры. Анимация обычно запускается и управляется с помощью элементов
управления в виде кнопок или слайдера.
В качестве примера сформируем простейший 2В-график синусоиды, построенной по
точкам, связанным с тепловой картой. Запуск и остановка анимации будут осуществ-
ляться с помощью кнопок.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 8.100).

Листинг 8.100. Ссылка активации маршрута для построения графика линии

<а Ьгеб="{% иг1 'тазбег: бгатез_2В' %}" 1загде1з =”_Ыапк">33. Анимация диаграмм на базе Егатез 2В</а>

По этой ссылке будет активирован ИКП-маршрут бгатез_2в (листинг 8.101).

Листинг 8.101. 11К1_-маршрут Ггате8_20

# 2В-анимация на базе Егатез

рабЬ('бгатез_2В/', чбемз.бгатез_2В, пате='бгатез_2В'),

По этому маршруту вызывается представление бгатез_2в (листинг 8.102).

Листинг 8.102. Представление (у|еуу) 1гатез_2О

#############
# Функции #
##############
беб З1п(х):

гебигп пр.згп(х)

##############################
# 2В-анимация на базе Егатез #
##############################
беб бгатез_2В(гедиезб) :

#	Начальные данные

х = пр.агапде(0, 9.5, 0.1)

#	Создать фигуру (график)
Ид = до.Идите ()

#	Добавить трассу (данные)

ббд.абб_бтасе (до.Зсаббег (х= [х [0] ],
у=[з1п(х)[0]],
тобе= ’ Ипез+тагкегз',
пате=' График у=збп(х)
тагкег=б1сб(со1ог=збп(х[0]),

со1огЬаг=б1сб(б1б1е="у=з1п(х)"),
со1огзса1е='Тпбегпо',
312е=25)

))

#	Создать фреймы
Егатез = []
#	Заполнить фреймы данными
бог 1 1п гапде(1, 1еп(х)):
бгатез. аррепб (до. Плате (баба= [
до.Зсаббег(х=х[:б + 1],
у=31п(х[:1 + 1]),
тагкег=б1сб(со1ог=з!п(х[:б +1]), з1де=25))]))

#	Подключить фреймы к фигуре (графику)
ббд.бгатез = бгатез

#	Добавить описание графика

ббд. ирбабе_1ауоиб (1едепб_ог1епбаб1оп="Н",

61б1е='Синусоида на базе фреймов с кнопками проигрывания’,
хах!з=б1сб(61б1е="0сь х"), # Подпись к оси х
уах!з=б1сб(61б1е="0сь у"), # Подпись к оси у
1едепб=б1сб(х=.8, хапсЬог="сепбег"), # положение легенды на шкале х
зЬом1едепб=Тгие, # Обязательное отображение легенды
ирбабетепиз=[ббсб(б1гесб!оп="1ебб", х=0.6, хапсЬог="сепбег", у=—0.08,
буре="Ьиббопз",
Ьиббопз=[ббсб (1аЬе1='>", тебНоб="ап1табе",

агдз=[Попе, {"бготсиггепб": Тгие}]),

б1сб(1аЬе1=" II ”, тебЬоб="ап1табе",

агдз=[[Попе], {"Егате": {"бигаббоп": 0, "гебгам": ЕаТзе},
"тобе ": " бттеббабе ",
"бгапзбббоп": {"бигаббоп": 0}}])])],
тагдбп=ббсб(1=0, г=0, 6=50, Ь=50))

ббд.ирбабе_бгасез(Ьочегбпбо="а11", Ночегбетр1абе="х= %{х}<Ьг>у= %{у}")

#	Трансформация фигуры в Ьбт1

р1об_ббч = 61д.бо_Ьбт1(би11_Нбт1=Еа1зе)

#	Создание объекта сопбехб

сопбехб = {'р1об_ббч': р1об_ббч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

Это представление для генерирования данных синусоиды и формирования палитры
цветов тепловой карты задействует дополнительную функцию збп(х).

Сначала с использованием библиотеки МитРу в нем генерируется массив данных х для
построения синусоиды:

х = пр.агапде(0, 9.5, 0.1)

Затем создается объект ббд (пустой макет), к которому добавлены данные (бгасе). При
формировании этих данных и нашла применение дополнительная функция збп() — на
ее основе получены данные для оси у (у=збп(х)) и сформирована палитра цветов для
тепловой карты (со1ог=збп(х)). Все параметры, связанные с тепловой картой, загружены
в свойство тагкег, которое имеет тип «словарь».
Далее создается пустой список фреймов (ггатез = []), который с использованием цикла
Гог заполняется данными. В теле цикла формируются данные для осей графика х и у, а
также цветовые данные для тепловой карты:

сПсГ(со1ог=51п(х[:1 + 1]), з1хе=25)

После чего с использованием метода Нд.Ггатез фреймы добавляются в макет графика:

Пд.Ггатез = Ггатез

На следующих шагах созданы элементы с описанием параметров графика (1ауоиг): заго-
ловок (ше), подписи для осей х и у, указано положение легенды и обязательность ее
вывода (зЬом1едепс1=тгие). Здесь же к элементам графика добавляется важный параметр
ирйагетепиз, представляющий список словарей, в которых заданы параметры кнопок
управления анимацией:

♦	словарь для задания положений кнопок в макете графика:

♦	словарь с параметрами кнопки запуска анимации;

♦	словарь с параметрами кнопки остановки анимации на паузу.

В Завершение Данные графика обнОВЛЯЮТСЯ В ОСНОВНОЙ фигуре (Нд.ирс1аГе_Ггасез).

После этого с использованием метода Пд.го ьгт! выполняется преобразование графика
в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сПу.

На заключительном этапе объект р1ог_сПу через словарь сопгехг передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
33. Анимация диаграмм на базе Егатез 20.

Синусоида на базе фреймов с кнопками проигрывай	И

У = БЙ1(Х)

Рис. 8.40. Анимация синусоиды с использованием фреймов и кнопок управления
Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.40.

Как здесь можно видеть, на графике отображена цветная синусоида с маркировкой зна-
чений в виде различных цветов. В нижней части макета имеются две кнопки: ► — для
запуска анимации и II — для остановки анимации на паузу. Рядом с графиком пока-
зана шкала тепловой карты с палитрой цветов, относящихся к различным значениям
синусоиды.

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

В предыдущем разделе был показан пример, в котором анимация запускалась и управ-
лялась с помощью кнопок. Здесь мы рассмотрим пример, демонстрирующий, как мож-
но управлять анимацией кнопками в сочетании со слайдером.

В качестве примера мы сформируем более сложный 2П-график, на котором выведем
значения двух функций: зт(х) и соз(х), кривые которых также построим по точкам,
связанным с тепловой картой. Управление анимацией будет осуществляться как с по-
мощью кнопок, так и с помощью слайдера.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графиков (листинг 8.103).

Листинг 8.103. Ссылка активации маршрута для формирования графиков

<	а ЬгеЕ=’’{% иг1 'тазбег:Егатез2_2В'%}" ТзагдеТз ="_Ыапк">34. Анимация диаграмм на базе Егатез
и слайдера 2В</а>

По ЭТОЙ ссылке будет активирован ИКЬ-маршруТ Егатез2_20 (листинг 8.104).

Листинг 8.104. 1Ж1_-маршрут Ггатез2_2О

#	2В-анимация на базе Егатез и слайдера

рабб('Егатез2_2В/', улемз.Егатез2_2В, пате='Егатез2_2В'),

По этому маршруту вызывается представление Егатез2_2о (листинг 8.105).

Листинг 8.105. Представление (у|е>/у) йа тез 22 О

#############

#	Функции #

##############

беЕ З1п(х):

гебигп пр.зЕп(х)

беЕ соз(х):

гебигп пр.соз(х)
#########################################

#	2В-анимация на базе Егатез и слайдера #

#########################################

НеЕ Егатез2_2В(гедиезб):

#	Начальные данные

х = пр.агапде(0, 9.5, 0.1)

#	Количество шагов (кадров) слайдера

пит_зберз = 1еп(х)

#	Создание фигуры (Ид) и заполнение данными

#	нулевого кадра для функций згп(х) и соз(х)

Ид = до.Ебдиге(баба=[до.Зсаббег(х=[х[0]],

у=[з1п(х)[0]],

тобе= ’ Ипез+тагкегз',

пате='у=з1п(х)',

тагкег=б1сб(со1ог=[з1п(х[0])],

со1огЬаг=сНсб(уапсйог='бор',

у=0.8,

б1б1е="Е(х)=х<зир>2</зир>"),

со1огзса1е=’1пЕегпо',
зПе=[15]
)

до.Зсаббег(х=[х[0]],

у=[соз(х)[0]],

тобе=’ Ипез+тагкегз',

пате='у=соз(х) ',

тагкег=б1сб(со1ог=[соз(х[0])],

со1огзса1е=’1пЕегпо',

зПе= [15]

)

)

]

)

#	Создание списка фреймов

Егатез = []

#	Создание списка фреймов и заполнение их данными

Еог 1 бп гапде(0, 1еп(х)):

Егатез.аррепЩдо.Егате (пате=збг (г),

баба=[до.Зсаббег(х=х[И +1],

у=з1п(х[:г + 1]),

тобе=’ Ипез+тагкегз',

пате=’у=з1п(х) ',

тагкег=сНсб(со1ог=з1п(х[:1 +1]),
со1огзса1е='ТпЕегпо',
з!ге=15)),
до.ЗсаРРег (х=х[ :1 + 1],
у=соз(х[:1 + 1]),
тобе=' Ипез+тагкегз',
пате='у=соз(х) ',
тагкег=сИсР (со1ог=соз(х[:1 + 1]),
со1огзса1е='ТпУегпо',
з1хе=15))

]))

зРерз = []

Рог 1 1п гапде(пит_зРерз):

зРер = сНсР(1аЬе1=зРг(1), теРПос1="ап1таРе", агдз= [ [зРг (1) ] ])
зРерз .аррепЩзРер)

зИбегз = [сНсР(

сиггепРча1ие={"ргеИх" : "Шаг №", "УопР": {"зУге": 20}}л

1еп=0.9,

х=0.1,

раб={"Ь": 10, "Р": 50},

зРерз=зРерз,

)]

У1д.ирбаРе_1ауоиР(Р1Р1е="Строим синус и косинус по шагам",

хах!з_Р1Р1е="0сь X",

уах!з_Р1Р1е="0сь У",

ирбаРетепиз= [сНсР (сНгесР1оп="1еУР",

раб={"г": 10, "Р": 80},

х=0.1,

хапсЬог="г1дЬР",

у=0,

уапсЬог="Рор",

зЬо'масР1че=Еа1зе,

Руре="ЬиРРопз",

ЬиРРопз=[сйсР(1аЬе!="►", теРНос1="апРтаРе", агдз=[Мопе, {"УготсиггепР": Тгие}]),
сНсР (1аЬе1=" II ", теРЬос!="ап1таРе",

агдз= [ [Мопе], {"Угате": {"с!игаР1оп": 0, "тескам": Га1зе},
"тос1е": "гттесНаРе",

"РгапзгРгоп" : {"сАигаРгоп": 0}}])])],
)

Ид.1ауоиР.зИс1егз = зИсАегз
Нд.Угатез = Угатез

#	Трансформация фигуры в ЬРт1

р1оР_сНу = Нд.Ро_ЬРт1 (Ти11_НРш1=Га1зе)

#	Создание объекта сопРехр

сопРехр = {’р1оР_сНу': р1оР_(Цу}

#	Передача сопРехр в шаблон

геРигп гепбег(гедиезР, "тазРег/д1ауа_8/зРаР_дга1_2В.ЬРт1", сопРехр)
Это представление для генерирования данных функций синуса и косинуса, а также для
формирования палитры цветов тепловой карты задействует дополнительные функции
31П(х) И соз(х).

Сначала с использованием библиотеки МитРу в нем генерируется массив данных х для
построения синусоиды и задается количество шагов слайдера:

х = пр.агапде(0, 9.5, 0.1)

пит_5Гер5 = 1еп(х)

Затем:

♦	создается объект Нд, к которому добавлены данные для нулевого кадра с использо-
ванием функций з1п(х) и соз (х). На основе этих функций получены данные для оси у:

У=[31П(Х)[0]
у=[соз(х)[0]

а также сформирована палитра цветов для тепловой карты этих двух функций:

СО1ОГ=[31П(х[0])]
со1ог=[соз(х[0])]

♦	все параметры, связанные с тепловой картой, загружаются в свойство тагкег, которое
имеет тип «словарь»;

♦	создается пустой список фреймов (ггашез = []), который с использованием цикла Гог
заполняется данными. В теле цикла формируются данные для осей графика х и у
двух функций:

у=31п(х[:1 + 1])
у=соз(х[:1 + 1])

а также задаются цветовые данные для тепловой карты:

сПсГ(со1ог=51п(х[:1 + 1])

сПсГ(со1ог=соз(х[:1 + 1])

♦	с помощью цикла Гог формируется список параметров каждого шага слайдера (зкерз)
и создается список самих сладов (зиаегз);

♦	создаются элементы с описанием параметров графика (1ауоиг): заголовок (Ш1е),
подписи для осей х и у, указано положение легенды и обязательность ее вывода
(зЬом1едепс1=тгие). Здесь же к элементам графика добавляется важный параметр
ирйакетепиз, представляющий список словарей, в которых заданы параметры кнопок
управления анимацией:

•	словарь для задания положений кнопок в макете графика:

•	словарь с параметрами кнопки запуска анимации;

•	словарь с параметрами кнопки остановки анимации на паузу.

♦	с использованием метода Пд.Тауоик.знаегз все слайды добавляются в макет графика:

Нд. Тауоик. зНйегз = зНйегз

♦	с помощью метода Нд.Ггатез фреймы добавляются в макет графика:

Нд.Ггатез = Ггатез
После этого с использованием метода Пд.го_ьоп1 выполняется преобразование графика
в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сИу.

На заключительном этапе объект р1ог_сИу через словарь сопгехг передается в шаблон
81а1_дга(_2с1.111т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
34. Анимация диаграмм на базе Егатез и слайдера 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.4Ь

Строим синус и косинус по шагам

у=51П.(х)

- - у=<оьГх)

Шаг №94
и

О 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 30 В5 90

Рис. 8.41. Анимация двух графиков с использованием фреймов, кнопок управления и слайдера

Как здесь можно видеть, на графике отображены два цветных графика с маркировкой
значений в виде маркеров различных цветов. В нижней части макета имеются две
кнопки: ► — для запуска анимации и 11 — для остановки анимации на паузу, а также
слайдер для управления фреймами. Рядом с графиками показана шкала тепловой карты
с палитрой цветов, относящихся к различным значениям фрагментов графиков.

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

Пузырьковую диаграмму также можно анимировать с использованием кнопок и слай-
дера, показав на ней динамику изменения данных в зависимости от выбранного пара-
метра.

В качестве примера сформируем пузырьковую диаграмму с анимацией на основе дан-
ных, загруженных из Интернета.

Для реализации этого примера нам понадобится создать несколько модулей, работаю-
щих в единой связке.
Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования диаграммы (листинг 8.106).

Листинг 8.106. Ссылка активации маршрута для построения диаграммы

<	а Ьгеб="{% игб 'тазбег:ЬиЬЬбе_6'%}" багдеб ="_Ыапк">35. Анимация пузьрьковой диаграммы 2Б</а>

По этой ссылке будет активирован ИКП-маршрут ЬиЬЫе б (листинг 8.107).

Листинг 8.107. ЫНЬ-маршрут ЬиЬЫе б

#	Пузьфьковая диаграмма с анимацией

рабЬ (' ЬиЬЫе_6/ ’, убемз. ЬиЬЬбе_6, пате=' ЬиЬЬбе_6'),

По этому маршруту вызывается представление ЬиЬЫе б (листинг 8.108).

Листинг 8.108. Представление (у1еу\л) ЬиЬЫе б

#	####################################

#	Пузьфьковая диаграмма с анимацией #

#	####################################

беб ЬиЬЫе_б (гедиезб) :

#	ПКЬ с данными из сети Интернет

игб = "Ьббрз: //гам. дббЬиЬизегсопбепб. сош/рбоббу/бабазебз /тазбег/дартбпбегБабаббуеУеаг. сзу"

#	Загрузка данных в объект бабазеб
бабазеб = рб.геаб_сзу(иг!)

#	Список - годы

уеагз = [”1952”, "1962", "1967", "1972", "1977",
"1982", "1987", "1992", "1997", "2002", "2007"]

#	Создание списка континентов
сопббпепбз = [ ]

бог сопббпепб бп бабазеб["сопббпепб"]:
бб сопббпепб поб бп сопббпепбз:
сопббпепбз.аррепб(сопббпепб)

#	Словарь с пустыми элементами диаграммы
ббд_ббсб = {

"баба": [],	# данные для диаграммы (список)

"бауоиб": {}, # Описание макета диаграммы (словарь)

"бгатез": []	# фреймы для анимации диаграммы (список)

}

#	Заполнение описания макета диаграммы

ббд_ббсб["бауоиб"]["хахбз"] = {"гапде": [30, 85],

"ббббе": "Ожидаемая продолжительность жизни"}

ббд_ббсб["бауоиб"]["уахбз"] = {"ббббе": "ВВП на душу населения", "буре": "бод"}

ббд_ббсб["бауоиб"]["Ьоуегтобе"] = "сбозезб"
ббд_ббсб["бауоиб"]["ирбабетепиз"] = [

{

’Ьиббопз": [
{"агдз": [Нопе, {"Ггаше": {"НигаЫоп": 500, "тескам": Га1зе},
"ГготсиггепГ": Тгие,
"ГтапзГЫоп": {"НитаЫоп": 300, "еазгпд": "диабгаЫс-Гп-оиб"}} ],
"1аЬе1": "Старт”,
"теСкюсТ: " апнпабе "},

{"агдз": [[Попе], {"Гтате": {"бигаЫоп": 0, "тескам": Га1зе},
"тобе": "ктесНабе",
"ГгапзГЫоп": {"бигаЫоп" : 0}} ],
"1аЬе1": "Пауза",
"теГЬосГ : "аптаСе"} ],
"скгесЫоп": "1еГГ",
"раб": {"г": 10, "Г": 87},
"зПомасТсгуе": Еа1зе,
"Гуре": "ЬиГГопз",
"х": 0.1,
"хапсЬог": "гГдЬГ",
"у": 0,
"уапсЬог": "Гор"
}
]

#	Словарь с параметрами слайдера
зИс1егз_сксГ = {
"асПче": 0,
"уапсЬог": "Гор",
"хапсЬог": "1еГГ",
"ситгепГча1ие": {

"ГопГ": {"З12е": 20},
"ртеПх": "Год:",
"ч1з1Ые": Тгие,
"хапсЬог": "ттдЬГ"
},
"ГтапзтЫоп": {"ЬитаЫоп": 300, "еазгпд": "сиЫс-гп-оиГ"},
"раб": {"Ь": 10, "Г": 50},
"1еп": 0.9,
"х": 0.1,
"у": 0,
"зГерз": []
}

#	Начальная дата слайдера
уеаг = 1952

#	Данные для графика в разрезе континентов
Гог сопЫпепГ 1п сопЫпепГз:

# Выбрать годы из НаГазеГ
НаГазеГ_Ъу_уеаг = НаГазеГ[НаГазеГ["уеаг"] == уеаг]
# Выбрать продолжительность жизни из НаГазеГ
баГазеГ_Ьу_уеаг_апб_сопГ = НаГазеГ_Ьу_уеаг[

НаГазеГ_Ьу_уеаг ["сопЫпепб"] == сопЫпепб]
# Формирование данных для диаграммы
Нака_Н1ск = {

"х": Изк(Наказек_Ьу_уеаг_апН_сопк ["ИкеЕхр"]), # Прод. жизни
"у”: Изк(Наказек_Ьу_уеаг_апН_сопк ["дфРегсар"]), # ВВП
"тоНе": "тагкегз",

"кехк": Изк(Наказек_Ьу_уеаг_апН_сопк ["соипкгу"]), # Страна
"тагкег": {

"зкгетоНе": "агеа",
"зНегек": 200000,
"зПе": Изк (Наказек_Ьу_уеаг_апН_сопк ["рор"])
},
"пате”: сопккпепк
}
# Заполнение словаря с данными для диаграммы
ккд_Н1ск ["Нака” ] . аррепН (Нака_Н1ск)

# Создание фреймов

Вог уеаг 1п уеагз:
кгате = {"Нака”: [], "пате": зкг(уеаг)}
ког сопккпепк 1п сопккпепкз:

Наказек_Ьу_уеаг = Наказек[Наказек["уеаг"] == гпк(уеаг)]
Наказек_Ьу_уеаг_апН_сопк = Наказек_Ьу_уеаг[

Наказек_Ьу_уеаг["сопккпепк"] == сопккпепк]

Нака_Нкск = {

"х": ккзк (Наказек_Ьу_уеаг_апН_сопк [ "ИкеЕхр"]),

"у": ккзк(Наказек_Ьу_уеаг_апН_сопк["дНрРегсар"]),
"тоНе": "тагкегз",

"кехк": ккзк(Наказек_Ьу_уеаг_апН_сопк["соипкгу"]),
"тагкег": {

"зкгетоНе": "агеа",
"зПегек": 200000,
"з12е": Изк(Наказек_Ьу_уеаг_апН_сопк["рор"])
}г
"пате": сопкФпепк
}

кгате["Нака"].аррепН(Нака_Н1ск)

#	Заполнение словаря фреймами для диаграммы
В1д_Н1ск["кгатез"].аррепН(кгате)

зИНег_зкер = {"агдз": [

[уеаг],

{"кгате": {"НигакФоп": 300, "геНгам": Га1зе],

"тоНе ": " ллтеНФаке ",
"кгапзкккоп": {"Нигакгоп": 300}}
],
"1аЬе1": уеаг,
"текЬоН": "апФтаке"}

#	Заполнение словаря с шагами слайдера
з11Негз_Н1ск ["зкерз"] .аррепН(зИНег_зкер)
#	Дополнение диаграммы словарем слайдера
ббд_ббсб["бауоиб”] ["збббегз"] = [з!ббегз_ббсб]

#	Создание фигуры (диаграммы)

ббд = до.Гбдиге(ббд_ббсб)

#	Добавление заголовка к диаграмме

ббд.ирбабе_бауоиб(ббббе="Пузырьковая диаграмма с анимацией”)

#	Трансформация фигуры в Ьбтб

р!об_ббч = ббд.бо_Ьбтб (биб1_Нбтб=Габзе)

#	Создание объекта сопбехб

сопбехб = {'рбоб_ббч': р!об_ббч}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбтб", сопбехб)

Программный код этого модуля довольно сложный, но стоит потратить время и силы,
чтобы разобраться с его фрагментами и получить возможность создавать эффектные
динамичные анимированные диаграммы. Обратите внимание, что для работы модуля
нужно обязательно подключить библиотеки рапбаз и 8к1ша§е:
бтрогб рапбаз аз рб
бгот зкбтаде бтрогб б о

Здесь библиотека 8кппа§е используется для загрузки удаленных данных из Интернета,
а библиотека рапбаз — для выборки информации из наборов данных бабазеб. В этом
примере задействован готовый набор данных, который приведен в документации на
библиотеку р1оИу (связь между ожидаемой продолжительностью жизни и ВВП на душу
населения в различные годы).

Внимание!

К использованию библиотеки 8к1таде следует подходить с осторожностью. Она прекрасно
работает на локальном сервере разработчика, но может отказаться работать после развер-
тывания приложения на публичном сервере АрасЬе. Автор столкнулся с этой проблемой,
как и многие другие разработчики. Наличие строки бгот зкбтаде бтрогб бо просто «обвали-
вает» всё приложение без диагностических сообщений, и даже администраторы серверной
площадки порой не могут найти причину такого сбоя.

Итак, в представлении ЬиЬЬбе б:

♦	с удаленного сервера скачан файл формата С8У с необходимыми данными, которые
загружены в объект бабазеб:

бабазеб = рб.геаб_сзч(игб)

♦	создан СПИСОК ИЗ 11 элементов уеагз (годы);

♦	создан пустой список континентов (сопббпепбз = [ ]), который с использованием цикла
бог заполнен данными из объекта бабазеб;

♦	создан словарь со следующими пустыми элементами диаграммы:

•	"баба": [ ] — данные для диаграммы (список);

•	"бауоиб": {} — описание макета диаграммы (словарь);

•	"бгатез": [] — фреймы для анимации диаграммы (список);
♦ выполняется заполнение описания макета диаграммы с определением следующих
параметров макета:

•	интервала значений и подписи для оси х;

•	подписи для оси у;

•	кнопки управления анимацией;

•	ряда других;

♦	формируется словарь с параметрами слайдера (зиаегз сПс^) и задается начальное
положение бегунка слайдера (уеаг = 1952);

♦	с использованием цикла Гог из объекта йатазет выбирается информация для диаграм-
мы (с1а5азе5_Ьу_уеаг, с1аТа8еТ_Ьу_уеаг_апс1_сопТ), которая передается В СЛОВарЬ (с!аТа_с11сТ),
определяются данные для осей хи у, задаются параметры для маркеров диаграммы;

♦	с помощью двух вложенных циклов на основе списка годов (уеагз) и списка конти-
нентов (сопЫпептз) создается набор фреймов, которые сохраняются в словаре
Нд_сИсТ:

Г1д_сПсГ[’’Ггатез’’] .аррепс! (1гате)

Здесь же происходит заполнение словаря с шагами слайдера:

зИс1егз_с11с^ ["зЬэрз"] .аррепс!(з11с1ег_з11ер)

♦	после завершения работы этих двух циклов диаграмма дополняется словарем с па-
раметрами слайдера:

Нд_сПсТ["ТауоиТ"] ["зИйегз"] = [зИс1егз_с11с1:]

♦	на основе собранного на предыдущих этапах списка словарей Пд_сПст создается объ-
ект Ид (фигура, диаграмма) и к диаграмме добавляется заголовок:

Нд = до.Пдиге(Нд_(ПсС)

Нд.ирс1аТе_1ауоиТ (Т1Т1е="Пузырьковая диаграмма с анимацией”)

После этого с использованием метода Нд.ро_ьш. выполняется преобразование графика
в формат НТМЕ и результаты преобразования сохраняются в объекте р1оГ_сПу.

На заключительном этапе объект р1от_сНу через словарь соптехт передается в шаблон
81а1_дга1:_2сШт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
35. Анимация пузырьковой диаграммы 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.42.

Как здесь можно видеть, на графике отображены данные в виде маркеров различных
размеров и цветов. Маркеры находятся на разных уровнях, при этом цвет каждого мар-
кера соответствует континенту, указанному в легенде к диаграмме. Под диаграммой
расположены две кнопки: Старт и Пауза — предназначенные для запуска и приоста-
новки анимации. Рядом с кнопками приведена шкала слайдера с бегунком, который
позволяет анимировать диаграмму вручную путем перемещения бегунка с помощью
указателя мыши.

При загрузке этой НТМЬ-страницы анимация запускается автоматически — при этом
на диаграмме меняется как положение цветных маркеров, так и их размеры. Если на-
вести указатель мыши на маркер, появится всплывающая подсказка, в которой указано:
название континента, название страны, ожидаемая продолжительность жизни и ВВП на
душу населения (рис. 8.43).

Анимацию можно запустить кнопкой Старт и приостановить копкой Пауза. Бегунок
слайдера можно «зацепить» указателем мыши и перемещать по шкале с указанием

Рис. 8.42. Пузырьковая диаграмма с анимацией

Юк

тооа

НЮк

Пузырьковая диаграмма с анимацией

Ф Азга
О Еигсре
А/гка
АгпеисэЕ
Осеата

70	80

Ожидаемая продолжительность жизни

за

Год:2007

Старт Пауза 11111111111
1952	1962	1967	1972	1977	1982	1987	1992	1997	2002	2007

Рис. 8.43. Пузырьковая диаграмма с дополнительной информацией на выделенном маркере
годов. При этом в зависимости от выбранного года будет меняться как положение мар-
керов на диаграмме, так и их размер в соответствии с той информацией, которая со-
держится в С8У-файле с данными.

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

Визуализация данных может быть чрезвычайно важна и полезна в области медицины.
В этом разделе мы рассмотрим, как можно использовать визуализацию данных при
анализе снимков МРТ.

Магнитно-резонансная томография (МРТ)

МРТ — широко используемый метод медицинской визуализации, позволяющий получать
подробные изображения внутренних структур человеческого тела. Визуализация данных
МРТ может помочь врачам обнаружить следующие признаки болезней:

•	изменения анатомических структур внутренних органов;

•	изменение состава тканей;

•	потенциальные аномалии в тех или иных органах.

В этом примере снимки МРТ мы загрузим с удаленного сервера в Интернете и пока-
жем, как можно создать послойную анимацию срезов МРТ.

Для реализации примера нам понадобится создать несколько модулей, работающих
в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования визуализации (листинг 8.109).

Листинг 8.109. Ссылка активации маршрута для формирования визуализации

<а ИгеР="{% иг1 'тазРег:тгР_ЗР'%}" РагдеР ="_Ыапк">36. Анимация медицинских данных (МРТ) ЗР</а>

По этой ссылке будет активирован ИКЪ-маршрут шгр_зр (листинг 8.110).

Листинг 8.110. 11К1_-маршрут тг!_ЗО

# ЗР-анимация медицинских данных - МРТ
раРЬ ('тгР_ЗР/ ’, уЧемз .тгР_ЗР, пате='тгР_ЗР'),

По этому маршруту вызывается представление шгр_зр (листинг 8.111).

Листинг 8.111. Представление (у1еллл) тН_ЗО

########################################
# ЗР-анимация медицинских данных - МРТ #
########################################
сТеТ тгР_ЗР(гедиезР) :

Ргот РЧТРРПе Чтрогр РЧГРРПе

#	Чтение данных из сети Интернет

#	уо1 = То. Чтгеас1("ЬРРрз://з3.ата2опамз.сот/аззеРз.с1аРасатр.сот/Ыод_аззеРз/аРРепР1оп-тг1.Р1Р")

#	Чтение данных из локального файла в мЧпс1ом8

#	уо1 = Чо.тгеасЦ ’ зРаРЧс/тазРег/шадез/аРРепРйоп-тгй. РТР’)
#	Загрузить локальный файл СЗУ в мгпбомз и Иных

РбРепате = РаРЬ (тесНа_сНг + "тазРег/Ртадез/аРРепРРоп-тгР.Р1Р")

чо! = РРРРРРРе.Ртгеаб(РРРепате)

чоРите = чоР.Т

#	Размерность массива данных (г - кол-во строк, с - кол-во столбцов)
г, с = чоРите[0].зЬаре

#	Задание количества фреймов
пЬ_Ргатез = 68

#	Создание фреймов с данными для ЗР-графика (фигуры)
РРд = до.Идите (

Ргатез=[до.Егате(баРа=до.ЗигРасе(

г=(6.7 - к * 0.1) * пр.опез((г, с)),

зигРасесоРог=пр. РРРриб (чоРите [67 -к]),

стРп=0, стах=200),
пате=зРг(к)) Рог к бп гапде(пЬ_Ргатез)])

#	Добавление трассы (данных)

Ид. абб_Ргасе (до. Зиг Расе (

2=6.7 * пр.опез((г, с)),

зигРасесо1ог=пр. РРйриб (чоРите [ 67 ]),

со1огзса1е='Сгау',

стРп= 0, стах=2 0 0,

соРогЬаг=бРсР (РЫскпезз=20, РбскРеп=4)
))

#	Функция для задания параметров фреймам (слайдам)

беР Ргате_агдз(бигаРбоп):
гебигп {

"Ргате”: {"бигаРбоп”: бигаРбоп},

"тобе": "бготеббаРе",

"РготсиггепР”: Тгие,

"РгапзРРРоп”: {"бигаРбоп": бигаРбоп, "еазапд": "РРпеаг”},
}

#	Создание списка слайдов (шагов слайдера)
зРРбегз = [

{"раб": {"Ь": Р0, "Р": 60},

”Реп”: 0.9,

"х”: 0.Р,

"у”: 0,

"зРерз": [

{"агдз": [[Р.пате], Ргате_агдз(0)],

"РаЬеР": зРг(к),
"теРЬоб": "апРтаРе”, }

Рог к, Р Фп епитегаРе(Ргд.Ргатез) ], }
#	Формирование элементов макета
ббд. ирбабе_1ауоиб (

ббб1е=’Анимация срезов снимков МРТ',
мбс!бЬ=800,
ЬебдЬб=800,
зсепе=сНсЁ(

2ахбз=ббсб(гапде= [-0.1, 6.8], аибогапде=Га1зе),
азресбгаббо=с!бсб (х=1, у=1, х=1), ),
ирбабетепиз= [
{"Ьиббопз": [

{"агдз": [Попе, бгате_агдз(50)],

”1аЬе1”: ”&#9654;”, # Символ для кнопки р!ау

"тебЬосГ: "апбтабе", },

{"агдз": [[Попе], бгате_агдз(0)],

"1аЬе1": "&#9724;", # Символ для кнопки раизе

"тебЬосГ: "апбтабе", }, ],
"йбгесббоп": "1ебб",
"рай": {"г": 10, "б": 70},
"буре": "Ьиббопз",
"х": 0.1,
"у": 0, }
Ь
з1бйегз=з1бйегз
)

#	Трансформация фигуры в Ьбтб

р1об_йбч = Гйд.бо_Ьбт1 (1и11_Ьбт1=Га1зе)
# Создание объекта сопбехб
сопбехб = {'р1об_йбч': р1об_йбч}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Ьбт1", сопбехб)

Программный код этого модуля довольно сложный, но стоит потратить время и силы,
чтобы разобраться с его фрагментами и получить возможность создавать эффектные
динамичные анимированные трехмерные диаграммы. Обратите внимание, что для
работы модуля можно подключить библиотеку 8к1ша§е:
бгот зкбтаде бтрогб б о

С использованием этой библиотеки можно было бы выполнять загрузку и чтение уда-
ленных данных из Интернета, однако в рассматриваемом модуле эта возможность ис-
ключена. Дело в том, что библиотека 8кппа§е прекрасно работает на локальном сервере
разработчика, однако может отказаться работать на публичном сервере Арасйе. Исходя
из этого, в нашем модуле для чтения файла формата Т1Р используется пакет бйТШе.

Итак, в представлении тгб_зо:

♦	из каталога тесЛа сервера загружен файл айепйоп-тп.йТ (графический контейнер,
хранящий растровые изображения);

♦	определена размерность массива данных и задано количество фреймов (пь_бгатез=б8);
♦	с использованием метода до.Пдиге создан объект Пд, в который загружено 68 фрей-
мов (с индексами от 0 до 67);

♦	к объекту Пд добавлен список трасс (ггасе);

♦	определена функция <1ег Ггал1е_агдз(), которая необходима для задания параметров
фреймам (слайдам). Эта функция используется в следующей за ней группе инструк-
ций, создающих список слайдов, или шагов слайдера (зпаегз);

♦	формируется набор параметров ЗЭ-ДИаграммы (Пд.ирс1аГе_1ауоиГ):

•	Ше — заголовок макета;

•	м1со — ширина макета;

•	Ье1дьг — высота макета;

•	зсепе — параметры сцены (трехмерного куба);

•	ирйагетепиз — кнопки управления анимацией и их положение;

•	зиаегз — слайдер со слайдами.

После этого с использованием метода ПдЛо_ьш1 выполняется преобразование графика
в формат НТМЬ и результаты преобразования сохраняются в объекте р1ог_сИу.

2оа

Анимация срезов снимков МРТ

зз

О 3	6 9 12 15 13 21 24 27 30 33 36 39 42 45 48 51 54 57 60 63 66

Рис. 8.44. Анимация медицинских данных (срезы снимков МРТ в формате 30)
На заключительном этапе объект р1оо_сПч через словарь сопрехо передается в шаблон
§1а1:_дгаТ_2с1.Мт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
36. Аанимация медицинских данных (МРТ) зб

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.44.

Как здесь можно видеть, на графике отображена трехмерная пространственная диа-
грамма со снимками срезов головного мозга. Пользователь, используя мышь, может
поворачивать куб со снимками в любой плоскости и масштабировать изображение. Под
диаграммой расположены две кнопки, предназначенные для запуска и приостановки
анимации. Рядом с кнопками приведена шкала слайдера с бегунком, который позволяет
анимировать диаграмму вручную путем перемещения бегунка с помощью указателя
мыши, при этом будут отображаться снимки головного мозга в разных слоях.

8.3.11. Географические карты

с анимацией данных пользовательских форм

В примере, приведенном в разд. 8.1.15, на карте отображались города — т. е. стацио-
нарные объекты. Но на карте можно отображать и динамичные объекты — на основе
данных, которые вводит пользователь.

В этом примере мы будем строить маршруты полета воздушного транспорта между
различными городами России и определять расстояния между городами, для чего нам
потребуется создать несколько модулей, работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования карты (листинг 8.112).

Листинг 8.112. Ссылка активации маршрута для формирования карты

<	а ЬгеО=’’{% иг1 'тазкег:тар_2'%}" Рагдек ="_Ыапк">37. Анимация данных на географических картах
20</а>

По этой ссылке будет активирован ИКЕ-маршрут тар_2 (листинг 8.113).

Листинг 8.113. ЫНЬ-маршрут тар_2

#	20-карта, воздушная трасса

ракк (’ тар_2 /', чФемз. тар_2, пате=' тар_2'),

По этому маршруту вызывается представление тар_2, однако для его работы нам пона-
добится форма для ввода данных о трассе полета (листинг 8.114).

Листинг 8.114. Форма для ввода данных о трассе полета ТгазЕогт

###########################

#	Форма для трассы полета #

###########################
сЕазз ТгазЕогт(Еогтз .Еогт) :

з = Еогтз.СкагЕ1е1с1(1аЬе1= 'Начало маршрута:', геди!гес1=Еа1зе)

Е = Еогтз.СЬагЕ1е1с1(1аЬе1='Конец маршрута:', гедиЕгес!=Еа1зе)

Будет нужна нам и функция кт, обеспечивающая расчет расстояния между городами.

Код этой функции и представления тар_2 приведен в листинге 8.115.

Листинг 8.115. Представление (у!еуу) тар_2

#	############################

#	Расстояние между городами #
#############################
беЕ кт(1аЕ1, 1ак2, 1оп1, 1оп2):

#	Расстояние между городами

а = аЬз(1аЕ1 - 1аЕ2) * 111.16

#	ргФпк('Широта1=', 1аЕ1, 1ак2, ’ а=', а)

б_1оп = аЬз(1оп1 - 1оп2)

т!п_1аЕ = ш1п(1аЕ1, 1аЕ2)
т!п_1аЕ = такЬ.габФапз (т!п_1аЕ)

#	ргФпк ('т!п_1оп=', т!п_1ак, 'б_1оп=', б_1оп)

Ь = б_1оп * 111.3 * такЬ.соз(т!п_1ак)

#	ргФпк('Долгота1=', 1оп1, 1оп2, 'Ь=', Ь)

г = 6400

с = такЬ.здгк ((а /г) ** 2 + (Ь / г) ** 2) * г

#	ргФпк(' с=', с)
гекигп с

##############################

# 2Б-карта, воздушная трасса #
##############################

беЕ тар_2(гедиезк):

#	Загрузить локальный файл СЗУ в нФпбоиз и Ипих
ЕНепаше = РаЕЕ (тесИа_с11г + "тазкег/сзч/с1Еу_1.сзч")
сФЕФез = рб.геаб_сзч(ЕПепате)

#	Старт и финиш полета
зкагк, Егпгзй = 'Москва', 'Санкт-Петербург'

#	Создание фигуры (карты)

ЕФд = до.Г1диге(до.ЗсаккегтарЬои(1едепс1дгоир="дгоир",
1ак=с1к1ез['део_1ак'],
1оп=с1к1ез['део_1оп'],
кехк=с1к!ез[’сшку'],
пате='Города'
))

#	возврат после ввода данных

ФЕ гедиезк.теккоб == "РОЗТ”:

# Создание формы для получения данных
Еогт = ТгазГогт(гедиезк.РОЗТ)

1Е Еогт.1з_чаНс1() ;

#	Получение данных о начале и конце маршрута
збагб = богт. с1еапе6_6аба [' з' ]

ббпбзЬ = 6огт.с1еапе6_6аба[ 'б' ]

#	Добавление трассы (данных маршрута полета)

ббд.а66_бгасе (до.ЗсаббегтарЬох(1едеп6дгоир="дгоир",

то6е="Ипез",

Ьочег1пбо='зкбр',

пате='Трасса',

1аб=с1б1ез [сбббез [ 'сббу' ] .бзбп ([збагб, ббпбзк]) ] [ 'део_1аб' ],
1оп=с1б1ез [сбббез [' сббу' ] . 1з1п ([збагб, ббпбзк]) ] [ 'део_1оп' ]))

#	Определение центра карты

тар_сепбег = до.Тауоиб.тарЬох.Сепбег(1аб=(сбббез['део_1аб'].тах() + сбббез['део_1аб'].тбп()) / 2,
1оп=(сбббез['део_1оп'].тах() + сбббез['део_1оп'].тбп()) / 2)

#	Проверка корректности названия города

1аб_1 = сбббез[сбббез['сббу'].1з1п([збагб])]['део_1аб']

1аб_2 = сбббез[сбббез['сббу'].бзбп([ббпбзк])]['део_1аб']

1оп_1 = сбббез[сбббез['сббу'].1з1п([збагб])]['део_1оп']

1оп_2 = сбббез[сбббез['сббу'].1з1п([ббпбзк])][’део_1оп’]

з1	= 1аб_1.етрбу

з2	= 1аб_2.етрбу

с11 = 1оп_1.епрбу

62	= 1оп_2.етрбу

бб (з1 бз Тгие) ог (з2 бз Тгие) ог (61 бз Тгие) ог (62 бз Тгие):

с = 'Город не найден' # Если город не найден в списке городов

е1зе:

#	Расчет расстояния между городами

1аб1, 1аб2 = сбббез[сбббез['сббу'].бзбп([збагб, ббпбзк]) ] [ 'део_1аб' ]

1оп1, 1оп2 = сбббез[сбббез['сббу'].бзбп([збагб, ббпбзк]) ] [ 'део_1оп' ]

с = кт(1аб1, 1аб2, 1оп1, 1оп2)

с = гоип6(с, 2)

#	Добавить описание к графику

6бд.ир6абе_1ауоиб(

б1б1е='Маршрут полета на самолете из г.'

+ збагб + ’ до г. ' + ГбпбзЬ + ', расстояние-' + збг(с) + ' км',

тарЬох_збу1е="ореп-збгееб-тар",

тарЬох=6бсб(сепбег=тар_сепбег, соот=2.7),

И166Ь=15ОО, ЬебдЬб=900,

тагдбп=6бсб(1=10, г=10, 6=50, Ь=10))

#	Трансформация фигуры в Ьбт1

р1об_61У = 61д.6о_Ьбт1 (6и11_Ы:т1=Га1зе)

#	Данные для формы

6аба_1 = {'з': збагб, '6': ббпбзй}

#	Создание формы для ввода данных

богт = ТгазГогт(6аба=6аба_1)

#	Создание объекта сопбехб

сопбехб = {'р1об_61ч': р1об_61ч, 'богт': богт, 'с': с}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/тар_2.Ьбт1", сопбехб)
е1зе:

#	Добавление трассы (данных маршрута полета)

ббд. абб_бгасе (до. ЗсаббегтарЬох (1едепбдгоир="дгоир",

тобе="Ипез",

Ьочегбп6о='зкбр',

пате='Трасса',

1аб=с161ез [сбббез [ ’сИсу’ ] . 1з1п ([збагб, ббпбзк]) ] [ 'део_1аб' ],

1оп=с1б1ез[сбббез['сббу'].бзбп([збагб, ббпбзк])]['део_1оп']))

#	Определение центра карты

тар_сепбег = до.1ауоиб.тарЬох.Сепбег(1аб=(сбббез['део_1аб'],тах() + сбббез['део_1аб'].тбп()) / 2,
1оп=(сбббез['део_1оп'].тах() + сбббез['део_1оп'].тбп()) / 3)

#	Расчет расстояния между городами

1аб1, 1аб2 = сбббез[сбббез['сббу'].бзбп([збагб, ббпбзк])]['део_1аб']

1оп1, 1оп2 = сбббез[сбббез['сббу'].бзбп([збагб, ббпбзк])]['део_1оп']
с = кш(1аб1, 1аб2, 1оп1, 1оп2)

с = гоипЩс, 2)

#	Добавить описание к графику

ббд.ирбабе_1ауоиб(

ббб1е=’Маршрут полета на самолете из г.' + збагб + ' до г. ' + ббпбзк
+ ', расстояние-' + збг(с) + ' км',

тарЬох_5бу1е="ореп-5бгееб-тар",

тарЬох=с!бсб(сепбег=тар_сепбег, соот=2.8),

и1ббб=1500, Небдкб=900,

тагдбп=с!бсб (1=10, г=10, 6=50, Ь=10))

#	Трансформация фигуры в Н6т1

р1об_б1ч = 6бд.бо_Нбт1 (6и11_Нбт1=Еа1зе)

#	Данные для формы

баба_1 = {'з': збагб, ’Г': ббпбзЬ}

#	Создание формы для ввода данных

богт = ТгазЕопп(с1аба=с1аба_1)

#	Создание объекта сопбехб

сопбехб = {' р1об_с11ч': р1об_сНу, 'богт': богт, 'с': с}

#	Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/тар_2.Ьбт1", сопбехб)

Обратите внимание, что для работы этого модуля нужно обязательно подключить биб-
лиотеку рапбаз (она необходима для загрузки файла формата С8У из каталога тесЛа):

лпрогк рапсбаз аз рб

В представлении шар_2:

♦	с использованием библиотеки рапбаз данные из локального каталога загружаются
в объект сПлез (города);

♦	создаются два объекта: зсагс и Нп1зЬ, в которые записываются названия городов
начальной и конечной точек маршрута;

♦	с помощью метода до.Пдиге создается объект ббд (в нашем случае карта), в который
загружаются данные о городах из объекта сПДез:
•	1а^=с1^1ез [' део_1аг' ] — широта расположения города;

•	1оп=с1^1ез [' део_1оп' ] — долгота расположения города;

•	ихт=сШез [ ’ с1ёу ' ] — название города;

•	пате=' Города ’ — легенда;

♦	с использованием инструкции и в программе организуется разветвление: если усло-
вие в инструкции 1г не соблюдается (от пользователя поступил ОЕТ-запрос), то
объект Нд дополняется данными о маршруте полета (пд.ааа ггасе). Здесь, по сути,
вводятся координаты городов начала и конца маршрута:

1аГ=с1Г1ез[с1Г1ез[’с1Гу’]•1з1п([зГагГ, Пп1зИ])]['део_1аГ']

1оп=с1Г1ез [сШез [ ’ с1Гу' ] . 1з1п ([зкагк, НгпзЬ]) ] [' део_1оп' ]

♦	в объект тар сепгег записываются координаты центра карты (координата карты, ко-
торая будет показана в центре макета) и с помошью функции кт выполняется расчет
расстояния между городами (по умолчанию будет рассчитано расстояние между
городами Москва и Санкт-Петербург);

♦	создаются элементы с описанием параметров макета (1ауоик):

•	Ш1е — заголовок макета;

•	тарЪох_зку1е="ореп-зкгеег-шар" — подключение карты Ореп81гее1Мар;

•	тарЬох=сИсС(сепкег^пар_сепгег< гоот=2) — указание центра карты и масштаба увели-
чения;

•	м1сО=150о, Ье1дьг=юоо — ширина и высота макета;

•	тагд1п — отступы от границ макета.

После этого с использованием метода Пдло ьгт! выполняется преобразование карты
в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сПу.

На заключительном этапе объект р1ок_сПу через словарь сопкехк передается в шаблон
81а1_дга(_2с1.К1т1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
37. Анимация данных на географических картах 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.45.

Как здесь можно видеть, на карте красным цветом показан маршрут полета в виде пря-
мой линии, а в заголовке макета выведены названия городов и расстояние между ними.

Примечание

Реальный коридор полета между городами Москва и Санкт-Петербург может отличаться от
маршрута, приведенного на карте, но он будет близок к результату, показанному в этом
учебном примере.

В верхней части НТМЕ-страницы присутствует форма с названиями городов начала
и конца маршрута. В эту форму пользователь может ввести названия других городов и
Визуализация данных в В] апдо

нажать на кнопку Обновить — в результате произойдет обращение к представлению
тар 2 уже в виде РО8Т-запроса. При этом условие инструкции и будет выполнено:

1Г гедиезГ.теГЪос! == "РОЗТ":

и программа получит данные, введенные пользователем (названия других городов).

Рис. 8.45. Фрагмент карты с маршрутом полета между городами Москва и Санкт-Петербург

Это вызовет выполнение действий, аналогичных тем, которые были выполнены при
поступлении СгЕТ-запроса: получение координат городов начала и конца маршрута,
передача этих данных объекту Пд, определение нового положения центра карты и т. д.
Единственное отличие определяет фрагмент программного кода с обращением к функ-
ции расчета расстояния между городами. И если пользователь сделает ошибку в наиме-
новании города или укажет город, координат которого нет на карте, то расчет расстоя-
ния между городами выполнен не будет.

Предположим, что пользователь в качестве начальной и конечной точек маршрута ука-
зал города Москва и Казань. В этом случае будет получен следующий результат
(рис. 8.46).
Рис. 8.46. Фрагмент карты с маршрутом полета между городами Москва и Казань

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

Географические карты могут содержать интерактивные элементы, которые можно
«оживить» с использованием кнопок и слайдера.

В этом примере мы построим анимированный маршрут движения пассажирского поез-
да из Москвы в Санкт-Петербург, для чего нам потребуется создать несколько модулей,
работающих в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования карты (листинг 8.116).

Листинг 8.116. Ссылка активации маршрута для построения карты

<	а Ь.геТ="{% иг1 'шазбег:бга!п'%}" ТзагдеТз ="_Ь1апк">38. Анимация объектов на географических картах
20</а>

По этой ссылке будет активирован ИКЬ-маршрут ггабп (листинг 8.117).

Листинг 8.117. 11К1_-маршрут 1га т

#	20-карта с элементами анимации

рабЬ(’ГгаФп/', чбемз.ГгаФп, паше=1Огабп1),

По этому маршруту вызывается представление ггабп (листинг 8.118).

Листинг 8.118. Представление (у|е>/у) тар_2

#	#################################

#	2Б-карта с элементами анимации #
##################################
беб бгабп(гедиезб):

#	Загрузить локальный файл СЗУ в ибпбоиз и 1бпцх
бббепате = РабН (тебба_ббг + "тазбег/сзу/сббу_1.сзу")
сбббез = рб.геаб_сзу(бб!епате)

#	Загрузить данные о маршруте движения из локального файла сзу
бббепате = РабН (тебба_ббг + "тазбег/сзу/бгабп_гиззба.зсу.бхб")
бгабп_гиззба = рб.геаб_сзу(бббепате)

#	Данные о города?: для карты из объекта сбббез
баба = [до.ЗсаббегтарЬох(1едепбдгоир="дгоир",
пате='Города России',
1аб=сбббез[*део_1аб' ],
1оп=сбббез['део_1оп'],
бехб=сбббез['сббу' ],
)]

#	Данные о перемещении объекта по маршруту из объекта бгабп_гиззба
саз = О

Гог бб бп бгабп_гиззба.дгоирЬу(['Ноиг']):
саз = саз + 1

баба. аррепб (до. ЗсаббеппарЬох (убзбЫе=Габзе,
пате='Час-' + збг(саз),
тобе="1бпез",

Тбпе=ббсб (со!ог=' геб', мбббН=4),
Ьоуегбпбо='зкбр',
1аб=бб[1]['део_1аб'],

Топ=бб[ 1 ] ['део_1оп']))

#	Создание фигуры (карты)
ббд = до.Гбдиге (баба)

#	Создание фреймов для анимации движения поезда
бгатез = []

бог б бп гапде(1еп(баба) + 1):

бетр_бгате = до.Ггате(пате=збг(б), баба=баба)

бог з бп гапде(1, б):
бетр_бдате['баба'][]]['убзбЬбе'] = Тгие

бдатез.аррепб(бетр_бгате)

#	Формирование шагов изменения положения слайдера
зберз = []

бог б бп гапде(Теп(баба)):
збер = ббсб(

1аЬеб=збг (б),
теббюб="апбтабе",
агдз=[[збг(б + 1)]]
)

зберз.аррепб(збер)

#	Параметры слайдера
зТббегз = [ббсб(

сиггепбуабие={"ргеббх": "Часы-", "бопб": {"збте": 20}},
1еп=0.9,
х=0.1,
раб={"1": О, "Ь": 10, "б": 50},
зберз=зберз,
)]

#	При первой загрузке фигуры в центре карты координаты города Тверь
тар_сепбег = до.1ауоиб.тарЬох.Сепбег(1аб=56.8586059, 1оп=35.9116761)

#	Параметры макета карты

Г1д.ирс1абе_1ауоиб (б1б1е=’Поездка на поезде',

1едепб_ог1епбаб1оп="й",

тарЬох_з б у 1 е=" оре п - 5 0 г е е б -тар ",

тарЬох=б!сб(сепбег=тар_сепбег, соот=5),
и1с11±=1500, Не1дйб=850,
тагд1п=сПсб (1=10, г=10, 0=50, Ь=10), # положение макета графика
ирбабетепиз= [ сПсб (сП гесб!оп="1ебб",
раб={"г": 10, "О": 80}, # Положение кнопки (отступы)
х=0.1,
хапсбюг="г1дйб",
у=0,
уапсбюг="бор",
збюиасб1че=Га1зе,
буре="Ьиббопз",
Ьи00оп5=[(Ис0(1аЬе1=’>", шебйос1="ап1табе", агдз=[Ыопе, {"бготсиггепб": Тгие}]),
сПсб (1аЬе1=" II ", тебйос1="ап1табе",

агдз=[ [Иопе], {"Огате": {"бигабФоп": 0, "гебгаи": Га1зе},
"тос!е": "ФттесПаОе",
"бгапзгбгоп": {"бигабгоп": 0}}])])],

)

#	Задание положения легенды

б!д.ирбабе_1ауоиб(1едепб=б1сб(х=0.2, у=1.05))

#	Подключение к фигуре слайдера
ббдЛауоиб.зИбегз = зИбегз

#	Подключение к фигуре фреймов
ббд.бгатез = бгатез

#	Трансформация фигуры в Нбт1
р1об_б!ч = б1д.бо_йбт1 (би11_йбт1=Га1зе)
# Создание объекта сопбехб
сопбехб = {’р1об_сПу': р1об_б!ч}
# Передача сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_8/збаб_дгаб_2В.Нбт1", сопбехб)

Обратите внимание, что для работы этого модуля нужно обязательно подключить биб-
лиотеку рапбаз (она необходима для загрузки файла формата С8У из каталога тесЛа):
трогГ рапбаз аз рс!

В представлении ггабп:

♦	с использованием библиотеки рапбаз данные из локального каталога загружаются
в два объекта: сШез (города) и ггабп гиззба (маршрут поезда «Москва — Санкт-Пе-
тербург»);
Пояснение

Файл 1га1п_ги88!а.8су.1х1 (описание маршрута поезда) содержит всего 4 колонки: Ьоиг (теку-
щий час), с!Гу (город при движении по маршруту), део_1аг (широта города на карте), део_1оп
(долгота города на карте).

♦	создается объект аага, который из объекта сШез заполняется данными с координа-
тами городов России;

♦	организуется цикл Гог, в теле которого объект аага дополняется данными о маршруте
движения поезда (из объекта Гга1п_гизз1а);

♦	с использованием метода до.Ндиге создается объект Пд (в нашем случае карта),
в который загружаются данные из объекта йага;

♦	формируется набор фреймов (ггатез), или кадров, для анимации движения поезда по
маршруту с параметрами каждого шага слайдера (згерз) и создается набор слайдов
(зИс!егз);

♦	для отображения центра карты (тар сепгег) задаются координаты города Тверь;

♦	создаются элементы с описанием параметров макета (1ауоиг):

•	Ш1е — заголовок макета;

•	1едепа_ог1епГа^1оп="Ь” — горизонтальная ориентация легенды;

•	тарЬох_з^у1е="ореп-з^геег-шар"— подключение карты Ореп81гее1Мар;

•	тарЬох=сИсг(сепгег^пар_сеп11егА гоот=5) — указание центра карты и масштаба увели-
чения;

•	м1сО=1500, Ье1дьг=юоо — ширина и высота макета;

•	тагд1п — отступы от границ макета;

•	ирйагетепиз — параметры и расположение элементов анимации маршрута.

После этого с использованием метода Пдло_ььл1 выполняется преобразование карты
в формат НТМЕ и результаты преобразования сохраняются в объекте р1ог_сПу.

На заключительном этапе объект р1о^_сПу через словарь сопгехг передается в шаблон
81а1_дгаГ_2с1.1'Дт1 (см. листинг 8.4).

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 7) для запуска этого примера нужно
на вкладке Показ примеров нажать на кнопку Примеры главы 8 и перейти по ссылке
38. Анимация объектов на географических картах 20.

Если запустить на выполнение код этого примера, то в окне браузера сформированная
на его основе страница будет выглядеть так, как показано на рис. 8.47.

Как здесь можно видеть, на карте красным цветом показан маршрут движения пасса-
жирского поезда в виде ломаной линии. В нижней части карты имеются две кноп-
ки: ► — для запуска и II — для приостановки анимации, а также слайдер. Если поль-
зователь с помощью мыши станет перемещать бегунок слайдера по шкале, то на карте
будет отображаться положение поезда на маршруте после каждого часа движения.
Рис. 8.47. Фрагмент карты с маршрутом движения пассажирского поезда «Москва — Санкт-Петербург»

Пояснение

Реальное время и место положения поезда на трассе между городами Москва и Санкт-
Петербург будет отличаться от анимации, приведенной в этом учебном примере, — ведь
каждый поезд движется по своему расписанию. Однако в файл С8\/ можно внести реаль-
ное расписание движения поездов, и тогда анимация будет соответствовать реальным
данным.

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

В этой главе приведены сведения о решении только небольшого круга задач, связанных
с визуализацией данных на базе библиотеки р1о11у. Более детальную информацию
о свойствах и методах элементов этой библиотеки можно найти в исходной документа-
ции, которая находится в Интернете в открытом доступе.

Кроме р1о!1у, есть еще ряд библиотек, обеспечивающих графическое представление
числовой информации: Ма1р1оШЬ, Р1оИу Ехргезз, Вазй и др. При возникновении любого
вопроса, связанного с использованием этих библиотек, вы сможете на просторах
Интернета найти нужный ответ от сообщества пользователей В]ап§о.
ГЛАВА 9

Визуализация данных в О|апдо
с анимацией на иауаЗспр!

В этой главе описываются способы вывода в шаблоны В]ап§о данных в виде статичных
и интерактивных 20- и ЗИ-графиков с анимацией этих данных с помощью Зауа-скрип-
тов, встроенных в шаблоны Р]ап§о. Такая технология позволяет сократить объем про-
граммного кода в представлениях (ухеду), однако при этом «утяжеляется» программный
код шаблонов, поскольку создание «живых» интерактивных графиков требует встраи-
вания скриптов на НТМЬ-страницы и налаживания взаимодействия шаблонов В]ап§о
с Зауа-скриптами. Этот подход оправдан для той группы программистов, которые име-
ют навыки и опыт работы с языком программирования Зауа.

Здесь приводятся проверенные и реально работающие программные модули, которые
в том или ином виде встроены в шаблоны Э)ап^о на сайтах в сети Интернет.

Из материалов этой главы вы узнаете:

♦	как реализовать визуализацию данных в виде статичных графиков в сочетании
с анимированными 2И-графиками на основе ЗауаЗспр!;

♦	как реализовать визуализацию данных в виде статичных графиков в сочетании
с анимированными ЗИ-графиками на основе ЗауаЗспр!;

♦	как реализовать обмен данными между элементами шаблонов О(ап^о и программа-
ми на Зауа8спр1.

Создание приложений с использованием Зауа-скриптов требует особой аккуратности
и внимательности, поскольку любая элементарная ошибка в скрипте приводит к «обва-
лу» целой цепочки программных модулей.

9.1.	Включение ^уаЗспр! в шаблон О)апдо

Чтобы включить ЗауаЗспр! в шаблон Э]ап§о, вы можете использовать либо тег Э]ап§о
для создания блока {% Ыоск %}, либо тег НТМЬ-страницы <зсг1ры. При этом ЗауаЗспр!
может быть встроен как в базовый шаблон, так и в конкретную НТМЬ-страницу: когда
ЗауаЗспр! встроен в базовый шаблон, то его функциональность может быть задейство-
вана в любом дочернем шаблоне, если же Зауа-скрипт встроен в конкретный шаблон
с использованием тега <зсг1ры, то его функциональность будет использоваться только
в этом шаблоне:
<ЗСГ1рк>

// Ваш код на ТачаЗсЫрк

ЕипскФоп туЕипскФопО {
// Строки кода
}

</зсг!рк>

Кроме того, можно поместить тег со скриптом в тег В)ап§о для создания блока
{% Ыоск %} — если вы хотите разрешить дочерним шаблонам переопределять код
1ауа8спр1:

{% Ыоск ^аVазс^^рк %}

<ЗСГ1рк>

// Ваш код на ТачаЗсЫрк

ЕипскФоп туЕипсЫоп () {
// Строки кода
}

</зсг!рк>

{% епсЫоск %}

В приведенных далее примерах 1ауа-скрипты будут подключаться к конкретным шаб-
лонам Э)ап§о с использованием тега <зсг1рг>.

Итак, рассмотрим несколько примеров анимации графиков с использованием скриптов
1ауа.

9.1.1.	Анимация диаграмм формата 20

В качестве примера сформируем два интерактивных графика с анимацией 1ауа-скрип-
тами.

В этом примере задействована используемая в экономических расчетах функция, опре-
деляющая количество взаимозаменяемых товаров х и у, которые может приобрести
потребитель при заданном бюджетном ограничении. Мы не станем здесь вдаваться
в детали экономической теории, отметим лишь только то, что эта функция характери-
зует возможности покупателя приобрести разное количество взаимозаменяемых това-
ров при заданных ценах и ограниченном бюджете.

Для реализации примера нам понадобится создать несколько модулей, работающих
в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 9.1).

Листинг 9.1. Ссылка активации маршрута для построения графика линии

<а ЪгеЕ=”{% иг! 'тазкег:рг!се_х' %}" кагдек ="_Ь1апк">Интерактивный график линии бюджетного
ограничения*^/а>

По этой ссылке будет активирован ИКЬ-маршрут рггзе х (листинг 9.2).

Листинг 9.2. ЫНЬ-маршрут рпзе_х

# Интерактивный график линии бюджетного ограничения
ракк(’рг1се_х', чгемз.рг!се_х, пате='рг1се_х'),
По этому маршруту вызывается представление рг1зе_х (листинг 9.3).

Листинг 9.3. Представление (у|еу\л) рпзе_х

#####################################################

# Интерактивный график линии бюджетного ограничения #

#####################################################

беб рг1се_х(гедиезб):

Рх = 200 # Стоимость товара X

Ру = 400 # Стоимость товара X

М = 10000 # Бюджетное ограничение

рх_ш!п = 0

рх_тах = Рх ★ 2

#	Передать данные в объект сопбехб

сопбехб = {'рх_ш1п': рх_т!п, 'рх_тах': рх_тах,
'Рх': Рх, 'Ру': Ру, 'М': М}

#	Передать объект сопбехб в шаблон

гебигп гепбег(гедиезб, "шазбег/д1ауа_9/рг1се_х.Нбш1", сопбехб)

В начале этого модуля формируются исходные данные, необходимые для расчетов, ко-
торые через словарь сопбехб передаются в шаблон рпсе_х.И1т1. Как здесь можно видеть,
при использовании 1ауа-скриптов программный код представления на РуЙюп получил-
ся достаточно простым и имеющим минимальное количество строк.

Однако при этом значительно «утяжеляется» программный код шаблона рпсе_х.К1гп1
(листинг 9.4), поскольку он должен содержать модули, написанные на 1ауа8спр1.

Листинг 9.4. Шаблон рпсе_х.111т1

{# рг1се_х.Ьбт1 #}

{% ехбепбз "зЬор/Ьазе.Ьбт!" %}

{% Ыоск сопбепб %}

<!— Подключить Р1об1у.]3 —>

<зсгбрб згс="Ьббрз://сбп.р1об.1у/р1об1у-1абезб .тгп.д з"></зсг!рб>

<збу1е>

. зИбег {

-меЬкбб-арреагапсе: попе;

мбббЬ: 50%;

ЬебдЬб: 15рх;

Ьогбег-габбиз: 5рх;

Ьаскдгоипб: #636363;

оибИпе: попе;

орасббу: 0.7;

-меЬк1б-бгапз1б1оп: .2з;

бгапзгбгоп: орасгбу .2з;
зТЫег: :-меЬк1к-з11с4ег-к1тип1Ь {
-меЬкПз-арреагапсе: попе;
арреагапсе: попе;

мФсО: 25рх;

Ъе1дкк: 25рх;

Ьогс4ег-гас41из: 50%;

Ьаскдгоипс!: #О4АА6В;

сигзог: рогпкег;

. зИ(4ег::-тог-гапде-ШлпЬ {

мФсО: 25рх;

Ъе1дкк: 25рх;

Ьогс4ег-гас41из: 50%;

Ьаскдгоипс4: #О4АА6В;

сигзог: роФпкег;

}

</зку1е>

<сНу с1азз="сопка1пег-Р1и1(4 р-1">

<сНу с1азз=”гом”>

<!— Интерактивный график, Ыпе—>

<сНу с1азз="со1-6 гох-2">

«41V 1с4="туО1у"></с41у>

</сНу>

</с4гу>

<сНу с1азз=”гом”>

<!— Интерактивный график, Ваг—>

<сНу с1азз="со1-12 со1-зт-6 со1-тс4-6 со1-1д-4 со1-х!-4 со1-хх1-2 тх-2”>
«41V 1с4="туВаг"></(41У>

</с41У>

</с41У>

<с41У с1азз=”гом”>

<с41У с1азз="со1-6">

<!— Слайдер —>

«41У с1азз=”зИ(4есопка1пег тх-2">

<1приВ Вуре="гапде" т!п={ {рх_тгп}} тах={ {рх_тах}} уа1ие={{Рх}} с1азз=”зИс4ег"

1с4="туВапде">

<И5>Цена товара X: Рх=<зрап 1(4="с4ето"></зрап> руб.</И5>

<И5>Количество товара Х=<зрап 1(4="рг_пх"></зрап></415>

</с41У>

</с4гу>

</с41У>

</с41У> <!— Конец контейнера —>
<8СГ1рб>

// Объявление переменных скрипта

// Начальное значение слайдера

чаг зИбег = боситепб.дебЕ1етепбВу1б("туРапде");

// Начальное значение цены товара "х"

чаг оибриб = боситепб.дебЕ1етепбВу1б("бето");

// Начальное значение количества товара "х"

чаг рг_пх = боситепб.дебЕ1етепбВу1б(''рг_пх") ;

// Получение исходных данных из шаблона

1еб Рх = ”{{ Рx|езсаре^з // Получить Рх из шаблона

1еб Ру = "{{ Ру|езсаре^з }}"; // Получить Ру из шаблона

1еб М = ”{{ М|езсаре^з }}";	//	Получить М шаблона

//Вернуть начальное значение слайдера в шаблон

оибриб. ФппегНТМЬ = зИбег .чабие;

//Вернуть начальное значение рг_пх в шаблон

чаг п_х = МабЬ.гоипб(М / Рх);

рг_пх.бппегНТМЬ = п_х;

// Обращение к функции формирования значений х1, у1
1еб х_у = дгаб_рх(Рх, Ру, М);

чаг х1 = х_у[0]; // Массив значений х1

чаг у1 = х_у[1]; // Массив значений у1

// Обращение к функции формирования значений х2, у 2

1еб х_у_2 = дгаб_рх(Рх, Ру, М);

чаг х2 = х_у_2[0]; // Массив значений х2

чаг у 2 = х_у_2[1]; // Массив значений у 2

// Задание начальных значений данным для линии Рх1
чаг бгасеб = {

х: х1,

У: УЪ

пате: 'Рх=' + Збгбпд(Рх),

Ипе: { со!ог: 'гдЬ(255, 0, 0)', мбббб: 2},
Руре: 'зсаббег'}

// Задание начальных значений данным для линии Рх2
чаг бгасе2 = {

х: х2,

У: у2,

пате: 'Рх=' + Збгбпд(Рх),

Ипе: { со!ог: 'гдЬ(0, 0, 255)', мбббН: 2},
буре: 'зсаббег'}

// Объединить данные двух линий в один график
чаг баба = [бгасеб, бгасе2];
II Определить параметры макета графика для двух линий
чаг Ьауоиб = {

бЬбЬе: {бехб: 'Интерактивный график'},

хахЬз: {бЬбЬе: { бехб: 'Количество товара X',}},
уахЬз: {-Ы-Ые: {бехб: 'Количество товара У'}},
мЬббИ: 800,
ИеЬдИб: 400,
р!об_Ьдсо1ог: 'гдЬа(153,255,255,0.8)'

};

// Нарисовать первоначальный график двух линий бюджетного ограничения
Р1об1у.пемР1об('туВЬч', баба, 1ауоиб);

//-----------------------------------------------------------

// Задание начальных значений данным для столбчатой диаграммы
чаг п_х = М / Рх;

чаг п_у = М / Ру;

сопзб хАггау = ["Кол. товара Х","Кол. товара У"];

сопзб уАггау = [п_х, п_у];

сопзб баба_Ьаг = [{

х: хАггау,
у: уАггау,
буре: "Ьаг",
уахЬз: {б1б1е: {бехб: 'Количество товара'}},
огЬепбаЫоп: "ч",
тагкег: {со1ог:"гдЬа(0,0,255)"}

}];

// Нарисовать первоначальный график столбчатой диаграммы
сопзб 1ауоиб_Ьаг = {ЫЫе: "Количество товара"};

Р1об1у.пемР1об("туВаг", баба_Ьаг, 1ауоыб_Ьаг);

// Функция изменения значения слайдера #############################
зИбег .опФприб = РипсЫоп()
{

оибриб. ФппегНТМЬ = бМз.чабие;

з1 = бЫз.ча1ие;

// Рисуем динамичный график бюджетных линий
зИом_дгаР2(з1, Рх, Ру, М, 1ауоыб);

// Рисуем график Ьаг
зЬом_Ьаг(з1, Рх, Ру, М, 1ауоыб_Ьаг);

// Меняем количество товара X

чаг п_х = МабИ.гоипб(М / з1);

рг_пх.ЬппегНТМЬ = п_х;

}

// #####################################################################
II Функция изменения графика линий
РипсРРоп зЬом_дгаР2(з1, Рх, Ру, М, РауоиР)
{

1еР х_у = дгаР_рх(Рх, Ру, М) ;

чаг х1 = х_у[0];

чаг у1 = х_у[1];

1еР х_у_2 = дгаР_рх(з1, Ру, М);

чаг х2 = х_у_2[0];

чаг у2 = х_у_2[1];

//Формируем значения для линии 1

чаг Ргасе1 = {

х: х1,
у: У1<
пате: ’Рх=’ + ЗРгРпд(Рх),
Ипе: { со!ог: ’гдЬ(0, 0, 255)', НОРН: 2},
Руре: 'зсаРРег'}

//Формируем значения для линии 2

чаг Ргасе2 = {
х: х2,
у: У2,
пате: 'Рх=' + ЗРг1пд(з1),
Ипе: { со!ог: 'гдЬ(255, 0, 0)', ИНРН: 2},
Руре: 'зсаРРег'}

// Объединить две линии в один график
чаг баРа = [Ргасе1, Ргасе2];

// Нарисовать график из 2-х линий
Р1оР1у.пемРРоР('туРФч', НаРа, 1ауоыР);

}

// Функция формирования массивов х и у для графика 1

РипсРРоп дгаР_рх(Рх, Ру, М)
{

1Р (Рх == 0) Рх=1;

чаг Х_тах = МаРЬ.гоипб(М / Рх) ; // Максимальное количество товара X
чаг У_тах = МаРЬ.гоипб(М / Ру); // Максимальное количество товара У

// Массив количества товара X
чаг х = [];

Рог (1 =0; 1 < Х_тах + 1; +Н) {
х[г] = 1;

}

// Массив количества товара У

чаг у = [] ;

Рог (1 =0; 1 < Х_тах + 1; +И) {

X = х[1] ;

У = (М / Ру) - ((Рх * X) / Ру) ;
уШ = У;
гебигп [х, у];

}

// Функция изменения графика Ваг
бипсббоп зйом_Ьаг(з1, Рх, Ру, М, 1ауоиб_Ьаг)
{

чаг п_х = М / з1;

чаг п_у = М / Ру;

сопзб хАггау = ["Кол-во товара X","Кол-во товара X"];

сопзб уАггау = [п_х, п_у];

сопзб баба_Ьаг = [{
х: хАггау,
у: уАггау,
Руре: "Ьаг",
уахгз: {б1б!е: {бехб: 'Количество товара'}},
огбепбаббоп:"ч",
тагкег: {со!ог:"гдЬа(0,0,255)"}
}];

// Нарисовать первоначальный график столбчатой диаграммы
Р1об1у.пемР1об("туВаг", баба_Ьаг, 1ауоыб_Ьаг);

}

</зСГ1рб>

{% епбЫоск сопбепб %}

Это достаточно сложный шаблон с большим количеством строк программного кода на
языке 1ауа8спр1, поэтому далее мы более детально рассмотрим его элементы.

Подключение библиотеки р1о(1у.р

Для начала нужно подключить к шаблону библиотеку р1о11у.]з. Подключение библио-
теки выполняется по ссылке на СЭМ-сервер:

<зсг1рб згс="Ьббрз://сбп.р!об.1у/р1об1у-1абезб.шгп.д з"></зсг1рб>

Тег <$1у1е>

Для анимации графиков в шаблоне используется НТМЬ-слайдер. Поскольку по умол-
чанию слайдер имеет небольшой размер и с ним не совсем удобно работать пользова-
телям, то здесь несколько изменен его стиль. С теми параметрами, которые заданы
в стиле, мы получаем более крупный, а главное — адаптивный слайд, который под-
страивается под то или иное разрешение экрана.

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

Шаблон содержит следующие теги для визуализации объектов:

♦	<сИч 1а="туо1у"></сИу> — тег для отображения анимированного графика линий (иден-
тификатор 1б="ту01ч");
♦	<ббч 1а=”туВаг”х/сНу> — тег для отображения анимированной столбчатой диаграммы
(идентификатор 1б="туВаг");

♦	<ббч с1азз=,,зИбесопба1пег тх-2"> — тег для отображения слайдера (идентификатор
1б="туРапде").

Кроме того, в шаблоне имеются идентификаторы объектов для приема и показа дина-
мичной информации из 1ауа-скриптов:

♦	1б=”бето" — цена товара х;

♦	1с1="рг_пх" — количество товара х.

Идентификаторы всех этих элементов выполняют важную роль — они обеспечивают
обмен информацией между шаблонами Ц]ап§о и 1ауа-скриптами.

Тег для кода на языке ^уа

Тег <зсг1рг> — самый большой тег в шаблоне. В этом теге содержится программный код
для получения данных из шаблона, для возврата данных в шаблон, функции для гене-
рации данных, модули для формирования графических объектов. Рассмотрим подроб-
нее фрагменты этого кода.

На первом шаге выполняется объявление переменных, которые используются в скрипте:

♦	чаг зИбег — начальное значение слайдера;

♦	чаг оигриг — начальное значение цены товара х;

♦	чаг рг пх — начальное значение количества товара х

Затем скрипт получает из шаблона исходные параметры, необходимые для формирова-
ния данных для построения графиков:

♦	1ег Рх — стоимость товара х (рх);

♦	1ег Ру — стоимость товара у (ру);

♦	1ег м — бюджет покупателя (м).

А из скрипта в шаблон возвращается начальное значение слайдера и рассчитанное
количество товара х:

//Вернуть начальное значение слайдера в шаблон
оибриР. тппегНТМЬ = зИбег .чабие;

//Вернуть начальное значение рг_пх в шаблон

чаг п_х = Мабй.гоипб(М / Рх);

рг_пх.бппегНТМЬ = п_х;

Далее дважды выполняются обращения к функции скрипта дгаг_рх, в которых форми-
руются данные для построения статичной (х1, у1) и динамичной (х2, у2) линий бюджет-
ного ограничения, после чего формируются два объекта (бгасеб и Ргасе2) — это данные
для формирования статичной и динамичной линий бюджетного ограничения. Затем эти
данные загружаются в один общий список (объект баба).

На следующем шаге задаются параметры для макета диаграммы (бауоиб) и формируется
сама диаграмма с использованием следующего метода:

Рбоббу.пемРбоб('туБбч', баба, бауоиб)
Этому методу передаются:

♦	туо1у — идентификатор диаграммы в шаблоне Э]ап^о;

♦	баба — данные для построения диаграммы;

♦	1ауоиг — параметры макета диаграммы.

Эта диаграмма будет показана в следующем теге шаблона Р]ап§о:

<сПч с1азз="гом">

<!— Интерактивный график, Ыпе—>

«Пч с!азз=”со1-6 тх-2”>

<сПч 1б=”туВ1ч”></Ыч>

</сИч>

</сИч>

После этого в аналогичной последовательности строится столбчатая диаграмма:

♦	подсчитывается количество товаров для столбцов диаграммы х и у (п_х, п_у);

♦	задается набор данных для столбчатой диаграммы (ЭаГа Ьаг);

♦	задаются параметры макета диаграммы (1ауоиг_Ьаг),

и формируется сама столбчатая диаграмма с использованием следующего метода:
Р1оЫу.пемР1об ("туВаг", баба_Ьаг, 1ауоиб_Ьаг);

Этому методу передаются:

♦	туВаг — идентификатор диаграммы в шаблоне Э]ап§о;

♦	йаРа Ьаг — данные для построения диаграммы;

♦	1ауоив_Ьаг — параметры макета диаграммы.

Эта диаграмма будет показана в следующем теге шаблона Р]ап§о:

«Пч с1азз=”гом">

<!— Интерактивный график, Ваг—>

<сИч с1азз=”со1-12 со1-зт-6 со1-тб-6 со!-1д-4 со!-х1-4 со1-хх1-2 тх-2”>

<Ыч 16= "туВаг ”></Ыч>

</сИч>

</сПч>

Затем следует программный код главной функции, которая обеспечивает анимацию
графиков:

// Функция изменения значения слайдера #############################
зТШег .опгприС = РипсЫоп()

{

оибриб.ФппегНТМЬ = ЬЫз.ча1ие;

з! = ЬЫз.чаЬие;

// Рисуем динамичный график бюджетных линий

зЬом_дгаР2(з1, Рх, Ру, М, 1ауоиб);

// Рисуем график Ьаг

зЬом_Ьаг(з1, Рх, Ру, М, 1ауоиб_Ьаг);

// Меняем количество товара X

чаг п_х = Мабй.гоипсЦМ / з!);
рг_пх.тппегНТМЬ = п_х;
}

Эта функция принимает текущее значение слайдера (з1) и передает его в другие функ-
ции, где выполняются перерасчет данных и перестроение диаграмм с учетом обновлен-
ных данных. Код этих функций мы подробно рассматривать не станем, т. к. он во мно-
гом аналогичен коду для построения первоначальных статичных диаграмм.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 9 и перейти по ссылке Инте-
рактивный график линии бюджетного ограничения.

Если запустить на выполнение код этого примера, то мы получим два графика:

♦	интерактивных линий бюджетного ограничения;

♦	интерактивной столбчатой диаграммы.

На рис. 9.1 приведены оба эти графика: интерактивных линий бюджетного ограничения
(вверху) и столбчатой диаграммы (внизу) — в начальном состоянии (при цене товара
Рх = 200 руб.).

Интерактивный график

Количество товара X

Цена товара X: Рх=200 руб.

Количество товара Х = 50

Рис. 9.1. Интерактивные графики в начальном состоянии (при Рх = 200 руб.)
О ЦВЕТНЫХ ИЛЛЮСТРАЦИЯХ ГЛАВ 8 и 9

Напомним, что все иллюстрации глав 8 и 9, содержащие важную для их понимания цвет-
ную составляющую, вынесены в РОЕ-файл, скачать который можно с сервера издательства
«БХВ» по ссылке Ьйр8://н1р.ЬЬу.ги/9785977520560.21р, а также со страницы книги на сайте
Ы1р8://ЬЬу.ги

На верхнем графике присутствуют две линии бюджетного ограничения (статичная —
синего цвета и динамичная — красного цвета) — в начальном состоянии (при цене то-
вара Рх = 200 руб.) они совпадают.

На столбчатой диаграмме показано количество товаров X и V, которые сможет купить
потребитель при заданных ценах на товары.

В нижней части рисунка находится слайдер, с помощью которого можно изменять цену
товара X, — если мышью менять положение бегунка слайдера, то цена на товар X ста-
нет изменяться, при этом модули, написанные на 1ауа8спр1, будут принимать новые
данные из шаблона В)ап§о, выполнять необходимые расчеты, обновлять диаграммы
и возвращать обновленные графики в шаблон В)ап§о. Так, если переместить бегу-
нок слайдера в крайнее правое положение, то цена на товар X достигнет значения
Рх = 400 руб. и графики примут вид, приведенный на рис. 9.2, — при изменении поло-
жения бегунка слайдера изменились как числовые параметры, так и сами графики.

Интерактивный график

Количество товара К

Количество товара

Цена товара X: Рх=400 руб.

Количество товара Х=25

Рис. 9.2. Интерактивные графики при Рх = 400 руб.
9.1.2.	Анимация трехмерной диаграммы формата 30

В качестве примера сформируем интерактивный ЗБ-график с анимацией Зауа-скрип-
тами.

В этом примере задействована используемая в экономических расчетах функция
построения кривой полезности Кобба — Дугласа при фиксированном бюджете. Мы не
станем здесь вдаваться в детали экономической теории, отметим лишь только то, что
эта функция характеризует форму кривой полезности при приобретении разного коли-
чества взаимозаменяемых товаров при заданных ценах и фиксированном бюджете.

В примере мы отобразим кривую полезности Кобба — Дугласа с точкой оптимума, рас-
положенной в трехмерном пространстве, а потом будем менять значения показателей
степени и следить за изменением формы этой кривой. Чтобы лучше представлять исполь-
зуемые алгоритмы, приведем формулу для расчета кривой полезности Кобба — Дугласа:

П(х,у) = X ** а * У ** Ь

где:

♦	и(х,у) — параметр полезности для потребителя от приобретения взаимозаменяемых
товаров;

♦	х — количество товара х;

♦	у — количество товара у;

♦	а и ь — показатели степени при количестве товаров.

Для реализации примера нам понадобится создать несколько модулей, работающих
в единой связке.

Прежде всего, надо в опции меню или на одной из страниц сайта создать ссылку, кото-
рая активирует нужный маршрут для формирования графика (листинг 9.5).

Листинг 9.5. Ссылка активации маршрута для построения ЗО-диаграммы

<	а ЪгеУ=”{% иг! 'тазкег: У_коЬ_с1ид' %}" кагдек ="_Ыапк"Жривая полезности Кобба - Дугласа
при М-сопзк</а>

По этой ссылке будет активирован ИКЬ-маршрут У коЬ бид (листинг 9.6).

Листинг 9.6. ЫНЬ-маршрут СкоЬ_с1ид

#	Кривая полезности Кобба - Дугласа

ракк (' У_коЬ_бид', чгемз. У_коЬ_с1ид, паше=' У_коЬ_бид'),

По этому маршруту вызывается представление У коЬ бид (листинг 9.7).

Листинг 9.7. Представление (у|еуу) Т_коЬ_с1ид

####################################

#	Кривая полезности Кобба - Дугласа #

#	при бюджетном ограничении	#

#	###################################

беУ У_коЬ_бид(гедиезк) :

Рх = 200 # Стоимость товара X
Ру = 400 # Стоимость товара У

М = 10000 # Бюджетное ограничение
а = 0.5

Ь = 1 - а
а_тгп =0.01
а_тах =0.99

#	Передать данные в объект сопбехб
сопбехб = {'ра_тгп': а_тгп, 'ра_тах': а_тах,

'Рх': Рх, 'Ру': Ру, 'М': М, 'а': а, 'Ь': Ь}

#	Передать объект сопбехб в шаблон

гебигп гепбег(гедиезб, "тазбег/д1ача_9/б_коЬ_6ид.Ьбт1", сопбехб)

В начале этого модуля формируются исходные данные, необходимые для расчетов,
которые через словарь сопбехб передаются в шаблон Г_коЬ_с1ид.1п1т1. Как здесь можно
видеть, при использовании 1ауа-скриптов программный код представления на РуЙюп
получился достаточно простым и имеющим минимальное количество строк.

Однако при этом значительно «утяжеляется» программный код шаблона Г_коЬ_с1ид.И1т1
(листинг 9.8), поскольку он должен содержать модули, написанные на 1ауа8спр1.

Листинг 9.8. Шаблон Т_коЬ_с1ид.Гйт1

{# рг1се_х.Ьбт1 #}

{% ехбепбз "зЬор/Ьазе.Ьбт!" %}

{% Ыоск сопбепб %}

<!— Подключить Р1об1у.]3 —>

<зсггрб згс="Ьббрз://сбп.р1об.1у/р1об1у-1абезб.тгп. дз"х/зсггрб>

<збу1е>

. зИбег {

-меЬкгб-арреагапсе: попе;

мгббЬ: 50%;

ЬегдЬб: 15рх;

Ьогбег-габгиз: 5рх;

Ьаскдгоипб: #636363;

оиЫгпе: попе;

орасгбу: 0.7;

-меЬкгб-бгапзгбгоп: .2з;

бгапзгЫоп: орасгбу .2з;

зИбег: :-меЬк1б-з116ег-бНил1Ь {
-меЬкгб-арреагапсе: попе;
арреагапсе: попе;

М166Ь: 25рх;

ЬегдЬб: 25рх;

Ьогбег-габгиз: 50%;

Ьаскдгоипб: #О4АА6П;
сигзог: рогпбег;
. зИбег::-тог-гапде-бНшпЬ {

ю.сН±: 25рх;

НеФдНН: 25рх;

Ьогбег-гасЦиз: 50%;

Ьаскдгоипб: #О4АА6В;

сигзог: роФпбег;

}

</збу1е>

<сНч с1азз="сопба1пег-Р1и1с1 р-1">

<с11ч с1азз=”гом”>

<!— Интерактивный график, Ыпе—>

<сНч с1азз=”со1-6 гох-2”>

<сНч 1б=”туВ1ч”></б1ч>

</сНч>

</сНч>

<с11ч с1азз=”гом”>

<!— Интерактивный график, Ваг—>

<сНч с1азз="со1-12 со1-зт-6 со1-тс!-6 со1-1д-4 со!-х1-4 со1-хх1-2 тх-2”>

<сНч 1б="туВаг"></Н1ч>

</сНч>

</сНч>

<сНч с1азз="гом">

<сНч с1азз="со1-6">

<!— Слайдер —>

<сНч с1азз=”з11с1есопРа1пег тх-2">

<1приВ буре=”гапде” тгп={ {рх_тгп}} тах={ {рх_тах}} ча1ие={{Рх}} с1азз=”зИс1ег"
1с1="туВапде">
<Н5>Цена товара X: Рх=<зрап 1с1="с1ето"></зрап> руб.</Н5>

<Ь5Жоличество товара Х=<зрап 1(1="рг_пх"></зрап></к5>

</сНу>

</сНу>

</сНу>

</сНу> <!— Конец контейнера —>

<ЗСГ1рР>

// Объявление переменных скрипта

// Начальное значение слайдера

чаг зИбег = боситепб.дебЕ1етеп11Ву1с1("туРапде") ;

// Начальное значение цены товара "х"

чаг оибриб = боситепб.дебЕ1етеп11Ву1с1("с1ето") ;

// Начальное значение количества товара "х"

чаг рг_пх = боситепб.дебЕ1етеп11Ву1с1("рг_пх") ;

// Получение исходных данных из шаблона

1еб Рх = ”{{ Рx|езсаре^з }}”; // Получить Рх из шаблона
1еб Ру = "{{ Ру|езсаре^з }}”;

// Получить Ру из шаблона

1еб М = ”{{ М|езсаре^з }}";	// Получить М шаблона

//Вернуть начальное значение слайдера в шаблон
оибриб ИппегНТМЬ = зИбег .ча1ие;

//Вернуть начальное значение рг_пх в шаблон
чаг п_х = МабЬ.гоипсЦМ / Рх);

рг_пх.бппегНТМВ = п_х;

// Обращение к функции формирования значений х1, у1

1еб х_у = дгаб_рх(Рх, Ру, М);

чаг х1 = х_у[0]; // Массив значений х1

чаг у1 = х_у[1]; // Массив значений у1

// Обращение к функции формирования значений х2, у 2

1еб х_у_2 = дгаб_рх(Рх, Ру, М);

чаг х2 = х_у_2[0]; // Массив значений х2

чаг у 2 = х_у_2[1]; // Массив значений у 2

// Задание начальных значений данным для линии Рх1
чаг бгасе1 = {

х: х1,

у: у1,

пате: ’Рх=' + 8бг1пд(Рх),

Ипе: { со1ог: ’гдЬ(255, 0, 0)', ИббН: 2},
буре: 'зсаббег'}

// Задание начальных значений данным для линии Рх2
чаг бгасе2 = {

х: х2,

У: у2,

пате: ’Рх=’ + Збг1пд(Рх),

Ипе: { со!ог: 'гдЬ(0, 0, 255)', ИббН: 2},
буре: 'зсаббег'}

// Объединить данные двух линий в один график
чаг баба = [бгасе1, бгасе2];

// Определить параметры макета графика для двух линий
чаг 1ауоиб = {

б1б!е: {бехб: 'Интерактивный график'},

хахбз: {б1б!е: { бехб: 'Количество товара X',}},

уахбз: {б1б!е: {бехб: 'Количество товара У'}},

ИббЬ: 800,

ЬебдЬб: 400,

р!об_Ьдсо1ог: 'гдЬа(153,255,255,0.8)'

};
II Нарисовать первоначальный график двух линий бюджетного ограничения
РЬобЬу.пемРЬоб('туОЬч', баба, Ьауоиб);

//-----------------------------------------------------------

// Задание начальных значений данным для столбчатой диаграммы
чаг п_х = М / Рх;

чаг п_у = М / Ру;

сопзб хАггау = ["Кол-во товара X","Кол-во товара У"];

сопзб уАггау = [п_х, п_у] ;

сопзб баба_Ьаг = [{

х: хАггау,
у: уАггау,
буре: "Ьаг",
уахЬз: {бЬбЬе: {бехб: 'Количество товара'}},
огЬепбабЬоп:"ч",
тагкег: {соЬог:"гдЬа(0,0,255)"}

}];

// Нарисовать первоначальный график столбчатой диаграммы
сопзб 1ауоиб_Ьаг = {б!б1е:"Количество товара"};

РЬобЬу.пемРЬоб("туВаг", баба_Ьаг, 1ауоыб_Ьаг);

// Функция изменения значения слайдера #############################
зЫбег .опЬприб = ЬипсбФопО
{

оибриб.ЬппегНТМЬ = бИЬз.чаЬие;

з! = бМз.чаЬие;

// Рисуем динамичный график бюджетных линий
зИом_дгаб2(зЬ, Рх, Ру, М, Ьауоиб);

// Рисуем график Ьаг
зИом_Ьаг(з1, Рх, Ру, М, 1ауоыб_Ьаг);

// Меняем количество товара X

чаг п_х = МабИ.гоипЩМ / з!) ;

рг_пх.ЬппегНТМЬ = п_х;

}

// #####################################################################

// Функция изменения графика линий

РипсЫоп зИом_дгаР2 (зЬ, Рх, Ру, М, Ьауоиб)
{

Ьеб х_у = дгаб_рх(Рх, Ру, М);

чаг х1 = х_у[0];

чаг у1 = х_у[1];

Ьеб х_у_2 = дгаб_рх(з1, Ру, М);

чаг х2 = х_у_2[0];

чаг у 2 = х_у_2[1];
//Формируем значения для линии 1

чаг Ргасе1 = {

х: х1,

У: У1,

пате: ’Рх=' + 8РгРпд(Рх),

Ипе: { со!ог: 'гдЬ(0, 0, 255)', мРбРИ: 2},

Руре: 'зсаРРег'}

//Формируем значения для линии 2

чаг Ргасе2 = {

х: х2,

У: У2,

пате: ’Рх=’ + 8РгРпд(з1),

Ипе: { со!ог: ’гдЬ(255, 0, 0)', мРбРИ: 2},
Руре: ’зсаРРег’}

// Объединить две линии в один график
чаг баРа = [Ргасе1, Ргасе2];

// Нарисовать график из 2-х линий
Р1оР1у.пемР1оР('туРФч', НаРа, 1ауоыР);
}

// Функция формирования массивов х и у для графика 1
РипсРРоп дгаР_рх(Рх, Ру, М)
{

1Р (Рх == 0) Рх=1;

чаг Х_тах = МаРЬ.гоипб(М / Рх); // Максимальное количество товара X
чаг У_тах = МаРЬ.гоипб(М / Ру); // Максимальное количество товара У

// Массив количества товара X
чаг х = [];

Рог (1 = 0; 1 < Х_тах + 1; +Н) {
х[г] = Ф;

}

// Массив количества товара У
чаг у = [] ;

Рог (1 = 0; 1 < Х_тах + 1; +Н) {

X = х[1];

У = (М / Ру) - ((Рх * X) / Ру) ;

у[1] = У;

}

геРигп [х, у];
}

// Функция изменения графика Ваг

РипсРРоп зЬом_Ьаг(з1, Рх, Ру, М, 1ауоиР_Ьаг)
{

чаг п_х = М / з1;

чаг п_у = М / Ру;
сопзб хАггау = ["Кол-во товара X","Кол-во товара У"];

сопзб уАггау = [п_х, п_у];

сопзб с!аба_Ьаг = [{
х: хАггау,
у: уАггау,
буре: "Ьаг",
уахтз: {б1б!е: {бехб: 'Количество товара'}},
огбепбаббоп:"ч",
тагкег: {со!ог:"гдЬа(0,0,255) "}
}];

// Нарисовать первоначальный график столбчатой диаграммы
Р1об1у.пемР1об("туВаг", с!аба_Ьаг, 1ауоыб_Ьаг);

}

</зсгбрб>

{% епбЫоск сопбепб %}

Это достаточно сложный шаблон с большим количеством строк программного кода на
языке 1ауа8спр1, поэтому далее мы более детально рассмотрим его элементы.

Подключение библиотеки р1о<1у.р

Для начала нужно подключить к шаблону библиотеку р1о11у.]8. Подключение библио-
теки выполняется по ссылке на СЭМ-сервер:

<зсг!рб згс="Ьббрз://сбп.р!об.1у/р1об1у-1абезб.шгп.д з"></зсг!рб>

Тег <з1у1е>

Для анимации графиков в шаблоне используется НТМЬ-слайдер. Поскольку по умол-
чанию слайдер имеет небольшой размер и с ним не совсем удобно работать пользова-
телям, то изменен его стиль. С теми параметрами, которые заданы в стиле, мы получа-
ем более крупный, а главное — адаптивный слайд, который подстраивается под то или
иное разрешение экрана.

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

Шаблон содержит следующие теги для визуализации объектов:

♦	<сИч 1б="туЗо"></с11ч> — тег для отображения анимированного ЗИ-графика (идентифи-
катор 1с1="туЗО");

♦	«Нч с1азз="зИс1есопба1пег тх-2"> — тег для отображения слайдера (идентификатор
1с1="ту311с1ег").

Кроме того, в шаблоне имеются идентификаторы объектов для приема и показа в шаб-
лоне динамичной информации из 1ауа-скриптов:

♦	1б="с1ето" — текущее значение слайдера;

♦	1а="рг_пх" — показатель степени при «х»;

♦	1б="рг_пу" — показатель степени при «у»;
♦	1с1=’’рг_х_1пах” — максимальное количество товара х;

♦	1с1="рг_у_тах’’ — максимальное количество товара у.

Идентификаторы всех этих элементов выполняют важную роль — они обеспечивают
обмен информацией между шаблонами Р]ап§о и 1ауа-скриптами.

Тег для кода на языке ^уа

Тег <зсг1рб> — самый большой тег в шаблоне. В этом теге содержится программный код
для получения данных из шаблона, для возврата данных в шаблон, функции для гене-
рации данных, модули для формирования графических объектов. Рассмотрим подроб-
нее фрагменты этого кода.

На первом шаге выполняется объявление переменных, которые используются в скрипте:

♦	чаг зИбег — начальное значение слайдера;

♦	чаг оибриб — возвращаемое в шаблон значение слайдера;

♦	чаг рг х тах — возвращаемое количество товара х;

♦	чаг рг у тах — возвращаемое количество товара у.

Затем скрипт получает из шаблона исходные параметры, необходимые для формирова-
ния данных для построения графиков:

♦	1еб Рх — стоимость товара х (рх);

♦	1еб Ру — стоимость товара у (ру);

♦	1еб м — бюджет покупателя (м).

♦	1еб а — показатель степени при х (а).

С использованием полученных данных выполняется расчет следующих значений:

♦	1еб ь = 1 - а (показатель степени при у (а);

♦	1еб х_тах = а * м / Рх (максимальное количество товара х);

♦	1еб У тах = ь * м / Ру (максимальное количество товара у).

После чего из скрипта в шаблон возвращается начальное значение слайдера и ряд рас-
считанных в скрипте параметров:

//Вернуть начальное значение слайдера в шаблон

оибриб.бппегНТМЬ = зИбег .ча!ие / 100;

1еб з1 = зИбег.ча1ие / 100;

1еб а1 = з1

1еб Ь1 = 1 - а!

//Вернуть начальное значение рг_пх, рг_пу в шаблон
чаг п_х = а1; //Показатель степени а при х
чаг п_у = Ы; //Показатель степени Ь при у
рг_пх.бппегНТМП = п_х;

рг_пу.1ппегНТМП = п_у;

рг_х_тах. бппегНТМП = Х_тах;

рг_у_тах.бппегНТМП = У_тах;
Далее производится обращение к функции Кобба — Дугласа г_р_ц из которой возвра-
щаются данные для построения трехмерной диаграммы. Эти данные записываются
в переменные хз, уз и хз:

// Обращение к функции формирования значений хЗ, уЗ, хЗ

1еб х_у_х = ^_р_кб(Рх, Ру, М, а1, Ы);

чаг хЗ = х_у_х[0]; // Массив значений хЗ

чаг уЗ = х_у_х[1]; // Массив значений уЗ

чаг хЗ = х_у_х[2]; // Массив значений хЗ

После ЭТОГО формируются два объекта (кгасеЗ И кгасе4) — данные для формирования
динамичной кривой полезности и точки оптимума. Затем эти данные загружаются
В ОДИН общий СПИСОК (объект баба).

На следующем шаге задаются параметры для макета диаграммы (1ауоиТ1) и формирует-
ся сама диаграмма с использованием следующего метода:

Р1ок1у.пемР1ок(’туЗР’, баба, 1ауоиР1)

Этому методу передаются:

♦	тузо — идентификатор диаграммы в шаблоне Э)ап§о;

♦	баба — данные для построения диаграммы;

♦	1ауоиб1 — параметры макета диаграммы.

Эта диаграмма будет показана в следующем теге шаблона Р]ап§о:

<б1ч с1азз=”гом">

<! — График, трехмерный—>

<614 с1азз="со1-5 гох-2">

<614 1б=”туЗР"></б1ч>

</б1Ч>

</б1Ч>

В завершение следует программный код главной функции, которая обеспечивает ани-
мацию графиков: зИбег.огпприб = Гипсб1оп(). Эта функция принимает текущее значение
слайдера (з1), делает перерасчет данных и выполняет обновление трехмерной диаграм-
мы с учетом обновленных данных. Код этой функции мы подробно рассматривать не
станем, т. к. он во многом аналогичен коду для построения первоначальной диаграммы.

► Интерактивная цифровая книга

В интерактивной цифровой книге (см. приложение 1) для запуска этого примера нужно на
вкладке Показ примеров нажать на кнопку Примеры главы 9 и перейти по ссылке Кривая
полезности Кобба — Дугласа при М-сопз!

Если запустить на выполнение код этого примера, то мы получим ЗЭ-диаграмму функ-
ции полезности Кобба — Дугласа с выделенной точкой оптимума. На рис. 9.3 приве-
дена эта ЗЭ-диаграмма в начальном состоянии (при показателях степени а = 0.5 и
Ь = 0.5) — с помощью мыши диаграмму можно вращать в любой плоскости.

Если мышью менять положение бегунка слайдера, то модули, написанные на ЗауаЗспр!,
будут принимать новые данные из шаблона Р]ап§о, выполнять необходимые расчеты,
обновлять диаграмму и возвращать обновленный график в шаблон Р]ап§о (рис. 9.4).
Как здесь можно видеть, при изменении положения бегунка слайдера изменились как
Значение слайдера: а = 0.5
а=0.5, Ь=0.5
Х=25, У=12..5

Рис. 9.3. Интерактивная 30-диаграмма в начальном состоянии (при а = 0.5 и Ь = 0.5)

Функция полезности Кобба-Дугласа и(х,у)= Х**а * У**Ь

^1 Кривая полезности

Максимум полезности

Значение слайдера: а = 0.8
а=0.8Р Ь = 0.20
Х=40, У=5
числовые параметры (значения показателей степени а и Ь и количества товаров X и У),
так и форма кривой полезности на графике и положение точки оптимума.

При перемещении указателя мыши вдоль кривой полезности координаты текущих
точек будут отображаться на координатной оси. Если указатель мыши остановить на
точке максимума красного цвета, то будет показано оптимальное сочетание количества
товаров X и У при заданном бюджетном ограничении (рис. 9.5).

Значение слайдера: а = 0.27
а=0.27, Ь = 0.73

Х = 13.5( У=18.3

Рис. 9.5. Интерактивная ЗО-диаграмма с указанием координат точки максимальной полезности

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

В этой главе приведены сведения о решении только небольшого круга задач, связанных
с визуализацией данных на базе библиотеки р1о11у.)8 и с 1ауа-скриптами, встроенными
в шаблоны В)ап§о. Более детальную информацию о свойствах и методах элементов
этой библиотеки можно найти в исходной документации, которая находится в Интер-
нете в открытом доступе.

При использовании 1ауа-скриптов значительно упрощается программный код пред-
ставлений (у1еду), написанных на РуЙюп, однако при этом усложняется код шаблонов
В)ап§о, т. к. в них встраивается код на языке 1ауа8спрБ Исходя из этого, библиотеку
р1о11у.)8 рекомендуется использовать программистам, имеющим опыт и навыки написа-
ния программ на 1ауа8спр1. Тем же программистам, которые испытывают некоторые
сложности при работе с 1ауа-скриптами, будет удобнее и эффективнее использовать
библиотеку р1о!1у.ру (см. главу 8).

Послесловие

В этой книге и в сопровождающей ее интерактивной цифровой платформе рассмотрены
только некоторые приемы разработки веб-приложений, обеспечивающие создание ста-
тичных и динамичных элементов сайтов. Примеры и шаблоны НТМЕ-страниц по воз-
можности максимально упрощены. Основная цель книги — познакомить читателей
с некоторыми тонкостями создания приложений на П]ап§о, принципами взаимодейст-
вия между шаблонами этого фреймворка с элементами фреймворка ВооЫгар. Весьма
ценно, что В]ап§о позволяет общаться к таблицам СУБД не напрямую через 8рЬ-
запросы, а через модели данных и пользовательские формы. При этом использование
Воо181гар значительно облегчает программирование пользовательского интерфейса.

Если после знакомства с приведенными материалами вы почувствовали, что РуЙюп
и О]ап^о прекрасно взаимодействуют с ВооЕйар и что применение этого набора инст-
рументов упрощает программистам разработку веб-приложений, то основная цель из-
дания достигнута.

В книге охвачены далеко не все тонкости разработки веб-приложений. Достаточно ак-
туальными являются вопросы удаленной загрузки и хранения изображений, а также
создания географических веб-приложений. Для этого у Р]ап§о есть прекрасное расши-
рение— ОеоВ]ап§о, а также библиотека Маршк и геопространственное расширение
РозЮК для СУБД Ро81§ге8рЕ. Набор этих модулей позволяет максимально упростить
создание географических веб-приложений и служб, основанных на местоположении.
Кроме того, актуальными являются такие темы, как компьютерное зрение и системы
искусственного интеллекта, где также используется РуЙюп, и приложения на базе веб-
технологий. Если это издание окажется востребованным, то следующим шагом автора,
будет подготовка книги и интерактивной цифровой платформы по освещению этих
технологий.

А в завершение остается пожелать удачного применения в своей практической дея-
тельности тех навыков и знаний, которые вы приобрели при изучении материала этой
книги.

Анатолий Постолит
доктор технических наук, профессор

ПРИЛОЖЕНИЕ 1

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

Получать новые знания можно различными способами — путем изучения материалов
книг, журналов, документов, а также на основе общения с преподавателями (на уроках,
лекциях, конференциях, семинарах, тренингах). При этом сама изучаемая информация
может храниться в различных видах: на бумажных или электронных носителях. В по-
следние годы всё большую популярность приобретают цифровые носители информа-
ции — электронные книги. Такой способ хранения и предоставления учебной инфор-
мации имеет следующие преимущества перед бумажными носителями:

♦	компактность и портативность;

♦	возможность быстрого контекстного поиска;

♦	возможность использования аудио- и видеоконтента;

♦	более низкая стоимость и более короткое время на издание и тиражирование;

♦	высокая скорость и удобство распространения через сеть Интернет и по электрон-
ной почте;

♦	экологичность (на издание электронных книг не расходуется древесина).

Особенно эффективно использовать цифровые книги при подготовке 1Т-специалистов.
Изучение программирования только лишь по бумажным книгам — это уже устаревший
и малоэффективный способ обучения. Во-первых, к моменту выхода книги в свет про-
дукт, описываемый в ней, может настолько сильно измениться, что материалы книги
окажутся уже не актуальны, — ведь 1Т-технологии меняются очень быстро. Во-вторых,
для эффективного обучения необходима постоянная практика. Нужно не просто читать
теорию и просматривать примеры программного кода — надо тут же самостоятельно
писать программный код, запускать его на исполнение и исправлять ошибки — чтобы
в цикле «тестирование — отладка» получить работающий модуль.

В книгах по программированию приводятся листинги программ, и их можно набирать
на своем компьютере. Однако, во-первых, обучающийся тратит много времени на то,
чтобы с клавиатуры самостоятельно набрать этот текст — при этом возможны ошибки
и опечатки, требующие много времени на их поиск. Во-вторых, при типографском из-
дании книг в листингах программ часто игнорируются требуемые отступы и пробелы
между фрагментами программного кода, что является нарушением их синтаксиса.
К таким синтаксическим ошибкам особенно чувствителен язык программирования
РуЙюп, и их достаточно трудно искать, особенно новичкам. В-третьих, для работы этих
программ часто требуется подключение дополнительных библиотек и сторонних моду-
лей, которые приходится самостоятельно загружать из Интернета, причем они имеют
много различных версий, не всегда «дружащих» между собой, а некоторые просто не-
совместимы в рамках одного программного модуля.

В таких ситуациях, если программа не работает, новичок просто теряется и не знает,
где искать возникшие ошибки и как их исправить. В итоги читатели пишут гневные
письма в издательство с претензиями на то, что примеры, приведенные в книге, не ра-
бочие, а порой и требуют возврата денег.

В этом приложении приводятся инструкции для читателей цифровых интерактивных
книг (платформ), рассказано о том, как читать такие книги и просматривать их медиа-
контент, а также как покупать платные цифровые интерактивные книги.

^Интерактивная цифровая платформа

Работать с интерактивной цифровой платформой можно, зайдя в нее по адресу гшптк.ги.
Демоверсию платформы можно найти в опции Каталог ее главного меню. Полная версия
платформы будет доступна в разделе Мои книги личного кабинета зарегистрированного
пользователя после ее приобретения в магазине сайта.

Более того, использование полной версии платформы избавляет вас от прибретения
«бумажной» версии книги — если вам это покажется более удобным...

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

Читатели, которые не проходили регистрацию на образовательной платформе «УМНИК»,
могут открывать и просматривать только бесплатные книги с открытым доступом.

Для доступа к цифровым книгам необходимо в меню главной страницы образователь-
ной платформы перейти по ссылке Каталог (рис. П 1.1) — в результате откроется
Панель каталогов, на которой можно выбрать тип каталога книг: Статичный или
Дерево (рис. П1.2).

Редактор "УМНИК” (Учебные Методические Научные
х. Интерактивные Книги)

ти||зд.ш1| ।

Образовательная платформа для получения новых

знаний.

апа1оГу> | а Кабинет]
0 8ы«сд

Наши партнеры

Городские новости

Здесь вы можете найти интерактивные книги и учебные пособия
для получения знаний, которые пригодятся в вашей профессиональной
деятельности.

Рис. П1.1. Опция Каталог в главном меню образовательной платформы «УМНИК»

По нажатию на кнопку Статичный откроется вкладка, содержащая на левой боковой
панели полностью раскрытое (статичное) дерево категорий книг (рис. П1.3).

По нажатию на кнопку Дерево откроется вкладка, содержащая на левой боковой пане-
ли динамичное раскрывающееся (но пока свернутое) дерево категорий книг (рис. П.4).

При первой загрузке динамичного каталога отображается только корень дерева и ссыл-
ка Интерактивные книги для раскрытия его дочерних узлов (веток) следующего
Рис. П1.2. Варианты выбора типа каталога в Панели каталогов

Каталог товаров

• Интерактивные книги
у- Для выпускников
ВУЗов

о Для детей

о Для студентов
Для школьников

Редактор "УМНИК" (Уч<

ий Домашняя

Тип каталога

[^Статичный I Д Дерево

Тип каталога товаров- Статичным

Сделайте выбор товара из каталога

Рис. П1.3. Статичный каталог категорий книг в виде полностью раскрытого дерева

Рис. П1.4. Динамичный каталог категорий книг в свернутом виде

уровня. С помощью этой ссылки пользователь может раскрывать (сворачивать) дочер-
ние узлы (рис. П1.5).

В каталоге можно выбрать любую категорию книг, после чего в центральной панели
откроются карточки книг, которые загружены в БД (рис. П1.6).

Каждая карточка содержит следующую информацию о книге:

♦	категорию, к которой отнесена книга в каталоге;

♦	кнопку Открыть книгу (или Открыть веб-книгу) — для книги с нулевой стоимо-
стью, которая доступна для всех пользователей;
Рис. П1.5. Динамичный каталог категорий книг в развернутом виде

□О Открыть книгу

Ш Открыть веб-к нг-гу



АНиТй/ЫЙ Пэстталлт

РуЩоп

Уроки от сороки

йыгарасг№<№	>—ига для прдфяс-гинмоа

Анатолий Постзлиг

Мастер веб-разработки
на Ру Г Нол и О]апеа

Анатолий Поста л кт, Мастер =сб-

раэработки нэ РуТУюл и Р!Зпаа
1ин~еракгиЕНая ь.^рсеза <н.1га ^ля
гроФсССЛОпагсЕ., Цена: 5СС.00

Рис. П1.6. Карточки интерактивных цифровых книг

♦	кнопку Как купить книгу (или Открыть купленную книгу) — для книг с заяв-
ленной стоимостью, доступных только зарегистрированным пользователям;

♦	изображение обложки книги;

♦	название книги — в виде ссылки, переход по которой щелчком левой кнопки мыши
откроет страницу с кратким описанием книги (рис. П1.7).

♦	цену книги;

♦	количество просмотров книги пользователями Интернета.

Как уже отмечено ранее, в верхней части карточки книги присутствует кнопка От-
крыть книгу или Открыть веб-книгу — если книга находится в свободном доступе.
По нажатию кнопки Открыть книгу будут открыты вкладки типовой цифровой инте-
рактивной книги, загруженной через личный кабинет автора. По нажатию кнопки От-
крыть веб-книгу будут открыты вкладки уникальной цифровой интерактивной книги,
которая создается в инструментарии В)ап§о как отдельное приложение и имеет специ-
фический набор вкладок и библиотек для запуска содержащихся в ней примеров. Она
может быть загружена на образовательную платформу только администратором сайта.
Цифровая интерактивная книга «Мастер веб-разработки на РуЙюп и Р]ап§о» относится
этой категории, и для ее просмотра будет активна кнопка Открыть веб-книгу, но
в бесплатном варианте станет доступна только демоверсия книги, из которой удалены
листинги программ.

©Назад

Наименование продукта - Мастер веб-разработки на РуЩоп и
О]апдо (интерактивная цифровая книга для профессионалов)

Интерактивная цифровая книга для профессионалов

Анатолий Постолит

Мастер веб-разработки
на Ру1Ьол и О|апзо

р я е з з

Цена - ₽500,00

Описание продукта

Постолит А.В. Мастер веб-разработки на РуТИоп и О)апдо (интерактивная цифровая книга). - М.: РозТоН! Ргезз, 2024.-615 с.:
300 ил. Интерактивная цифровая книга предназначена для программистов, которые имеют серьезный опыт работы с
р)апдо. В книге раскрываются некоторые особенности р}апдо и ВооЫгар, позволяющие создать набор сервисов,
обеспечивающий модификацию дизайна и содержания веб-страниц готового сайта без изменения программного кода.
Когда сайт уже выложен на публичный сервер, администратор сайта (и даже пользователи с правами администратора)
через личный кабинет будут иметь возможность добавлять или удалять элементы интерфейса, менять дизайн страниц

Рис. П1.7. Страница интерактивной цифровой книги с ее кратким описанием

Если книга платная, и пользователь ее еще не купил, то кнопка будет иметь надпись
Как купить книгу, и по ее нажатию откроется модальное окно, содержащее информа-
цию о правилах приобретения платных книг (рис. П1.8).

Познакомимся теперь с содержанием вкладок интерактивной цифровой книги «Мастер
веб-разработки на РуЙюп и В]ап§о».

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

Нажмите в карточке книги на кнопку Открыть веб-книгу — откроется страница с на-
бором ее вкладок (рис. П1.9).
Как купить книгу

х

Для того чтобы купить интерактивную цифровую книгу,
нужно зарегистрироваться на сайте, войти в личный
кабинет и открыть в нем опцию Мой магазин. На
странице Мой магазин вы увидите две кнопки для
выбора типа каталога: Статичный и Дерево —
выберите любой тип каталога. После этого на левой
вкладке откроется каталог товаров. Выберите нужную
категорию товара — при этом в центральной вкладке
будут показаны карточки с доступными товарами.
Положите нужный товар в корзину (в корзине может
находиться только одна единица товара), откройте
корзину и создайте заказ. Откройте заказ и оплатите
его. Оплатив заказ, в личном кабинете выберите
опцию Мои книги — на центральной вкладке
откроются карточки с купленными книгами. Нажмите
кнопку Открыть книгу — откроется страница с
несколькими вкладками, на которых можно читать
текст книги и активировать один из ее разделов. Здесь
можно будет просматривать листинги программ
активного раздела и запускать их на выполнение (если
книга по программированию). Кроме того, если в
разделе есть дН-рисунки, видео- или аудиоконтент, то
этот контент можно просмотреть или прослушать,
зайдя на соответствующую вкладку.



Закрыть

Рис. П1.8. Инструкция с порядком приобретения платной интерактивной цифровой книги

Вкладки интерактивной книги

Текст РОЕ Листинги Показ примеров

Рис. П1.9. Вкладки интерактивной цифровой книги «Мастер веб-разработки на РуИзоп и Щапдо»
Для этой книги будут показаны три вкладки:

♦	Текст РВЕ — текстовое содержание книги в виде РВЕ-файла;

♦	Листинги — листинги примеров программных модулей;

♦	Показ примеров — запуск примеров программных модулей книги на выполнение.

Вкладка Текст РОР

Вкладка Текст РВЕ (см. рис. П1.9) имеет титульную строку и две панели: левую боко-
вую и центральную. В левом углу титульной строки расположена кнопка — она
позволяет скрыть/показать левую боковую панель, на которой находятся миниа-
тюры страниц РВЕ-документа и две кнопки: верхняя кнопка Д — предоставляет воз-
можность отобразить миниатюры страниц, нижняя кнопка И — показывает оглавле-

ние документа. С помощью левой боковой панели — либо из миниатюр страниц, либо
из оглавления — можно быстро выбрать нужную страницу документа. Так, при выборе
из оглавления какого-либо раздела книги в центральной панели сразу открывается пер-
вая страница выбранного раздела (рис. ГП. 10).

Вкладки интерактивной книги

Текст РОР Листинги Показ примеров

Примечание

70 /472	—	80%	+	[

фреймворком Воотзтгар 5

2.3. Подключение

ВооТзТгар

2.2. Тег тсЫе для
встраивания шаблонов
О|апдо

Глава 2.Статичные
элементы ВооТзТгар в
шаблонах О]апдо

2.1 Задание
произвольного цвета
элементам ВооЫгар

2.2. Тег тс1и(!е для вс

В элементах ВопЫпгр (в строках и
Однако при большом количестве с
граммный код страницы плохо Ч1гга
сложные НТМЬ страницы разбивал
гую Кроме того, такой подход полис
качестве фрагмента во множестве др
иый тег ТпсХиае, который имеет еле
|1 1пс1ийе "шу_^>вде.ЬЬл11” 1],
здесь пу_раде. Е^пй. имя встраяЕ
ВооОгар, где находится тег ДлсХисй
1 (рнмср НТ М Г-ко.за страницы, в кот
взнпя шаблонов О|ан^о в другие с
с1ибс.Нпп1

Рис. П1.10. Навигация по страницам книги с использованием оглавления в левой боковой панели

В центре титульной строки имеются две кнопки: кнопка Д Д — позволяет увеличить
масштаб отображаемой страницы, а кнопка^Д — его соответственно уменьшить. Пра-
вее находятся еще две кнопки: первая [Н] — позволяет раскрыть страницу на всю
ширину вкладки и свернуть ее до минимального размера, вторая — поворачивает

страницу на угол 90 градусов.

В правом углу титульной строки находятся еще три кнопки: Ц — скачать файл с доку-
ментом, — вывести текст документа на печать, — выполнить еще ряд действий,

предусмотренных этим меню.
Левая и центральная панель оснащены полосами прокрутки, которые позволяют быстро
прокручивать страницы текста.

Вкладка Листинги

При открытии вкладки Листинги активируется раздел текущей страницы с листинга-
ми программ в разрезе глав интерактивной цифровой книги. Каждая глава представле-
на в виде навигационной кнопки (рис. П1.11).

Вкладки интерактивной книги

Текст РСЕ Листинги Показ примеров

<- Листинги главы 1

Рис. П1.11. Навигационная кнопка для открытия листингов первой главы интерактивной цифровой книги

По нажатию на такую навигационную кнопку всплывает левая навигационная панель
со списком листингов программ выбранной главы книги (рис. П1.12).

Листинги главы 1

X

•	Листинг 1.1. Шаблон Ьоо1 рст111М

•	Листинг 1.2. Шаблон аЕэгё ЬМт!

•	Листинг 13. Шаблон со!ог Ьс|.НТт1

•	Листинг 1.4 Шаблон соЗсг-^ехГНттд

•	Листинг 1,5. Шаблон со1ог-1ех1 Ьд.Ыт1

•	Листинг 1.6. Шаблон $расе 1.Ыт1

•	Листинг 1.7. Шаблон зрасе 2,Мт1

•	Листинг 1,8. Шаблон зрасе В.Нтт!

•	Листинг 1,9. Шаблон аНдлтеп! З.Ыгг?

•	Листинг 1,10. Шаблон аЛдптегЧ 2.1п:п^

•	Листинг 1.11. Шаблон ЬсШег 1Ыт1

•	Листинг 1.12, Шаблон ЬсШег 2.Мт1

•	Листинг 1.13 Шаблон ЬсШег со!ог.Ы:т1

•	Листинг 1.14. Шаблон ЬоШег гас1|Ц5ЛМ:т1

•	Листинг 1,13 Шаблон ЬоШег гасНив ЦтЕт!

•	Листинг 1.16. Шаблон сопТ:аЬтег 1.Мт1

•	Листинг 1,17- Шаблон сол!а<пег 2.И1т1

•	Листинг 1.18. Шаблон 1аЫе.К1п11

•	Листинг 1.19. Шаблонные 1.Ыт1

•	Листинг 1.20. Шаблон 1аЬ!е 2,Ыт1

•	Листинг 1.21. Шаблон ТаЫе ЗЫт!

•	Листинг 1.22г Шаблон 1аЫе 4.Ыт1

•	Листинг 1.23 Шаблонные Б.Ыт!

•	Листинг 1.24. Шаблон б.Ыт!

УНИК" Уче

Ин1

вной книги
Наименование каждого листинга представлено в этой панели виде ссылки, при перехо-
де по которой в новой вкладке интернет-браузера отображается листинг программы
(рис. Ш.13).

"УМНИК" - Учебные, М
Научные Интерактив

। д'. Домашняя _ Каталог И О компании Контакты - Отнь

Листинг 1.9. Шаблон аНдптеп€_1Ь1т1

"зЬср/Ьзьв. Н±т1" 56}

Ыоск Ьеайег %}

«Ну с1аь5="гош те х“-септет" >
Выравнивание содержимого адаптивных 5лсксв<ДтД>
<Л11у>

-	[К епсЫоск Неайег ЧЕ}

	{X Ыоск соп±ег»Щ

«Ил» сГаз5= "соп!а!пег сеп±ег’>

«Ну :1аБЗ="гош	Техт-шЫЬЕ" >

«Ну с1ава = " со!" >Блок б первой строкв</с11У>

</<Ну>

< [Ну с 1 а в &=" гош ту-2 1: в иТ -ш Ы±е" >

«Ну с1аь5 = "со1 ти-2 Ь§-рг1_тагу">Блок

«Ну с1ава = "со1 тк-2 Ь^-ргътагу">Блак 2</сИу>

«Ну с 1 а Б2 =" с о 1 тх - 2 Ь § - р г ъта гу " >Бл с к 3 < / сП1? >

</сНу>

</(Ну>

-	[& епсЫоск соп^еп!: %}

Рис. П1.13. Вкладка интернет-браузера с листингом программы

Пользователь может выделить мышью весь код программы или его фрагмент, скопиро-
вать в буфер и сохранить на своем компьютере (рис. П1.14).

Как уже подчеркивалось ранее, программные коды любых примеров интерактивной
цифровой книги пользователи могут использовать в своих проектах.

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

При открытии вкладки Показ примеров отображается раздел текущей страницы для
активации выполнения примеров в разрезе глав интерактивной цифровой книги. Каж-
дая глава представлена в виде навигационной кнопки (рис. П1.15).

По нажатию на такую навигационную кнопку всплывает левая навигационная панель
со списком примеров выполняемых программ выбранной главы книги (рис. П1.16).

Наименование каждого примера представлено в этой панели виде ссылки, при переходе
по которой в новой вкладке интернет-браузера отображаются результаты работы про-
граммных модулей выбранного примера (рис. П1.17).

Таким образом, читатель может не только познакомиться с теоретическими материала-
ми книги, изучить программный код и скачать его на свой компьютер, но и выполнить
любой пример любой главы книги и посмотреть на результаты работы изучаемых про-
граммных модулей.
"УМНИК" - Учебные, Методические,
Научные Интерактивные Книги

Су Домашняя _ Катал рг Щ.О компании Контакты - Стпыбы - Мастер = < “ес-ы ’ н

Листинг 1.9. Шаблон аНдптеп1_1.1т1т1



К*

^хтегон "ьКор/Ьзее  Г1±я1'* %} |

Ыоск пеайег %} |

с1а55="гвы ±вх^-сеп1:рг"> |

<Н4>Выравнмвание содержимого адаптивных 6лрков</114>

; *' 1 у Н

епйЫоск НеаДвг - ' 1 '	'	' '	**

{X Ыоск соп±еп11^}- |

с!аз5="соп1:а±п.ЕГ ёех!:-сеп±ег’> |

<й!у с1а5 5=”г™ Ь^;-зиссезз -ыЫЁс"> |

Е1й55=”СП1" >5/1 ПК В ПЕрВВИ СТрПКВ</с11У>

</с11У> И _	_

Копировать

СМ - С

Копировать ссылку на выделенный текст

</с1ху>
егк!Ь1о]

Найти "{% ейел€|Б гкор/Ьаье.ЫгтГ' %} {% Ыоск НеаЛег%}... ' е Соод1е

Печать...

СМ - Р

Просмотреть код

Рис. П1.14. Копирование листинга программы

Вкладки интерактивной книги

Текст РОР Листинги Показ примеров

<- Примеры главы 1

<- Примеры главы 2

<	- Примеры главы 3

<	- Примеры главы 4

<	- Примеры главы 5

<- Примеры главы 6

<- Примеры главы 7

Рис. П1.15. Навигационные кнопки для открытия примеров глав интерактивной цифровой книги
для их выполнения
Глава 1. Показ примеров

Страница Ьоо1 Р01пШт1
Страница вГаг* 1Мт1
Страница со!ог ЬдМт!
Страница ссйог ГехШт!

Страница со юг Ьд.1^т1

Страница Брасе Х.ЬспгН
Страница ара се 2, Млн
Страница Брасе З.Нтм
Страница акдптеп! 1.1Шп1
Страница аЬдг.теп! 2.1111711
Страница Ьогс1ег 1,Мт]
Страница Ьсгс1ег

Страница Ьсгс^ег со1с<Ы:гп1
Страница ЬогсНег гасИи5,Нт1
Страница ЬоИег гасНив 1.Ы:т1
Страница сопГазпег
Страница сол^лет 2.Нхп^
Страница саЫе.Ьип!

Страница ^аЫе 1,Мт1
Страница гаЫе 2.Ыт1
Страница ^аЫе З.Нт!
Страница саЫе 4.Ыгп1
Страница саЫе 5.Ыт1
Страница саЫе б.Нт!

	<" Учебг  Инте|
	
	
	
	
	

Рис. П1.16. Список примеров выполняемых программ выбранной главы книги

"УМНИК" - Учебные, Методические, Научные апа(О|у->|& кабинет ।

Интерактивные Книги	(3 Выход

мпании

Мастер Гесты ’ Я Анимация ’

Контейнеры с фиксированной шириной

Это страница ВооШгар

Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Колонка 1

Это содержимое

Колонка 2

Это содержимое

Колонка 3

Это содержимое

первой колонки

второй колонки

третьей колонки

Рис. П1.17. Результаты работы программных модулей выбранного примера

ПРИЛОЖЕНИЕ 2

Регистрация интернет-магазина
на сайте платформы КоЬоказза

Для того чтобы на сайте интернет-магазина реализовать оплату по банковским картам
через платежную платформу КоЬоказза, сначала нужно зарегистрироваться на сайте
Ыйр8://гоЬока88а.сот.

В процессе регистрации вам надо будет загрузить на платежную платформу ряд обяза-
тельных документов. После прохождения регистрации для вас будет создан личный
кабинет, и только тогда вы сможете приступить к регистрации интернет-магазина на
сайте КоЬоказза.

Когда клиенты вашего магазина будут совершать интернет-покупки, то деньги с их
банковских карт станут поступать на счет вашего магазина, зарегистрированого на пла-
тежной платформе. И уже с этой платформы вы будете переводить полученные денеж-
ные суммы на свой личный счет или счет вашей фирмы. Естественно, для этого прода-
вец (магазин) должен иметь статус ООО, ИП или самозанятого.

Итак, приступим к регистрации интернет-магазина. Для этого заходим в личный каби-
нет и выбираем опцию Мои магазины (рис. П.2.1).

А Главная

0 Центр продаж

Управление

Мои магазины

Сотрудники и доступ
Тарифы

Рис. П.2.1. Опция Мои магазины в меню личного кабинета платежной платформы РоЬоказза

На открывшейся странице со списком магазинов (рис. П.2.2) нажимаем кнопку Доба-
вить новый и в появившейся форме (рис. П.2.3) формируем карточку магазина, запол-
няя следующие поля с его параметрами:

♦	наименование магазина;

♦	адрес для получения корреспонденции;

♦	интернет-адрес (ИКЕ) главной страницы сайта вашего магазина;
Мои магазины

О Добавить новый

Интерактивные ЭЛ...	= Операции © Вывод средств 0 Настройки

Баланс магазина	АКТИВНЫЙ Магазин

9,65 ₽	Вы можете принимать и выводить деньги

Рис. П.2.2. Страница со списком магазинов личного кабинета платежной платформы КоЬоказза

Наименование магазина

Интерактивные меЬ книги

‘'Адрес для
корреспонденции

С1Р?1_ главной страницы
вашего сайта

Способ вывода средств
кажите реквизиты именно
своего расчётного счёта,
чтобы мы смогли
1еречислить Вам средства)

Ответс_веччое лицо

Тех поддержка

Раздел в котором можно
буде~ найти Ваш магазин

Дополнительное описание

-оваров (работ, услуг)

Такой же как

В Другой

Корп || Стр. || Кв

Оф

ЬЛр ту_5кор.п1

Цифровые ~овары

Мь продаем цифровые \меЬ книги

ххххххххххххххххххххх [безналичны ▼

Иванов Иван Иванович	+~ ▼

[ К-апоу@тайги]- Иванов И.И. ▼

К; Сохранить

Рис. П.2.3. Форма для заполнения карточки интернет-магазина

♦	счет, на который нужно будет выводить полученные деньги, и способ вывода
средств;

♦	ответственное лицо, которое отвечает за техническую поддержку сайта и его элек-
тронный адрес;

♦	наименование раздела, в котором можно будет найти ваш магазин;

♦	описание продаваемых товаров или выполняемых услуг.

Заполненную карточку магазина сохраняем нажатием на кнопку Сохранить.
После этого становится доступна страница с техническими настройками магазина.
Здесь генерируем пароли и адреса перехода на страницы с успешной и неуспешной
оплатой (рис. П.2.4).

Идентификатор магазина

Алгоритм расчета хеша

Пароль #1

Пароль -2

и/еЬ-Ьоок

М05	▼

Сгенерировать

Внимание! Обязательно запишите сгенерированный ।
пароль. После сохранения он будет скрыт в целях
безопасности

КирОНПК^ГсЬЕгеР

Сгенерировать

Внимание! Обязательно запишите сгенерированный
пароль. После сохранения он будет скрыт в целях
безопасности

Незик Он

Пйр: ту_$1тор.п1

Метод отсылки данных по
Незик иг!

О СЕТ ® РОЗТ ЕтаП

Зиссезз 1И	Ййр.7/ ту_зЬор.п1'/рау_ок1ег^	ф

Метод отсылки данных по	пст

Зиссезз 0г1 |

ГаП 11г1 ' Ьгф.? ту_5Ьор.га’рау_огс1ег.'ЪасГ	ф

Метод отсылки данных по | СЕТ ,в р0$т

Еа|| ип

Рис. П.2.4. Страница с техническими настройками магазина

Сгенерированные пароли записываем на бумажный или иной носитель и сохраняем
в защищенном месте (после сохранения страницы пароли перестанут отображаться):

Параметры магазина:

Идентификатор - меЬ-Ьоок

Пароли реальной оплаты:

Пароль 1 - ВсуУТУМТНУдНегТНЕПНдВ

Пароль 2 - ЬЬкиУСЕКЕВЕСЕсМТОЕс!

Пароли тестовой оплаты:

Пароль 1 - УкдВуНезВЕНегЕдПиуПСУН

Пароль 2 - ВущВСЕгВеВамОаНдТдУ

Пояснение

Показанные здесь пароли — вымышленные. Для вас будут сгенерированы реальные паро-
ли, и их нужно обязательно записать и сохранить, поскольку их понадобится указать в фай-
ле зеШпдз.ру вашего проекта.
Далее вам будет предложено сгенерировать параметры тестовых платежей (рис. П.2.5) —
сохраните на внешних носителях и эти пароли и нажмите на странице кнопку Сохра-
нить.

Параметры проведения тестовых платежей

Алгоритм расчета хеша

Пароль #1

МЭ5	▼

йнттпь^вейвыоюсу пь

Внимание! Обязательно запишите сгенерированный
пароль. После сохранения он будет скрыт в целях
безопасности

ЛиЬ'ВОГазПГХ’СГЭшЬОЬё

Сгенерировать

Пароль #2

Внимание! Обязательно запишите сгенерированный
пароль После сохранения он будет скрыт а целях
безопасности

Вернуться

Е Сохранить

Рис. П.2.5. Страница с параметрами тестовых платежей

И вот теперь можно подавать заявку на активацию магазина — нажмите на странице,
показанной на рис. П.2.6, кнопку Запрос на активацию.

вина Технические настройки

Магазин готов к активации. Можете смело подавать запрос на активацию.

Запрос на активацию

Рис. П.2.5. Вкладка с запросом на активацию магазина

Осталось только подождать ответа от менеджеров платежной платформы КоЬоказза.
Они проверят поданные вами ранее (на этапе регистрации личного кабинета) докумен-
ты, банковские и налоговые реквизиты вашей фирмы, ИП или самозанятого. Проверят
они также сайт вашего интернет-магазина (он уже обязательно должен быть выставлен
на публичный сервер) и наличие на его страницах обязательных реквизитов.

Если от менеджеров платежной системы поступят замечания, их следует устранить.
Если замечаний не будет, то вам на электронную почту придет сообщение об успешной
активации магазина.

Далее вы можете приступить к отладке работы модулей оплаты заказов банковскими
картами на тестовых платежах, а при успешном завершении этого этапа — активиро-
вать выполнение реальных платежей.
Предметный указатель

СОХ (Соп1еп1 Вейуегу ХеШюгкз) 16, 21, 22

Зауа8спр117

1п1егпе1 Ехр1огег (1Е) 17

к

КЕЗ (Кезрогшуе Еоп! 81хе) 19

А

Адаптивно-подвижный контейнер 27

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

Адаптивные блоки 27, 28-33, 36, 42-52, 85, 87

Адаптивные размеры шрифтов, КЕЗ 19

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

Адаптивный макет 24

Административная панель В]ап§о 150, 185,
211, 227-229, 231, 232, 240, 259, 302

Аккордеон 20, 69

Атрибут ЬгеГ 71, 98, 99, 108

Б

Базовые цвета Воо1з1гар 72, 73

Библиотека

0 НТМХ 315-317, 322, 323, 326, 330, 332

0 ]Риегу 16, 17

0 ХшпРу 494, 501, 504, 526, 534, 550, 585, 590

0 рапбаз 478, 496, 518, 595, 605,610

0 Р1о11у 477-481, 516, 519, 612

0 р1о!1у.)$ 478, 620, 631, 635

0 р1о!1у.ру 477, 478, 481, 482, 485, 487, 489,
498, 520, 521, 523, 525, 531, 534, 537, 540,
544, 547,550, 551,635

0 8с1Ру501

0 8кйпа§е 477, 478, 595, 600

Библиотеки ЗауаЗспр! 445

Браузер

0 Сйгоше 17, 23

0 ЕпеЕох 17

0 ЗаЕап 17

в

Вертикальные вкладки с кнопками 90

Виджет Ооо§1е Переводчик 434

Вкладки 81, 91

Выравнивание текста 45, 46

г

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

д

Динамическая адресация 106

Динамическая карусель 140

Древовидные структуры 227, 231, 233, 236,
240, 257, 258, 301,314

3

Задание

0 отступов (разрывов) 41

0 цвета рамок 50

0 цвета фону 38

0 цвета шрифту 39

Значки Воо181гар 77
и

Инструмент ГПр РИГ РгоГеззюпа! 428, 429

Интерпретатор СРуНюп 445

Использование

О полос прокрутки 64

О циклов 89

к

Карта О8М (Ореп81гее1Мар, открытая карта
улиц)516

Каскадные таблицы стилей 147

Ключевые точки 527

Компонент

О Ассогбюп 126

О сагб "Карточка" 134

О Сагоизе! "Карусель" 140

0 ОГГсапуаз 92, 93

0 ТаЬз 81

0 ТооШр 97

Контекстные процессоры 339, 341, 344, 346

Контрольные точки 24-26, 28, 34, 36

Кривая полезности Кобба — Дугласа 625

Круговая диаграмма 495, 497

Крутящийся спин 111, 112

м

Макетные координаты 480, 481

Мегаменю 294-300, 302, 305, 306, 311, 312,

339, 350, 368, 369-372, 374

Метатеги 22-24

Модальные окна 20, 71, 115-121, 123-125,

315,321-323,326,332

н

Непрозрачность, орасйу 74

п

Пакет

0 ВгуНюп 421, 445, 466-468

0 О]агщо-трй 227-229

0 МишРу 457, 461, 462

0 рапбаз 461, 462, 464

Панель инструментов 227, 300-302, 304, 306,
310,311

Плагин ше^ашепидз 227, 293-295, 298, 300

Плагины 293

Платежная платформа КоЬоказза 339, 402,
406, 651,652, 654

Подсказки ТооШр 98

Протокол 8МТР 437, 438

р

«Резиновый» контейнер 27, 36

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

Ряды 25-28, 30

с

Сессии 339-341, 376, 378, 379, 384, 387, 389

Сетка НТМЬ-страницы 25

Сеть доставки контента (СОТТ) 22, 23

Скриптовый язык 1ауа8спр1147

Создание

0 границ вокруг блоков 48

0 динамических вкладок 88

0 рамок со скругленными углами 51

0 таблиц 56

Статичная карусель 140

т

Тег

0 тсШбе 71, 75, 76, 91, 128, 170, 201, 224

0 <зспр1> 445

Тепловые карты 502

Терминал РуСйагш 474

Трейсы 479

У

Утилита «желоб» 20

ф

Формат

0 Сапуаз НТМЬ5 428, 429, 431

0 38ОТЧ 479

0 8АУС 428

Формирование границ элементов 47

Формы 612, 635

Фреймворк

0 Воо181гар 637

0 О)ап§о 637

0 Ру8спр1421, 446, 456, 466

Фреймы 583-586, 590, 592, 595

Функция 1ос 518

Я

Язык РуШоп 421, 424, 426, 427, 445, 446,
456-458, 460, 462, 464, 466, 467, 470, 472,
473,615,626, 635