Posted by Nistor Cristian in Programare

Salut, sunt  Nistor Cristian si va voi arata cum se poate face un grafic utilizand PHP, MySQL, HTML si CSS. Graficul pe care il voi realiza va arata la fel ca in poza anterioara.

Inainte de a incepe va voi spune ca pentru a putea functiona acest grafic aveti nevoie de un website sau de un program care sa actioneze ca un web server. Va recomand Xampp.

Mai intai de toate avem nevoie de o baza de date in care sa introducem informatii necesare pentru a realiza graficul. Intrati va rog in phpmyadmin , acesta fiind locul in care vom crea/actualiza baza de date. (ex: localhost/phpmyadmin).
Daca ati intrat apasati pe buton Databases o sa va apara un formular cu un singur camp de intrare in care va trebui sa scrieti numele bazei de date (Ex: grafic). In aceasta baza de date vom crea un tabel numit date in care vom introduce 3 coloane:

  1. id – type = INT, Index = PRIMARY, AUTO_INCREMENT
  2. valori = type = INT
  3. data – type = DATE
O puteti crea utilizand butonul Create table din meniul din stanga si sa urmati informatiile de mai sus pentru fiecare coloana sau puteti apasa buton SQL din meniu principal in care puteti rula interogari SQL.

CREATE TABLE date
(

  • id int NOT NULL AUTO_INCREMENT,
    valori int NOT NULL,
    data date NOT NULL,
    PRIMARY KEY (id)

)

Dupa ce ati creat si tabelul va trebui sa ‘populam’ tabelul cu date utilizand butonul Insert din meniul principal . Exemplu:

INSERT INTO date (

  • id ,
    valori ,
    data

)
VALUES (

  • NULL , ‘8’, ‘2014-03-13’

);

Valoarea maxim este 10 pentru acest grafic. Eu am introdul urmatoarele valori.:

id valori data
1 10 2014-01-08
2 7 2014-03-19
3 4 2014-02-14
4 7 2013-10-17
5 9 2013-11-14
6 10 2014-03-05
7 8 2013-09-27
8 2 2014-02-27
9 6 2013-12-20
10 7 2014-03-08

Acum va trebui sa deschideti un editor de texte in care sa scrieti taguri de HTML , stiluri de CSS si linii de cod in PHP. Va recomand Sublime Text 2. Puteti folosi orice editor de la Notepad pana la Dreamweaver si multe altele.

Va trebui sa cream folderul grafic in folderul htdocs din C:/xampp/htdocs (Windows) sau  /var/www (Linux). Dupa ce am creat folderul/directorul vom deschide editorul de texte si vom crea un fisier numi index.php pe care il vom salva in folderul grafic recent creat. Pentru a afisa in browser acest fisier (index.php) va trebui sa deschidem un browser , evident, de preferat Chrome sau Firefox in care vom scrie localhost/grafic. Pagina din browser va trebui sa fie goala (alba).

Haideti sa ne conectam la baza de date utilizand PHP.
Va trebui sa cream 4 constante:

  1. db_host care va fi numele hostului (localhost cel mai probabil)
  2. db_username va fi numele utilizatorului atunci cand ne conectam la baza de date (root cel mai probabil)
  3. db_password va fi parola (daca exista) atunci cand ne conectam la baza de date (parola introdusa de dumneavoastra iar daca nu ati introdus nicio parola lasati liber)
  4. db_database va fi numele bazei de date (Ex: grafic recent creata)

Apoi vom folosi o extensie PHP numita PDO (PHP Data Object) cu care vom realiza conexiunea dintre PHP si baza de date recent creata.

<?php

/**
* PDO Connect
*/

define(„db_host”,”localhost”);
define(„db_usermame”,”root”);
define(„db_password”,”yourpassword”);
define(„db_database”,”grafic”);

try {
$dbh = new PDO(„mysql:host=”.db_host.”;dbname=”.db_database,db_usermame,db_password);
} catch (Exception $e) {
echo $e->getMessage();
}

?>

Dupa ce ati scris ceea ce este mai sus vom adauga tag-urile necesare pentru un document HTML:

