Macromedia Dreamweaver MX

Создание серверных страниц в Dreamweaver

Сохраните готовую Web-страницу в файле Add Record. asp и поместите ее в каталог HTMLs нашего сайта. Вы можете задать для нее те же свойства, что и для других страниц этого же сайта, и поместить в нее какой-либо по­ясняющий текст. Нет смысла описывать, как это делается — уж что-что, а делать обычные Web-страницы вы уже научились.

Создание простейших серверных страниц

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

Content таблицы Guestbook. Максимальная длина этого текста составит 50 символов (или какую там длину текстового поля content вы задали).

Давайте создадим форму, содержащую одно поле ввода и одну кнопку от­правки данных. Назовем поле ввода content, а саму форму — AddRecord. Так мы не запутаемся в многочисленных названиях. Остальные параметры фор­мы мы задавать не будем — это сделает за нас Dreamweaver.

Итак, создайте эту форму. Она будет очень проста — см. рис. 17.8.

Следующий шаг — создание серверного поведения, выполняющего добав­ление записи в таблицу.

Для работы с поведениями нам понадобится панель Server Behaviors (рис. 17.9). Чтобы вызвать ее на экран, включите пункт-выключатель Server Behaviors в меню Window или нажмите комбинацию клавиш <Ctrl>+<F9>.

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

Чтобы создать новое серверное поведение, нужно щелкнуть кнопку со зна­ком "плюс" и выбрать необходимый пункт в появившемся на экране меню серверных поведений. Поведение, добавляющее запись в таблицу, создается

В раскрывающемся списке Connection выбирается нужная база данных, а в раскрывающемся списке Insert Into Table — таблица, куда будет добавлена запись.

В поле ввода After Inserting, Go То вводится интернет-адрес Web-страницы, на которую будет выполнен переход после успешного добавления записи в таблицу. Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File.

В раскрывающемся списке Get Values From выбирается форма, из которой берутся значения для новой записи.

В списке From Elements перечислены все элементы управления, находящие­ся в выбранной форме. Вы можете выбрать любой из них и задать для него поле таблицы, куда будут помещены содержащиеся в нем данные, и тип отправляемых данных (текст, число, дата и т. п.).

Поле таблицы выбирается в раскрывающемся списке ColUmn. Пункт <ignore> этого списка позволяет проигнорировать значение этого элемента управления (т. е. оно не будет помещено в поле таблицы).

Тип отправляемых данных указывается в раскрывающемся списке Submit As. В нем доступны следующие пункты:

□ Text — текстовые данные;

□ Numeric — числовые данные;

□ Date — значение даты;

□ Date MS Access — значение даты, предназначенное для Microsoft Access;

□ Checkbox Y, N — логическое значение, преобразуемое в символы "Y1 ("да") или "N" ("нет");

□ Checkbox 1,0 — логическое значение, преобразуемое в числа 1 ("да") или 0 ("нет");

□ Checkbox -1,0 — логическое значение, преобразуемое в числа —1 ("да") или 0 ("нет");

□ Checkbox MS Access — логическое значение, предназначенное для Microsoft Access.

Задав все нужные данные, не забудьте нажать кнопку ОК. После этого в списке панели Server Behaviors появится новое поведение. А готовая фор­ма добавления записи в гостевую книгу будет подобно рис. 17.11. Как види­те, Dreamweaver поместил в него скрытое поле, специально для своих нужд.

Теперь вы можете проверить созданную ¥еЬ-страницу в действии. Сохра­ните ее, запустите ¥еЬ-сервер, если он еще не запущен, и откройте страни­цу в ¥еЬ-обозревателе. То, что вы увидите, показано на рис. 17.12.

Попробуйте ввести в поле ввода какой-нибудь текст и нажать кнопку Доба­вить. После этого откройте базу данных Guestbook. mdb в Access и посмот­рите, что получилось. В таблице Guestbook должна появиться новая запись, введенная вами.

Если хотите, можете просмотреть исходный код созданной нами серверной страницы. Видите, сколько сценариев JavaScript добавил в нее умница Dreamweaver, чтобы мы смогли добавить запись в таблицу! Пользуясь им и документацией по языку JavaScript и технологии ASP, вы сможете изучить принципы написания серверных сценариев вручную.

Но все это потом. Теперь нам пора сделать следующий шаг к вершинам серверного программирования.

Более сложные серверные страницы

