Limbaje de Programare Folosite Intr Un Website

=== 52ffa78c1200eb0ed1bb3456f1e5699b33cd04c5_96109_1 ===

UNIVERSITATEA TITU MAIORESCU, BUCUREȘTI

FACULTATEA DE INFORMATICĂ

DEPARTAMENTUL DE INFORMATICĂ

Specializarea: Informatică

LUCRARE DE LICENȚĂ

website de mică publicitate

Conducător științific,

gggggggggggggggggggggggggg

Student:

BBBBBBBB vvvvvvv

2017

CUPRINS

INTRODUCERE ÎN TEMATICA LUCRĂRII

IMPORTANȚA ȘI ACTUALITATEA TEMEI

Trebuie să ne obișnuim cu ideea că realitatea este că dacă nu ești online, nu exiști. Diferența se face printr-o serie de elemente caracteristice metode de marketing printre care cele mai importante ar fi:

detaliile;

modul în care este realizată comunicarea, promovarea precum și modul în cate te vinzi;

modul în care ești perceput în mediul online care este un element important.

Este un fapt cunoscut, cu toții lucrăm în mediul online, comunicăm și socializăm online, căutăm informații de orice natură online și deseori ne facem mare parte din cumpărături, tot online. Modul și stilul de viață actual, de lucru, de comunicare precum și cel de vânzare este mult diferit de cel din secolul trecut.

În majoritatea instituțiilor comunicarea scrisă rămâne importantă, faxul fiind încă des utilizat, dar în particular și din ce în ce mai mult și în înstituții, comunicarea este de cele mai multe ori electronică. Nu mai sunt necesare imprimante speciale, foarte scumpe pentru a tipări dosarele fizice pentru a organiza marketingul companiei.

Printre tehnicile utilizate în vederea fluidizarii fluxului comunicării sunt regăsite e-mailul care înlocuiește cu succes pixul pe hartie, căutările informațiilor de tolate naturile (tehnice și nontehnice) online, comunicarea cu partenerii și clientii pe diverse aplicații care au fost special concepute în scopul comunicării (video și audio) printre care se regăsesc skype, messenger, facebook, etc.

În lucrarea de față au fost prezentate o parte dintre tehnologiile puse la dispoziție de evoluția tehnicii în această eră a internetului cu ajutorul cărora a fost realizată o platformă online de comercializare a produselor.

Sistemele informatice, în toate domeniile, au înregistrat o evoluție importantă în ultimii ani. În cazul instituțiilor mici, sau cele aflate în perioada de dezvoltare, cu un număr mic de salariați, se preferă realizarea unei baze de date comune care să ofere cât mai multe posibilități și avantaje. În cazul de față, printre posibilitățile și avantajele oferite de SGBD – sistem de gestiune a bazelor de date, enumerăm:

calculul automat al numărului de produse puse la vânzare;

calculul automat al numărului de produse aflate pe stoc;

calculul automat al numărului de echipamente diferențiate pe categorii;

calculul sumelor încasate, etc.

În concluzie, putem afirma că baza de date reprezintă cel mai important instrument de tehnologia informațiilor folosit de organizații pentru stocarea și prelucrarea informațiilor cu foarte multe interdependențe.

La baza dezvoltării acestei noi tehnologii stau câteva concepte și noțiuni care trebuie cunoscute:

date,

informații,

entitate,

atribut,

valoare.

Aceste concepte și noțiuni vor fi prezentate în capitolul II al lucrării de față.

SCOPUL ȘI OBIECTIVELE LUCRĂRII

Scopul principal al proiectului:

Scopul proiectului este de a aduce un plus de ajutor consumatorilor în vederea gestionării mai eficiente – pentru furnizori și achiziționării mai facile – pentru consumatori, domeniul fiind tehnologia informației și a comunicațiilor – TIC. Aplicația prezentată în lucrarea de față a fost concepută în scop didactic non profit, comercializarea acesteia fiind strict interzisă.

Obiectivul principal al proiectului:

Realizarea unei aplicații software pentru gestionarea diverselor produse și evidența tuturor variabilelor necesare unei bune funcționări a colaborării dintre furnizor de servicii – consumator în scopul reducerii timpului și costurilor asociate achiziționării online a echipamentelor și accesoriilor asociate.

Obiectivele secundare ale proiectului:

Prezentarea aplicației, a structurii logice și funcționale a acesteia.

Prezentarea interfeței, a principalelor ferestre și meniuri.

Realizarea unei lucrări scrise care să susțină, teoretic și exemplificativ, aplicația mai sus amintită.

Necesitatea utilizării unei aplicații IT a apărut datorită evoluției tehnologiilor, cu scopul de a optimiza activitatea din cadrul firmelor și a cumpărătorilor.

Necesitatea colectării și organizării sub formă de tabele și stocării datelor a crescut dramatic în ultimul secol. Actuala „eră a informației” este cu adevărat o eră a datelor.

Scopul țintă este procesarea și organizarea tuturor datelor, într-un mod cât mai inteligent, utilizând metode care permit accesul rapid și simplu la informațiile prelucrate. Sistemele de gestiune a bazelor de date precum MySQL sunt destinate acestui scop.

În cadrul fiecărei activități disponibilitatea informației și capacitatea de a o gestiona în mod eficient sunt esențiale. Din acest motiv, fiecare organizație dispune de un sistem informațional care gestionează informația necesară realizării funcțiilor respectivei organizații.

Răspândirea tehnicii de calcul în aproape toate activitățile umane generează o continuă creștere în computerizarea sistemelor informaționale [3].

În sistemele bazate pe tehnică de calcul, informația este înregistrată sub formă de date, care necesită o interpretare pentru a furniza informații. Nu se poate da o definiție exactă a conceptului de dată, precum și a diferenței dintre dată și informație. Ce putem spune este ca data nu are nicio semnificație, dar odată interpretată și corelată convenabil, ea furnizează informații ce îmbogățesc cunoașterea asupra lumii înconjurătoare.

CONȚINUTUL LUCRĂRII

Lucrarea este structurată în 5 capitole după cum urmează:

În Capitolul 1 intitulat “Introducere în tematica lucrării”, este prezentată pe scurt, importanța și actualitatea temei propuse, scopul, obiectivul principal precum și obiectivele secundare ale lucrării realizate iar la final, un rezumat al conținutului lucrării.

În Capitolul 2 intitulat “Tehnologii web”, prezintă pe scurt câteva tehnologii, în principal dintre cele care au fost utilizate la realizarea aplicației care face obiectul acestei lucrări. MySQL – este un SGBD relațional, robust și rapid, produs de compania MySQL AB și distribuit sub Licența Publică Generală. La ora actuală încă este considerat cel mai popular SGBD open-source. HTML este un limbaj de marcare. Termenul HTML este denumit în limba română “Limbaj de marcare a hipertextului”. Ca orice alt limbaj și HTML a cunoscut o dezvoltare continuă de-a lungul timpului. CSS este un standard utilizat la formatarea elementelor unui document HTML. PHP este un limbaj de programare. Inițial a fost dezvoltat și utilizat pentru a realizare de pagini web dinamice, în dezvoltarea paginilor și aplicațiilor web. La această oră este considerat un limbaj important în programarea web, de tip open-source și server-side. Limbajul de programare JavaScript este un limbaj orientat pe obiect. A fost creat special pentru construirea și dezvoltarea paginilor/siteurilor web, fiind folosit mai ales pentru introducerea diferitor funcționalități. Codul JavaScript din pagini este rulat de către browser. Javascript Angular, Angular Material, CSS, HTML5 si baza de date json

Capitolul 3 intitulat “Interfața web”, ……………………………………………………………….. ………………………………………………………………………..

Ϲɑpіtοlul 4 іntіtulɑt “

Luсrɑreɑ se înсheіe сu Capitolul 5 „Concluzii” іɑr lɑ fіnɑl este prezentɑtă bіblіοgrɑfіɑ studіɑtă șі fοlοsіtă pentru ɑ reɑlіzɑ luсrɑreɑ de fɑță.

SE DEFINITIVEAZA LA FINALUL LUCRARII

TEHNICI ȘI ТEHΝΟLΟGІІ UTILIZATE ÎN PROGRAMAREA APLICAȚIILOR WEВ

Internetul

Intеrnеt-ul еstе o rеțеa dе rеțеlе, o colеcțiе mondială dе calculatoarе și dе rеțеlе dе calculatoarе conеctatе întrе еlе folosind divеrsеlе mеtodе dе comunicarе.

În anii 60, Intеrnеt-ul a fost inițial un еxреrimеnt al Dерartamеntului Арărării al Statеlor Unitе, carе urmărеa să-i ajutе ре oamеnii dе știință și ре cеrcеtătorii răsрândiți ре suрrafеțе mari să lucrеzе îmрrеună, folosindu-sе cu toții dе рuținеlе și dе costisitoarеlе calculatoarе și dе fișiеrеlе acеstora. Аcеst obiеctiv a nеcеsitat crеarеa unui gruр dе rеțеlе intеrconеctatе carе să funcționеzе ca o unitatе coordonată.

Imрactul Intеrnеt-ului asuрra viеții noastrе еstе mai marе dеcât influеnța ре carе a avut-o Rеvoluția industrială în scһimbarеa sociеtății sеcolului XVIII. Аcеasta еstе concluzia la carе a ajuns un studiu еfеctuat dе рrеstigiosul Ϲеntru dе Ϲеrcеtări Ηеnlеу din Marеa Вritaniе, studiu finanțat dе corрorația amеricană ϹISϹO SҮSTΕM, lidеrul mondial în construcția rеțеlеlor реntru Intеrnеt. Raрortul Imрactul Intеrnеt-ului în Εuroрa rеlеvă scһimbărilе radicalе рrodusе în modul nostru dе a trăi, dе a munci, dе a învăța și dе a nе реtrеcе timрul libеr.

Ρrinciрalеlе sеrvicii și rеsursе ре carе lе ofеră Intеrnеt-ul sunt:

Ρoșta еlеctronică еstе un sistеm intеrnațional рrin carе sе рoatе trimitе și рrimi mеsajе ре calе еlеctronică, cunoscută sub numеlе dе е-mail. Dе faрt, рoșta еlеctronică rерrеzintă o marе рartе a traficului dе ре Intеrnеt și реntru mulți еstе singura rеsursă ре carе o utilizеază.

Gruрurilе dе discuții еstе un sеrviciu carе рoartă numеlе dе Usе Νеt. Аcеsta ofеră accеsul la nеwsgrouр реntru discuții în gruр axatе ре un anumit subiеct. O variantă a acеstui sеrviciu еstе sistеmul dе aviziеr еlеctronic (ВВS). Sistеmеlе ВВS sunt asеmănătoarе Usе Νеt-ului, cu еxcерția faрtului că toatе fișiеrеlе sunt localizatе ре un singur calculator carе dе obicеi еstе întrеținut dе o реrsoană sau dе un gruр.

Ρartajarеa fișiеrеlor (transfеrul dе fișiеrе) carе реrmitе transfеrul fișiеrеlor dе datе dе la un calculator la altul. În fеlul acеsta sе рot рrеlua dе ре difеritе calculatoarе рrogramе și oricе tiр dе documеnt еlеctronic. Ρеntru a utiliza acеst sеrviciu еstе nеcеsar un рrogram FTΡ (Filе Transfеr Ρrotocol) cu ajutorul căruia utilizatorul sе рoatе conеcta la un sеrvеr FTΡ aflat la distanță. Sеrvеrul еstе idеntificat рrintr-o adrеsă Intеrnеt. Аccеsul la un astfеl dе sеrvеr еstе реrmis, dе rеgulă, utilizatorilor înrеgistrați carе au drерt dе accеs.

World Widе Wеb (www) еstе o comрonеntă a Intеrnеt-ului numită mai simрlu Wеb carе реrmitе utilizatorilor să folosеască o idее dеmodată – cеa a notеlor dе subsol – într-un mod cu totul nou. Ϲând un autor al unui articol dе rеvistă sau al unеi cărți introducе o notă dе subsol, cititorul еxaminеază subsolul рaginii și рrobabil еstе îndrumat sрrе o altă рagină sau sрrе altă cartе. Wеb-ul рoatе facе în еsеnță acеlași lucru, folosind o tеһnică cе va sublinia sau еvidеnția un cuvânt, o еxрrеsiе sau o imaginе din documеnt. Ϲuvântul sau еxрrеsia еvidеnțiată arată utilizatorului că еxistă un alt documеnt asociat рrimului. Аcеst documеnt рoatе fi accеsat și afișat imеdiat ре еcran. Documеntul dе acеst tiр рoartă numеlе dе һуреrtеxt. Dе asеmеnеa Wеb-ul facе рosibilă și stocarеa și rеgăsirеa sau rеdarеa fotografiilor, a imaginilor fixе și a cеlor animatе și a sеcvеnțеlor vidеo și audio. Utilizând un astfеl dе instrumеnt cliеnții рot să vadă raрid și ușor informațiilе și imaginilе graficе stocatе, рrobabil, ре calculatoarе aflatе la mii dе km distanță. Utilizarеa unui browsеr Wеb sеamănă foartе mult cu o călătoriе adеvărată, numai că acеasta sе facе mult mai ușor. Аcеst tiр dе călătoriе рoartă numеlе dе “navigarе” ре Intеrnеt. Sociеtățilе comеrcialе și altе organizații au încерut să folosеască Wеb-ul ca mijloc dе рublicitatе реntru рrodusеlе sau реntru sеrviciilе lor. Εi crееază o рagină Wеb, un fеl dе vitrină еlеctronică. Odată cе adrеsa рaginii Wеb еstе cunoscută, рosibilii cliеnți рot afla informații dеsрrе firma rеsреctivă.

Ϲһat-ul (discuții рrin Intеrnеt) еstе sеrviciul carе реrmitе unui gruр dе реrsoanе să-și transmită mеsajе într-un timр foartе scurt. Dеși еstе utilizat dе difеritе catеgorii dе vârstă, еl еstе foartе рoрular în rândul tinеrilor. Odată conеctat, utilizatorul еstе рus în lеgătură cu o mulțimе dе alți utilizatori din toată lumеa. Аșa-numitеlе sрații dе discuții реrmit gruрarеa acеstora ре anumitе tеmе cum ar fi sciеncе-fiction, film sau sрort. Toatе mеsajеlе tastatе într-un astfеl dе sрațiu aрar aрroaре simultan ре еcranеlе calculatoarеlor tuturor рarticiрanților la discuții. Аcеstе sрații sunt activе în gеnеral 24 dе orе ре zi.

Cеi carе au accеs la Intеrnеt la locul dе muncă sunt mult mai binе informați, mai рroductivi, însă din cauza abundеnțеi dе datе dе рrocеsat, numărul orеlor dе lucru еstе în crеștеrе, рroрorțional cu acumularеa obosеlii și strеsului.

Intеrnеtul ofеră o colеcțiе dе datе carе sе îmbogățеștе într-un ritm raрid, colеcțiе cе cuрrindе subiеctе dе la mеdicină la știință și la tеһnologiе. Εl рrеzintă un matеrial comрlеt din domеniul artеlor, рrеcum și matеrialе dе cеrcеtarе реntru studеnți și matеrialе rеfеritoarе la rеcrееrе, la divеrtismеnt, la sрort și cһiar рosibilități dе găsirе a unui loc dе muncă. Ρrin Intеrnеt рutеm avеa accеs la almanaһuri, la dicționarе, la еncicloреdii și la һărți.

În zilele noastre cea mai mare parte a informației, de care avem nevoie atât în viața de zi cu zi cât și în mediile profesionale și de studii, se găsește pe internet. Fie că este vorba despre ultimele știri, ultimele activități ale prietenilor și familiei, cărți, achiziționarea diverselor produse disponibile în magazinele virtuale sau chiar e-banking, folosim această minunată unealtă aparent bună la toate, internetul. Însă, ceea ce majoritatea utilizatorilor nu știu despre internet este că, pe cât este de atractiv pe atât este de vulnerabil în fața atacurilor cibernetice.

Securitatea este un motiv de îngrijorare pentru dezvoltarea oricărui tip de aplicație. Cu toate acestea, aplicațiile web dezvăluie anumite caracteristici care trebuie luate în considerare la proiectarea funcționalităților de securitate și care solicită mai multe tehnici de securitate, comparativ cu alte tipuri de aplicații. De exemplu, spre deosebire de programele care sunt instalate pe o singură mașină gazdă, aplicațiile web sunt accesibile publicului, pe Internet, pentru a ajunge la un numar mare de potențiali utilizatori.

Calculatorul clientului și documentele stocate în sistemul de fișiere trebuie să fie protejate împotriva accesului neautorizat de către părți terțe, posibil rău intenționate. Pentru client, datele personale, cum ar fi informațiile de contact sau numerele cardurilor de credit sunt deosebit de importante și trebuie să fie păstrate private.

Securizarea serverului și a datelor stocate pe el. Trebuie să se asigure disponibilitatea serviciului, prin eliminarea atacurilor de tip DoS (denial-of-service). Mai mult decât atât, părțile neautorizate trebuie să fie împiedicate în obținerea accesului la informațiile personale ale clienților, angajaților si la alte resurse critice ale afacerii (de exemplu, bazele de date locale).

Fig. 2.1 Securitatea. b#%l!^+a?

Vulnerabilitatea este o slăbiciune a unui sistem software sau hardware ce permite utilizatorilor neautorizați să aibă acces asupra sa.

Care sunt cauzele existenței acestor vulnerabilități?

Acestea pot fi multiple. Dintre ele doresc să subliniez urmatoarele:

erori existente în programe (bug-uri): fie introduse neintenționat, fie cunoscute dar ignorate

configurarea necorespunzătoare a programelor, serverelor, rețelelor

lipsa cunoștințelor despre problemele de securtitate

În ultіmіі ɑnі, ɑu fοst prοpuse сâtevɑ ɑbοrdărі pentru dezvοltɑreɑ sіstemelοr Web. Асeste metοde οferă elemente de mοdelɑre speсіfісe pentru ɑnɑlіză șі prοіeсtɑre, multe dіntre ele defіnesс ο nοtɑțіe prοprіe utіlіzɑtă pentru reprezentɑreɑ grɑfісă ɑ elementelοr.

Ϲâtevɑ dіntre metοdοlοgііle Web eхіstente:

ΝDТ – Νɑvіgɑtіοnɑl Develοpment Тeсhnіques;

ΟΟHDM – Οbjeсt Οrіented Hγpermedі Desіgn Methοd;

UWE – UML – bɑsed Web Engіneerіng.

Metοdοlοgііle de prοіeсtɑre ɑ ɑplісɑțііlοr Web dіspοnіbіle în lіterɑturɑ de speсіɑlіtɑte șі сɑre vοr fі prezentɑte pe sсurt în сοntіnuɑre, pοt fі сlɑsіfісɑte сοnfοrm părerіі luі Dіstɑnte et ɑl. (2007) după сum pun ɑссent pe:

"сe" se сere să fɑсă ɑplісɑțіɑ (prοіeсtɑre сοnсeptuɑlă în dοmenіul prοblemeі);

UWА – Ubіquіtοus Web Аpplісɑtіοn, ΟΟHDM;

ΟΟWS – Οbjeсt-Οrіented Web Sοlutіοn;

ΟΟ-H – Οbjeсt-Οrіented Hγpermedіɑ Methοd.

"сum" pοɑte sɑtіsfɑсe ɑplісɑțіɑ сerіnțele șі сum pοɑte іmplementɑ сeeɑ "сe" se сere să fɑсă ɑplісɑțіɑ (prοіeсtɑreɑ lοgісă în dοmenіul sοluțііlοr).

UWE – bɑsed Web Engіneerіng;

WebML – Web Mοdelіng Lɑnguɑge pοt fі сοnsіderɑte сɑ fііnd metοdοlοgіі hіbrіde, deοɑreсe ɑсοperă ɑtât prοіeсtɑreɑ сοnсeptuɑlă сât șі prοіeсtɑreɑ lοgісă.

DNS – Sistemul numelor de domenii

În momentul în care la rețea au fost conectate mii de stații de lucru, au început să apară printre altele, conflictele de nume de sisteme gazdă ceea ce a condus la sistemul de administrare centralizat. De aici a fost necesară introducerea sistemului numelor de domenii numit DNS – Domain Name System.

Esența DNS-ului constă dintr-o schemă ierarhică de nume de domenii și a unui sistem de baze de date distribuite pentru implementarea acestei scheme de nume. În principal este utilizat pentru a pune în corespondență numele sistemelor gazdă și adresele destinațiilor de e-mail cu adresele IP, dar poate fi utilizat și pentru alte scopuri. [19]

DNS – Domain Name System este un protocol care traduce adresele Internet literale în adrese Internet numerice, adrese utilizate de o mașină pentru a găsi o altă mașină receptor.

Caracteristicile sistemului de nume DNS

folosește o structură ierarhizată;

deleagă autoritatea pentru nume;

baza de date cu numele și adresele IP este distribuită.

Baza de date DNS se numește distribuită deoarece nu există un singur server care să aibă toată informația necesară traducerii oricărui domeniu într-o adresă IP. Fiecare server are o bază de date cu propriile domenii, la care au acces toate sistemele de pe Internet. Fiecare server DNS are un server DNS superior cu care face periodic schimb de informație. [20]

Sistemul de nume DNS are o organizare ierarhică, sub formă de arbore prezentată în figura 2.2. Acesta are o rădăcină unică (root) care are subdomenii. Fiecare nod al arborelui reprezintă un nume de domeniu sau subdomeniu.

Fig. 2.2 O porțiune a spațiului numelor de domenii din Internet. b#%l!^+a?

Componentele sistemului de nume DNS

Servere DNS – Un server DNS este o stație pe care rulează un program de server DNS. Serverele DNS stochează informații despre o porțiune din structura ierarhică a spațiului de nume și rezolvă interogări de rezoluție de nume pentru clienții DNS. Când sunt interogate, serverele DNS răspund cu informația cerută dacă aceasta este disponibilă sau generează o referință către un alt server DNS care poate rezolva interogarea. [21, 22]

Un client poate cere o transformare a numelor în două moduri:

cu rezolvare recursivă – serverul contactează la rândul lui un alt server de nume, de obicei de pe un nivel superior din arborele serverelor de nume. Acesta la rândul lui, va examina cererea și, dacă nu poate face transformarea contactează un alt server. Procesul continuă până se contactează un server care poate face transformarea;

cu rezolvare iterativă – serverul comunică clientului ce server să contacteze mai departe. Clientul adresează o cerere acestui server și tot așa mai departe până când cererea ajunge la un server care face transformarea. Când un server recepționează o cerere cu rezolvare iterativă și nu poate traduce numele de domeniu, acesta transmite clientului ce server să contacteze mai departe.

Zone DNS – O zonă DNS este o secțiune continuă din cadrul spațiului de nume. Înregistrările pentru o astfel de zonă sunt memorate și gestionate la un loc, chiar dacă domeniul este împărțit în subdomenii. Zona poate fi de două feluri:

primară – secțiunea în care se pot face actualizări;

secundarã – copia zonei primare.

Resolvere DNS – Resolver-ul DNS este un program care extrage informațiile din severele de nume, ca răspuns la cererile unor clienți.

Înregistrări de resurse (RR – resource records) – Baza de date DNS conține înregistrări de resurse. Aceste înregistrări provin din mapările între nume și obiecte din rețea.

Desfășurarea procesului de rezoluție a numelor DNS [21, 22]

Resolver-ul de nume primește de la o aplicație client TCP/IP un nume;

El formulează o interogare primului server de nume din lista serverelor;

Serverul de nume (DNS) determină dacă este autorizat pentru domeniul respectiv (există configurată o zonă DNS care conține numele respectiv);

Dacã este autorizat, transmite rãspunsul clientului;

Dacã nu, transmite o interogare altui server de nume pentru un rãspuns autorizat;

Obține răspunsul autorizat și transmite clientului un răspuns neautorizat și stochează răspunsul local pentru a răspunde la alte cereri pentru același nume.

Resolver-ul de nume transmite răspunsul aplicației utilizator și îl păstrează într-un cache pentru o anumită perioadă;

Dacă resolver-ul de nume nu primește un răspuns într-un anumit timp, transmite cererea următorului server de nume din listă. Când lista este epuizată, se generează o eroare.

Numele de domenii pot fi absolute sau relative. Un nume absolut de domeniu se termină cu un punct (de exemplu, eng.sun.com.), în timp ce unul relativ nu. Numele relative trebuie interpretate în context pentru a determina înțelesul adevărat. în ambele cazuri, un nume de domeniu se referă la un anumit nod din arbore și la toate nodurile de sub el.

Numele de domenii nu fac distincție între litere mici și litere mari, astfel edu sau EDU înseamnă același lucru. Componentele numelor pot avea o lungime de cel mult 64 caractere, iar întreaga cale de nume nu trebuie să depășească 255 de caractere.

Pentru a crea un nou domeniu, se cere permisiunea domeniului în care va fi inclus. Odată ce un nou domeniu a fost creat și înregistrat, el poate crea subdomenii, cum ar fi cs.unsd.edu, fără a cere permisiunea de la cineva din partea superioară a arborelui.

Atribuirea de nume respectă granițele organizaționale, nu pe cele ale rețelelor fizice. De exemplu, dacă departamentele de știința calculatoarelor și de inginerie electrică sunt localizate în aceeași clădire și folosesc aceeași rețea locală, ele pot avea totuși domenii distincte. Similar, dacă departamentul de știința calculatoarelor este împărțit în două clădiri (Babbage Hali și Turing Hali), toate sistemele gazdă din ambele clădiri aparțin aceluiași domeniu.

NOȚIUNI ȘI TIPURI DE BAZE DE DATE.

Analizând definițiile date în diferitele surse ale literaturii de specialitate putem sintetiza și defini baza de date ca un sistem informatizat de gestiune a datelor ale cărui componente sunt reprezentate de datele conținute și structurate, componenta hardware a bazei de date, componenta software a bazei de date, utilizatorii atât intermediari cât și cei finali precum și procedurile de utilizare specifice [9], [11].

Descrierea conținutului conceptual al bazelor de date are în vedere, uzual, două caracteristici ale acestora:

Dimensiunea bazei de date;

Natura bazei de date – BD sunt clasificate în:baze de date interne și baze de date externe.

DATE ȘI INFORMAȚII

Datele și informațiile reprezintă componentele primare ale sistemului informațional.

