Článek vytištěný ze serveru WebTip
Název článku: Obrázková galerie díl 2.
Datum publikování: 03.05. 2002
URL článku: http://www.webtip.cz/art/wt_tech_php/liquid_serial_ig2.html (kliknětě pro návrat)
Všechna práva vyhrazena (c) 2000 Grafika Publishing s.r.o.
Doslovné ani částečně přebírání tohoto materiálu není povoleno bez předchozího písemného svolení vydavatele - společnosti Grafika Publishing s.r.o.
Obrázková galerie díl 2.
Možná je to trochu nezvyk, ale hned v úvodu vám ukáži hlavní části souboru index.php, který tvoří hlavní část galerie. Červeně označené oblasti jsou většinou nepodstatný HTML kód, modře označené oblasti jsou pod tabulkou více vysvětleny a zelený text je klíčové rozdělení galerie. Tak se tedy nelekněte skriptu - je to opravdu pouze abyste měli představu, kde bude která část skriptu.
|
----HTML hlavička----
<? include "include/fce.php";?>
----úvodní část designu----
<?
connect();
@$prikaz = MySQL_Query("SELECT DISTINCT nazev FROM gallery");
if (!$prikaz):
echo "Nepodařilo se provést SQL příkaz.";
exit;
endif;
while ($zaznam = MySQL_Fetch_Row($prikaz)):
echo "<a href=\"index.php?click=1&zazn=".$zaznam[0]."\">
<div align=\"left\" style=\"margin-left: 10px; text-decoration:none; font-family:verdana; font-size:10px; text-transform: uppercase;\">
".Str_Replace("_", " ", $zaznam[0])."</div></a>";
endwhile;
MySQL_Close();
?>
<!--next_menu_item-->
</p></td>
<td width="500" bgcolor="#eeeeee" valign="top"> <p>
<H2><?if($click ==1) echo Str_Replace("_", " ", $zazn);?></H2>
<table border="0" cellpadding="0" cellspacing="0" align="center" valign="top" width="100%">
<?
if ($click == 1):
if (!IsSet($zobrazena_strana)):
$zobrazena_strana=1;
endif;
connect();
$vysledek = MySQL_Query("SELECT * FROM gallery WHERE nazev LIKE '".$zazn."'");
// výběr všech záznamů
$celkove_zaznamu = MySQL_Num_Rows($vysledek);
// spočítání všech záznamů
$na_strance=5;
// počet záznamů na jedné stránce
$pocet_stran=Ceil($celkove_zaznamu/$na_strance);
// kolik stran?
$limit1=(($zobrazena_strana-1)*$na_strance);
// od kolikateho zobrazit?
$limit2=($na_strance);
// zobrazit x zaznamu
$limit="LIMIT ".$limit1.", ".$limit2."";
/*---*/
$sql=MySQL_Query("SELECT * FROM gallery WHERE nazev LIKE '".$zazn."'".$limit);
if (!$sql):
echo "Chyba při provádění výpisu! </td></tr></table></body></html>";
exit;
endif;
$celkem = MySQL_Num_Rows($sql); // celkovy pocet zaznamu
if ($celkem!=0):
echo "<tr><td colspan=\"2\"><p align=\"center\">Strana: ".$zobrazena_strana."/ ".$pocet_stran."
Celkem: ".$celkove_zaznamu." obrázků.</p>";
echo "<p align=\"center\">".predchozi_dalsi($zobrazena_strana, $pocet_stran, $zazn)."</p><br></td><tr>";
endif;
while ($zaznam = MySQL_Fetch_Array($sql)):
echo "<tr><td width=\"150\"><p style=\"margin-left: 20px; margin-right: 20px;\">
<a href=\"#\" onClick=\"op('".$zaznam[src]."', ".$zaznam[wb].", ".$zaznam[hb].");\">
<img src=\"images_small/".$zaznam[src]."\" alt=\"\" width=\"".$zaznam[ws]."\" height=\"".$zaznam[hs]."\" border=\"0\"></a></p>
</td><td><p>Source: ".$zaznam[src]."<br>Weight: ".$zaznam[wb]."<br>Height: ".$zaznam[hb]."<br>Size: ".$zaznam[size]." kb</p>\n";
echo "</td></tr>";
endwhile;
MySQL_Close();
else:
echo "<tr><td colspan=\"2\"><h2>Best rated images<h2></td><tr>";
connect();
$make = MySQL_Query("SELECT * FROM gallery WHERE hlasy/hlasovalo <= 1.2 LIMIT 0, 5");
if (!$make):
echo "Chyba při provádění výpisu best! </td></tr></table></body></html>";
exit;
endif;
while ($zaznam = MySQL_Fetch_Array($make)):
echo "<tr><td width=\"150\"><p style=\"margin-left: 20px; margin-right: 20px;\">
<a href=\"#\" onClick=\"op('".$zaznam[src]."', ".$zaznam[wb].", ".$zaznam[hb].");\">
<img src=\"images_small/".$zaznam[src]."\" alt=\"\" width=\"".$zaznam[ws]."\" height=\"".$zaznam[hs]."\" border=\"0\"></a></p>
</td><td><p>Source: ".$zaznam[src]."<br>Weight: ".$zaznam[wb]."<br>Height: ".$zaznam[hb]."<br>Size: ".$zaznam[size]." kb</p>\n";
echo "</td></tr>";
endwhile;
endif;
?>
----konec stránky----
|
Tak a teď k funkci skriptu. První modře označený text má za úkol vypsat menu. Pokud si vzpomínáte, minule jste si vytvořili tabulku, v níž byl sloupec název. Obrázky, jež budou náležet stejné galerii, budou mít stejný název galerie -to je logické (a také velmi důležité) konstatování. Pokud tedy bude v tabulce pět rozdílných názvů, je jasné, že máme pět galerií. Takto si tedy můžeme vypsat na stránku menu. Budou jej tvořit názvy těchto galerií. Každé položce v menu přiřadíme pak odkaz s parametry. První parametr bude click=1 - ten tam bude vždy a druhý parametr bude zazn={nazev_galerie}, podle kterého necháme vypsat obrázky se stejným názvem galerie. Tímto máme na stránce menu.
Bylo by také dobře, aby když návštěvníci kliknou například na galerii Fotky 01, aby se jim objevila stránka s titulkem Fotky 01. Toho dosáhneme použitím parametrů, které odeslal návštěvník kliknutím na položku v menu - jsou to click a zazn. Zapíšeme tedy jednoduchou podmínku <?if($click ==1) echo Str_Replace("_", " ", $zazn);?>, která pokud bylo kliknuto na položku v menu (tedy pokud si návštěvník prohlíží obrázky v určité galerii) vypíše na stránku název této galerie. STR_replace je tam proto, že v databázi budeme uchovávat názvy galeríí s podtržítky místo mezer. Nadpis máme tedy vypsán taky.
Teď se nám dokument dělí na 2 části pomocí té zelené podmínky. Je to z důvodu, aby skript věděl, jestli má vypsat úvodní obrázky, nebo obrázky z galerie. Využíváme zde tohoto principu: Ke galeriím se dá dostat pouze kliknutím na odkaz v menu. Pokud návštěvník na odkaz klikne, bude mít $click hodnotu 1, pokud $click není, vypíšou se nejlépe hodnocené obrázky ze všech galerií.
Úvodní část skriptu pod $click=1 je určení parametrů pro stránkování. Chcete-li se o stránkování dozvědět více, opět vás odkáži na 5. díl o bazaru, kde je toto popsáno podrobně. Dostáváme se k části, která vypisuje náhledy obrázků na stránku. Konkrétně je to část následující:
|
<a href=\"#\" onClick=\"op('".$zaznam[src]."', ".$zaznam[wb].", ".$zaznam[hb].");\">
<img src=\"images_small/".$zaznam[src]."\" alt=\"\" width=\"".$zaznam[ws]."\" height=\"".$zaznam[hs]."\" border=\"0\"></a>
Source: ".$zaznam[src]."<br>Weight: ".$zaznam[wb]."<br>Height: ".$zaznam[hb]."<br>Size: ".$zaznam[size]." kb
|
První řádek je odkaz na velký obrázek. Používám zde javascriptovou událost onClick. Podrobně bude rozepsaná v dalším z dílů a bude mít funkci otevření obrázku v novém okně o šířce a výšce obrázku. Druhý řádek je odkaz na náhled obrázku. Zde se vypisují z databáze odkazy na obrázky a jejich šířky a výšky. Třetí řádek nám vypíše informace o obrázku jako soubor, rozměry a velikost. To je celé.
Část pod else má podobnou funkci. Rozdíl je jen v tom, že v úvodu nevybíráme obrázky jen z určité galerie, ale obrázky z celé databáze, které mají známku z hlasování lepší nebo rovnu 1.2. Zároveň jich vybíráme pouze 5 (LIMIT 0, 5).
Já doufám, že je vám funkce skriptu jasná. Není to nic složitého, jde tu především o to, uvědomit si principy celé aplikace. Příště se podíváme na anketu.
Autor: Čevelíček Marek
E-mail: liq@quick.cz