Sunteți pe pagina 1din 29

Ministerul Educaiei al Republicii Moldova

Universitatea Tehnic a Moldovei


Facultatea Calculatoare, Informatic i Microelectronic
Catedra Automatic i Tehnologii Informaionale

DAREA DE SEAM
PE PRACTICA N PRODUCIE
LA SPECIALITATEA TEHNOLOGII INFORMAIONALE
A STUDENTULUI gr. TI-131
Dobrovolschi Victor
TEMA: Site de promoii ,, ciupi.md
Locul Practicii : S.R.L. Soluii Web Design

Conductorul practicii
practicii
de la unitatea economic:
Blnd Rodion

Conductorul
de la U.T.M. :
Balmu Ion

Chiinu 2015
1

CUPRINS:
1.

2.
3.

4.
5.
6.
7.

Descrierea locului practicii n producie S.R.L Soluii Web Design...3


Obiectivele i cerinele site-ului Web ciupi.md.....................................4
Aplicatii si tehnologii utilizate in elaborarea site-ului ........5
3.1 HTML5
3.2 JAVASCRIPT.....10
3.3 AJAX12
3.4PHP...20
Bibliografie....23
ANEXA 1..24
ANEXA 2..27
Concluzie..28

I.

Descrierea locului practicii n producie S.R.L Soluii Web Design


S.R.L.Soluii Web Design, a fost creat din dorina de a aduce un nou bagaj

de principii i valori profesionale pe piaa de web design din Moldova.


Este o companie tnr, dar n acelai timp cu o vast experien n web design,
dedicat dezvoltrii de soluii web performante i atractive, iar serviciile pe care
le pun la dispoziie garanteaz faptul c afacerea sau website-ul clienilor vor fi
apreciate de ctre vizitatori sau de ctre potenialii clieni.
Echipa Soluii Web Design este o echipa format din 7 oameni unde fiecare
i pune n aplicare abilitile pentru a satisface necesitile clientului. Web
designeri dedicai i mereu informai cu ultimele tendine n materie de web
design. Indiferent c e vorba de un blog, magazin online, site de prezentare sau un
proiect la cheie, designerii acestei companii i surprinde mereu clienii cu un
design curat i intuitiv. Aceast companie dorete s obin realizri deosebite i
succes n domeniul IT, promovnd i susinnd tinerii i viitorii specialiti n
domeniu.
Cele cinci sptmni petrecute mpreuna cu ei m-au facut sa am mai mult
ncredere n forele proprii i s nu fac pasul napoi atunci cnd lucrurile se
complica. n timpul efecturii proiectului pentru practica n producie am studiat
citeva limbaje, cum ar fi HTML, JAVASCRIPT,AJAX, CSS, PHP, SQL. La
sfirsitul studierii acestor limbaje, am putut cu usurina sa realizez proiectul pentru
practica n producie.

II.

Obiectivele i cerinele site-ului Web ciupi.md


Sarcina principala, pe parcursul desfasurarii practicii de instruire, a fost
elaborarea site ului ciupi.md, destinat pentru a oferi oferte
promoionale.
3

Sarcinile de baz:
Crearea machetei siteului i a paginilor n html;
Implimentarea versiunii mobile i crearea versiunii full adaptive;
Module i funcionaliti noi:
Vazute recent;
Slider cu promoii noi;
Promoii de srbtori;
Oferte similar;
Modificarea panoului de administrare.

III.

Aplicatii si tehnologii utilizate in elaborarea site-ului .


3.1 HTML

HTML - Hypertext Markup Language . Acest limbaj este folosit pentru a


formata si prezenta documente pe web . HTML adauga tag-uri fisierelor ASCII
astfel incat sa permita afisarea unei varietati de fonturi , imagini sau sunete prin
definirea unor elemente ca header , lista , paragraph si prin implementarea si
utilizarea unor legaturi ( linkuri ) catre alte documente publicate in internet .
Mai clar , limbajul HTML este limbajul pe care il inteleg aplicatiile de tip browser
( ex: Internet Explorer , Netscape Communicator , Opera , etc. ) folosite pentru a
naviga pe internet . Datorita acestui limbaj browser-ul poate afisa ceea ce autorul
paginii web a dorit sa prezinte .
4