Data – concept definit în TI (tehnologia informației) ca un model de reprezentare a informației într-un format accesibil unui calculator.

Informația – data care îmbogățește nivelul de cunoștințe ale celui care primește informația și îl ajută în luarea deciziilor. Orice informație este o dată în conceptul TI (tehnologiei informației) dar nu orice dată este informație.

ENTITATE, ATRIBUT, VALOARE

Entitatea este reprezentarea unică a unui obiect individual (concret sau abstract) din lumea reală, prin proprietățile sale.

Atributele entităților reprezintă proprietățile entităților.

Un atribut ia anumite valori. De exemplu, o persoană este recunoscută după nume: persoana reprezintă entitatea, numele reprezintă proprietatea entității persoana; valoarea pe care o ia această proprietate pentru un element al entității.

Orice proprietate a unui obiect poate fi exprimată printr-o pereche (atribut, valoare); o entitate poate fi exprimată prin mai multe proprietăți, deci prin mai multe perechi de tipul (atribut, valoare).

De exemplu, o persoană poate fi reprezentată prin mulțimea de perechi: (Nume, Popescu); (Data nașterii, 3 aprilie 1963); (Sex, masculin); (Profesie, inginert); (CNP, 153050590000). În acest caz, se poate afirma: entitatea persoana este definită prin atributele: nume, data nașterii, sex, profesie, CNP (codul numeric personal) [4], [6].

Atributele unei entități se stabilesc în funcție de contextul în care descrierea este necesară. De exemplu, în descrierea entității “împrumutat”, atributele pot fi: nume, prenume, CNP, funcția, studii, unde lucrează, etc.

În contextul conceptelor date – informații, definim entitatea, atributul, valoarea astfel:

Entitatea reprezintă obiectul informației

Atributul este proprietatea entității

Valoarea este măsura proprietății.

Pentru a asigura unicitatea, valorile unuia sau mai multor atribute ale entității trebuie să fie diferite de valorile corespondente ale celorlalte entități. În exemplul de mai sus, utilizarea codului numeric personal (CNP) asigură identificarea unică a unei persoane.

Entitățile mai sunt numite și entități date, obiecte date, apariții de date sau apariții.

Aceste reprezentări ale entităților devin tabele. Tabela este definită ca un produs cartezian dintre mai multe domenii, caracterizată prin un nume având date despre un anumit subiect.

De exemplu, un tabel în care este descrisă entitatea împrumutat, cu atributele: nume, studii, funcția, etc, conține rânduri sau înregistrări pentru fiecare împrumutat în parte.

O înregistrare este compusă din câmpuri care sunt constituite din atributele necesare pentru entitatea descrisă.

Noțiunea de atribut, caracteristică a unei entități, este denumită în terminologia bazelor de date câmp. Atributul definește o latură a entității (relației) și ia valori într-un domeniu asociat.

Fiecare atribut este caracterizat prin valorile pe care le ia și contribuie la identificarea entității al cărei parte este și la deosebirea ei de celelalte entități din aceeași clasă.

Valoarea atributului este cea mai mică unitate de date dintr-o entitate. Valorile atributelor nu pot fi decât cele cuprinse în domeniul atributului. Alte denumiri ale valorii atributului sunt valoarea celulei și valoarea datelor.

Figure 2.1 Exemplificare atribut, entitate și valoare.

CONCEPTUL „BAZĂ DE DATE”

Bazele de date au apărut din necesitatea de a avea un acces rapid și ușor la un volum din ce în ce mai mare de date.

Conceptul bază de date poate fi definit ca fiind una sau mai multe colecții de date aflate în interdependență, împreună cu descrierea datelor și a relațiilor dintre ele.

O bază de date reprezintă un ansamblu de date integrat, anume structurat și dotat cu o descriere a acestei structuri. Descrierea poartă numele de dicționar de date și realizează o relație între datele propriu-zise și programe.

Baza de date reprezintă mai mult decât o colecție de fișiere: ea include și dicționarul de date și o descriere a relațiilor dintre înregistrări (fișiere intercorelate). Descrierea este utilizată pe întreaga durată a prelucrării informațiilor.

Un fișier al unei baze de date este alcătuit dintr-un ansamblu de înregistrări fizice omogene sub aspectul conținutului și prelucrării.

Înregistrarea fizică este unitatea de transfer dintre memoria internă și cea externă a calculatorului și este formată din mai multe înregistrări logice.

Înregistrare logică este unitatea de prelucrare privită din punctul de vedere al programului utilizator și este alcătuită din mai multe câmpuri.

O bază de date reprezintă o colecție de date care sunt achiziționate cu un anumit scop și într-o structură specifică și trebuie să îndeplinească următoarele condiții:

să asigure o independență sporită a datelor față de programe;

să asigure informațiile necesare și suficiente scopului propus;

să se asigure o redundanță minimă (informații care nu se repetă);

să permită accesul rapid la informațiile stocate în baza de date.

Arhitectura bazelor de date se referă la componentele acestora și cuprinde:

baza de date propriu-zisă în care se memorează datele;

sistemul de gestiune al bazei de date care realizează gestiunea și prelucrarea complexă a datelor.

RELAȚIILE ÎNTRE TABELELE UNEI BAZE DE DATE

O bază de date este formată din mai multe tabele cu legături între ele.

Stabilirea relațiilor între tabele are în vedere îndeplinirea condițiilor pe care o bază de date trebuie să le îndeplinească în vederea prelucrării datelor din mai multe tabele.

În proiectarea unei baze de date este importantă stabilirea obiectelor reprezentate în baza de date și proprietățile care vor fi incluse; această operație este denumită modelarea datelor.

Scopul unui model de date este de a crea o reprezentare logică a structurii de date utilizată la crearea bazei de date. Realizarea unui model de date presupune:

determinarea structurii modelului;

definirea obiectelor (entităților) și a proprietăților asociate – atribute

stabilirea relațiilor între obiecte; se materializează printr-o legătură între o realizare a înregistrării dintr-un tabel numit părinte și una sau mai multe realizări ale înregistrării unui alt tabel numit fiu. Legătura între obiecte (entități) poartă numele de relație sau asociere. Între tabelele unei baze de date sunt trei tipuri de relații [12]:

unu la unu (one to one) – unei întregistrări dintr-un tabel îi corespunde prin relația stabilită o singură înregistrare în tabelul asociat. De multe ori acest tip de relație este privit și ca o împărțire a unui tabel în două tabele asociate din rațiuni de securitate (drepturi de acces) diferit pe anumite câmpuri.

unu la mai mulți (one to many) – unei înregistrări dintr-un tabel (părinte) i se pot asocia mai multe înregistrări din tabelul asociat (fiu); înregistrarea din tabelul fiu se asociază cu o singură înregistrare din tabelul părinte. De exemplu, într-o organizație, un departament are mai mulți angajați, un angajat este repartizat unui singur departament, este relație de tip 1:n, structură de tip arborescent sau unei înregistrări din tabelul clienților i se pot asocia multe înregistrări din tabelul conturilor, iar un cont aparține doar unui client.

mulți la mulți (many to many) – unei înregistrări dintr-un tabel părinte i se pot asocia mai multe înregistrări din tabelul cu care se află în relație, tabelul fiu.

stabilirea operatorilor care acționează asupra structurii de date; pot fi operatori de citire, memorare, modificare, joncțiune etc.

BAZE DE DATE RELAȚIONALE

O bază de date relațională are la bază modelul relațional, adică este alcătuită din unul sau mai multe tabele organizate ierarhic, între care s-au stabilit anumite relații. Relațiile între două tabele sunt unidirecționale, astfel că o tabelă devine principală, iar cealaltă devine subordonată.

Pentru desemnarea unei structuri relaționale de tabele se va utiliza noțiunea de bază de date relațională. Noțiuni de bază în baze de date relaționale [12]:

Cheia primară este constituită dintr-un atribut (coloană din tabel) ale cărui valori identifică în mod unic un rând (o înregistrare) dintr-o tabelă de bază. Pentru orice valoare a cheii primare corespunde un rând și numai unul în tabel. Cheia compusă (concatenată) se creează atunci când cheia primară este compusă din mai multe câmpuri care asigură unicitatea; de exemplu, numărul și data unei facturi.

Cheia candidată este o coloană (un atribut) care îndeplinește condițiile cerute pentru a deveni cheie primară (CNP din tabelul cititorilor cu cheia primară numărul din registrul cititorilor).

Cheia externă este o coloană ale cărei valori corespund celor conținute de cheia principală sau de porțiunea cea mai din stânga a unei chei compuse dintr-o tabelă asociată. O cheie externă poate fi constituită dintr-o coloană sau un grup de coloane.

Tabele specifice bazelor de date relaționale:

Tabela de bază (principală) este o tabelă care conține una sau mai multe coloane ce conțin proprietățile unui obiect și o coloană sau grup de coloane, numită cheie primară, care identifică în mod unic obiectul entitate date. O bază de date relațională poate avea una sau mai multe tabele principale.

Tabela de relații (relationships) este o tabelă utilizată pentru a stabili relațiile între tabela (sau tabelele) de bază și tabele secundare. Fiecare câmp cheie din tabela de relații trebuie să fie o cheie externă asociată unei chei principale din tabela de bază.

FAMILIARIZARE CU BAZELE DE DATE MySQL

Bazele de date sunt de fapt, colecții de date toate aranjate în forme, asupra cărora se pot face diferite operații precum:

creare de bază de date (BD);

conectare la baza de date;

înserare de date în baza de date;

ștergere de date din baza de date;

adaugare și/sau modificare de date;

căutare după anumite criterii în baza de date;

generare și listare de rapoarte, etc.

O bază de date este formată din una sau mai multe tabele, între care se pot stabili relații, acest lucru oferind bazei de date proprietatea relațională.

Sistemul de gestiune a bazelor de date (SGBD) MySQL este un sistem des folosit împreună cu limbajul de programare PHP care va fi prezentat în capitolul următor, cu ajutorul cărora se pot construi aplicații în orice alt limbaj major.

Există multe scheme API disponibile pentru MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, precum: C, C++, C#, Java, Perl, PHP, Python, etc., fiecare dintre acestea folosind un tip specific API.

O interfață de tip ODBC denumită MyODBC permite și altor limbaje de programare ce folosesc această interfață, să interacționeze cu bazele de date MySQL (ex. ASP sau Visual Basic). [12]

Una dintre aplicațiile prin care se poate administra sistemul MySQL este aplicația PHPMyAdmin, cel mai important mod de administrare fiind însă cel dat de PHP prin utilizarea formularelor.

COMENZI UZUALE ȘI TIPURI DE DATE UTILIZATE ÎN MySQL

Printre comenzile uzuale utilizate în SGBD MySQL cele mai importante sunt:

CREATE – crează o bază de date și/sau un tabel

DROP – șterge o bază de date și/sau un tabel

INSERT – adaugă înregistrări(linii) într-un tabel

DELETE – șterge înregistrări(linii) într-un tabel

UPDATE – modifică înregistrările dintr-un tabel

SELECT – selectează înregistrările dintr-un tabel

ALTER – modifică proiectul unui tabel după ce acesta a fost creat cu instrucțiunea CREATE TABLE

Printre tipurile de date uzuale utilizate în SGBD MySQL cele mai importante sunt:

șiruri de caractere

Char – char[(n)] – secțiune cu lungime fixă de max. 255 caracter

Varchar – varchar[(n)] – secțiune variabilă de max 255 caractere

Text – text[(n)] – maxim 65535 caractere

numerice

Int – int[(n)] – număr întreg

float – număr real mic

double – număr real mare

decimal(n,d) – numărul este stocat sub formă de șir de caractere. Parametrul n reprezintă numărul de cifre nenule aflate înaintea virgulei (cu tot cu semnul ’–’ pentru numerele negative, dacă este cazul) iar d reprezintă numărul de zecimale

dată și oră

year – anul calendaristic

date – ’yyyy-mm-dd’ – data calendaristică

time – ’hh:mm:ss’ – ora

datetime – ’yyyy-mm-dd hh:mm:ss’ – data calendaristică și ora

OPERATORI UTILIZAȚI ÎN MySQL

Operatori aritmetici:

acționează asupra tipurilor numerice și furnizează o valoare de tip numeric:

+ – adunare;

– – scădere;

* – înmulțire;

/ – împărțire cu zecimale;

div – împărțire cu zecimale;

mod și % – împărțire cu zecimale;

– și + – operatorii unari plus și minus;

Operatori de comparare (sau relaționali):

permit compararea a două valori numerice sau a două șiruri de caractere rezultatul fiind 1 pentru adevărat și 0 pentru fals.

< – mai mic (2<3 are ca rezultat valoarea 1);

<= – mai mic sau egal (3<=3 are ca rezultat valoarea 1);

– mai mare (2>3 are ca rezultat valoarea 0);

>= – mai mare sau egal (2>=3 are ca rezultat valoarea 0);

= – egalitate (2=3 are ca rezultat valoarea 0);

!= – diferit (2<>3 sau 2!=3 are ca rezultat valoarea 1);

c) Operatori logici:

în MySQL se consideră că valoarea logică 0 joacă rolul lui false și orice valoare diferită de 0 joacă rolul lui true.

|| sau or – sau-ul logic (este 0 doar când ambii operanzi sunt 0, în rest este 1);

&& sau and – și-ul logic (este 1 doar când ambii operanzi sunt nenuli, în rest este 0);

not – negație (negația lui 0 este 1, iar negația lui 1 este 0);

xor – sau-ul exclusiv (este 0 când ambii operanzi sunt fie nuli, fie nenuli, și este 1 în rest);

d) Operatori logici pe biți:

se aplică tuturor tipurilor întregi și acționează asupra tuturor biților aflați pe poziții corespondente.

| – sau-ul pe biți;

& – și-ul pe biți;

^ – sau-ul exclusiv pe biți;

~ – negația pe biți;

e) Operatori de deplasare pe biți:

se aplică tuturor tipurilor întregi, deplasând biții reprezentării binare:

<< – deplasare stânga a<<b deplasează cu b poziții la stânga biții lui a;

>> – deplasare dreapta a>>b deplasează cu b poziții la dreapta biții lui a;

f) Operatori specifici pentru MySQL:

is null, is not null – testează dacă o valoare este sau nu null;

