GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

Flagi państwowe — ikony uatrakcyjniające wygląd witryny WWW

Włodzimierz Gajda

Miniaturowe flagi państwowe są bardzo często wykorzystywane jako ikony, ułatwiające przekaz informacji. Rozwiązania takie znajdziemy między innymi w serwisie 90minut.pl, gdzie narodowość piłkarzy jest przedstawiona w postaci miniaturowej flagi. W artykule opiszę, w jaki sposób witrynę wzbogacić o ikony flag.

1. Flagi — ikony na stronach WWW

Flagi narodowe na witrynie http://90minut.pl są użyte do ustalenia narodowości piłkarzy. Rysunek 1 przedstawia skład Wisły Kraków w rundzie jesiennej sezonu 2007/08. Z prawej strony nazwiska każdego piłkarza znajduje się flaga narodowa.

Rysunek 1. Flagi na witrynie 90minut.pl

Flagi znajdziemy również na witrynach http://www.lendoo-kapsle.prv.pl (kolekcja kapsli z rysunku 2), http://awstats.sourceforge.net (oprogramowanie AWStats z rysunku 3) czy w Wikipedii (np. na stronie mundialu Francja 1998 przedstawionej na rysunku 4).

Rysunek 2. Flagi użyte w kolekcji kapsli na witrynie www.lendoo-kapsle.prv.pl

Rysunek 3. Flagi na witrynie programu AWStats

Rysunek 4. Flagi w Wikipedii: strona mundialu Francja 1998

2. Dane

W Wikipedii, na stronie http://pl.wikipedia.org/wiki/Flagi_pa%C5%84stw_%C5%9Bwiata znajdziemy zestawienie flag państwowych.

Po pobraniu wszystkich flag przygotowujemy plik tekstowy z opisem:

Abchazja|abchazja.png
Afganistan|afganistan.png
Albania|albania.png
Algieria|algieria.png
Andora|andora.png
Anglia|anglia.png
Angola|angola.png
Anguilla|anguilla.png
Anjouan|anjouan.png
...

Plik ten zawiera w pierwszej kolumnie nazwę państwa, a w drugiej — nazwę pliku graficznego przedstawiającego flagę państwową. Wszystkie pobrane flagi zapisujemy w jednym folderze, po czym skalujemy do identycznych rozmiarów, np. 80×50.

Możemy również przygotować nieco bardziej szczegółowe zestawienie, które oprócz nazwy państwa i flagi zawierać będzie:

Oto struktura bardziej rozbudowanego pliku danych:

Abchazja|Azja|http://pl.wikipedia.org/wiki/Abchazja|abchazja|wspolczesne
Afganistan|Azja|http://pl.wikipedia.org/wiki/Afganistan|afganistan|wspolczesne
...
ZSRR|Europa|http://pl.wikipedia.org/wiki/Zwi%C4%85zek_Socjalistycznych_Republik_Radzieckich|zsrr|historyczne

Tak przygotowane dane możemy w bardzo prosty sposób wykorzystać na witrynie WWW.

Kompletne dane, gotowe do użycia są zawarte w dwóch archiwach. Plik 1-1-dane-tylko-flagi.zip zawiera dane uproszczone (tylko flagi), zaś w pliku 1-2-dane-flagi-kontynenty.zip znajdziemy flagi państwowe wraz z podziałem na kontynenty i adresami w wikipedii.

3. Użycie flag

3.1 Przykład pierwszy — tabela flag

Pierwszy przykład przedstawia minimalną bazę danych, w której są zawarte flagi państwowe. Baza danych zawiera jedną tabelę o nazwie panstwo. Tabela ta ma kolumny:

Po utworzeniu bazy danych aplikacjami DBDesigner oraz Propel i wypełnieniu jej rekordami przystępujemy do napisania skryptu PHP. Skrypt odpowiada za dwa zadania:

Pod adresem index.php dostępna jest tabela flag. Natomiast konkretne flagi są udostępniane adresami:

index.php?id=3&id2=XXX

gdzie XXX jest identyfikatorem państwa w tabeli panstwo bazy danych.

Drukowanie tabeli obrazów odbywa się w następujący sposób:

$c = new Criteria;
$c->addAscendingOrderByColumn(PanstwoPeer::NAZWA);    
$panstwa = PanstwoPeer::doSelect($c);