Какой толк в гостевой книге, если посетители сайта не могут просмотреть все записи, добавленные в нее ранее! (Если, конечно, это не "закрытая" книга, только для "своих".) Поэтому давайте сделаем страницу для просмот­ра этих записей. Создадим новую серверную страницу ASP и сохраним ее под именем Guestbook. asp. И приступим...

Создание набора данных

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

Для работы с наборами данных нам понадобится еще одна панель, не рас­смотренная ранее, — Bindings (рис. 17.13). Чтобы вызвать эту панель на экран, включите пункт-выключатель Bindings меню Window или нажмите комбинацию клавиш <Ctrl>+<F10>.

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

Нажмите неизменную кнопку со знаком "плюс", находящуюся в этой пане­ли, и выберите в появившемся на экране меню пункт Recordset (Query). Также вы можете нажать кнопку Recordset (рис. 17.14) вкладки Application панели объектов или выбрать пункт Recordset подменю Application Objects меню Insert. На экране появится диалоговое окно Recordset (рис. 17.15).

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

В раскрывающемся списке Connection выберите зарегистрированную базу данных. Вы также можете нажать кнопку Define; на экране появится диало­говое окно Data Source Name (DSN), с помощью которого вы сможете заре­гистрировать базу данных, если не сделали это ранее.

В раскрывающемся списке Table выберите нужную таблицу зарегистриро­ванной базы данных. Впрочем, она у нас всего одна — Guestbook.

Группа переключателей Columns позволит вам извлечь данные из всех полей выбранной таблицы или только из некоторых. Если вы включите переклю­чатель All (вообще-то он включен по умолчанию), данные будут извлечены из всех полей таблицы. Чтобы извлечь данные только из некоторых полей, включите переключатель Selected и выберите нужные поля в списке, распо­ложенном ниже. Чтобы выбрать сразу несколько пунктов, щелкайте по ним, удерживая нажатой клавишу <Ctrl>.

Чтобы проверить, правильно ли введены параметры, нажмите кнопку Test. После этого на экране должно появиться диалоговое окно Test SQL Statement, похожее на уже знакомое вам окно View Data. Если параметры набора данных введены неправильно, Dreamweaver выдаст вам соответст­вующее окно-предупреждение.

Элементы управления, расположенные в нижней части окна Recordset и предназначенные для задания фильтров, мы рассмотрим позднее. Сейчас же просто нажмите кнопку ОК.

После того как вы создадите новый набор данных, он появится в панели Bindings в виде ветви иерархического списка. Эта ветвь будет содержать все поля созданного набора данных, а также некоторые дополнительные поля, которые не берутся из таблицы, а вычисляются самим процессором баз данных. Такие поля называются системными. Давайте их перечислим.

□ [first record index] — номер первой записи набора, показываемой на те­кущей странице.

□ [last record index] — номер последней записи набора, показываемой на текущей странице.

□ [total records] — количество записей в наборе.

Вы можете использовать системные поля на своих страницах наряду с обычными полями таблицы.

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

Чтобы удалить ненужный набор данных, выделите соответствующий пункт и нажмите кнопку со знаком "минус".

А теперь поговорим о свойствах набора данных. Чтобы увидеть их, вам сна­чала нужно выделить соответствующий пункт списка панели Bindings. Но обычно этого мало — редактор свойств так же будет отображать параметры страницы, открытой в окне документа. Поэтому дважды щелкните по нуж­ному набору данных в списке, чтобы вызвать диалоговое окно Recordset,

SELECT * FROM Guestbook Разберем его пословно:

□ select — ключевое слово, задающее набор полей;

□ * (звездочка) обозначает все поля таблицы;

□ from — ключевое слово, задающее таблицу;

□ Guestbook — таблица.

Как видите, запросы на языке SQL напоминают фразы английского языка. И, в общем-то, они довольно понятны, "прозрачны", как говорят.

Раскрывающийся список Cursor Туре служит для задания типа набора дан­ных. В нем доступны четыре пункта:

□ Static — статический набор данных, содержащий только те записи табли­цы, которые присутствовали в ней на момент выборки. Доступен только для чтения;

□ Forward Only — однонаправленный статический набор данных, по которому можно перемещаться только по направлению от первой записи к по­следней, но не обратно. Обеспечивает более высокое быстродействие, чем простой статический набор данных. Этот пункт выбран по умолча­нию;