in, not in – testează dacă o valoare aparține sau nu unei mulțimi (1 in (1,2,3,4) are valaorea 1 și 5 in (1,2,3,4) are valoarea 0;

like, not like – testează dacă un șir de caractere are o anumită formă:

dacă este prefixat respectiv postfixat sau nu de un anumit subșir,

dacă acesta conține un anumit subșir.

between min and max – testează dacă o valoare se găsește în intervalul închis cu capetele min și max. (1 between 0 and 4 – are valoarea 1);

case .. when .. then .. else .. – are două forme sub care se poate aplica:

forma 1: case v

when v1 then val1

. . .

when vn then valn

else valn+1

end

forma 2: case

when cond1 then val1

. . .

when condn then valn

else valn+1

end.

CREAREA ȘI CONECTAREA LA O BAZĂ DE DATE ÎN MySQL

Această operație poate fi executată doar de utilizatori cu drepturi speciale.

Comanda pentru crearea unei baze de date este:

create database nume_bază_date;

Pentru a lucra cu o anumită bază de date, se va da comanda:

use nume_bază_date;

Ștergerea unei baze de date:

drop database nume_bază_date;

Vizualizarea bazelor de date existente:

show databases;

Orice comandă scrisă în linia de comandă trebuie să fie terminată cu „;”

Pentru conectarea la o baza de date vom folosi scriptul de mai jos:

<?php

$host="localhost"; //host-ul

$user="root"; //userul

$password="pass"; //parola

$database="t1"; //baza de date

$conexiune=mysql_connect($host,$user,$password)

or die ("Nu ma pot conecta la baza de date");

$bazadate=mysql_select_db($database,$conexiune)

or die ("Nu gasesc baza de date");

?>

mysql_connect() – funcția prin care se realizează conectarea la serverul MySQL

mysql_connect($conexiune) – în funcție de rezultatul conectării, va avea valoarea TRUE sau FALSE

mysql_select_db – funcția care stabilește la ce bază de date se va realiza conectarea

mysql_close($conexiune) – funcția care închide baza de date

TABELE

Într-o tabelă coloanele sunt identificabile prin nume, iar rândurile, prin valorile pe care le memorează. O tabelă are un număr specificat de coloane, însă are un număr nespecificat de rânduri. Uneori, când ne referim la un rând, folosim și termenul de înregistrare, iar atunci când ne referim la data din rând, situată într-o anumită coloană, folosim și termenul de câmp. (noțiunile au fost prezentate în capitolele anterioare).

Instrucțiunea prin care se poate crea o tabelă:

create table nume_tabelă

( nume_coloană1 tip_date [specificatori],

nume_coloană2 tip_date [specificatori],

…

nume_coloanăn tip_date [specificatori]

);

ce este trecut între paranteze drepte reprezintă clauze, atribute sau bucăți de instrucțiune care, din punct de vedere sintactic pot să nu apară.

specificatorii se referă la cheia primară, valori distincte, valori implicite, autoincrementare.

Instrucțiunea prin care se adaugă un rând într-o tabelă

insert into nume_tabelă values(valoare1,valoare2,…,valoaren);

sau

insert into nume_tabelă(nume_coloană1,nume_coloană2,…,nume_coloanăk)

values(valoare1,valoare2,…,valoarek);

Instrucțiunea prin care se afișează întreaga tabelă:

select * from nume_tabelă;

Instrucțiunea prin care se afișează doar anumite coloane ale tabelei:

select nume_coloana1,…,nume_coloanak from tabelă;

Instrucțiunea prin care se listează numelor tuturor tabelelor din baza de date:

show tables [from nume_bază_date];

Instrucțiunea prin care se afișează o descriere detaliată a unei tabele:

describe nume_tabelă;

show columns from nume_tabelă;

LIMBAJ DE PROGRAMARE PHP

Deseori în realizarea site-urilor web dinamice, pe lângă limbajul de marcare HTML cu ajutorul căruia sunt create paginile statice, se utilizează și limbajul de programare PHP prin care pot fi create și paginile dinamice, pagini în care apare elementul de interactivitate, de exemplu posibilitatea preluării datelor din formulare realizate în PHP, citirea, prelucrarea și afișarea. Totodată se poate face interacțiunea cu o bază de date creată pe un server.

Numele PHP provine din limba engleză și este un acronim recursiv: Php: Hypertext Preprocessor. Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în principal înglobat în codul HTML.

Este unul din cele mai importante limbaje de programare web open-source și server-side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare. Conform statisticilor este instalat pe 20 de milioane de situri web și pe 1 milion de servere web.

Astfel folosind PHP putem genera și manipula coduri HTML dar putem trimite headere HTTP pentru autentificare, putem seta cookie-uri sau redirecționa utilizatorii după diverse criterii dorite.

Pentru a putea lucra cu PHP trebuie în primul rând să avem acces la un server pe care rulează PHP (acesta poate fi server separat sau server virtual creat pe calculatorul personal).

Datorită necesității testărilor aplicațiilor făcute, înaintea publicării în mediul online, au fost necesare soluții de rularea fișierelor PHP și local (pe calculatorul personal). Pentru aceasta trebuiesc îndeplinite două condiții esențiale:

instalalarea pe PC, pe lângă limbajul PHP și a unui server de web;

realizarea legăturii dintre cele două.

Unul dintre pachetele oferite gratuit (open-source), disponibile pe Internet, este XAMPP. Numele acestui pachet, foarte simplu de instalat, este un acronim pentru:

XAMPP:

X de la "cross", care înseamnă cross-platform

A de la Apache HTTP Server

M de la MySQL

P de la PHP

P de la Perl

Se vede că acest pachet de programe conține mai multe aplicații printre care, ce ne interesează sunt:

serverul Apache pentru http;

serverul de MySQL;

suport pentru limbajul PHP.

Pentru instalarea și rularea pachetului XAMPP, cerințele tehnice sunt minimale. Este suficient un Windows 2000, XP sau Vista și pachetul XAMPP va rula fără probleme.

SCURT ISTORIC AL VERSIUNILOR PHP

1995 – Personal Home Page Tools – Rasmus Lerdorf

1995 – PHP/FI 2.0

1998 – PHP 3 – începe să fie dezvoltat de Zend

Zeev Suraski & Andi Gutmans

2000 – PHP 4 – motor de procesare Zend

(2002-2003) – PHP 4.3 – motor de procesare Zend 2.0

2004 – PHP 5 – multe facilități inspirate din Java

PHP 6 (în dezvoltare)

Spre deosebire de documentele HTML care pot fi deschise de orice utilizator folosind un simplu navigator web , un document PHP necesită instalarea unui interpretor PHP pe serverul HTTP. Server de aplicații Web oferă un limbaj de programare de tip script, interpretat poate fi inclus direct și în cadrul documentelor HTML.

FUNCȚIONAREA PROCESORULUI PHP

După cum a mai fost menționat, pentru a fi recunoscut de serverul HTTP un fișier PHP trebuie să aibă extensia .php.

Figure 2.2 Schema bloc. [1]

La accesarea documentului de un utilizator interpretorul PHP parcurge codul sursă al documentului până ajunge la tag-ul care marchează începutul codului PHP ( <?php ). Din acel moment codul este interpretat ca un cod PHP până la închiderea tag-ului ( ?>)

În codurile PHP putem creea variabile pe care le putem apela de câte ori dorim. Pentru a creea o variabilă începem cu simbolul “ $ ” urmat de numele acesteia care trebuie să înceapă cu o literă sau underscore. Utilizarea variabilelor este limitată doar de scopul în care dorim să folosim funcția.

$exemplu=” Acesta este un exemplu “;

PHP-ul este un limbaj de programare foarte permisiv nefiind nevoiți să declarăm ce tip este variabilă când o creem, de asemenea putem ajunge la același rezultat prin mai multe metode depinzând de module de gândire a fiecarui programator.

La creearea unui cod PHP ghilimelele se folosesc în perechi "…" sau '…', folosirea lor "…' sau '…" constituie o eroare.

Limbajul PHP folosește structuri de control aceastea permițând definirea unei condiții care va declașa operațiunea în funcție de condițiile puse.

Condițiile sunt încadrate în paranteze rotunde iar instrucțiunea care se execută în funcție de condițiile îndeplinite este încadrată de acolade. Dintre cele mai importante condiții amintim: if , else, elseif , while , for, include, break, require, ș.a.

Instrucțiunea condițională if este cea mai folosită, else este altă instrucțiune condițională care indică ce se execută în cazul în care condiția menționată în instrucțiunea if nu este îndeplinită. Elseif este o combinație între if și else. În cazul în care condiția if nu este îndeplinită se introduce elseif care definește încă o condiție. Dacă nu este îndeplinită a doua condiție se execută declarația introdusă prin else.

Comanda include și require sunt două comenzi indentice folosite pentru a integra un cod PHP scris în alt fișier în fisierul PHP la care lucram. În principiu aceste comenzi fac același lucru singura diferență este când apare o eroare:

Include va produce doar un avertisment (E_WARNING) și codul va continua să ruleze.

Require va produce o eroare fatală (E_COMPILE_ERROR) și va oprii codul.

Variabilele get și post sunt folosite pentru a aduna informațiile dintr-un formular. Deși în principu au acelasi rezultat exită unele diferențe.

get – informațiile colectate din formular sunt vizibile tuturor în bara de adresă a navigatorului web și limita de informații trimise este de 2000 de caractere.

post – informațiile colectate din formular nu sunt vizibile în bara de adresă a navigatorului web și nu există limită pentru informațiile trimise.

De asemenea PHP-ul poate fi folosit pentru a manipula baze de date ( MySql sau alte tipuri de baze de date ). Astefel putem creea variabile care să includă anumite query-uri sau putem creea form-uri care pot scrie direct în baza de date informațiile introduse.

Creeare unei variabile ce conține un query MySql permite culegerea informațiilor dintr-o bază de date. $q = mysql_query("SELECT * FROM tabel");

Folosirea limbajului PHP ne permite executarea unor operații asupra fisierelor aflate pe server. Putem deschide (fopen), închide (fclose), citii (fread), scrie (fwrite) sau indica dimensiunea unui fișier(filesize).

STRUCTURA UNUI FIȘIER PHP

Codul PHP poate fi scris folosind orice editor de texte, de exemplu editorul Notepad. Lansarea în execuție a programului scris se face utilizând un browser (de exemplu Internet Explorer) în care se va scrie în bara de adrese:

http://localhost/<nume_fisier.php>.

Figure 2.3 Structura unui fișier .php.

Spre deosebire de fișierele .html care pot fi deschise imediat ce au fost create pe discul local direct în browser-ul de Internet, lansarea în execuție a unui cod PHP se realizează după ce fișierele sunt puse în directorul în directorul rădăcină al documentelor web. Un fișier care conține un script PHP trebuie să fie salvat cu extensia .php.

În figura 2.2 este prezentată structura unui fișier .php din care se poate observa asemanarea cu fișierele .html. Diferența între cele două este dată de scriptul PHP, care este inserat între tag-urile colorate în roșu: „<?php” și „?>” (Figura 2.2).

Instrucțiunea „echo” cuprinsă între acestea este o instrucțiune specifică limbajului PHP și are rolul de a scrie în pagina web textul ce este cuprins între ghilimele.

Rezultatul vizualizat în pagina de browser este prezentat în figura 2.3.

Figure 2.4 Vizualizare în browser.

Prin lansarea directă a fișierului care are extensia .php (cu clic pe el), prezent în figura 2.3, conținutul afișat în browser va fi cel prezentat în figura 2.4.

Figure 2.5 Rezultatul instrucțiunii echo din codul php prezentat în figura 4.2.

VARIABILE, CONSTANTE ȘI OPERATORI ÎN PHP

Constantele recunoscute de limbajul PHP sunt asemănătoare cu cele recunoscute de limbajul C:

constante numerice întregi și reale;

constante de tip caracter și șir de caractere

Caracterele speciale sunt aceleași ca și în C: \n, \\, \’, \” și altele.

constante de tip bool: false și true.

Definirea constantelor de către utilizator, se face cu ajutorul funcției define care are următoarea sintaxă:

define(”nume constanta”, valoare);

Variabilele sunt mărimi ce pot lua diferite valori. În PHP numele variabilelor începe cu caracterul ”$” urmat de o literă sau de caracterul ”_”, nicidecum de o cifră.

Spre deosebire de C, variabilele nu se declară la început, ci tipul lor este definit prin valoarea atribuită variabilei inițiale.

O variabilă este definită astfel:

$<variabila>=<valoare>;

Variabile predefinite

$_SERVER['REMOTE_ADDR'] – afișează adresa IP a vizitatorului

$_SERVER['HTTP_USER_AGENT'] – afișează informații despre browserul folosit

$_SERVER['HTTP_REFERER'] – afișează pagina vizitată anterior

$_SERVER['SERVER_NAME'] – afișează numele serverului

$_SERVER['SCRIPT_NAME'] – afișează numele scriptului

Mulți dintre operatorii limbajului PHP sunt cunoscuți din C++. În continuare se va realiza o trecere succintă prin operatorii întâlniți în PHP.

Operatori aritmetici:

acționează asupra tipurilor numerice și furnizează o valoare de tip numeric:

+ – adunare;

– – scădere;

* – înmulțire;

/ – împărțire cu zecimale;

mod și % – împărțire cu zecimale;

Operatori de comparare:

permit compararea a două valori numerice sau a două șiruri de caractere rezultatul fiind TRUE pentru adevărat și FALS pentru fals.

< – mai mic ($a<$b are ca rezultat valoarea TRUE);

<= – mai mic sau egal ($a<=$b are ca rezultat valoarea TRUE);

> – mai mare ($a>$b are ca rezultat valoarea TRUE);

>= – mai mare sau egal ($a>=$b are ca rezultat valoarea TRUE);

= = – egalitate ($a= =$b are ca rezultat valoarea TRUE);

= = = – identic ($a= = =$b are ca rezultat valoarea TRUE);

<> – diferit ($a<>$b are ca rezultat valoarea TRUE);

!= – diferit ($a!=$b are ca rezultat valoarea TRUE);

Operatori logici:

în MySQL se consideră că valoarea logică 0 joacă rolul lui false și orice valoare diferită de 0 joacă rolul lui true.

|| – sau-ul logic ($a||$b are ca rezultat valoarea TRUE);

or – sau-ul logic ($a or $b are ca rezultat valoarea TRUE);

&& sau and – și-ul logic ($a && $b are ca rezultat valoarea TRUE);

not sau ! – negație ($a!$b are ca rezultat valoarea TRUE);

xor – sau-ul exclusiv ($a xor $b are ca rezultat valoarea TRUE);

INSTRUCȚIUNI ÎN PHP

instrucțiunea if: if(expresie) instrucțiune1;

[else instrucțiune2;]

Instrucțiunea while while(expresie) instrucțiune;

Instrucțiunea do…while. do

instrucțiune;

while(expresie);

Instrucțiunea for.

for(expresieinițializare;expresiecontinuare;expresieincrementare) instrucțiune;

LUCRUL CU FIȘIERE ÎN PHP

Prin utilizarea limbajului de programare PHP, se pot executa anumite operații asupra fișierelor aflate pe server cum ar fi:

fopen() = deschide fisierul indicat

fclose() = inchide fisierul

fread() = citeste continutul fisierului

fwrite() = scrie in fisier

filesize() = indica dimensiunea fisierului

PROGRAMAREA GRAFICĂ ÎN PHP

Programarea grafică reprezintă una dintre cele mai spectaculoase componente ale multor limbaje de programare, care constă în crearea și manipularea imaginilor.

Prin utilizarea limbajului de programare PHP se poate lucra cu diferite formate de imagini, incluzând gif, png, jpg, se poate genera o imagine sub forma unui flux de date (făra a o înregistra sub forma unui fișier pe server) direct către browser, etc.

Pentru a face funcțional suportul grafic al limbajului, este necesară utilizarea bibliotecii gd2 care, în cazul pachetului XAMPP, este instalată și activată în mod implicit.

header(string) – are ca efect trimiterea browser-ului informații despre mime-type-ul imaginii create. String-ul poate lua următoarele valori:

“Content-type: image/png” – pentru imaginile de tip png

“Content-type: image/jpeg” – pentru imaginile de tip jpg

“Content-type: image/gif” – pentru imaginile de tip gif

imagecreatetruecolor(lățime, înălțime)- creează o resursă de tip imagine, pe 32 de biți (truecolor) având lățimea, respectiv înălțimea specificată.

imagecolorallocate(resursă_imagine, roșu, verde, albastru)- creează o resursă de tip culoare, asociată imaginii specificată prin resursa din primul parametru.

imagesetthickness(res_imag, thickness) – stabilește grosimea liniilor la thickness pixeli, atunci când se desenează linii, dreptunghiuri, poligoane;

imageline(resursă_imagine,x0,y0,x1,y1,resursă_culoare) – desenează un segment de dreaptă, de culoarea specificată de resursă_culoare

imagedashedline(resursă_imagine,x0,y0,x1,y1,resursă_culoare) – la fel ca imageline, doar că segmentul de dreaptă desenat este punctat.

imageellipse(resursă_imagine,x0,y0,diam_x,diam_y,resursă_culoare) – desenează o elipsă;

imagerectangle(res_imag,x0,y0,x1,y1,res_culoare) – desenează un dreptunghi

imagechar(res_imag,font,x0,y0,caracter,res_culoare) – afișează în imagine caracterul caracter

LIMBAJ DE MARCARE HTML

Când vorbim de tehnologie web, vorbim de tot ce se află "în spatele" aplicațiilor pe care le dezvoltăm și anume:

platforme soft;

limbaje și framework-uri;

concepte de programare;

tehnici de prelucrare a informației.

Așadar, fie că este vorba de:

platformele pe care ne dezvoltăm aplicațiile;

bazele de date;

mediile și uneltele software pe care le utilizăm;

algoritmii, funcțiile și procedurile pe care le gândim;

standardele pe care trebuie să le respectăm pentru dezvoltarea acestora

toate acestea țin de tehnologiile web.

Utilizăm constant:

PHP și MySQL, Flash, Papervision și Actionscript, HTML și CSS, Java și JavaScript;

librării dinamice de genul YUI, mootools sau jquery;

content sharing prin RSS/API;

CMS open-source: WordPress, Joomla;

CMS custom-made: Adkontent, shopping carturi personalizate, sisteme de e-commerce "white label", sisteme de afiliați;

sisteme de e-payment prin card sau prin SMS via web sau prin telefonul mobil, platforme de server Microsoft sau Apache.

Termenul HTML – HyperText Markup Language tradus din engleză ca “Limbajul de marcare a hipertextului”.

Prima versiune HTML a fost realizată de Tim Berners-Ly – colaboratorul Laboratorului European pentru fizica particulelor elementare. Ca orice alt limbaj, HTML a cunoscut o dezvoltare continuă. Astfel, au apărut versiunile 2.0, 3.0, 4.0.

CERINȚE NECESARE ÎN VEDEREA REALIZĂRII DE HTML

experiență de utilizare a calculatorului la nivel de procesor de text precum Notepad, WordPad, Microsoft Word sau altele;

experiență de utilizare a aplicațiilor grafice cum ar fi Adobe PhotoShop, Corel PhotoPaint, etc;

cunoștințe în clasificarea caracterelor digitale, a noțiunilor de codificare binară și cod binar al caracterelor;

cerințe software:

un procesor de text în care se prelucrează sursa documentului;

un program browser în care se realizează controlul rezultatelor programării (Microsoft Internet Explorer, Netscape Communicator, Opera, Crome, etc.).

După acumularea experienței de creare a documentelor electronice se poate trece la un soft specializat pentru programare HTML, cum ar fi, de exemplu, Macromedia Flash.

CREAREA DOCUMENTELOR HTML

Există două principii de creare a documentelor HTML:

Tehnologia închisă. Se utilizează sisteme de tipul WYSIWYG (What You See Is What You Get) – ce vezi este ce primești (Microsoft Front page, Word, Netscape Editor). Utilizatorul nu are acces la sursa documentului. El vede doar rezultatul.

Tehnologia deschisă. Procesoare HTML propriu-zise. Utilizatorul îndeplinește rolul de programator. Crearea documentului este realizată direct prin modelarea sursei și utilizarea instrucțiunilor limbajului.

Documentele HTML sunt fișiere text obișnuite care au extensia *.html. Cel mai simplu document HTML are următoarea structură:

Structura paginilor de tip HTML este formată din două parți principale, head și body, după cum se poate observa în figura 2.1 în și exemplul de mai jos.

Figure 2.6 Structura unui document HTML.

Un exemplu de document HTML cu structură elementară este prezentat mai jos:

<html>

<head>

<title> Exemplul 1 </title>

<H1> Exemplul 1 </H1>

</head>

<body>

<H1> SALUT! </H1>

<P> E primul pas în lumea publicațiilor electronice.

</P>

<P>

<B> Exercitiu </B> Scrieți acest fișier într-un procesor de texte, salvați-l, și deschideți o copie a lui în Internet Explorer.

</P>

</body>

</html>

Figure 2.7 Vizualizarea grafică a codului HTML.

Orice pagină HTML începe cu tag-ul <html> care la rândul său conține alte două tag-uri principale: head și body. O pagină HTML se temină întotdeauna cu tag-ul </html> tag care determină sfârșitul codului HTML și implicit al paginii.

Tag-ul <head> conține tag-ul <title>. Astfel folosind codul <title> Titlul tau </title> în bară de titlu a navigatorului web va apărea ce este între tag-urile title și anume: Titlul tau . Dacă acest tag lipsește, în bară de titlu a navigatorului web va fi afișat numele fișierului HTML.

Tag-ul head mai poate conține următoarele tag-uri:

<style> … </style> – definește stilul în care sunt afișate informațiile din document.

<style> … </style> – utilizat pentru introducerea unor secvențe de program de scriptare în document.

<base> … </base> – definește baza pentru toate linkurile relative din document.

<link> … </link> – definește legătura dintre document și o resursă externă. Tagul este des folosit pentru a lega documentul de un css extern.

<meta> … </meta> – definește informații despre document. Chiar dacă nu sunt afișate ele sunt procesate și sunt deseori folosite pentru a descrie documentul, cuvinte cheie, autor sau alte informații .

Tag-ul <body> … </body> este după cum spune și traducerea cuvântului corpul documentului HTML. Acesta conține toate informațiile ce vor fi afișate de navigatorul web când documentul va fi accesat.

Acest tag poate primii următoare atribute:

background – indică o imagine care dorim să apară pe fundal.

link – definește culoarea link-urilor nevizitate.

<body link="blue">

alink – definește culoarea link-urilor active.

<body alink="red">

vlink – definește culoarea link-urilor vizitate.

<body vlink="green">

background – definește o imagine de fundal pentru document.

<body background="poza.jpg">

bgcolor – definește o culoare de fundal pentru document.

<body bgcolor="#E6E6FA">

text – definește culoarea textului din document.

<body text="green">

În interiorul tag-ului <body> pot fi folosite numeroase alte tag-uri dintre care enumeram cele mai inportante:

Tagul <div> definește o secține intr-un document HTML. Poate fi folosit să grupeze blocuri din document pentru a fi formatate folosind CSS. În exemplu de mai jos vom avea o secțiune în care textul va fi colorat în albastru.

Folosind tagul < font > putem definii ce font folosim, ce culoare are sau ce mărime are acesta.

Principalele atribute:

color – definește culoarea fontului

face – definește fontul folosit

size – definește marimea fontului

Pentru a insera un formular într-un document HTML se foloseste elementul

< form > acest tag folosește atât partea de client cât și partea de server pentru a procesa informațiile.

Poate conține următoarele tag-uri

<input> – definește tipul de infomație care poate fi introdusă.

<textarea> – definește un camp de text cu mai multe randuri.

<button> – definește un buton care poate fi click-uit

<select> – este folosit pentru a creea o listă de tipul drop-down.

<optgroup> – creează grupuri intr-o listă de tipul drop-down.

<fieldset> – este folosit pentru a grupa elementele cu legături dint-un form.

<label> – genereaza o lista de optiuni cu o singură varianta de alegere.

<img> – folosit pentru a insera o imagine în documentul HTML.

Are două atribute abligatorii: src și alt. Alte atribute ce îi pot fi atribuite: align, border, hspace, vspace.

Tagul <input> este atribuit tuturor câmpurilor destinate introducerii datelor într-un formular. Există zece tipuri de câmpuri ce pot fi introduse. Acestea sunt: text, submit, image, password, hidden, checkbox, reset, radio, file și buton.

Dacă dorim ca un text să fie afișat asa cum este scris în codul HTML vom folosi perechea de taguri <pre>…..</pre>.

Putem creeea și liste, aceastea pot fi ordonoate ( <ol> , elementele vor fi numerotate), neordonate ( <ul>, elementele vor avea un bullet ) și definite ( <dl>, care conține o secvență de descrieri, referințe sau indexuri ). Liste pot conține un număr nelimitat de obiecte.

Se pot creea trimiteri către obiecte din document sau către pagini externe folosind tagul <a>.

Listele pot avea diferite atribute dintre care admintim următoarele atribute :

type: definește tipul de bullet folosit

value: stabilește valoarea unui element din listă

Folosirea tagului <frame> ne permite afișarea unei pagini web externe în interiorul documentului nostru.

Tabelele reprezintă în HTML un element foarte important fiind marcate de tagurile <table>….</table>. Ele pot fi folosite pentru formatarea și împarțirea paginii.

Alte tag-uri HTML importante:

<b> / <strong> – creează text bold.

<h1> – <h6> – h1 definește cel mai important titlu iar h6 definește cel mai puțin important titlu.

<hr> – creează o linie orizontală.

<i> – creează text italic.

<p> – definește un paragraf.

<img> – inserează o poză în documentul HTML

INTERFAȚA WEB

TIPURI DE DESIGN

Site-urile web sunt proiectate în concordanță cu necesitățile clientului. Se poate realiza o clasificare a acestora după gradul de dificultate pe care îl prezintă site-ul, după funcționalitățile și designul caracteristic domeniului.

Astfel avem următoarele categorii:

Blog – site creat pentru categoria celor care au diverse pasiuni și pe care doresc să le împărtășească cu toți vizitatorii blogului cu interese comune.

Site de prezentare – caracteristica acestuia este numărul mic de pagini pe care îl are în componență. Acesta reprezintă așa numita “cartea de vizita” a companiei care își prezintă serviciile, produsele, echipa și alte informații reprezentative caracteristice care să ii permită creșterea/dezvoltarea afacerii. La acesta se pot adauga funcționalități precum galeria de imagini, social media, indicarea locației prin harta Google Places.

Magazin on-line – este un site de prezentarea produselor/serviciilor firmei la care se adaugă elementul de vânzare online. Din punctul de vedere al programării este mai complex decăt un site simplu de prezentare firma. Mai sunt numite și site-uri de tip e-commerce. Acestea se realizează la comandă personalizate pe direcția firmei și au în structura lor elementele unui magazin on-line precum: categorii de produse, pagina de produs, cos de cumparaturi, etc. Pentru un succes cât mai mare este indicat ca interfața acestuia să fie prietenoasă cu utilizatorul.

Portal de știri online – acestea sunt site-uri actualizate zilnic care prezintă știrile și evenimentele cotidiene.

Aplicație management – sunt site-uri specializate realizate strict pentru client cu acces limitat și direcționat pe departamentele companiei.

GRAFICA ȘI INTERFEȚELE WEB

Interfața poate avea un design atât pe partea stângă, dreaptă cât și/sau pe zona de centru a paginii iar navigarea cel mai frecvent este întâlnită pe verticală dar poate fi și pe orizontală (caz destul de rar întâlnit). Una dintre caracteristicile importante ale unei interfețe fluide este lățimea variabilă procentual.

Designerul într-o aplicație precum Photoshop, trebuie să ia în calcul și să aibă o privire de ansamblu asupra designului interfeței implementată în final. Dacă dorește să aibă o interfață fluidă atunci elementele vizuale și structura vizuală trebuie gândite astfel încât să permită implementarea propriu-zisă. În principal trebuie avut în vedere cum vor fi transformate în bitmap și tranșate imaginile, astfel încât să arate la fel.

Cateva dintre aspecte importante care trebuie luate în calcul încă din faza de proiectare, sunt:

modul în care se poate lăți interfața,

redimensionarea elementelor precum și a căror elemente trebuie să acționeze această redimensionare,

alegerea imaginilor care trebuie să fie repetitive sau să permită lățirea interfeței

menținerea proporțiilor tuturor elementelor care se vor redimensiona atunci când intervine lățirea excesivă.

HTML și CSS sunt tehnologii web standard client side, care rulează pe calculatorul utilizatorului de Internet. Însă, funcționalități mai mult sau mai puțin avansate sunt implementate folosind tehnologii server side, care rulează pe calculatorul de la distanța de tip server: PHP, ASP, mySQL, etc. Aceste tehnologii permit implementarea celor mai cunoscute funcționalități pe site-uri: schimbarea limbii, căutare, hartă site, conturi, etc. La nivel de interfața se poate folosi de exemplu PHP pentru a implementa funcționalități ce țin de modul de interacțiune cu site-ul: meniuri în cascadă, sugestii pentru termenii de căutare, încărcare a unor secțiuni din site în mod dinamic, etc. O altă tehnologie frecvent utilizată este Adobe Flash pentru interfețe interactive și în special pentru integrarea de video-uri pe web.

PROIECTAREA EFICIENTA A INTERFEȚEI WEB

Recapitulând, interfețele grafice au fost concepute și proiectate în scopul oferirii utilizatorilor unui grad mai mare de confort în obținearea informațiilor căutate și gestionate de pe și pe net. La ora actuală utilizatorii/vizitatorii au așteptări de calitate la nivel înalt, al design-ului unei interfete grafice, incluzând și design-ul unei pagini web.

Având în vedere cele prezentate, proiectarea interfeței web trebuie adaptată tehnologiilor noi apărute în scopul îndeplinirilor tuturor cerințelor vizitatorilor/utilizatorilor care să nu îi forțeze pe aceștia să se conformeze unei interfețe greoaie și să depună efort la obținerea informațiilor căutate.

Ca și dezvoltatori dorim să controlăm orice interacțiune a utilizatorului cu site-ul. Aceasta ne permite un control permanent al site-ului dar utilizatorii nu se vor simți confortabili astfel încât există riscul să îi pierdem. Utilizatorul nu dorește sa se simta controlat, iar aplicatia trebuia sa fie dirijata de evenimente initiate de utilizator in loc de a avea aplicatia ca dictator al urmatoarelor evenimente.

Implementarea unui design responsive asigură adaptarea automată a interfeței site-ului spre afișare și utilizare ergonomică pe telefon sau tabletă.

Dispozitivele mobile au devenit cotidiene pentru succesul online iar site-ul este indicat să poată fi afișat în mod corect pe acestea. O interfață de calitate bine proiectată, trebuie să permită detecția diferitelor dispozitive precum tablete, telefoane sau calculatoare și obligatoriu să se adapteze conform noilor dimensiuni. Designer-ul va trebui să gândească interfața pentru mai multe dimensiuni. [10, 11, 17]

Aceasta metodă a fost discutată prima oară de către Ethan Marcotte în anul 2010, publicație în articolul Responsive Web Design în care spune ca Responsive Web Design nu este doar o nouă simplă metodă de realizarea website-urilor ci un nou mod de gândire.

Prin tehnica Responsive Web Design utilizatorii internetului sunt ajutați prin oferirea unui website adaptabil în funcție de rezoluția dispozitivului folosit pentru vizualizarea acestuia. Aceast lucru se obține prin folosirea de media query-uri de CSS3, imagini flexibile, grid-uri fluide și multe altele.

Responsive Web Design reprezintă cea mai utilizată tehnică din anul 2013 astfel încât au apărut tot mai multe framework-uri. Printre cele mai cunoscute se numără Bootstrap și Skeleton.

Figure 3.8 Exemplu de layout responsive pe un monitor, tabletă și telefon mobil.

În tabelul de mai jos este prezentată o paralelă între un site responsive și unul dedicat.

DEZVOLTAREA APLICAȚIEI

Lucrarea a constat în crearea unui site de prezentare a unei aplicații cu anunțuri.

Siteul se adresează persoanelor care doresc să cumpere diferite produse din diferite categorii: automobile, electrocasnice, etc.

Astfel, utilitatea siteului este de a prezenta detalii specifice ariei prezentate precum și cu comercializarea produselor.

STRUCTURA APLICAȚIEI

Aplicația este formată din 2 părți principale: frontend și backend.

Pe partea de frontend am folosit folsoit html, css, js (angular js).

Pe partea de backend am folosit folsoit php.

Conform celor specificate în tema de proiectare, PHP am folosit pentru a efectua operațiunile de citire, creeare, editare, ștergere a datelor din baza de date. Scripturile de php se află în structura aplicației în folderul web/webap/db.

De exemplu în structura aplicației există un fisier connectDb.php care face conectarea la baza de date.

Prin fisierul items.php am făcut operațiunea de citire a anunțurilorilor din baza de date.

Pe frontend eu le iau cu angular js folosind serviciul http.

Aceasta este o procedură de lucru efiecientă și de actualitate a php -ului cu frontend-ul. Frontend-ul trimite datele la backend și backend face operațiunile, respectiv backend trimite datele la frontend, unde vor fi afișate.

Partea de validare a emailului la autentificare este facută folosind un atribut dat de framework-ul materilize css: class="validate". (http://materializecss.com/forms.html).

La partea de cautare caut în tot json-ul cu anunțuri. Pentru aceasta folosesc angular js pentru a face o căutare cât mai eficientă și rapidă. Tot ce ține de sortări și căutări le fac pe partea de frontend. Toate aceste operații se fac extrem de rapid folosing angular js.

Imaginile la uploadare sunt convertite în format base 64 și inserate în baza de date pentru a nu ocupa loc. Aceasta este o metodă des folosită. Pentru mai multe informații se poate citi https://en.wikipedia.org/wiki/Base64

La logare am un formular care la butonul de login preia datele scrise de utilizator și le trimite prin intermediul serviciului $http (prin metoda POST) la fisierul login.php. Acest fișier preia datele primite și verifică dacă există astfel de date în baza de date.

La partea de roluri e implementat astfel: in dashboardul adminului sunt afisate toate anuntuirile si la utilizator este preluat id si cautate toate anunturile care au la campul userId acel id.

Adaugarea, editarea și ștergerea anunțurilor sunt făcute cu PHP. Trimit cu ajutorul angular js datele la fisierele php iar php se ocupa de lucrul cu baza de date.

Valabiliatea si reimprospatarea anunturilor sunt implementate in partea de editare a anuntului.

Incadrarea anunturilor intro categorie este implementată în baza de date. Există un cam denumit categorie.

Folosirea unei galerii de imagini: Imaginile sunt memorate pentru fiecare anunt intr-un array denumit images in format base 64.

Cautarea anuntuirilor o fac direct cu angular js folosind filtre. Eu preiau toate datele de la backend si le sortez in functie de cautare. E mult mai eficient si mai rapid decat a luat string-ul cautata de user a trimite la backend, a returna din backend rezultatele si de a le trimite din nou la frontend. Ia mult mai mult timp si nu e eficient.

În concluzie am realizat o aplicație care are funcționalitățile de bază în PHP și care se îmbină cu tehnologiile noi dezvoltate pentru a mari eficientă și calitatea aplicației.

STRUCTURA FIȘIERELOR

js/ – Folderul principal, conține scripturile js ale aplicației

controllers/ – Diferite controllere utilizate

services/ – Diferite servicii utilizate

lib/ – Un view este o pagină. Fiecare pagină are HTML și JavaScript

app.js – Fișierul .js care unește aplicația

web/webApp/html – template-uri pentru modal de editare si creare a unei noi inregistrari

views/view-urile aplicatiei

web/webApp/css – stylesheet-urile aplicatiei

web/webApp/img/ – folderol cu imagini

web/webApp/db – script-urile PHP pentru principalele operatii CRUD – create, read, update, delete

index.php – fisierul principal al aplicatie

TEHNOLOGII FOLOSITE

Frontend

HTML5

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d.

CSS3

Bootstrap

Site: getbootstrap.com

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style.

Am folosit framework-ul de CSS, Materialize Css pentru a facilita construcția de pagini web responsive. Un site web responsive este un site in care elementele lui (paragrafe, poze, tabele) care se redimensioneaza în funcție de device-ul pe care este vizualizat (telefon, tabletă, desktop PC).

Cum functioneaza bootstrap?

Pachetul Materialize conține 2 fișiere:

materialize.min.css (.min=varianta minimizata a fisierului .css)

materialize.min.js css (.min=varianta minimizata a fisierului .js).

Fișierul css conține cod CSS pentru elementele principale ale framework-ului: containere, butoane, paragrafe, etc precum și media queries pentru fiecare tip de ecran:

Materialize.min.js conține cod js pentru elementele de tip modal, dropwdown, carouselo, tooltip, etc.

În aplicație am făcut câte un fișier css pentru diferite părți și funcții ale acesteia.

Login & Register

.card .card-header {  

    padding: 10px;  

    background-color: #00bcd4;  

    text-align: center;  

}  

.input-field input[type=email]:focus+label {  

  color: #00bcd4;  

}  

.input-field input[type=password]:focus+label {  

  color: #00bcd4;  

}  

.input-field input[type=email]:focus {  

  border-bottom: 1px solid #00bcd4;  

  box-shadow: 0 1px 0 0 #00bcd4;  

}  

.input-field input[type=password]:focus {  

  border-bottom: 1px solid #00bcd4;  

  box-shadow: 0 1px 0 0 #00bcd4;  

}  

/* icon prefix focus color */  

.input-field .prefix.active {  

  color: #00bcd4;  

} 

JavaScript

Angular

Site: angularjs.org

Descriere: Angular este un framework MVC dezvoltat de Google, care aduce multe noutăți în domeniul Javascript, precum directivele, routingul dinamic sau modularizarea.

MVC(Modfel-View-Controller) este un pattern architectural utilizat pentru implementarea interfetelor web.

Cum functioneaza MVC?

Controller-ul trimite comanzi catre modal, updatand starea modelului. the model's state. In acelasi timp poate trimite comanzi pentru modificare view.

Un model gestioneaza datele primate de la un controller (ex:datele dintr-o baza de date) si le trimite catre view

View-ul genereaza rezultatul (output presentation), bazat pe datele primate e la model

Mai jos am atasat o schema:

Abordarea real-time și folosirea tehnologiilor apărute recent pe piață AngularJS, conferă aplicației elementul de originalitate din punct de vedere tehnic.

Angular Js este un tool tot mai des folosit in ziua de azi in web development,deoarece faciliteaza lucrul cu date(indiferent de tipul de baze de date) si in plus confera aplicatiei o scalabilitate(Organizarea fisierului este foarte simpla)

Fisierul Js:

-app.js(definieste modulul pricipalul si routele)

-folder controllers-controlere aplicatiei

-folder services-serviciile aplicatiei(Serviciile sunt utilizate pentru a usura anumite procese:primerea datelor din baza de date poate fi facut printr-un serviciu iar in fiecare controller unde este nevoie de array-ul cu date serviciul poate fi apelat,acesta furnizand imediat datele)

filters.js-filtrele aplicatiei

Angular Js foloseste conceptual de data binding.Conform Wikipedia:

Data binding este un proces care stabilește o conexiune între interfața aplicației și logica.

Angular Js foloseste acest process pentru a putea manipulamai usor elementele din DOM (ex:un input de tip text). Pentru a active data binding trebuie sa etichetam elemente din DOM dorite cu cate un model.

Ex:

<input type="text" ng-model="test"/> {{test}}  

In acest exemplu cand utilizatorul introduce un text in acea casuta, continutul va fi afisat in partea dreapta realtime. Acesta este un exemplu minor pentru a explica puterea acestui framework. Astfel putem accesa oricat orice model si afla starea lui in controller folosind $scope.

Un alt avantaj al folosirii framework-ului Angular Js este tool-ul angular route si a template-urilor. De exemplu avem un site unde avem nevoie de pagina home, contact, produse, etc. De obicei se fac pagini diferite: home.html, contact.html, produse.html, dar daca ne gandim aceste pagini au elemente comune, de ex meniul de navigare footer. Angular route permite creearea unor rute folosind template-uri. Deci vom avea pagina principal pe care vor fi aplicate diferite template-uri. De asemenea fiecare template poate avea cate un controller.

Ex:

app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {  

    var DEFAULT_PATH = "/home/search";  

    $urlRouterProvider.when("", DEFAULT_PATH);  

    $urlRouterProvider.when("/", DEFAULT_PATH);  

    $urlRouterProvider.otherwise(DEFAULT_PATH);  

    $stateProvider  

        .state('home', {  

            abstract: true,  

            url: '/home',  

            templateUrl: 'webApp/components/content/html/home.html',  

            controller: 'homeController',  

            onEnter: function () {  

                console.log("homeController enter");  

            }  

        })  

        .state('home.search', {  

            url: '/search',  

            templateUrl: 'webApp/components/content/html/search.html',  

            controller: 'homeController',  

            onEnter: function () {  

                console.log("search enter");  

            }  

        })  

        .state('home.products', {  

            url: '/products/:',  

            templateUrl: 'webApp/components/content/html/details.html',  

            controller: 'homeController',  

            onEnter: function () {  

                console.log("search enter");  

            }  

        })  

        .state('home.registerItem', {  

            url: '/registerItem',  

            templateUrl: 'webApp/components/content/html/registerItem.html',  

            controller: 'registerItemController',  

            onEnter: function () {  

                console.log("registerItemController enter");  

            }  

        })  

        .state('login', {  

            url: '/login',  

            templateUrl: 'webApp/components/content/html/login.html',  

            controller: 'loginController',  

            onEnter: function () {  

                console.log("login enter");  

            }  

        })  

       .state('dashboard', {  

            url: '/dashboard',  

            templateUrl: 'webApp/components/content/html/dashboard.html',  

            controller: 'dashboardController',  

            onEnter: function () {  

                console.log("dashboard enter");  

            }  

        })  

}]);  

