Ogólny zarys skryptu

W tym rozdziale opiszę krok po kroku tworzenie skryptu obsługującego prostego chata. Gotowy do użycia skrypt można ściągnąć stąd.
Okno przeglądarki podzielimy ramkami na dwie części. W dolnej będzie znajdował się formularz, zawierający jedno pole do wpisywania tekstu, w górnej będzie wyświetlać się treść rozmowy. Aby uniknąć użycia Javy w górnej ramce umieścimy znacznik META powodujący odświeżenie zawartości co 1 sekundę. Skrypt obsługujący formularz umieścimy w tym samym pliku, co formularz. Dięki temu użytkownik po wpisaniu linijki tekstu będzie mógł od razu zacząć pisać następną.

Użyte pliki HTML

Nasz skrypt będzie potrzebował 4 plików. Będą to:
index.html - plik zawierający definicję ramek
gora.php3 - górna ramka, zawierająca skrypt wyświetlający rozmowę
dol.php3 - dolna ramka, zawierająca formularz i skrypt do jego obsługi
chat.txt - plik w którym będzie przechowywana treść rozmowy
Skrypt w pliku dol.php3 musi mieć możliwość zapisu do pliku chat.txt. Teraz przedstawię początkową zawartość tych plików:

index.html:
=============
<HTML>
<HEAD>
<TITLE>YGREG - Chat</TITLE>
</HEAD>

<FRAMESET ROWS="*, 60" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
<FRAME SRC=gora.php3 NAME="gora">
<FRAME SRC=dol.php3 NAME="dol" SCROLLING=NO>
</FRAMESET>
</HTML>

gora.php3:
============
<HTML>

<HEAD>
<META http-equiv="Content-type"
content="text/html; charset=iso-8859-2">
<META HTTP-EQUIV="REFRESH" CONTENT="1">
</HEAD>

<BODY BGCOLOR=WHITE TEXT=BLACK>

<TABLE BORDER=1 CELLPADDING=5 CELLSPACING=0 WIDTH=500 HEIGHT=400>
<TR><TD VALIGN=TOP>

<FONT CLASS=text>
<?
// tutaj umieścimy skrypt wyświetlający treść
?>
</FONT>

</TR></TD></TABLE>

</BODY>
</HTML>

dol.php3:
===========
<HTML>
<HEAD>
<META http-equiv="Content-type"
content="text/html; charset=iso-8859-2">
</HEAD>

<BODY BGCOLOR=WHITE TEXT=BLACK>
<FORM METHOD=GET ACTION=dol.php3 NAME=formularz>
<INPUT TYPE=HIDDEN NAME=ACTION VALUE=add>
<INPUT TYPE=TEXT SIZE=80 MAXLENGTH=80 NAME=TEKST>

<?
// tutaj umieścimy skrypt obsługujący formularz
?>

</FORM>

</BODY>
</HTML>

Dla zwiększenia czytelności skryptów pola formularza będe zawsze nazywał dużymi literami. Jak widać w powyższym pliku będą potrzebne 2 skrypty - wyświetlający treść rozmowy i dodający nową linię.

Wyświetlanie treści rozmowy

Zaczniemy od skryptu wyświetlającego treść rozmowy w pliku gora.php3. Będzie on czytał kolejne linie z pliku chat.txt i wyświetlał je, rozdzielając tagami <BR>:
<?
$file=fopen("chat.txt", "r");
flock($file, 1);

while($linia=fgets($file, 81))
{
echo($linia);
echo("<BR>");
}

flock($file, 3);
fclose($file);
?>

Dodawanie nowej linii