□ Dynamic — динамический набор данных, содержащий все записи таблицы и отражающий все изменения, добавления и удаления, сделанные други­
ми пользователями базы данных. Доступен как для чтения, так и для записи;

□ Keyset — ограниченный динамический набор данных, не отражающий до­бавления и удаления, сделанные другими пользователями базы данных.

Раскрывающийся список Cursor Location задает местонахождение набора данных, в смысле, где он обрабатывается: на стороне клиента (пункт Client) или на стороне сервера (пункт Server). По умолчанию выбран пункт Server, и это правильно — ведь мы создаем серверное приложение.

Раскрывающийся список Lock Туре задает тип блокировки. Блокировка ис­пользуется для того, чтобы ограничить доступ к записи, изменяемой каким - либо пользователем базы данных, другим пользователям. Если блокировку не использовать, может произойти конфликт изменения данных, когда од­новременно несколько пользователей будут пытаться сохранить изменения, сделанные в одной и той же записи. Здесь доступны четыре пункта:

□ Read Only — записи набора доступны только для чтения;

□ Pessimistic — пессимистическая блокировка, когда запись блокируется, как только пользователь начинает изменять значения ее полей. Как только пользователь сохранит изменения, блокировка снимается;

□ Optimistic — оптимистическая блокировка, когда запись блокируется толь­ко на момент записи в нее новых значений;

□ Batch Optimistic — разновидность оптимистической блокировки, исполь­зуемой при операциях изменения сразу нескольких записей.

Задайте для нашего набора данных динамический тип (пункт Dynamic рас­крывающегося списка Cursor Туре) и оптимистическую блокировку (пункт Optimistic раскрывающегося списка Lock Туре), т. к. мы будем создавать страницу, добавляющую в таблицу новую запись. Остальные элементы управления пока не трогайте.

Страница, отображающая данные

Серверную страницу, отображающую данные, создать проще простого. По­сле того как мы создали набор данных, нам остается только перетаскивать в страницу нужные поля из панели Bindings — a Dreamweaver сделает все остальное.

Итак, откройте страницу Guestbook. asp, если вы ее еще не открыли. И по­местите в нее динамический текст, отображающий содержимое поля табли­цы Guestbook. Можете считать, что динамический текст — своего рода из­меняемая область шаблона, содержимое которой будет взято из заданного вами поля таблицы.

Как это сделать? Как уже было сказано, просто перетащив нужное поле (в нашем случае — Content) из панели Bindings на Web-страницу. Если вы
уже закрыли эту панель, то можете щелкнуть кнопку Dynamic Text (рис. 17.17) вкладки Application панели объектов или выбрать пункт Dynamic Text подменю Application Objects меню Insert. После этого на экране по­явится диалоговое окно Dynamic Text, показанное на рис. 17.18. Выберите нужный пункт в иерархическом списке Field и нажмите кнопку ОК.

Созданный нами динамический текст выглядит не очень вдохновляюще — см. рис. 17.19. Просто какой-то текст, заключенный в фигурные скобки и выделенный голубым цветом. Чтобы познать его скрытую силу, нам нужно наполнить его реальными данными. А для этого необходимо загрузить стра­ницу в Web-обозревателе...

Но не хочется нам открывать этот Web-обозреватель! Не хочется, и все тут. Ведь Dreamweaver имеет встроенные средства просмотра серверных Web - страниц в том виде, в каком они будут отображены в Web-обозревателе,
вместе со всеми данными. Это так называемый режим показа "живых" дан­ных. И сейчас мы выясним, как в него переключиться.

А сделать это проще простого. Нажмите кнопку-выключатель Live Data View (рис. 17.20) в инструментарии документа. Если вы убрали этот инструмен­тарий с экрана, включите пункт-выключатель Live Data в меню View или нажмите комбинацию клавиш <Ctrl>+<Shift>+<R>. После этого Dream­weaver запросит данные из базы и выведет открытую в окне документа страницу в своем "настоящем" виде (рис. 17.21).

Тарабарщина, которую вы видите на этом рисунке, — содержимое поля Content первой записи таблицы Guestbook. Это отладочные данные, введен­ные автором, чтобы проверить, как работает серверная страница.

Да, но где остальные записи?

Дело в том, что динамический текст показывает только содержимое од­ной — текущей — записи набора данных. Чтобы увидеть все остальные записи, вам нужно будет переместиться на них. Как это сделать? Сейчас мы узнаем.

Создание навигатора