Elementele de baza ale limbajului HTML sunt foarte simple si usor de retinut si
apoi de utilizat ; cunoscand doar tag-urile de baza putem construi un intreg site fara
probleme .
TAG reprezinta o comanda in cod HTML care indica modul in care va fi
interpretata informatia la care ea se refera .
TAG-uri DE BAZA
Orice pagina web standard trebuie sa contina 8 tag-uri de baza . Aceste tag-uri
trebuie sa apara in cadrul fiecarei pagini a unui web site .
Aceste tag-uri sunt prezentate mai jos si ele trebuie sa apara exact in aceasta
cronologie in cadrul paginii web :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Inainte de a explica fiecare tag in parte mentionez ca tag-urile trebuie scrise in
codul sursa exact in forma in care ele apar mai sus , intre semnele <> . Aceste
simboluri au menirea de a transmite browser-ului ca textul dintre ele trebuie
recunoscut ca un tag deci ca un cuvant cheie al limbajului , o comanda care
trebuie executata . Limbajul HTML nu tine cont de litere mari sau mici in cadrul
tag-ului , astfel incat <BODY> sau <body> sau chiar <BoDy> vor fi interpretate
identic. <HTML> ~ acest tag transmite browser-ului ca documentul respectiv este
de fapt un document HTML , dand astfel indicatii asupra modului in care vor fi
interpretate diferite partitii ale fisierului ASCII .
<HEAD> ~ acest tag este in fapt tot un mesaj catre browser , continand informatii
despre document ca de ex. link-uri sau pagini care trebuie incarcate in prealabil .
5

<TITLE> ~ acest tag este folosit pentru a da o denumire paginii web create ; acest
nume va apare in partea superioara a fereastrei browser-ului identificand astfel
pagina respectiva . </TITLE> ~ acest tag este de fapt inchiderea celui precedent ;
transmite browser-ului ca textul ce trebuie considerat ca titlu al paginii s-a
incheiat . Majoritatea tag-urilor HTML folosesc tag-uri corespondente de inchidere
.
</HEAD> ~ tag-ul de inchidere al tag-ului corespondent <HEAD>
<BODY> ~ acest tag semnaleaza deschiderea sectiunii corespunzatoare corpului
paginii web . Aici se vor introduce informatiile continute in pagina , textul , grafica
si elementele multimedia dorite .
</BODY> ~ tag-ul de inchidere care transmite browser-ului ca nu se mai doreste
adaugarea de informatie in aceasta pagina .
</HTML> ~ acest tag incheie documentul HTML , semnaland browser-ului ca nu
mai exista elemente care trebuie citite sau incarcate .
Cu elementele prezentate mai sus putem deja crea o pagina web foarte simpla dar
perfect functionala !
Codul urmator implementeaza o pagina web folosind doar tag-urile de baza :
<html>
<head>
<title>Pagina mea proprie</title>
</head>
<body>
Aceasta este o pagina de test . Acesta este un exemplu perfect pentru simplitatea
crearii unei pagini web !
</body>
</html>
OBS : Dupa cum ati vazut tag-urile sunt folosite in general in perechi
complementare . Daca vreti sa folositi taguri grupate fara a avea probleme atunci
ele trebuie corect grupate si nu incrucisate. Adica:
6

<Tag1><Tag2></Tag1></Tag2> - tag-uri incrucisate care pot genera erori.


<TAG1><TAG2></TAG2></TAG1> - tag-uri grupate corect.
Odata creata o prima pagina web functionala trebuie sa revenim la tag-uri pentru a
aprofunda capacitatile acestora .
In cadrul sectiunii <BODY> apar elementele de text si grafica ale paginii noastre .
Acum sa vedem ce altceva mai putem realiza in aceasta sectiune .
Unul dintre elementele cele mai puternice si des utilizate care se intalnesc in cadrul
acestei sectiuni este controlul asupra culorilor , atat la nivel de text cat si de fond .
Putem configura culori diferite pentru text normal , link-uri , link-uri vizitate , linkuri active sau pentru fondul paginii noastre .
Pentru a specifica culoarea de fond tag-ul nostru se prezinta astfel :
<Body bgcolor="blue">
Comanda anterioara face ca fondul paginii noastre sa devina albastru .
Pentru a specifica o anumita culoare ( ex. negru ) si pentru textul din cadrul paginii
folosim urmatoarea comanda :
<Body bgcolor="blue" text="black">
La pasul urmator vom schimba culoarea link-urilor prezente in pagina in galben
pentru a le diferentia mai rapid in cadrul informatiilor prezentate in pagina web :
<Body bgcolor="blue" text="black" link="yellow">
In cazul in care in cadrul paginii avem mai multe link-uri ar fi util sa putem
observa rapid care dintre ele au fost deja vizitate si care nu . Pentru a putea sublinia
acest fapt vom introduce si atributul vlink ( = visited link ) in cadrul tag-ului :
<Body bgcolor="blue" text="black" link="yellow" vlink="red">
In urma comenzii de mai sus browser-ul va afisa link-urile vizitate cu rosu . Ca un
alt pas putem configura o alta culoare ( ex. verde ) pentru link-urile pe care se
apasa la momentul respectiv ; aceasta culoare va apare doar in momentul in care se
va da click pe link-ul respectiv iar atributul folosit va fi alink ( = active link ) :
<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">
Revenind la controlul culorilor trebuie sa mai amintesc unele detalii . Culoarea
poate fi specificata fie in limba engleza ( denumirile dintr-o lista standard ) fie in
7

