Web-разработка с Macromedia Studio MX



Связь Dreamweaver MX и ColdFusion MX


Благодаря включению приложения ColdFusion MX в PC-версию пакета MX Studio пользователи могут создавать динамические страницы даже без серьезных знаний Web-дизайна. Теперь динамические страницы можно создавать даже с помощью средств, установленных на личных компьютерах.



Рис. 20.4. В базу данных введены дополнительные товары. Обратите внимание на связь полей ProductTypelD в таблицах Product и ProductType

Замечание
Одна страница шаблона может служить для описания множества продуктов. Создание единого шаблона для нескольких страниц уже описывалось в главе 19, Преимущества данного метода заключаются в том, что компоновка выполняется всего один раз, и изменения, внесенные в шаблон, сразу же отражаются на всех страницах, созданных на его основе.

Для того чтобы создать динамическую страницу средствами Dreamweaver MX и ColdFusion MX, выполните следующие действия.
1. Откройте Dreamweaver MX и создайте новый узел JCT Dynamic, использовав для его размещения подкаталог JCT site папки Chapter 20 Exercise рабочего стола.
2. Создайте новый текстовый документ, выбрав в меню пункт File=>New. Когда откроется диалоговое окно New Document, выберите раздел General. В нем в области Category выберите значение Other, а в области Other — значение Text (рис. 20.5). Щелкните на кнопке Create. Откроется пустая страница с цветной полоской вдоль левой границы. В этом типе документа может отображаться только текст.
3. Вначале поработаем с заранее подготовленной категорией продукции — обувью. Сохраним новый текстовый документ под именем shoes.сfm. При этом страница останется пустой страницей ColdFusion. На этой странице вы ничего не увидите, так как она создается исключительно для хранения программы ColdFusion. На этой странице будет храниться шаблон, содержащий компоновку динамического содержания.



Рис. 20.5. Создание текстового документа

4. Откройте панель Server Behaviors, выбрав сначала панель Application, а затем вкладку Server Behaviors. Щелкните на кнопке со знаком "плюс" и в предложенном списке выберите значение Recordset (Набор данных). Откроется диалоговое окно Recordset
5. В различные области этого диалогового окна следует ввести следующую информацию: Name (имя) — введите getProductType; Data Source (источник данных) — jct (Dreamweaver отобразит сообщение о том, что это предполагает использование схемы JCT, т.е. открытие всех таблиц в базе данных); Table (таблица) — Product Type; Columns (поля) — Аll.
6. Внизу диалогового окна вы увидите четыре вопроса о том, как вы хотите получать записи из базы данных. В окне Recordset установите фильтр следующим образом.
В списке Filter выберите значение ProductType.
В поле справа от списка Filter выберите знак равенства.
В списке под списком Filter выберите значение Entered Value (Введенное значение).
В списке, расположенном под предыдущим, введите слово Shoes.
Итак, мы установили параметры поиска в базе данных. Если вы следовали инструкциям по заполнению области ввода, то все сделанное можно описать одной простой фразой: "Если тип продукта есть "обувь", сделать нечто".
7. В окне Recordset (рис. 20.6) щелкните на кнопке ОК, и созданный запрос будет записан на страницу ColdFusion. Созданный набор данных теперь будет отображаться в списке Server Behaviors.
8. Следующий набор данных, который нам следует создать, будет более сложным. Щелкните на знаке "плюс" в панели Server Behaviors. Когда откроется окно Recordset, щелкните на кнопке Advanced. Откроется окно конфигурирования набора данных.
9. В текстовом поле Name введите productList. Из списка источников данных (Data Source) выберите jct. Система выведет сообщение о загрузке вышеуказанной схемы. Когда это сообщение закроется, в разделе Database Items в нижней части окна отобразится структура базы данных jet.
10. В области Database Items щелкните на знаке "плюс" (рядом со значком Table). Обратите внимание на то, что в базе данных JCT созданы две таблицы. Откройте таблицу Product, щелкнув на знаке "плюс" рядом с ее названием. В отобразившемся списке полей выберите ProductID и щелкните на кнопке SELECT. В области SQL окна Recordset отобразятся две строки запроса.



Рис. 20.6. Доступ к информации* базе данных осуществляется с помощью создания набора данных (т.е. запроса) в окне Recordset

11. По очереди щелкните на полях Product, Description, Price и Graphic URL, не забывая щелкнуть на кнопке SELECT (Выбрать).
12. Сверните таблицу Product в области Database Items, щелкнув на знаке "минус" рядом с ее названием. После этого разверните таблицу ProductType.
13. Щелкните на поле ProductType в одноименной таблице и выберите это поле (кнопка SELECT). Обратите внимание, что в области FROM запроса отобразилось имя и этой таблицы.
14. Сверните таблицу ProductType.
15. Перейдите к строке, следующей за FROM в области SQL, и введите следующий текст.

WHERE ProductType.ProductTypeID= Product.ProductTypelD AND ProductType.ProductType='Shoes'

Первая описанная строка связывает две таблицы базы данных по их общему полю — ProductTypeID. В результате мы можем получить для товара наименование его группы.
Вторая строка устанавливает фильтр. В данном случае мы хотим получить записи, соответствующие группе товаров "Shoes" (Обувь).
После выполненных действий окно Recordset должно выглядеть так же, как на рис. 20.7.



Рис. 20.7. Расширенный запрос к базе данных позволяет с большей точностью отобразить требуемую информацию на динамической странице

16. Если вы хотите протестировать запрос SQL, щелкните на кнопке Test. Откроется окно тестирования с результатами запроса (рис. 20.8).
17. Щелкните на кнопке ОК, и окно Recordset закроется. Набор данных productList отобразится на панели Behaviors.
Перемещение программ с одной страницы на другую
Только что созданную программу можно использовать на странице узла productlist.cfm, завершив, таким образом, динамическую компоновку. Вместо того чтобы повторять все ранее описанные действия по созданию двух наборов данных, можно скопировать сгенерированную программу на страницу списка продукции.
Для того чтобы перенести программу с одной страницы на другую, выполните следующие действия.
1. На странице shoes. cfm выберите в меню пункт View=>Code. Текст программы с двумя созданными наборами данных отобразится на странице. Выделите все строки этого текста и скопируйте их в буфер обмена.
2. Откройте панель Files и дважды щелкните на странице productlist. cfm, чтобы открыть ее.
3. Когда страница откроется, откройте представление Code and Design (View=>Code and Design).



Рис. 20.8. Щелкнув на кнопке Test, можно протестировать созданный запрос в открывшемся окне с результатами запроса

4. Щелкните на первой строке в верхней части окна в месте, предшествующем дескриптору <html>.
5. Вставьте из буфера обмена скопированную программу и нажмите клавишу <Enter> (или <Return> на компьютерах Мае). В первых восьми) строках представления программы отобразится текст ранее созданного запроса.