Pentru a putea afisa/prelucra datele din frontend am folosit Angular Js folosind metoda specifica http : GET

getAllAds();  

   $scope.newAdd = {};  

   function getAllAds() {  

       $http.get('webApp/db/items.php').success(function(data) {  

           // Stored the returned data into scope  

           $scope.ads = data;  

          // console.log($scope.ads);  

       });  

   }  

$http.get()

returns

In fisierul items.php returnez datele in format json pentru a le putea prelua cu metoa get si a le salva intr-un array.

La fel am proceat si pentru celelalte operatii CRUD:

$http.post(object)->parametrul este un obiect care este preluat de fisierul php si trimis la baza de date

$http.post('webApp/db/add.php', {  

            "titlu": $scope.newAdd.titlu,  

            "userId": "57f68afddcba0f6e6c59413e",  

            "categorie": $scope.newAdd.categorie,  

            "pret": $scope.newAdd.pret,  

            "images":$scope.newAdd.images,  

            "dataExpirare":$scope.newAdd.dataExpirare,  

            "descriere": $scope.newAdd.descriere  

        }).success(function(data) {  

            Notification.success("Anunt adaugat cu succes!");  

            getAllAds();  

        });  

}  

}); 

$http.post(id)->parametrul este id-ul anuntului care trebui sters

Fisierul primeste id-ul si

efectueaza operatia de stergere din baza de date

$scope.deleteAd = function(id) {  

      $http.post('webApp/db/delete.php', { "del_id": id }).success(function(data) {  

          console.log(data);  

      });  

      getAllAds();  

  }  

$scope.edit = function(currentProduct){  

           console.log(currentProduct);  

           $scope.currentAd = currentProduct;  

           $('#modal2').openModal();  

   }  

   $scope.saveAd = function(){  

       console.log($scope.currentAd);  

     $http.post('webApp/db/save.php', {  

           "titlu": $scope.currentAd.titlu,  

           "id":$scope.currentAd._id.$id,  

           "userId": "57f68afddcba0f6e6c59413e",  

           "categorie": $scope.currentAd.categorie,  

           "pret": $scope.newAdd.pret,  

           "images":$scope.currentAd.images,  

           "descriere": $scope.newAdd.descriere  

       }).success(function(data) {  

           Notification.success("Anunt salvat cu succes!");  

           getAllAds();  

       });  

   }  

Am ales sa lucrez cu framework-ul Angular deoarece lucrul cu formulare este mult mai usor decat cu php native. Folosind data binding pot prelua usor ce a scris userul in diferite input-uri. Astfel daca unui input ii atasez directive “ ng-model=”test” ” pot prelua valoarea acestui input prin comanda : $scope.test.

Pentru a face upload de fisiere am folosit librarie de Angular ,numita Angular Base 64 care imi converteste imaginea uploadata e user in format base 64.

<input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*, .zip" minsize="500" required minnum="2" on-change="onChange">  

jQuery

Site: jquery.org

Descriere: jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătăți diferite procese de accesare ale elementelor unui site(elementelor HTML in DOM).

Jquery se foloseste in urmatoarele situatii :

Selectii de elemente in arborele DOM (paragrafe, butoane etc.)

Inregistrare si proceasarea evenimentelor din browser(ex:cand utilizatorul apasa un buton)

Efecte si animatii

Cereri de tip AJAX

$(document).ready(function(){  

   $('body').html('Hello world!');  

}); 

De asemenea un alt avantaj al folosirii Angular Js este directive ng-repeat. Aceasta directive ma ajuta sa interez prin elementele unui array si sa afisez pentru fiecare un template:

<div class="content">  

                     <div class="row">  

                         <div class="col col s4" ng-repeat="item in details|filter: {'oras' : orasSelect}|filter:{'categorie': categoriSelect}|filter:search">  

                             <div style="width: 350px!important" class="card">  

                                 <div class="card-image waves-effect waves-block waves-light">  

                                     <!– <img class="activator" src="webApp/components/content/img/1.jpg"> –>  

                                     <img data-ng-src="data:image/png;base64,{{item.images[0].base64}}" data-err-src="images/png/avatar.png"/>  

                                 </div>  

                                 <div class="card-content">  

                                     <a style="font-size:1.2em" href="#/home/products/{{details.indexOf(item)}}" class="card-title  grey-text text-darken-4">{{item.titlu}}</a>  

                                     <p>Pret : {{item.pret}} euro</p>  

                                 </div>  

                         </div>  

                     </div>  

                 </div>  

PHP

PHP este un limbaj de programare destinat lucrului lucrului cu bazele de date. Numele PHP provine din limba engleză și este un acronim recursiv: Php: Hypertext Preprocessor. Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Pentru a rula orice script PHP avem nevoi de un web server,de ex: Apache. Se va configure portul pe care va rula (initial etse 443). Orice proiect php trebuie sa fie localizat in folderol htdocs din xamp.

PHP5 aduce imbunatatiri importante :

Support imbunatatit pentru OOP

Introducere PDO-PHP Data Objects care definește o modalitate facilă și consistentă de accesare a diferitelor baze de date

Suport imbunatatit pentru MYSQL si MSSQL

Controlul erorilor prin tratarea de excepții

In aplicatie am folosiut script-uri PHP pentru a face operatiile CRUD – (create, read, update, update, delete).

Inainte de a realiza aceste operatii am creat script-ul de conectare la baza de date:

<?php  

    $connection = new MongoClient("mongodb://test:[anonimizat]:53206/dbanunturi");   

    $db         = $connection->dbanunturi;  

?>  

Read

<?php  

// Including database connections  

include('./connectDb.php');  

$collection = $db->ads ;  

    //$user = $db->$collection->findOne(array('username'=> $username, 'password'=> $password));  

    $cursor     = $collection->find();  

    // iterate cursor to display title of documents  

    foreach ($cursor as $k => $row) {  

        echo json_encode(iterator_to_array($cursor, false), true);  

    }  

?>  

Create

<?php  

    include('./connectDb.php');  

    $data = json_decode(file_get_contents("php://input"));   

    $titlu =  $data->titlu;  

    $pret =  $data->pret;  

    $categorie =  $data->categorie;  

    $descriere = $data->descriere;  

    $images = $data->images;  

    $userId = $data->userId;  

    $collection = $db->ads;  

    $document = array(   

          "titlu" => $data->titlu,   

          "pret" => $data->pret,   

          "categorie" => $data->categorie,  

          "descriere" => $data->descriere,  

          "dataExpirare" =>$data->dataExpirare,  

          "images" => $data->images,  

          "userId" => $data->userId  

    );  

    $collection->insert($document);  

    echo "Document inserted successfully";  

?>  

Update

