6. lecke (HTML5, CSS3, PHP5)

Új (PHP manual)

• list
• explode

Az iskola dolgozói, Dokumentumok menük létrehozása

A menürendszert fogjuk bővíteni az "Az iskola dolgozói" és a "Dokumentumok (PDF)" menükkel, és életre is leheljük ezeket.

Itt a szükséges fájlok tömörítve: lecke67.zip Másoljuk ezeket (kicsomagolás után) a "text" könyvtárba!

A lecke végeztével ehhez fog hasonlítani a "website"-unk:

Az "index6.php" navigációs részének a végére illesszük az alábbi kódokat (a "nav", "/nav" már benne van)!

<nav>
 ...
    <h3>Az iskola dolgozói</h3>
    <a href='index6.php?kod=id&txt=tanarok'>Tanárok</a><br>
    <a href='index6.php?kod=id&txt=technikai'>Technikaiak</a><br>

    <h3>Dokumentumok (PDF)</h3>
    <a href='text/pdf/pp.pdf'>Pedagógiai program</a><br>
    <a href='text/pdf/sz.pdf'>Szerv. és műk. szabályzat</a><br>
    <a href='text/pdf/mp.pdf'>Minőségirányítási program</a><br>
    <a href='text/pdf/hr.pdf'>Házirend</a><br>
</nav>

A "main6.css" aljára pedig (a "section p { ... } után") pedig ezeket a stílusokat tegyük:

 section table {
    margin-top:10px; margin-bottom:10px;
    border:1px solid DarkGreen;
 }
 section img {
    float:right;
    padding-top:100px;
 }
 section th, section td {
    padding:10px 30px 10px 30px;
    border:1px solid DarkGreen;
 }
 section th {
    background-color:DarkSeaGreen;
 }

Rövid magyarázat:

• az   ... index6.php?kod=id&txt=tanarok> ...   sorban (és alatta is) egy új kódra (id) hivatkozunk, ezzel azonosítjuk azt a PHP programocskát, amely generálja a tanári kar és a technikai dolgozók táblázatát
• a másik menüben látszik, hogy létre kell majd hozni a "text"-ben egy "pdf" könyvtárat, s ebbe szükség lesz négy PDF fájlra
• valamennyi itteni stílusbeállításunk csak a "section"-beli "p, img, table, td, th" tag-ekre vonatkozik
• a "section p" stílus már régóta lapít a "mainx.css" fájlokban, ebben
  line-height:150%; - a bekezdésekben a sorok távolsága nőjön 50%-kal
  color:#666; - a bekezdések színe sötétszürke (csaknem fekete)
• a két "border ..." 1 pixeles vékony sötétzöld szegélyt húz a cellák illetve az egész tábla köré
• a "float ..." a képet az oszlop jobb oldalára "úsztatja"
  Itt a képek tömörítve: lecke67.zip
• a "padding:10px 30px 10px 30px;" az összes cellába (td közönséges cella, th fej/header cella - alapból vastagított és középre igazított) kitöltést/térközt tesz, az első (10px) a tetejére, a második (30px) a jobb oldalára, a harmadik (10px) az aljára, az utolsó pedig (30px) a cella bal oldalára (könnyű megjegyezni: így megy az óramutató is)
• végül a "background-color ..." a fejcellák háttérszínét állítja (sötét tengerzöld?)

Akkor jöhet a neheze, a PHP programocska

Illesszük be ezt a kis rutint a "if ($kod=='it') { ... }" után:

    if ($kod=='id') {
        $sr = file("text/$txt.txt"); // text könyvtárból tanarok.txt vagy technikai.txt
        $cim = chop($sr[0]);
        echo "<h2>$cim</h2>";
        if ($txt=='tanarok') {
            echo "<img src='imgs/dekpedag.jpg'>";
        } else {
            echo "<img src='imgs/dekseper.gif'>";
        }
        echo "<table>";
        for ( $t=1; $t<count($sr); $t++ ) {
            list($nev,$beo) = explode("|",chop($sr[$t]));
            echo "<tr> <th>$nev</th> <td>$beo</td> </tr>";
        }
        echo "</table>";
    }

Hosszabb magyarázat:

• a korábban kicsomagolt fájlok egyike, a "tanarok.txt" fájl így néz ki: kattints ide, azaz elöl áll a cím (Az iskola tanári kara), s utána az összes többi sorban
  tanár neve | tanított szaktárgy (tehát az elválasztó karater "|")
• az "$sr = file( ... );" függvény a "tanarok.txt" vagy a "technikai.txt" fájl sorait olvassa be az "$sr" tömbbe, a 0. éppen a cím lesz, amit az "echo"-val címsor2 stílussal kiíratunk
• az "if ($txt ... ) { ... } else { ... }" kétirányú elágazás egy képet helyez a táblázat mellé, de nem ugyanazt
• az "echo '<table>';" és a lezáró párja (lenn) a leendő táblázat HTML parancsai/tag-jei
• a "for" megszámlálható ciklus sorban ($t=1,2,3 ...) veszi az "$sr" tömb elemeit, lecsípi a sorvégjelet (chop($sr[$t])) és a "|" karakternél kétfelé vágja (explode), s beteszi a "$nev" és a $beo" változókba (list($nev,$beo))
• a hosszú "echo '<tr> ..." sor generálja a táblázat egy sorát, az első fejcellába kerül a tanár/technikai dolgozó neve ($nev), a második cellába pedig a beosztása ($beo)

Bocsi, majdnem kimaradt a "Dokumentumok (PDF)" menü négy almenüvel

Ez egyszerű lesz, csak

• csinálj a "text" könyvtárba egy "pdf" könyvtárat
• másolj ebbe valahonnan négy tetszőleges, nem túl nagy PDF kiterjesztésű fájlt, a következő nevekkel:
  1. pp.pdf (pedagógiai program),
  2. sz.pdf (szerv. és műk. szabályzat),
  3. mp.pdf (minőségirányítási program) és
  4. hr.pdf (házirend)

(Ha lusta vagy PDF fájlokat keresgélni, mentsd le az én fájljaimat!)

Ezután kipróbálhatod, s ha a böngésződ tud PDF fájlokat megjeleníteni, bármelyik iskolai "Dokumentum"-ra kattintva, megjelenik a megfelelő PDF fájl.