Основы работы в Dreamweaver
Создание страницы вывода
Страница ввода готова. Пора продемонстрировать, как ASP, ColdFusion или PHP могут собирать эту информацию, вставлять ее в обычный XHTML-код и возвращать браузеру.
- Создайте новую динамическую страницу.
Этот шаг повторяет действия, описанные на шаге 1 предыдущего упражнения.
- Сохраните новый файл как test_form_processor.asp.
В названиях страниц, используемых для обработки данных, я обычно добавляю суффикс "_processor". Созданная страница будет обрабатывать данные, введенные пользователем в форму.
- В режиме Design (Дизайн) введите текст "Thank you, , for filling out my form" ([Имя пользователя], мы признательны Вам за заполнение формы). Поместите курсор в любое место абзаца и в поле со списком Format (Формат) на панели Property Inspector (Инспектор свойств) выберите пункт Paragraph (Абзац).
В итоге, текст будет выглядеть следующим образом: "Thank you, [имя пользователя], for filling out my form". Большая часть предложения представляет собой статический текст. К динамической части относится имя пользователя, которое будет извлечено из формы.
При выборе в раскрывающемся списке Format (Формат) пункта Paragraph (Абзац) строка текста помещается между тегами <p> и </p>.
увеличить изображение - Поместите курсор между запятыми, где должно находиться имя. Откройте панель Bindings (Привязки) с помощью команд Window\ Bindings (Окно/Привязки).
Панель Bindings применяется для указания всех данных, которые доступны на странице. Эти данные, как правило, хранятся в виде пары "имя-значение". В данном случае имя – firstName. Значения еще не существует, и оно не появится до тех пор, пока кто-нибудь не заполнит форму. Следует также помнить, что значение попадает на страницу вывода из формы, расположенной на странице test_form.asp. Помимо форм к возможным источникам данных относятся URL-адреса, наборы записей (данные, полученные из базы данных), файлы cookie и т.д. О других источниках речь пойдет позже, а в этом упражнении данные поступают из формы.
- Нажмите кнопку со знаком "+", чтобы прикрепить новое значение. В поле со списком выберите вариант Request Variable (Переменная запроса) (ASP) или Form Variable (Переменная формы) (ColdFusion и PHP). В случае с ASP в появившемся диалоговом окне выберите в поле со списком Type (Тип) пункт Request.Form, а в поле Name (Имя) введите "firstName". В случае с ColdFusion или PHP введите в текстовое поле Name имя firstName. Нажмите OK.
На первом примере показано диалоговое окно Request Variable, которое отобразится при использовании ASP, а на втором – диалоговое окно Form Variable, которое увидят пользователи ColdFusion и PHP.
Панель Bindings (Привязки) будет обновлена, и в ней отобразится переменная firstName. На примере показано, как выглядит панель Bindings при использовании ASP. В случае с ColdFusion и PHP она несколько отличается (вместо слова Request [Запрос] используется слово Form [Форма], а надпись Form.firstName заменяется надписью firstName).
Если взглянуть на код, окажется, что документ совсем не изменился, то есть код остался прежним, как и до открытия панели Bindings. Цель действий заключалась в том, чтобы при помощи графического интерфейса сообщить Dreamweaver, как написать блок динамического кода.
В начале урока, один за другим, было приведено три фрагмента кода (на ASP, ColdFusion и PHP). В коде была указана переменная (firstName), ее источник (форма) и действия, которые с ней следует предпринять (вывести в XHTML). Действия, выполненные с помощью панели Bindings (Привязки), реализовали эту логическую взаимосвязь в том виде, который Dreamweaver способен понять и преобразовать в код.
В случае с ASP определена переменная запроса (Request Variable). В ASP объект Request применяется для получения информации из заданного места. В диалоговом окне выбран тип Request.Form, дающий указание искать в объекте Request переменную, которая задается через форму. Наконец, указано имя самой переменной. Образно говоря, Dreamweaver и ASP приобрели "дорожную карту", с помощью которой можно найти значение переменной firstName.
В случае с ColdFusion и PHP определена переменная формы (Form Variable), которой достаточно для поиска (объекты Request и прочая уточняющая информация не требуются). Затем указано имя переменной. В данном случае тоже подходит сравнение с дорожной картой.
К этому моменту Dreamweaver располагает исчерпывающей информацией о том, как найти переменную. Но программа еще не получала ни указания искать ее, ни инструкций по обработке значения переменной после того, как она будет найдена.
В случае с ColdFusion и PHP определена переменная формы (Form Variable), которой достаточно для поиска (объекты Request и прочая уточняющая информация не требуются). Затем указано имя переменной. В данном случае тоже подходит сравнение с дорожной картой.
К этому моменту Dreamweaver располагает исчерпывающей информацией о том, как найти переменную. Но программа еще не получала ни указания искать ее, ни инструкций по обработке значения переменной после того, как она будет найдена.
- Убедитесь, что на панели Bindings (Привязки) выделена переменная Form.firstName (ASP) или firstName (ColdFusion/PHP), после чего нажмите кнопку Insert (Вставить), расположенную внизу панели.
На странице между запятыми появится надпись {Form.firstName}, выделенная синим цветом. В Dreamweaver синим цветом обозначается текст, относящийся к динамическому содержимому. При просмотре страницы в браузере синий цвет показан не будет. Не будет отображаться и надпись {Form.firstName}, вместо нее отобразится имя пользователя.
увеличить изображение
Примечание. Надпись {Form.firstName} внешне напоминает код, но на самом деле является псевдокодом. Внешний вид надписи не зависит от серверной модели. Возможно, псевдокод применяется для того, чтобы указать, какая часть страницы относится к динамическому содержимому. Главное – не пытаться использовать этот синтаксис при написании кода.
В действительности, на страницу будет добавлен следующий код: <%= Request.Form("firstName") %> (ASP), <cfoutput>#form.firstName#</cfoutput> (ColdFusion) или <? php echo $_POST['firstName']; ?> (PHP). Это те же фрагменты кода, которые демонстрировались в начале урока, с небольшим изменением в коде ASP.
Для того чтобы сервер IIS вывел значение на страницу, используется объект Response (Отклик). Чаще всего, объект Response используется в виде Response.Write(). Эта команда указывает IIS вставить в документ текст, расположенный внутри скобок. Функция Response.Write() эквивалентна (с небольшими отличиями) <cfoutput> или echo. Она настолько часто применяется, что имеет и сокращенный вариант. Сочетание <%= (вместо <%) в начале ASP-кода означает <% Response.Write(). Другими словами, две строки кода, приведенные ниже, абсолютно равнозначны.
<% Response.Write(Request.Form("firstName")) %> <%= Request.Form("firstName") %>
Итак, в двух предыдущих шагах при помощи кнопки со знаком плюс "+", расположенной на панели Bindings (привязки), была добавлена информация для Dreamweaver и ASP (Dreamweaver и ColdFusion, Dreamweaver и PHP) о том, как найти переменную firstName. Затем переменная была прикреплена на страницу, благодаря чему ASP, ColdFusion или PHP получили информацию о том, как найти и отобразить ее текущее значение. - Сохраните и закройте все открытые документы. На панели Site (Сайт), удерживая нажатой клавишу (Shift), выделите файлы test_ form.asp и test_form_processor.asp. Нажмите кнопку Put File(s) (Поместить файл [-ы]), расположенную на панели инструментов в верхней части панели.
Пока сайт не запущен на сервере, протестировать его невозможно. Поэтому для того, чтобы выполнить проверку сайта, следует загрузить (или поместить) файлы на сервер.
Совет. Об этом шаге достаточно легко забыть. Если в процессе разработки возникнет неожиданная ошибка, первое, что нужно проверить при ее поиске – все ли необходимые файлы были загружены. - На панели Site (Сайт) выделите файл test_form.asp и нажмите клавишу (F12), чтобы протестировать его в браузере. Когда страница загрузится, введите в поле свое имя и нажмите кнопку регистрации Submit.
Загрузится страница test_form_processor.asp, и введенное в форму имя отобразится на экране.
- Не закрывая браузер, в меню View (Вид) выполните команду Source (Источник) (или эквивалент этой команды в браузере). Обратите внимание на строку, размещенную между тегами <p>.
Интересно, что динамический код был полностью удален! Код страницы представляет собой статический XHTML. Даже имя, относящееся к динамической части надписи, выглядит так, словно изначально записывалось в виде статического кода. Но это, конечно, не так.
увеличить изображение
Беглый анализ кода приводит к пониманию важного принципа. Код, вводимый в Dreamweaver, отличается от кода страницы, которую пользователь видит в браузере (даже несмотря на то, что у обеих страниц одно и то же имя – и, конечно, много других общих свойств).
Разница между двумя версиями страницы возникает вследствие того, что код исходной страницы (ASP, ColdFusion или PHP) обрабатывается, а затем заменяется XHTML-кодом полученных значений.
Два варианта страницы имеют и некоторые сходные черты. Весь стандартный XHTML-код исходной страницы (в том числе, теги <body> и <p>, а также большая часть текста) остался неизменным в ее итоговой версии.
