V minulém díle jsme načali tvorbu portálu pro virtuální hudební
skupinu. Dnes si ukážeme, jak na takovém portálu realizovat navigaci
mezi jednotlivými částmi webu. Uvidíme rovněž, že již v této fázi
návrhu se dají použít některé "osvědčené triky" ostřílených
webdesignérů.
Kódování a typ dokumentu
V navázání na předchozí díl se (například) rozhodneme, že budeme
používat kódování utf-8. Tím bychom se měli zcela vyhnout problémům s
češtinou. Jiná dobrá volba je iso-8859-2. Pokud máte pocit, že byste
své stránky chtěli kódovat v čemkoli jiném, zvažte to. Většinou pro to
není důvod. Rovněž se rozhodneme použít (například) typ dokumentu HTML
4.0 Transitional. Odpovídající DOCTYPE a meta-tag můžeme do dokumentu
hned zapsat. Informace můžete čerpat ze seriálu Pavla Káchy zde na
Linuxsoftu.
Rozvržení stránky
Minule jsem slíbil, že náš portál bude mít tabulkový layout. Ten
navrhneme z výukových důvodů co možná nejjednodušší. Stránka tedy bude
tvořena tabulkou, která bude centrovaná a bude mít jednu širokou buňku
v prvním řádku jako záhlaví a dvě užší buňky ve druhém řádku jako tělo
(viz obrázek).
V levé buňce budeme mít seznam odkazů a v pravé buňce budeme zobrazovat vlastní obsah webu. Takže, například po kliknutí na odkaz Diskografie se nám v buňce vpravo otevře příslušný text s alby a písněmi. Startovací soubor webu index.php bude tedy obsahovat tabulku:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Web virtuální kapely
</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<style type="text/css"
title="text/css">
</style>
</head>
<?require
"./func.php";?>
<body>
<div align="center">
<table width="760" cellpadding="0"
cellspacing="0" border="1">
<tr>
<td width="760"
height="120" colspan="2"><img src="./images/top.jpg" width="760"
height="120"></td>
</tr>
<tr>
<td width="160"
valign="top"><?require
"./navigace.php"?></td>
<td width="600"
valign="top"><?ukazclanek()?></td>
</tr>
</table>
</div>
</body>
</html>
Cílem tohoto přístupu je udržet skript index.php co nejmenší, protože bude obsahovat pouze rozvržení. Všimněte si, že vkládáme soubor s funkcemi func.php a soubor s navigací navigace.php. V souboru s func.php je funkce ukazclanek(), která zahrnuje určitou aplikační logiku:
<?
function ukazclanek
()
{
if ((string)$_REQUEST["clanek"]<>'') $mujclanek=$_REQUEST["clanek"]; else $mujclanek="uvod";
if (is_file("./".$mujclanek.".htm")):
$nazevclanku=$mujclanek.".htm";
require $nazevclanku;
elseif (is_file("./".$mujclanek.".php")):
$nazevclanku=$mujclanek.".php";
require $nazevclanku;
else:
$nazevclanku=$mujclanek.".htm";
require "notfound.php";
endif;
}
?>
Cílem je, aby odkaz ve stylu index.php?clanek=uvod našel nejprve soubor uvod.htm, neexistuje-li pak uvod.php a nakonec (není-li k dispozici ani ten) soubor s chybovým hlášením (my jsme jej nazvali notfound.php). A teď to nejlepší - pomocí funkce require umístíme soubor uvod.htm (nebo výstup skriptu uvod.php) do naší buňky v pravé části tabulky a základní navigace je hotova.
Pozn.: Ještě detail. Jestliže se
skript index.php zavolá bez argumentů, bude funkce ukazclanek
automaticky předpokládat, že chceme zobrazit úvodní stranu celé
aplikace.
Soubor navigace.php si asi již umíte představit. Obsahuje odkazy ve
stylu index.php?clanek=[název článku] a díky navigační logice je již
zajištěno, že se požadované informace objeví v pravé části tabulky. Ve
skutečnosti toho jde dělat daleko víc - jiná navigace může být
zobrazena, pokud je přihlášen nějaký uživatel, pro administrátora může
být načten jiný layout a podobně.
Pár tipů k rozložení
- Pokud má být někde obrázek, osvědčilo se mi vyrobit dočasný obrázek spíše, než nechat místo prázdné. Dříve a snáze tak totiž odhalíte případné chyby v rozvržení stránky (nebo spíše chyby v interpretci norem u některých prohlížečů).
- Pokud používáte tabulkový layout, nechte po dobu vývoje nastavené zobrazování okrajů tabulky (border). Budete tak mít představu o tom, co je kde umístěno.
- Nikdy nedělejte zároveň práce na PHP - aplikační logice a zároveň na layoutu. Většinou to skončí výrobou "omalovánky", která se následně zahodí.
V dalším díle se podrobně podíváme na známý problém "jak určit, čím začít" a napíšeme první "velké" skripty na tomto webu. Na návrh v podobě, jak jsme jej dnes přednesli se můžete na našem webu podívat nebo si jej můžete stáhnout.