10. diel - Skladanie stránok v PHP
V minulej lekcii, Vylepšenia kontaktného formulára v PHP , sme dokončili kontaktný emailový formulár. S formulári vieme už slušne zaobchádzať. Dnes sa v PHP tutoriálu pozrieme na dynamické skladanie stránok.
Dynamické skladanie stránok
Väčšina dnešných webových stránok sa skladá vlastne z 2 častí:
- Tou prvou je tzv. Layout, čiže rozloženie webu. To je na každej podstránke webe rovnaké a obvykle obsahuje logo webu, navigačné menu a pätičku.
- Druhá časť stránky je potom samotný článok, ktorý je do layoutu zobrazený.
U statických webových stránok sme do každej podstránky museli layout ručne skopírovať (v minulosti sa dali používať rámca, ale tie boli z HTML kvôli početným problémom odobrané). Mať v každej podstránke celý layout je samozrejme neprehľadné, pracne sa tam vkladá a hlavne je problém v layoutu potom niečo zmeniť, zmenu musíme urobiť vo všetkých podstránkach.
Keďže teraz poznáme PHP, nie je najmenší problém v tom, aby obsah
článku do layoutu vložilo za nás. Na webe budeme mať v jednotlivých
súboroch iba podstránky (bez layoutu) a layout bude prítomný v súbore
index.php
. Tu do layoutu vložíme ten článok, ktorý
používateľ vyžaduje. Užívateľ si o článok povie metódou
GET
, vloží teda meno stránky do URL adresy.
Môžeme si to predstaviť takto:
Spôsoby skladanie stránok
Stránky môžeme skladať vlastne dvoma spôsobmi. Buď ako sme si uviedli vyššie, že do layoutu vkladáme podstránku, alebo môžeme do podstránky vložiť hore hlavičku a dole pätičku. My si tu ukážeme vkladanie podstránky do layoutu, keďže tento princíp sa ďalej používa aj pre vkladanie článkov z databázy.
Príprava súborov
Založme si nový projekt a pripravme si potrebné súbory. Budeme
potrebovať index.php
, v ktorom sa bude nachádzať náš layout.
Ja som nižšie uvedený layout prevzal zo tunajšieho HTML seriálu, môžete si ho
odtiaľ požičať a stiahnuť aj potrebný štýl a obrázky. Alebo si
jednoducho napíšte svoj, bohato stačí, keď tam bude nadpis
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="styl.css" type="text/css" /> <title>HoBiho portfolio</title> </head> <body> <header> <div id="logo"><h1>HoBi</h1></div> <nav> <ul> <li><a href="index.php?stranka=domu">Domov</a></li> <li><a href="index.php?stranka=omne">O mne</a></li> <li><a href="index.php?stranka=dovednosti">Zručnosti</a></li> <li><a href="index.php?stranka=reference">Referencie</a></li> <li><a href="index.php?stranka=kontakt">Kontakt</a></li> </ul> </nav> </header> <article> <div id="centrovac"> <header> <h1>O mne</h1> </header> <section> <?php ?> </section> <div class="cistic"></div> </div> </article> <footer> Vytvoril ©HoBi 2013 pro <a href="http://itnetwork.cz">ITNETWORK.CZ</a> </footer> </body> </html>
V layoutu máme nejakú HTML hlavičku, ďalej hlavičku webovej stránky, v ktorej je logo a navigácia. Všimnite si, že odkazy na podstránky smerujú na adresu:
index.php?stranka=domu
Všetky odkazy teda vedú na súbor s layoutom, ktorému odovzdávajú v
parametri názov stránky, ktorá sa do neho má vložiť. Tieto HTML
stránky si vložíme do podzložky podstranky/
s rovnakým názvom
a príponou .php
. Podstránka Omne teda bude uložená
v:
podstranky/omne.php
Podstránky by teoreticky mohli mať aj príponu HTML, ale často v niektorej budeme chcieť nejaký PHP skript, napr. Pre kontaktný formulár.
Všimnite si tiež prázdne PHP sekvencie v elemente
<section>
. Presne tam budeme podstránku vkladať.
Vytvorte si zložku podstranky/
a niekoľko takých podstránok
s príponou .php
.
Vloženie súboru
PHP má viacmenej dva spôsoby, ako do nejakého skriptu vložiť obsah iného súboru.
Vloženie textu
Ak chceme obsah cudzieho súboru vložiť ako text, slúži na to PHP funkcie
file_get_contents()
. Funkcia berie v parametri cestu k súboru a
vracia text, ktorý súbor obsahuje.
Obsah podstránky by sme pomocou funkcie vložili kódom nižšie. Kód nie je ešte bezpečný, čo doriešime na konci lekcie.
// skript nižšie nie je bezpečný $obsah = file_get_contents('podstranky/' . $_GET['stranka'] . '.html'); echo $obsah;
Všimnite si, že som dal podstránkam príponu .html
. Ak by sme
mali v podstránke totiž PHP skript a vložili ho touto funkciu do layoutu,
vypísal by sa zdrojový kód skriptu namiesto toho, aby sa vykonal. To môže
byť dosť nebezpečné, pretože PHP skripty bežne obsahujú prístupové
údaje k databáze a ďalšie citlivé dáta. Ak však chceme vložiť nejaké
HTML alebo obyčajný text z nejakého súboru, je funkcia ideálna.
Ďalším bezpečnostným problémom je, že užívateľ si môže do parametra napísať čo chce a vypisovať si tak aj obsah stránok, ktoré ukazovať nechceme.
Vloženie skriptu
Ak chceme, aby sa obsah cudzieho súboru vykonal ako PHP skript, použijeme k
tomu funkcii require()
. Funkcia berie ako parameter opäť cestu k
súboru a obsah hneď vypíše. Ak je v súbore nejaká PHP sekvencie, tak ju
spustí.
Do PHP sekvencie v index.php
vložíme nasledujúci kód:
// skript nižšie nie je bezpečný require('podstranky/' . $_GET['stranka'] . '.php');
A vyskúšame zadať adresu nejaké podstránky:
Môžete si skúsiť preklikať menu, podstránka sa vždy vloží do layoutu a celý web sa vypíše v prehliadači. Veľmi sme si zjednodušili prácu a otvorili cestu do budúcnosti, kedy texty budeme vkladať z databázy.
Okrem require()
nájdeme v PHP i funkciu
include()
. Tá funguje úplne rovnako, len pri neúspešnom
vložení nezastaví beh aplikácie, ale iba vyvolá warning.
Bezpečnosť
POZOR! Obe vyššie uvedené funkcie sú potenciálne veľmi nebezpečné a ak je zle použijete, vznikne vám v aplikácii bezpečnostná diera.
Podstata problému je v tom, že zobrazujeme obsah nejakého súboru,
ktorého názov zadáva užívateľ. Ten tak môže načítať napr. Súbor
.htpasswd
, v ktorom sú uložené heslá a to touto adresou:
http://vasestranka.cz/index.php?stranka=../.htpasswd
Sekvencia ../
presunie o zložku vyššie. Dostaneme sa teda z
podstránok do koreňového priečinka s webom. Následne útočník môže
zobraziť obsah úplne čohokoľvek.
Zabezpečenia
Riešením tejto bezpečnostnej trhliny je samozrejme ošetriť vstup
používateľa tak, aby mohol obsahovať len znaky az
a maximálne
čísla. To urobíme pomocou tzv. Regulárneho výrazu. Teória okolo týchto
výrazov je pomerne zložitá, ale jednoducho povedané sa jedná o taký
"minijazyk" (správne Metajazyk), ktorý slúži najmä na kontrolu obsahu
textových reťazcov. V ďalších kurzoch na sieti sa im ešte budeme venovať,
teraz nám musí stačiť, že na overenie reťazca pomocou regulárneho výrazu
slúži PHP funkcie preg_match()
, ktorá vráti 1
ak
text zodpovedá.
Rovno aj zmeníme require()
na include()
a ak sa
vloženie nepodarí, zobrazíme chybovú hlášku. U require()
sa
takto pýtať nemôžeme, pri neúspechu vždy zastaví aplikáciu. Tiež
pridáme podmienku, že ak parameter nie je zadaný, zobrazí sa podstránka
domov.
if (isset($_GET['stranka'])) $stranka = $_GET['stranka']; else $stranka = 'domu'; if (preg_match('/^[a-z0-9]+$/', $stranka)) { $vlozeno = include('podstranky/' . $stranka . '.php'); if (!$vlozeno) echo('Podstránka nenájdená'); } else echo('Neplatný parameter.');
Web je teraz bezpečný a vás už nebrzdí ručné kopírovanie layoutu. Môžete si skúsiť vložiť ako podstránku náš kontaktný formulár.
Nad otázkou bezpečnosti by sme sa u webových aplikácií mali zamýšľať vždy, keď používateľ niekde niečo zadáva. Vždy sa musíme opýtať, čo sa s touto hodnotou deje a či nemôže nejaký vstup spôsobiť bezpečnostnú chybu.
Hotový web je v prílohe k stiahnutiu. V budúcej lekcii, Cykly for a while v PHP , sa pozrieme na cykly. Čoskoro sa tiež dostaneme k databázam.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 4601x (2.71 MB)
Aplikácia je vrátane zdrojových kódov v jazyku php