Для перемещения по записям набора данных нужен особый элемент Web - страницы, называемый навигатором. Он состоит из набора гиперссылок или кнопок, выполняющих перемещение на первую, предыдущую, последую­щую и последнюю записи набора. Если вы много работаете в Microsoft Access, вы должны помнить нечто подобное, расположенное в самом низу окна таблицы, а именно — набор из четырех вышеупомянутых кнопок и поля ввода номера записи.

Dreamweaver предлагает нам встроенные средства создания навигатора, со­стоящего из гиперссылок. Давайте воспользуемся ими. Но сначала поставим текстовый курсор в конец созданного нами ранее динамического текста и нажмем клавишу <Enter>.

Чтобы создать гиперссылку и серверное поведение, выполняющие переход на первую запись набора, выберите пункт Move То First Record в подменю Recordset Paging меню серверных поведений панели Server Behaviors. На экране появится диалоговое окно Move То First Record (рис. 17.22).

В раскрывающемся списке Recordset выберите нужный набор данных и на­жмите кнопку ОК. Dreamweaver создаст в месте, где находится текстовый курсор, гиперссылку с текстом "First". Замените ее текст на что-нибудь рус­скоязычное (например, "Первая") или более понятное ("«"). Все, на этом создание гиперссылки, выполняющей переход на первую запись набора, закончено.

Поставьте после гиперссылки "<<" два-три неразрывных пробела, нажав нужное количество раз комбинацию клавиш <Ох1>+<5Ый>+<пробел>. Так мы отделим одну гиперссылку навигатора от другой.

Чтобы создать поведение, выполняющее переход на предыдущую запись набора, выберите пункт Move То Previous Record в подменю Recordset Paging меню серверных поведений. На экране появится диалоговое окно Move То Previous Record, аналогичное окну Move То First Record. Точно так же выберите в раскрывающемся списке Recordset нужный набор данных, нажмите кнопку ОК и замените текст созданной гиперссылки на "<". По­ставьте после второй гиперссылки два-три неразрывных пробела. И про­должим.

Поведения, выполняющие переход на последующую и последнюю записи набора, создаются путем выбора пунктов Move То Next Record и Move То Last Record соответственно. Одноименные диалоговые окна полностью схо­жи с окном Move То First Record. Так что никаких неожиданностей не должно возникнуть.

Результат наших трудов показан на рис. 17.23. Проверьте, все ли у вас полу­чилось.

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

Гостевая книга (HTMLs/Guestbook. asp)

{Guestbook. Content} <<<>>>

Рис. 17.23. Готовая страница Guestbook. asp с навигатором

Сохраните готовую серверную страницу. К сожалению, проверить ее в ре­жиме просмотра "живых" данных у нас не получится: хоть Dreamweaver и заменит динамический текст реальными данными, гиперссылки навигатора работать не будут. Поэтому придется все-таки открыть ее в окне Web - обозревателя. Попробуйте пощелкать по ссылкам и посмотрите, как меняет­ся содержимое динамического текста.

Создание строки статуса набора данных

Вспомните окно таблицы Microsoft Access. Возле навигатора там отобража­ется небольшое текстовое поле с номером текущей записи и общим количе­ством записей в таблице. Давайте сделаем такое же поле и на нашей сер­верной страничке, т. е. создадим строку статуса набора данных.

А для этого нам понадобятся системные поля этого самого набора данных. Напомним, что это такое. Системным полем набора данных называется поле, не взятое из таблицы, на основе которой создан этот набор, а созданное самим процессором баз данных и отображающее какую-либо служебную информацию. Таких системных полей Dreamweaver предлагает три: [first record index] (номер первой записи набора, показываемой на текущей странице), [last record index] (номер последней записи, показываемой на текущей странице) и [total records] (общее количество записей в наборе). И все они отображаются в панели Bindings в виде одноименных пунктов (см. рис. 17.13).

Итак, поставьте текстовый курсор после самой последней гиперссылки на­вигатора и нажмите клавишу <Enter>. В новом текстовом абзаце наберите текст "Запись" и поставьте после него неразрывный пробел. Именно здесь мы и создадим новый динамический текст, связанный с системным полем [first record index]. Как это сделать, вы знаете. Впрочем, если вы хотите, можете привязать этот динамический текст к полю [last record index] — все равно на нашей странице отображается только одна запись.

Теперь поставьте обычный пробел, введите текст "из", поставьте неразрыв­ный пробел и создайте второй динамический текст, привязанный к систем­ному полю [total records]. Вот и все.

