SSK - Techniki Internetowe

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "SSK - Techniki Internetowe"

Ewa Murawska
9 lat temu
Przeglądów:

1 SSK - Techniki Internetowe Ćwiczenie 4. Elementy grafiki w PHP. Prosty chat wykorzystujący elementy języka PHP. Elementy grafiki w PHP Możliwości PHP nie ograniczają się jedynie do generowania kodu HTML. Może on również służyć do tworzenia i manipulacji plikami graficznymi w różnych formatach: gif, png, jpg, wbmp oraz xpm. PHP potrafi wysłać obrazek strumieniem do przeglądarki. Aby użyć funkcji operujących na obrazkach, PHP musi mieć wkompilowaną obsługę biblioteki GD. PHP może potrzebować również innych bibliotek, w zależności od tego z jakim formatem graficznym chcemy pracować. Biblioteka GD od wersji 1.6 nie obsługuje formatu GIF. Na początek zmodyfikujemy nasz licznik z poprzedniego ćwiczenia (skrypt31.php) tak, aby jego cyfry wyświetlały się w formie graficznej. Skrypt ten nie będzie jednak jeszcze korzystał z graficznych funkcji PHP - wykorzystamy je dopiero w następnym przykładzie. Przed uruchomieniem skryptu należy wykonać następujące czynności: w katalogu public_html utworzyć katalog o nazwie obrazy; zmienić prawa dostępu do katalogu obrazy tak, aby inni użytkownicy mieli możliwość zapisywania w nim; pobrać ze strony plik z cyframi; rozpakować go i umieścić w utworzonym katalogu obrazy. A oto zawartość skryptów realizujących nasz prosty licznik w wersji graficznej (zgodnie z życzeniem staram się nie używać w skryptach polskich znaków ;-) : skrypt41.php <?php include( "licznik.php" ); <TITLE> Strona testowa </TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso "> <META name="pragma" CONTENT="no-cache"> <BODY> Strona 1

Może on również służyć do tworzenia i manipulacji plikami graficznymi w różnych formatach: gif, png, jpg, wbmp oraz xpm. PHP potrafi wysłać obrazek strumieniem do przeglądarki.

2 <? $cyfry = strrev(strval($ile)); // odwracamy kolejnosc znakow zmiennej // $ile, poniewaz nasze cyfry bedziemy // wyswietlac "od konca" echo "Ta strona byla ogladana "; $i = strlen($cyfry)-1; do // wyswietlamy w petli poczatkowe zera, tak aby // lacznie wyswietlalo sie zawsze 5 cyfr licznika echo "<IMG SRC=obrazy/0.gif ALIGN=top border=0>"; $i++; while($i<4); $i = strlen($cyfry)-1; do // wyswietlamy w petli kolejne cyfry licznika echo "<IMG SRC=obrazy/$cyfry[$i].gif ALIGN=top border=0>"; $i--; while($i>=0); echo " razy."; licznik.php (ten sam, co ostatnio) <?php // plik acces.log w katalogu logs b dzie zawieral // zapisana liczbe odwiedzin naszej strony $LogFilePath="logs/access.log"; if(file_exists($logfilepath)) // sprawdzamy, czy plik istnieje // jesli tak, to: $file=fopen($logfilepath, "r"); // otwieramy plik do odczytu flock($file, 1); // blokujemy do odczytu $ile=fgets($file, 100); // odczytujemy wartosc // odblokowujemy plik // zamykamy plik $ile++; // zwiekszamy wartosc licznika o 1 else $ile=1; // je li plik nie istnieje, // s to pierwsze odwiedziny Strona 2

gif ALIGN=top border=0>"; $i++; while($i<4); $i = strlen($cyfry)-1; do // wyswietlamy w petli kolejne cyfry licznika echo "<IMG SRC=obrazy/$cyfry[$i].