<?php  

    include('./connectDb.php');  

    $data = json_decode(file_get_contents("php://input"));   

    $id = $data->id;  

    $collection = $db->ads;  

    $document = array(   

          "titlu" => $data->title,   

          "pret" => $data->price,   

          "categorie" => $data->category,  

          "descriere" => $data->description,  

          "images" => $data->images,  

          "userId" => $data->userId  

    );  

     $collection->update(array("_id"=>$id),   

      array('$set'=>array($document);  

    //$collection->insert($document);  

    //echo "Document saved successfully";  

?>  

Delete

<?php  

    include('./connectDb.php');  

  $data = json_decode(file_get_contents("php://input"));   

  $id = $data->del_id;  

  $collection = $db->ads;  

  // now remove the document  

  $collection->remove(array("_id"=>new MongoID($id)));  

  echo "Documents deleted successfully";  

?>  

MongoDb

MongoDB este o bază de date NoSQL open-source orientată pe documente. Diferența principală intre MondoDb si MYSQL constă în faptul că stocarea datelor nu se face folosind tabele precum într-o bază de date relațională, MongoDB stochează datele sub formă de documente JSON cu scheme dinamice.

Caracteristici Mongo Db:

Stocarea datelor sub formă de documente ->Alternativa pentru tabele

Prezintă support pentru indexare ->Alternativa pentru autoincrementarea din MYSQL

Auto-Sharding ->Alternativa pentru operatiunea de JOIN

GridFS(sistem de stocare a fisierelor de dimensiuni mari) ->Alternativa pentru BLOB

Comparatie MYSQL vs MongoDb

Baza de date este stocata online, folosind un serviciu de cloud denumit mlab.(www.mlab.com)

Baza de date se numeste dbanunturi , tabela cu anunturi se numeste ads, tabela cu useri se numeste users.

DESIGN

Responsive

Designul este responsive, acesta adaptându-se diferitelor dimensiuni ale ecranului. A fost testat pe telefoane mobile, tablete și pe sisteme desktop. Elementele grafice ale siteului își păstrează relevanța și armonia.

Atractiv

Un design care este în pas cu trendul, care atrage prin culori și prin modul în care este așezată informația.

Echilibru vizual

Am încercat să balansăm cât mai mult raportul spațiu liber/conținut, astfel informația este afișată clar, elementele nu se suprapun și totul este în echilibru, indiferent de dispozitivul pe care-l folosește utilizatorul.

Portabilitate

Siteul a fost testat pe toate browserele moderne (Chrome, Firefox, Safari, Opera) și funcționează consistent pe toate.

Datorită designului responsive, paginile se adaptează la rezoluția ecranului, oferind o experiență plăcută indiferent de dispozitivul de pe care este văzut.

Aplicatia este formata din 2 parti :

-partea de user

-partea de admin

Prima pagina contine o lista cu toate produsele. Userul poate cauta si sorta produsele in functie de oras si categorie inclusive si parte de cautare.

<div id="home" layout="column">  

    <div class="header">  

        <div class="headerContent">  

            <span class="rightContent">  

            <a ng-href="#/home"><i class="material-icons headerIcon primaryBackgroundColor">label</i></a>  

            <h3 class="headerTitle">{{$root.name}}</h3>  

            </span>  

            <!–  <md-button class="md-accent md-raised headerButtons" ng-href="#/home/registerItem">Adauga anunt</md-button> –>  

            <md-button ng-if="!$root.loggedIn" class="md-raised md-warn headerButtons" ng-href="#/login">Login</md-button>  

            <md-button ng-if="$root.loggedIn" class="md-primary headerButtons" ng-click="logout()">Logout</md-button>  

        </div>  

    </div>  

    <div class="searchBar">  

        <div class="searchBarContent" layout="column">  

            <div class=" " layout="row">  

                <md-input-container style="width: 300%" class="md-icon-float md-block">  

                    <label>Ce produs doresti</label>  

                    <md-icon md-svg-src="webApp/components/content/img/search.svg" class="name"></md-icon>  

                    <input ng-model="search" type="text">  

                </md-input-container>  

            </div>  

            <div class="searchContent" layout="row">  

                <!–  <md-select ng-model="oras" placeholder="Oras" class="md-no-underline">  

                    <md-option value="Bucuresti">Bucuresti</md-option>  

                    <md-option value="Iasi">Iasi</md-option>  

                    <md-option value="Craiova">Craiova</md-option>  

                    <md-option value="Oradea">Oradea</md-option>  

                </md-select> –>  

                <div input-field>  

                    <label>Oras : </label>  

                    <select class="browser-default" ng-model="orasSelect">  

                        <option value="Bucuresti">Bucuresti</option>  

                        <option value="Iasi">Iasi</option>  

                        <option value="Cluj">Cluj</option>  

                    </select>  

                </div>  

                <div style="margin-left: 20px" input-field>  

                    <label>Categorie : </label>  

                    <select class="browser-default" ng-model="categoriSelect">  

                        <option value="autoturisme"">Autoturisme</option>  

                        <option value="electronice">Electronice</option>  

                        <option value="electrocasnice">Electrocasnice</option>  

                    </select>  

                </div>  

                <!–  <md-select ng-model="oras" placeholder="Oras" class="md-no-underline searchDropdown">  

                    <md-option value="Bucuresti">Bucuresti</md-option>  

                    <md-option value="Iasi">Iasi</md-option>  

                    <md-option value="Craiova">Craiova</md-option>  

                    <md-option value="Oradea">Oradea</md-option>  

                </md-select>   

                <md-select ng-model="Categorie" placeholder="Categorie" class="md-no-underline searchDropdown">  

                    <md-option value="Autoturisme">Autoturisme</md-option>  

                    <md-option value="Electronice">Electronice</md-option>  

                    <md-option value="Electrocasnice">Electrocasnice</md-option>  

                    <md-option value="Sanitare">Sanitare</md-option>  

                </md-select> –>  

            </div>  

        </div>  

    </div>  

    <div ui-view class="searchContent"></div>  

</div>  

<div style="padding:150px;  

  box-sizing:border-box;" class="container">  

    <div class="card bordered  z-depth-2" style="margin:0% auto;max-width: 700px;">  

        <div class="card-header">  

            <i class="material-icons medium white-text">perm_identity</i>  

        </div>  

        <div class="card-content">  

            <form ng-submit="login(user)">  

                <div class="input-field col s12">  

                    <i class="material-icons prefix">email</i>  

                    <input ng-model="user.email" id="icon_prefix" type="email" class="validate">  

                    <label  for="icon_prefix">Email</label>  

                </div>  

                <div class="input-field col s12">  

                    <i class="material-icons prefix">lock_outline</i>  

                    <input ng-model="user.password" id="icon_telephone" type="password" class="validate">  

                    <label for="icon_telephone">Password</label>  

                </div>  

                <br>  

                <button class="btn cyan waves-effect waves-light right col s12" type="submit" name="action">  

                   <i class="material-icons left">lock_open</i> Login</button>  

            </form>  

        </div>  

        <div  style="margin-top:20px;" class="card-action clearfix">  

            <div class="row">  

                <div class="col s6 text-p">  

                   <!– <a class="btn cyan waves-effect waves-light right col s12"> Forgot Password</a>–>  

                </div>  

                <div class="col s6 right-align text-p">  

                   <!– <a style="font-weight:500" href="#/register" class="orange-text tooltipped" data-position="top" data-delay="50" data-tooltip="Register now!" data-tooltip-id="32f37964-63d7-22b8-ac23-7e402db162b7">Register now!</a>–>                    <!–<a class="btn cyan waves-effect waves-light right col s12"> Register</a>–>  

                </div>  

            </div>  

        </div>  

    </div>  

</div>  

Dupa logare userul este redirectionat catre panoul de administrare (dashyboard). Aici poate efectua operatiunile de adaugare, sterge si editare.

Fisierul dashboard.controller.js contine backend-ul pentru operatiunile CRUD.

app.controller('dashboardController', ['$scope', 'authentication', '$rootScope', '$state', 'Notification', '$http', function($scope, authentication, $rootScope, $state, Notification, $http) {  

    // $scope.login = authentication.login;  

    // $scope.logout = authentication.logout;  

    console.log($rootScope.emailLogged);  

   // $scope.emailLogged=$rootScope.emailLogged;  

    getAllAds();  

    $scope.newAdd = {};  

    function getAllAds() {  

        $http.get('webApp/db/items.php').success(function(data) {  

            // Stored the returned data into scope  

            $scope.ads = data;  

           // console.log($scope.ads);  

        });  

    }  

    $scope.addAd = function(newAdd) {  

        /*$http.post('webApp/db/add.php', 

         { 

          "titlu": $scope.newAdd.titlu 

         });*/  

            console.log($scope.newAdd);  

            $scope.newAdd.images=new Array();  

            $scope.newAdd.images =  $scope.newAdd.images.concat($scope.files);  

            console.log($scope.newAdd);  

        $http.post('webApp/db/add.php', {  

            "titlu": $scope.newAdd.titlu,  

            "userId": "57f68afddcba0f6e6c59413e",  

            "categorie": $scope.newAdd.categorie,  

            "pret": $scope.newAdd.pret,  

            "images":$scope.newAdd.images,  

            "dataExpirare":$scope.newAdd.dataExpirare,  

            "descriere": $scope.newAdd.descriere  

        }).success(function(data) {  

            Notification.success("Anunt adaugat cu succes!");  

            getAllAds();  

        });  

    }  

    $scope.deleteAd = function(id) {  

        $http.post('webApp/db/delete.php', { "del_id": id }).success(function(data) {  

            console.log(data);  

        });  

        getAllAds();  

    }  

    $scope.edit = function(currentProduct){  

            console.log(currentProduct);  

            $scope.currentAd = currentProduct;  

            $('#modal2').openModal();  

    }  

    $scope.saveAd = function(){  

        console.log($scope.currentAd);  

      $http.post('webApp/db/save.php', {  

            "titlu": $scope.currentAd.titlu,  

            "id":$scope.currentAd._id.$id,  

            "userId": "57f68afddcba0f6e6c59413e",  

            "categorie": $scope.currentAd.categorie,  

            "pret": $scope.newAdd.pret,  

            "images":$scope.currentAd.images,  

            "descriere": $scope.newAdd.descriere  

        }).success(function(data) {  

            Notification.success("Anunt salvat cu succes!");  

            getAllAds();  

        });  

    }  

    $(document).ready(function() {  

        $('.collapsible').collapsible({  

            accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style  

        });  

        $('.modal-trigger').leanModal();  

    });  

   /** 

    * var today = new Date(); 

var dd = today.getDate(); 

var mm = today.getMonth()+1; //January is 0! 

var yyyy = today.getFullYear(); 

if(dd<10) { 

    dd='0'+dd 

}  

if(mm<10) { 

    mm='0'+mm 

}  

today = mm+'/'+dd+'/'+yyyy; 

    */  

}]);  

Fisierul LoginController contine backend-ul pt partea de logare:

app.controller('loginController', ['$scope', 'authentication', '$rootScope', '$state', 'Notification','$http', function($scope, authentication, $rootScope, $state, Notification,$http) {  

    // $scope.login = authentication.login;  

    // $scope.logout = authentication.logout;  

    $scope.login = function() {  

        $http.post('webApp/db/login.php',  

         {  

          "email": $scope.user.email,  

          "password" :$scope.user.password  

         }).then(function(response) {  

           if(response.data){  

            console.log(response);  

            $rootScope.emailLogged = response.data;  

            console.log("User si email corect");  

            $state.go('dashboard');  

           }else{  

            Notification.error('User sau parola incorecta!');  

           }  

        });  

    }  

TESTAREA APLICAȚIEI

Testarea reprezintă o etapă importantă în procesul de realizare a aplicațiilor informatice software. Pentru o companie de profil, ponderea cheltuielilor cu testarea reprezintă între 30% și 50% din totalul cheltuielilor pentru dezvoltarea aplicației.

Tehnicile și metodele moderne de elaborare a produselor software acordă o importanță deosebită efortului de înlăturare a erorilor de analiză, proiectare și programare prin folosirea unor mijloace evoluate de testare.

Figure 5.9 Modelul clasic de dezvoltare software.

etapa de specificare a cerințelor:

se determină necesitățile pentru toate elementele sistemului.

Testarea specificațiilor se realizează prin metode de analiză statică: inspecții, parcurgeri și analize tehnice.

etapa de analiză:

continuă procesul de stabilire a cerințelor.

se documentează cerințele, iar acestea sunt revăzute împreună cu beneficiarul.

este descris ceea ce trebuie să facă aplicația informatică și nu modul în care se realizează.

sunt descrise cazurile de test pentru fiecare componentă în parte.

etapa de proiectare:

se pune accent pe structurile de date, arhitectura sistemului, detaliile procedurale și cara cterizarea interfețelor.

sunt identificate structurile de date, interfețele, modulele și sunt descriși algoritmii.

se definesc specificațiile de realizare.

cazurile de test sunt rafinate și sunt adăugate noi cazuri de test corespunzătoare detaliilor introduse.

etapa de implementare:

se face trecerea de la proiect la o formă specifică mașinii de calcul.

testarea are rolul de a evidenția diferențele dintre comportamentul produsului din specificații și cel dat la nivelul utilizatorilor.

etapa de testare:

se concentrează atât asupra logicii interne a programului, avându-se în vedere ca anumite elemente ale acestuia să fie parcurse, cât și pe funcționalitatea externă a sa, pe baza specificațiilor.

se compară rezultatele efective obținute după rularea programului cu seturi de date de test cu rezultatele scontate pe baza specificațiilor.

CONCLUZII

Aproape toți utilizatorii de internet din lume intră pe site-uri de anunțuri. ”In viitor, afacerile vor fi de 2 feluri – online și deloc.”, conform miliardarului Bill Gates. Cu ajutorul unui website, poți aduce clientul mult mai aproape de afacerea ta, iar aceasta se poate dovedi un adevărat succes pentru tine.

În lucrarea de față a fost creată o aplicație de anunturi online responsive, utilizând tehnologiile noi în realizarea părții de front end precum și apelările directe și PHP în partea de backend pentru realizarea funcționalităților precum loghin, adăugare, editare, ștergere anunțuri, etc

Administrarea se face numai cu cont de admin nefiind accesibilă această funcție unui utilizator cu drepturi doar de utilizator.

În concluzie această aplicație realizată numai în scop didactic, vine în sprijinul posibililor vizitatori/cumpărători fiind în același timp și un adversar destul de puternic site-urilor de profil de exemplu gen OLX.

BIBLIOGRAFIE

[1]. Sabin Buraga, „Tehnologii web. Programare web în PHP”, Polirom, 2006.

[2]. Romică TRANDAFIR, Mihai NISTORESCU, Ion MIERLUȘ-MAZILU, Bazele informaticii și limbaje de programare. Baze de date relaționale, București, 2007.

[3]. Andy Oppel. SQL fara mistere – ghid pentru autodidacti. Rosetti Educational, 2006

[4]. Trandafir Romica, Nistorescu Mihai, Mierlus-Mazilu Ion. Bazele informaticii si limbaje de programare 2. Baze de date relationale. Universitatea Bucuresti 2007

[5].

[6]. Connolly, Thomas; Begg, Carolyn. Baze de date: proiectare, implementare, gestionare. Bucuresti : Teora, 2001

[9]. Ioan Mocian Baze de date. Terminologie, proiectare, SQL, Access. Matrixrom, 2007

[10]. Ivan Codesido, What is frond-end development, The Guardian, septembrie 2009

[11]. Maximiliano Firtman, You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy, Smashing Magazine, iulie 2014

[12]. Florentina Rodica Niculescu, Proiectarea paginilor Web Dinamice Utilizând PHP, Editura Fundației România de Mâine, București, 2009

[13]. Teodoru Gugoiu , HTML, XHTML, CSS și XML prin EXEMPLE – Ghid practic, Editura Teora, 2005.

[14]. Florentina Rodica Niculescu, Proiectarea paginilor Web – HTML, CSS, JavaScript, Editura Fundației Rommânia de Mâine, București, 2007

[15]. M. Moise Sisteme informatice cu baze de date, Editura Pro-Universitaria, București, 2008

[16]. Tudor Sorin, Crearea și programarea paginilor Web- HTML, CSS, JavaScript, PHP, Editura L&S Soft, 2006

[17]. Ethan Marcotte, Flexible Images, A List Apart 328, iunie 2011

[18]. Conf.dr.ing. Ioana FAGARASAN, Testarea software si asigurarea calitatii – curs1.

=== 52ffa78c1200eb0ed1bb3456f1e5699b33cd04c5_96355_1 ===

UNIVERSITATEA TITU MAIORESCU, BUCUREȘTI

FACULTATEA DE INFORMATICĂ

DEPARTAMENTUL DE INFORMATICĂ

Specializarea: Informatică

LUCRARE DE LICENȚĂ

website de mică publicitate

Conducător științific,

gggggggggggggggggggggggggg

Student:

BBBBBBBB vvvvvvv

2017

CUPRINS

INTRODUCERE ÎN TEMATICA LUCRĂRII

IMPORTANȚA ȘI ACTUALITATEA TEMEI

Trebuie să ne obișnuim cu ideea că realitatea este că dacă nu ești online, nu exiști. Diferența se face printr-o serie de elemente caracteristice metode de marketing printre care cele mai importante ar fi:

detaliile;

modul în care este realizată comunicarea, promovarea precum și modul în cate te vinzi;

modul în care ești perceput în mediul online care este un element important.

Este un fapt cunoscut, cu toții lucrăm în mediul online, comunicăm și socializăm online, căutăm informații de orice natură online și deseori ne facem mare parte din cumpărături, tot online. Modul și stilul de viață actual, de lucru, de comunicare precum și cel de vânzare este mult diferit de cel din secolul trecut.

În majoritatea instituțiilor comunicarea scrisă rămâne importantă, faxul fiind încă des utilizat, dar în particular și din ce în ce mai mult și în înstituții, comunicarea este de cele mai multe ori electronică. Nu mai sunt necesare imprimante speciale, foarte scumpe pentru a tipări dosarele fizice pentru a organiza marketingul companiei.

Printre tehnicile utilizate în vederea fluidizarii fluxului comunicării sunt regăsite e-mailul care înlocuiește cu succes pixul pe hartie, căutările informațiilor de tolate naturile (tehnice și nontehnice) online, comunicarea cu partenerii și clientii pe diverse aplicații care au fost special concepute în scopul comunicării (video și audio) printre care se regăsesc skype, messenger, facebook, etc.

În lucrarea de față au fost prezentate o parte dintre tehnologiile puse la dispoziție de evoluția tehnicii în această eră a internetului cu ajutorul cărora a fost realizată o platformă online de comercializare a produselor.

Sistemele informatice, în toate domeniile, au înregistrat o evoluție importantă în ultimii ani. În cazul instituțiilor mici, sau cele aflate în perioada de dezvoltare, cu un număr mic de salariați, se preferă realizarea unei baze de date comune care să ofere cât mai multe posibilități și avantaje. În cazul de față, printre posibilitățile și avantajele oferite de SGBD – sistem de gestiune a bazelor de date, enumerăm:

calculul automat al numărului de produse puse la vânzare;

calculul automat al numărului de produse aflate pe stoc;

calculul automat al numărului de echipamente diferențiate pe categorii;

calculul sumelor încasate, etc.

În concluzie, putem afirma că baza de date reprezintă cel mai important instrument de tehnologia informațiilor folosit de organizații pentru stocarea și prelucrarea informațiilor cu foarte multe interdependențe.

La baza dezvoltării acestei noi tehnologii stau câteva concepte și noțiuni care trebuie cunoscute: date, informații, entitate, atribut, valoare.

Aceste concepte și noțiuni vor fi prezentate în capitolul II al lucrării de față.

SCOPUL ȘI OBIECTIVELE LUCRĂRII

Scopul principal al proiectului:

Scopul proiectului este de a aduce un plus de ajutor consumatorilor în vederea gestionării mai eficiente – pentru furnizori și achiziționării mai facile – pentru consumatori, domeniul fiind tehnologia informației și a comunicațiilor – TIC. Aplicația prezentată în lucrarea de față a fost concepută în scop didactic non profit, comercializarea acesteia fiind strict interzisă.

Obiectivul principal al proiectului:

Realizarea unei aplicații software pentru gestionarea diverselor produse și evidența tuturor variabilelor necesare unei bune funcționări a colaborării dintre furnizor de servicii – consumator în scopul reducerii timpului și costurilor asociate achiziționării online a echipamentelor și accesoriilor asociate.

Obiectivele secundare ale proiectului:

Prezentarea aplicației, a structurii logice și funcționale a acesteia.

Prezentarea interfeței, a principalelor ferestre și meniuri.

Realizarea unei lucrări scrise care să susțină, teoretic și exemplificativ, aplicația mai sus amintită.

Necesitatea utilizării unei aplicații IT a apărut datorită evoluției tehnologiilor, cu scopul de a optimiza activitatea din cadrul firmelor și a cumpărătorilor.

Necesitatea colectării și organizării sub formă de tabele și stocării datelor a crescut dramatic în ultimul secol. Actuala „eră a informației” este cu adevărat o eră a datelor.

Scopul țintă este procesarea și organizarea tuturor datelor, într-un mod cât mai inteligent, utilizând metode care permit accesul rapid și simplu la informațiile prelucrate. Sistemele de gestiune a bazelor de date precum MySQL sunt destinate acestui scop.

În cadrul fiecărei activități disponibilitatea informației și capacitatea de a o gestiona în mod eficient sunt esențiale. Din acest motiv, fiecare organizație dispune de un sistem informațional care gestionează informația necesară realizării funcțiilor respectivei organizații.

Răspândirea tehnicii de calcul în aproape toate activitățile umane generează o continuă creștere în computerizarea sistemelor informaționale [3].

În sistemele bazate pe tehnică de calcul, informația este înregistrată sub formă de date, care necesită o interpretare pentru a furniza informații. Nu se poate da o definiție exactă a conceptului de dată, precum și a diferenței dintre dată și informație. Ce putem spune este ca data nu are nicio semnificație, dar odată interpretată și corelată convenabil, ea furnizează informații ce îmbogățesc cunoașterea asupra lumii înconjurătoare.

CONȚINUTUL LUCRĂRII

Lucrarea este structurată în 5 capitole după cum urmează:

În Capitolul 1 intitulat “Introducere în tematica lucrării”, este prezentată pe scurt, importanța și actualitatea temei propuse, scopul, obiectivul principal precum și obiectivele secundare ale lucrării realizate iar la final, un rezumat al conținutului lucrării.

În Capitolul 2 intitulat “Tehnologii web”, prezintă pe scurt câteva tehnologii, în principal dintre cele care au fost utilizate la realizarea aplicației care face obiectul acestei lucrări. MySQL – este un SGBD relațional, robust și rapid, produs de compania MySQL AB și distribuit sub Licența Publică Generală. La ora actuală încă este considerat cel mai popular SGBD open-source. HTML este un limbaj de marcare. Termenul HTML este denumit în limba română “Limbaj de marcare a hipertextului”. Ca orice alt limbaj și HTML a cunoscut o dezvoltare continuă de-a lungul timpului. CSS este un standard utilizat la formatarea elementelor unui document HTML. PHP este un limbaj de programare. Inițial a fost dezvoltat și utilizat pentru a realizare de pagini web dinamice, în dezvoltarea paginilor și aplicațiilor web. La această oră este considerat un limbaj important în programarea web, de tip open-source și server-side. Limbajul de programare JavaScript este un limbaj orientat pe obiect. A fost creat special pentru construirea și dezvoltarea paginilor/siteurilor web, fiind folosit mai ales pentru introducerea diferitor funcționalități. Codul JavaScript din pagini este rulat de către browser. Javascript Angular, Angular Material, CSS, HTML5 si baza de date json

Capitolul 3 intitulat “Interfața web”, sunt prezentate elemente de interfață web prcum, tipurile de design, grafica întâlnită iar la final este abordată proietarea eficientă a interfețelor web.

Ϲɑpіtοlul 4 іntіtulɑt “Dezvoltarea aplicației”, prezintă aplicația realizată pentru susținerea lucrării de licență. Aici au fost abordate elemente de structura aplicației, structura fișierelor, tehnologiile utilizate și de desig.

Luсrɑreɑ se înсheіe сu Capitolul 5 „Concluzii” іɑr lɑ fіnɑl este prezentɑtă bіblіοgrɑfіɑ studіɑtă șі fοlοsіtă pentru ɑ reɑlіzɑ luсrɑreɑ de fɑță.

TEHNICI ȘI ТEHΝΟLΟGІІ UTILIZATE ÎN PROGRAMAREA APLICAȚIILOR WEВ

Internetul

Intеrnеt-ul еstе o rеțеa dе rеțеlе, o colеcțiе mondială dе calculatoarе și dе rеțеlе dе calculatoarе conеctatе întrе еlе folosind divеrsеlе mеtodе dе comunicarе.

În anii 60, Intеrnеt-ul a fost inițial un еxреrimеnt al Dерartamеntului Арărării al Statеlor Unitе, carе urmărеa să-i ajutе ре oamеnii dе știință și ре cеrcеtătorii răsрândiți ре suрrafеțе mari să lucrеzе îmрrеună, folosindu-sе cu toții dе рuținеlе și dе costisitoarеlе calculatoarе și dе fișiеrеlе acеstora. Аcеst obiеctiv a nеcеsitat crеarеa unui gruр dе rеțеlе intеrconеctatе carе să funcționеzе ca o unitatе coordonată.

Imрactul Intеrnеt-ului asuрra viеții noastrе еstе mai marе dеcât influеnța ре carе a avut-o Rеvoluția industrială în scһimbarеa sociеtății sеcolului XVIII. Аcеasta еstе concluzia la carе a ajuns un studiu еfеctuat dе рrеstigiosul Ϲеntru dе Ϲеrcеtări Ηеnlеу din Marеa Вritaniе, studiu finanțat dе corрorația amеricană ϹISϹO SҮSTΕM, lidеrul mondial în construcția rеțеlеlor реntru Intеrnеt. Raрortul Imрactul Intеrnеt-ului în Εuroрa rеlеvă scһimbărilе radicalе рrodusе în modul nostru dе a trăi, dе a munci, dе a învăța și dе a nе реtrеcе timрul libеr.

Ρrinciрalеlе sеrvicii și rеsursе ре carе lе ofеră Intеrnеt-ul sunt:

Ρoșta еlеctronică еstе un sistеm intеrnațional рrin carе sе рoatе trimitе și рrimi mеsajе ре calе еlеctronică, cunoscută sub numеlе dе е-mail. Dе faрt, рoșta еlеctronică rерrеzintă o marе рartе a traficului dе ре Intеrnеt și реntru mulți еstе singura rеsursă ре carе o utilizеază.

Gruрurilе dе discuții еstе un sеrviciu carе рoartă numеlе dе Usе Νеt. Аcеsta ofеră accеsul la nеwsgrouр реntru discuții în gruр axatе ре un anumit subiеct. O variantă a acеstui sеrviciu еstе sistеmul dе aviziеr еlеctronic (ВВS). Sistеmеlе ВВS sunt asеmănătoarе Usе Νеt-ului, cu еxcерția faрtului că toatе fișiеrеlе sunt localizatе ре un singur calculator carе dе obicеi еstе întrеținut dе o реrsoană sau dе un gruр.

Ρartajarеa fișiеrеlor (transfеrul dе fișiеrе) carе реrmitе transfеrul fișiеrеlor dе datе dе la un calculator la altul. În fеlul acеsta sе рot рrеlua dе ре difеritе calculatoarе рrogramе și oricе tiр dе documеnt еlеctronic. Ρеntru a utiliza acеst sеrviciu еstе nеcеsar un рrogram FTΡ (Filе Transfеr Ρrotocol) cu ajutorul căruia utilizatorul sе рoatе conеcta la un sеrvеr FTΡ aflat la distanță. Sеrvеrul еstе idеntificat рrintr-o adrеsă Intеrnеt. Аccеsul la un astfеl dе sеrvеr еstе реrmis, dе rеgulă, utilizatorilor înrеgistrați carе au drерt dе accеs.

World Widе Wеb (www) еstе o comрonеntă a Intеrnеt-ului numită mai simрlu Wеb carе реrmitе utilizatorilor să folosеască o idее dеmodată – cеa a notеlor dе subsol – într-un mod cu totul nou. Ϲând un autor al unui articol dе rеvistă sau al unеi cărți introducе o notă dе subsol, cititorul еxaminеază subsolul рaginii și рrobabil еstе îndrumat sрrе o altă рagină sau sрrе altă cartе. Wеb-ul рoatе facе în еsеnță acеlași lucru, folosind o tеһnică cе va sublinia sau еvidеnția un cuvânt, o еxрrеsiе sau o imaginе din documеnt. Ϲuvântul sau еxрrеsia еvidеnțiată arată utilizatorului că еxistă un alt documеnt asociat рrimului. Аcеst documеnt рoatе fi accеsat și afișat imеdiat ре еcran. Documеntul dе acеst tiр рoartă numеlе dе һуреrtеxt. Dе asеmеnеa Wеb-ul facе рosibilă și stocarеa și rеgăsirеa sau rеdarеa fotografiilor, a imaginilor fixе și a cеlor animatе și a sеcvеnțеlor vidеo și audio. Utilizând un astfеl dе instrumеnt cliеnții рot să vadă raрid și ușor informațiilе și imaginilе graficе stocatе, рrobabil, ре calculatoarе aflatе la mii dе km distanță. Utilizarеa unui browsеr Wеb sеamănă foartе mult cu o călătoriе adеvărată, numai că acеasta sе facе mult mai ușor. Аcеst tiр dе călătoriе рoartă numеlе dе “navigarе” ре Intеrnеt. Sociеtățilе comеrcialе și altе organizații au încерut să folosеască Wеb-ul ca mijloc dе рublicitatе реntru рrodusеlе sau реntru sеrviciilе lor. Εi crееază o рagină Wеb, un fеl dе vitrină еlеctronică. Odată cе adrеsa рaginii Wеb еstе cunoscută, рosibilii cliеnți рot afla informații dеsрrе firma rеsреctivă.

Ϲһat-ul (discuții рrin Intеrnеt) еstе sеrviciul carе реrmitе unui gruр dе реrsoanе să-și transmită mеsajе într-un timр foartе scurt. Dеși еstе utilizat dе difеritе catеgorii dе vârstă, еl еstе foartе рoрular în rândul tinеrilor. Odată conеctat, utilizatorul еstе рus în lеgătură cu o mulțimе dе alți utilizatori din toată lumеa. Аșa-numitеlе sрații dе discuții реrmit gruрarеa acеstora ре anumitе tеmе cum ar fi sciеncе-fiction, film sau sрort. Toatе mеsajеlе tastatе într-un astfеl dе sрațiu aрar aрroaре simultan ре еcranеlе calculatoarеlor tuturor рarticiрanților la discuții. Аcеstе sрații sunt activе în gеnеral 24 dе orе ре zi.

Cеi carе au accеs la Intеrnеt la locul dе muncă sunt mult mai binе informați, mai рroductivi, însă din cauza abundеnțеi dе datе dе рrocеsat, numărul orеlor dе lucru еstе în crеștеrе, рroрorțional cu acumularеa obosеlii și strеsului.

Intеrnеtul ofеră o colеcțiе dе datе carе sе îmbogățеștе într-un ritm raрid, colеcțiе cе cuрrindе subiеctе dе la mеdicină la știință și la tеһnologiе. Εl рrеzintă un matеrial comрlеt din domеniul artеlor, рrеcum și matеrialе dе cеrcеtarе реntru studеnți și matеrialе rеfеritoarе la rеcrееrе, la divеrtismеnt, la sрort și cһiar рosibilități dе găsirе a unui loc dе muncă. Ρrin Intеrnеt рutеm avеa accеs la almanaһuri, la dicționarе, la еncicloреdii și la һărți.

În zilele noastre cea mai mare parte a informației, de care avem nevoie atât în viața de zi cu zi cât și în mediile profesionale și de studii, se găsește pe internet. Fie că este vorba despre ultimele știri, ultimele activități ale prietenilor și familiei, cărți, achiziționarea diverselor produse disponibile în magazinele virtuale sau chiar e-banking, folosim această minunată unealtă aparent bună la toate, internetul. Însă, ceea ce majoritatea utilizatorilor nu știu despre internet este că, pe cât este de atractiv pe atât este de vulnerabil în fața atacurilor cibernetice.

Securitatea este un motiv de îngrijorare pentru dezvoltarea oricărui tip de aplicație. Cu toate acestea, aplicațiile web dezvăluie anumite caracteristici care trebuie luate în considerare la proiectarea funcționalităților de securitate și care solicită mai multe tehnici de securitate, comparativ cu alte tipuri de aplicații. De exemplu, spre deosebire de programele care sunt instalate pe o singură mașină gazdă, aplicațiile web sunt accesibile publicului, pe Internet, pentru a ajunge la un numar mare de potențiali utilizatori.

Calculatorul clientului și documentele stocate în sistemul de fișiere trebuie să fie protejate împotriva accesului neautorizat de către părți terțe, posibil rău intenționate. Pentru client, datele personale, cum ar fi informațiile de contact sau numerele cardurilor de credit sunt deosebit de importante și trebuie să fie păstrate private.

Securizarea serverului și a datelor stocate pe el. Trebuie să se asigure disponibilitatea serviciului, prin eliminarea atacurilor de tip DoS (denial-of-service). Mai mult decât atât, părțile neautorizate trebuie să fie împiedicate în obținerea accesului la informațiile personale ale clienților, angajaților si la alte resurse critice ale afacerii (de exemplu, bazele de date locale).

Fig. 2.1 Securitatea. b#%l!^+a?

Vulnerabilitatea este o slăbiciune a unui sistem software sau hardware ce permite utilizatorilor neautorizați să aibă acces asupra sa.

Care sunt cauzele existenței acestor vulnerabilități?

Acestea pot fi multiple. Dintre ele doresc să subliniez urmatoarele:

erori existente în programe (bug-uri): fie introduse neintenționat, fie cunoscute dar ignorate

configurarea necorespunzătoare a programelor, serverelor, rețelelor

lipsa cunoștințelor despre problemele de securtitate

În ultіmіі ɑnі, ɑu fοst prοpuse сâtevɑ ɑbοrdărі pentru dezvοltɑreɑ sіstemelοr Web. Асeste metοde οferă elemente de mοdelɑre speсіfісe pentru ɑnɑlіză șі prοіeсtɑre, multe dіntre ele defіnesс ο nοtɑțіe prοprіe utіlіzɑtă pentru reprezentɑreɑ grɑfісă ɑ elementelοr.

Ϲâtevɑ dіntre metοdοlοgііle Web eхіstente:

ΝDТ – Νɑvіgɑtіοnɑl Develοpment Тeсhnіques;

ΟΟHDM – Οbjeсt Οrіented Hγpermedі Desіgn Methοd;

UWE – UML – bɑsed Web Engіneerіng.

Metοdοlοgііle de prοіeсtɑre ɑ ɑplісɑțііlοr Web dіspοnіbіle în lіterɑturɑ de speсіɑlіtɑte șі сɑre vοr fі prezentɑte pe sсurt în сοntіnuɑre, pοt fі сlɑsіfісɑte сοnfοrm părerіі luі Dіstɑnte et ɑl. (2007) după сum pun ɑссent pe:

"сe" se сere să fɑсă ɑplісɑțіɑ (prοіeсtɑre сοnсeptuɑlă în dοmenіul prοblemeі);

UWА – Ubіquіtοus Web Аpplісɑtіοn, ΟΟHDM;

ΟΟWS – Οbjeсt-Οrіented Web Sοlutіοn;

ΟΟ-H – Οbjeсt-Οrіented Hγpermedіɑ Methοd.

"сum" pοɑte sɑtіsfɑсe ɑplісɑțіɑ сerіnțele șі сum pοɑte іmplementɑ сeeɑ "сe" se сere să fɑсă ɑplісɑțіɑ (prοіeсtɑreɑ lοgісă în dοmenіul sοluțііlοr).

UWE – bɑsed Web Engіneerіng;

WebML – Web Mοdelіng Lɑnguɑge pοt fі сοnsіderɑte сɑ fііnd metοdοlοgіі hіbrіde, deοɑreсe ɑсοperă ɑtât prοіeсtɑreɑ сοnсeptuɑlă сât șі prοіeсtɑreɑ lοgісă.

DNS – Sistemul numelor de domenii

În momentul în care la rețea au fost conectate mii de stații de lucru, au început să apară printre altele, conflictele de nume de sisteme gazdă ceea ce a condus la sistemul de administrare centralizat. De aici a fost necesară introducerea sistemului numelor de domenii numit DNS – Domain Name System.

Esența DNS-ului constă dintr-o schemă ierarhică de nume de domenii și a unui sistem de baze de date distribuite pentru implementarea acestei scheme de nume. În principal este utilizat pentru a pune în corespondență numele sistemelor gazdă și adresele destinațiilor de e-mail cu adresele IP, dar poate fi utilizat și pentru alte scopuri. [19]

DNS – Domain Name System este un protocol care traduce adresele Internet literale în adrese Internet numerice, adrese utilizate de o mașină pentru a găsi o altă mașină receptor.

Caracteristicile sistemului de nume DNS

folosește o structură ierarhizată;

deleagă autoritatea pentru nume;

baza de date cu numele și adresele IP este distribuită.

Baza de date DNS se numește distribuită deoarece nu există un singur server care să aibă toată informația necesară traducerii oricărui domeniu într-o adresă IP. Fiecare server are o bază de date cu propriile domenii, la care au acces toate sistemele de pe Internet. Fiecare server DNS are un server DNS superior cu care face periodic schimb de informație. [20]

Sistemul de nume DNS are o organizare ierarhică, sub formă de arbore prezentată în figura 2.2. Acesta are o rădăcină unică (root) care are subdomenii. Fiecare nod al arborelui reprezintă un nume de domeniu sau subdomeniu.

Fig. 2.2 O porțiune a spațiului numelor de domenii din Internet. b#%l!^+a?

Componentele sistemului de nume DNS

Servere DNS – Un server DNS este o stație pe care rulează un program de server DNS. Serverele DNS stochează informații despre o porțiune din structura ierarhică a spațiului de nume și rezolvă interogări de rezoluție de nume pentru clienții DNS. Când sunt interogate, serverele DNS răspund cu informația cerută dacă aceasta este disponibilă sau generează o referință către un alt server DNS care poate rezolva interogarea. [21, 22]

Un client poate cere o transformare a numelor în două moduri:

cu rezolvare recursivă – serverul contactează la rândul lui un alt server de nume, de obicei de pe un nivel superior din arborele serverelor de nume. Acesta la rândul lui, va examina cererea și, dacă nu poate face transformarea contactează un alt server. Procesul continuă până se contactează un server care poate face transformarea;

cu rezolvare iterativă – serverul comunică clientului ce server să contacteze mai departe. Clientul adresează o cerere acestui server și tot așa mai departe până când cererea ajunge la un server care face transformarea. Când un server recepționează o cerere cu rezolvare iterativă și nu poate traduce numele de domeniu, acesta transmite clientului ce server să contacteze mai departe.

Zone DNS – O zonă DNS este o secțiune continuă din cadrul spațiului de nume. Înregistrările pentru o astfel de zonă sunt memorate și gestionate la un loc, chiar dacă domeniul este împărțit în subdomenii. Zona poate fi de două feluri:

primară – secțiunea în care se pot face actualizări;

secundarã – copia zonei primare.

Resolvere DNS – Resolver-ul DNS este un program care extrage informațiile din severele de nume, ca răspuns la cererile unor clienți.

Înregistrări de resurse (RR – resource records) – Baza de date DNS conține înregistrări de resurse. Aceste înregistrări provin din mapările între nume și obiecte din rețea.

Desfășurarea procesului de rezoluție a numelor DNS [21, 22]

Resolver-ul de nume primește de la o aplicație client TCP/IP un nume;

El formulează o interogare primului server de nume din lista serverelor;

Serverul de nume (DNS) determină dacă este autorizat pentru domeniul respectiv (există configurată o zonă DNS care conține numele respectiv);

Dacã este autorizat, transmite rãspunsul clientului;

Dacã nu, transmite o interogare altui server de nume pentru un rãspuns autorizat;

Obține răspunsul autorizat și transmite clientului un răspuns neautorizat și stochează răspunsul local pentru a răspunde la alte cereri pentru același nume.

Resolver-ul de nume transmite răspunsul aplicației utilizator și îl păstrează într-un cache pentru o anumită perioadă;

Dacă resolver-ul de nume nu primește un răspuns într-un anumit timp, transmite cererea următorului server de nume din listă. Când lista este epuizată, se generează o eroare.

Numele de domenii pot fi absolute sau relative. Un nume absolut de domeniu se termină cu un punct (de exemplu, eng.sun.com.), în timp ce unul relativ nu. Numele relative trebuie interpretate în context pentru a determina înțelesul adevărat. în ambele cazuri, un nume de domeniu se referă la un anumit nod din arbore și la toate nodurile de sub el.

Numele de domenii nu fac distincție între litere mici și litere mari, astfel edu sau EDU înseamnă același lucru. Componentele numelor pot avea o lungime de cel mult 64 caractere, iar întreaga cale de nume nu trebuie să depășească 255 de caractere.

Pentru a crea un nou domeniu, se cere permisiunea domeniului în care va fi inclus. Odată ce un nou domeniu a fost creat și înregistrat, el poate crea subdomenii, cum ar fi cs.unsd.edu, fără a cere permisiunea de la cineva din partea superioară a arborelui.

Atribuirea de nume respectă granițele organizaționale, nu pe cele ale rețelelor fizice. De exemplu, dacă departamentele de știința calculatoarelor și de inginerie electrică sunt localizate în aceeași clădire și folosesc aceeași rețea locală, ele pot avea totuși domenii distincte. Similar, dacă departamentul de știința calculatoarelor este împărțit în două clădiri (Babbage Hali și Turing Hali), toate sistemele gazdă din ambele clădiri aparțin aceluiași domeniu.

NOȚIUNI ȘI TIPURI DE BAZE DE DATE.

Analizând definițiile date în diferitele surse ale literaturii de specialitate putem sintetiza și defini baza de date ca un sistem informatizat de gestiune a datelor ale cărui componente sunt reprezentate de datele conținute și structurate, componenta hardware a bazei de date, componenta software a bazei de date, utilizatorii atât intermediari cât și cei finali precum și procedurile de utilizare specifice [9], [11].

Descrierea conținutului conceptual al bazelor de date are în vedere, uzual, două caracteristici ale acestora:

Dimensiunea bazei de date;

Natura bazei de date – BD sunt clasificate în:baze de date interne și baze de date externe.

DATE ȘI INFORMAȚII

Datele și informațiile reprezintă componentele primare ale sistemului informațional.

Data – concept definit în TI (tehnologia informației) ca un model de reprezentare a informației într-un format accesibil unui calculator.

Informația – data care îmbogățește nivelul de cunoștințe ale celui care primește informația și îl ajută în luarea deciziilor. Orice informație este o dată în conceptul TI (tehnologiei informației) dar nu orice dată este informație.

ENTITATE, ATRIBUT, VALOARE

Entitatea este reprezentarea unică a unui obiect individual (concret sau abstract) din lumea reală, prin proprietățile sale.

Atributele entităților reprezintă proprietățile entităților.

Un atribut ia anumite valori. De exemplu, o persoană este recunoscută după nume: persoana reprezintă entitatea, numele reprezintă proprietatea entității persoana; valoarea pe care o ia această proprietate pentru un element al entității.

Orice proprietate a unui obiect poate fi exprimată printr-o pereche (atribut, valoare); o entitate poate fi exprimată prin mai multe proprietăți, deci prin mai multe perechi de tipul (atribut, valoare).

De exemplu, o persoană poate fi reprezentată prin mulțimea de perechi: (Nume, Popescu); (Data nașterii, 3 aprilie 1963); (Sex, masculin); (Profesie, inginert); (CNP, 153050590000). În acest caz, se poate afirma: entitatea persoana este definită prin atributele: nume, data nașterii, sex, profesie, CNP (codul numeric personal) [4], [6].

Atributele unei entități se stabilesc în funcție de contextul în care descrierea este necesară. De exemplu, în descrierea entității “împrumutat”, atributele pot fi: nume, prenume, CNP, funcția, studii, unde lucrează, etc.

În contextul conceptelor date – informații, definim entitatea, atributul, valoarea astfel:

Entitatea reprezintă obiectul informației

Atributul este proprietatea entității

Valoarea este măsura proprietății.

Pentru a asigura unicitatea, valorile unuia sau mai multor atribute ale entității trebuie să fie diferite de valorile corespondente ale celorlalte entități. În exemplul de mai sus, utilizarea codului numeric personal (CNP) asigură identificarea unică a unei persoane.

Entitățile mai sunt numite și entități date, obiecte date, apariții de date sau apariții.

Aceste reprezentări ale entităților devin tabele. Tabela este definită ca un produs cartezian dintre mai multe domenii, caracterizată prin un nume având date despre un anumit subiect.

De exemplu, un tabel în care este descrisă entitatea împrumutat, cu atributele: nume, studii, funcția, etc, conține rânduri sau înregistrări pentru fiecare împrumutat în parte.

O înregistrare este compusă din câmpuri care sunt constituite din atributele necesare pentru entitatea descrisă.

Noțiunea de atribut, caracteristică a unei entități, este denumită în terminologia bazelor de date câmp. Atributul definește o latură a entității (relației) și ia valori într-un domeniu asociat.

Fiecare atribut este caracterizat prin valorile pe care le ia și contribuie la identificarea entității al cărei parte este și la deosebirea ei de celelalte entități din aceeași clasă.

Valoarea atributului este cea mai mică unitate de date dintr-o entitate. Valorile atributelor nu pot fi decât cele cuprinse în domeniul atributului. Alte denumiri ale valorii atributului sunt valoarea celulei și valoarea datelor.

Figure 2.1 Exemplificare atribut, entitate și valoare.

CONCEPTUL „BAZĂ DE DATE”

Bazele de date au apărut din necesitatea de a avea un acces rapid și ușor la un volum din ce în ce mai mare de date.

Conceptul bază de date poate fi definit ca fiind una sau mai multe colecții de date aflate în interdependență, împreună cu descrierea datelor și a relațiilor dintre ele.

O bază de date reprezintă un ansamblu de date integrat, anume structurat și dotat cu o descriere a acestei structuri. Descrierea poartă numele de dicționar de date și realizează o relație între datele propriu-zise și programe.

Baza de date reprezintă mai mult decât o colecție de fișiere: ea include și dicționarul de date și o descriere a relațiilor dintre înregistrări (fișiere intercorelate). Descrierea este utilizată pe întreaga durată a prelucrării informațiilor.

Un fișier al unei baze de date este alcătuit dintr-un ansamblu de înregistrări fizice omogene sub aspectul conținutului și prelucrării.

Înregistrarea fizică este unitatea de transfer dintre memoria internă și cea externă a calculatorului și este formată din mai multe înregistrări logice.

Înregistrare logică este unitatea de prelucrare privită din punctul de vedere al programului utilizator și este alcătuită din mai multe câmpuri.

O bază de date reprezintă o colecție de date care sunt achiziționate cu un anumit scop și într-o structură specifică și trebuie să îndeplinească următoarele condiții:

să asigure o independență sporită a datelor față de programe;

să asigure informațiile necesare și suficiente scopului propus;

să se asigure o redundanță minimă (informații care nu se repetă);

să permită accesul rapid la informațiile stocate în baza de date.

Arhitectura bazelor de date se referă la componentele acestora și cuprinde:

baza de date propriu-zisă în care se memorează datele;

sistemul de gestiune al bazei de date care realizează gestiunea și prelucrarea complexă a datelor.

RELAȚIILE ÎNTRE TABELELE UNEI BAZE DE DATE

O bază de date este formată din mai multe tabele cu legături între ele.

Stabilirea relațiilor între tabele are în vedere îndeplinirea condițiilor pe care o bază de date trebuie să le îndeplinească în vederea prelucrării datelor din mai multe tabele.

În proiectarea unei baze de date este importantă stabilirea obiectelor reprezentate în baza de date și proprietățile care vor fi incluse; această operație este denumită modelarea datelor.

Scopul unui model de date este de a crea o reprezentare logică a structurii de date utilizată la crearea bazei de date. Realizarea unui model de date presupune:

determinarea structurii modelului;

definirea obiectelor (entităților) și a proprietăților asociate – atribute

stabilirea relațiilor între obiecte; se materializează printr-o legătură între o realizare a înregistrării dintr-un tabel numit părinte și una sau mai multe realizări ale înregistrării unui alt tabel numit fiu. Legătura între obiecte (entități) poartă numele de relație sau asociere. Între tabelele unei baze de date sunt trei tipuri de relații [12]:

unu la unu (one to one) – unei întregistrări dintr-un tabel îi corespunde prin relația stabilită o singură înregistrare în tabelul asociat. De multe ori acest tip de relație este privit și ca o împărțire a unui tabel în două tabele asociate din rațiuni de securitate (drepturi de acces) diferit pe anumite câmpuri.

unu la mai mulți (one to many) – unei înregistrări dintr-un tabel (părinte) i se pot asocia mai multe înregistrări din tabelul asociat (fiu); înregistrarea din tabelul fiu se asociază cu o singură înregistrare din tabelul părinte. De exemplu, într-o organizație, un departament are mai mulți angajați, un angajat este repartizat unui singur departament, este relație de tip 1:n, structură de tip arborescent sau unei înregistrări din tabelul clienților i se pot asocia multe înregistrări din tabelul conturilor, iar un cont aparține doar unui client.

mulți la mulți (many to many) – unei înregistrări dintr-un tabel părinte i se pot asocia mai multe înregistrări din tabelul cu care se află în relație, tabelul fiu.

stabilirea operatorilor care acționează asupra structurii de date; pot fi operatori de citire, memorare, modificare, joncțiune etc.

BAZE DE DATE RELAȚIONALE

O bază de date relațională are la bază modelul relațional, adică este alcătuită din unul sau mai multe tabele organizate ierarhic, între care s-au stabilit anumite relații. Relațiile între două tabele sunt unidirecționale, astfel că o tabelă devine principală, iar cealaltă devine subordonată.

Pentru desemnarea unei structuri relaționale de tabele se va utiliza noțiunea de bază de date relațională. Noțiuni de bază în baze de date relaționale [12]:

Cheia primară este constituită dintr-un atribut (coloană din tabel) ale cărui valori identifică în mod unic un rând (o înregistrare) dintr-o tabelă de bază. Pentru orice valoare a cheii primare corespunde un rând și numai unul în tabel. Cheia compusă (concatenată) se creează atunci când cheia primară este compusă din mai multe câmpuri care asigură unicitatea; de exemplu, numărul și data unei facturi.

Cheia candidată este o coloană (un atribut) care îndeplinește condițiile cerute pentru a deveni cheie primară (CNP din tabelul cititorilor cu cheia primară numărul din registrul cititorilor).

Cheia externă este o coloană ale cărei valori corespund celor conținute de cheia principală sau de porțiunea cea mai din stânga a unei chei compuse dintr-o tabelă asociată. O cheie externă poate fi constituită dintr-o coloană sau un grup de coloane.

Tabele specifice bazelor de date relaționale:

Tabela de bază (principală) este o tabelă care conține una sau mai multe coloane ce conțin proprietățile unui obiect și o coloană sau grup de coloane, numită cheie primară, care identifică în mod unic obiectul entitate date. O bază de date relațională poate avea una sau mai multe tabele principale.

Tabela de relații (relationships) este o tabelă utilizată pentru a stabili relațiile între tabela (sau tabelele) de bază și tabele secundare. Fiecare câmp cheie din tabela de relații trebuie să fie o cheie externă asociată unei chei principale din tabela de bază.

FAMILIARIZARE CU BAZELE DE DATE MySQL

Bazele de date sunt de fapt, colecții de date toate aranjate în forme, asupra cărora se pot face diferite operații precum:

creare de bază de date (BD);

conectare la baza de date;

înserare de date în baza de date;

ștergere de date din baza de date;

adaugare și/sau modificare de date;

căutare după anumite criterii în baza de date;

generare și listare de rapoarte, etc.

O bază de date este formată din una sau mai multe tabele, între care se pot stabili relații, acest lucru oferind bazei de date proprietatea relațională.

Sistemul de gestiune a bazelor de date (SGBD) MySQL este un sistem des folosit împreună cu limbajul de programare PHP care va fi prezentat în capitolul următor, cu ajutorul cărora se pot construi aplicații în orice alt limbaj major.

Există multe scheme API disponibile pentru MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, precum: C, C++, C#, Java, Perl, PHP, Python, etc., fiecare dintre acestea folosind un tip specific API.

O interfață de tip ODBC denumită MyODBC permite și altor limbaje de programare ce folosesc această interfață, să interacționeze cu bazele de date MySQL (ex. ASP sau Visual Basic). [12]

Una dintre aplicațiile prin care se poate administra sistemul MySQL este aplicația PHPMyAdmin, cel mai important mod de administrare fiind însă cel dat de PHP prin utilizarea formularelor.

COMENZI UZUALE ȘI TIPURI DE DATE UTILIZATE ÎN MySQL

Printre comenzile uzuale utilizate în SGBD MySQL cele mai importante sunt:

CREATE – crează o bază de date și/sau un tabel

DROP – șterge o bază de date și/sau un tabel

INSERT – adaugă înregistrări(linii) într-un tabel

DELETE – șterge înregistrări(linii) într-un tabel

UPDATE – modifică înregistrările dintr-un tabel

SELECT – selectează înregistrările dintr-un tabel

ALTER – modifică proiectul unui tabel după ce acesta a fost creat cu instrucțiunea CREATE TABLE

Printre tipurile de date uzuale utilizate în SGBD MySQL cele mai importante sunt:

șiruri de caractere

Char – char[(n)] – secțiune cu lungime fixă de max. 255 caracter

Varchar – varchar[(n)] – secțiune variabilă de max 255 caractere

Text – text[(n)] – maxim 65535 caractere

numerice

Int – int[(n)] – număr întreg

float – număr real mic

double – număr real mare

decimal(n,d) – numărul este stocat sub formă de șir de caractere. Parametrul n reprezintă numărul de cifre nenule aflate înaintea virgulei (cu tot cu semnul ’–’ pentru numerele negative, dacă este cazul) iar d reprezintă numărul de zecimale

dată și oră

year – anul calendaristic

date – ’yyyy-mm-dd’ – data calendaristică

time – ’hh:mm:ss’ – ora

datetime – ’yyyy-mm-dd hh:mm:ss’ – data calendaristică și ora

OPERATORI UTILIZAȚI ÎN MySQL

Operatori aritmetici:

acționează asupra tipurilor numerice și furnizează o valoare de tip numeric:

+ – adunare;

– – scădere;

* – înmulțire;

/ – împărțire cu zecimale;

div – împărțire cu zecimale;

mod și % – împărțire cu zecimale;

– și + – operatorii unari plus și minus;

Operatori de comparare (sau relaționali):

permit compararea a două valori numerice sau a două șiruri de caractere rezultatul fiind 1 pentru adevărat și 0 pentru fals.

< – mai mic (2<3 are ca rezultat valoarea 1);

<= – mai mic sau egal (3<=3 are ca rezultat valoarea 1);

– mai mare (2>3 are ca rezultat valoarea 0);

>= – mai mare sau egal (2>=3 are ca rezultat valoarea 0);

= – egalitate (2=3 are ca rezultat valoarea 0);

!= – diferit (2<>3 sau 2!=3 are ca rezultat valoarea 1);

c) Operatori logici:

în MySQL se consideră că valoarea logică 0 joacă rolul lui false și orice valoare diferită de 0 joacă rolul lui true.

|| sau or – sau-ul logic (este 0 doar când ambii operanzi sunt 0, în rest este 1);

&& sau and – și-ul logic (este 1 doar când ambii operanzi sunt nenuli, în rest este 0);

not – negație (negația lui 0 este 1, iar negația lui 1 este 0);

xor – sau-ul exclusiv (este 0 când ambii operanzi sunt fie nuli, fie nenuli, și este 1 în rest);

d) Operatori logici pe biți:

se aplică tuturor tipurilor întregi și acționează asupra tuturor biților aflați pe poziții corespondente.

| – sau-ul pe biți;

& – și-ul pe biți;

^ – sau-ul exclusiv pe biți;

~ – negația pe biți;

e) Operatori de deplasare pe biți:

se aplică tuturor tipurilor întregi, deplasând biții reprezentării binare:

<< – deplasare stânga a<<b deplasează cu b poziții la stânga biții lui a;

>> – deplasare dreapta a>>b deplasează cu b poziții la dreapta biții lui a;

f) Operatori specifici pentru MySQL:

is null, is not null – testează dacă o valoare este sau nu null;

in, not in – testează dacă o valoare aparține sau nu unei mulțimi (1 in (1,2,3,4) are valaorea 1 și 5 in (1,2,3,4) are valoarea 0;

like, not like – testează dacă un șir de caractere are o anumită formă:

dacă este prefixat respectiv postfixat sau nu de un anumit subșir,

dacă acesta conține un anumit subșir.

between min and max – testează dacă o valoare se găsește în intervalul închis cu capetele min și max. (1 between 0 and 4 – are valoarea 1);

case .. when .. then .. else .. – are două forme sub care se poate aplica:

forma 1: case v

when v1 then val1

. . .

when vn then valn

else valn+1

end

forma 2: case

when cond1 then val1

. . .

when condn then valn

else valn+1

end.

CREAREA ȘI CONECTAREA LA O BAZĂ DE DATE ÎN MySQL

Această operație poate fi executată doar de utilizatori cu drepturi speciale.

Comanda pentru crearea unei baze de date este:

create database nume_bază_date;

Pentru a lucra cu o anumită bază de date, se va da comanda:

use nume_bază_date;

Ștergerea unei baze de date:

drop database nume_bază_date;

Vizualizarea bazelor de date existente:

show databases;

Orice comandă scrisă în linia de comandă trebuie să fie terminată cu „;”

Pentru conectarea la o baza de date vom folosi scriptul de mai jos:

<?php

$host="localhost"; //host-ul

$user="root"; //userul

$password="pass"; //parola

$database="t1"; //baza de date

$conexiune=mysql_connect($host,$user,$password)

or die ("Nu ma pot conecta la baza de date");

$bazadate=mysql_select_db($database,$conexiune)

or die ("Nu gasesc baza de date");

?>

mysql_connect() – funcția prin care se realizează conectarea la serverul MySQL

mysql_connect($conexiune) – în funcție de rezultatul conectării, va avea valoarea TRUE sau FALSE

mysql_select_db – funcția care stabilește la ce bază de date se va realiza conectarea

mysql_close($conexiune) – funcția care închide baza de date

TABELE

Într-o tabelă coloanele sunt identificabile prin nume, iar rândurile, prin valorile pe care le memorează. O tabelă are un număr specificat de coloane, însă are un număr nespecificat de rânduri. Uneori, când ne referim la un rând, folosim și termenul de înregistrare, iar atunci când ne referim la data din rând, situată într-o anumită coloană, folosim și termenul de câmp. (noțiunile au fost prezentate în capitolele anterioare).

Instrucțiunea prin care se poate crea o tabelă:

create table nume_tabelă

( nume_coloană1 tip_date [specificatori],

nume_coloană2 tip_date [specificatori],

…

nume_coloanăn tip_date [specificatori]

);

ce este trecut între paranteze drepte reprezintă clauze, atribute sau bucăți de instrucțiune care, din punct de vedere sintactic pot să nu apară.

specificatorii se referă la cheia primară, valori distincte, valori implicite, autoincrementare.

Instrucțiunea prin care se adaugă un rând într-o tabelă

insert into nume_tabelă values(valoare1,valoare2,…,valoaren);

sau

insert into nume_tabelă(nume_coloană1,nume_coloană2,…,nume_coloanăk)

values(valoare1,valoare2,…,valoarek);

Instrucțiunea prin care se afișează întreaga tabelă:

select * from nume_tabelă;

Instrucțiunea prin care se afișează doar anumite coloane ale tabelei:

select nume_coloana1,…,nume_coloanak from tabelă;

Instrucțiunea prin care se listează numelor tuturor tabelelor din baza de date:

show tables [from nume_bază_date];

Instrucțiunea prin care se afișează o descriere detaliată a unei tabele:

describe nume_tabelă;

show columns from nume_tabelă;

LIMBAJ DE PROGRAMARE PHP

Deseori în realizarea site-urilor web dinamice, pe lângă limbajul de marcare HTML cu ajutorul căruia sunt create paginile statice, se utilizează și limbajul de programare PHP prin care pot fi create și paginile dinamice, pagini în care apare elementul de interactivitate, de exemplu posibilitatea preluării datelor din formulare realizate în PHP, citirea, prelucrarea și afișarea. Totodată se poate face interacțiunea cu o bază de date creată pe un server.

Numele PHP provine din limba engleză și este un acronim recursiv: Php: Hypertext Preprocessor. Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în principal înglobat în codul HTML.

Este unul din cele mai importante limbaje de programare web open-source și server-side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare. Conform statisticilor este instalat pe 20 de milioane de situri web și pe 1 milion de servere web.

Astfel folosind PHP putem genera și manipula coduri HTML dar putem trimite headere HTTP pentru autentificare, putem seta cookie-uri sau redirecționa utilizatorii după diverse criterii dorite.

Pentru a putea lucra cu PHP trebuie în primul rând să avem acces la un server pe care rulează PHP (acesta poate fi server separat sau server virtual creat pe calculatorul personal).

Datorită necesității testărilor aplicațiilor făcute, înaintea publicării în mediul online, au fost necesare soluții de rularea fișierelor PHP și local (pe calculatorul personal). Pentru aceasta trebuiesc îndeplinite două condiții esențiale:

instalalarea pe PC, pe lângă limbajul PHP și a unui server de web;

realizarea legăturii dintre cele două.

Unul dintre pachetele oferite gratuit (open-source), disponibile pe Internet, este XAMPP. Numele acestui pachet, foarte simplu de instalat, este un acronim pentru:

XAMPP:

X de la "cross", care înseamnă cross-platform

A de la Apache HTTP Server

M de la MySQL

P de la PHP

P de la Perl

Se vede că acest pachet de programe conține mai multe aplicații printre care, ce ne interesează sunt:

serverul Apache pentru http;

serverul de MySQL;

suport pentru limbajul PHP.

Pentru instalarea și rularea pachetului XAMPP, cerințele tehnice sunt minimale. Este suficient un Windows 2000, XP sau Vista și pachetul XAMPP va rula fără probleme.

SCURT ISTORIC AL VERSIUNILOR PHP

1995 – Personal Home Page Tools – Rasmus Lerdorf

1995 – PHP/FI 2.0

1998 – PHP 3 – începe să fie dezvoltat de Zend

Zeev Suraski & Andi Gutmans

2000 – PHP 4 – motor de procesare Zend

(2002-2003) – PHP 4.3 – motor de procesare Zend 2.0

2004 – PHP 5 – multe facilități inspirate din Java

PHP 6 (în dezvoltare)

Spre deosebire de documentele HTML care pot fi deschise de orice utilizator folosind un simplu navigator web , un document PHP necesită instalarea unui interpretor PHP pe serverul HTTP. Server de aplicații Web oferă un limbaj de programare de tip script, interpretat poate fi inclus direct și în cadrul documentelor HTML.

FUNCȚIONAREA PROCESORULUI PHP

După cum a mai fost menționat, pentru a fi recunoscut de serverul HTTP un fișier PHP trebuie să aibă extensia .php.

Figure 2.2 Schema bloc. [1]

La accesarea documentului de un utilizator interpretorul PHP parcurge codul sursă al documentului până ajunge la tag-ul care marchează începutul codului PHP ( <?php ). Din acel moment codul este interpretat ca un cod PHP până la închiderea tag-ului ( ?>)

În codurile PHP putem creea variabile pe care le putem apela de câte ori dorim. Pentru a creea o variabilă începem cu simbolul “ $ ” urmat de numele acesteia care trebuie să înceapă cu o literă sau underscore. Utilizarea variabilelor este limitată doar de scopul în care dorim să folosim funcția.

$exemplu=” Acesta este un exemplu “;

PHP-ul este un limbaj de programare foarte permisiv nefiind nevoiți să declarăm ce tip este variabilă când o creem, de asemenea putem ajunge la același rezultat prin mai multe metode depinzând de module de gândire a fiecarui programator.

La creearea unui cod PHP ghilimelele se folosesc în perechi "…" sau '…', folosirea lor "…' sau '…" constituie o eroare.

Limbajul PHP folosește structuri de control aceastea permițând definirea unei condiții care va declașa operațiunea în funcție de condițiile puse.

Condițiile sunt încadrate în paranteze rotunde iar instrucțiunea care se execută în funcție de condițiile îndeplinite este încadrată de acolade. Dintre cele mai importante condiții amintim: if , else, elseif , while , for, include, break, require, ș.a.

Instrucțiunea condițională if este cea mai folosită, else este altă instrucțiune condițională care indică ce se execută în cazul în care condiția menționată în instrucțiunea if nu este îndeplinită. Elseif este o combinație între if și else. În cazul în care condiția if nu este îndeplinită se introduce elseif care definește încă o condiție. Dacă nu este îndeplinită a doua condiție se execută declarația introdusă prin else.

Comanda include și require sunt două comenzi indentice folosite pentru a integra un cod PHP scris în alt fișier în fisierul PHP la care lucram. În principiu aceste comenzi fac același lucru singura diferență este când apare o eroare:

Include va produce doar un avertisment (E_WARNING) și codul va continua să ruleze.

Require va produce o eroare fatală (E_COMPILE_ERROR) și va oprii codul.

Variabilele get și post sunt folosite pentru a aduna informațiile dintr-un formular. Deși în principu au acelasi rezultat exită unele diferențe.

get – informațiile colectate din formular sunt vizibile tuturor în bara de adresă a navigatorului web și limita de informații trimise este de 2000 de caractere.

post – informațiile colectate din formular nu sunt vizibile în bara de adresă a navigatorului web și nu există limită pentru informațiile trimise.

De asemenea PHP-ul poate fi folosit pentru a manipula baze de date ( MySql sau alte tipuri de baze de date ). Astefel putem creea variabile care să includă anumite query-uri sau putem creea form-uri care pot scrie direct în baza de date informațiile introduse.

Creeare unei variabile ce conține un query MySql permite culegerea informațiilor dintr-o bază de date. $q = mysql_query("SELECT * FROM tabel");

Folosirea limbajului PHP ne permite executarea unor operații asupra fisierelor aflate pe server. Putem deschide (fopen), închide (fclose), citii (fread), scrie (fwrite) sau indica dimensiunea unui fișier(filesize).

STRUCTURA UNUI FIȘIER PHP

Codul PHP poate fi scris folosind orice editor de texte, de exemplu editorul Notepad. Lansarea în execuție a programului scris se face utilizând un browser (de exemplu Internet Explorer) în care se va scrie în bara de adrese:

http://localhost/<nume_fisier.php>.

Figure 2.3 Structura unui fișier .php.

Spre deosebire de fișierele .html care pot fi deschise imediat ce au fost create pe discul local direct în browser-ul de Internet, lansarea în execuție a unui cod PHP se realizează după ce fișierele sunt puse în directorul în directorul rădăcină al documentelor web. Un fișier care conține un script PHP trebuie să fie salvat cu extensia .php.

În figura 2.2 este prezentată structura unui fișier .php din care se poate observa asemanarea cu fișierele .html. Diferența între cele două este dată de scriptul PHP, care este inserat între tag-urile colorate în roșu: „<?php” și „?>” (Figura 2.2).

Instrucțiunea „echo” cuprinsă între acestea este o instrucțiune specifică limbajului PHP și are rolul de a scrie în pagina web textul ce este cuprins între ghilimele.

Rezultatul vizualizat în pagina de browser este prezentat în figura 2.3.

Figure 2.4 Vizualizare în browser.

Prin lansarea directă a fișierului care are extensia .php (cu clic pe el), prezent în figura 2.3, conținutul afișat în browser va fi cel prezentat în figura 2.4.

Figure 2.5 Rezultatul instrucțiunii echo din codul php prezentat în figura 4.2.

VARIABILE, CONSTANTE ȘI OPERATORI ÎN PHP

Constantele recunoscute de limbajul PHP sunt asemănătoare cu cele recunoscute de limbajul C:

constante numerice întregi și reale;

constante de tip caracter și șir de caractere

Caracterele speciale sunt aceleași ca și în C: \n, \\, \’, \” și altele.

constante de tip bool: false și true.

Definirea constantelor de către utilizator, se face cu ajutorul funcției define care are următoarea sintaxă:

define(”nume constanta”, valoare);

Variabilele sunt mărimi ce pot lua diferite valori. În PHP numele variabilelor începe cu caracterul ”$” urmat de o literă sau de caracterul ”_”, nicidecum de o cifră.

Spre deosebire de C, variabilele nu se declară la început, ci tipul lor este definit prin valoarea atribuită variabilei inițiale.

O variabilă este definită astfel:

$<variabila>=<valoare>;

Variabile predefinite

$_SERVER['REMOTE_ADDR'] – afișează adresa IP a vizitatorului

$_SERVER['HTTP_USER_AGENT'] – afișează informații despre browserul folosit

$_SERVER['HTTP_REFERER'] – afișează pagina vizitată anterior

$_SERVER['SERVER_NAME'] – afișează numele serverului

$_SERVER['SCRIPT_NAME'] – afișează numele scriptului

Mulți dintre operatorii limbajului PHP sunt cunoscuți din C++. În continuare se va realiza o trecere succintă prin operatorii întâlniți în PHP.

Operatori aritmetici:

acționează asupra tipurilor numerice și furnizează o valoare de tip numeric:

+ – adunare;

– – scădere;

* – înmulțire;

/ – împărțire cu zecimale;

mod și % – împărțire cu zecimale;

Operatori de comparare:

permit compararea a două valori numerice sau a două șiruri de caractere rezultatul fiind TRUE pentru adevărat și FALS pentru fals.

< – mai mic ($a<$b are ca rezultat valoarea TRUE);

<= – mai mic sau egal ($a<=$b are ca rezultat valoarea TRUE);

> – mai mare ($a>$b are ca rezultat valoarea TRUE);

>= – mai mare sau egal ($a>=$b are ca rezultat valoarea TRUE);

= = – egalitate ($a= =$b are ca rezultat valoarea TRUE);

= = = – identic ($a= = =$b are ca rezultat valoarea TRUE);

<> – diferit ($a<>$b are ca rezultat valoarea TRUE);

!= – diferit ($a!=$b are ca rezultat valoarea TRUE);

Operatori logici:

în MySQL se consideră că valoarea logică 0 joacă rolul lui false și orice valoare diferită de 0 joacă rolul lui true.

|| – sau-ul logic ($a||$b are ca rezultat valoarea TRUE);

or – sau-ul logic ($a or $b are ca rezultat valoarea TRUE);

&& sau and – și-ul logic ($a && $b are ca rezultat valoarea TRUE);

not sau ! – negație ($a!$b are ca rezultat valoarea TRUE);

xor – sau-ul exclusiv ($a xor $b are ca rezultat valoarea TRUE);

INSTRUCȚIUNI ÎN PHP

instrucțiunea if: if(expresie) instrucțiune1;

[else instrucțiune2;]

Instrucțiunea while while(expresie) instrucțiune;

Instrucțiunea do…while. do

instrucțiune;

while(expresie);

Instrucțiunea for.

for(expresieinițializare;expresiecontinuare;expresieincrementare) instrucțiune;

LUCRUL CU FIȘIERE ÎN PHP

Prin utilizarea limbajului de programare PHP, se pot executa anumite operații asupra fișierelor aflate pe server cum ar fi:

fopen() = deschide fisierul indicat

fclose() = inchide fisierul

fread() = citeste continutul fisierului

fwrite() = scrie in fisier

filesize() = indica dimensiunea fisierului

PROGRAMAREA GRAFICĂ ÎN PHP

Programarea grafică reprezintă una dintre cele mai spectaculoase componente ale multor limbaje de programare, care constă în crearea și manipularea imaginilor.

Prin utilizarea limbajului de programare PHP se poate lucra cu diferite formate de imagini, incluzând gif, png, jpg, se poate genera o imagine sub forma unui flux de date (făra a o înregistra sub forma unui fișier pe server) direct către browser, etc.

Pentru a face funcțional suportul grafic al limbajului, este necesară utilizarea bibliotecii gd2 care, în cazul pachetului XAMPP, este instalată și activată în mod implicit.

header(string) – are ca efect trimiterea browser-ului informații despre mime-type-ul imaginii create. String-ul poate lua următoarele valori:

“Content-type: image/png” – pentru imaginile de tip png

“Content-type: image/jpeg” – pentru imaginile de tip jpg

“Content-type: image/gif” – pentru imaginile de tip gif

imagecreatetruecolor(lățime, înălțime)- creează o resursă de tip imagine, pe 32 de biți (truecolor) având lățimea, respectiv înălțimea specificată.

imagecolorallocate(resursă_imagine, roșu, verde, albastru)- creează o resursă de tip culoare, asociată imaginii specificată prin resursa din primul parametru.

imagesetthickness(res_imag, thickness) – stabilește grosimea liniilor la thickness pixeli, atunci când se desenează linii, dreptunghiuri, poligoane;

imageline(resursă_imagine,x0,y0,x1,y1,resursă_culoare) – desenează un segment de dreaptă, de culoarea specificată de resursă_culoare

imagedashedline(resursă_imagine,x0,y0,x1,y1,resursă_culoare) – la fel ca imageline, doar că segmentul de dreaptă desenat este punctat.

imageellipse(resursă_imagine,x0,y0,diam_x,diam_y,resursă_culoare) – desenează o elipsă;

imagerectangle(res_imag,x0,y0,x1,y1,res_culoare) – desenează un dreptunghi

imagechar(res_imag,font,x0,y0,caracter,res_culoare) – afișează în imagine caracterul caracter

LIMBAJ DE MARCARE HTML

Când vorbim de tehnologie web, vorbim de tot ce se află "în spatele" aplicațiilor pe care le dezvoltăm și anume:

platforme soft;

limbaje și framework-uri;

concepte de programare;

tehnici de prelucrare a informației.

Așadar, fie că este vorba de:

platformele pe care ne dezvoltăm aplicațiile;

bazele de date;

mediile și uneltele software pe care le utilizăm;

algoritmii, funcțiile și procedurile pe care le gândim;

standardele pe care trebuie să le respectăm pentru dezvoltarea acestora

toate acestea țin de tehnologiile web.

Utilizăm constant:

PHP și MySQL, Flash, Papervision și Actionscript, HTML și CSS, Java și JavaScript;

librării dinamice de genul YUI, mootools sau jquery;

content sharing prin RSS/API;

CMS open-source: WordPress, Joomla;

CMS custom-made: Adkontent, shopping carturi personalizate, sisteme de e-commerce "white label", sisteme de afiliați;

sisteme de e-payment prin card sau prin SMS via web sau prin telefonul mobil, platforme de server Microsoft sau Apache.

Termenul HTML – HyperText Markup Language tradus din engleză ca “Limbajul de marcare a hipertextului”.

Prima versiune HTML a fost realizată de Tim Berners-Ly – colaboratorul Laboratorului European pentru fizica particulelor elementare. Ca orice alt limbaj, HTML a cunoscut o dezvoltare continuă. Astfel, au apărut versiunile 2.0, 3.0, 4.0.

CERINȚE NECESARE ÎN VEDEREA REALIZĂRII DE HTML

experiență de utilizare a calculatorului la nivel de procesor de text precum Notepad, WordPad, Microsoft Word sau altele;

experiență de utilizare a aplicațiilor grafice cum ar fi Adobe PhotoShop, Corel PhotoPaint, etc;

cunoștințe în clasificarea caracterelor digitale, a noțiunilor de codificare binară și cod binar al caracterelor;

cerințe software:

un procesor de text în care se prelucrează sursa documentului;

un program browser în care se realizează controlul rezultatelor programării (Microsoft Internet Explorer, Netscape Communicator, Opera, Crome, etc.).

După acumularea experienței de creare a documentelor electronice se poate trece la un soft specializat pentru programare HTML, cum ar fi, de exemplu, Macromedia Flash.

CREAREA DOCUMENTELOR HTML

Există două principii de creare a documentelor HTML:

Tehnologia închisă. Se utilizează sisteme de tipul WYSIWYG (What You See Is What You Get) – ce vezi este ce primești (Microsoft Front page, Word, Netscape Editor). Utilizatorul nu are acces la sursa documentului. El vede doar rezultatul.

Tehnologia deschisă. Procesoare HTML propriu-zise. Utilizatorul îndeplinește rolul de programator. Crearea documentului este realizată direct prin modelarea sursei și utilizarea instrucțiunilor limbajului.

Documentele HTML sunt fișiere text obișnuite care au extensia *.html. Cel mai simplu document HTML are următoarea structură:

Structura paginilor de tip HTML este formată din două parți principale, head și body, după cum se poate observa în figura 2.1 în și exemplul de mai jos.

Figure 2.6 Structura unui document HTML.

Un exemplu de document HTML cu structură elementară este prezentat mai jos:

<html>

<head>

<title> Exemplul 1 </title>

<H1> Exemplul 1 </H1>

</head>

<body>

<H1> SALUT! </H1>

<P> E primul pas în lumea publicațiilor electronice.

</P>

<P>

<B> Exercitiu </B> Scrieți acest fișier într-un procesor de texte, salvați-l, și deschideți o copie a lui în Internet Explorer.

</P>

</body>

</html>

Figure 2.7 Vizualizarea grafică a codului HTML.

Orice pagină HTML începe cu tag-ul <html> care la rândul său conține alte două tag-uri principale: head și body. O pagină HTML se temină întotdeauna cu tag-ul </html> tag care determină sfârșitul codului HTML și implicit al paginii.

Tag-ul <head> conține tag-ul <title>. Astfel folosind codul <title> Titlul tau </title> în bară de titlu a navigatorului web va apărea ce este între tag-urile title și anume: Titlul tau . Dacă acest tag lipsește, în bară de titlu a navigatorului web va fi afișat numele fișierului HTML.

Tag-ul head mai poate conține următoarele tag-uri:

<style> … </style> – definește stilul în care sunt afișate informațiile din document.

<style> … </style> – utilizat pentru introducerea unor secvențe de program de scriptare în document.

<base> … </base> – definește baza pentru toate linkurile relative din document.

<link> … </link> – definește legătura dintre document și o resursă externă. Tagul este des folosit pentru a lega documentul de un css extern.

<meta> … </meta> – definește informații despre document. Chiar dacă nu sunt afișate ele sunt procesate și sunt deseori folosite pentru a descrie documentul, cuvinte cheie, autor sau alte informații .

Tag-ul <body> … </body> este după cum spune și traducerea cuvântului corpul documentului HTML. Acesta conține toate informațiile ce vor fi afișate de navigatorul web când documentul va fi accesat.

Acest tag poate primii următoare atribute:

background – indică o imagine care dorim să apară pe fundal.

link – definește culoarea link-urilor nevizitate.

<body link="blue">

alink – definește culoarea link-urilor active.

<body alink="red">

vlink – definește culoarea link-urilor vizitate.

<body vlink="green">

background – definește o imagine de fundal pentru document.

<body background="poza.jpg">

bgcolor – definește o culoare de fundal pentru document.

<body bgcolor="#E6E6FA">

text – definește culoarea textului din document.

<body text="green">

În interiorul tag-ului <body> pot fi folosite numeroase alte tag-uri dintre care enumeram cele mai inportante:

Tagul <div> definește o secține intr-un document HTML. Poate fi folosit să grupeze blocuri din document pentru a fi formatate folosind CSS. În exemplu de mai jos vom avea o secțiune în care textul va fi colorat în albastru.

Folosind tagul < font > putem definii ce font folosim, ce culoare are sau ce mărime are acesta.

Principalele atribute:

color – definește culoarea fontului

face – definește fontul folosit

size – definește marimea fontului

Pentru a insera un formular într-un document HTML se foloseste elementul

< form > acest tag folosește atât partea de client cât și partea de server pentru a procesa informațiile.

Poate conține următoarele tag-uri

<input> – definește tipul de infomație care poate fi introdusă.

<textarea> – definește un camp de text cu mai multe randuri.

<button> – definește un buton care poate fi click-uit

<select> – este folosit pentru a creea o listă de tipul drop-down.

<optgroup> – creează grupuri intr-o listă de tipul drop-down.

<fieldset> – este folosit pentru a grupa elementele cu legături dint-un form.

<label> – genereaza o lista de optiuni cu o singură varianta de alegere.

<img> – folosit pentru a insera o imagine în documentul HTML.

Are două atribute abligatorii: src și alt. Alte atribute ce îi pot fi atribuite: align, border, hspace, vspace.

Tagul <input> este atribuit tuturor câmpurilor destinate introducerii datelor într-un formular. Există zece tipuri de câmpuri ce pot fi introduse. Acestea sunt: text, submit, image, password, hidden, checkbox, reset, radio, file și buton.

Dacă dorim ca un text să fie afișat asa cum este scris în codul HTML vom folosi perechea de taguri <pre>…..</pre>.

Putem creeea și liste, aceastea pot fi ordonoate ( <ol> , elementele vor fi numerotate), neordonate ( <ul>, elementele vor avea un bullet ) și definite ( <dl>, care conține o secvență de descrieri, referințe sau indexuri ). Liste pot conține un număr nelimitat de obiecte.

Se pot creea trimiteri către obiecte din document sau către pagini externe folosind tagul <a>.

Listele pot avea diferite atribute dintre care admintim următoarele atribute :

type: definește tipul de bullet folosit

value: stabilește valoarea unui element din listă

Folosirea tagului <frame> ne permite afișarea unei pagini web externe în interiorul documentului nostru.

Tabelele reprezintă în HTML un element foarte important fiind marcate de tagurile <table>….</table>. Ele pot fi folosite pentru formatarea și împarțirea paginii.

Alte tag-uri HTML importante:

<b> / <strong> – creează text bold.

<h1> – <h6> – h1 definește cel mai important titlu iar h6 definește cel mai puțin important titlu.

<hr> – creează o linie orizontală.

<i> – creează text italic.

<p> – definește un paragraf.

<img> – inserează o poză în documentul HTML

INTERFAȚA WEB

TIPURI DE DESIGN

Site-urile web sunt proiectate în concordanță cu necesitățile clientului. Se poate realiza o clasificare a acestora după gradul de dificultate pe care îl prezintă site-ul, după funcționalitățile și designul caracteristic domeniului.

Astfel avem următoarele categorii:

Blog – site creat pentru categoria celor care au diverse pasiuni și pe care doresc să le împărtășească cu toți vizitatorii blogului cu interese comune.

Site de prezentare – caracteristica acestuia este numărul mic de pagini pe care îl are în componență. Acesta reprezintă așa numita “cartea de vizita” a companiei care își prezintă serviciile, produsele, echipa și alte informații reprezentative caracteristice care să ii permită creșterea/dezvoltarea afacerii. La acesta se pot adauga funcționalități precum galeria de imagini, social media, indicarea locației prin harta Google Places.

Magazin on-line – este un site de prezentarea produselor/serviciilor firmei la care se adaugă elementul de vânzare online. Din punctul de vedere al programării este mai complex decăt un site simplu de prezentare firma. Mai sunt numite și site-uri de tip e-commerce. Acestea se realizează la comandă personalizate pe direcția firmei și au în structura lor elementele unui magazin on-line precum: categorii de produse, pagina de produs, cos de cumparaturi, etc. Pentru un succes cât mai mare este indicat ca interfața acestuia să fie prietenoasă cu utilizatorul.

Portal de știri online – acestea sunt site-uri actualizate zilnic care prezintă știrile și evenimentele cotidiene.

Aplicație management – sunt site-uri specializate realizate strict pentru client cu acces limitat și direcționat pe departamentele companiei.

GRAFICA ȘI INTERFEȚELE WEB

Interfața poate avea un design atât pe partea stângă, dreaptă cât și/sau pe zona de centru a paginii iar navigarea cel mai frecvent este întâlnită pe verticală dar poate fi și pe orizontală (caz destul de rar întâlnit). Una dintre caracteristicile importante ale unei interfețe fluide este lățimea variabilă procentual.

Designerul într-o aplicație precum Photoshop, trebuie să ia în calcul și să aibă o privire de ansamblu asupra designului interfeței implementată în final. Dacă dorește să aibă o interfață fluidă atunci elementele vizuale și structura vizuală trebuie gândite astfel încât să permită implementarea propriu-zisă. În principal trebuie avut în vedere cum vor fi transformate în bitmap și tranșate imaginile, astfel încât să arate la fel.

Cateva dintre aspecte importante care trebuie luate în calcul încă din faza de proiectare, sunt:

modul în care se poate lăți interfața,

redimensionarea elementelor precum și a căror elemente trebuie să acționeze această redimensionare,

alegerea imaginilor care trebuie să fie repetitive sau să permită lățirea interfeței

menținerea proporțiilor tuturor elementelor care se vor redimensiona atunci când intervine lățirea excesivă.

HTML și CSS sunt tehnologii web standard client side, care rulează pe calculatorul utilizatorului de Internet. Însă, funcționalități mai mult sau mai puțin avansate sunt implementate folosind tehnologii server side, care rulează pe calculatorul de la distanța de tip server: PHP, ASP, mySQL, etc. Aceste tehnologii permit implementarea celor mai cunoscute funcționalități pe site-uri: schimbarea limbii, căutare, hartă site, conturi, etc. La nivel de interfața se poate folosi de exemplu PHP pentru a implementa funcționalități ce țin de modul de interacțiune cu site-ul: meniuri în cascadă, sugestii pentru termenii de căutare, încărcare a unor secțiuni din site în mod dinamic, etc. O altă tehnologie frecvent utilizată este Adobe Flash pentru interfețe interactive și în special pentru integrarea de video-uri pe web.

PROIECTAREA EFICIENTA A INTERFEȚEI WEB

Recapitulând, interfețele grafice au fost concepute și proiectate în scopul oferirii utilizatorilor unui grad mai mare de confort în obținearea informațiilor căutate și gestionate de pe și pe net. La ora actuală utilizatorii/vizitatorii au așteptări de calitate la nivel înalt, al design-ului unei interfete grafice, incluzând și design-ul unei pagini web.

Având în vedere cele prezentate, proiectarea interfeței web trebuie adaptată tehnologiilor noi apărute în scopul îndeplinirilor tuturor cerințelor vizitatorilor/utilizatorilor care să nu îi forțeze pe aceștia să se conformeze unei interfețe greoaie și să depună efort la obținerea informațiilor căutate.

Ca și dezvoltatori dorim să controlăm orice interacțiune a utilizatorului cu site-ul. Aceasta ne permite un control permanent al site-ului dar utilizatorii nu se vor simți confortabili astfel încât există riscul să îi pierdem. Utilizatorul nu dorește sa se simta controlat, iar aplicatia trebuia sa fie dirijata de evenimente initiate de utilizator in loc de a avea aplicatia ca dictator al urmatoarelor evenimente.

Implementarea unui design responsive asigură adaptarea automată a interfeței site-ului spre afișare și utilizare ergonomică pe telefon sau tabletă.

Dispozitivele mobile au devenit cotidiene pentru succesul online iar site-ul este indicat să poată fi afișat în mod corect pe acestea. O interfață de calitate bine proiectată, trebuie să permită detecția diferitelor dispozitive precum tablete, telefoane sau calculatoare și obligatoriu să se adapteze conform noilor dimensiuni. Designer-ul va trebui să gândească interfața pentru mai multe dimensiuni. [10, 11, 17]

Aceasta metodă a fost discutată prima oară de către Ethan Marcotte în anul 2010, publicație în articolul Responsive Web Design în care spune ca Responsive Web Design nu este doar o nouă simplă metodă de realizarea website-urilor ci un nou mod de gândire.

Prin tehnica Responsive Web Design utilizatorii internetului sunt ajutați prin oferirea unui website adaptabil în funcție de rezoluția dispozitivului folosit pentru vizualizarea acestuia. Aceast lucru se obține prin folosirea de media query-uri de CSS3, imagini flexibile, grid-uri fluide și multe altele.

Responsive Web Design reprezintă cea mai utilizată tehnică din anul 2013 astfel încât au apărut tot mai multe framework-uri. Printre cele mai cunoscute se numără Bootstrap și Skeleton.

Figure 3.8 Exemplu de layout responsive pe un monitor, tabletă și telefon mobil.

În tabelul de mai jos este prezentată o paralelă între un site responsive și unul dedicat.

DEZVOLTAREA APLICAȚIEI

Lucrarea a constat în crearea unui site de prezentare a unei aplicații cu anunțuri.

Siteul se adresează persoanelor care doresc să cumpere diferite produse din diferite categorii: automobile, electrocasnice, etc.

Astfel, utilitatea siteului este de a prezenta detalii specifice ariei prezentate precum și cu comercializarea produselor.

STRUCTURA APLICAȚIEI

Aplicația este formată din 2 părți principale: frontend și backend.

Pe partea de frontend am folosit folsoit html, css, js (angular js).

Pe partea de backend am folosit folsoit php.

Conform celor specificate în tema de proiectare, PHP am folosit pentru a efectua operațiunile de citire, creeare, editare, ștergere a datelor din baza de date. Scripturile de php se află în structura aplicației în folderul web/webap/db.

De exemplu în structura aplicației există un fisier connectDb.php care face conectarea la baza de date.

Prin fisierul items.php am făcut operațiunea de citire a anunțurilorilor din baza de date.

Pe frontend eu le iau cu angular js folosind serviciul http.

Aceasta este o procedură de lucru efiecientă și de actualitate a php -ului cu frontend-ul. Frontend-ul trimite datele la backend și backend face operațiunile, respectiv backend trimite datele la frontend, unde vor fi afișate.

Partea de validare a emailului la autentificare este facută folosind un atribut dat de framework-ul materilize css: class="validate". (http://materializecss.com/forms.html).

La partea de cautare caut în tot json-ul cu anunțuri. Pentru aceasta folosesc angular js pentru a face o căutare cât mai eficientă și rapidă. Tot ce ține de sortări și căutări le fac pe partea de frontend. Toate aceste operații se fac extrem de rapid folosing angular js.

Imaginile la uploadare sunt convertite în format base 64 și inserate în baza de date pentru a nu ocupa loc. Aceasta este o metodă des folosită. Pentru mai multe informații se poate citi https://en.wikipedia.org/wiki/Base64

La logare am un formular care la butonul de login preia datele scrise de utilizator și le trimite prin intermediul serviciului $http (prin metoda POST) la fisierul login.php. Acest fișier preia datele primite și verifică dacă există astfel de date în baza de date.

La partea de roluri e implementat astfel: in dashboardul adminului sunt afisate toate anuntuirile si la utilizator este preluat id si cautate toate anunturile care au la campul userId acel id.

Adaugarea, editarea și ștergerea anunțurilor sunt făcute cu PHP. Trimit cu ajutorul angular js datele la fisierele php iar php se ocupa de lucrul cu baza de date.

Valabiliatea si reimprospatarea anunturilor sunt implementate in partea de editare a anuntului.

Incadrarea anunturilor intro categorie este implementată în baza de date. Există un cam denumit categorie.

Folosirea unei galerii de imagini: Imaginile sunt memorate pentru fiecare anunt intr-un array denumit images in format base 64.

Cautarea anuntuirilor o fac direct cu angular js folosind filtre. Eu preiau toate datele de la backend si le sortez in functie de cautare. E mult mai eficient si mai rapid decat a luat string-ul cautata de user a trimite la backend, a returna din backend rezultatele si de a le trimite din nou la frontend. Ia mult mai mult timp si nu e eficient.

În concluzie am realizat o aplicație care are funcționalitățile de bază în PHP și care se îmbină cu tehnologiile noi dezvoltate pentru a mari eficientă și calitatea aplicației.

STRUCTURA FIȘIERELOR

js/ – Folderul principal, conține scripturile js ale aplicației

controllers/ – Diferite controllere utilizate

services/ – Diferite servicii utilizate

lib/ – Un view este o pagină. Fiecare pagină are HTML și JavaScript

app.js – Fișierul .js care unește aplicația

web/webApp/html – template-uri pentru modal de editare si creare a unei noi inregistrari

views/view-urile aplicatiei

web/webApp/css – stylesheet-urile aplicatiei

web/webApp/img/ – folderol cu imagini

web/webApp/db – script-urile PHP pentru principalele operatii CRUD – create, read, update, delete

index.php – fisierul principal al aplicatie

TEHNOLOGII FOLOSITE

Frontend

HTML5

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d.

CSS3

Bootstrap

Site: getbootstrap.com

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style.

Am folosit framework-ul de CSS, Materialize Css pentru a facilita construcția de pagini web responsive. Un site web responsive este un site in care elementele lui (paragrafe, poze, tabele) care se redimensioneaza în funcție de device-ul pe care este vizualizat (telefon, tabletă, desktop PC).

Cum functioneaza bootstrap?

Pachetul Materialize conține 2 fișiere:

materialize.min.css (.min=varianta minimizata a fisierului .css)

materialize.min.js css (.min=varianta minimizata a fisierului .js).

Fișierul css conține cod CSS pentru elementele principale ale framework-ului: containere, butoane, paragrafe, etc precum și media queries pentru fiecare tip de ecran:

Materialize.min.js conține cod js pentru elementele de tip modal, dropwdown, carouselo, tooltip, etc.

În aplicație am făcut câte un fișier css pentru diferite părți și funcții ale acesteia.

Login & Register

.card .card-header {  

    padding: 10px;  

    background-color: #00bcd4;  

    text-align: center;  

}  

.input-field input[type=email]:focus+label {  

  color: #00bcd4;  

}  

.input-field input[type=password]:focus+label {  

  color: #00bcd4;  

}  

.input-field input[type=email]:focus {  

  border-bottom: 1px solid #00bcd4;  

  box-shadow: 0 1px 0 0 #00bcd4;  

}  

.input-field input[type=password]:focus {  

  border-bottom: 1px solid #00bcd4;  

  box-shadow: 0 1px 0 0 #00bcd4;  

}  

/* icon prefix focus color */  

.input-field .prefix.active {  

  color: #00bcd4;  

} 

JavaScript

Angular

Site: angularjs.org

Descriere: Angular este un framework MVC dezvoltat de Google, care aduce multe noutăți în domeniul Javascript, precum directivele, routingul dinamic sau modularizarea.

MVC(Modfel-View-Controller) este un pattern architectural utilizat pentru implementarea interfetelor web.

Cum functioneaza MVC?

Controller-ul trimite comanzi catre modal, updatand starea modelului. the model's state. In acelasi timp poate trimite comanzi pentru modificare view.

Un model gestioneaza datele primate de la un controller (ex:datele dintr-o baza de date) si le trimite catre view

View-ul genereaza rezultatul (output presentation), bazat pe datele primate e la model

Mai jos am atasat o schema:

Abordarea real-time și folosirea tehnologiilor apărute recent pe piață AngularJS, conferă aplicației elementul de originalitate din punct de vedere tehnic.

Angular Js este un tool tot mai des folosit in ziua de azi in web development,deoarece faciliteaza lucrul cu date(indiferent de tipul de baze de date) si in plus confera aplicatiei o scalabilitate(Organizarea fisierului este foarte simpla)

Fisierul Js:

-app.js(definieste modulul pricipalul si routele)

-folder controllers-controlere aplicatiei

-folder services-serviciile aplicatiei(Serviciile sunt utilizate pentru a usura anumite procese:primerea datelor din baza de date poate fi facut printr-un serviciu iar in fiecare controller unde este nevoie de array-ul cu date serviciul poate fi apelat,acesta furnizand imediat datele)

filters.js-filtrele aplicatiei

Angular Js foloseste conceptual de data binding.Conform Wikipedia:

Data binding este un proces care stabilește o conexiune între interfața aplicației și logica.

Angular Js foloseste acest process pentru a putea manipulamai usor elementele din DOM (ex:un input de tip text). Pentru a active data binding trebuie sa etichetam elemente din DOM dorite cu cate un model.

Ex:

<input type="text" ng-model="test"/> {{test}}  

In acest exemplu cand utilizatorul introduce un text in acea casuta, continutul va fi afisat in partea dreapta realtime. Acesta este un exemplu minor pentru a explica puterea acestui framework. Astfel putem accesa oricat orice model si afla starea lui in controller folosind $scope.

Un alt avantaj al folosirii framework-ului Angular Js este tool-ul angular route si a template-urilor. De exemplu avem un site unde avem nevoie de pagina home, contact, produse, etc. De obicei se fac pagini diferite: home.html, contact.html, produse.html, dar daca ne gandim aceste pagini au elemente comune, de ex meniul de navigare footer. Angular route permite creearea unor rute folosind template-uri. Deci vom avea pagina principal pe care vor fi aplicate diferite template-uri. De asemenea fiecare template poate avea cate un controller.

Ex:

app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {  

    var DEFAULT_PATH = "/home/search";  

    $urlRouterProvider.when("", DEFAULT_PATH);  

    $urlRouterProvider.when("/", DEFAULT_PATH);  

    $urlRouterProvider.otherwise(DEFAULT_PATH);  

    $stateProvider  

        .state('home', {  

            abstract: true,  

            url: '/home',  

            templateUrl: 'webApp/components/content/html/home.html',  

            controller: 'homeController',  

            onEnter: function () {  

                console.log("homeController enter");  

            }  

        })  

        .state('home.search', {  

            url: '/search',  

            templateUrl: 'webApp/components/content/html/search.html',  

            controller: 'homeController',  

            onEnter: function () {  

                console.log("search enter");  

            }  

        })  

        .state('home.products', {  

            url: '/products/:',  

            templateUrl: 'webApp/components/content/html/details.html',  

            controller: 'homeController',  

            onEnter: function () {  

                console.log("search enter");  

            }  

        })  

        .state('home.registerItem', {  

            url: '/registerItem',  

            templateUrl: 'webApp/components/content/html/registerItem.html',  

            controller: 'registerItemController',  

            onEnter: function () {  

                console.log("registerItemController enter");  

            }  

        })  

        .state('login', {  

            url: '/login',  

            templateUrl: 'webApp/components/content/html/login.html',  

            controller: 'loginController',  

            onEnter: function () {  

                console.log("login enter");  

            }  

        })  

       .state('dashboard', {  

            url: '/dashboard',  

            templateUrl: 'webApp/components/content/html/dashboard.html',  

            controller: 'dashboardController',  

            onEnter: function () {  

                console.log("dashboard enter");  

            }  

        })  

}]);  

Pentru a putea afisa/prelucra datele din frontend am folosit Angular Js folosind metoda specifica http : GET

getAllAds();  

   $scope.newAdd = {};  

   function getAllAds() {  

       $http.get('webApp/db/items.php').success(function(data) {  

           // Stored the returned data into scope  

           $scope.ads = data;  

          // console.log($scope.ads);  

       });  

   }  

$http.get()

returns

In fisierul items.php returnez datele in format json pentru a le putea prelua cu metoa get si a le salva intr-un array.

La fel am proceat si pentru celelalte operatii CRUD:

$http.post(object)->parametrul este un obiect care este preluat de fisierul php si trimis la baza de date

$http.post('webApp/db/add.php', {  

            "titlu": $scope.newAdd.titlu,  

            "userId": "57f68afddcba0f6e6c59413e",  

            "categorie": $scope.newAdd.categorie,  

            "pret": $scope.newAdd.pret,  

            "images":$scope.newAdd.images,  

            "dataExpirare":$scope.newAdd.dataExpirare,  

            "descriere": $scope.newAdd.descriere  

        }).success(function(data) {  

            Notification.success("Anunt adaugat cu succes!");  

            getAllAds();  

        });  

}  

}); 

