C. lecke (HTML5, CSS3, PHP5)


Új (PHP manual)


"Kezdőoldal, hírek" elkészítése

Másoljuk le az "indexB.php" fájlt "indexC.php", a "mainB.css" fájlt "mainC.css", valamint a "menuB.inc" fájlt "menuC.inc" néven és javítsuk át a rá való hivatkozásokat!


A "konv.php" használatának előkészítése

Szúrjuk be ezt a sort az "indexC.php" fájl tetejére az "include('incl/counter.php');" alá:

include('incl/konv.php');

Javítjuk át az "menuC.inc" megfelelő sorait a kövtekezőképpen:

   <a href='#'>Kezdőoldal, hírek</a>
   <ul>
   <li><a href='indexC.php?kod=hr&txt=text/2017/01'>2017. jan.</a></li>
   <li><a href='indexC.php?kod=hr&txt=text/2017/02'>2017. feb.</a></li>
   <li><a href='indexC.php?kod=hr&txt=text/2017/03'>2017. márc.</a></li>
   </ul>

Látható, hogy egy új kód jelent meg, a hr (hír).

Ennek a lényege a következő: egy PHP programocskával (konv.php) "formáztatjuk" meg az adott havi híreket, tehát az új híreket editorral egy egyszerű szövegfájlba írjuk, s néhány egyszerű jellel "rábeszéljük" a "konv.php"-t, hogy milyenre formázza. Másképp fogalmazva ez a modul helyezi el a megfelelő HTML parancsokat a hírek szövegébe, és így jeleníti meg a böngésző.


Például ha a 2017-es január végi hírekben (text/2017/01.txt fájl legvége) a következő sorok állnak:

2 Papírgyűjtés
Értesítem a tanulókat és osztályfőnökeiket, hogy február hónap első két hetében az iskola papírgyűjtést szervez. A behozott papírt helyezzük a megfelelő konténerekbe!
!Konténertípusok:
[
 újságpapír
 csomagolópapír
 WC papír (nem használt!)
]
.Fejet Lenke<br>igazgató

Akkor ez így jelenik meg:

Tehát pl. a "2 Papírgyűjtés" sorból "<h2> Papírgyűjtés</h2>" lesz és ezt stílusokkal középre igazítjuk, színét narancssárgára állítjuk. (További részletek később!)


Szúrjuk be ezeket a sorokat az "indexC.php" fájlba az albumot kezelő elágazás "if (($kod=='gn') or ($kod=='gl')) { ... }" alá:

   if ($kod=='hr') { // Hírek
      $fn = "$txt.txt";
      if (!file_exists($fn)) {
         $fn = "text/00hiba.txt";
      }
      echo"<h1>Aktuális hírek</h1>\n";
      $htm = txtmegjel($fn); echo "$htm";
   }

A menüben a híreket úgy hívjuk, hogy a kódon (hr) kívül megadjuk a hírfájl elérési útját (könyvtárát) és nevét: pl.
<a href='indexC.php?kod=hr&txt=text/2017/01'>2017. jan.</a>

A pontos könyvtár és fájlnév "text/2017/01.txt", ezzé egészíti ki az "$fn = ..." sor a benne lévő "$txt" változót. Az "if (...) { ... }" elágazás akkor él, ha az előbbi fájl nem létezik, ilyenkor helyette a "text" könyvtárba helyezett "00hiba.txt" fájl tartalma jelenik majd meg (ezt is nekünk kell létrehozni, ez az "hibaüzenet" fájl).


Hozzunk létre a "text" könyvtárban egy "2017" könyvtárat, s ebben az alábbi "01.txt" fájlt! Ebben lesznek 2017. év január hónapjának hírei:

<hr>
2 Itt az új esztendő: 2017
3 Aki nem hiszi el, járjon utána

Felettem üres sor lesz.
Dátum: 2017.01.01.
<hr>
4 Itt az új esztendő második napja
5 Aki nem hiszi el, járjon utána

Felettem itt is üres sor lesz.
Dátum: 2017.01.02.


A "konv.php" első verziója

Mentsük el az alábbi PHP függvényt "konv.php" néven az "incl" könyvtárba!

<?php

 function txtmegjel($txt) {
   $sor = file($txt);
   $drb = count($sor); $htm = ''; $i = 0;
   do {
      $s = chop($sor[$i]); $s1 = substr($s,1); // sor hátralévő része
      switch ($s[0]) {
         case '':   // üres sorból sortörés
            $htm .= "<br />\n"; break;
         case '<':   // tag eredeti állapotában marad
            $htm .= "$s\n"; break;
         case '1': $htm .= "<h1>$s1</h1>\n"; break;
         case '2': $htm .= "<h2>$s1</h2>\n"; break;
         case '3': $htm .= "<h3>$s1</h3>\n"; break;
         case '4': $htm .= "<h4>$s1</h4>\n"; break;
         case '5': $htm .= "<h5>$s1</h5>\n"; break;
         case '6': $htm .= "<h6>$s1</h6>\n"; break;
         default:
            $htm .= "<p>$s</p>\n";
      }
      $i++;
   } while ( $i<$drb+1 ); // ha hamis, kilép
   $htm .= "\n";
 return $htm;
 }

