Cum facem CSS mai dinamic cu PHP

Se presupune ca in timpul apropiat CSS-ul va suferi ceva modificari si va fi posibil de declarat un fel de variabile/constante si va fi mai usor de adapta css-ul de la un proiect la altul. Pina atunci exista o astfel de solutie: utilizam php-ul pentru a face css-ul mai dinamic, mai variabil si mai comod. Php-ul ne permite sa generam fisiere css, modificind contentul cu functia HEADER :

<?php header('content-type: text/css'); ?>

in asa mod, fisierul apelat, va fi considerat de browser ca fiind de tip css. Si asta ne permite sa scrim cod php in viitorul fisier css.
Si de exemplu vom face asa un fisier : style.css.php

<?php
    header('content-type: text/css');
    if ( isset( $_GET['style'] ) ) {
        switch($_GET['style']){
            case 'blue':
                define('T_WIDTH_CELL',90);
                define('T_PADDING_CELL',10);
                define('T_FONT_SIZE',12);
                define('T_FONT_FAMILY','Verdana,Tahoma,"Trebuchet MS",sans-serif');
                define('T_TH_BKG','e1e9ed');
                define('T_TD_BKG','eef3f5');
                define('T_BORDER_C','c9d7df');
                define('T_TH_C','476678');
                define('T_TD_C','80a2b4');
                break;
            case 'orange':             
                define('T_WIDTH_CELL',120);
                define('T_PADDING_CELL',8);
                define('T_FONT_SIZE',11);
                define('T_FONT_FAMILY','"Trebuchet MS",Verdana,Tahoma,sans-serif');
                define('T_TH_BKG','ffb979');
                define('T_TD_BKG','ffc189');
                define('T_BORDER_C','ffa859');
                define('T_TH_C','9a4900');
                define('T_TD_C','fa7700');
                break;
            case 'green':
                define('T_WIDTH_CELL',120);
                define('T_PADDING_CELL',40);
                define('T_FONT_SIZE',15);
                define('T_FONT_FAMILY','"Tahoma,sans-serif,Trebuchet MS",Verdana');
                define('T_TH_BKG','e2e7c9');
                define('T_TD_BKG','e9edd6');
                define('T_BORDER_C','d4dcb0');
                define('T_TH_C','707c37');
                define('T_TD_C','acbb65');
                break;
            default :
                define('T_WIDTH_CELL',120);
                define('T_PADDING_CELL',40);
                define('T_FONT_SIZE',15);
                define('T_FONT_FAMILY','"Tahoma,sans-serif,Trebuchet MS",Verdana');
                define('T_TH_BKG','cacaca');
                define('T_TD_BKG','d2d2d2');
                define('T_BORDER_C','b9b9b9');
                define('T_TH_C','535353');
                define('T_TD_C','868686');
                break;
        }
       
    }else{
        define('T_WIDTH_CELL',90);
        define('T_PADDING_CELL',10);
        define('T_FONT_SIZE',12);
        define('T_FONT_FAMILY','Verdana,Tahoma,"Trebuchet MS",sans-serif');
        define('T_TH_BKG','e1e9ed');
        define('T_TD_BKG','eef3f5');
        define('T_BORDER_C','c9d7df');
        define('T_TH_C','476678');
        define('T_TD_C','80a2b4');
    }
?>

table.my-table{
    padding:0px;
    margin:0px;
    border-collapse:collapse;
}

table.my-table th{
    width: <?php echo T_WIDTH_CELL;?>px;
    padding: <?php echo T_PADDING_CELL;?>px;
    margin: 0px;
    background:#<?php  echo T_TH_BKG; ?>;
    border:1px solid #<?php echo T_BORDER_C; ?>;
    text-align:center;
    font:normal <?php echo T_FONT_SIZE.' '.T_FONT_FAMILY;  ?>;
    color:#<?php echo T_TH_C; ?>;
}


table.my-table td{
    width: <?php echo T_WIDTH_CELL?> px;
    padding: 5px 5px 5px <?php echo T_PADDING_CELL?>px;
    margin: 0px;
    background:#<?php  echo T_TD_BKG; ?>;
    border:1px solid #<?php echo T_BORDER_C; ?>;
    text-align:left;
    font:normal <?php echo T_FONT_SIZE.' '.T_FONT_FAMILY;  ?>;
    color:#<?php echo T_TD_C; ?>;
}

si un fisier index.php :

<html>
<head>
    <title>Test dinamic CSS </title>
    <link rel="stylesheet" href="style.css.php?style=green" type="text/css" media="all" />