cod hexazecimal ( ex .#0000FF ) . Formatul in care se transmite comanda este de


tip RGB ( red green blue ) : RRGGBB ; comanda de mai jos :
<Body bgcolor="#0000FF">
este echivalenta cu :
<Body bgcolor="blue">
In cazul in care vrem ca pagina sa aiba un aspect mai personalizat putem folosi ca
fond nu doar o culoare ci o imagine ( in format GIF sau JPG ) :
<Body background="imagine.gif" text="black" link="yellow" vlink="red"
alink="green">
Tag-ul anterior specifica utilizarea imaginii imagine.gif ca fond al paginii noastre
. Trebuie mentionat ca indiferent de dimensiunile imaginii dorite aceasta va acoperi
intreaga suprafata a paginii .
In continuare vom aborda utilizarea diferitelor fonturi . In computer vom intalni o
varietate foarte mare de fonturi in ceea ce priveste forma si marimea . Trebuie sa
acordam atentie alegerii fontului utilizat in pagina noastra web pentru ca este
posibil ca nu toti utilizatorii care vor incerca sa acceseze pagina vor dispune de
fontul respectiv . In acest caz computerul va inlocui automat fontul nostru cu fontul
default al acelui sistem ( de obicei ARIAL sau TIMES NEW ROMAN ) .
Ca element practic , indiferent de fontul pe care il utilizam este necesara
vizualizarea paginii si folosind fonturile default cele mai raspandite .
Pentru a controla fonturile trebuie utilizat tag-ul <FONT> , in cadrul sectiunii
<BODY> :
<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">
<Font face="arial">
</Font>
</Body>
Observati ca si tag-ul <FONT> necesita un tag de inchidere . Acest tag ne permite
sa stabilim tipul de font , dimensiunea sa si culoarea , ca in exemplul urmator :
<Font face="Comic Sans MS" size="4" color="green">
8

Pentru a da flexibilitate utilizarii fonturilor limbajul HTML permite enumerarea in


cadrul unei liste a fonturilor ce urmeaza a fi folosite , astfel incat in cazul in care
fontul pe care il utilizati nu este disponibil atunci se va incerca automat utilizarea
urmatorului font din lista :
<Font face="Comic Sans MS, Arial">
Marimea fontului poate fi stabilita in cadrul a trei tipuri de plaje : de la 1 la 7 , de
la -1 la -3 si de la +1 la +4 .
In afara acestui control al fonturilor mai exista inca sase tag-uri care pot modifica
fontul prezent in pagina . Aceste comenzi sunt tag-uri independente si nu apar in
cadrul tag-ului <FONT> . Aceste tag-uri sunt <h1 > , <h2> , <h3> , <h4> , <h5> si
<h6> , cu tag-ul <h1> folosind dimensiunea cea mai mare de font iar <h6> cea mai
mica dimensiune . Aceste tag-uri sunt in general folosite la inceputul paginii pentru
a anunta un titlu sau in cadrul paginii pentru a diferentia dimensiunea unei portiuni
de text de dimensiunea standard definita prin tag-ul <FONT> . Toate aceste tag-uri
necesita si complementarul de inchidere ( ex. </h1> ) .
In cazul in care nu se apeleaza la tag-ul <FONT> se va folosi dimensiunea default
de 3 .
In cazul in care dorim ca in locul fontului default al browserului sa folosim alt font
pentru intregul document se va apela la tag-ul BASEFONT , integrat in sectiunea
HEAD a documentului :
<head>
<basefont face=Comic Sans MS color="red" size=+3>
</head>
Codul sursa de mai sus implica utilizarea ca default a noului font , cu culoarea
rosie si cu o dimensiune mai mare cu 3 decat a fontului default al browserului .
3.2JAVASCRIPT
Scripturile Javascript se execut de ctre browser si sunt incluse deci n pagina
HTML ce se afiseaz pe calculatorul clientului. Scripturile pot fi incluse complet n
pagina HTML sau pot fi create n fisiere separate si referite n pagina HTML. n
9

ambele cazuri, marcajul HTML folosit este <script>, exemplele de includere fiind
urmtoarele:
Script inclus n pagina HTML
<script type=text/javascript>
//cod script
</script>
Script inclus ntr-un fisier extern
<script src=fisier_sursa.js></script>
Marcajul <script> poate fi inclus att n interiorul marcajului <head>, ct si n
cadrul marcajului <body>. Diferena este c n primul caz scriptul se execut la
ncrcarea paginii, n timp ce n al doilea caz se execut n momentul ntlnirii
marcajului. Din acest motiv n seciunea <head> sunt incluse funciile ce vor fi
folosite n restul paginii iar n <body> sunt n general apelurile funciilor.
Un script javascript poate conine definiii de funcii, definiii de clase (cu
meniunea c Javascript nu este un limbaj orientat obiect n adevratul sens al
cuvntului neavnd o mare parte din mecanismele unui limbaj orientat obiect),
apeluri ale funciilor definite sau ale funciilor oferite de browser.
Sintaxa Javascript este foarte asemntoare cu sintaxa Java. Cuvintele cheie sunt
cu mici excepii aceleasi diferenele majore de sintax fiind evideniate n prima
parte a acestei seciuni.
Javascript este un limbaj cu tipare dinamic verificarea tipului datelor
efectundu-se la rulare. Astfel la declararea unei variabile nu se va specifica tipul
acesteia ci doar c este vorba de o variabil. Se foloseste cuvntul cheie var:
var x=2, y=5;
Declararea unei funcii se face folosind cuvntul cheie function urmat de numele
funciei, de lista de parametri si de un bloc ce conine codul funciei. Ca si n Java,
cuvntul cheie return este folosit pentru a ntoarce rezultatul funciei.
Un exemplu de definire si de apel al unei funcii ar fi urmtorul:
function sum(x,y)
{
10

var rez=x+y;
return rez;
}
var suma=sum(2,5);
Metodele de iterare n Javascript sunt aproape identice cu cele din Java. Sintaxa
pentru instruciunile for, while si do..while este identic cu cea din Java. n plus
fa de Java, Javascript ofer instruciunea foreach ce itereaz pe proprietile unui
obiect spre deosebire de alte limbaje de programare (C#, PHP) unde foreach
itereaz pe elementele unei colecii.
Urmtorul exemplu ilustreaz definirea unei funcii n care se itereaz proprietile
unui obiect si n care se si definesc si se seteaz valori pentru un obiect.
function printNote(stud)
{
var nota
document.write("note pentru studentul "+stud.nume+":<br>");
for each (nota in stud.note)
document.write(nota+" ");
}
var student={nume: "ion", an:2, note:{mate:9, pc:8}};
document.write(student.nume +"<br>" );
document.write(student.an +"<br>");
printNote(student)
Instruciunea document.write afiseaz un sir de caractere n documentul HTML
curent (n care se afl script-ul).
Javascript pune la dispoziie si un numr mare de obiecte ce pot fi folosite n marea
majoritate a browserelor printre care Array, Math, Date, String.
Un exemplu rapid de afisare a datei curente este urmtorul:
var data=new Date();
document.write("Documentul s-a incarcat ultima oara la data: " +
data.getDate() +":"+data.getMonth()+ ":"+ data.getFullYear());
11

3.3AJAX
AJAX Asynchronous Javascript and XML este o tehnic de programare web ce
permite efectuarea unor cereri http ctre serverul web, prin intermediul crora se
poate actualiza o pagin web fr a se efectua rencrcarea sa complet.
Obiectul Javascript care permite efectuarea acestor cereri asincrone se numeste
XMLHttpRequest, unde W3C ncearc s defineasc un standard pentru acest
obiect.
Desi comportarea acestui obiect este standard n fiecare browser iniializarea sa
este diferit pentru fiecare browser. Iat codul standard pentru creearea unui obiect
de tip XMLHttpRequest.
function createXMLHttp()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
12

{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
Principalele metode, proprieti si evenimente oferite de XMLHttpRequest sunt:
open creeaz o conexiune GET sau POST ctre un url dat ca parametru
send efectueaz cererea ctre server
onreadystatechange evenimentul care este declansat de schimbarea valorii
proprietii readystate, proprietate ce poate avea urmtoarele valori (conform
standardului):
o UNSENT = 0
o OPENED = 1
o HEADERS_RECEIVED = 2
o LOADING = 3
o DONE = 4
Vom ncerca s exemplificm funcionarea Ajax n 2 cazuri si anume n cazul n
care cererea HTTP este declansat de un eveniment din pagina web (selectarea
unei date a calendarului) si de cazul n care cererea HTTP se face periodic pentru a
verifica de exemplu dac s-a modificat ceva n baza de date de pe server si trebuie
notificat utilizatorul.
Exemplul 1: calendar ce obine datele referitoare la programul utilizatorului de pe
server si actualizeaz dinamic pagina web.
13

n plus fa de exemplul precedent ce foloseste componenta calendar a YUI n


acest script se iniializeaz un obiect XMLHttpRequest ce deschide o conexiune
asincron ctre un script php cruia i trimite data selectat de utilizator. n scriptul
php se extrage din baza de date (de exemplu) programul utilizatorului pentru ziua
primit parametru si acest program se ntoarce formatat ntr-un fisier XML. Acest
rezultat este apoi afisat n pagina web cnd se detecteaz finalizarea cererii.
var xmlHttp;
function calendarInit() {
calendar = new YAHOO.widget.Calendar("calendar","container");
//functia care se apeleaza la selectarea de catre utilizator a unei
date din calendar
var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date=dates[0];
xmlCall(date[0],date[1],date[2]);
};
calendar.selectEvent.subscribe(mySelectHandler, calendar,
true);
calendar.render();
}
YAHOO.util.Event.onDOMReady(calendarInit);
function xmlCall(year, month, day)
{//primim parametrul ziua, luna si anul selectate si cerem de pe
//server, programul utilizatorului pentru ziua respectiva
xmlHttp=createXMLHttp();//v. funcia definita mai sus
var
//url-ul scriptului php folosit+parametrii necesari pt executia
//scriptului
connString="http://localhost/testAjax2/getCalendarEvent.php?year="+
year+"&month="+month+"&day="+day;
14

//functia ce va fi apelata la schimbarea starii obiectului xmlHttp


xmlHttp.onreadystatechange=displayChange;
/*deschidem conexiunea; true semnifica faptul ca este o conexiune
asincrona si ca scriptul javascript isi continua executia fara a
astepta raspunsul; cand vine raspunsul de la scriptul php apelat se
apeleaza functia displayChange*/
xmlHttp.open("GET",connString,true);
xmlHttp.send(null);
}
function displayChange()
{
var nodDiv=document.getElementById("eveniment");
if (xmlHttp.readyState==4) /*daca rezultatul cererii s-a primit
complet*/
{
if(xmlHttp.status==200) /*daca raspunsul cererii http
a fost ok*/
{
var eveniment=xmlHttp.responseText; /*afisam
rezultatul*/
nodDiv.innerHTML="eveniment:" +eveniment;
}
}
}
Scriptul php ar putea arta astfel:
<? function getEvent($data)
{
// select din DB
return "rezultat";/*intorc un text oarecare pt ca exemplul sa fie
functional */
15

}
header('Content-Type: text/xml');
echo'<?xml version="1.0">'; /*construim un document XML*/
echo'<response>';
$data=mktime(0,0,0,$_GET['month'],$_GET['day'],$_GET['year']);
echo getEvent($data); /*obtinem evenimentul asociat datei primite
si-l tiparim*/
echo'</response>';?>
Exemplul 2: Actualizarea live a unei liste de mesaje folosind Ajax.
ntr-o pagin web avem un tabel ce conine stiri extrase dintr-o baz de date. Baza
de date poate fi actualizat cu stiri noi n timp ce utilizatorul viziteaz pagina.
Scopul exemplului este ca si lista de stiri noi s fie actualizat pe pagin fr ca
utilizatorul s rencarce pagina.
Aplicaia const ntr-un script Javascript, un script php si o pagin HTML.
/*Scriptul js*/
var xmlHttp;
xmlHttp=createXMLHttp(); /*vezi definitia acestei functii mai sus*/
function xmlCall()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==0)
{/*deschid conexiune catre pagina php ce imi va construi
rezultatul*/
var
connString="http://localhost/testAjax2/latestNews.php";
xmlHttp.onreadystatechange=displayChange;
xmlHttp.open("GET",connString,true);
xmlHttp.send(null);
}
/*mai verific stiri noi peste 10 secunde; se poate seta
acest timeout la orice valoare in functie de aplicatia pe care o
16

scriem si de cat de des ni se pot actualiza datele*/


setTimeout('xmlCall()',10000);
}
function displayChange()
{
/*tabelul cu date pe care trebuie sa-l completez*/
var nodT=document.getElementById("t1");
/*sterg randurile existente in tabel cu exceptia headerului*/
while(nodT.rows.length>1)
nodT.deleteRow(nodT.rows.length-1);
if (xmlHttp.readyState==4) /*daca rezultatul cererii s-a primit
complet*/
{
if(xmlHttp.status==200) /*daca raspunsul cererii http
a fost ok*/
{
var response=xmlHttp.responseXML;
var
newsList=response.getElementsByTagName("newsItem");
/*prelucrez fisierul xml primit ca rezultat si
adaug inregistrarile in tabel*/
for (i=0;i<newsList.length;i++)
{
var noRows=nodT.rows.length;
nodT.insertRow(noRows);
var currentRow=nodT.rows[noRows];
var cell=currentRow.insertCell(0);
cell.innerHTML=newsList[i].firstChild.nodeValue;
cell=currentRow.insertCell(1);
cell.innerHTML=new Date();
17

}
}
}
}
/*scriptul php latestNews.php*/
function make_seed()
{/*functie preluata de pe php.net [12]*/
list($usec, $sec) = explode(' ', microtime());
return (float) $sec + ((float) $usec * 100000);
}
function getNewsItems()
{/* generez un vector de stiri in mod normal aceste stiri se iau
din baza de date dar preluarea acestora din baza de date nu face
obiectul acestui document*/
$newsArray=Array();
$newsArray[0]['title']="Bulgaria-Romania 1-0";
$newsArray[1]['title']="Scotia-Italia 1-2";
srand(make_seed());
$goalsB=rand(1,5);
$goalsA=rand(0,3);
/*generez si o stire care sa se schimbe de fiecare data pentru a fi
vizibile modificari in pagina*/
$newsArray[2]['title']="Brazilia-Anglia ".$goalsB."-".$goalsA;
return $newsArray;
}
header('Content-Type: text/xml');
echo'<?xml version="1.0"?>';
echo'<response>';
$news=getNewsItems();
foreach ($news as $newsItem)
18

