Web-дизайн. Статьи.

Интерактивность! Что? И как?

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

Первоначально была сеть, потом появилась электронная почта, и люди стали переписываться. Им захотелось рассказать о себе, поделиться информацией - появилась всемирная паутина (WWW). Но статические странички - это всего навсего статические странички... и тогда появилась интерактивность!

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

Итак, что же мы можем сделать, используя интерактивность? Самое известное, что приходит в голову - это счетчики, гостевые книги, формоотправители, он-лайн магазины, интерфейсы к базам данных. Практически, можно сделать все, что угодно. Все зависит только от умения программиста.

Как это осуществляется технически? А вот как - на стороне сервера мы размещаем нужные программы, базы данных,.. и конфигурируем web-сервер таким образом, чтобы он смог передавать запросы пользователей из сети обрабатывающей программе и получать от нее результат. Делается это посредством протокола CGI - Common Gateway Interface (что по-русски звучит как "общий шлюзовый интерфейс"). CGI - это набор правил, по которым сервер передает запрос программе. Любая программа, написанная таким образом, чтобы удовлетворять этим требованиям, сможет использоваться на Web-сервере.

Язык программирования, на котором пишется программа, большого значения не имеет, и может быть использован любой. Наиболее популярным языком программирования, используемым для написания несложных программ, следует признать PERL - язык, первоначально разработанный для написания отчетов и идеально подошедший для несложных CGI-программ. Текст языка на PERL принято называть скриптом (не путать с JavaScript - программа на PERL выполняется на стороне сервера, в то время как JavaScript - на стороне клиента). Язык является интерпретирующим, то есть анализирующим текст программы в процессе выполнения. Для работы PERL на web-сервере должен быть установлен и правильно сконфигурирован соответствующий интерпретатор.

Таким образом, интерактивные странички можно разделить на две части: форма и программа. В форме нам нужно правильно описать все элементы интерфейса и указать путь к выполняемой программе. Как видите, все не так уж сложно. А что делать, если Вы не программист, а Вам нужна несложная программа? В этом случае можно воспользоваться архивом готовых скриптов, большинство из которых бесплатны. Все типичные задачи давно уже решены и отлажены. Это гостевые книги, счетчики, листы рассылок и т.п. Нужно просто найти нужную и внимательно прочитать описание к ней. После этого остается только правильно разместить элементы в форме и указать специфические параметры для данного скрипта. Более сложные программы уже приходится писать программистам, имеющим достаточный опыт для этого.

Отправка формы по почте

Давайте разберем типичный пример - отправку формы по почте. Для этого мы воспользуемся готовой программой из архива Matt Wright, предназначенной для отсылки содержимого формы по почте - FormMail. Этот скрипт нужно сконфигурировать и разместить на web-сервере в специальном каталоге, где располагаются CGI-программы. Обычно он называется cgi-bin (для уверенности проконсультируйтесь с вашим провайдером - предоставляет ли он услуги по размещению CGI-скриптов, и как называется каталог для размещения скриптов). А на страничке - описать форму. Таким образом, нам нужно подготовить два файла: создать HTML-форму и сконфигурировать Perl-скрипт под наши нужды.

Создание формы

Начнем, пожалуй, с формы. Описание формы будет заключаться между тэгами <form> и </form> и содержать внутри себя элементы формы. Мы сделаем самый минималистический вариант формоотправителя, который будет содержать следующие поля: имя, электронный адрес, текст сообщения. HTML-код нашей странички выглядит следующим образом:

<html>
<head><title>Форма для отправки по почте</title></head>
<body>

<form name="Request" action="/cgi-bin/formmail.pl" method="post">
<input type=hidden name="recipient" value="yourmail@domain.com">
<input type=hidden name="subject" value="Запрос информации">
Ваше Имя: <br>
<input type=text name="Имя"><br>
E-mail: <br>
<input type=text name="E-mail"><br>
Сообщение: <br>
<textarea name="Сообщение"></textarea><br><br>
<input type=submit value="Отослать">
<input type=reset value="Очистить">
</form>

</body>
</html>

Немного разъяснений по вышеприведенному коду. Обратите внимание на параметр action в тэге <form> - он определяет адрес нашего скрипта (.pl - стандартное расширение для программ, написанных на PERL). Первые элементы в форме - это специальные скрытые поля для передачи информации скрипту: поле recipient определяет e-mail, на который мы хотим отослать содержимое формы, а поле subject - строку, которая будет появляться как "тема письма". Далее идет уже описание непосредственно полей формы. Их может быть сколько угодно, но каждое из них должно иметь имя (параметр name в тэге <input>), т.к. результатом работы скрипта будет письмо, в котором каждая строка состоит из пары значений: имени поля и его содержимого. И заканчивается форма двумя кнопками, служащими для отправки сообщения (submit) и очистки формы до начального состояния (reset).

Конфигурирование скрипта

Теперь сконфигурируем скрипт. Опуская несущественные для нас детали, листинг нашего скрипта можно представить так:

#!/usr/bin/perl

$mailprog = '/usr/lib/sendmail';
@referers = ('www.cherry-design.spb.ru','195.5.155.48');

# Здесь располагается код скрипта.

В данном случае вся конфигурация сведется к установке IP-адреса компьютера, на котором расположен web-сервер, и конфигурирования путей для программ perl и sendmail. Первая - непосредственно интерпретатор языка PERL, а вторая - это программа, к которой обращается скрипт, и которая осуществляет посылку сообщения по почте. Адрес расположения PERL-интерпретатора всегда задается первой строкой в скрипте, и в данном случае программа доступна по адресу /usr/bin/perl. Расположение программы sendmail задается второй строчкой в нашем листинге. И, наконец, третья строчка задает имя и IP-адрес web-сервера (для примера я указал параметры моего сайта).

Вот, практически, и все. Наш скрипт осталось только переписать в каталог. Но тут есть одна тонкость - дело в том, что скрипт будет располагаться на UNIX-машине, а текст в UNIX-формате имеет одно отличие от Windows: конец строки в UNIX обозначается символом возврата каретки <CR>, а в Windows - парой символов: перевод строки <LF> и возврат каретки <CR>. Если переписать такой файл по FTP в режиме BINARY, то скрипт работать не будет!!! При копировании скрипта на web-сервер нужно установить режим ASCII, который автоматически преобразует концы строк к UNIX-формату.

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