Anglická verze
logolink

< Zpět na seznam lekcí

Princip realizace dynamického webu

PHPObsah lekce:

  • Dynamický web a jeho části
  • Struktura souborů dynamického webu
  • Soubor index.php
  • Přepínání jednotlivých sekcí webu

Dynamický web a jeho části

V následujících lekcích se budeme věnovat tvorbě jednoduché internetové prezentace v jazyku PHP a databázového serveru MySQL. Naše prezentace se bude skládat z následujících částí:

  • Úvodní stránka - statické informace o stránce.
  • Zpracování textového souboru - realizace seznamu zaměstnanců s využitím externího textového souboru exportovaného z tabulkového kalkulátoru.
  • Fotogalerie - dynamicky generovaná galerie fotografií s definovanou adresářovou strukturou.
  • Registrační formulář - formulář s možností uložení dat do databáze.
  • Seznam článků - zobrazení článků uložených v databázi (analogie článků zpravodajského serveru).

Při realizaci se budeme snažit ukázat a využít co nejvíce výhod dynamických internetových technologií oproti statickým www stránkám.

Struktura souborů dynamického webu

Nejprve vytvoříme základní strukturu souborů našeho webu v námi zvolené složce (např. web) umístěné ve složce, kterou "vidí" webserver a umí v ní interpretovat php skripty. Pokud si nainstalujeme wamp server (wamp), pak to může být složka web ve složce c:\wamp\www\ (v této složce lze vytvářet složky pro dynamické internetové stránky). V námi vytvořené složce vytvoříme následující strukturu složek a souborů:

  • css - složka, do které umístíme soubory s kaskádovými styly pro náš web,
  • images - složka, do které budeme ukládat všechny soubory s grafikou,
  • index.php - soubor, který bude obsahovat základní strukturu našeho webu,
  • utils.php - soubor (knihovna), jež bude obsahovat části webu, které bude třeba centrálně definovat na jednom místě (například funkce pro spojení s databází, funkce pro práci s databází apod.).

Vytvoření souboru s kaskádovými styly

V aplikaci Adobe Dreamweaver (v případě, že jej nemáme k dispozici, tak stačí použít libovolný jiný textový editor jako např. pspad) vytvoříme nový prázdný css soubor v kódování utf-8 (Soubor -> Nový) jako na následujícím obrázku.

nový css soubor

Obsahem nově vytvořeného css souboru jsou pouze dva řádky. První z nich je informace o kódování css souboru. Druhou informací je pouze komentář, který obsahuje informaci o tom, že se jedná o css dokument.

Obsah nově vytvořeného css souboru styly.css
@charset "utf-8";
/* CSS Document */

Soubor styly.css uložíme do naší složky css. Jako další krok vytvoříme soubor index.php jako nový prázdný soubor typu php. V Adobe Dreamweaveru zvolíme Soubor -> Nový. Ve zobrazeném okně ještě k php souboru připojíme css soubor (pravý dolní roh okna viz následující obrázek).

nový soubor php
Obsah nově vytvořeného souboru index.php
<!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>
<link href="file:///C|/wamp/www/web/css/styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Všimněme si, že vložený kaskádový styl obsahuje absolutní cestu k souboru v rámci systému Windows na lokálním počítači. Cesta se změní na správnou relativní v momentě, kdy soubor uložíme do kořenovéh adresáře našeho webu (Soubor -> Uložit). Hlavička se pak změní takto:

Obsah nově vytvořeného souboru index.php
<!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>
<link href="css/styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Těmito kroky máme hotovo vše podstatné proto, abychom mohli začít vytvářet náš web.

Soubor index.php

Obsahem vytvořeného souboru index.php je prozatím pouze html hlavička naší internetové stránky. Jediné, co bychom měli v hlavičce stránky změnit je řetězec mezi značkami <title> a </title>. Pro vyhledávače (například fulltextový Google) je tato informace velmi důležitá při vkládání (tzv. indexování) stránky do vyhledávače. Měli bychom se vyhnout tomu, abychom v hlavičce ponechali informaci typu "nepojmenovaný dokument" (srovnejte například tady: kolik miliónů stránek název stránky ingnoruje...). Je možné, že zatím nevíme, jaký titulek bude stránku charakterizovat, ale nesmíme jej zapomenout v budoucnu doplnit.

