Предмет Web-программирования. Программирование на стороне клиента и сервера. Инструменты и технологии программирования

Предмет Web-программирования.

Язык HTML.За последние годы разработки для Интернета эволюционировали от статических страниц до динамических информационных систем. Некоторое время назад создание современных Web-страниц не требовало практически ничего, кроме совершенного владения языком разметки гипертекста (Hypertext Markup Language, HTML). HTML представляет собой простой язык обработки текстов; на этом языке при помощи набора тегов (tags) создается документ, который можно просматривать специальной программой просмотра Web (browser). Так, HTML-код из листинга 1.1 создает простую Web-страницу.

Листинг 1.1.Исходный код простой Web-страницы.

<HTML>

<HEAD><TITLE>My First Web Page</TITLE></HEAD>

<H2><CENTER>Добро пожаловать на мою первую Web-страничку! </CENTER></H2>

</BODY></HTML>

HTML — не язык программирования в том смысле, как C++ или Visual Basic; он больше напоминает средства форматирования документов с использованием управляющих последовательностей. Кодирование на HTML часто сравнивают с созданием документа в формате Microsoft Word путем набивки кодов форматирования прямо в Notepad. Очевидно, что функциональность этого крайне мала.

По многим причинам HTML — бедный язык с точки зрения программирования. Во-первых, возьмем гиперссылки (hyperlinks) — эти подчеркнутые и выделенные голубым цветом слова, которые Вы щелкаете, чтобы перейти к другой странице. Гиперссылка — это, по сути, облагороженный оператор перехода GOTO, обеспечивающий переход к жестко указанному месту приложения. Об операторе GOTO и его недостатках написана масса статей. Жестко закодированные ссылки порождают код, который очень трудно сопровождать, и если вы когда-либо писали HTML-код, то знаете, как трудно его повторно использовать и модифицировать.

Во-вторых, HTML не предоставляет никакой реальной возможности сохранять данные в процессе работы приложения. Да и вообще, в этом случае трудно даже говорить о приложении в Web. Когда каждая страница представляет собой лишенную состояния транзакцию с сервером, как вообще можно определить, где приложение начинается и где заканчивается? Сравните это с типичным клиент-серверным приложением, о начале работы которого сигнализирует двойной щелчок значка на рабочем столе, а о конце — выбор пункта Exitв меню File.

В-третьих, у HTML очень ограниченные возможности для взаимодействия. Стандартный HTML довольствуется статическими Web-страницами с текстом, рисунками и ссылками на другие страницы. Подобные узлы называют Желтыми Страницами WWW (World Wide Yellow Pages), так как их формат очень напоминает страницы телефонной книги.

Разумеется, HTML обеспечивает некоторую интерактивность при помощи встроенных элементов управления (intrinsic controls) — тех самых полей ввода, которые обычно присутствуют в HTML-формах. Простые формы можно создать, например, при помощи тегов <INPUT>. Тег <INPUT> допускает применение текстовых полей (text boxes), флажков (check boxes), переключателей (radio buttons) и кнопок (buttons). Листинг 1.2 определяет HTML-форму, которая содержит текстовые поля ввода для имени, номера телефона и адреса электронной почты.

Листинг 1.2.Код для HTML-формы.

<HTML><HEAD><TITLE>Simple HTML Form</TITLE></HEAD>

<FORM>

<INPUT TYPE="TEXT" NAME="txtPhone">Телефон<Р>

<INPUT TYPE="TEXT" NAME="txtEMail">Адрес электронной почты<Р>

</FORM></BODY></HTML>

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

