5. lecke (HTML5, CSS3, PHP5)


Új (PHP manual)


Menürendszer létrehozása, az "Iskolánkról" életre lehelése


Cseréljük le az "aside" tartalmának egy részét (a képlinkek maradnak!)!

Ezt:

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

Erre:

<nav>
    <h3><a href='index5.php?txt=p5'>Kezdőoldal, hírek</a></h3>

    <h3>Iskolánkról</h3>
    <a href='index5.php?txt=nevado'>Az iskola névadója</a><br>
    <a href='index5.php?txt=tortenet'>Iskolatörténet</a><br>
    <a href='index5.php?txt=alapitvany'>Alapítvány</a><br>

    <h3>Az iskola tanulói</h3>
    <a href='index5.php?kod=it&txt=1'>1. osztály</a><br>
    <a href='index5.php?kod=it&txt=2'>2. osztály</a><br>
    <a href='index5.php?kod=it&txt=3'>3. osztály</a><br>
    <a href='index5.php?kod=it&txt=4'>4. osztály</a><br>
</nav>

Majd valami ilyet fogunk látni a lecke végén, s remélhetően működni is fog!

(Pontosabban fogalmazva a "Kezdőoldal, hírek", a legelső menüpont még nem, ez egy kicsit keményebb dió lesz.)


Az "Iskolánkról" almenüpontjai már működnének is, ha lennének:

  • nevado.inc
  • tortenet.inc
  • alapitvany.inc

fájl az "incl" könyvtárban, hiszen ezek ugyanolyan kész HTML tag-ekkel formázott szövegfájlok lesznek, mint a képekhez rendelt fájlok. Most csak "imitáljuk" ezt a három fájlt. A "p2.inc" tökéletesen megfelel erre a célra. Másoljuk le ezt a fenn megadott neveken, s tegyük a legelső sorukba a következő címeket:

 <h2>Névadónk</h2>
 <h2>Iskolatörténet</h2>
 <h2>Alapítvány</h2>

Működik, de nagyon egyhangú így. Dobjuk fel az "alapitvany.inc" fájlt egy képpel (kattints a képre, majd mentsd le az "imgs" könyvtárba):

Hogy látható is legyen, illesszük a fájl végére a következő HTML kódot (ez már ismerős lehet a 4. leckéből):

 <img src='imgs/alapitvany.jpg'>

Kicsit bűvöljünk rajta CSS-sel:

 <img src='imgs/alapitvany.jpg' style='width:200px;float:right;'>

Kisebbre vettük (350 pixel széles volt, most 200) és jobbra úsztattuk.

Most egy újabb "technikát" látunk a stílusok beépítésére. Itt éppen a HTML parancs/tag belsejébe helyeztük el a két tulajdonságot. A másik lehetőségek már az "index0.html" fájlban láthatók.

Összefoglalva ezt a hármat:

  1. egy külön fájl, az ún. stílusfájl tartalmazza a tulajdonságokat - külső stílusok ( <link rel='stylesheet' href='css/main0.css'> az "index0.html" fájlban így van )
  2. a HTML fájl fejrészébe/head-be beépítve - beágyazott stílusok ( <style> header p { ... } ... </style> szintén az "index0.html" fejrészében )
  3. a HTML parancs/tag belsejében elhelyezve - szövegközi stílusok ( lásd előbb az img-be beépítve )

Az első variáció előnye az, hogy több HTML oldalra is használhatjuk ugyanazon stílusbeállításokat (pl. mindegyikben Arial betűtípus használunk, 16 pixeles mérettel és sötétzöld színnel). A második csak egy HTML fájlra "hatásos", arra amelyikben van, míg a harmadik csak arra az egy HTML tag-re.


"Az iskola tanulói" menü felélesztése

 <?php
 $kod = $_GET['kod'];
 $txt = $_GET['txt']; if ($txt=='') $txt='p5'; // állandó tartalom
 ?>

Javítsuk át a "index5.php" fájl tetején lévő PHP betétet a fenti módon!

Az egyik változás az "if ... ", ez arra szolgál, hogy   $txt   paraméter nélküli indításnál (index5.php) a "p5.inc" fájlt szúrjuk be a jobboldali/tartalom oszlopba. Később majd ehelyett az aktuális hírek jelennek meg itt, nem pedig egy fix tartalom.

A másik a fölötte lévő új változó, a   $kod.   Ennek az értéke dönti majd el, hogy melyik "php" programrészlet/rutin hozza létre/generálja a megfelelő tartalmat a jobboldali oszlopba.


Nézzük meg ezt az iskola osztálynévsorainak megjelenítésénél!


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

Ez a régi php rutin (if ... else ...) rövidíthető már az alábbi felső három sorral is. (Gondoljuk végig, hogy miért!)

