4. lecke (HTML5, CSS3, PHP5)


Új (PHP manual)


Újabb fájlok/tartalmak az "incl" könyvtárba

Nézzük meg, próbáljuk ki, majd mentsük el a következő fájlt az "incl" könyvtárba "linkek.inc" néven. Kattints ide!
Segítségül: kattintás után a jobb egérgombbal előugró úszúmenü segítségével is menthetünk; vagy Ctrl+U után látható a forrásprogram, ugyanígy innen is menthetünk

Hasonlóképpen tegyük az "incl" könyvtárba "sitemap.inc" néven: Kattints ide!

Ha nem sikerült valamiért a "linkek.inc" és a "sitemap.inc" letöltése, tömörítettem a következő fájlban: lecke4.zip

Az "elerhetoseg.inc" fájlt próbáljuk meg önállóan lérehozni e kép illetve szöveg alapján: Kattints ide!     Nyers szöveg
Segítségül: töltsd le az "elerhetoseg.txt" fájlt, rakass minden sor elejére egy <li>, a végére egy </li> tag-et az editorral, majd kézzel javítsd át <h2>, <h3>, <h4>, <ul> ill. <ol> tag-ekre!

(Részletesebben az <li> és </li> elhelyezését:

  • az editor képes cserékre, nálam pl. a "gedit" a sorvégjelet "\n"-ként, a tabulátor jelet "\t"-ként ismeri fel
  • elsőként a </li>-t tesszük a sorok végére, azaz a \n karaktereket cseréljük </li>\n karakterekre
  • a sor elejéhez egy kis trükköt alkalmazunk: jelöljük ki az egész szöveget, majd egy "tab/tabulátor" lenyomásával minden sor elejére \t kerül
  • ezután a \t karaktereket cseréljük <li> karakterekre

)

(A "sitemap.inc" fájlt majd később, más módszerrel is előállítjuk.)


Képlinkek baloldalt

Az előző lecke három apró képét alakítsuk linkké, amelyekre kattintva egy új tartalom jelenik meg a jobboldali oszlopban.

Fejlesszük tehát az "index4.php" fájlt, módosítsuk az   <aside   utáni részt a következőképpen:

    <a href='index4.php?txt=elerhetoseg'><img src='imgs/eler.png'></a>
    <a href='index4.php?txt=sitemap'><img src='imgs/smap.png'></a>
    <a href='index4.php?txt=linkek'><img src='imgs/link.png'></a>

Látható, hogy a linkek   <a href='...'> </a>   körülölelik a képeket. A href belsejében az "index4.php" kerül meghívásra, de most már paraméteresen. Ez azt jelenti, hogy pl. az első képre kattintva a böngésző címmezejébe az "index4.php?txt=elerhetoseg" kerül. Ennek a vége egy   változó – érték   pár (txt-elerhetoseg), amely felhasználható lesz arra, hogy a jobboldali oszlopba majd az értéknek megfelelő tartalom kerüljön.


Másoljuk az "index4.php" fájl legelejére az alábbi PHP programocskát:

    <?php
    $txt = $_GET['txt'];
    ?>

Ez éppen arra szolgál, hogy a képre kattintva az "index4.php" újra meghívódik/indul (csak most paraméteresen), és az egyenlőségjel utáni érték (pl. elerhetoseg) betöltődik a $txt változóba. Olyan, mintha a $_GET "elkapná".


Bővítsük a "main4.css" stílusfájlt (tegyük célszerűen a "section h2 { ... }" alá) :

    section h3 {
        padding:15px 0 10px 0;
        font-size:120%; text-align:left; color:#ff6600;
    }
    section h4 {
        padding:10px 0 5px 0;
        font-size:105%; line-height:125%;
    }
    section ol, section ul {
        padding:0 0 12px 40px;
        line-height:160%;
    }

Az utolsó stílusbeállítások egyszerre vonatkoznak sorszámozott listára (ol) és a számozatlan listára (ul) is. A "line-height" a sortávolságot növeli pl. a listáknál az eredeti érték 60%-ával.


Változó tartalom jobboldalt


Már létrehoztunk a képeken látható oldalakat az "incl" könyvtárba, csak valahogyan meg kéne jeleníteni!

Az "index4.php" fájlban a   <section>   belsejében a következő PHP kód látható (mindig a "p5.inc" jelent meg):

    include('incl/p5.inc');

Cseréljük le a következőre:

    if ($txt=='') {
        include('incl/p5.inc'); // állandó tartalom
    } else {
        include("incl/$txt.inc"); // változó tartalom
    }

A $txt értéke mindaddig "semmi", szakszerűbben üres szöveg/sztring, amíg nem kattintunk az egyik kisképre, ezt vizsgálja az első sor. Ha üres, akkor továbbra is a "p5.inc" fájlt, egyébként (4. sor) a kiválasztott "elerhetoseg.inc", "sitemap.inc" vagy "linkek.inc" fájlt tölti be a <section> </section> tag-ek közé (azaz a jobboldali oszlopba).

Ellenőrizzük a képlinkek és a többi link működését is!



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

139919 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Jusztina napja van ma

Boldog névnapot kívánok!