</head>
<body>
<center>
    <table cellspacing="0" cellpadding="0" class="my-table">
        <tr>
            <th>Th Division 1</th>
            <th>Th Division 2</th>
            <th>Th Division 3</th>
            <th>Th Division 4</th>
        </tr>
        <tr>
            <td>Td Division 1</td>
            <td>Td Division 2</td>
            <td>Td Division 3</td>
            <td>Td Division 4</td>
        </tr>
        <tr>
            <td>Td Division 1</td>
            <td>Td Division 2</td>
            <td>Td Division 3</td>
            <td>Td Division 4</td>
        </tr>
</table>
<center>
</body>
</html>

si astfel putem sa apelam fisierul style.css.php cu trei parametri : blue, green, orange; care se transmit prin $_GET, in dependenta de care se genereaza un anumit fisier css. Daca intimplator se va gresi parametrul si nu va fi unul din cei enumerati mai sus se va genera un fisier css care va stiliza tabelul my-table in culori gri. Implicit se va apela fisierul css cu parametrul blue. comod nu ?
aici puteti sa scoateti sursele, sursele sunt verificate.

Cum utilizam un font extern in CSS

La realizarea unei pagini web, de cele mai multe ori ma bazez pe designul creat in photoshop. Apoi incep sa formatez template-ul. Si de multe ori am avut o astfel de problema ca selectind in photoshop un anumit font, pentru a scrie un text cu un font mai special, in browser textul nu arata ca in photoshop. Browser-ele utilizeaza alte font-uri. Este de mentionat ca pe pc meu unde acest font este instalat deja in sistemul de operare, pagina arata bine, insa pe alte pc-uri, aceasta pagina utilizeaza alt font, pentru a afisa textul, este vorba despre un font implicit “Arial“. Si din cauza acestei probleme in loc de text utilizam imagini.

Insa, de exemplu, daca este vorba de ceva dinamic, ca un blog este necesar ca titlurile posturilor sa fie scrise mai special, atunci imaginile nu sunt o solutie.

Pentru acesta este un mecanizm special care permite dezvoltatorului sa utilizeze orice font. Trebuie de mentionat ca formatul fontului trebuie sa fie .ttf – pentru browserele Mozilla, Safari, Chrome, Opera; si formatul .eot – pentru IE.

” Aveti nevoie doar de fontul cu formatul .ttf in internet sunt o multime de servicii care transforma din .ttf in .eot

Voi arata un exemplu :

1. includem in proiect fontul .ttf si .eot.

ex:

fonturile vor fi plasate in directoriul resources/fonts (din directoriul parinte).
paginile de stil, (css) in resources/css

paginile html direct in directoriul parinte.

2. Avem urmatoarea structura :

resources/fonts/Bleeding Cowboys.ttf
resources/fonts/Bleeding Cowboys.eot
resources/css/style.css
home.html

Si avem urmatoarele surse :
home.html

<html>
  <head>
  <title> Extern Fonts Enbed</title>
  <link rel="stylesheet"
   href="resources/css/style.css"
   type="text/css"
   media="all" />
  </head>
  <body>
    <br>
    <br>
    <br>
    <br>
      <div class="my-class-silver-big"><center>
        Silver big  extern fonts enbed
      </center></div>
      <div class="my-class-silver-small"><center>
        Silver small  extern fonts enbed
      </center></div>
      <div class="my-class-black-small"><center>
        Black small  extern fonts enbed
      </center></div>
      <div class="my-class-black-big"><center>
        Black big  extern fonts enbed
      </center></div>
  </body>
</html>

Pagina de stil
resources/css/style.css

@font-face {
  font-family:MyFontTitle;
  src:url("../fonts/Bleeding Cowboys.eot");
}

@font-face {
  font-family:MyFontTitle;
  src:url("../fonts/Bleeding Cowboys.ttf");
}

.my-class-silver-small {
  font-family:MyFontTitle;
  font-size:15px;
  color:silver;
}

.my-class-silver-big {
  font-family:MyFontTitle;
  font-size:36px;
  font-weight:bold;
  color:silver;
}

.my-class-black-small {
  font:normal 15px MyFontTitle;
  color:black;
}

.my-class-black-big {
  font:bold 36px MyFontTitle;
  color:black;
}

Si cam asa sa primit rezultatul :

aici download surse

Lucru cu Obiectele în JavaScript

Javascript este un limbaj implementat practic in toate bowserele web. Scripurile acestui limbaj se execută pe maşina clientului, din această cauză foarte des se utilizează la dezvoltarea aplicaţiilor web pentru realizarea diferitelor efecte insoţite de anumite evenimente. De asemenea pentru realizarea efectelor insoţite de evenimente se mai utilizeaza si anumite librării cum este spre exemplu jquery. Însă aceste librării tot sunt realizate pe baza javascriptului. Deseori aceste librării sunt realizate in baza programarii orientate pe obiect, Programarea orientată pe obiect permite o inaltă organizare a scriptului.
Un obiect se iniţiază in felul urmator :

var MyObject = new Object();