A második "if" már bővebb magyarázatra szorul:

  • az "Az iskola névadója"-ra kattintva a <a href='index5.php?kod=it&txt=1'>1. osztály</a> link indul, tehát a $kod értéke "it" lesz, vagyis beleszalad ebbe az elágazásba
  • a $txt értéke pedig most "1", azaz a "file" php függvény beolvasná (ha lenne) a "text" könyvtárból az "1.txt' szövegfájlt, és "beletömi" az $sr változóba, tömbbe
  • ez nem egy közönséges változó, hanem úgynevezett indexes változó, (mint matek órán a sorozat), 5. elemét sorozatoknál ott így jelölik sr5, "php"-ben pedig így $sr[5], pontosabban az informatikában nem 1-el, hanem 0-val kezdődik a sorszámozás/indexelés, vagyis az 1. elem a $sr[0], az 5. elem pedig a $sr[4]
  • az $sr változóban (tömbben) tehát az 1. osztály névsora lesz, legelöl az osztályfőnök (1.txt)
  • töltsük le, bontsuk ki, és másoljuk a "text" könyvtárba az alsó tagozat névsorait, az első (pontosabban 0.) az osztályfőnök
  • az első "echo"-s sor címsor2 stílussal kiírja/visszhangozza a választott osztály sorszámát ($txt tartalmazza), pontot tesz utána, majd jön a " osztály" szöveg
  • az "$ofo" kezdetű kiválasztja a 0. sort, "lecsípi" (chop függvény) a sor végéről a sorvégjelet, majd beleteszi az $ofo változóba
  • az alatta lévő sor megjeleníti ezt a nevet - elérakva az "Ofő: " szöveget - címsor3 stílussal
  • a harmadik "echo" egy aranyos képet tesz ki az "imgs" könyvtárból (nézzük meg ezeket, van több is!)
    Itt a fájlok tömörítve: lecke5.zip
  • alatta előkészítjük egy felsorolás/sorszámozott lista kiírását: <ol>
  • a "for (...) { ... } alatt a lezáró: </ol>
  • legizgalmasabb a for ..., az ún. megszámlálható ciklus, benne a "count" függvény megszámolja az "$sr" tömb sorainak számát, azaz az osztály létszámát (igaz eggyel több az ofő miatt, pl. az 1.txt 15 soros, tehát 14 tanuló van benne)
  • úgy működik, hogy ha pl. a "$txt=1", akkor "count($sr)" 15, tehát "$t=1"-től indulva egyesével növelte a "$t"-t ($t++) kiveszi a "$t". sort, lecsípi a sorvégjelet, s beteszi ezt a "$nev" változóba
  • ezt kiírja mint sorszámozott listaelemet
  • mindezeket addig ismétli, míg a "$t" eléri a 14-et ( a 15.-öt már nem írja ki, ilyen nincs is, mert $t<15 )

 if ($kod=='') {
     include("incl/$txt.inc"); // incl könyvtárból (kész HTML darabka)
 }
 if ($kod=='it') {
     $sr = file("text/$txt.txt"); // iskola tanulói
     echo "<h2>$txt. osztály</h2>";
     $ofo = chop($sr[0]);
     echo "<h3>Ofő: $ofo</h3>";
     echo "<img src='imgs/dekdiak$txt.jpg'>";
     echo "<ol>";
     for ($t=1;$t<count($sr);$t++) {
         $nev = chop($sr[$t]);
         echo "<li>$nev</li>";
     }
     echo "</ol>";
 }

Hú, ez jó hosszú magyarázat lett, de remélem érthető! (Ha mégsem, ajánlom a következőt: PHP)


Búcsúzóul és pihenésképpen egy kis szépítés


 aside h3 {
    padding:8px 0 2px 0;
    font-size:105%; color:#ff6600;
 }
 nav {
    padding-bottom:8px;
 }
 nav a {
    padding-left:10px;
 }
 nav h3 a {
    padding-left:0px;
 }

Mindezeket a "main5.css" fájlba tegyük (fenn is javítsunk!) az "aside { ... } után!

A már korábban is látott   <nav>, </nav>   utasításpár a "navigációs" részt jelenti (új HTML5 tag), általában a menü-almenü rendszert jelöli.

Részletezve a stílusokat:

  • az "asize"-beli "h3" címsor fölött 8px, alatt 2px térköz legyen (oldalt semmi)
  • a betűk mérete nőjön 5%-kal (105%), színe #ff6600, kb. sötét narancsszín
  • a "nav" rész alá tegyünk 8px térközt (padding-kitöltés)
  • a "nav"-beli linkek ("a"-k) bal oldalára tegyünk 10px térközt (kicsit jobbra toljuk)
  • a "h3"-akat, amelyekben van "a" tag, nem toljuk jobbra

Próbáljuk is ki ezeket úgy, hogy töröljük, módosítjuk az ajánlott értékeket, majd (miután megértettük) esetleg visszaállítjuk az ajánlott értéket!



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

57283 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!