Создадим в качестве примера небольшой скрипт магазина с возможностью выбора языка (английский и руссский) — продажа коллекций gif-галерей с возможностью просмотра всех фото каждой галереи, с формой заказа. Будем использовать следующие плагины: imageFlow (для просмотра галереи рисунков), fancybox (для создания формы заказа). Меню реализуем средствами базовой библиотеки jQuery. С помощью библиотеки xajax осуществим подгрузку контента страниц "О сайте" и "Контакты". Файлы примера находятся на компакт-диске в папке book_primers/2-7. Страница примера при загрузке приведена на рис. 2.27.

Для получения библиотеки Smarty с официального сайта, перейдите по адресу http://www.smarty.net/download.php. В появившемся окне (рис. 2.31) выберите версию, например последнюю стабильную (Latest Stable Release 2.6.26) и нажмите

на ссылку zip (рис. 2.31). Сохраните файл на компьютере. Распакуйте архив в корневой каталог сайта.

Консорциум W3C (http://www.w3.org/dom) определяет DHTML как спецификацию открытой объектной модели, которая обеспечивает полный доступ к документу и позволяет свободно манипулировать всем документом и его содержимым. Все элементы документа являются программируемыми объектами, управляемыми событиями мыши и клавиатуры. Благодаря DHTML такие операции, как добавле-

На сайтах часто приходится решать задачу добавления (или удаления) полей для уже существующей формы. Создадим форму заказа экскурсии для группы людей. В форму необходимо вводить ФИО каждого человека. Поля для ввода ФИО будем добавлять динамически при нажатии ссылки Добавить человека. Также может возникнуть необходимость удалить человека из списка. Файлы примера расположены на компакт-диске в папке book_primers/2-4. В файле index.php создадим форму с необходимыми полями. Начальный вид страницы представлен на рис. 2.14. Содержимое файла index.php приведено в листинге 2.16. Экскурсии выбираем из выпадающего списка. Рассматриваемый пример будем делать без использования баз данных, поэтому каждое значение option будет содержать цену и название экскурсии, разделенные символом ;. Первое поле input для ввода ФИО имеет id=name1. Последующие созданные поля будут иметь id=name2, name3 и т. д. Так как эти поля могут создаваться и удаляться в произвольном порядке, необходимо иметь указатель на последний созданный ID. Оно будет храниться в скрытом поле input с id=counted. Необходимо иметь скрытое поле с указанием удаляемого элемента, его значение будет устанавливаться при нажатии на ссылку Удалить перед передачей значений формы xajax-функции Delete_Input.

Для отправки сообщений администратору сайта созданы программы переписки на сайте. Пользователь может:

отправлять сообщения администратору;

получать сообщения;

смотреть сообщения списком и по отдельности;

удалять сообщения.

Просмотр сообщений пользователя списком

Приступим теперь к рассмотрению примеров использования xajax.

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

Классический вариант применения технологии AJAX — проверка правильности заполнения полей формы до отправки данных на сервер. Немного усложним этот пример. Во-первых, блокируем возможность нажатия на кнопку submit до правильного заполнения всех полей формы и, во-вторых, отправим данные на сервер без перезагрузки страницы. Файлы примера расположены на прилагаемом компакт-диске в папке book_primers/2-1. В файле index.php подключаем файлы библиотеки xajax, создаем объект xajax, регистрируем функции, к которым можно обращаться из JavaScript (xajax_Control, xajax_Result), и разрешаем обрабатывать xajax асинхронные запросы. Это серверная часть файла index.php. Клиентская часть — HTML-код формы регистрации. Проверка полей формы происходит следующим образом. Для предотвращения отправки непроверенных данных изначально кнопка submit неактивна (свойство disable=true). По событию onchange каждого элемента формы Form1 происходит вызов xajax-функции Control, в которую передаются все данные формы (xajax.getFormValues("Form1")). Функция проверяет правильность заполнения каждого поля. При неверном заполнении выводится сообщение ERROR, при правильном — OK. Для предотвращения отправки непроверенных данных изначально кнопка submit неактивна (свойство disable=true). В случае правильного заполнения всех полей, делаем кнопку submit активной. Содержимое файла index.php приведено в листинге 2.5.

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

Заходим на сайт и нажимаем на ссылку Скачать Denwer 3 (рис. 1.12).

Перейдя по ссылке Скачать Denwer 3, попадаем на страницу, где нам будет предложено зарегистрироваться, чтобы получить ссылку для скачивания Денвера (рис. 1.13).

При нажатии на кнопку Оформить заказ (см. рис. 3.24), данные заказа передаются xajax-функции Create_Zakaz, которая расположена в файле prgzakaz/create_ zakaz.php (листинг 3.50).

Листинг 3.50

<?php

function Create_Zakaz($Id)

{

$objResponse = new xajaxResponse();

Как мы уже говорили, для каждого типа пользователей определен свой набор пунктов главного меню. И для каждого пункта главного меню задан свой выбор подпрограмм, которые нужно выполнить для формирования контента выбранного пункта меню. Набор программ для каждого пункта меню для разных типов пользователей берем из таблицы mainmenu базы данных (поле prgprg). Набор блоков вывода контента для каждого набора программ — из поля prgdiv. Для наглядного представления составим таблицы выбора подпрограмм при выборе пункта главного меню для разных типов пользователей (табл. 3.1 – 3.3).

Реализуем еще вывод блока показа товаров по акции (специальную цену на товар устанавливает администратор). Для каждого товара кроме обычной цены можно назначить и специальную при проведении различных акций. При этом старая цена товара будет перечеркнута красным. Список товаров по акции будем выводить под заголовком "Акция" в блок с id=left2 (рис. 3.19).