?>

Részletezve:

  • a "txtmegjel($txt)" függvény egy fájlnevet kap paraméterként (pl. text/2017/01 lásd a "hr" kódot kezelő $fn = "text/$ev/$ho.txt"; sort)
  • ezt a szövegfájlt beletömi a "$sor" tömbbe ($sor = file($txt);), megállapítja ebben a sorok számát ($drb = count($sor);)
  • beállít két változót alapértékre: a "$html"-ben gyűjtögetjük a HTML kódokkal kiegészített/formázott sorokat (amit majd átvesz és kiír a böngésző), az "$i" pedig a "do { ... } while (...);" hátultesztelő ciklus ciklusváltozója, ha eléri s feldolgozza az utolsó sort, akkor kilép (a feltétel: $i<$drb+1, és felette "$i"-t növelgetjük: $i++; )
  • a ciklusban az aktuális sor végéről levágjuk a sorvégjelet ($s = chop($sor[$i]);), ezt kapja a "$s" változó (ez tehát a teljes sor)
  • az "$s1 = substr($s,1);" a "substr()" függvény segítségével levágja a sor végét az 1. karaktertől kezdve (tehát a 0. karakter lemarad, ezt pl. az "$s[0]" adná vissza)
  • a "switch (...) { ... }" szerkezet egy többirányú elágazás, a vizsgált sor 0. karaktere alapján fog eldőlni, hogy mit csináljunk az adott sorral, az egyes ágakat vagy a "case" vagy a "default:" vezeti be, előbbiek után az elágaz "$s[0]" változójának egy-egy lehetséges értéke áll (akkor megy ide, ha a változó értéke éppen ez, figyeljük meg, hogy minden ág "break;"-re végződik, emiatt ugrik majd ki a "switch"-ből), míg a "default:"-ra akkor fut rá, ha az előbbiek egyike sem teljesül

A "switch" elágazás "vezérlő" karakterei

  • ha a sornak nincs is 0. karaktere (''), azaz a sor üres, akkor egy "<br>", sortörés HTML paranccsal/tag-gel helyettesítjük (a HTML5 ajánlása szerint inkább "<br />"-nek írjuk, mivel ennek nincs lezáró párja, a "\n" csak azért került bele, hogy a forrásprogramban ne írjon mindent egy sorba)
  • ha a 0. karakter éppen egy "<", akkor ez a sor valószínűleg egy kezdő HTML tag-gel kezdődik, ekkor az egész sort "békén hagyjuk", és visszatesszünk egy sortörést
  • ha a 0. karakter éppen egy "1" szám, akkor a sorból címsor1/header1 (<h1> ... </h1>) lesz, látható, hogy az "1"-es nem kerül vissza ($s helyett $s1 áll)
  • ha a 0. karakter éppen egy "2", (vagy 3,4,5,6) akkor hasonlóképpen egy másik "rangú" címsort készítünk a vezérlőkarakter alapján
  • ha a 0. karakter a fentiek egyike sem, a teljes sorból egy bekezdést/paragrafust (<p> ... </p>) gyártunk (vegyük észre, hogy most $s1 helyett $s áll)

Próbáljuk ki az eddig tanultakat. Kattintsunk a "Kezdőoldal, hírek" menü "2017. jan." gombjára! Valami ilyesmit kell látnunk:

Nézzük meg az "indexC.php" oldal "híreinek" forrását (Ctrl+U)! Ennek a vége táján találjuk remekművünket. Próbáljuk meg módosítgatni vagy bővíteni a "01.txt" fájlt, s mindig nézzük is meg az új forrását, hogy alaposan megértsük az előbbieket!

Tegyünk egy kisebb képet is a "Hírek"-be! Pl.: <img src='imgs/digits/1.jpg'> Ügyeljünk arra, hogy a "<" a sor elejére kerüljön, és a kép helye, neve pontosan szerepeljen!


A "konv.php" második, továbbfejlesztett verziója

Bővítsük a fenti "konv.php" függvény tudását ("default:" fölé):

         case '!':   // egész sor félkövéren kiemelve
            $htm .= "<p><strong>$s1</strong></p>\n"; break;
         case '.':   // stílussal formázva, jobbra igazítva
            $htm .= "<p style='padding-right:40px;text-align:right;font-style:italic;'>$s1</p>\n"; break;