Готовая страница СиейЬоок. аяр с навигатором и строкой статуса показана на рис. 17.24. Сохраните ее и откройте в ¥еЬ-обозревателе, чтобы прове­рить работу строки статуса.

Страница для одновременного просмотра нескольких записей

Ох и хорошая у нас получилась серверная страничка! (Не смотрите, что вы­глядит она весьма коряво, ведь сейчас наша задача — научиться писать сер­верные страницы. Впрочем, Web-дизайн мы уже "прошли", так что можете по ходу дела заняться украшательством.) Одно плохо — показывает она только одну запись набора. Конечно, мы создали навигатор и строку статуса набора данных, но толку от них не очень много. Вот как бы нам "запихать" на одну страничку сразу несколько записей!..

Что, вы хотите несколько записей на одной странице? Запросто!

Создайте новую серверную страницу и сохраните ее в файле Guestbook_table. asp. Именно ее мы и превратим в чудо современного про­граммистского искусства, показывающего несколько записей одновременно.

Первым делом создадим набор данных с такими же, как и у страницы Guestbook. asp, параметрами. Назовем его так же — Guestbook. После этого поместим на страницу динамический текст, привязанный к полю Content набора данных. И напоследок поставим текстовый курсор в конце этого ди­намического текста и нажмем клавишу <Enter>. Все это вам уже знакомо.

А теперь остановимся. И поговорим.

Что мы видим в окне документа? Ничего странного — просто серверная Web-страница, похожая на созданную нами ранее Guestbook. asp. Набор данных, динамический текст — и все. Если теперь открыть ее в Web - обозревателе, она отобразит нам одну-единственную запись. Мы уже это наблюдали.

Да, но нам нужны несколько записей на одной странице!

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

Да-да, нашу серверную страничку можно уподобить шаблону! В самом деле, в Dreamweaver мы создали своего рода образец Web-страницы, который в дальнейшем будет наполняться полезным содержимым. Только делать это будет не Web-дизайнер, а серверный сценарий. И данные он будет брать не из своей головы (или головы Web-писателя), а из базы данных.

Чтобы создать повторяющуюся область, сначала выделите фрагмент страни­цы, который станет ее содержимым. В нашем случае — это динамический текст, привязанный к полю Content набора данных. Затем выберите пункт Repeat Region меню серверных поведений панели Server Behaviors. После этого на экране появится диалоговое окно Repeat Region (рис. 17.25).

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

Если вы хотите, чтобы на странице отображались все записи набора дан­ных, включите переключатель All Records группы Show. Это стоит делать тогда, когда вы уверены, что записей в вашем наборе не очень много, или если содержимое их невелико по размеру. В противном случае лучше всего показывать содержимое набора данных по частям; для этого включите верх­ний переключатель группы Show и введите количество одновременно ото­бражаемых записей в поле ввода Records at a Time.

Давайте сделаем нашу страничку как можно меньше. Для этого зададим ко­личество одновременно отображаемых записей, равное трем. Это позволит нам не вводить слишком много отладочных записей в таблицу Guestbook базы данных Guestbook. mdb.

Введя все данные, нажмите кнопку ОК. Если вы передумали создавать по­вторяющуюся область, нажмите кнопку Cancel. Готовая повторяющаяся об­ласть показана на рис. 17.26.

Если теперь включить режим показа "живых" данных Dreamweaver, мы уви­дим следующее — см. рис. 17.27. Как видите, она "выдала" нам содержимое всех трех записей, что есть в таблице Guestbook.

Теперь осталось добавить к нашей странице навигатор. Конечно, это будет не такой навигатор, который мы создали ранее. В данном случае нам нужно перемещаться не от записи к записи, а от страницы к странице. Но вам не нужно об этом беспокоиться — все хлопоты по отсчету необходимого коли­чества записей возьмет на себя Dreamweaver. Поэтому просто создайте на­вигатор, как мы делали это раньше.

Если хотите, вы можете создать также строку статуса для набора данных. Здесь вам понадобятся оба системных поля, отображающих количество по­казываемых на странице записей: [first record index] И [last record index]. Как вы помните, первое из них показывает номер первой записи, присутствующей на странице, а вторая — номер последней из показывае­мых записей.

Осталось сказать о параметрах повторяющейся области. Чтобы задать их, выделите нужную повторяющуюся область и посмотрите на редактор свойств (рис. 17.28).

* Properties