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ý.

Layout webových stránok - Základné konštrukcie jazyka PHP

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:

Skladanie webových stránok v PHP - Základné konštrukcie jazyka PHP

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 &copy;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:

Skladanie stránok v PHP - Základné konštrukcie jazyka PHP

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é 4519x (2.71 MB)
Aplikácia je vrátane zdrojových kódov v jazyku php

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

1 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity