Fotoalbum v PHP – hlavní stránka

16. června 2002

•

V minulém díle jsem vás seznámil se základními možnostmi, které by mělo fotoalbum uživateli nabízet, dnes se podíváme na základní zobrazení seznamu kolekcí fotografií, ve kterých si uživatel bude moci listovat a vybrat si tak kolekci, kterou bude chtít zobrazit.

Hlavní stránka

Nejprve se podíváme, jak bude vypadat hlavní stránka fotoalba. Vedle nadpisu budeme mít v horní liště připraveno formulářové pole pro jednoduché vyhledávání nad fotografiemi. V prostřední části stránky bude zobrazen formulář (s prvkem SELECT), v němž si uživatel bude moci nalistovat kolekci fotek, která ho bude zajímat. Pod tímto formulářem budou odkazy na jednotlivé roky. Umožníme tak uživateli i jiný přístup ke kolekcím. Základní představu, jak bude vypadat úvodní stránka, může poskytnout následující obrázek:

Struktura skriptu index.php

Nyní si ukážeme základní kostru skriptu index.php, který nám bude zajišťovat zobrazování všech kolekcí fotografií uživateli a dále umožňovat výběr kolekcí dle daného roku:

<HTML>
<HEAD>
<TITLE>Fotoalbum 1.0</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=0 WIDTH=“100%“>
<TR> <TD ALIGN=left WIDTH=“40%“>
<H1>Fotoalbum 1.0</H1> </TD>
<TD ALIGN=right WIDTH=“60%“>
<FORM ACTION=“search.php“ METHOD=“get“>
<INPUT TYPE=text NAME=“retezec“ VALUE=““>
<INPUT TYPE=submit NAME=“action“ VALUE=“Hledej“>
</FORM> </TD> </TR> </TABLE>
<HR SIZE=1 NOSHADE>
<?
if (!$action) {
/* (1) zobrazeni (ve formulari) vsech kolekci fotografii v albu */
}
if ($action == „rok“) {
/* (2) zobrazeni alb pro vybrany rok */
}
?>
<HR SIZE=1 NOSHADE>
<?
/* (3) Zobrazeni roku, ve kterych kdy byla alba vydana */
?>
</BODY>
</HTML>

Úvodní část (obsahující klasický HTML kód) zobrazí nadpis stránky a vedle něj vpravo formulářové pole pro vyhledávání. Pod dělící čárou (<HR>) následuje vlastní PHP kód. Zobrazení nabídky všech kolekcí fotografií v albu (část označená (1)) ve formuláři, v němž si uživatel bude moci vybrat, se provede pouze v případě, že argument $action není definován (tj. skript je spuštěn poprvé). Je-li hodnota argumentu $action rovna „rok„, pak se zobrazí nabídka alb pro daný rok (konkrétní vybraný rok je zpřístupněný přes proměnnou $year). V poslední, třetí (3), části, zobrazíme klikatelnou nabídku všech roků, ve kterých kdy byla nějaká alba vydána.

Všechny kolekce (1)

Seznam všech kolekcí získáme z tabulky KOLEKCE. Budeme potřebovat zjistit název kolekce fotografií, rok, dobu (od kdy do kdy) a samozřejmě ID, které budeme předávat skriptu na zobrazení fotek ve vybrané kolekci (číslem ID je kolekce jednoznačně identifikovaná). Seznam kolekcí chceme setřídit abecedně dle názvu. Příslušný SQL dotaz vypadá takto:

select ID, NAZEV, ROK, DOBA from KOLEKCE order by ROK;

V této části zobrazíme formulář s prvkem SELECT. Jednotlivé položky (názvy kolekcí, spolu s dobou konání a rokem) vytáhneme z databáze pomocí výše uvedeného příkazu select.

print ‚<B>Dostupná alba:</B> <CENTER> <FORM ACTION=“show.php“ METHOD=“get“> <TABLE BORDER=0> <TR><TD VALIGN=top> <SELECT name=“kolekce“ size=10>‘;
mysql_connect(„localhost“, „login“, „heslo“);
$result = mysql(„album“, ‚select ID, NAZEV, DOBA, ROK from KOLEKCE order by ROK‘);
$p = mysql_num_rows($result);
for ($i=0; $i<$p; $i++) {
  $cislo = mysql_result($result, $i, „ID“);
  $nazev = mysql_result($result, $i, „NAZEV“);
  $doba = mysql_result($result, $i, „DOBA“);
  $rok = mysql_result($result, $i, „ROK“);
  print „<OPTION VALUE=$cislo> $nazev ($doba, $rok)\n“;
}
mysql_close();
print ‚</SELECT> </TD><TD VALIGN=top> <INPUT TYPE=submit NAME=“action“ VALUE=“Zobraz“> </TD></TR> </TABLE></FORM></CENTER>‘;

Alba dle let (3)

Záměrně přeskakuji část (2), k níž se vrátím ihned po vyřešení zobrazení roků, ve kterých byla alba vydána. Tato část kódu je velmi jednoduchá. Z databáze potřebujeme získat pouze jednotlivé roky a pomocí nich pak zkonstruujeme klikatelné odkazy, ve kterých budeme vždy volat skript index.php s parametrem action=rok a konkrétní rok bude předán v parametru year. Roky získáme z databáze následujícím dotazem:

select distinct ROK from KOLEKCE order by ROK;

PHP kód části (3) by mohl vypadat následovně:

mysql_connect(„localhost“, „login“, „heslo“);
$result = mysql(„album“, ‚select distinct ROK from KOLEKCE order by ROK‘);
$p = mysql_num_rows($result);
for ($i=0; $i<$p; $i++) {
  $rok = mysql_result($result, $i, „ROK“);
  print „<A href=\“index.php?action=rok&year=$rok\“>$rok</A> „;
  if ($i<$p-1) { print „| „; }
}
mysql_close();

Alba dle vybraného roku (2)

Klikne-li uživatel na některý z roků ve spodu hlavní stránky (odkazy jsme vygenerovali v části (3)), zavolá se znovu skript index.php, ovšem s parametrem action=rok (vybraný rok je uložen v $year). Všechny kolekce pro daný rok získáme opět z databáze, a to následujícím SQL dotazem:

select ID, NAZEV, DOBA, ROK from KOLEKCE where ROK = $year order by NAZEV;

Všechny nalezené kolekce zobrazíme ve formě nečíslovaného seznamu. Každý název bude klikací, po kliknutí se zavolá skript show.php, který zobrazí obsah dané kolekce. Ukázka je na následujícím obrázku:

Kód 2. části je následující:

mysql_connect(„localhost“, „login“, „heslo“);
$result = mysql(„album“, „select ID, NAZEV, DOBA, ROK from KOLEKCE where ROK = $year order by ROK“);
$p = mysql_num_rows($result);
print „<B>Alba vydaná v roce: $year</B>“;
print „<UL>“;
for ($i=0; $i<$p; $i++) {
  $cislo = mysql_result($result, $i, „ID“);
  $nazev = mysql_result($result, $i, „NAZEV“);
  $doba = mysql_result($result, $i, „DOBA“);
  $rok = mysql_result($result, $i, „ROK“);
  print „<LI> <A href=\“show.php?kolekce=$cislo\“>$nazev</A> ($doba, $rok)\n“;
}
print „</UL>“;
print ‚<B>Zobrazit nabídku <A href=“index.php“>všech alb</A></B>.‘;
mysql_close();

Kompletní skript index.php si můžete stáhnout zde. Skript uložte do hlavního adresáře \Album.