Variabila MyObject este de tip Object . Acum dacă avem nevoie de a realiza un modul cu o anumită destinaţie în care se pot include functii, variabile etc. Pentru a fi mai pe înţelesul fiecaruii vom face un exemplu.
Exemplu consta în:
Este necesar ca anunţurile A, B, C, D, E, F, G, H, I, J să se afişeze pe rînd la un interval de 10 secunde.
ex:
fisierul anunt.js

var Anunt = new Object();
Anunt.index = 1;
Anunt.max = 0;
Anunt.GetNext = function(index,div,title){
    if(index &gt;= Anunt.max){
        Anunt.index = 1;
    }else{
        Anunt.index = index + 1;
    }
    Anunt.GetIndex(Anunt.index,div,title);
}
Anunt.GetPrevious = function(index,div,title){
    if(index &lt;= 1){
        Anunt.index = Anunt.max;
    }else{
        Anunt.index = index - 1;
    }
    Anunt.GetIndex(Anunt.index,div,title);
}
Anunt.GetIndex = function(index,div,title){

    for(var i = 1; i &lt; Anunt.max + 1; i++ ){
        if(index != i){
            var divlnhide = document.getElementById(div + i);
            if(divlnhide){
                divlnhide.style.display = 'none';
            }
        }else{
            var divln = document.getElementById(div + index);
            divln.style.display = 'block';
        }
    }
    Anunt.SetInfo(div,title);
}
Anunt.SetInfo = function(div,title){
    var info = document.getElementById('info-' + div);
    info.innerHTML = title + Anunt.index + ' din ' + Anunt.max;
}
Anunt.SetDefaultInfo= function(max,div,title){
    Anunt.max = max;
    Anunt.GetIndex(Anunt.index,div,title);
    var info = document.getElementById('info-' + div);
    info.innerHTML = title + Anunt.index + ' din ' + Anunt.max;
}
Anunt.Interactiv = function(sec,div,title){
    Anunt.GetNext(Anunt.index,div,title);
    setTimeout("Anunt.Interactiv(" + sec + ",'" + div + "','" + title
+ "')",sec);
}

fisierul anunt.html :

<html>
 <head>
  <title>Javascript Utilizarea Obiectelor</title>
  <script src="anunt.js"></script>
 </head>
 <body>
  <div id="anunturi">
   <div id="anunt1">Acesta este primul anunt din lista</div>
   <div id="anunt2">Acesta este al doilea anunt din lista</div>
   <div id="anunt3">Acesta este al treilea anunt din lista</div>
   <div id="anunt4">Acesta este al patrulea anunt din lista</div>
   <div id="anunt5">Acesta este al cincilea anunt din lista</div>
   <div id="info-anunt"></div>
   <script>
     Anunt.SetDefaultInfo(5,'anunt','Anunţuri - ');
     Anunt.Interactiv(10000,'anunt','Anunţuri - ');
   </script>
  </div>
 </body>
</html>

atat.

Sisteme de securitate anti-robot, captcha, in php

Un sistem anti-robot reprezintă un mecanizm care opreste activitatea roboţilor pe site. Deci, un mecanizm care nu permite de a crea diferite aplicaţii pentru a automatiza procesele de manipulare dintr-un anumit mediu.
Din titlu, probabil, aveti impresia că vom vorbi despre cine ştie ce algoritmi complicaţi, insă spre bucuria noastră nu este totul chiar aşa de complicat. Sistemul captcha este un lucru genial, foarte uşor de realizat şi foarte uşor de implementat. Însă este foarte greu, pentru un robot, de a trece peste acest mecanism. Pentru ca un robot să poată trece peste acest mecanizm robotul trebuie să fie superdotat (algoritmi complexi si cod mult de scris).
Mecanizmul captcha constă în:
1. Realizarea unui script care genereză imagini, utilizînd resursele unei biblioteci grafice, în cazul php cel mai des se utilizează GD sau Imagick.
Imaginea care este generată conţine un cod aleator format din cifre şi litere, sigur poate să conţină şi alte caractere asta ramine la discreţia dezvoltatorului.
Acest cod este scris in imagine cu un anumit srift de o anumită marime pe un oarecare fundal. Mai mult ca atît fundalu şi caracterele din cod pot fi de diferite culori.
2. Odata cu generarea imaginii se crează o sessiune pe server, care pastrează valoarea acelui cod din imagine în formă textuală.
3. Imaginea generată se afişează împreună cu un input în browser. În input se va înscrie codul din imagine, codul va fi scris de către utilizator. Acest cod urmează sa fie comparat cu codul ce sa pastrat în sesiune. Dacă vor coincide atunci se consideră că confirmarea a avut loc cu succes, alfel se regenerează codul şi imaginea, se modifică sesiunea şi se cere din nou confirmarea.
Astfel putem sa implementăm imaginea, inputul si mecanizmul de verificare acolo unde este necesară confirmarea anti-robot. Deseori este utilizat acest mecanizm împreună cu formularul de înregistrare a utilizatorilor sau la postarea comentariilor din zona publică a vizitatorilor ne înregistraţi şi în multe alte cazuri. Chiar mai mult, dacă consideraţi că la completarea unui formular este cazul să verificaţi existenţa roboţilor atunci implementaţi sistemul anti-robot.
Urmatorul script php genereaza o imagine in format PNG cu text generat random si seteaza textul in variabila de sesiune :

