Урок 4: Динамические веб-сайты

Создание простого динамического приложения

Если при тестировании сайта на удаленном сервере главная страница отобразилась в браузере должным образом, значит все настроено правильно. Тем не менее, действительно динамических страниц на сайте Newland Tours пока нет. В этом упражнении на примере создания простого динамического приложения демонстрируются принципы работы динамических сайтов и приводится последовательность шагов, необходимых для того, чтобы приложение заработало.

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

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

1. В меню File (Файл) выполните команду New (Создать) (сайт Newland Tours должен быть открыт). В списке категорий, расположенном в левой части диалогового окна New Document (Новый документ), выберите пункт Dynamic Page (Динамическая страница), а затем в столбце справа укажите пункт ASP, ColdFusion или PHP. Убедитесь, что установлен флажок Make document XHTML compliant (Сделать документ совместимым с XHTML). Нажмите Create (Создать).
   

   
   

   На этом шаге создается новая динамическая страница. Определение типа динамической страницы позволяет указать Dreamweaver, какой код использовать во встроенных в программу моделях поведения сервера, какое расширение добавлять при сохранении файла и (в некоторых случаях) какой код следует добавлять в заголовок документа.

   При использовании ASP на страницу будет добавлена строка <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>. Эта строка определяет, какой язык применяется с ASP: VBScript или JScript. Для упражнений этой книги следует использовать VBScript. В ColdFusion, как и в PHP, употребляется только один язык для написания сценариев, – так что на новой странице ColdFusion или PHP подобных строк не будет.
2. Щелкните в любом месте в режиме Design (Дизайн), перейдите в категорию Forms (Формы) на панели Insert (Вставка) и нажмите кнопку Form (Форма), чтобы вставить форму. Щелкните на кнопке Text Field (текстовое поле), а затем – на кнопке Button (Кнопка).

   Теперь на страницу будет добавлена основная форма.

   

   
   увеличить изображение
   

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

   Форма на этом этапе еще не настроена и пока не выполняет никаких действий. Рядом с текстовым полем нет надписи, объясняющей назначение формы.
3. Щелкните на текстовом поле и один раз нажмите на клавиатуре клавишу перемещения со стрелкой влево, чтобы поместить курсор перед текстовым полем. Введите надпись "First Name" ("Имя").

   Если рядом с текстовыми полями не ставить надписей, никто не поймет, какую информацию в них следует вводить.
4. Щелкните на текстовом поле и на панели Property Inspector (Инспектор свойств) присвойте ему название "firstName" ("имя"), после чего нажмите клавишу (Tab) или (Enter)/(Return).
   

   
   увеличить изображение
   

   Вскоре это имя будет использовано для того, чтобы поместить введенное значение в сценарий ASP, ColdFusion или PHP. Рекомендуется всегда присваивать полям формы осмысленные имена. Написание кода и так достаточно трудоемкий процесс, поэтому не стоит дополнительно усложнять его, оставляя имена, которые Dreamweaver использует по умолчанию ( Textfield1, Textfield2, Textfield3 и т.д.).

   Нажатие (Tab) или (Enter)/(Return) подтверждает те изменения, которые были выполнены на панели Property Inspector (Инспектор свойств).
5. В селекторе тегов щелкните на теге <form#form1> , чтобы на панели инспектора свойств открыть свойства формы. Присвойте форме имя frm_name , а в текстовое поле Action (Действие) введите " test_form_processor.asp " (либо .cfm или .php ).

   В поле Action (Действие) указывается URL-адрес страницы (или другого ресурса), на которой хранится сценарий, обрабатывающий данные формы. В этом случае в поле указан несуществующий адрес, поскольку файл test_form_processor.asp ( .cfm или .php ) еще не был создан. В раскрывающемся поле со списком Method (Метод) должен быть выбран пункт POST. О методе POST будет рассказано в одном из следующих уроков.

   Примечание.С этого времени подразумевается, что вы можете самостоятельно указывать расширения согласно выбранной серверной модели. Отсутствие замечания (либо .cfm или .php ), возникающего каждый раз при упоминании файла, свидетельствует о вашем довольно высоком IQ. Далее в книге задействован вариант .asp, – так что при использовании ColdFusion следует подставлять вместо него расширение .cfm, а при употреблении PHP – расширение .php.
   

   
   увеличить изображение
   
6. В меню File (Файл) выполните команду Save as (Сохранить как) и присвойте файлу имя test_form.asp.

   Это одноразовый файл, который создается только для того, чтобы протестировать простую функцию динамичного сайта. В названии таких файлов, создаваемых для проверки, я часто использую префикс "test_". Это позволяет с легкостью найти и удалить их после окончания работы.