3 $file=fopen($logfilepath, "w"); flock($file, 2); fwrite($file, $ile); // za ka dym razem natomiast: // otwieramy plik do zapisu // blokujemy do zapisu // zapisujemy wartosc zmiennej $ile // odblokowujemy plik // zamykamy plik Proszę przeanalizować składnię pierwszego ze skryptów. Przetestować działanie licznika, przeładowując go wielokrotnie (jak pamiętamy, w tej wersji nie jest on odporny na odświeżanie). Spróbować wprowadzić drobne modyfikacje, np. zwiększyć lub zmniejszyć liczbę wyświetlanych cyfr licznika. Kolejny skrypt będzie modyfikacją drugiego przykładu z poprzedniego ćwiczenia, tzn. licznika odwiedzin bazującego na cookies (skrypt32.php). Tym razem wykorzystamy niektóre z graficznych funkcji PHP. A oto opis składni wykorzystywanych w skrypcie funkcji: $obrazek = ImageCreate($szer,$wys); Funkcja ta tworzy pusty obrazek o określonych rozmiarach. Wynik zwraca w postaci zmiennej $obrazek. Parametry funkcji: $szer, $wys (typu int) szerokość oraz wysokość (w pikselach) tworzonego obrazka. $obrazek = ImageCreateFromJPEG($plik); Funkcja ta tworzy zmienną reprezentującą obrazek, na podstawie istniejącego pliku w formacie JPEG. Parametr: $plik (typu string) nazwa (lub URL) pliku JPEG. $szer = ImagesX($obrazek); $wys = ImagesY($obrazek); Funkcje te zwracają odpowiednio: szerokość oraz wysokość obrazka określonego zmienną $obrazek. ImageCopyResized($cel,$zrodlo,$celX,$celY,$zrodloX,$zrodloY, $celszer,$celwys,$zrodloszer,$zrodlowys); Funkcja ta kopiuje (oraz ewentualnie przeskalowuje) prostokątny fragment obrazka źródłowego i umieszcza w obrazku docelowym. Parametry: Strona 3

Przetestować działanie licznika, przeładowując go wielokrotnie (jak pamiętamy, w tej wersji nie jest on odporny na odświeżanie). Spróbować wprowadzić drobne modyfikacje, np.

4 $cel, $zrodlo (typu resource) zmienne określające obrazek docelowy oraz źródłowy (kopiowany); $celx, $cely, $zrodlox, $zrodloy, (typu int) zmienne określające współrzędne obszaru kopiowania (lewy górny róg prostokąta z obrazkiem docelowym oraz źródłowym); $celszer, $celwys, $zrodloszer, $zrodlowys, (typu int) zmienne określające szerokość oraz wysokość (w pikselach) obszaru kopiowania. Przed uruchomieniem skryptu należy: pobrać plik z cyframi: zapisać go w swoim katalogu o nazwie obrazy. Jak widać, tym razem wszystkie cyfry znajdują się w jednym pliku nasz skrypt przed wyświetleniem zawartości licznika będzie musiał przeprowadzać obróbkę, graficzną, polegającą na przycięciu i skopiowaniu odpowiednich cyfr z pliku cyfry.jpg, oraz wklejeniu ich do obrazka docelowego. Oto jego zawartość: skrypt42.php setcookie("ile", $ile); // ladujemy obrazek z cyframi z pliku $cyfry=imagecreatefromjpeg("obrazy/cyfry.jpg"); // okreslamy wysokosc i szerokosc // (w pikselach) cyfr w obrazku $wys1=imagesy($cyfry); $szer1=imagesx($cyfry)/10; // definiujemy stale okreslajace zadana wysokosc // oraz szerokosc (w pikselach) cyfry licznika define("wys2",26); define("szer2",13); // okreslamy maksymalna dlugosc (liczbe cyfr) licznika define("maks_dlug",5); // tworzymy pusty (na razie) obrazek o odpowiednich rozmiarach $licznik=imagecreate(szer2*strlen($ile), WYS2); // kopiujemy odpowiednie fragmenty obrazka zrodlowego ($cyfry) // do obrazka docelowego ($licznik) for($i=0;$i<maks_dlug;$i++) ImageCopyResized($licznik, $cyfry, SZER2*$i, 0, $szer1*substr($ile, $i, 1),0, SZER2, WYS2, $szer1, $wys1); // wysylamy gotowy obrazek do pliku ImageJPEG($licznik,"obrazy/licznik.jpg"); Strona 4

Przed uruchomieniem skryptu należy: pobrać plik z cyframi: http://po.opole.pl/~bartecki/php/cyfry.jpg zapisać go w swoim katalogu o nazwie obrazy.

