victor practica
DESCRIPTION
PracticaTRANSCRIPT
Ministerul Educației al Republicii MoldovaUniversitatea Tehnică a Moldovei
Facultatea Calculatoare, Informatică și MicroelectronicăCatedra Automatică și Tehnologii Informaționale
DAREA DE SEAMĂ
PE PRACTICA ÎN PRODUCȚIE LA SPECIALITATEA TEHNOLOGII INFORMAȚIONALE
A STUDENTULUI gr. TI-131
Dobrovolschi Victor
TEMA: Site de promoții ,, ciupi.md “
Locul Practicii : S.R.L. ”Soluții Web Design”
Conducătorul practicii Conducătorul practiciide la unitatea economică: de la U.T.M. :Blîndî Rodion Balmuș Ion
Chișinău 2015
1
CUPRINS:
1. Descrierea locului practicii în producție S.R.L ”Soluții Web Design”...3
2. Obiectivele și cerințele site-ului Web ”ciupi.md”.....................................4
3. Aplicatii si tehnologii utilizate in elaborarea site-ului ….......………….5
3.1 HTML…………………………………………………………………5
3.2 JAVASCRIPT…………………………………………………...…..10
3.3 AJAX…………………………………………………………………12
3.4PHP………………………………………………………………...…20
4. Bibliografie…………………………………………………..…………..23
5. ANEXA 1………………………………………………………………..24
6. ANEXA 2………………………………………………………………..27
7. Concluzie………………………………………………………………..28
2
I. Descrierea locului practicii în producție S.R.L ”Soluții Web Design”
S.R.L.”Soluții Web Design”, a fost creată din dorința de a aduce un nou bagaj
de principii și valori profesionale pe piața de web design din Moldova.
Este o companie tânără, dar în același timp cu o vastă experiență în web design,
dedicată dezvoltării de soluții web performante și atractive, iar serviciile pe care
le pun la dispoziție garantează faptul că afacerea sau website-ul clienților vor fi
apreciate de către vizitatori sau de către potențialii clienți.
Echipa ”Soluții Web Design” este o echipa formată din 7 oameni unde fiecare
își pune în aplicare abilitățile pentru a satisface necesitățile clientului. Web
designeri dedicați și mereu informați cu ultimele tendințe î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 clienții cu un
design curat și intuitiv. Această companie dorește să obțină realizări deosebite și
succes în domeniul IT, promovînd și susținînd tinerii și viitorii specialiști în
domeniu.
Cele cinci săptămîni petrecute împreuna cu ei m-au facut sa am mai multă
încredere în forţele proprii şi să nu fac pasul înapoi atunci cînd lucrurile se
complica. În timpul efectuării proiectului pentru practica în producţie am studiat
citeva limbaje, cum ar fi HTML, JAVASCRIPT,AJAX, CSS, PHP, SQL. La
sfirsitul studierii acestor limbaje, am putut cu usurința sa realizez proiectul pentru
practica în producție.
3
II. Obiectivele și cerințele 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
promoționale.
Sarcinile de bază:
Crearea machetei siteului și a paginilor în html;
Implimentarea versiunii mobile și crearea versiunii full adaptive;
Module și funcționalități noi:
Vazute recent;
Slider cu promoții noi;
Promoții de sărbători;
Oferte similar;
Modificarea panoului de administrare.
4
III. Aplicatii si tehnologii utilizate in elaborarea site-ului .
3.1HTML
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 .
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>
5
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 .
<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>
6
<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:
<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 , link-
uri 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">
7
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
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 ) .
8
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">
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 .
9
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 către 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
ambele cazuri, marcajul HTML folosit este <script>, exemplele de includere fiind
următoarele:
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 atât în interiorul marcajului <head>, cât si în
cadrul marcajului <body>. Diferența este că în primul caz scriptul se execută la
încărcarea paginii, în timp ce în al doilea caz se execută în momentul întâlnirii
marcajului. Din acest motiv în secțiunea <head> sunt incluse funcțiile ce vor fi
folosite în restul paginii iar în <body> sunt în general apelurile funcțiilor.
Un script javascript poate conține definiții de funcții, definiții de clase (cu
mențiunea că Javascript nu este un limbaj orientat obiect în adevăratul sens al
cuvântului neavând o mare parte din mecanismele unui limbaj orientat obiect),
apeluri ale funcțiilor definite sau ale funcțiilor oferite de browser.
10
Sintaxa Javascript este foarte asemănătoare cu sintaxa Java. Cuvintele cheie sunt
cu mici excepții aceleasi diferențele majore de sintaxă fiind evidențiate în prima
parte a acestei secțiuni.
Javascript este un limbaj cu tipare dinamică – verificarea tipului datelor
efectuându-se la rulare. Astfel la declararea unei variabile nu se va specifica tipul
acesteia ci doar că este vorba de o variabilă. Se foloseste cuvântul cheie var:
var x=2, y=5;
Declararea unei funcții se face folosind cuvântul cheie function urmat de numele
funcției, de lista de parametri si de un bloc ce conține codul funcției. Ca si în Java,
cuvântul cheie return este folosit pentru a întoarce rezultatul funcŃiei.
Un exemplu de definire si de apel al unei funcŃii ar fi următorul:
function sum(x,y)
{
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 instrucțiunile for, while si do..while este identică cu cea din Java. În plus
față de Java, Javascript oferă instrucțiunea foreach ce iterează pe proprietățile unui
obiect spre deosebire de alte limbaje de programare (C#, PHP) unde foreach
iterează pe elementele unei colecții.
Următorul exemplu ilustrează definirea unei funcții în care se iterează proprietățile
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+" ");
11
}
var student={nume: "ion", an:2, note:{mate:9, pc:8}};
document.write(student.nume +"<br>" );
document.write(student.an +"<br>");
printNote(student)
Instrucțiunea document.write afisează un sir de caractere în documentul HTML
curent (în care se află script-ul).
Javascript pune la dispoziție si un număr 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 următorul:
var data=new Date();
document.write("Documentul s-a incarcat ultima oara la data: " +
data.getDate() +":"+data.getMonth()+ ":"+ data.getFullYear());
3.3AJAX
AJAX – Asynchronous Javascript and XML este o tehnică de programare web ce
permite efectuarea unor cereri http către serverul web, prin intermediul cărora se
poate actualiza o pagină web fără a se efectua reîncărcarea 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 inițializarea sa
este diferită pentru fiecare browser. Iată codul standard pentru creearea unui obiect
de tip XMLHttpRequest.
function createXMLHttp()
{
var xmlHttp;
try
{
12
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
Principalele metode, proprietăți si evenimente oferite de XMLHttpRequest sunt:
· open – creează o conexiune GET sau POST către un url dat ca parametru
· send – efectuează cererea către server
· onreadystatechange – evenimentul care este declansat de schimbarea valorii
proprietății readystate, proprietate ce poate avea următoarele valori (conform
13
standardului):
o UNSENT = 0
o OPENED = 1
o HEADERS_RECEIVED = 2
o LOADING = 3
o DONE = 4
Vom încerca să exemplificăm funcționarea 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 obține datele referitoare la programul utilizatorului de pe
server si actualizează dinamic pagina web.
În plus față de exemplul precedent ce foloseste componenta calendar a YUI în
acest script se inițializează un obiect XMLHttpRequest ce deschide o conexiune
asincronă către un script php căruia î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 când 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,
14
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. funcŃia 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;
//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*/
15
{
var eveniment=xmlHttp.responseText; /*afisam
rezultatul*/
nodDiv.innerHTML="eveniment:" +eveniment;
}
}
}
Scriptul php ar putea arăta astfel:
<? function getEvent($data)
{
// select din DB
return "rezultat";/*intorc un text oarecare pt ca exemplul sa fie
functional ☺*/
}
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 conŃine 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ă fără ca
utilizatorul să reîncarce pagina.
Aplicația constă într-un script Javascript, un script php si o pagină HTML.
/*Scriptul js*/
var xmlHttp;
xmlHttp=createXMLHttp(); /*vezi definitia acestei functii mai sus*/
16
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
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;
17
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();
}
}
}
}
/*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";
18
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)
{/* construiesc un fisier xml rezultat*/
echo '<newsItem>'.$newsItem['title'].'</newsItem>';
}
echo'</response>';
?>
În fisierul HTML voi adăuga următoarele 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ă funcția se va apela la încărcarea paginii. În tabelul
cu id-ul „t1” se vor adăuga datele primite de la server. Elementul input permite
reîncărcarea tabelului la dorința utilizatorului prin apelarea funcției XmlCall (în
19
cazul în care nu este mulțumit de intervalul de timp la care se face reîncărcarea).
Pe acest principiu funcționează si noul Yahoo Mail Beta – e-mailurile se verifică la
un interval stabilit de timp folosind AJAX sau la apăsarea 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
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.
20
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 ne-
programatorilor. 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
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
21
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.
22
IV. Bibliografie:
1. http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference2. http://www.w3.org/TR/XMLHttpRequest/3. http://www.w3schools.com/ajax/ajax_browsers.asp4. C. Darie, B. Brînzărea, Filip Chereches-Tosa, M. Bucică – „AJAX and PHP: BuildingResponsive Web Applications”. Packt Publishing 20065. http://developer.mozilla.org/en/docs/XMLHttpRequest6. http://www.php.net/manual/en/function.srand.php7. http://www.getfirebug.com/
23
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; }}@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');
24
$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', `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'];
25
} else {
if($cp->getUserIdByEmail($post_email)) $log->UserBadPassowd($cp->getUserIdByEmail($post_email),$post_pass);
header('Location:'.$redirect_url); exit(); }
header('Location:'.$redirect_url);?>
26
VI. Anexa 2 Macheta Siteului:Pagina Principala:
Oferte Active:
27
Ofertă:
28
VII. Concluzie: În perioada 09.03.2015 – 30.04.2015 am efectuat practica în producție la
unitatea economica S.R.L. ”Soluții 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 înbunătățit nivelul meu în domeniul programării ș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 clienți și proiecte reale.
29