Teraz pora na skrypt dodający do pliku linię. Ten będzie już bardziej skomplikowany. Oprócz dodania nowej lini na końcu, trzeba będzie usunąć pierwszą linię pliku, jeżeli stanie się on zbyt długi:
<?
if($ACTION=="add") // jeśli użytkownik dopiero wszedł
// na stronę, zmienna $ACTION będzie pusta
{
$file=fopen("chat.txt", "r");
flock($file, 1);

for($lineNr=1;true;$lineNr++)
{
$linia=fgets($file, 81); // odczytuje kolejną linię z pliku

if(!$linia)
break; // kończy pętle, jeśli natrafi na koniec pliku

$linie[$lineNr]=$linia; // dopisuje linię do tablicy $linie
}

flock($file, 3);
fclose($file);

$nLines=$lineNr; // zapisuje ilość lini w zmiennej $nLines

$file=fopen("chat.txt", "w");
flock($file, 2);

if($nLines<16) // jeżeli lini jest mniej niż 16 zapisywanie
$lineNr=1; // do pliku zacznie się od pierwszej lini
else // jeżeli 16 lub więcej, zapisywanie
$lineNr=2; // zaczyna się od 2 lini

for(;$lineNr<$nLines;$lineNr++) // zapisuje kolejne linie
fwrite($file, $linie[$lineNr]);

fwrite($file, $TEKST); // dopisuje linię podaną przez użytkownika
fwrite($file, "\n");

flock($file, 3);
fclose($file);
}
?>

Teraz można już przetestować pierwszą, najprostszą wersję skryptu. Najbardziej rażącą niedogodnością jest to, że po wysłaniu formularza pole do wpisywania tekstu nie jest aktywne i trzeba użyć myszy, żeby wpisać kolejną linię. Można temu zaradzić stosując bardzo prosty skrypt Javy:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Skrypt ten należy dopisać pod formularzem w pliku dol.php3. Teraz po załadowaniu strony dol.php3 pole formularza uaktywnia się automatycznie.

Rozróżnianie użytkowników

Chociaż skrypt działa już całkiem nieźle, ciężko będzie się w nim dogadać z więcej niż jedną osobą. Trzeba dodać możliwość wpisania imienia. Ale po wpisaniu imienia, trzeba je gdzieś zapamiętać. Można użyć 2 sposobów - skorzystać z Cookie, lub ukrytego pola w formularzu. W tym przypadku lepsze będzie ukryte pole - dzięki takiemu rozwiązaniu użytkownik będzie mógł przy ponownym wejściu na stronę podać inne imię. Ze strony będą też mogły skorzystać osoby, których przeglądarki nie obsługują cookies (jest ich już bardzo mało, ale może jakaś się trafi). Musimy więc stworzyć nowy plik, zawierający formularz do wpisania imienia. Plik imie.htm należy wpisać w pliku index.html jako źródło dolnej ramki (zamiast dol.php3).
imie.htm
==========
<HTML>
<HEAD>
<META http-equiv="Content-type"
content="text/html; charset=iso-8859-2">
</HEAD>

<BODY BGCOLOR=WHITE TEXT=BLACK>
<FORM METHOD=GET ACTION=dol.php3>
Wpisz swoje imię:
<INPUT TYPE=TEXT SIZE=80 MAXLENGTH=80 NAME=IMIE>
</FORM>
</BODY>
</HTML>

Konieczne będzie też dokonanie zmian w pliku dol.php3. Na końcu skryptu obsługującego formularz trzeba dopisać linię:
echo("<INPUT TYPE=HIDDEN NAME=IMIE VALUE=$IMIE>");

Spowoduje ona wprowadzanie do formularza ukrytego pola, zawierającego imię użytkownika. Należy teakże zmienić linię dodającą nowy tekst do pliku na:
fwrite($file, "$IMIE> $TEKST");

Teraz można już swobodnie rozmawiać.

Kolory

Każdy użytkownik ma już swoje imię, po którym można go odróżnić od innych. Może jeszcze pozwolić mu na wybór koloru, jakim będzie wyświetlane to imię? Nie będzie z tym zbyt dużo kłopotu. Wystarczy na końcu skryptu w pliku dol.php3 dodać poniższy fragment kodu:
$kolory[0]="black";
$opisy[0]="Czarny";
$kolory[1]="blue";
$opisy[1]="Niebieski";
$kolory[2]="red";
$opisy[2]="Czerwony";
$kolory[3]="green";
$opisy[3]="Zielony";

if($KOLOR=="")
$KOLOR="black";

echo("<SELECT NAME=KOLOR>");
for($i=0;$i<4;$i++)
{
echo("<OPTION VALUE=$kolory[$i]");
if($kolory[$i]==$KOLOR)
echo(" SELECTED");
echo(">$opisy[$i]</OPTION>");
}
echo("</SELECT>");