HTML представляет собой обычный текст, поэтому первоначально большинство разработчиков писали свои программы непосредственно в текстовых редакторах, таких как Notepad. Co временем ряд фирм предложили графические средства разработки, например, Microsoft FrontPage, дающие возможность создавать Web-страницы, не зная в явном виде HTML. Эти графические редакторы позволяют непосредственно макетировать Web-страницы без трудоемкой возни с тегами. К сожалению, мощь подобных графических редакторов оборачивается и серьезным их недостатком: у разработчиков создается впечатление, что им ни к чему изучать синтаксис и теги HTML, — а между тем трудно придумать что-нибудь более далекое от истины, чем это утверждение. Если вы даже ничего больше не вынесете из этого краткого введения в HTML, то запомните хотя бы это: чтобы быть настоящим Web-разработчиком, вы должны знать HTML. Навыки редактирования страницы непосредственно в виде исходного текста позволят вам добиться желаемого эффекта независимо от того, поддерживает ли его ваш любимый графический редактор.

Программирование на стороне клиента.

В своих первых попытках повысить интерактивность HTML Web-страниц разработчики обратились к сценариям (scripting), добавляя функциональность путем комбинирования языка программирования с HTML. В результате зачастую получается странный гибрид кода и тегов, что вынуждает разработчиков вернуться к текстовым редакторам. Был введен специальный тег <SCRIPT>, который определяет раздел кода на Web-странице. Код из листинга 1.3 при помощи VBScript создает пример, выводящий приветствие «Hello, World!».

Листинг 1.3.Код на VBScript, выводящий «Hello, World!».

<TITLE>Yet Another Hello, World! Example</TITLE>

<SCRIPT LANGUAGE="VBScript”> <!--

Sub cmdClickMe_OnClick()

MsgBox "Hello, World!"

End Sub

-->

</SCRIPT>

</HEAD>

<FORM>

</FORM></BODY></HTML>

VBScript представляет собой язык описания сценариев, в основе которого лежит Visual Basic for Applications (VBA), популярный язык, применяемый, например, в Microsoft Office 97. VBScript — это не полная версия VBA, а скорее его подмножество, которое сохраняет многие ключевые возможности VBA, но в то же время не реализует те, которые сделали бы его чересчур громоздким и небезопасным. Так, VBScript не поддерживает типы данных: все переменные объявляются как Variant.

Как и его старший брат, VBA, язык VBScript управляется событиями. Это означает, что написанный Вами код выполняется в ответ на событие (event), возникшее в результате взаимодействия пользователя с графическим интерфейсом (graphical user interface, GUI). В нашем случае GUI представляет собой Web-страницу. Так, в приведенном выше примере, когда пользователь взаимодействует с GUI, нажимая кнопку «Click Me!», это действие вызывает событие OnClick. Это событие, в свою очередь, обрабатывается кодом на VBScript, организованным в виде процедуры обработки события. Имена таких процедур имеют вид ИмяЭлементаУправления_ИмяСобытия, представляя собой произвольные комбинации из имен элементов управления и событий.

Хотя сценарии и представляют собой шаг вперед в развитии интерактивности, у них есть и определенные ограничения. Например, не все программы просмотра распознают и обрабатывают сценарии, а те, которые это делают, используют разные языки. Главным образом это касается Netscape Navigator, который не распознает VBScript, однако работает с JavaScript — языком описания сценариев, первоначально разработанным для Netscape Navigator. По функциональности JavaScript очень похож на VBScript, но по синтаксису эти языки сильно различаются. В отличие от VBScript, JavaScript не поддерживает концепцию процедур обработки событий. Все процедуры в JavaScript — это функции, вызываемые при помощи атрибутов событий, расположенных в HTML-теге. JavaScript-версия предыдущего примера на VBScript представлена в листинге 1.4.

Листинг 1.4.Код на JavaScript, выводящий «Hello, World!».

<TITLE>JavaScript Hello, World! Example</TITLE>

<SCRIPT LANGUAGE="JavaScript"> <!--

function clickme() {

alert("Hello, World!");

return true; }

-->

</SCRIPT>

</HEAD><BODY BGCOLOR="WHITE">

<FORM>

<INPUT TYPE="BUTTON" NAME="cmdClickMe"

