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

Часть I. Дизайн и HTML

Начало.
Информацию по созданию и подключению Гостевой книги можно почитать в помощи на Народе и на странице Разработка индивидуального дизайна гостевой книги на HTML. Не буду повторяться, а сделаю несколько добавлений к сказанному. Обо всем по-порядку.

Шаг 1. Создание дизайна и HTML.
В создании дизайна Гостевой нет ни каких ограничений. Создайте файл HTML с расширением .htm или .html и сотворите в нем все что хотите видеть в вашей Гостевой. Любые картинки, ссылки, анимацию... Почему .htm или .html? Потому что вам будет удобнее отлаживать его на вашем компьютере и в любом редакторе. Не забывайте, что все пути URL в этом файле должны быть абсолютными, то есть http:// ваш_сайт.narod.ru_или_другой/ путь_и_имя_файла (Пример http://pavelpetrov.narod.ru/home.html) в противном случае броузер будет запрашивать нужный файл на http://narod.ru и не найдет его там. Обязательно включите в созданный файл форму показанную ниже. Цифр не должно быть, я специально пронумеровал строки, что бы дать некоторые разъяснения. Форма будет работать только тогда, когда будет выложена на сайт, не пытайтесь отправлять из нее сообщения при отладке. Пока только необходимо создать вид вашей Гостевой.

Листинг 1.
-----------------------------------------------
1:  <FORM ACTION=leave_message.xhtml METHOD=POST>
2:  <INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
3:  <INPUT TYPE=HIDDEN NAME=newlocation VALUE=Новый_URL>
4:  Имя:<INPUT TYPE=TEXT SIZE=20 NAME=your_name>
5:  e-mail:<INPUT TYPE=TEXT SIZE=20 NAME=your_email>
6:  URL:<INPUT TYPE=TEXT SIZE=30 NAME=your_url>
7:  Сообщение:<br>
     <TEXTAREA ROWS=5 COLS=55 NAME=your_message></TEXTAREA>
8:  Контрольные цифры:<br>
     <img src="http://captcha.yandex.net/image?key={CAPTCHA_KEY}"
	align="absmiddle">
     <input type="hidden" name="key" value="{CAPTCHA_KEY}">
     <input type="text" name="rep"><br>
9:  <INPUT TYPE=SUBMIT VALUE="Добавить сообщение">
10: </FORM>

Строка 1 - обязательная. Открывающий тег формы. Может быть расширена свойством NAME для обработки скриптом, и некоторыми другими.
Строка 2 - обязательная. Остается неизменной, указывает на вашу гостевую. Без нее сообщение до вас не дойдет.
Строка 3 - обязательная. Новый_URL - это страница, на которую попадет посетитель после отправки сообщения.
Строки 4,5,6,7 - Это собственно сама форма, которая заполняется посетителем, или уже может быть заполнена вами. Здесь можно менять любые свойства, кроме NAME. Свойство TYPE менять только, если знаете чем заменить или как обработать перед отправкой формы. Можно добавлять стили и теги HTML-форматирования (Это относится и ко всей форме).
Строка 8 - необязательная. Читайте помощь на народе.
Строка 9 - необязательная. Вместо этой стороки может быть другой элемент, отправляющий форму через скрипт. Элемент необязательно должен быть частью формы. К примеру, это может быть рисунок, при клике на который форма будет отправлена. Если в 1-ой строке добавить NAME="guest_form", то строка <IMG SRC="http://my_site.narod.ru/image.jpg" ALT="Добавить сообщение" onclick="javascript:guest_form.submit();"> отправит форму.
Строка 10 - обязательная. Закрывающий тег формы.
В форме смело можно использовать стили, HTML-форматирование, добавлять другие элементы.

Для сравнения привожу форму из своей Гостевой книги:

Листинг 2.
-----------------------------------------------
<FORM ACTION=leave_message.xhtml METHOD=POST NAME=guest_form>
<INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
<INPUT TYPE=HIDDEN NAME=newlocation ->
VALUE="/gb&mainhtml=guest.txt ->
&messageshtml=mgb.txt">
Имя:<INPUT TYPE=TEXT SIZE=20 NAME=your_name>
e-mail:<INPUT TYPE=TEXT SIZE=20 NAME=your_email><br>
URL:<INPUT TYPE=TEXT SIZE=30 NAME=your_url><br><br>
Сообщение:<br>
<TEXTAREA ROWS=5 COLS=55 NAME=your_message></TEXTAREA><br>
<INPUT TYPE="button" VALUE="Добавить сообщение" onclick="checkText()">
<img alt="вставить смайлик" src="http://pavelpetrov.narod.ru/smilik/30.gif" ->
border="0" onclick="showDiv(1)" style="cursor:pointer">
<img alt="вставить жест" src="http://pavelpetrov.narod.ru/smilik/h8.gif" ->
border="0" onclick="showDiv(2)" style="cursor:pointer">
<INPUT TYPE="button" VALUE="Ни чего не писать" onclick="exitOut()">
</FORM>