$liczba_panstw = count($panstwa);
$kolumny = 6;
$wiersze = (int)(($liczba_panstw + $kolumny - 1) / $kolumny);    
$panstwa = array_pad($panstwa, $kolumny * $wiersze, '');

$s->assign('panstwa', array_1dim_to_2dim($panstwa, $kolumny));
$s->assign('kolumny', $kolumny);
break;    

Po pobraniu pełnej listy państw (statycznie wywołana metoda doSelect() klasy PanstwoPeer) „łamiemy” tablicę danych na cztery kolumny:

Dzięki takiemu rozwiązaniu możemy sterować liczbą kolumn tabeli zawierającej flagi. Przypisanie do zmiennej $kolumny wartości cztery:

$kolumny = 4;

spowoduje, że tabela będzie miała 4 kolumny.

Wyświetlanie pojedynczej flagi realizuje kod:

header("Content-type: image/png");    
echo $panstwo->getFlaga();
exit();

poprzedzony utworzeniem obiektu $panstwo w fazie walidacji:

...
if (
    (count($_GET) == 2) &&
    isset($_GET['id2']) &&
    str_ievpi($_GET['id2']) &&
    ($panstwo = PanstwoPeer::retrieveByPK($_GET['id2']))            
) {    
    $akcja = 3;
}                
...

Rysunek 5 przedstawia stronę WWW generowaną przez pierwszy z przykładów.

Rysunek 5. Przykład pierwszy: flagi

3.2 Przykład drugi — katalog podzielony na kontynenty

W drugim przykładzie baza danych zostaje wzbogacona o tabelę kontynent. Tabele panstwo oraz kontynent są połączone relacją 1:n. Ponadto tabela panstwo zawiera dodatkowe kolumny:

Pierwsza z nich zawiera miniaturę flagi, a druga — informację o tym, czy państwo istnieje współcześnie.

Dzięki tabeli kontynent, dane zawarte na witrynie mogą zostać poddane kategoryzacji. Opcja Kontynenty w menu głównym umożliwia wybranie państw z jednego kontynentu. Rysunek 6 prezentuje flagi państw Ameryki Południowej.

Rysunek 6. Przykład drugi: flagi z podziałem na kontynenty

Tym razem skrypt PHP jest nieco bardziej skomplikowany. Stosuje on następujące adresy URL:

index.php?id=3   lista wszystkich kontynentów
index.php?id=4   lista wszystkich państw współczesnych
index.php?id=9   lista państw historycznych

oraz

index.php?id=5&id2=XXX  miniaturowa flaga państwa
index.php?id=6&id2=XXX  szczegółowe dane państwa
index.php?id=5&id2=XXX  duża flaga państwa
index.php?id=8&id2=YYY  szczegółowe dane kontynentu

gdzie XXX jest identyfikatorem rekordu w tabeli panstwo, zaś YYY — identyfikatorem rekordu w tabeli kontynent.

3.3 Przykład trzeci — mundiale

Flagi możemy także dołączyć do gotowych, bardziej skomplikowanych rozwiązań. Szczegóły realizacji zależą oczywiście od implementacji skryptu, który chcemy rozszerzyć.

W przypadku witryny Mundiale omówionej przeze mnie szczegółowo w artykule pt. „Mistrzostwa świata w piłce nożnej, czyli Propel i DBDesigner w akcji” (MI 6/2007) zadanie to jest proste.

Wystarczy, że tabelę panstwo, która pierwotnie występowała w zadaniu, rozszerzymy o dodatkowe kolumny: flaga (pole BLOB przeznaczone na miniaturową flagę w formacie PNG) oraz plik (nazwa pliku graficznego z flagą, przydatna przy generowaniu przyjaznych URL-i). Podczas wstawiania danych do bazy należy oczywiście wprowadzić do bazy flagi w formacie PNG.

W kodzie skryptu pojawi się jeden dodatkowy przypadek:

case 13:
    header("Content-type: image/png");    
    echo $panstwo->getFlaga();
    exit();
    break;    

odpowiedzialny za wysyłanie miniaturowej flagi z bazy danych. Flagi są adresowane:

index.php?id=13&id2=XXX

gdzie XXX jest identyfikatorem państwa w tabeli panstwo.

Rysunek 7 przedstawia wzbogacone o ikony państw zestawienie meczów ćwierćfinałowych mundialu z 1998 roku.

Rysunek 7. Przykład trzeci: mundial z ikonami flag


Reklama

Szkolenia z Zend Framework 2.0