{/* construiesc un fisier xml rezultat*/


echo '<newsItem>'.$newsItem['title'].'</newsItem>';
}
echo'</response>';
?>
n fisierul HTML voi aduga urmtoarele linii:
<body onload="xmlCall();">
<table id="t1" border="1">
<tr>
<td>Continut stire</td>
<td>Data aparitiei</td>
</tr>
</table>
<input type="button" onclick="xmlCall();" value="Refresh">
Prima linie specific faptul c funcia se va apela la ncrcarea paginii. n tabelul
cu id-ul t1 se vor aduga datele primite de la server. Elementul input permite
rencrcarea tabelului la dorina utilizatorului prin apelarea funciei XmlCall (n
cazul n care nu este mulumit de intervalul de timp la care se face rencrcarea).
Pe acest principiu funcioneaz si noul Yahoo Mail Beta e-mailurile se verific la
un interval stabilit de timp folosind AJAX sau la apsarea butonului Check Mail.
3.4PHP
Limbajul PHP a fost creat in anul 1994 de catre Rasmus Lerdorf, care incerca sa-si
personalizeze propria pagina Web; din acest motiv limbajul a fost numit initial
PHP adica: Personal Home Page (pagina de baza personala). Ulterior limbajul a
fost perfectionat, utilitatea si caracteristicile sale s-au dezvoltat treptat, ajungand sa
aiba semnificatia Hypertext Preprprocesor (PHP). Preprocesarea consta in aceea ca
datele sunt interpretate(preprocesate) de catre serverul Web inainte ca acesta sa
genereze cod HTML.
PHP este una dintre cele mai interesante tehnologii pentru site-uri si programare
19