<html>

  • <head>
    • <title>PHP Bar Graph</title>

    <head>
    <style>

    • // aici vom pune stiluri CSS

    </style>
    </head>
    <body>

    • // aici vom pune continutul care va fi afisat

    </body>

</html>

Intre tag-urile <style></style> vom adauga urmatoarele 2 linii:

@import url(http://fonts.googleapis.com/css?family=Gafata);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

Aceste 2 linii fac trimitere catre 2 fonturi pe care le vom folosi : ‘Gafata’ si ‘Lato’.
Dupa aceste 2 lini urmeaza cateva stiluri CSS aplicate tag-urilor body si head pentru a crea un background atractiv graficului.

body{

  • background-image: url(background.png);
    font-family: ‘Gafata’, serif;
    line-height: 40px;

}

html{

  • width: 100%;
    height: 100%;
    -moz-box-shadow:    inset 0 0 500px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 500px rgba(0,0,0,0.5);
    box-shadow:         inset 0 0 500px rgba(0,0,0,0.5);

}

background.png este imaginea urmatoare pe care trebuie sa o puneti in folderul grafic alaturi de fisierul index.php in care scrieti momentan.

background

Daca intrati pe localhost/grafic pagina ar trebui sa arate asemanator cu poza urmatoare exceptand bara de navigare:

1key

Intre tag-urile body vom scrie urmatoarele linii:

<div class=’box’>

  • <h1>PHP Bar Graph</h1>

    <div class=’left’>

    • <span>10</span>
      <span>9</span>
      <span>8</span>
      <span>7</span>
      <span>6</span>
      <span>5</span>
      <span>4</span>
      <span>3</span>
      <span>2</span>
      <span>1</span>

    </div>

    <div class=’dashed_bg’ style=’margin-top:0px;’></div>
    <div class=’dashed_bg’ style=’margin-top:30px;’></div>
    <div class=’dashed_bg’ style=’margin-top:60px;’></div>
    <div class=’dashed_bg’ style=’margin-top:90px;’></div>
    <div class=’dashed_bg’ style=’margin-top:120px;’></div>
    <div class=’dashed_bg’ style=’margin-top:150px;’></div>
    <div class=’dashed_bg’ style=’margin-top:180px;’></div>
    <div class=’dashed_bg’ style=’margin-top:210px;’></div>
    <div class=’dashed_bg’ style=’margin-top:240px;’></div>
    <div class=’dashed_bg’ style=’margin-top:270px;’></div>

</div>

Am creat o diviziune careia i-am atribuit clasa numita ‘box’.  In aceasta diviziune vom introduce un titlu de marimea h1 , o alta diviziune numita ‘left’ in care vom pune numerele de la 1 la 10 care vor reprezenta scare axei de valori (verticala). Dupa diviziunea ‘left’ am introdus mai multe diviziune care vor fi linii orizontale ce vor delimita graficul.

Daca ati scris/copiat si liniile de mai sus va va aparea in browser un titlu si numerele de la 10 la 1 in ordine descrescatoare , toate in partea stanga.

Acum intre tag-urile <style> </style> vom introduce urmatoarele linii pentru a da un inteles liniilor de mai sus:

h1{

  • font-size: 2.5em;
    margin: 0 0 30px 0;
    font-weight: 300;
    text-align: center;
    font-family: ‘Lato’,Arial,sans-serif;
    color: #000;

}

.box{

  • width: 640px;
    height: 300px;
    position:absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -250px;

}

.left{

  • float: left;
    height: 280px;
    width: 10px;
    line-height: 30px;
    margin: -15px 10px 0 0;
    border-right: 1px dashed black;
    padding: 0 10px 37px 0;

}

.dashed_bg{

  • margin-left:20px;
    z-index:-1;
    width:600px;
    height:1px;
    border-bottom: 1px dashed rgba(0,0,0,0.4);
    position: absolute;

}

Dupa ce ati salvat si ati accesat localhost/grafic pagina ar trebui sa arate ca in poza urmatoare exceptand bara de navigare.

2key

Urmatorii pasi sunt cei mai importanti in acest tutorial.
Dupa cele 10 diviziuni ‘dashed_bg’ deschideti din nou tagul <php> si inchideti-l </php>. Intre tag-urile acestea vom introduce cod PHP.

$sth = $dbh->prepare(„SELECT * FROM date ORDER BY data DESC LIMIT 10;”);
$sth->execute();

Prima linie de mai sus reprezinta o declaratie care ‘prepara’ interogarea dintre ghilimele.

SELECT * FROM date ORDER BY data DESC LIMIT 10; – inseamna ca selectam totul din tabelul numit ‘date’ ordonat descrescator dupa ‘data’ cu limita 10.

$sth->execute(); Executa aceasta pregatire a interogarii.

while($result = $sth->fetch(PDO::FETCH_ASSOC)){

  • $height = $result[‘valori’]*30;
    $margintop = 30*(10- $result[‘valori’]);
    echo „<div class=’bar’ style=’margin-top:”.$margintop.”px; height:”.$height.”‘></div>”;

}

Variabila $result preia o variabila din interogarea noastra. Vom folosi functia while pentru a prelua toate randurile din interogarea noastra (10 in exemplul nostru, nu pentru ca avem doar 10 randuri in tabel ci pentru ca limita definita in interogare este 10. Daca am scrie LIMIT 5 atunci s-ar afisa ultimele 5 randuri din tabel in ordine descrescatoare in functie de data).

Variabila $height este egala cu produsul dintre valoarea respectiva din tabel * 30. Aceasta variabil o vom folosi pentru a determina inaltimea fiecarei bare din grafic.

Ex: Daca valoarea este 7 atunci variabila va fi egala cu 7*30 = 210.

Variabila $margintop este asemanatoare cu $height numai ca aceasta reprezinta produsul dintre 30 si diferenta dintre 10 (valoarea maxima pe care o poate lua o valoare in cazul acestui grafic) si valoarea din tabel

Ex: Daca valoarea este 7 atunci variabila este egala cu 30*(10-7) = 30*3=90.

210 + 90 = 300 inaltimea pe care o va avea graficul.

echo „<div class=’bar’ style=’margin-top:”.$margintop.”px; height:”.$height.”‘></div>”;

Folosim echo pentru a afisa un text. In cazul nostru vom crea o diviziune pentru fiecare valoare din tabel numita ‘bar’. Acestei divisiuni ii vom atribui margin-top si height cu valorile explicate mai sus.

Intre <style></style> adaugati urmatoarele linii pentru a oferi un stil barilor.

.bar{

  • float: left;
    background-color: #C6E269;
    box-shadow: 5px -5px 0px #90C567;
    margin-right: 20px;
    width: 40px;

}

Daca accesati localhost/grafic graficul ar trebui sa arate ca in poza urmatoare:

3key

Deja am realizat graficul. Urmatoarele linii sunt doar pentru a oferi un stil mai atractiv graficului.

.bar:hover{

  • background-color: #9cf9f9;
    box-shadow: 5px -5px 0px #6dc5c5;
    -o-transition:color 0.3s ease-out, background 0.3s ease-in;
    -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
    -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
    -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;

}

Atunci cand mouse-ul va fi pe o bara aceasta va deveni de culoarea #9cf9f9 cu un efect de tranzitie.

Acum in loc de linia:

echo „<div class=’bar’ style=’margin-top:”.$margintop.”px; height:”.$height.”‘></div>”;

Puneti:

echo „<div class=’bar grafic_tooltip’ name='”.$result[‘data’].”‘ style=’margin-top:”.$margintop.”px; height:”.$height.”‘></div>”;

iar intre <style></style> scrieti:

.grafic_tooltip{

  • display: inline;
    position: relative;

}

.grafic_tooltip:hover:after{

  • background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: 26px;
    color: #fff;
    content: attr(name);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    font-weight: 100;
    z-index: 98;
    font-family: ‘Gafata’, serif;
    width: 80px;
    text-align: center;

}

Atunci cand mouse-ul va fi deasupra unei bare va aparea un ‘tooltip’ (un mesaj) care va contine data fiecarei valori din tabel.

Demo Download

Sorry, the comment form is closed at this time.