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 "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).