web, imbina caracteristici dintre cele mai complexe cu simplitatea n utilizare. PHP
a devenit un instrument de frunte pentru dezvoltarea aplicatiilor Web. Spre
deosebire de alte instrumente pentru aplicatii Web, cum este Perl, PHP este un
limbaj de programare comod pentru ncepatori, chiar si pentru cei care nu au mai
desfasurat activitati de programare.
Daca sunteti un cunoscator al limbajului HTML, dar nu aveti experienta n materie
de programare, va puteti pune ntrebarea: care sunt functionalitatile suplimentare
pe care le poate asigura cunoasterea limbajului PHP? Ca si alte limbaje de
scripting pentru Web, PHP va permite sa furnizati un continut Web dinamic, adica
un continut Web care se modifica automat de la o zi la alta sau chiar de la un minut
la altul. Continutul Web este un element important n sustinerea traficului unui sit
Web; de regula, vizitatorii nu vor mai reveni la o pagina Web care contine aceleasi
informatii ca si cele prezentate la ultima vizita. Pe de alta parte, siturile Web
frecvent actualizate pot atrage cantitati enorme de trafic.
Mai mult, spre deosebire de limbajele de scripting, precum JavaScript, PHP ruleaza
pe serverul Web, nu n navigatorulul Web. n consecinta, PHP poate obtine accesul
la fisiere, baze de date si alte resurse inaccesibile programului JavaScript. Acestea
constituie bogate surse de continut dinamic, care atrag vizitatorii. In plus, putem
folosi limbajul PHP pentru a generera cod Java Script.
Secventele de cod PHP pot fi incluse intr-un fisier HTML; ulterior serverul Web va
identifica aceasta secventa de cod , va procesa acesta secventa de cod generand cod
HTML iar la final va inlocui secventa de cod PHP cu codul HTML.
Printre caracteristicile cele mai importante ale imbajului enumeram:
- simplicitate : acest limbaj este simplu de folosit, fiind accesibil si neprogramatorilor. Datorita acestui fapt el a devenit cel mai popular limbaj de script
pentru generarea de pagini HTML dinamice.
- usor de folosit : limbajul are o sintaxa asemanatoare limbajului C, care este
foarte popular in randul programatorilor. De aceea programatorii care au cunostine
20

