Victor Practica

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

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

http://www.php.net/

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 ùsers_ip_history` ( ìd` INT(10) NOT NULL AUTO_INCREMENT, ùser_id` INT(10) NOT NULL DEFAULT '0', ìp_list` TEXT NOT NULL COLLATE 'utf8_bin', àction` VARCHAR(50) NOT NULL DEFAULT '0' COLLATE 'utf8_bin', PRIMARY KEY (ìd`))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

Victor Practica

Documents

Transcript of Victor Practica