VALUE="ClickMe!" OnClick="var rtn=clickme();">

</FORM> </BODY> </HTML>

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

Как только к возможностям программ просмотра добавляются сценарии, возрастает сложность клиентской платформы. Очевидно также, что раз отсутствует универсальный язык описания сценариев, то теряются все разрекламированные преимущества платформенной независимости Web. Для многих Web-мастеров и разработчиков постоянная война между программами просмотра за преобладание на рынке создает необходимость поддерживать две версии Web-узла: для Microsoft Internet Explorer и для Netscape Navigator.

Компоненты ActiveX.По мере совершенствования технологии программ просмотра зависимость от платформы усилилась — она была привнесена компонентами ActiveX, технологией, основанной на СОМ — модели многокомпонентных объектов Microsoft (Component Object Model). Компоненты ActiveX варьируются от причудливых элементов управления, таких как движки (spinners), до невизуальных компонентов, обеспечивающих доступ к базам данных или электронной почте. Подобные компоненты делают страницы в Internet Explorer более функциональными и привлекательными, но практически бесполезными в среде, не поддерживающей ActiveX, например, в Netscape Navigator.

Компонент ActiveX добавляется в Web-страницу при помощи тега <OBJECT>, однозначно определяющего компонент для программы просмотра. Приведенный ниже код, используя тег <OBJECT>, помещает на Web-страницу элемент управления ActiveX — метку (label).

<OBJECT ID="Label1" WIDTH=291 HEIGHT=41 CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"

CODEBASE="http://www.microsoft.com/activex/controls/FM20.DLL">

</OBJECT>

Значения GUID в любой операционной системе хранятся в реестре — централизованной базе данных, которая отвечает за поддержание информации о программных объектах, используемых приложениями. Когда Internet Explorer обнаруживает тег <OBJECT>, он обращается к реестру и ищет там GUID, совпадающий со значением атрибута CLASSID. Когда такой GUID найден, из реестра выбирается дополнительная информация, позволяющая отыскать файл, который соответствует данному элементу управления ActiveX.

В теге <OBJECT> можно выделить несколько ключевых составных частей, которые определяют, как именно компонент ActiveX будет размещен на странице. Атрибут ID задает имя элемента управления, посредством которого ко всем его свойствам, методам и событиям можно будет получить доступ из текста сценария.

CLASSID представляет собой буквенно-цифровой код, который однозначно идентифицирует данный компонент ActiveX среди всех остальных. Этот код, известный как глобально уникальный идентификатор (Globally Unique Identifier, GUID), не использует больше ни один компонент ActiveX. При помощи GUID Internet Explorer однозначно определяет требуемый компонент и создает его на странице. Если нужный элемент управления ActiveX на клиентской машине отсутствует, Internet Explorer обращается к атрибуту CODEBASE за информацией о том, где находится этот элемент на сервере. Следуя этой информации, файлы данного элемента управления загружаются с сервера, и элемент устанавливается на клиентской машине. Теперь Internet Explorer может свободно работать с ним.

Доступ к компонентам ActiveX посредством тега <OBJECT> не ограничивается элементами управления. Этот тег может активизировать произвольный компонент ActiveX, в том числе и те компоненты, которые можно написать на языках Visual Basic, C++ и Microsoft FoxPro. В сущности, вы легко можете расширить функциональность, доступную клиенту, написав свои собственные компоненты ActiveX и загрузив их в программу просмотра. Следует, правда, помнить, что Internet Explorer по умолчанию не загружает и не выполняет компоненты без цифровой подписи разработчика.

Окончательное обеспечение компонента данными происходит через тег <PARAM>, имеющий атрибуты NAME и VALUE, при помощи которых задаются начальные значения свойств данного компонента, когда он впервые создается на Web-странице. После того, как начальные значения установлены, значения свойств легко изменить во время выполнения из текста сценария.

<SCRIPT LANGUAGE="VBScript"><!--