Теперь необходимо в этом же файле создать блок, в котором будут выводится сообщения. Форматирование может быть любым, я рассмотрю наиболее удобное - это таблица (<TABLE>):

Листинг 3.
-----------------------------------------------
{PAGEBAR}
<TABLE width=600px border=1px cellspacing=0 cellpadding=0
	style="background-color:white">
<!--этот блок будет перемещен в файл сообщений msg.txt-->
   <TR height=10px>
      <TD colspan=2 style="background-color:#808040"></TD><!--разделитель-->
   </TR>
   <TR>
      <TD colspan=2>
         Дата: {DATE}
         Автор: <A href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</A>
         Домашняя страница: <A href="{URL}" target=_blank>{URL}</A>
      </TD>
   </TR>
   <TR valign=top>
      <TD align=right width=22%>Сообщение:</TD>
      <TD>{MESSAGE}</TD>
   </TR>
   <TR valign=top>
      <TD align=right>Ответ:</TD>
      <TD>{OWNERREPLY}</TD>
   </TR>
<!--конец файла msg.txt-->
</TABLE>
{PAGEBAR}

target=_blank я выделил зеленым. Это свойство (мишень) желательно поставить, что бы при клике на эту ссылку, она открывалась в другом окне. Вы же не хотите, что бы посетитель так просто покинул ваш сайт :)
Файл создан, все блоки имеются. Назовем этот файл guestbook.html и откроем его в броузере. Вы увидите Гостевую книгу с одним сообщением. Приблизительно следующее:

Имя: e-mail:
URL:
Сообщение:

Контрольные цифры:

{PAGEBAR}
Дата: {DATE} Автор: {AUTHORNAME} Домашняя страница: {URL}
Сообщение: {MESSAGE}
Ответ: {OWNERREPLY}
{PAGEBAR}

Где:

{PAGEBAR} линейка с номерами сообщений
{DATE} - Дата ввода сообщения, время московское
{AUTHOREMAIL} - E-mail автора сообщения
{AUTHORNAME} - Имя автора сообщения
{URL} - URL автора сообщения
{MESSAGE} - Текст сообщения
{OWNERREPLY} - Ответ на сообщение

Шаг 2. Создание файлов Гостевой для размещения на сайте
Необходимо создать 2 файла (рекомендую расширение .TXT). Назовем их: guest.txt и msg.txt. В msg.txt из guestbook.html копируем все, что находится в красных коментариях из Листинга 3, сохраняем его. msg.txt готов. В guest.txt копируем все содержимое файла guestbook.html. Вместо того, что находится в красных коментариях из Листинга 3 вставляем {MESSAGES}. Сохраняем guest.txt. Теперь все готово для размещения Гостевой на сайте.

Скачать файлы в архиве guestbook.rar (2кБ)

Шаг 3. Размещение файлов на сайте
В помощи на НАРОДЕ рассматривается вариант размещения файлов guest.txt и msg.txt в корневой папке, при этом ссылка на Гостевую выглядит так:
http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=guest.txt&messageshtml=msg.txt
Но если вы хотите разместить эти файлы в отдельную папку, скажем /guestbook/, как быть? Очень просто... Создайте папку /guestbook/ и разместите в ней файлы Гостевой. Теперь ссылка будет выглядеть так:
http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=guestbook/guest.txt&messageshtml=guestbook/msg.txt

Обработка ввода/вывода сообщений скриптами
Гостевая книга создана, но даже при наличии красивого дизайна, огорчают ограниченные возможности. Нет смайликов, картинок в сообщениях, ВВ-Кодов и.т.д. и.т.п. Как быть? Ответ на этот вопрос читайте в следующей части. Вам будет проще разобраться, если вы уже знакомы с JavaScript и скриптами в целом. Если не знакомы, то лучше будет сначала ознакомится.
И так... Вам сюда>>>

Рейтинг@Mail.ru

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

Hosted by uCoz