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.

  • másoljuk le az index0.html fájt (ugyanabba a könyvtárba) index1.php néven
  • "futtassuk" ezt a fájlt a kedvenc böngészőnkkel

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

  • készítsünk egy új könyvtárat incl a leendő include/betét fájloknak
  • szedjük ki - a vágólapra - az öt latinnak tűnő bekezdést (kijelölés, Ctrl+X)
  • mentsük el az incl könyvtárba a vágólapon lévő bekezdéseket p5.inc néven
  • nézzük meg böngészővel a megcsonkított index1.php oldalt (nem sok minden látható)
  • szúrjuk be az üresen maradt helyre (a "Hírek" alá) az alábbi három sort

<?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ő:

  • $kep = rand(1,10); - ez egy véletlenszámot talál ki 1 és 10 között, beleértve a határokat is (1,2,3, ..., 10)
  • a számot beleteszi/tárolja/megjegyzi a "$kep" változóba
  • ezt helyettesíti/visszhangozza a következő sor
  • pl. így, ha éppen 5-öt talált ki a progi: background-image:url(imgs/top960x200/5.jpg);
  • nekünk viszont 01,02,03, ... 10 kellene, hiszen ez a képek igazi neve (utána a .jpg kiterjesztéssel)

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:

  • a változók (itt csak egy van) előtt dollár ($) jel áll
  • a PHP parancsokat pontosvessző (;) zárja le
  • a két "$kep" kezdetű sor ún. értékadás (először egy véletlen értéket kap, majd módosítjuk az értékét egy elé biggyesztett "0"-val)
  • a $kep = "0$kep"; sorban a $kep változó régi értéke behelyettesítődik a pontosvessző közti részbe, és így az új érték előtt már 0 áll (próbáljuk ki a pontosvessző helyett az aposztrófot!)
  • az "echo" sora behelyettesítés és kiírás, kiírja a HTML fájlba a módosított/generált stílusbeállítást (mindkettőt pontosvesszőnek kell lezárnia)
  • az "if" kezdetű sor, pontosabban három sor nem parancs, hanem egy vezérlési szerkezet, felépítése:
    if (feltétel) { parancs/parancsok }
    mögötte ezért nincs pontosvessző, és állhatna egy sorban is

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



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

143931 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Gellért napja van ma
Mercédesz napja van ma

Boldog névnapot kívánok!