@t - magazyn w pełni skomputeryzowany

PHP (5 - ost)

Ogólny zarys skryptu
     W tym rozdziale opiszę krok po kroku tworzenie skryptu obsługującego prostego chata.
     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. Dzię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:

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>

Grzegorz 'Ygreg' Plebanski
ygreg@and.pl
http://ygreg.and.pl