Sub Label1_DblClick(Cancel)

Label1.Font.Weight=24

Label1.Caption="Щелкни снова!"

end sub

Sub Label1_Click()

Label1.AutoSize = false

Label1.Font.Weight = 30

Label1.Caption="Еще два раза!!!!!"

Label1.SpecialEffect=1

end sub

-->

</SCRIPT>

Документы ActiveX.Visual Basic, начиная с версии 5.0, позволяет, помимо элементов управления ActiveX, создавать документы ActiveX. Документы ActiveX представляют собой программные объекты, которые могут загружаться и работать внутри ActiveX-контейнера, такого как Internet Explorer. Документы ActiveX позволяют разработчикам на Visual Basic немедленно применить свой опыт работы на Visual Basic для создания приложений для Интернета. Что самое существенное, документы ActiveX предоставляют доступ к большей части ключевых возможностей Visual Basic в загружаемом формате.

Java.Не будем забывать и о Java! Этот язык очень быстро приобрел популярность, и его поддерживают как Internet Explorer, так и Netscape Navigator. Апплеты, разработанные на Java при помощи таких средств, как Microsoft J++, во многом напоминают компоненты ActiveX: это самодостаточные, загружаемые фрагменты Web-страницы. Так же, как и у компонентов ActiveX, у апплетов имеется свой особый тег — <APPLET>, который дает программе просмотра указание загрузить код на Java и выполнить его. Нижеследующий код исполняет апплет на Web-странице:

Атрибут CODE тега <APPLET> идентифицирует исходный код апплета Java практически так же, как атрибут CODEBASE определяет источник для компонента ActiveX. У апплетов могут также быть теги <PARAM>, задающие начальные значения. Во многих случаях апплеты представляют собой функциональные эквиваленты элементов управления ActiveX. Во всяком случае, языки описания сценариев могут обращаться к открытым функциям апплетов точно так же, как они обращаются к методам компонентов ActiveX.

Dynamic HTML.Да, различия между платформами не облегчают жизнь Web-разработчикам. В версии Internet Explorer 4.0 Microsoft добавила к клиентской функциональности еще одну особенность — Dynamic (динамический) HTML, который позволяет посредством сценариев программно изменять теги. Это необычайно мощное средство. Код из листинга 1.5 при помощи VBScript определяет, когда указатель мыши находится поверх какого-то участка текста Web-страницы, и изменяет размер и цвет текста.

Листинг 1.5.Dynamic HTML.

<TITLE>Dynamic HTML</TITLE>

Function MyFont_OnMouseOver()

MyFont.Color = "Red"

MyFont.Size = "5"

End Function

Function MyFont_OnMouseOut()

MyFont.Color = "Blue"

MyFont.Size = "4"

End Function

</SCRIPT> </HEAD>

Эй, укажи-ка сюда мышкой!

</BODY></HTML>

В Dynamic HTML определяется набор событий, которые можно ассоциировать с тегами HTML. Это расширяет парадигму VBScript управляемости событиями на все элементы Web-страницы — теги HTML, элементы управления ActiveX; даже программа просмотра сама по себе обладает определенными событиями. Если у вас еще сохранились сомнения в необходимости глубокого владения HTML для эффективного создания Web-страниц, то предыдущий пример должен вас убедить. В нем текст на VBScript динамически изменяет атрибуты COLOR и SIZE тега <FONT> при обнаружении определенных действий с мышью. Подобный код нельзя написать, не зная в точности, что представляет собой тег <FONT>, и не понимая смысла атрибутов COLOR и SIZE. Так что прощайте, графические редакторы!

