В данном цикле статей мы познакомимся с новым типом приложений - web-приложениями, для доступа к которым клиентам нужен лишь браузер. В начале мы рассмотрим главные «атомы Web», без которых не обходится ни одно web-приложение - HTML, запросы НТТР(POST и GET), применение скриптов, выполняемых в браузере клиента (JavaScript), а также классические ASP.
Затем мы рассмотрим вопросы, связанные с применением ASP.NET.
Web-приложения и web-серверы
Web-приложение - это набор взаимосвязанных файлов (*.htm, *.asp, *.aspx, файлов изображений и т. п.), а также связанных с ними компонентов (двоичных файлов .NET или классического СОМ), которые размещены на web-сервере.
web-сервер - это программный продукт, на котором размещаются ваши web-приложения и который обычно обеспечивает набор связанных с web-приложениями служб, таких как интегрированные средства обеспечения безопасности, поддержка протокола FTP, поддержка средств передачи электронной почты, и т. п. Web-сервер уровня предприятия от Мiсrоsоft называется Intenet Information Server (IIS).
При создании web-приложений с использованием классических ASP или ASP.NET нам обязательно придется - прямо или опосредованно - работать с IIS. Проще всего управлять им из консоли MMC, которая называется Internet Services Manager (ее можно найти в Administrative Tools). Мы не будем использовать виртуальные web-серверы и ограничимся использованием лишь web-сервера по умолчанию. Он помечен в окне Internet Services Manager как Default Web Site.
Что такое виртуальные каталоги
На одном сервере IIS может находиться множество web-приложений. Каждое из этих web-приложений должно размещаться в своем виртуальном каталоге (virtual directory). Виртуальному каталогу на web-сервере соответствует физический каталог на диске. Предположим, что мы создали web-приложение FrogsAreUs. Из внешнего мира к нему можно будет обратиться по адресу URL http://www.FrogsAreUs.com (если мы зарегистрировали это доменное имя в системе DNS), а на нашем компьютере этому приложению будет соответствовать физический каталог, например с:\FrogSite. И именно в этом физическом каталоге будут находиться файлы, из которых состоит наше web-приложение.
Давайте создадим простое web-приложение, которое будет называться Cars. Первое, что нам потребуется уделать, - создать на компьютере новый каталог, в котором будут храниться файлы нашего web-приложения (пусть это будет каталог C:\CarsWebSite). Следующее, что нам надо будет сделать, - создать на web-сервере новый виртуальный каталог, которому будет соответствовать этот физический каталог. Сделать это можно разными способами, но самый простой - в окне Internet Services Manager выбрать Default Web Site, щелкнуть на нем правой кнопкой мыши и в контекстном меню выбрать New (Новый) -> Virtual Directory (Виртуальный каталог).
У нас запустится мастер создания виртуального каталога. Присвоим создаваемому нами виртуальному каталогу имя Cars. Далее нас спросят о физическом пути в операционной системе для этого виртуального каталога. Выберем созданный нами каталог C:\CarsWebSite. Далее мастер задаст нам вопросы об основных параметрах нашего виртуального каталога (о возможности доступа к нему на чтение и запись, просмотра списка файлов из web-браузера, запуска скриптов и исполняемых файлов и т. п.). В нашем случае вполне подойдут значения, предлагаемые мастером по умолчанию. После того как все эти действия будут завершены, мы сможем увидеть созданный нами виртуальный каталог в списке каталогов web-сайта по умолчанию на сервере IIS.
Структура документа HTML
Теперь, когда мы создали виртуальный каталог, можно приступать к созданию самого web-приложения. При создании web-приложений не обойтись без страниц на языке HTML. HTML (Hypertext Markup Language, язык гипертекстовой разметки) - это стандартный язык разметки, используемый для описания того, как текст, изображения, гиперссылки и стандартные элементы графического интерфейса будут отображаться в web-браузере. Большинство современных сред разработки web-приложений (в том числе Visual Studio.NET) позволяют создавать web-страницы, почти не обращаясь непосредственно к самому коду HTML, однако тем не менее разработчик web-приложений должен, безусловно, знать этот язык
Документ HTML обычно начинается с набора тегов, в которых содержится общая информация о документе (заголовок, метаданные файла и т. п.), за которыми следует само тело документа (то есть набор текста, изображений, таблиц, гиперссылок и т. п.). Теги HTML не чувствительны к регистру: для браузера будет все равно, написали ли мы <HTML>, <html> или <Html>.
Давайте приступим к созданию документа HTML. Откроем интегрированную среду разработки Visual Studio.NET и в меню File (Файл) выберем Miscellaneous Files (Разные файлы) -> New File (Новый файл) и сохраним созданный файл в нашем физическом каталоге как default.htm. При этом Visual Studio.NET автоматически добавит в созданный нами файл HTML следующие теги:
<HTML>
<НЕАD>
<TIТLE></TIТLE>
<МЕТА NAМE="GENERATOR" Content="Microsoft Visual Studio">
<МЕТА HTTP-ЕQUIV="Content-Туре" content="text/html">
</НЕАD>
<ВОDY>
<! – Insert HTML here>
</ВОDУ>
</HTML>
Теги <HTML> и </HTML> помечают начало и конец вашего документа HTML. Тег <НЕАD> выделят метаданные для всего документа. В нашем случае внутрь блока <НЕАО> помещены два тега <МЕТА>, которые описывают программу, использованную для создания этого документа (Мicrоsоft Visual Studio), и содержимое файла. Пока у нашей страницы нет названия. Давайте его добавим:
<ТITLE>НTМL is unavoidable</TIТLE>
То название, для которого мы использовали тег <ТITLE>, выводится как заголовок окна браузера, в котором открыт наш документ.
Само содержание документа HTML помещается между тегами <ВОDY> и </ВODY>. Как правило, между этими тегами помещается множество дополнительных тегов, которые используются для представления и форматирования текстовой и графической информации. Все теги HTML мы, конечно, рассматривать не будем, но рассмотрим самые необходимые.
Форматирование текста средствами HTML
Исходное назначение HTML заключалось в представлении текстовой информации. Как мы уже говорили, текст документа в HTML обычно помещается между тегами <BODY> и </BODY>. Например, предположим, что мы создаем страницу аутентификации пользователей. Текст HTML на ней может выглядеть следующим образом (обратите также внимание на синтаксис комментариев HTML):
<ВОDУ>
<! - Приглашение пользователю к аутентификации ->
The Cars Login Page
</ВОDУ>
В этом примере к нашему тексту не были применены какие-либо теги. Встречаясь с таким текстом, web-браузер выводит его в своем окне так, как он был записан. Если мы изменим текст документа следующим образом:
<BODY>
<! - Приглашение пользователю к аутентификации ->
The Cars Login Page
Please enter your user name and password.
</BODY>
то браузер и не подумает добавить ожидаемый переход на новую строку.
Чтобы начать новый абзац, необходимо выделить текст в этом абзаце при помощи тегов <Р> И </Р>:
<BODY>
<! - Приглашение пользователю к аутентификации ->
The Cars Login Page
<p>Please enter your user пате and password.</p>
</ВОDУ>
Можно и не начинать новый абзац, а просто добавить теги начала новой строки <BR> и </BR>.
В HTML предусмотрены средства для выделения участков текста полужирным шрифтом и курсивом. Для этого предусмотрены теги <B> </B> и <I> </I> соответственно:
<ВОDY>
<! - Приглашение пользователю к аутентификации ->
<B>The Cars Login Page</B>
<BR>Please enter your <I>user name</I> and <I>password</I>.</BR>
</ВОDУ>
Результат представлен на рис. 1.
Рис. 1. Выделение текста полужирным и курсивным начертаниями
Заголовки HTML
Последний вид тегов для форматирования текста, который мы рассмотрим, - это теги заголовков HTML. Они выглядят как <Н1>, <Н2>, <НЗ>, <Н4>, <Н5> и <Н6> и применяются для изменения размера выделенного ими текста. Наибольший относительный размер текста обеспечивает тег <Н1> (заголовок первого уровня). Вот пример:
<ВОDY>
<! - Приглашение пользователю к аутентификации ->
<H1>The Cars Login Page</H1>
<BR><H3>Please enter your <I>user name</I> and <I>password</I>.</H3></BR>
</ВОDУ>
Для того чтобы блок текста был выровнен посередине страницы, можно использовать тег <CENTER>:
<ВОDY>
<! - Приглашение пользователю к аутентификации ->
<CENTER>
<H1>The Cars Login Page</H1>
<BR><H3>Please enter your <I>user name</I> and <I>password</I>.</H3></BR>
</CENTER>
</ВОDУ>
HTML -редактор Visual Studio.NEТ
Пока у нас получается очень простая, если не сказать примитивная, страница. Давайте мы ее немного оживим. Для этого нам потребуется добавить дополнительные теги HTML. Проще всего сделать это при помощи встроенных средств Visual Studio.NET.
Начнем с тех средств, которые применяются для управления отображением всего документа. Для этого выберем объект Document и откроем его свойства (рис. 2). Например, если мы изменим значение свойства bgColor (цвет фона), то в нашем документе HTML автоматически появится новый тег (рис. 3).
В Visual Studio.NET также предусмотрена панель форматирования HTML. С ее помощью можно управлять представлением блоков текста, выбирая для них цвет, шрифт, уровень заголовка, применение разметки списков и т. п.
Рис. 2. Редактирование документа HTML при помощи графических средств Visual Studio.NEТ
Рис. 3. Изменения, вносимые при помощи графических средств, сразу же появляются в коде HTML
При помощи графических средств Visual Studio.NET мы можем оформить нашу страницу - весь необходимый для этого код HTML будет сгенерирован автоматически. Эти средства позволяют сэкономить много времени, однако web-разработчику часто приходится создавать весь код для страницы HTML вручную.
Разработка форм HTML
Будем считать, что с оформлением нашей страницы мы уже разобрались. Теперь настало время наделить ее новыми свойствами - возможностью принимать ввод пользователя. Для этого нам придется прибегнуть к помощи элементов управления HTML. Как мы увидим дальше, в среде ASP.NET предусмотрен набор элементов управления WebForm, при применении которых все необходимые теги для элементов управления HTML будут генерироваться автоматически. Однако знакомство с тегами для создания элементов управления HTML также будет нелишним. Еще раз подчеркнем, что элементы управления WebForm в ASP.NET и элементы управления HTML - это разные вещи, и в процессе выполнения web-приложения элементы управления WebForm преобразуются в элементы управления HTML.
Форма HTML - это именованная группа элементов пользовательского интерфейса HTML, используемых для ввода пользователем данных. Затем эти данные передаются на web-сервер по протоколу НТТР. Теги для элементов пользовательского интерфейса на форме HTML помещаются между тегами <form> и </form>:
<form name = MainForm id = MainForm>
<!- Add UI elements here . ->
</form>
в этом коде мы создали форму и присвоили ей, во-первых, дружественное имя, а во-вторых, идентификатор. С технической точки зрения использовать имя в принципе не обязательно, однако во многих ситуациях это очень удобно.
Как правило, в открывающий тег <form> помещается атрибут для действия, выполняемого этой формой. В нем содержится информация об адресе URL, на который будут передаваться данные, введенные пользователем, а также сведения о методе передачи данных (POST или GET). Мы вскоре рассмотрим эти моменты достаточно подробно, а пока давайте рассмотрим те элементы, которые могут быть помещены внутрь формы HTML. В Visual Studio.NET предусмотрена специальная панель HTML Toolbox, в которой мы можем выбрать эти элементы.
Краткий перечень наиболее часто используемых элементов представлен в табл.1.
Таблица 1. Элементы управления HTML
Элемент управл Описание
Button Эта разновидность кнопки обычно используется для того, чтобы выполнить отрезок кода клиентского скрипта. Для отправки данных на web-сервер используется специальная кнопка Submit Button, а для возврата формы в исходное состояние - Reset Button
Checkbox То же самое, что и аналогичные элементы управления Windows Forms
Radio
Button
Listbox
Dropdown
Image Позволяет указать изображение, которое будет выведено на форме
Reset Button Специальная кнопка на форме, при нажатии на которую все значения в форме принимают свой исходный вид
Submit Button Еще одна специальная кнопка, при нажатии на которую производится отправка данных формы на web-сервер
Text Field Эти элементы управления предназначены для ввода пользователем
Text Area одной строки текста или нескольких строк
Password Field Все символы в этом поле отображаются звездочками
В библиотеке базовых классов .NET предусмотрен набор типов .NET, которые соответствуют элементам управления HTML. Они определены в пространстве имен System.Web.UI.HTMLControls
Создаем пользовательский интерфейс
Первое, что нужно сделать, чтобы наша страница могла воспринимать ввод пользователя, - создать на ней форму HTML. Для этого поместим на страницу следующий код:
<HTML>
<НЕАD>
<ТIТLЕ>НТМL is unavoidable</TITLE>
<МЕТА NAМE="GENERATOR" Content = "MicrosDft Visual Studio">
<МЕТА НПР-ЕQUIV="Соntеnt-Туре" content="text/html">
</НЕАD>
<ВODУ BGCOLOR="66ccff">
<! - Приглашение пользователю к аутентификации ->
<center>
<H1> The Cars Logi n Page</H1>
<BR><HЗ>Рl ease enter your <I>user name</I> and <I>password</I>. </HЗ>
<!- Создаем форму для ввода пользователем информации.>
<form name=МainForm>
</form>
</center>
</BODY>
</HTML>
Форма создана, теперь можно приступать к добавлению в нее элементов управления. Это можно сделать при помощи графических средств Visual Studio.NET, а можно создать все необходимые теги вручную. Каждый элемент управления описывается атрибутом имени (имя используется при выполнении программы, чтобы определить, в какой элемент управления были введены данные) и атрибутом типа (этот атрибут и определяет разновидность элемента управления). Для разных элементов управления существуют разные наборы дополнительных атрибутов, которые могут быть использованы для определения различных их параметров. Конечно же, эти дополнительные параметры можно также настроить при помощи окна свойств для этого элемента управления в Visual Studio.
Наша форма будет содержать два текстовых поля (одно - для ввода имени пользователя, другое, специальное парольное - для ввода пароля) и две кнопки для передачи информации на сервер и для восстановления формы в исходном состоянии, если пользователь решил отменить свой ввод. Вот код HTML для нашей формы (" " определяет вставку символа пустого пространства):
<form name=MainForm>
<p>User Name:
<input id = txtUserName type = text></p>
<p>Password:
<input name = txtPassword type = password></p>
<input name = btnSubmit type = submit value = Submit>
<input name = btnReset type = reset value = Reset>
</form>
Для каждого элемента управления мы определили уникальное имя (txtUserName, txtPassword, btnSubmit и btnReset). Кроме того, для каждой кнопки мы определили очень важный атрибут value (значение). value = Reset означает, что все элементы управления на форме вернутся в исходное состояние, а value = Submit - что данные, введенные пользователем, отправятся получателю.
Атрибут value можно применять не только для кнопок. Например, мы можем определить атрибут value для текстового поля txtUserName. Если мы определим для txtUserName атрибут value = Chucky, то это значит, что слово Chucky станет значением по умолчанию для этого текстового поля и оно будет помещаться в поле всякий раз при загрузке формы (рис. 4).
Рис. 4. Применение значения по умолчанию для текстового поля
Добавление изображений
Последняя тема, посвященная возможностям HTML, которую мы рассмотрим, это добавление на web-страницу изображений. Изображения добавляются при помощи тегов <img>:
<img alt="You gotta log in to see this!" src="car.gif" border=4>
Атрибут <аlt> (от alternative) используется для определения текстового эквивалента изображения. Этот текст «всплывет» если поместить указатель мыши над изображением, или будет выведен вместо самого изображения, если браузер не поддерживает вывод графики. Необязательный атрибут border определяет толщину рамки вокруг изображения. В атрибуте src (от source - источник изображения) можно использовать как полный путь к файлу изображения, так и относительный путь, при котором подразумевается, что файл изображения будет находиться в одном каталоге с файлом *.htm.
Комментариев нет:
Отправить комментарий