A linię wpisującą do pliku nowy tekst zmienić na
fwrite($file, "<FONT COLOR=$KOLOR>$IMIE></FONT> $TEKST");

W ten sposób zostanie utworzone pole wyboru, zawierające 4 kolory. Po wysłaniu formularza domyślnie zaznaczony będzie ostatnio wybrany kolor.

Gotowy skrypt

Ostatecznie chat składa się z następujących plików: index.html, imie.htm, dol.php3, gora.php3 i chat.txt. W pliku chat.txt jest zapisywana rozmowa. Pozostałe pliki w ostatecznej formie:
index.html
============
<HTML>
<HEAD>
<TITLE>YGREG - Chat</TITLE>
</HEAD>
<FRAMESET ROWS="*, 60" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
<FRAME SRC=gora.php3 NAME="gora">
<FRAME SRC=imie.htm NAME="dol" SCROLLING=NO>
</FRAMESET>
</HTML>

imie.htm
==========
<HTML>
<HEAD>
<META http-equiv="Content-type"
content="text/html; charset=iso-8859-2">
</HEAD>

<BODY BGCOLOR=WHITE TEXT=BLACK>
<FORM METHOD=GET ACTION=dol.php3>
Wpisz swoje imię: <INPUT TYPE=TEXT SIZE=80 MAXLENGTH=80 NAME=IMIE>
</FORM>
</BODY>
</HTML>

dol.php3
==========
<HTML>
<HEAD>
<META http-equiv="Content-type"
content="text/html; charset=iso-8859-2">
</HEAD>

<BODY BGCOLOR=WHITE TEXT=BLACK>
<FORM METHOD=GET ACTION=dol.php3 NAME=formularz>
<INPUT TYPE=HIDDEN NAME=ACTION VALUE=add>
<INPUT TYPE=TEXT SIZE=80 MAXLENGTH=80 NAME=TEKST>

<?
if($ACTION=="add")
{
$file=fopen("chat.txt", "r");
flock($file, 1);

for($lineNr=1;true;$lineNr++)
{
$linia=fgets($file, 81);

if(!$linia)
break;

$linie[$lineNr]=$linia;
}

flock($file, 3);
fclose($file);

$nLines=$lineNr;

$file=fopen("chat.txt", "w");
flock($file, 2);

if($nLines<16)
$lineNr=1;
else
$lineNr=2;

for(;$lineNr<$nLines;$lineNr++)
fwrite($file, $linie[$lineNr]);

fwrite($file, "<FONT COLOR=$KOLOR>$IMIE></FONT> $TEKST");
fwrite($file, "\n");

flock($file, 3);
fclose($file);
}

echo("<INPUT TYPE=HIDDEN NAME=IMIE VALUE=$IMIE>");

$kolory[0]="black";
$opisy[0]="Czarny";
$kolory[1]="blue";
$opisy[1]="Niebieski";
$kolory[2]="red";
$opisy[2]="Czerwony";
$kolory[3]="green";
$opisy[3]="Zielony";

if($KOLOR=="")
$KOLOR="black";

echo("<SELECT NAME=KOLOR>");
for($i=0;$i<4;$i++)
{
echo("<OPTION VALUE=$kolory[$i]");
if($kolory[$i]==$KOLOR)
echo(" SELECTED");
echo(">$opisy[$i]</OPTION>");
}
echo("</SELECT>");

?>

</FORM>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</BODY>
</HTML>

gora.php3
===========
<HTML>

<HEAD>
<META http-equiv="Content-type"
content="text/html; charset=iso-8859-2">
<META HTTP-EQUIV="REFRESH" CONTENT="1">
</HEAD>

<BODY BGCOLOR=WHITE TEXT=BLACK>

<TABLE BORDER=1 CELLPADDING=5 CELLSPACING=0 WIDTH=500 HEIGHT=400>
<TR><TD VALIGN=TOP>

<FONT CLASS=text>
<?
$file=fopen("chat.txt", "r");
flock($file, 1);

while($linia=fgets($file, 81))
{
echo($linia);
echo("<BR>");
}

flock($file, 3);
fclose($file);
?>
</FONT>

</TR></TD></TABLE>

</BODY>
</HTML>

(C)opyright 1999-2000 by Grzegorz Plebański
ygreg@and.pl
http://ygreg.and.pl