session_start();
session_regenerate_id();
$nr = rand(65,122);
$captcha = chr($nr).rand(1000,9999);
$nr = rand(65,122);
$captcha .= chr($nr);
$nr = rand(65,122);
$captcha .= chr($nr);
// Setam variabila in sesiune
$_SESSION['captcha'] = $captcha;
$string = $captcha;
$size = 18;
$radius = 0;
$font = 'font/brushscriptstd.otf'; //fontul
$coord = imagettfbbox($size, $radius, $font, $string);
/*
* A(x0,y0) B(X1,Y1) A(x0,y0) = [0][1] B(x1,y1) = [2][3]
* C(x2,y2) D(X3,Y3) C(x2,y2) = [6][7] D(x3,y3) = [4][5]
*/
$width  = round(sqrt(($coord[0] - $coord[2])*($coord[0] - $coord[2]) +
($coord[1] - $coord[3])*($coord[1] - $coord[3])),0);
$height = round(sqrt(($coord[0] - $coord[6])*($coord[0] - $coord[6]) +
($coord[1] - $coord[7])*($coord[1] - $coord[7])),0);
$image =        imagecreatetruecolor($width+20, $height+20);
imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
ImageTTFText ($image, $size, $radius,10 ,30 , $white, $font, $string);
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?&gt;

Ce este o sesiune şi cum se utilizează în PHP

Sesiunea este un registru global în care se înregistrează date privind identitatea utilizatorului.Deoarece comunicarea dintre utilizator şi serverul web are loc în baza URL este necesar de filtra sau de controlat accesul la anumite resurse şi asta este foarte uşor de realizat cu ajutorul sesiunilor.
În php, sesiunea se pastrează într-o variabilă globală de tip matrice. Această variabilă are aceleaşi proprietăţi ca şi oricare altă variabilă. Această variabilă se numeşte $_SESSION şi este capabilă să păstreze tot felul de date : numere, texte, matrici, obiecte etc. Deoarece această variabilă este globală şi ea poate fi apelată în orice moment de execuţie a scripturilor php, şi nu numai atit, dacă se iniţializează o sesiune pe un anumit server atunci această sesiune este accesibilă din orice pagină de pe server, sigur dacă sesiunea nu se distruge.
Apelul sesiunii se face în felul următor :

&lt;?php
// iniţiem sesiunea
session_start();
.......
.......
// setăm sesiunia
$_SESSION['test_var'] = 'test_val';
.......
.......
// utilizăm sessiunea
print $_SESSION['test_var'];
?&gt;

NOTĂ : pentru a iniţializa corect o sesiune este necesar ca în primul rînd să apelăm funcţia session_start()

Continue reading Ce este o sesiune şi cum se utilizează în PHP

Interacţiunea PHP-MySQL

MySQL – utilizează la realizarea interogărilor standartul SQL (Server Query Language) cu anumite mici modificări. Pentru interactiunea PHP-MySQL sunt utilizate mai multe funcţii. Majoritatea funţiilor returnează un array sau un număr, care reprezintă datele referitor la numărul de coloane, tabele, inregistrări etc. Sau reprezintă un array cu inregistrările dintr-o tabelă sau mai multe tabele, sau numele coloanelor, tabelelor etc.
Pentru a putea realiza cererile MySQL este necesar să stabilim o legatură cu serverul MySQL. Pentru a stabili această legatură trebuie specificaţi 4 parametri strict necesari şi unul secundar :

1. Numele hostului unde este stocată baza de date MySQL.
2. Numele utilizatorului.
3. Parola
4. Numele Bazei de Date necesare.
5. Time zone (secundar)

Interacţiunea PHP-MySQL ar fi bine să o realizăm într-o clasă. Asta ne va permite implementarea interacţiunii PHP-MySQL oriunde unde vom avea nevoie de ea.
În baza acestor 5 parametri se stabileşte legatura cu serverul. Această legatură cu serverul ar fi bine să o realizăm în constructorul clasei. Asta ne va asigura că la utilizarea instanţelor de tip clasă, va fi realizată legatura cu serverul. Aceşti 5 parametri DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_TIME vor fi definiţi ca constante în fişierul de config.
Continue reading Interacţiunea PHP-MySQL