5 <TITLE> Strona z licznikiem graficznym </TITLE> <BODY BGCOLOR=DARKGREEN TEXT=WHITE> <H1> Odwiedzasz te strone po raz <IMG SRC="obrazy/licznik.jpg" ALIGN=MIDDLE> </H1> Proszę przeanalizować dokładnie składnię skryptu. Przetestować działanie licznika, przeładowując go wielokrotnie. Spróbować wprowadzić własne modyfikacje, np. zmienić rozmiar (w pikselach) cyfr licznika, wprowadzić zera początkowe, tak, aby liczba wyświetlanych cyfr była stała (jak w przykładzie poprzednim). Chat wykorzystujący elementy PHP W tym punkcie spróbujemy napisać 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 zaś będzie wyświetlać się treść rozmowy. W górnej ramce umieścimy znacznik META powodujący odświeżanie zawartości strony co 2 sekundy. 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ą. Chat będzie wymagał stworzenia 4 plików: chat.html - plik zawierający definicję ramek; gora.php - górna ramka, zawierająca skrypt wyświetlający rozmowę; dol.php - dolna ramka, zawierająca formularz i skrypt do jego obsługi; imie.html strona umożliwiająca wpisanie imienia. Skrypt w pliku dol.php musi mieć możliwość zapisu do pliku chat.txt w naszym katalogu logs. W pliku tym będzie przechowywana treść rozmowy. A oto zawartość poszczególnych plików (tym razem bez komentarzy): chat.html <TITLE> Chat </TITLE> <FRAMESET ROWS="*, 60" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0> <FRAME SRC=gora.php NAME="gora"> <FRAME SRC=imie.html NAME="dol" SCROLLING=NO> </FRAMESET> Strona 5

zmienić rozmiar (w pikselach) cyfr licznika, wprowadzić zera początkowe, tak, aby liczba wyświetlanych cyfr była stała (jak w przykładzie poprzednim).

6 gora.php <META http-equiv="content-type" content="text/html; charset=iso "> <META HTTP-EQUIV="REFRESH" CONTENT="2"> <BODY BGCOLOR=AQUA TEXT=BLACK> <TABLE BORDER=1 CELLPADDING=5 CELLSPACING=0 WIDTH=500 HEIGHT=350> <TR><TD VALIGN=TOP> <FONT CLASS=text> <? $chatfile="logs/chat.txt"; if(file_exists($chatfile)) $file=fopen($chatfile, "r"); flock($file, 1); while($linia=fgets($file, 81)) echo($linia); echo("<br>"); </FONT> </TR></TD></TABLE> dol.php <META http-equiv="content-type" content="text/html; charset=iso "> <BODY BGCOLOR=AQUA TEXT=BLACK> <FORM METHOD=GET ACTION=dol.php NAME=formularz> <INPUT TYPE=HIDDEN NAME=ACTION VALUE=add> <INPUT TYPE=TEXT SIZE=80 MAXLENGTH=80 NAME=TEKST> Strona 6

txt"; if(file_exists($chatfile)) $file=fopen($chatfile, "r"); flock($file, 1); while($linia=fgets($file, 81)) echo($linia); echo("<br>"); </FONT> </TR></TD></TABLE> dol.

7 <? $chatfile="logs/chat.txt"; if(file_exists($chatfile)) $file=fopen($chatfile, "r"); flock($file, 1); for($linenr=1;true;$linenr++) $linia=fgets($file, 81); if(!$linia) break; $linie[$linenr]=$linia; $nlines=$linenr; $file=fopen($chatfile, "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"); 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"; $KOLOR="black"; echo("<select NAME=KOLOR>"); for($i=0;$i<4;$i++) Strona 7

$$linie[$linenr]); fwrite($file, "<FONT COLOR=$KOLOR>$IMIE></FONT> $TEKST"); fwrite($file, "\n"); echo("<input TYPE=HIDDEN NAME=IMIE VALUE=$IMIE>"); $kolory[0]="black"; $opisy[0]="czarny";$

8 echo("<option VALUE=$kolory[$i]"); if($kolory[$i]==$kolor) echo(" SELECTED"); echo(">$opisy[$i]</option>"); echo("</select>"); </FORM> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> imie.html <META http-equiv="content-type" content="text/html; charset=iso "> <BODY BGCOLOR=AQUA TEXT=BLACK> <FORM METHOD=GET ACTION=dol.php> Wpisz swoje imie: <INPUT TYPE=TEXT SIZE=80 MAXLENGTH=80 NAME=IMIE> </FORM> Proszę przetestować działanie skryptów. Można poprosić kolegę (koleżankę), aby zechciał(a) wejść na nasz chat i porozmawiać z nami ;-). Przeanalizować składnię skryptów wykorzystują one wyłącznie poznane przez nas dotychczas na zajęciach elementy PHP. Strona 8

html <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> <BODY BGCOLOR=AQUA TEXT=BLACK> <FORM METHOD=GET ACTION=dol.

Podobne dokumenty

9. Dynamiczne generowanie grafiki, cz. 3

9. Dynamiczne generowanie grafiki, cz. 3 9.1. Kopiowanie fragmentów obrazu Funkcja imagecopy służy do kopiowania fragmentów obrazka między dwoma różnymi obrazkami, lub w obrębie jednego. Uwaga, przy kopiowaniu