Dynamic HTML заметно увеличивает мощность Web-клиента и его интерактивность, причем не только за счет динамического стиля манипулирования, но и другими средствами. Так, он умеет располагать элементы на Web-странице. Вы можете, например, изменить изображение, просто изменив атрибуты тега <IMG>. Для изменения содержимого страницы вы можете также добавлять или удалять теги. И наконец, Internet Explorer 4.0 поддерживает привязку данных (data binding) к полям формы. Это означает, что данные из базы данных на сервере могут быть напрямую связаны с полем формы в программе просмотра Web, и тем самым будут мгновенно редактироваться и обновляться. Все это делает Dynamic HTML мощным орудием, достойным вашего внимания. Но не забывайте одну важную вещь: в настоящее время Dynamic HTML доступен только для Internet Explorer.

Программирование на стороне сервера.

Еще одна эпохальная технология — это технология серверных сценариев, примером которой является Active Server Page (ASP). Эта технология позволяет создавать великолепные, не зависящие от платформ Web-страницы, которые можно просматривать любой программой просмотра. Или, если вы хотите максимально воспользоваться преимуществами зависящих от платформы технологий, таких как Dynamic HTML, то можете создавать ASP-страницы, которые могут общаться напрямую с Internet Explorer.

В своей основе ASP — это сценарий, исполняемый на сервере IIS. Этот код динамически выполняется при запросе страницы, а получившийся HTML-текст отправляется программе просмотра. Посмотрите, как код в листинге 1.6 использует ASP для создания шести последовательных строк текста, набранных все увеличивающимся шрифтом.

Листинг 1.6.Web-страница с ASP.

<TITLE> ASP Example</TITLE>

</HEAD>

<%For x = 1 to 6%>

<FONT FACE="ARIAL" SIZE=<%=X%>>ActiveX - это круто!</FONT><P>

<%Next%>

</BODY> </HTML>

В тексте примера присутствует тег <SCRIPT>, хоть он и не обязателен, но обратите внимание, что внутри скобок появился знак процента. Этот синтаксис означает, что код должен быть выполнен на сервере, перед тем как страница будет отправлена клиенту. Обратите также внимание, что знаки процента окружают все фрагменты кода на данной странице, т. е. весь он выполняется до того, как программа просмотра получит страницу. Полученный HTML-текст выглядит так:

<TITLE>ASP Example</TITLE></HEAD>

<FONT FACE="ARIAL" SIZE=1>ActiveX - это круто!</FONT>

<P><FONT FACE="ARIAL" SIZE=2>ActiveX - это круто!</FONT>

<P><FONT FACE="ARIAL" SIZE=3>ActiveX - это круто!</FONT>

<P><FONT FACE="ARIAL" SIZE=4>ActiveX - это круто!</FONT>

<P><FONT FACE="ARIAL" SIZE=5>ActiveX - это круто!</FONT>

<P><FONT FACE="ARIAL" SIZE=6>ActiveX - это круто!</FONT>

В получившемся HTML и скрывается красота ASP. Результирующая страница может содержать чистый HTML, понятный любой программе просмотра! Это делает ASP идеальным для приложений, которые должны выполняться в Интернете, где со страницей может работать любая программа просмотра. Однако ASP не ограничивается минимальным общим знаменателем, и вы можете добавлять в результирующую страницу клиентский сценарий, элементы управления ActiveX и Dynamic HTML. Таким образом, ASP гибки настолько, насколько Вы этого сами захотите.

К серверным языкам сценариев относятся также широко известные языки Perl и PHP. В отличие от ASP, они совместимы практически с любым Web-сервером, включая и IIS (PWS), которые по умолчанию поддерживают только ASP (IIS - сразу после установки, PWS - после установки свободно распространяемого модуля ASP.EXE). Существует, правда, Java-пакет Instant ASP фирмы ChillySoft, позволяющий программировать на ASP и под другими Web-серверами, но он коммерческий. В то же время весьма популярный свободно распространяемый кросс-платформенный web-сервер Apache имеет в комплекте интерпретаторы Perl и PHP. Эти интерпретаторы существуют в версиях для Windows и UNIX-совместимых ОС, поэтому также могут считаться платформно-независимыми. В общем же случае выбор серверного языка сценариев обусловлен конфигурацией web-сервера заказчика, поскольку, даже имея навыки конфигурирования web-серверов, порой невозможно добраться до сервера, на котором расположен сайт заказчика.