Náš web se bude skládat ze dvou částí: menu a obsah. Realizujeme je pomocí tagů div s patřičným identifikátorem. Layout stránky následně vyřešíme pomocí kaskádových stylů.

Menu webu

Součástí webu je menu pomocí kterého je možno se přepínat mezi jednotlivými sekcemi. Na úvod vytvoříme menu od dvou položkách ("úvodní stránka" a "kontakty").

Jak víme, tak menu je v html definováno pomocí seznamu odkazů a lze jej napsat například takto:

HTML struktura menu v souboru index.php

<div id="menu">
<ul>
<li><a href="index.php">Úvodní strana</a></li>
<li><a href="index.php">Kontakty</a></li>
</ul>
</div>

Obsah webu

Další součástí webu bude div s obsahem dané stránky.

HTML struktura pro obsah stránky v souboru index.php

<div id="obsah">
<p>Tu bude obsah stránky.</p>
</div>

Náš soubor index.php obsahuje prozatím základní strukturu našeho webu.

Současná podoba souboru index.php

<!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>
<link href="css/styly.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menu">
<ul>
<li><a href="index.php">Úvodní strana</a></li>
<li><a href="index.php">Kontakty</a></li>
</ul>
</div>

<div id="obsah">
<p>Tu bude obsah stránky.</p>
</div>
</body>
</html>

Přepínání jednotlivých sekcí webu

Nyní zodpovíme zásadní otázku: "Jak bude fungovat přepínání mezi jednotlivými stránkami?". Ve statických html stránkách je nutno pro každou sekci vytvořit zvláštní html soubor a jako jednotlivé položky menu vytvořit odkazy na jednotlivé soubory webu. V našem případě máme ale soubor pouze jeden. Díky tomu, že stránku budeme generovat dynamicky, tak je možné používat běžné programátorské konstrukce jako if-then apod. Stránka pak vzniká jako výsledek programu v jazyce php.

To, co nyní požadujeme lze vyjádřit podmínkou typu: "Standardně chci zobrazit úvodní stránku a jinak stránku kontakty.".

Jak ale skriptu v php říci, kterou sekci webu chci zobrazit? Díky tomu, že protokol http je bezstavový, pak jediná možnost jak něco php skriptu říci je předání informace (proměnné) přes URL. Do každého odkazu v rámci našeho webu přidáme proměnnou sekce, která bude obsahovat řetězec určující, kterou sekci chceme zobrazit. V našem případě budeme mít prozatím dvě možné hodnoty v rámci URL:

  • index.php?sekce=uvodni-strana - pokud bude mít proměnná hodnotu "uvodni-strana", pak víme, že se má zobrazit úvodní strana.
  • index.php?sekce=kontakty - pokud bude mít proměnná hodnotu "kontakty", pak víme, že se má zobrazit stránka s kontakty.

V odkazech menu musíme upravit adresu tak, aby každý odkaz webu obsahoval naši proměnnou sekce.

Úprava odkazů v menu o proměnnou sekce

<div id="menu">
<ul>
<li><a href="index.php?sekce=uvodni-strana">Úvodní strana</a></li>
<li><a href="index.php?sekce=kontakty">Kontakty</a></li>
</ul>
</div>

V php skriptu si tedy musíme vyžádat informaci o tom, zda se v URL nachází proměnná sekce a jakou má hodnotu. Podle toho, jakou má tato proměnná hodnotu se ve skriptu rozhodneme, co se má stát. Jak již víme z lekce o formulářích, tak informace z URL se ukládají v superglobálním poli $_GET. Z něj si zjistíme hodnotu proměnné sekce a uložíme ji do proměnné $sekce v php skriptu takto:

Získání proměnné z URL pomocí pole $_GET

<body>

<?php
/* do proměnné $sekce uložíme hodnotu proměnné sekce z url */
$sekce = $_GET["sekce"];
?>