de C sau Perl vor face foarte rapid trecerea spre PHP. Pe de alta parte anumite
aspecte cum ar fi: declararea si folosirea variabilelor este mult simplificata in PHP,
spre deosebire de C++ sau alte limbaje de nivel inalt.
- eficienta : specificatiile limbajului includ folositea tehnicilor de POO
(Programare orientata pe obiecte) iar acest lucru contribuie la marirea
productivitatii: un programator PHP poate folosi module scrise de un alt
programator fara sa fie nevoit sa cunoasca detalii specifice de implementare a
codului.
- cross-platform : exista implementari ale limbajului pe mai multe sisteme de
operare, cele mai populare fiind cele de pe sistemele Linux si Windows. In acest
caz daca scriem cod PHP care ruleaza pe un sistem Linux, ulterior vom putea
folosi acest cod pe un server care ruleaza Windows si viceversa.
- gratis : PHP reprezinta un program Open Source, oricine poate folosi acest
limbaj fara a fi nevoit sa plateasca ceva. De asemenea utilizatorii au access la
sursele PHP (scrise in limbajul C). Site-ul oficial al limbajului PHP se afla
la : www.php.net , datorita popularitatii acestui limbaj exista numeroase site-uri
Web care prezinta informatii despre PHP, exemple de cod, forum de discutii , etc.
Acest curs de initiere in PHP si MySQL este menit a prezenta elemente
introductive de programare si dezvoltare a paginilor web folosind PHP. Este
important sa retineti ca nu reprezinta decat un punct de plecare cu lectii si tutoriale
php introductive. Dezvoltarea Web este o activitate solicitanta, iar viitorul
dezvoltator Web trebuie sa dispuna de multe abilitati, printre care si pe aceea de
programator. Dezvoltatorii Web ncepatori vor gasi n aceast curs un prim pas util
si amical n activitatea de programare n PHP.