$http.post(id)->parametrul este id-ul anuntului care trebui sters

Fisierul primeste id-ul si

efectueaza operatia de stergere din baza de date

$scope.deleteAd = function(id) {  

      $http.post('webApp/db/delete.php', { "del_id": id }).success(function(data) {  

          console.log(data);  

      });  

      getAllAds();  

  }  

$scope.edit = function(currentProduct){  

           console.log(currentProduct);  

           $scope.currentAd = currentProduct;  

           $('#modal2').openModal();  

   }  

   $scope.saveAd = function(){  

       console.log($scope.currentAd);  

     $http.post('webApp/db/save.php', {  

           "titlu": $scope.currentAd.titlu,  

           "id":$scope.currentAd._id.$id,  

           "userId": "57f68afddcba0f6e6c59413e",  

           "categorie": $scope.currentAd.categorie,  

           "pret": $scope.newAdd.pret,  

           "images":$scope.currentAd.images,  

           "descriere": $scope.newAdd.descriere  

       }).success(function(data) {  

           Notification.success("Anunt salvat cu succes!");  

           getAllAds();  

       });  

   }  

Am ales sa lucrez cu framework-ul Angular deoarece lucrul cu formulare este mult mai usor decat cu php native. Folosind data binding pot prelua usor ce a scris userul in diferite input-uri. Astfel daca unui input ii atasez directive “ ng-model=”test” ” pot prelua valoarea acestui input prin comanda : $scope.test.