<div id="menu">
<ul>
<li><a href="index.php?sekce=uvodni-strana">Úvodní strana</a></li>
<li><a href="index.php?sekce=kontakty">Kontakty</a></li>
</ul>
</div>

<div id="obsah">
<p>Tu bude obsah stránky.</p>
</div>
</body>

Nyní je již pouze potřeba napsat podmínku pro zobrazení relevantních informací. To provedeme pomocí příkazu if (podmínka) {instrukce}.

Přidání podmínky pro výběr správné stránky

<div id="obsah">
<?php
if ($sekce == "uvodni-strana"){
print("Nyní se nacházíte na úvodní straně webu.");
}

if ($sekce == "kontakty"){
print("Nyní se nacházíte v sekci kontakty.");
}
?>
</div>

Pokud se nyní pokusíme náš web zobrazit bez zadání parametru sekce (například přes adresu http://127.0.0.1/web/), tak můžeme vidět následující:

php notice

Z obrázku jsou patrné dvě věci:

  • Zobrazil se řádek s textem: "Notice: Undefined index: sekce in C:\wamp\www\web\index.php on line 13". Jedná se o upozornění php na fakt, že z pole $_GET požadujeme proměnnou sekce, která není definována. Toto je díky nastavení direktivy v php modulu webserveru. Zda se toto zobrazí je závislé na nastavení webserveru, takže se to stát nemusí, ale může. Tyto poznámky lze vypnout pomocí ručního přenastavení této direktivy přímo v php skriptu pomocí příkazu error_reporting(E_ALL ^ E_NOTICE);. Tento příkaz umístíme jako první před všechny ostatní příkazy skriptu.
  • Nezobrazil se obsah úvodní stránky. Proč? Protože obsah úvodní stránky se zobrazí pouze tehdy, pokud je hodnota proměnné sekce rovna řetězci "uvodni-strana". Pokud proměnná sekce v url tuto hodnotu nemá, pak není splněna podmínka ve skriptu pro zobrazení patřičných informací a nezobrazí se nic. Pokud si tedy někdo vyžádá náš web bez parametru sekce, pak by se mu měla zobrazit úvodní stránka. To zařídíme tak, že na začátek skriptu přidáme podmínku, která říká: "Pokud není sekce definována, tak zobraz úvodní stranu (nastav hodnotu proměnné sekce na hodnotu "uvodni-strana").".
Úvodní nastavení proměnné sekce

<?php
error_reporting(E_ALL ^ E_NOTICE);

/* do proměnné $sekce uložíme hodnotu proměnné sekce z url */
$sekce = $_GET["sekce"];

if ($sekce == ""){
$sekce = "uvodni-strana";
}
?>

Náš výsledný skript realizuje přepínání mezi dvěma sekcemi a my v nich můžeme mít libovolný obsah. Skript je možné prohlédnout níže nebo stáhnout aktuální podobu webu php-web-v1.

Kompletní zdrojový 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>
<link href="css/styly.css" rel="stylesheet" type="text/css" />
</head>

<body>

<?php
error_reporting(E_ALL ^ E_NOTICE);

/* do proměnné $sekce uložíme hodnotu proměnné sekce z url */
$sekce = $_GET["sekce"];

if ($sekce == ""){
$sekce = "uvodni-strana";
}
?>

<div id="menu">
<ul>
<li><a href="index.php?sekce=uvodni-strana">Úvodní strana</a></li>
<li><a href="index.php?sekce=kontakty">Kontakty</a></li>
</ul>
</div>

<div id="obsah">
<?php
if ($sekce == "uvodni-strana"){
print("Nyní se nacházíte na úvodní straně webu.");
}

if ($sekce == "kontakty"){
print("Nyní se nacházíte v sekci kontakty.");
}
?>
</div>
</body>
</html>

Další čtení

Odkazy

Otázky

  1. Jak lze předávat proměnné pro php skript?
  2. Jakou syntaxi mám příkaz if-then v php?
webdesign, xhtml, css, php - Mgr. Michal Mikláš