B. lecke (HTML5, CSS3, PHP5)


Új (PHP manual)


"Látogatottság" elkészítése

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


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

include('incl/counter.php');

A "counter.php" fájlban két függvény van, az első így néz ki:

 function counter($jegy) {
   $pth = 'imgs/digits';   // számláló képfájljainak helye
   $kit = 'jpg'; // képek kiterjesztése, cserénél javítani kell
   $df = 'data/count.txt';   // adatfájl helye/neve, jogai 666 legyen
   $fp = fopen($df,"r"); $value = fgets($fp); fclose($fp);   // kiolvasás fájlból
   list($time,$ip,$sum) = explode(";",chop($value)); // változókba
   if ((($time+(1*60)) < time()) or ($ip != getip())) {
      $sum++;
      $fp = fopen($df,"w");   // beírás fájlba
      fwrite($fp,time().";".getip().";$sum\n");
      fclose($fp);
   }
   // Kiírás képernyőre képekkel
   $frm = "%'.0".$jegy."d"; $ssz = sprintf($frm, $sum);
   $len = strlen($ssz); // string hossza
   $kepek = '';
   for ($i = 0; $i<$len; $i++) {
      $kep = "$pth/$ssz[$i].$kit";
      $kepek .= "<img src='$kep' />";
   }
   return "$kepek";
 }

Csomagoljuk ki a leckeB.zip-ben található fájlokat, s másoljuk ezeket a helyükre (a fügvényben látható két új könyvtárat hozzuk létre)! Ellenőrizzük, hogy a "data" könyvtárba tett "count.txt" fájl jogai "666" legyenek, azaz írható mások által is!


A "counter()" függvény elemzése

  • a függvény egy paramétere ($jegy) a képekkel ábrázolt jegyek száma, maximum ennyi látogatóval (99999) tervezzük oldalunkat (lásd az "indexB.php"-ben a "$lat = counter(5);" sor, tehát $jegy=5 lesz)
  • a következő három sor három értékadás (mindegyik után megjegyzésben áll egy rövid magyarázat)
  • $fp = fopen($df,"r"); – olvasásra nyitja a "count.txt" fájlt (ez csak egyetlen sor), a "$fp" azonosítja a későbbiek során
  • $value = fgets($fp); – beolvassa e sort a változóba
  • fclose($fp); – lezárja az "$fp" fájlt
  • list(... – a sor három adatát szedi ki a "$time,$ip,$sum" változókba, ezeket ";" választja el egymástól, jelentésük: az oldal (index?.php) hívásának/frissítésének időpontja; a hívó számítógép IP száma; az eddigi hívások száma (ezt növelgetjük egyesével)
  • if (... – csak akkor fut le ez a rész, ha az előző hívás és a mostani közt legalább 60 mp telt le, vagy egy másik számítógépről történt a hívás (a "getip()" a másik függvény, de erről elég annyi, hogy megállapítja és visszaadja a hívó gép IP számát)
  • $sum++; – eggyel növeli a látogatók számát
  • $fp = ... – írásra nyitja az "$fp" fájlt ("w" - write, korábban "r" - read)
  • fwrite(... – beírja a fájlba az új adatokat (közéjük pontosvesszőt tesz)
  • fclose(... – lezárja a fájlt
  • $frm = ... – az "sprintf" speciális függvénnyel formázott szöveggé alakítja a "$sum" számot (elöl nullákkal egészíti ki most 5 jegyre)
  • $len = ... – megállapítja a szöveg hosszát (valószínűleg 5 lesz, kivéve ha a látogatók száma 100000 vagy több)
  • for (... – a ciklus a "$kepek" változóban összerakja a "$sum" illetve "ssz" változó jegyeinek megfelelő miniképeket
  • return ... – visszadja a hívó programnak az 5 megfelelő képet

A "counter()" függvény hívása

Illesszük be a <h3>Látogatottság</h3> alá a következő PHP kódot:

<?php
   $lat = counter(5);
   echo "<div id='count'>$lat</div>";
?>

A "$lat" változó kapja meg a "counter(5)" függvénytől a látogatószámot/képeket, és a rákövetkező sorban a "div"-ek közt ezt kiíratjuk. A "count" azonosító a stílusjegyekhez kell.


A látogatottság stílusbeállításai

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

 aside #count {
   padding-top:4px; padding-left:10px;
 }
 aside #count img {
   padding-left:2px; width:32px;
   border:none;
 }

Az "aside"-ba tett képeket (#count) tehát egy kicsit lejjebb (4px) és jobbra (10px) toljuk, majd minden kép bal oldalára teszünk "2px" kitöltést, és a képet kicsinyítjük 32 pixel szélesre (eredetileg 66x66px méretűek voltak), majd szegély nélkülivé tesszük (hogy mégis van a képek körül egy kis szegély, ez alapból rajtuk van).



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

63053 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Erzsébet napja van ma

Boldog névnapot kívánok!