Tematy: Model modułowego serwisu WWW Szablon strony Dołączanie elementów statycznych Treść generowana dynamicznie Podsumowanie PHP to język skryptowy, którego kod jest osadzany wewnątrz stron WWW. W początkowych rozdziałach strona WWW zawierająca kod PHP nazywana była szablonem, na podstawie którego generowana była dopiero strona wynikowa. W tym rozdziale zmienimy znaczenie słowa szablon. W zasadzie nie będziemy tworzyć definicji szablonu strony znaczenie tytułu rozdziału wyjaśni się w pewnym sensie samo. Współczesne serwisy WWW składają się z kilku, kilkudziesięciu lub więcej stron, przeważnie generowanych dynamicznie i posiadających pewne cechy wspólne: nagłówek z nazwą serwisu, stopkę z adresami webmasterów, zastrzeżeniami praw itp., panel nawigacyjny z odnośnikami do podstron serwisu itp. Istnieje obecnie tendencja, aby tego typu serwisy rozbijać na moduły: stworzyć szkielet strony zawierający poszczególne elementy powtarzające się oraz skrypty generujące treść dla każdej z podstron. Jeżeli dana podstrona nie zawiera treści, które muszą być generowane dynamicznie, można tę treść pobierać z pliku HTML. W rozdziale przedstawiono jeden ze sposobów podziału serwisu WWW na klocki. Opisano również, jakie zalety kryją się w takim podejściu do tworzenia serwisów WWW. Model modułowego serwisu WWW Projektując serwis WWW, zwykle staramy się, aby jego wygląd był jednolity, spójny, zapewniający użytkownikowi łatwą nawigację i orientację. Przeważnie w jednym miejscu umieszcza się menu serwisu, nazwę oraz treść strony, przy czym jedynie treść strony (i tytuł wyświetlany na belce okna przeglądarki) ulega zmianom, natomiast pozostałe elementy pozostają bez zmian. Można więc podzielić elementy strony na stałe (statyczne) i zmieniające się (dynamiczne). W tym właśnie duchu utrzymany będzie prosty serwis WWW, który stworzymy sobie jako przykład do tego rozdziału. Poszczególne elementy serwisu można umieścić dla porządku w odpowiednio przemyślanym drzewie katalogów, i tak: katalog główny skrypty generujące poszczególne podstrony serwisu, katalog szablony szablony i elementy statyczne serwisu, katalog skrypty skrypty generujące treść dynamiczną poszczególnych podstron serwisu. Osobno można umieścić inne elementy strony WWW, np. obrazki i elementy graficzne (w przypadku naszego projektu będzie to katalog grafika). Jest to jeden z wielu sposobów rozbicia serwisu WWW na moduły, warto zawsze zastanowić się, jaką dekompozycję zastosować, żeby zysk wynikający z faktu modułowości serwisu był wymierny. Załóżmy, że tworzymy prosty serwis WWW dla pewnego przedsiębiorstwa. Serwis ten będzie się składał z trzech podstron strony aktualności (wykorzystamy tutaj kod z rozdziału o bazach danych) ładowanej jako strona główna, strony z danymi teleadresowymi i strony ze zdjęciami. Jedynie strona z aktualnościami będzie zawierała element dynamiczny rzeczywiście generowany dynamicznie jego główną część stanowić będą dane pobrane z bazy za pomocą skryptu aktualnosci.php znajdującego się w katalogu skrypty. Pozostałe podstrony będą generowały zawartość elementów dynamicznych na podstawie plików HTML umieszczonych w katalogu szablony 1 / 11
(będą to pliki zdjecia.html i kontakt.html). Dodatkowo w katalogu szablony umieszczony został plik zawierający menu serwisu plik ten będzie ładowany przez każdą z podstron serwisu. Najważniejszym elementem, umieszczonym w katalogu szablony, będzie szablon główny strony WWW (opisany w następnym punkcie), w oparciu o który generowany będzie wygląd każdej z podstron. Szablon strony Podstawowym elementem każdej strony WWW jest w naszym projekcie jej szablon. Jest on przechowywany w katalogu szablony, w pliku o nazwie glowny.html. Szablon ten zawiera definicję ogólnego wyglądu strony WWW i będzie wczytywany przez każdy ze skryptów generujących poszczególne podstrony serwisu. Na listingu 10.1 przedstawiono kod tego szablonu. Dla uproszczenia użyta została podstawowa, akceptowana przez większość przeglądarek składnia HTML. Listing 10.1. Szablon strony WWW <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="pl"> <head> <meta httpequiv="contenttype" content="text/html; charset=utf8"> <title>%tytul_strony%</title> </head> <body> <table style="textalign:center" width="800"> <tr style="height:80px;"> <td valign="middle" colspan="2" style="textalign:left;"> <h1 style="fontfamily:verdana,arial,helvetica;color:#6495ed;"> Nasz serwis WWW! </h1> <hr style="color:#6495ed;height:2px"> </td> </tr> <tr style="height:400px;"> <td valign="top"> <div style="fontsize:10pt;fontfamily:verdana,arial,helvetica;textalign:left;color:#6495ed;"> %menu% 2 / 11
</div> </td> <td valign="top" style="width:650px"> <div style="fontsize:10pt;fontfamily:verdana,arial,helvetica;textalign:left;"> %tresc% </div> </td> </tr> <tr style="height:50px;"> <td valign="middle" colspan="2"> <hr style="color:#6495ed;height:2px"> <div style="textalign:center"> <span style="fontsize:8pt; fontfamily:verdana,arial,helvetica;"> <b>nasze przedsiębiorstwo 2009</b> </span> </div> </td> </tr> </table> </body> </html> Warto zwrócić uwagę na występujące w kodzie z listingu 10.1 napisy zawarte pomiędzy znakami %. Występują trzy takie napisy: %tytul_strony% w miejsce tego napisu wstawiony będzie tytuł każdej z podstron serwisu; %menu% w miejsce tego napisu wstawione zostanie menu serwisu (dla każdej podstrony takie samo); %tresc% ten napis zostanie zamieniony na treść strony (w przypadku aktualności będzie to wynik działania skryptu, w pozostałych przypadkach zawartość odpowiednich plików). 3 / 11
W jaki sposób podmienimy te napisy na rzeczywiste wartości? Otóż najprostszym sposobem na zamianę tych napisów na konkretne treści będzie użycie funkcji zastępującej wszystkie wystąpienia określonego ciągu znaków innym ciągiem str_replace(). Zaczniemy od elementów statycznych (ładowanych z pliku). Dołączanie elementów statycznych Jeden element statyczny menu serwisu dołączany jest przez każdy z trzech skryptów generujących podstrony naszego serwisu. W tym punkcie przyjrzymy się skryptom zdjecia.php i kontakt.php (oba umieszczone w katalogu głównym serwisu), które ładują i wyświetlają elementy statyczne. Listing 10.2 przedstawia skrypt zdjecia.php, a listing 10.3 zawiera kod skryptu kontakt.php. Listing 10.2. Skrypt zdjecia.php <?php // Tytuł strony $tytul = "Nasz serwis WWW Zdjęcia"; // Otwarcie plików z szablonami elementów strony $tplglowny = fopen("szablony/glowny.html", "r"); $tplmenu = fopen("szablony/menu.html", "r"); $tplzdjecia = fopen("szablony/zdjecia.html", "r"); // Wczytanie szablonów $strglowny = ""; while (!feof($tplglowny)) { $strglowny.= fgets($tplglowny); $strmenu = ""; while (!feof($tplmenu)) { $strmenu.= fgets($tplmenu); $strzdjecia = ""; while (!feof($tplzdjecia)) { 4 / 11
$strzdjecia.= fgets($tplzdjecia); fclose($tplglowny); fclose($tplmenu); fclose($tplzdjecia); // Umieszczenie menu w szablonie głównym $strglowny = str_replace('%menu%', $strmenu, $strglowny); // Dodanie tytułu strony $strglowny = str_replace('%tytul_strony%', $tytul, $strglowny); // Wstawienie treści strony $strglowny = str_replace('%tresc%', $strzdjecia, $strglowny); // Wyświetlenie gotowej strony print($strglowny);?> Listing 10.3. Skrypt kontakt.php <?php // Tytuł strony $tytul = "Nasz serwis WWW Kontakt"; // Otwarcie plików z szablonami elementów strony $tplglowny = fopen("szablony/glowny.html", "r"); $tplmenu = fopen("szablony/menu.html", "r"); $tplkontakt = fopen("szablony/kontakt.html", "r"); // Wczytanie szablonów $strglowny = ""; 5 / 11
while (!feof($tplglowny)) { $strglowny.= fgets($tplglowny); $strmenu = ""; while (!feof($tplmenu)) { $strmenu.= fgets($tplmenu); $strkontakt = ""; while (!feof($tplkontakt)) { $strkontakt.= fgets($tplkontakt); fclose($tplglowny); fclose($tplmenu); fclose($tplkontakt); // Umieszczenie menu w szablonie głównym $strglowny = str_replace('%menu%', $strmenu, $strglowny); // Dodanie tytułu strony $strglowny = str_replace('%tytul_strony%', $tytul, $strglowny); // Wstawienie treści strony $strglowny = str_replace('%tresc%', $strkontakt, $strglowny); // Wyświetlenie gotowej strony print($strglowny);?> 6 / 11
Skrypty z listingów 10.2 i 10.3 są do siebie łudząco podobne różnice tkwią tylko w identyfikatorach niektórych zmiennych oraz nazwach wczytywanych plików z treścią. Na początku każdego z tych skryptów tworzona jest zmienna, która zawiera tytuł strony (wyświetlany docelowo na belce okna przeglądarki). W następnej fazie otwierane są pliki zawierające szablon strony, menu i treść strony. Zawartość tych plików wczytywana jest do zmiennych napisowych i pliki zostają zamknięte. Wszystkie te operacje są na ogół znane, dlatego też nie będą tu szczegółowo opisywane. Ostatnia faza wykonania skryptu to podmienienie w tekście przechowywanym w zmiennej $strglowny (do niej wczytano zawartość pliku glowny.html, czyli szablonu strony) ciągów znaków ograniczonych symbolem % na zawartość plików (umieszczoną w odpowiednich zmiennych). Zawartość plików menu.html, kontakt.html i zdjecia.html przedstawia listing 10.4. Listing 10.4. Pliki menu.html, kontakt.html i zdjecia.html menu.html: <a href="index.php">aktualności</a><br /> <a href="kontakt.php">kontakt</a><br /> <a href="zdjecia.php">zdjęcia</a><br /> kontakt.html: <h3 style="textalign:center">nasz serwis WWW</h3> <p style="textalign:center"> ul. Bardzo długa 123<br> 00000 Miejscowość<br> tel. (000) 0000000<br> email: <a href="mailto:nasz_serwis_www@foo.com.pl">nasz_serwis_www@foo.com.pl</a> </p> zdjecia.html: <p style="textalign:center"> <img src="grafika/obrazek1.jpg" alt="[budynki]"><br /> Budynki </p> <p style="textalign:center"> <img src="grafika/obrazek2.jpg" alt="[fontanna]"><br /> Zabytkowa fontanna </p> 7 / 11
Ostatni wiersz każdego z tych skryptów to instrukcja print, która wyświetla w oknie przeglądarki przygotowaną zawartość strony. Efekt działania skryptów zdjecia.php i kontakt.php przedstawiają rysunki 10.1 i 10.2. Rysunek 10.1. Efekt działania skryptu z listingu 10.2 podstrona ze zdjęciami Rysunek 10.2. Efekt działania skryptu z listingu 10.3 podstrona z danymi teleadresowymi W następnym punkcie wyświetlimy stronę z generowaną dynamicznie treścią. dynamicznie Treść generowana Generowana dynamicznie treść strony zaczerpnięta została z bazy danych utworzonej na potrzeby rozdziału 7. Kod generujący treść strony umieszczony został w pliku aktualnosci.php w katalogu skrypty. Zawartość pliku aktualnosci.php została przedstawiona na listingu 10.5. Listing 10.5. Skrypt generujący treść strony głównej <?php $uchwyt_polaczenia = pg_connect("dbname=serwiswww user=postgres password=test"); $tresc_strony = ""; if (!$uchwyt_polaczenia) { $tresc_strony = "Problem z połączeniem z bazą danych...<br />"; else { $rezultat = pg_query($uchwyt_polaczenia, "SELECT * FROM aktualnosci ORDER BY aktualnosci_data DESC"); while ($wiersz = pg_fetch_assoc($rezultat)) { $tresc_strony.= "<h3 style="color:#6495ed;">$wiersz[aktualnosci_tytul]</h3>"; $tresc_strony.= "<p>$wiersz[aktualnosci_tresc]"; $tresc_strony.= "<br /><i>$wiersz[aktualnosci_data]</i></p>"; pg_close($uchwyt_polaczenia); 8 / 11
?> Skrypt z listingu 10.5 tak jak skrypty z listingów z poprzedniego punktu zawiera operacje związane z nawiązaniem połączenia z systemem zarządzania bazami danych i pobraniem danych. Dane te są formatowane do postaci pozwalającej je w sposób elegancki wyświetlić na stronie głównej naszego serwisu. Jednak dane te nie są od razu wyprowadzane do okna przeglądarki skrypt przechowuje pobrane i sformatowane dane w zmiennej napisowej $tresc_strony. Zmienna ta wykorzystywana jest przez skrypt generujący stronę główną serwisu (index.php), pokazany na listingu 10.6. Listing 10.6. Skrypt generujący stronę główną serwisu <?php // Dołączenie skryptu generującego aktualności require_once("skrypty/aktualnosci.php"); // Tytuł strony $tytul = "Nasz serwis WWW Aktualności"; // Otwarcie plików z szablonami elementów strony $tplglowny = fopen("szablony/glowny.html", "r"); $tplmenu = fopen("szablony/menu.html", "r"); // Wczytanie szablonów $strglowny = ""; while (!feof($tplglowny)) { $strglowny.= fgets($tplglowny); $strmenu = ""; while (!feof($tplmenu)) { $strmenu.= fgets($tplmenu); 9 / 11
fclose($tplglowny); fclose($tplmenu); // Umieszczenie menu w szablonie głównym $strglowny = str_replace('%menu%', $strmenu, $strglowny); // Dodanie tytułu strony $strglowny = str_replace('%tytul_strony%', $tytul, $strglowny); // Wstawienie treści strony $strglowny = str_replace('%tresc%', $tresc_strony, $strglowny); // Wyświetlenie gotowej strony print($strglowny);?> Skrypt z listingu 10.6 jest bardzo podobny do skryptów generujących pozostałe strony serwisu, jednak na samym początku dołączamy do tego skryptu plik aktualnosci.php. Dołączenie tego pliku z punktu widzenia przetwarzania skryptu przez PHP jest równoznaczne z połączeniem tych dwóch plików, przy czym zawartość pliku aktualnosci.php będzie jakby przepisana do skryptu index.php w miejscu, gdzie wystąpiła instrukcja require_once(). Dzięki takiemu podejściu do sprawy mamy w skrypcie index.php dostęp do zmiennej $tresc_strony, która przechowuje dane pobrane z bazy i odpowiednio sformatowane. Zawartość tej zmiennej wstawiana jest do szablonu strony jako treść. Efekt działania skryptu index.php z listingu 10.6 przedstawia rysunek 10.3. Rysunek 10.3. Strona główna serwisu I tym sposobem stworzyliśmy w pełni modułowy serwis WWW, spróbujmy więc teraz odpowiedzieć sobie na pytanie, czy taka operacja miała sens. Podsumowanie Właśnie, czy modularyzacja serwisu WWW ma sens? Wyobraźmy sobie, że nie rozbijamy strony na elementy i szablony. W takim przypadku każda z podstron serwisu zawierałaby pełną definicję wyglądu strony oraz elementy charakterystyczne dla danej podstrony. W momencie, kiedy chcielibyśmy dołożyć jedną lub kilka podstron, musielibyśmy na podstawie którejś z istniejących stron opracować sobie szablon i wkleić do niego istotne dla nowej podstrony elementy. W zasadzie wychodzi na to samo, ale dlaczego takiego łączenia modułów nie mógłby wykonać za nas komputer? Opracowanie szablonu strony powoduje, że my, jako programiści, nie musimy za każdym razem przepisywać całej strony. Bierzemy tylko ogólny, schematyczny skrypt ładujący elementy statyczne, dołączamy do niego skrypt (lub statyczną stronę w języku HTML) generujący treść i sprawa załatwiona mamy nową podstronę. Tyle że musimy pamiętać o uzupełnieniu menu. I to jest bardzo istotna wiadomość: gdyby strony serwisu nie korzystały z szablonów, należałoby dodać nową pozycję menu do każdej z istniejących 10 / 11
stron Podział stron serwisu na moduły jest dużym ułatwieniem dla twórców aplikacji WWW pozwala na szybkie zmiany wyglądu i funkcjonalności całego serwisu. Dzięki modularyzacji możemy jako administratorzy serwisu WWW w sposób szybki reagować na potrzeby użytkowników, bez konieczności przepisywania nieraz całego serwisu. 11 / 11