Pentru a face upload de fisiere am folosit librarie de Angular ,numita Angular Base 64 care imi converteste imaginea uploadata e user in format base 64.

<input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*, .zip" minsize="500" required minnum="2" on-change="onChange">  

jQuery

Site: jquery.org

Descriere: jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătăți diferite procese de accesare ale elementelor unui site(elementelor HTML in DOM).

Jquery se foloseste in urmatoarele situatii :

Selectii de elemente in arborele DOM (paragrafe, butoane etc.)

Inregistrare si proceasarea evenimentelor din browser(ex:cand utilizatorul apasa un buton)

Efecte si animatii

Cereri de tip AJAX

$(document).ready(function(){  

   $('body').html('Hello world!');  

}); 

De asemenea un alt avantaj al folosirii Angular Js este directive ng-repeat. Aceasta directive ma ajuta sa interez prin elementele unui array si sa afisez pentru fiecare un template:

<div class="content">  

                     <div class="row">  

                         <div class="col col s4" ng-repeat="item in details|filter: {'oras' : orasSelect}|filter:{'categorie': categoriSelect}|filter:search">  

                             <div style="width: 350px!important" class="card">  

                                 <div class="card-image waves-effect waves-block waves-light">  

                                     <!– <img class="activator" src="webApp/components/content/img/1.jpg"> –>  

                                     <img data-ng-src="data:image/png;base64,{{item.images[0].base64}}" data-err-src="images/png/avatar.png"/>  

                                 </div>  

                                 <div class="card-content">  

                                     <a style="font-size:1.2em" href="#/home/products/{{details.indexOf(item)}}" class="card-title  grey-text text-darken-4">{{item.titlu}}</a>  

                                     <p>Pret : {{item.pret}} euro</p>  

                                 </div>  

                         </div>  

                     </div>  

                 </div>  