21

IV.

Bibliografie:

1. http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference
2. http://www.w3.org/TR/XMLHttpRequest/
3. http://www.w3schools.com/ajax/ajax_browsers.asp
4. C. Darie, B. Brnzrea, Filip Chereches-Tosa, M. Bucic AJAX and PHP:
Building
Responsive Web Applications. Packt Publishing 2006
5. http://developer.mozilla.org/en/docs/XMLHttpRequest
6. http://www.php.net/manual/en/function.srand.php
7. http://www.getfirebug.com/

22

V.

ANEXA 1

Listingul programului
***************************************************************
Exemplu CSS pentru setarea la diferite dimensiuni ale ecranului:
@media (min-width:1200px) {
.desktop-only {
display:block !important;
}
}
@media (min-width:1500px) {
.categorii {
width: 5.333333% !important;
}
}
@media (min-width:2500px) {
.categorii {
width: 3.333333% !important;
}
23

}
@media (min-width:3000px) {
.categorii {
display:none;
}
}
@media (max-width: 1199px) {
.imagine_cat1 { height:25px !important;}
.col-md-8 {
width: 90% !important;
}
.col-md-9 {
width: 100% !important;
}
.textToBold {
font-size:13px !important;
}
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}

Pagina de logare:
<?php
ini_set('session.gc_maxlifetime', 2592000); // 30 days
ini_set('memcache.session_redundancy', 3);
ini_set('display_errors','Off');
session_start();
$cfg_array = parse_ini_file(dirname(__FILE__)."/config/config.ini.php", true);
include_once(dirname(__FILE__).'/common/connect.inc.php');
include_once(dirname(__FILE__).'/classes/Logger.php');
include_once(dirname(__FILE__).'/classes/ciupi.php');
$log = new Logger();
$cp = new ciupi();
$redirect_url=$cfg_array['ssl_site_url'].'user/login.html';
if(isset($_GET['next'])) $redirect_url=$cfg_array['ssl_site_url'].'user/login.html?next='.$_GET['next'];
extract($_POST, EXTR_PREFIX_ALL, "post");
$post_email = strtolower($post_email);
$is_login =& $db_read->getRow("SELECT * FROM users where email='$post_email' and
user_password=password('$post_pass');"); /*and user_active='Y'*/
if(!$is_login) $is_login =& $db_read->getRow("SELECT * FROM users where tel='$post_email' and
user_password=password('$post_pass') and user_active='Y';");
if($is_login) extract($is_login, EXTR_PREFIX_ALL, "user");
/*
CREATE TABLE `users_ip_history` (
`id` INT(10) NOT NULL AUTO_INCREMENT,
`user_id` INT(10) NOT NULL DEFAULT '0',
`ip_list` TEXT NOT NULL COLLATE 'utf8_bin',
24

`action` VARCHAR(50) NOT NULL DEFAULT '0' COLLATE 'utf8_bin',


PRIMARY KEY (`id`)
)
COMMENT='Istoria ip-urilor'
COLLATE='utf8_bin'
ENGINE=InnoDB;
*/
if($is_login)
{
$_SESSION['logat']
= true;
$_SESSION['username'] = $user_user_display_name;
$_SESSION['user_id'] = $user_user_id;
$_SESSION['email']
= $user_email;
$_SESSION['test_user'] = $user_test_user;
$_SESSION['is_manager'] = $user_is_manager;
$log->UserLogIn($user_user_id);
// setcookie ("logedid", session_id(),strtotime("+90 days",time()),'/');
if(!empty($user_poza)) $_SESSION['poza']=$user_poza;
$acum=time();
$ses_id=session_id();
$last_ip=$_SERVER['REMOTE_ADDR'];
$google=explode('.',$_COOKIE['__utma']);
$table_name='users';
$fields_values = array(
'last_visit' => $acum,
'last_ip'
=> $last_ip,
'session_id' => $ses_id,
'analytics_id' => $google[1],
);
$res_aE =& $db_write->autoExecute($table_name, $fields_values, MDB2_AUTOQUERY_UPDATE, "
user_id = '$user_user_id'");
$redirect_url=$cfg_array['ssl_site_url'].$_GET['next'];

} else {
if($cp->getUserIdByEmail($post_email)) $log->UserBadPassowd($cp->getUserIdByEmail($post_email),
$post_pass);
header('Location:'.$redirect_url);
exit();
}
header('Location:'.$redirect_url);
?>

25

VI.
Macheta Siteului:
Pagina Principala:

26

Anexa 2

Oferte Active:

Ofert:
27

VII. Concluzie:
28

n perioada 09.03.2015 30.04.2015 am efectuat practica n producie la


unitatea economica S.R.L. Soluii Web Design.
n cadrul acestei companii am avut posibilitatea de a crea un proiect real:
ciupi.md. M-am implicat la rezolvarea diferitor probleme atit referitor la
design cit si la programarea web. Acest proiect m-a ajutat s m familiarizez
cu lucrul n echip. Mi-am nbuntit nivelul meu n domeniul programrii i
anume la realizarea siteului full adaptiv i folosirea noii versiuni HTML 5 i
CSS3.
Pentru mine a fost foarte atractiv s lucrez intr-o companie mic dar cu
suflet mare, oferindu-mi posibilitatea de a lucra cu clieni i proiecte reale.

29