:: Memories Service :: - nr 7/2001/Sierpie±

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">
   <!--

      document.formularz.TEKST.focus();

   // -->
   </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">
   <!--

      document.formularz.TEKST.focus();

   // -->
   </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>

Kurs pochodzi z serwisu YGREG http://ygreg.and.pl

ygreg.and.pl

_________________________ 41_________________________

:: Poprzednia strona :: Menu :: NastΩpna strona ::

Kurs PHP #6