Как сделать Гостевую книгу на Народе

Часть II. Гостевая книга + JavaScript

Серверный скрипт
Для начала рассмотрим скрипт, который получает форму, обрабатывает ее, добавляет и выводит сообщения Гостевой книги. Это серверный скрипт, который лежит на сервере www.narod.ru, поэтому его код неизвестен. Но нам этого и не надо. Достаточно знать что этот скрипт делает и как обрабатывает данные из формы.
И так, после отправки формы скрипт методом POST получает следующие переменные (свойство NAME элементов формы): owner, newlocation, your_name, your_email, your_url, your_message, key, rep. Значениями этих переменных являются свойство VALUE. Если VALUE не определено, то это - пустая строка.
Значения переменных your_email, your_url проверяются скриптом на соответствие адресу электронной почты и адресу URL соответственно. Если адрес не соответствует, то скрипт добавляет в Гостевую пустую строку. При этом не проверяется существование правильно введенного адреса. Для your_url, если значение присвоено формируется абсолютный адрес URL(http://......). Значение электронного адреса выдается в виде строки вместо блока {AUTHOREMAIL} в файле msg.txt (см. Часть I, Шаг2), адрес URL в виде строки вместо блока {URL}.
Если your_name И your_message - пустые строки, то сообщение добавлено не будет. Если your_name ИЛИ your_message не пустая строка, то сообщение будет добавлено. Поэтому в Гостевой вы можете получить сообщения, состоящие только из одного имени или только сообщения. Значения your_name и your_message в процессе обработки и выдачи избавляются от запрещенных символов. Слеш "\" вовсе игнорируется, вместо &,<,> в строке возвращаемой сервером - &amp; &lt; &gt; соответственно. В значении переменной your_message может быть еще один символ - \n (перевод строки), но об этом ниже... Значение имени выдается в виде строки вместо блока {AUTHORNAME}. Значение сообщения выдается в виде строки или строк вместо блока {MESSAGE}. Значение ответа на сообщения выдается также, как и {MESSAGE} в виде строки или строк вместо блока {OWNERREPLY}.
Другие значения, передаваемые в скрипт являются служебными и рассматривать их не будем. Исключением может быть newlocation, возможно будет необходимо перенаправлять посетителей по разным адресам, взависимости от ввода.
Значение даты {DATE} выдается ввиде строки формата: yyyy-mm-dd(пробел)hh:mm:ss. {JSDATE} - Дата по Гринвичу, в миллисекундах с 1 января 1970 года. Выдается в виде целочисленного значения.
Вместо блока {MESSAGES} из файла guest.txt (см. Часть I, Шаг2) выдается код HTML из файла msg.txt (по умолчанию 10 раз) с замененными блоками на их значения. Линейка с номерами сообщений {PAGEBAR} выдается в виде строки содержащей код HTML, а именно ссылки разделенные пробелами.

Некоторые правила размещения скриптов Гостевой
Рекомендую размещать коды скриптов, работающих с формой и с данными формы в заголовке страницы между тегами <HEAD> и </HEAD> в файле guest.txt. Если разместить в отдельном файле, то возможны ошибки и протормозки при загрузке страницы. Тег <SCRIPT> и закрывающий </SCRIPT> должны быть написаны заглавными буквами. <script> - такая запись в Гостевой работать не будет. Для наглядности привожу листинг:

Листинг 4.
-----------------------------------------------
<HTML>
   <HEAD>
     <TITLE>Моя Гостевая книга :)</TITLE>
      <!--Меты, линки и.т.п.-->
      - - - - - - - - - - - - - - - - - - - - - - - 
      <SCRIPT language=javascript>
          <!--
             Код скрипта
          //-->
      </SCRIPT>
   </HEAD>
   <BODY>
      <!--Тело документа-->
   </BODY>
</HTML>

Первый смайлик
Допустим, кто-то из посетителей вам улыбнулся вот так - :) или даже так - :))))))), а вам хочется, что бы это было так - . Если еще не создали, создадим папку /images/ и разместим в ней два графических файла: smile.gif - это смайлик и pixel.gif - это картинка 1х1 пиксель (можно создать в любом графическом редакторе). Для чего нужен pixel.gif, расскажу позже. А пока нам понадобится функция на JavaScript, которая заменяет текст на рисунок. Причем во всем тексте сообщения, убирая лишние скобки. Вот эта функция:

Листинг 5.
-----------------------------------------------
function showMess(instring){
    instring=instring.replace(/[^>]+>/, "");
    instring=instring.replace(/:-?\)+/g, "<img "+
"src=\"http://Ваш_сайт.narod.ru/images/smile.gif\">");
    return instring;
}

Функция в качестве параметра получает строку и возвращает строку с замененными ":)" и ":))))" на "<img src='http://Ваш_сайт.narod.ru/images/smile.gif'>". Размещаем этот код между коментариями в теге <SCRIPT> из листинга 4 (коментарии оставляем) и переходим к файлу msg.txt В нем находим {MESSAGE} и заменяем это следущим:

Листинг 6.
-----------------------------------------------
<p>
<img src="http://Ваш_сайт.narod.ru/images/pixel.gif"
onload="this.parentNode.innerHTML=showMess(this.parentNode.innerHTML);">
{MESSAGE}
</p>

Теперь подробнее о том, что я выделил красным. Дело в том, что если бы {MESSAGE} была строка, то можно было обойтись без "красного" и в файле msg.txt можно было написать <SCRIPT>document.write(showMess("{MESSAGE}"));</SCRIPT>, и ЭТО прекрасно работало бы. Но! {MESSAGE} будет строкой только в том случае, если посетитель при наборе сообщения ни разу, не нажал клавишу "ENTER". Если "ENTER" нажимался, то в значении переменной your_message, отправляемой серверному скрипту будет символ перевода строки - \n. Серверный скрипт не церемонится и добавляет к \n тег <BR>. Получается "\n<BR>". Теперь, когда {MESSAGE} приходит в коде Гостевой, код будет выглядеть так:

Листинг 7.
-----------------------------------------------
<SCRIPT>document.write(showMess("Строка 1
<BR>Строка2
<BR>Строка 3
 ---------------------
<BR>Строка N"));</SCRIPT>

Естественно код из листига 7 работать не будет и выдаст ошибку. Что я предлагаю? (если у вас есть другие варианты, пишите) Код из листинга 6 после загрузки "легкого" рисунка pixel.gif передает в showMess() все содержимое тега <p> в виде строки. Функция showMess() отбрасывает код рисунка ("красное" из листинга 5) и обрабатывает оставшуюся строку обычным образом. После чего уже новая строка становится содержимым тега <p>. Я тестировал этот метод в Microsoft Internet Explorer, Opera и Mozilla Firefox, везде работает. Не работает только в том случае, если нет JavaScript или отключен показ рисунков в браузере. В данном случае это не важно так как браузер покажет сообщение как оно было написано изначально.

Продолжение следует...
Рейтинг@Mail.ru

© 2006-2010 Павел Петров

Hosted by uCoz