В рамках данного курса будут рассматриваться серверные языки сценариев ASP, Perl, PHP.

Инструменты и технологии программирования.

Минимальным набором инструментов web-программиста является текстовый редактор и браузер, под который оптимизируется сайт. При использовании серверных сценариев требуется и web-сервер, желательно такой же, как и у заказчика. Избегайте отладки сценариев на сервере клиента - ваши ошибки могут привести к его зависанию, и не всегда у вас есть права и возможность его перезагрузки! Лучше всего установить web-сервер на рабочей станции или домашнем компьютере и подключить к нему требуемый интерпретатор. Следует, правда, иметь в виду, что функциональные возможности web-серверов и интерпретаторов под разными ОС (Windows и UNIX) зачастую различны.

Что касается редактора, то можно использовать как стандартный «Блокнот» или встроенный редактор файлового менеджера FAR (желательно с плагином Colorer для подсветки тегов и операторов), так и какой-либо специализированный WYSIWYG (What You See Is What You Get) HTML-редактор. Однако среди их многообразия практически отсутствует такой, который поддерживает ОДНОВРЕМЕННО ВСЕ серверные языки сценариев, хотя поддержка клиентских языков, как правило, присутствует. Кроме того, зачастую эти редакторы преобразуют русские буквы в их коды, что существенно затрудняет последующее редактирование. Приведем небольшой перечень.

Несомненно, самым мощным, хоть и громоздким средством программирования на ASP является Microsoft Visual InterDev, входящий в комплект Microsoft Visual Studio. Будучи интегрирован со справочной системой MSDN, он позволяет быстро получить справку по любому оператору, функции или объекту. Возможен также предварительный просмотр как в окне редактора, так и в браузере по умолчанию, а также пошаговая отладка.

Для программирования на Perl, пожалуй, лучше всего подходит NetObject Fusion, обладающий обширной справкой по этому языку. Поддержкой PHP может похвастаться довольно большое количество редакторов: как небольшие EditPlus, HTML-Kit, PHPEd и UltraEdit, так и достаточно громоздкий HomeSite. Здесь не ставится цель делать их детальный обзор, желающие могут посетить раздел HTML-редакторов на http://tucows.com.

Что касается технологий программирования, то все современные языки сценариев поддерживают как классическую процедурную, так и объектно-ориентированную, хотя и в различной степени. В любом из перечисленных языков вы можете использовать встроенные и внешние объекты, их методы и свойства, но создать полноценный собственный класс можно лишь на С-подобных языках: Perl и PHP.

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

· ASP:

§ Хилайер С., Мизик Д. Программирование Active Server Pages. - М: «Русская редакция», 1999. – 296 с.

§ http://www.activeserverpages.ru

§ http://www.oduv.ru/doc/asp/book/

§ http://asp.ablogic.ru/

· Perl:

§ Холзнер С. Perl: специальный справочник. – СПб.: «Питер». 2000. – 496 с.

§ Шварц Р., Кристиансен Т. Изучаем Perl. - К.: «BHV», 2000. - 320 с.

§ http://www.citforum.ru/internet/perl_tut/index.shtml

§ http://www.citforum.ru/database/cnit/6.shtml

§ http://reference.perl.com/

§ http://www.webscript.ru/

· PHP:

§ Ратшиллер Т., Геркен Т. PHP4: разработка Web-приложений. - СПб: Питер, 2001. - 384 с.

§ Томсон Л., Веллинг Л. Разработка Web-приложений на PHP и MySQL. - К.: "ДиаСофт", 2001. - 672 с.

§ http://www.citforum.ru/internet/php3/index.shtml

§ http://php.spb.ru/

§ http://www.php4all.ru/

§ http://rusphp.chat.ru/