Kurs PHP - Część 6
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,
$lineNr=2; // zapisywanie 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 z7byt 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>");
fwrite($file, "$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> |
|
Zakończenie
To już koniec tego kursu. Więcej informacji o PHP, jak i gotowe skrypty
można znaleźć na stronach zamieszczonych w dziale linki. Dużo
ciekawych stron można znaleźć na oficjalnej stronie PHP. Strona
ta ma także bogaty zbiór linków.
|