PHP

PHP este un limbaj de programare destinat lucrului lucrului cu bazele de date. Numele PHP provine din limba engleză și este un acronim recursiv: Php: Hypertext Preprocessor. Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Pentru a rula orice script PHP avem nevoi de un web server,de ex: Apache. Se va configure portul pe care va rula (initial etse 443). Orice proiect php trebuie sa fie localizat in folderol htdocs din xamp.

PHP5 aduce imbunatatiri importante :

Support imbunatatit pentru OOP

Introducere PDO-PHP Data Objects care definește o modalitate facilă și consistentă de accesare a diferitelor baze de date

Suport imbunatatit pentru MYSQL si MSSQL

Controlul erorilor prin tratarea de excepții

In aplicatie am folosiut script-uri PHP pentru a face operatiile CRUD – (create, read, update, update, delete).

Inainte de a realiza aceste operatii am creat script-ul de conectare la baza de date:

<?php  

    $connection = new MongoClient("mongodb://test:[anonimizat]:53206/dbanunturi");   

    $db         = $connection->dbanunturi;  

?>  

Read

<?php  

// Including database connections  

include('./connectDb.php');  

$collection = $db->ads ;  

    //$user = $db->$collection->findOne(array('username'=> $username, 'password'=> $password));  

    $cursor     = $collection->find();  

    // iterate cursor to display title of documents  

    foreach ($cursor as $k => $row) {  

        echo json_encode(iterator_to_array($cursor, false), true);  

    }  

?>  

Create

<?php  

    include('./connectDb.php');  

    $data = json_decode(file_get_contents("php://input"));   

    $titlu =  $data->titlu;  

    $pret =  $data->pret;  

    $categorie =  $data->categorie;  

    $descriere = $data->descriere;  

    $images = $data->images;  

    $userId = $data->userId;  

    $collection = $db->ads;  

    $document = array(   

          "titlu" => $data->titlu,   

          "pret" => $data->pret,   

          "categorie" => $data->categorie,  

          "descriere" => $data->descriere,  

          "dataExpirare" =>$data->dataExpirare,  

          "images" => $data->images,  

          "userId" => $data->userId  

    );  

    $collection->insert($document);  

    echo "Document inserted successfully";  

?>  

Update

<?php  

    include('./connectDb.php');  

    $data = json_decode(file_get_contents("php://input"));   

    $id = $data->id;  

    $collection = $db->ads;  

    $document = array(   

          "titlu" => $data->title,   

          "pret" => $data->price,   

          "categorie" => $data->category,  

          "descriere" => $data->description,  

          "images" => $data->images,  

          "userId" => $data->userId  

    );  

     $collection->update(array("_id"=>$id),   

      array('$set'=>array($document);  

    //$collection->insert($document);  

    //echo "Document saved successfully";  

?>  

Delete

<?php  

    include('./connectDb.php');  

  $data = json_decode(file_get_contents("php://input"));   

  $id = $data->del_id;  

  $collection = $db->ads;  

  // now remove the document  

  $collection->remove(array("_id"=>new MongoID($id)));  

  echo "Documents deleted successfully";  

?>  

MongoDb

MongoDB este o bază de date NoSQL open-source orientată pe documente. Diferența principală intre MondoDb si MYSQL constă în faptul că stocarea datelor nu se face folosind tabele precum într-o bază de date relațională, MongoDB stochează datele sub formă de documente JSON cu scheme dinamice.

Caracteristici Mongo Db:

Stocarea datelor sub formă de documente ->Alternativa pentru tabele

Prezintă support pentru indexare ->Alternativa pentru autoincrementarea din MYSQL

Auto-Sharding ->Alternativa pentru operatiunea de JOIN

GridFS(sistem de stocare a fisierelor de dimensiuni mari) ->Alternativa pentru BLOB

Comparatie MYSQL vs MongoDb

Baza de date este stocata online, folosind un serviciu de cloud denumit mlab.(www.mlab.com)

Baza de date se numeste dbanunturi , tabela cu anunturi se numeste ads, tabela cu useri se numeste users.

DESIGN

Responsive

Designul este responsive, acesta adaptându-se diferitelor dimensiuni ale ecranului. A fost testat pe telefoane mobile, tablete și pe sisteme desktop. Elementele grafice ale siteului își păstrează relevanța și armonia.

Atractiv

Un design care este în pas cu trendul, care atrage prin culori și prin modul în care este așezată informația.

Echilibru vizual

Am încercat să balansăm cât mai mult raportul spațiu liber/conținut, astfel informația este afișată clar, elementele nu se suprapun și totul este în echilibru, indiferent de dispozitivul pe care-l folosește utilizatorul.

Portabilitate

Siteul a fost testat pe toate browserele moderne (Chrome, Firefox, Safari, Opera) și funcționează consistent pe toate.

Datorită designului responsive, paginile se adaptează la rezoluția ecranului, oferind o experiență plăcută indiferent de dispozitivul de pe care este văzut.

Aplicatia este formata din 2 parti :

-partea de user

-partea de admin

Prima pagina contine o lista cu toate produsele. Userul poate cauta si sorta produsele in functie de oras si categorie inclusive si parte de cautare.

<div id="home" layout="column">  

    <div class="header">  

        <div class="headerContent">  

            <span class="rightContent">  

            <a ng-href="#/home"><i class="material-icons headerIcon primaryBackgroundColor">label</i></a>  

            <h3 class="headerTitle">{{$root.name}}</h3>  

            </span>  

            <!–  <md-button class="md-accent md-raised headerButtons" ng-href="#/home/registerItem">Adauga anunt</md-button> –>  

            <md-button ng-if="!$root.loggedIn" class="md-raised md-warn headerButtons" ng-href="#/login">Login</md-button>  

            <md-button ng-if="$root.loggedIn" class="md-primary headerButtons" ng-click="logout()">Logout</md-button>  

        </div>  

    </div>  

    <div class="searchBar">  

        <div class="searchBarContent" layout="column">  

            <div class=" " layout="row">  

                <md-input-container style="width: 300%" class="md-icon-float md-block">  

                    <label>Ce produs doresti</label>  

                    <md-icon md-svg-src="webApp/components/content/img/search.svg" class="name"></md-icon>  

                    <input ng-model="search" type="text">  

                </md-input-container>  

            </div>  

            <div class="searchContent" layout="row">  

                <!–  <md-select ng-model="oras" placeholder="Oras" class="md-no-underline">  

                    <md-option value="Bucuresti">Bucuresti</md-option>  

                    <md-option value="Iasi">Iasi</md-option>  

                    <md-option value="Craiova">Craiova</md-option>  

                    <md-option value="Oradea">Oradea</md-option>  

                </md-select> –>  

                <div input-field>  

                    <label>Oras : </label>  

                    <select class="browser-default" ng-model="orasSelect">  

                        <option value="Bucuresti">Bucuresti</option>  

                        <option value="Iasi">Iasi</option>  

                        <option value="Cluj">Cluj</option>  

                    </select>  

                </div>  

                <div style="margin-left: 20px" input-field>  

                    <label>Categorie : </label>  

                    <select class="browser-default" ng-model="categoriSelect">  

                        <option value="autoturisme"">Autoturisme</option>  

                        <option value="electronice">Electronice</option>  

                        <option value="electrocasnice">Electrocasnice</option>  

                    </select>  

                </div>  

                <!–  <md-select ng-model="oras" placeholder="Oras" class="md-no-underline searchDropdown">  

                    <md-option value="Bucuresti">Bucuresti</md-option>  

                    <md-option value="Iasi">Iasi</md-option>  

                    <md-option value="Craiova">Craiova</md-option>  

                    <md-option value="Oradea">Oradea</md-option>  

                </md-select>   

                <md-select ng-model="Categorie" placeholder="Categorie" class="md-no-underline searchDropdown">  

                    <md-option value="Autoturisme">Autoturisme</md-option>  

                    <md-option value="Electronice">Electronice</md-option>  

                    <md-option value="Electrocasnice">Electrocasnice</md-option>  

                    <md-option value="Sanitare">Sanitare</md-option>  

                </md-select> –>  

            </div>  

        </div>  

    </div>  

    <div ui-view class="searchContent"></div>  

</div>  

<div style="padding:150px;  

  box-sizing:border-box;" class="container">  

    <div class="card bordered  z-depth-2" style="margin:0% auto;max-width: 700px;">  

        <div class="card-header">  

            <i class="material-icons medium white-text">perm_identity</i>  

        </div>  

        <div class="card-content">  

            <form ng-submit="login(user)">  

                <div class="input-field col s12">  

                    <i class="material-icons prefix">email</i>  

                    <input ng-model="user.email" id="icon_prefix" type="email" class="validate">  

                    <label  for="icon_prefix">Email</label>  

                </div>  

                <div class="input-field col s12">  

                    <i class="material-icons prefix">lock_outline</i>  

                    <input ng-model="user.password" id="icon_telephone" type="password" class="validate">  

                    <label for="icon_telephone">Password</label>  

                </div>  

                <br>  

                <button class="btn cyan waves-effect waves-light right col s12" type="submit" name="action">  

                   <i class="material-icons left">lock_open</i> Login</button>  

            </form>  

        </div>  

        <div  style="margin-top:20px;" class="card-action clearfix">  

            <div class="row">  

                <div class="col s6 text-p">  

                   <!– <a class="btn cyan waves-effect waves-light right col s12"> Forgot Password</a>–>  

                </div>  

                <div class="col s6 right-align text-p">  

                   <!– <a style="font-weight:500" href="#/register" class="orange-text tooltipped" data-position="top" data-delay="50" data-tooltip="Register now!" data-tooltip-id="32f37964-63d7-22b8-ac23-7e402db162b7">Register now!</a>–>                    <!–<a class="btn cyan waves-effect waves-light right col s12"> Register</a>–>  

                </div>  

            </div>  

        </div>  

    </div>  

</div>  

Dupa logare userul este redirectionat catre panoul de administrare (dashyboard). Aici poate efectua operatiunile de adaugare, sterge si editare.

Fisierul dashboard.controller.js contine backend-ul pentru operatiunile CRUD.

app.controller('dashboardController', ['$scope', 'authentication', '$rootScope', '$state', 'Notification', '$http', function($scope, authentication, $rootScope, $state, Notification, $http) {  

    // $scope.login = authentication.login;  

    // $scope.logout = authentication.logout;  

    console.log($rootScope.emailLogged);  

   // $scope.emailLogged=$rootScope.emailLogged;  

    getAllAds();  

    $scope.newAdd = {};  

    function getAllAds() {  

        $http.get('webApp/db/items.php').success(function(data) {  

            // Stored the returned data into scope  

            $scope.ads = data;  

           // console.log($scope.ads);  

        });  

    }  

    $scope.addAd = function(newAdd) {  

        /*$http.post('webApp/db/add.php', 

         { 

          "titlu": $scope.newAdd.titlu 

         });*/  

            console.log($scope.newAdd);  

            $scope.newAdd.images=new Array();  

            $scope.newAdd.images =  $scope.newAdd.images.concat($scope.files);  

            console.log($scope.newAdd);  

        $http.post('webApp/db/add.php', {  

            "titlu": $scope.newAdd.titlu,  

            "userId": "57f68afddcba0f6e6c59413e",  

            "categorie": $scope.newAdd.categorie,  

            "pret": $scope.newAdd.pret,  

            "images":$scope.newAdd.images,  

            "dataExpirare":$scope.newAdd.dataExpirare,  

            "descriere": $scope.newAdd.descriere  

        }).success(function(data) {  

            Notification.success("Anunt adaugat cu succes!");  

            getAllAds();  

        });  

    }  

    $scope.deleteAd = function(id) {  

        $http.post('webApp/db/delete.php', { "del_id": id }).success(function(data) {  

            console.log(data);  

        });  

        getAllAds();  

    }  

    $scope.edit = function(currentProduct){  

            console.log(currentProduct);  

            $scope.currentAd = currentProduct;  

            $('#modal2').openModal();  

    }  

    $scope.saveAd = function(){  

        console.log($scope.currentAd);  

      $http.post('webApp/db/save.php', {  

            "titlu": $scope.currentAd.titlu,  

            "id":$scope.currentAd._id.$id,  

            "userId": "57f68afddcba0f6e6c59413e",  

            "categorie": $scope.currentAd.categorie,  

            "pret": $scope.newAdd.pret,  

            "images":$scope.currentAd.images,  

            "descriere": $scope.newAdd.descriere  

        }).success(function(data) {  

            Notification.success("Anunt salvat cu succes!");  

            getAllAds();  

        });  

    }  

    $(document).ready(function() {  

        $('.collapsible').collapsible({  

            accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style  

        });  

        $('.modal-trigger').leanModal();  

    });  

   /** 

    * var today = new Date(); 

var dd = today.getDate(); 

var mm = today.getMonth()+1; //January is 0! 

var yyyy = today.getFullYear(); 

if(dd<10) { 

    dd='0'+dd 

}  

if(mm<10) { 

    mm='0'+mm 

}  

today = mm+'/'+dd+'/'+yyyy; 

    */  

}]);  

Fisierul LoginController contine backend-ul pt partea de logare:

app.controller('loginController', ['$scope', 'authentication', '$rootScope', '$state', 'Notification','$http', function($scope, authentication, $rootScope, $state, Notification,$http) {  

    // $scope.login = authentication.login;  

    // $scope.logout = authentication.logout;  

    $scope.login = function() {  

        $http.post('webApp/db/login.php',  

         {  

          "email": $scope.user.email,  

          "password" :$scope.user.password  

         }).then(function(response) {  

           if(response.data){  

            console.log(response);  

            $rootScope.emailLogged = response.data;  

            console.log("User si email corect");  

            $state.go('dashboard');  

           }else{  

            Notification.error('User sau parola incorecta!');  

           }  

        });  

    }  

TESTAREA APLICAȚIEI

Testarea reprezintă o etapă importantă în procesul de realizare a aplicațiilor informatice software. Pentru o companie de profil, ponderea cheltuielilor cu testarea reprezintă între 30% și 50% din totalul cheltuielilor pentru dezvoltarea aplicației.

Tehnicile și metodele moderne de elaborare a produselor software acordă o importanță deosebită efortului de înlăturare a erorilor de analiză, proiectare și programare prin folosirea unor mijloace evoluate de testare.

Figure 5.9 Modelul clasic de dezvoltare software.

etapa de specificare a cerințelor:

se determină necesitățile pentru toate elementele sistemului.

Testarea specificațiilor se realizează prin metode de analiză statică: inspecții, parcurgeri și analize tehnice.

etapa de analiză:

continuă procesul de stabilire a cerințelor.

se documentează cerințele, iar acestea sunt revăzute împreună cu beneficiarul.

este descris ceea ce trebuie să facă aplicația informatică și nu modul în care se realizează.

sunt descrise cazurile de test pentru fiecare componentă în parte.

etapa de proiectare:

se pune accent pe structurile de date, arhitectura sistemului, detaliile procedurale și cara cterizarea interfețelor.

sunt identificate structurile de date, interfețele, modulele și sunt descriși algoritmii.

se definesc specificațiile de realizare.

cazurile de test sunt rafinate și sunt adăugate noi cazuri de test corespunzătoare detaliilor introduse.

etapa de implementare:

se face trecerea de la proiect la o formă specifică mașinii de calcul.

testarea are rolul de a evidenția diferențele dintre comportamentul produsului din specificații și cel dat la nivelul utilizatorilor.

etapa de testare:

se concentrează atât asupra logicii interne a programului, avându-se în vedere ca anumite elemente ale acestuia să fie parcurse, cât și pe funcționalitatea externă a sa, pe baza specificațiilor.

se compară rezultatele efective obținute după rularea programului cu seturi de date de test cu rezultatele scontate pe baza specificațiilor.

CONCLUZII

Aproape toți utilizatorii de internet din lume intră pe site-uri de anunțuri. ”In viitor, afacerile vor fi de 2 feluri – online și deloc.”, conform miliardarului Bill Gates. Cu ajutorul unui website, poți aduce clientul mult mai aproape de afacerea ta, iar aceasta se poate dovedi un adevărat succes pentru tine.

În lucrarea de față a fost creată o aplicație de anunturi online responsive, utilizând tehnologiile noi în realizarea părții de front end precum și apelările directe și PHP în partea de backend pentru realizarea funcționalităților precum loghin, adăugare, editare, ștergere anunțuri, etc

Administrarea se face numai cu cont de admin nefiind accesibilă această funcție unui utilizator cu drepturi doar de utilizator.

În concluzie această aplicație realizată numai în scop didactic, vine în sprijinul posibililor vizitatori/cumpărători fiind în același timp și un adversar destul de puternic site-urilor de profil de exemplu gen OLX.

BIBLIOGRAFIE

[1]. Sabin Buraga, „Tehnologii web. Programare web în PHP”, Polirom, 2006.

[2]. Romică TRANDAFIR, Mihai NISTORESCU, Ion MIERLUȘ-MAZILU, Bazele informaticii și limbaje de programare. Baze de date relaționale, București, 2007.

[3]. Andy Oppel. SQL fara mistere – ghid pentru autodidacti. Rosetti Educational, 2006

[4]. Trandafir Romica, Nistorescu Mihai, Mierlus-Mazilu Ion. Bazele informaticii si limbaje de programare 2. Baze de date relationale. Universitatea Bucuresti 2007

[5].

[6]. Connolly, Thomas; Begg, Carolyn. Baze de date: proiectare, implementare, gestionare. Bucuresti : Teora, 2001

[9]. Ioan Mocian Baze de date. Terminologie, proiectare, SQL, Access. Matrixrom, 2007

[10]. Ivan Codesido, What is frond-end development, The Guardian, septembrie 2009

[11]. Maximiliano Firtman, You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy, Smashing Magazine, iulie 2014

[12]. Florentina Rodica Niculescu, Proiectarea paginilor Web Dinamice Utilizând PHP, Editura Fundației România de Mâine, București, 2009

[13]. Teodoru Gugoiu , HTML, XHTML, CSS și XML prin EXEMPLE – Ghid practic, Editura Teora, 2005.

[14]. Florentina Rodica Niculescu, Proiectarea paginilor Web – HTML, CSS, JavaScript, Editura Fundației Rommânia de Mâine, București, 2007

[15]. M. Moise Sisteme informatice cu baze de date, Editura Pro-Universitaria, București, 2008

[16]. Tudor Sorin, Crearea și programarea paginilor Web- HTML, CSS, JavaScript, PHP, Editura L&S Soft, 2006

[17]. Ethan Marcotte, Flexible Images, A List Apart 328, iunie 2011

[18]. Conf.dr.ing. Ioana FAGARASAN, Testarea software si asigurarea calitatii – curs1.