1. lecke (HTML5, CSS3, PHP5)


Új (PHP manual)


Az első PHP verzió megírása

Először egy "vegyes" HTML – PHP oldalt készítünk az előzőből.

Az oldal ugyanúgy néz ki, mint előbb, semmi különbség nincs, csak a neve lett más.


<?php
    include('incl/p5.inc');
?>

Láss csodát, visszatért a régi oldal! Ez egy PHP "betét" a HTML oldalban. Kötelezően <?php sorral kell kezdődnie és ?>-vel végződnie! Az egyetlen PHP parancs/függvény azt mondja a böngészőnknek, hogy az "incl" könyvtárban lévő "p5.inc" HTML darabkát helyezze/tegye be az aktuális helyre és jelenítse meg. (Ennek láthatóan az az előnye, hogy oldalaink áttekinthetőbbek lesznek, illetve - ha több HTML oldal is ugyanazt a részt tartalmazza - nem kell többször leírnunk, tárolnunk.)


Dinamikus weboldal készítése

Oldalunk mindig ugyanúgy néz ki, azaz statikus. Próbáljuk úgy "feldobni", hogy a fejrészben lévő állandó képet (07.jpg) minden újabb híváskor (vagy frissítéskor) cseréljük egy másikra. Van 10 darab egyforma méretű képünk (01.jpg, 02.jpg, 03.jpg, ... 10.jpg), bőven megtehetjük.


Keressük meg a "main1.css" stílusfájlban a "background-image:url(../imgs/top960x200/07.jpg);" sort. Látható, hogy a <header> és a </header> HTML parancsok (tag-ek) közé van beágyazva. Ez logikus, hiszen a "fejrész" háttérképe lesz. Az már talán kevésbé érthető, hogy miért van az "imgs" könyvtár előtt a két pont. Az oka az, hogy a "main1.css" fájl a "css" könyvtárban van, és innen vissza kell lépni a "suli"-ba, ahonnan az "imgs"-be, majd a "top960x200"-ba, hogy a stílusfájl megtalálja a "07.jpg" képet. Kicsit nyakatekerten mondtam?

"Lerajzolom":


    suli
     |
     +---- css (main1.css)
     |
     +---- imgs
            |
            +---- top960x200 (07.jpg)


Most jön a trükk! Másoljuk a "main1.css"-beli "header" háttérképének beállítását közvetlenül a HTML fájlba, azaz a <style> mögé az alábbi módon:

    header {
        background-image:url(../imgs/top960x200/07.jpg);
    }

Nézzük meg a változást, azaz frissítsünk! Valami nem stimmel, eltűnt a háttérkép? Nem tűnt el, csak most rossz a hivatkozás, hiszen a tulajdonság most közvetlenül a HTML fájlba került (korábban a CSS fájlban volt), azaz csak annyit kell javítani, hogy kivesszük a "../" visszalépést. Próbáljuk ki!

Visszatért a Lőrintei tó képe (a 07.jpg). Módosítsuk (kézzel) a képet: 08, 09, 10, és frissítsünk is mindig!

Most már csak ezt kellene automatizálni, tehát ne én, hanem egy PHP programrészlet módosítaná/variálná a kép számát!

Íme:

    header {
<?php
    $kep = rand(1,10);
    echo "background-image:url(imgs/top960x200/$kep.jpg);";
?>
    }

Frissítgessük szorgalmasan és türelmesen új, dinamikus weboldalunkat! Látszik, hogy valami gáz van, mert mindig csak az utolsó kép, a 10.jpg lesz látható háttérként.

Oka a következő:

Finomítsunk a PHP program-betéten!

    header {
<?php
    $kep = rand(1,10);
    if ($kep<10) {
        $kep = "0$kep";
    }
    echo "background-image:url(imgs/top960x200/$kep.jpg);";
?>
    }

Az új soroknak az a szerepe, hogy 10-nél kisebb "képszámok" esetén ragasszon egy "0"-t a dobott szám elé (ha 10, akkor természetesen nem kell).

Figyeljük meg alaposan a programbeli különleges karakterek ("$", ";", "{", "}", valamint a kettős idézőjel) szerepét!

Részletesen:

Házi feladat: néha hiába kattintgatunk a böngésző "frissítés" gombjára, mégsem változik a kép. Miért?

Ötlet: a "Ctrl+U" billentyűkombinációval nézzuk meg PHP-s weboldalunk forrásprogramját, és itt frissítgessünk figyelve a háttérkép sorában álló képet