Rövid magyarázat:

  • ha felkiáltójel: "!" áll a hírsor elején, az egész egy bekezdés (<p>) legyen, ezenkívül az teljes sor félkövér (<strong> de lehetett volna <b> is, a HTML5 előtt inkább ez volt a félkövéret vezérlő kezdő tag)
  • kicsit ravaszabb a sor elejére tett pont: ".", ebben az esetben beépített stílussal formázzuk a bekezdést, a jobb oldalára teszünk 40px térközt, jobbra igazítjuk és dőlt betűkkel írjuk ki (ez hasznos lehet például a hírt közlő személy nevének kiírásakor)

Próbáljuk meg úgy bővíteni a "01.txt" fájlt, hogy ezt a látványt kapjuk eredményül:



A "konv.php" harmadik, végső verziója

Bővítsük újra a fenti "konv.php" függvényt:

         case '[':   // felsorolás (rendezetlen lista)
            $htm .= "<ul>\n";
            $i++; $s = chop($sor[$i]); $s1 = substr($s,1);
            while ($s!=']') {   // fájlhiba esetén kiugrik
               if ($i>$drb+9) break 2;
               $htm .= "<li>$s</li>\n"; $i++; $s = chop($sor[$i]); $s1 = substr($s,1);
            }
            $htm .= "</ul>\n";
            break;
         case '(':   // sorszámozás (rendezett lista)
            $htm .= "<ol>\n";
            $i++; $s = chop($sor[$i]); $s1 = substr($s,1);
            while ($s!=')') {   // fájlhiba esetén kiugrik
               if ($i>$drb+9) break 2;
               $htm .= "<li>$s</li>\n"; $i++; $s = chop($sor[$i]); $s1 = substr($s,1);
            }
            $htm .= "</ol>\n";
            break;

E két újabb lehetőség listák beépítését teszi egyszerűbbé. A listák elejét és végét egy-egy magában (és a sor elején) álló [ és ] illetve ( és ) jelzi.

A fenti ágak most nemcsak egy sort dolgoznak fel, hanem a kezdő zárójeltől /"[" vagy "("/ a végzárójelig /"]" vagy ")"/ tartó összes sort.

Mindkét ágban egy-egy elöltesztelő/elölvizsgáló ciklus gondoskodik a lista sorainak feldolgozásáról.

Az "if" sornak biztonsági szerepe van: a "$drb" tartalmazza a sorok számát, az "$i" pedig az aktuális sor számát, de hiba esetén előfordulhat (pl. nem találja meg a ciklus befejezéséhez szüséges lezáró karaktert, a "]"-t vagy a ")"-t), hogy "$i" meghaladja a "$drb"-ot, ekkor a "break 2" kiugratja még a külső "switch" szerkezetből is, és ráfut a hibaüzenetet tartalmazó "if" ágra (... Durva hiba ...).


Végső simítások, szépítés, tesztelés

A "..., hírek" stílusbeállításai

Illesszük a "mainC.css" végére a következő stílusokat!

 section .hir-box {
   margin:10px 0; padding:10px;
   border:1px solid DarkGreen;
   font-size:120%;
 }
 section .hir-box a {
   color:DarkSeaGreen;
 }
 section .hir-box a:hover {
   color:DarkGreen;
 }
 section .datum {
   padding-top:8px; padding-right:10px;
   border-top:1px solid DarkSeaGreen;
   text-align:right; font-style:italic; color:DarkGreen;
 }

A magyarázat az alábbi (márc.13-i) hír alatt:

<div class='hir-box'>
2 Kedves Piripócsiak!
Sajnos a szemétszedés az rossz időjárásra való tekintettel most szombaton elmarad!
3A várható új időpont: május 4 !
Később még küldünk értesítést. Bízunk benne, hogy addigra szép tavaszi idő lesz és mindenki örömmel, jókedvvel végzi e nemes tevékenységet!

!Addig is a TAVASZ reményében!

.Barátsággal: a szervezők
<div class='datum'>2017.03.14.</div>
</div>
<!--->
<!--->

A hírt befoglaltuk egy "hir-box" nevű div blokkba azért, hogy köré egy vékony sötétzöld keretet rajzoljunk, és e fölé, alá kívülről (margin:10px 0;) valamint belülről (padding:10px;) 10 pixel térközt teszünk. (A lezáró "/div" alatti két egyforma sor megjegyzés, csak a hírek egymástól való optikai elválasztására szolgál!)

A hírekben lévő esetleges linkek színét "DarkSeaGreen/tengerzöld"-re állítjuk, alatta pedig "DarkGreen"-re (ha éppen ráhelyeztük a kurzort).

Beillesztettünk a "hir-box"-ba egy dátumhelyet is (.datum), amely fölé vékony vonalat húzunk (előtte finom térközökkel látjuk el), jobbra igazítjuk, "megdöntjük" és sötétzöldre színezzük.


A szükséges fájlok tömörítve

Csomagoljuk ki a leckeC.zip-ben található fájlokat, s másoljuk ezeket a helyükre!
Teszteljük a "konv.php" működését a következő hónapok híreivel, de működnie kell más könyvtárakban lévő, megfelelő formátumú "*.txt" szövegfájlokkal is!




Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

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