Realizace seznamu všech galerií na www
Obsah lekce:
- Princip galerie obrázků
- HTML kód stránky se seznamem galerií
- Cvičení
Princip galerie obrázků
Jako další součást webu vytvoříme stránku obsahující fotogalerie obrázků. V každé fotogalerii bude k dispozici několik fotografií. Uživateli se na stránkce zobrazí seznam dostupných galerií a uživatel si může libovolnou vybrat a prohlížet si v ní fotografie.
Dynamické fotogalerie na webu se většinou realizují pomocí databází. Tuto problematiku zatím nemáme k dispozici a tak musíme galerii vytvořit tak, abychom databázi nepotřebovali. Nějakým způsobem je nutné definovat:
- Galerie - každá galerie musí být nějak jednoznačně označena, musí mít nějaký název (případně také popis) a musí mít definovánu skupinu obrázků, které do ní patří.
- Obrázky v galerií - u každého obrázku musí být jasné, do které galerie patří a musí být v alespoň dvou variantách.
- Náhled obrázku - obrázek v malém rozlišení (například 150x100 pixelů). Obrázky této velikosti se budou zobrazovat jako seznam obrázků v každé z galerií. Obrázky jsou malé, protože jsou pouze informativní. Uživatel se dokáže podle tohoto náhledu rozhodnout, zda se chce podívat na obrázek ve větší velikosti. Pokud si bude chtít uživatel obrázek prohlédnout, tak bude stačit kliknout na jeho náhled a zobrazí se mu větší verze (detailnější obrázek).
- Obrázek - samotný obrázek ve velikosti pro prohlížení na webu v rámci www stránky. Rozměry takového obrázku bývají zpravidla okolo 700 pixelů (rozměr delší strany).
- Velký rozměr (originál) - odkaz na obrázek většího rozměru (nebo originál z fotoaparátu). Součástí internetové fotogalerie může být i možnost stáhnout obrázek ve velkém rozlišení. Toto se většinou řeší tak, že pod obrázek se ještě přidá odkaz na jeho plnou velikost a uživatel si jej stáhne pouze, pokud má skutečně zájem.
Kroky fungování galerie
Ukažme si jednotlivé popsané kroky fungování naší galerie na obrázcích z webu GJŠ Zlín.
1. Seznam galerií - tato stránka obsahuje nadpis "Fotogalerie" a seznam jednotlivých galerií. Každá galerie ze seznamu obsahuje nadpis, popis a náhledový obrázek galerie
2. Seznam náhledových obrázků galerie - když uživatel klikne na název galerie nebo na náhledový obrázek (případně na odkaz "více...") u konkrétní galerie, pak se mu otevře tato sekce, kde jsou v obdélníkovém schématu obsaženy náhledy všech obrázků galerie.
3. Detail obrázku galerie - po kliku na konkrétní náhledový obrázek v seznamu obrázků galeri se otevře internetová stránka obsahující originální obrázek. U obrázku může být odkaz na obrázek v plné velikosti. Součástí této stránky bývají často odkazy na další a předchozí obrázek pro snadné procházení obrázků galerie. Tuto třetí sekci lze realizovat také pomocí vyskakovacího okna (například pomocí javascriptu).
HTML kód stránky se seznamem galerií
Musíme vymyslet způsob, jak zadat informace o galeriích tak, aby jejich počet mohl být libovolný a dal se rozšiřovat. Pro nasazení robusního řešení (velké množství galerií) by se musela nasadit databáze. Naše řešení reprezentuje způsob, jak vytvořit univerzální systém galerií pro potřeby menšího webu.
Uvažujme nyní, jak vytvořit stránku se seznamem galerií. Podívejme se ještě jednou, jak bude stránka vypadat a pokusme se navrhnout její HTML kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>Seznam fotogalerií</h1>
<h2><a href="odkaz na stránku s fotografiemi galerie 1">Název fotogalerie 1</a></h2>
<p><img src="cesta k náhledovému obrázku galerie 1">popis galerie 1</p>
<h2><a href="odkaz na stránku s fotografiemi galerie 2">Název fotogalerie 2</a></h2>
<p><img src="cesta k náhledovému obrázku galerie 2">popis galerie 2</p>
...
</body>
</html>
Struktura tohoto HTML kódu je jasná. Co ale jasné není, je přesná podoba odkazu na seznam obrázků jednotlivých galerií. Jde vlastně jen o zodpovězení jednoduché otázky "Na jakou stránku se bude odkazovat odkaz s názvem galerie?".
Tento odkaz musí obsahovat jméno skriptu, který bude řešit výpis obrázků galerie, kterou si zvolíme. Odkaz tedy musí obsahovat informaci o tom, kterou galerii si přejeme zobrazit. Do odkazu tedy budeme muset přidat proměnnou reprezentující jednoznačné označení každé z galerií. Řekněme, že naše galerie bude v souboru galerie.php.
Odkaz na jednotlivé galerie bude vypadat takto: galerie.php?identifikatorgalerie=hodnotaindentifikatorugalerie.
Jak se bude jmenovat proměnná, která bude obsahovat identifikátor galerie, si můžeme libovolně zvolit. Bylo by vhodné, aby z onoho jména bylo jasné, že jde o proměnnou, která obsahuje označení galerie. V úvahu přicházejí například jména jako: galerie, idgalerie, idg nebo třeba jen g.
Jaké jméno proměnné vybereme bude záležet na tom, co bude proměnná obsahovat jako svou hodnotu. Co bychom mohli použít jako jednoznačný identifikár galerie? Při přemýšlení nad tímto problémem nezapomeňte zároveň na to, že hodota by měla být taková, abychom mohli automatizovaně vygenerovat celý seznam galerií (ať už je galerií jakékoliv množství). Jinými slovy: náš skript v php musí být schopen vytvořit internetovou stránku se seznamem galerií (všechny názvy galerií a odkazy na ně).
Posloupnost hodnot, kterou je možno snadno vytvořit, je například číselná řada 1,..,n. Každá galerie bude mít přiřazeno číslo, které ji jednoznačně identifikuje. Naše proměnná by se mohla jmenovat například cislogalerie a pro první galerii bude mít hodnotu 1, pro druhou 2 atd. Výsledný HTML kód našeho seznamu galerií bude vypadat takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>Seznam fotogalerií</h1>
<h2><a href="galerie.php?cislogalerie=1">Název fotogalerie 1</a></h2>
<p><img src="cesta k náhledovému obrázku galerie 1">popis galerie 1</p>
<h2><a href="galerie.php?cislogalerie=2">Název fotogalerie 2</a></h2>
<p><img src="cesta k náhledovému obrázku galerie 2">popis galerie 2</p>
...
</body>
</html>
Cvičení
Abychom mohli generovat HTML kód naší stránky, tak potřebujeme cyklus. Ten nám v každém kroku vygeneruje odkaz na jednu z galerií a proběhne tolikrát, kolik celkově galerií bude. Zvažme, jaký typ cyklu by byl pro tento úkol vhodný a nalezněme na Internetu způsob jak jej v PHP použít. Vytvořme si php soubor a pokusme se pomocí něj vytvořit HTML stránku, která bude obsahovat stejnou strukturu jakou jsme navrhli pro náš seznam galerií (řekněme, že galerií bude 5).
Další čtení
Otázky
- Jak lze předávat proměnné pro php skript?
- Znáte nějaký cyklus v php?