7. lecke (HTML5, CSS3, PHP5)


Az Órarendek menü elkészítése



Koppintsuk le az "index6.php" fájlt "index7.php", valamint a "main6.css" fájlt "main7.css" néven és természetesen javítsuk át a rá való hivatkozást!

Ezután szúrjuk be az alábbi parancssort az "index7.php"-be a megfelelő helyre (ezt nem árulom el, mert a fenti ábra alapján kitalálható)!

 <h3><a href='index7.php?kod=or'>Órarendek</a></h3>

Szükségünk lesz a "text/orarend.txt" fájlra (a jelölés arra utal, hogy a "text" könyvtárban lévő "orarend.txt" fájl), ami tartalmazza az alsó négy osztály órarendjeit a hét öt tanítási napjára.

Tanulmányozzuk egy kicsit: katt ide (a 6. leckében már lementettük - lásd: lecke67.zip)

(Célszerű inkább az editorba betöltve nézegetni, sőt más néven elmenteni, így nyugodtan "belefirkálhatunk"!)

  • az első 7 sor a hétfői, a következő 7 a keddi, ..., órarendet tartalmazza osztályonként
  • ezekből az első mindig a "fejsor", az osztályok nevei
  • utána a sorok az adott napi 1., 2., ..., 6. órákat adják (7. órák alsóban még nincsenek!)
  • egy-egy sor adatai libasorban - és tabulátorral elválasztva egymástól - az 1., 2., 3. illetve a 4. osztály órái

A tabulátor egy nem látható karakter, a szövegben bizonyos távolságra "taszítja" az utána következő karaktereket. (Az editorok egy része - én Linux alatt a "gedit"-et használom - \t karakterpárral utal a tabulátorra, így kereshetjük, vagy helyettesíthetjük a szövegben.) Próbáljuk meg az editorunkkal az "orarend.txt" fájl másolatában keresni tabulátorokat, illetve helyettesíteni például a "|" karakterrel!


Akkor jön a PHP kód

1. verzió - erősen egyszerűsített

    if ($kod=='or') {
        $nn = array('Hétfő','Kedd','Szerda','Csütörtök','Péntek');
        $sr = file('text/orarend.txt');
        echo "<h2>Órarendek</h2>";
        echo "<h3>$nn[0]</h3>";
        echo "<table>";
        for ( $ora=0; $ora<7; $ora++ ) {
            $sor = chop($sr[$ora]);
            echo "<tr>";
            echo "<td>$sor</td>";
            echo "</tr>";
        }
        echo "</table>";
    }

Szúrjuk be az "index7.php"-be a "</section>" fölé!

Részletesen:

  • a menüben az "Órarend"-re kattintva a "$kod" változó az "or" értéket kapja, tehát erre az "if" ágra fut rá a programocska
  • az "$nn" egy tömbváltozó vagy más néven vektor, elemei a hét munkanapjai: $nn[0]='Hétfő', $nn[1]='Kedd', stb.
  • az "$sr" szintén tömb, elemei az "orarend.txt" egyes sorai (egyenlőre csak a legelső hetet használjuk)
  • elvégezzük a fejrészbeni kiírásokat és előkészítjük a táblázatot (<table>), majd a "for" ciklus után lezárjuk (</table>)
  • a "for" ciklus egyenlőre soronként egy cellába írja az adatokat (a négy osztály hétfői óráit)
  • az ún. ciklusváltozó az "$ora", ha értéke még 0. (induláskor), ekkor az "1. osztály ..." kezdetű sort jelenítjük meg, utána valóban helyesen az 1., 2., ..., 6. óra tanóráit

2. verzió - még mindig egyszerűsített (kettős ciklus)

Javítsunk a ciklus hibáin (csak a ciklus belsejét cseréljük le)!

                $sor = chop($sr[7*$nap+$ora]);
                $tgy = explode("\t",$sor);
                echo "<tr>";
                for ( $osz=0; $osz<4; $osz++ ) {
                    if ($ora==0) {
                        echo "<th>$tgy[$osz]</th>";
                    } else {
                        echo "<td>$tgy[$osz]</td>";
                    }
                }
                echo "</tr>";

Rövid magyarázat:

  • mivel a "$nap" változó nem kapott értéket (a PHP ilyenkor 0-t ad neki), az első sorunk egyezik a régivel
  • a következőben a tab/tabulátor mentén szétvagdossuk a sorokat, s bepakoljuk a "$tgy" (tantárgy akar lenni) tömbbe, tehát $tgy[0] az 1.osztály, $tgy[1] az 2.osztály, stb. megfelelő órája lesz
  • az új belső ciklus változója ($osz) sorban felveszi a 0,1,2,3 értékeket, ezek - a kezdősort ($ora=0) leszámítva - az egyes tangyárgyak osztályonként, amelyeket <td> és </td>, az előbbieket pedig <th> és </th> közé zárjuk

Javítsuk át az echo "<h3>$nn[0]</h3>"; sort a következő két sorra:
     $nap=1;
     echo "<h3>$nn[$nap]</h3>";

szövegre, s próbáljuk ki! Mi történik, ha a "$nap" változó 2,3, ... lesz?

3. verzió - a végső (hármas ciklus, jajaj)

Töröljük a fenti "$nap = 1;" sort, majd tegyük az echo "<h3>$nn[0]</h3>"; fölé

        for ( $nap=0; $nap<5; $nap++ ) {

sort, és az echo "</table>"; alá pedig az alábbi sort (egyetlen karakter):

        }

Ez zárja le a harmadik, a legkülső ciklust, és adogatja a napokat: $nap=0,1,2,3,4, tehát valamennyi nap órarendje megjelenik egy-egy táblázatban.


A végső finomítások CSS-sel

Táblázatok azonos szélességgel

Módosítsuk az "index7.php"-ben az

        echo "<table>";

sort a következőképpen:

        echo "<table class='or'>";

Itt minden táblázathoz  or  néven egy stílust/stílusosztályt rendelünk.

Ez a stílus:

 section table.or {
     width:95%;
 }

A "section"-beli "or" nevű táblák mindegyikének szélességét a rendelkezésre álló hely szélességének 95%-ára állítjuk. Így mind az öt táblázat egyenlő széles lesz.


Választóvonal a két oszlop közé

Bővítsük a "main7.css" két sorát a piros színű harmadik sorral:

 main {
     width:960px; margin:0 auto;
     background-color:white; border:1px solid gray;
     background-image:url(../imgs/countbg.gif);
 }

(A ../ arra szolgál, hogy a "css" könyvtárból egy szinttel visszalépve megtaláljuk az innét nyíló "imgs" könyvtárbeli háttérképet, a "countbg.gif" fájlt.)

Ez a kép (960px x 10px) lesz a "main", azaz az "összekapcsolt" két oszlop háttérképe, nagyítva (és rövidítve) így néz ki:
(A böngésző ezt a vékony csíkot ismétli függőlegesen. Természetesen szegélye nincs.)



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

57274 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Kelemen napja van ma
Klementina napja van ma

Boldog névnapot kívánok!