GENERALITĂȚI………………………………………………………………………………2 CAPITOLUL1–INTRODUCERE… [607802]

1Cuprins
GENERALITĂȚI………………………………………………………………………………2
CAPITOLUL1–INTRODUCERE
1.1Temaproiectului…………………………………………………………………………………3
CAPITOLUL2–TEHNOLOGIIUTILIZATE
2.1HTML………………………………………………………………………………………………..4
2.2CSS……………………………………………………………………………………………………5
2.3JavaScript-JSON………………………………………………………………………………….7
2.4DespreAPI-Generalități……………………………………………………………………10
2.5DespreOAuth2………………………………………………………………………………….12
2.6DespreBlizzardșiAPI-ullor………………………………………………………………14
2.7DespreSublimeText………………………………………………………………………….16
2.8DespreURL-uri…………………………………………………………………………………19
2.9DespreFavicons…………………………………………………………………………………19
2.10DespreBazedeDate…………………………………………………………………………19
CAPITOLUL3-PROIECTAREAȘIIMPLEMENTAREAAPLICAȚIEI
3.1Prezentare,analizașiimplementareaplicației………………………………………..12
3.2Proiectare,Modelare…………………………………………………………………………..35
3.3DiagrameUMLsiERD………………………………………………………………………36
CAPITOLUL4–CONCLUZII
4.1Concluzii…………………………………………………………………………………………..43
4.2PosibilitățideDezvoltare……………………………………………………………………..44
BIBLIOGRAFIE……………………………………………………………………………..46

2Generalități
Înultimaperioadă,omenireaaavutpartedeoevoluțiefoarterapidăa
tehnologiei.Încâtevazecideaniamajunssăputemaveaocantitateimensăde
tehnologiechiarînbuzunarelenoastre,printelefoanelecareauevoluatacumîn
smartphone-uri.DupăcumspuneșicelebrulcitatdelaRalphWaldoEmerson,
"CunoaștereaÎnseamnăPutere",tehnologiane-aajutatsăevoluămcaspecie,șisăfimîn
vârfullanțuluitrofic,prinaccesullainformațiifărăpreamultelimite.
Informațiacălătoreșteacumprintotfeluldemijloace,princabluri,câtși
wireless,prinsateliți.Internetuladevenitcaocartemicuțăcepoatefipurtatăși
înțeleasădeoricine,oriunde,careoferăinformațiidintoatecolțurilelumii,într-untimp
foartescurt.Tehnologiasedezvoltăcontinuu,într-unritmextremderapid.Săluăm
exempluclasiculcalculator,pecareîlavemaproapetoțiacasă,cumaevoluatîn
decursula10ani,cândîn2009componentelehardwarecareerauconsideratefoarte
buneerauincomparabilmaislabedecâtceavemacum.Fiindcătotvorbimdehardware,
așvreasăspuncâtecevașidespreparteasoftwareaunuicalculator,șianumeacellucru
ceneoferăaccesullanemărginitulinternet.Printr-oseriedeprograme,șiprinalteserii
dealgoritmi,amreușitsăcreemunsistemdeoperarecareneînțelegelimbajulși-l
transformaîntr-unulmatematic,acestsistemdeoperareoferindu-neceeacenumimnoi
un"browser",iaracelbrowserfiinddefapt,unportalcătreinformații,reușindsăîi
transmităsistemuluinostrudeoperaredateșiinformațiidindiverseservereweb,carese
aflăîndiverselocuri,lamaredepărtaredenoi.
Acelbrowsernetransmiteinformațiișidateprinanumitepaginiweb,caresunt
createfolosindunașanumitlimbajdemarcare.Unexempludelimbajdemarcareeste
HTML(HyperTextMarkupLanguage),care,împreunăcualtelimbaje,deexemplu
celdestilizaresauceldescripting,creazăconținutulpecarenoiîlvedem,deexemplu,
perețeleledesocializare(ex:Facebook).

3CAPITOLUL1-INTRODUCERE
1.1UtilizareaAPI-uluiBlizzardpentrurealizareadeaplicațiicomerciale.
Aplicațiepractică
Amalesaceastătemădelicențădeoarecesuntfamiliarizatcumecanismele
companieiBlizzard,avândcunoștințegeneraledesprejoculvideonumit"Worldof
Warcraft"șidespreaspecteleceîlfacsăfieunîntreg,desprecareamșirealizataceastă
aplicație.
Înaceastăaplicațiewebcomercială,euintenționezsăoferutilizatorului
posibilitateadealualacunoștințăprețuriledespreanimaleledin“WorldofWarcraft",
maiexactdespreanimaleledestinatecălăritului,numite"Mounts",despreanimalelede
companiesimple,destinatesocializăriidinjoc,animaleledecompaniedestinateluptelor
întreplayeri,numite"BattlePets"câtșiprețulunui"GameToken",carepermite
utilizatoruluisăcumperetimpdejoccubanivirtuali,câștigațiînjoc
OsătranspundateledinAPI-ulBlizzardînanumitetabele,lacaresăadaug,
dacăestenevoie,încăuncâmppefiecaretabel,pentruageneraunnumăraletoriu,iar
acelnumărfiindprețulanimalului..
IntenționezsăfolosesclimbajuldeeditareHTML(HyperTextMarkup
Language),limbajuldestilizareCSS(CascadingStyleSheets)șilimbajuldescripting
JavaScript.

4CAPITOLUL2–TEHNOLOGIIUTILIZATE
2.1HTML
Acestlimbajdemarcareafostdezvoltatinițialdeoameniideștiințăpentrualeservica
ounealtăfolositălapartajareadocumentelorînîntreagacomunitateștiințifică
internațională.Înacestscopafostnevoiedeunlimbajpecaresăîlînțeleagătoate
computereledininternet,astfel,unnumărfoartemaredebrowserewebsuntcapabilesă
afișezeconținutulcreatcuHTML.
LimbajulHTMLesteunulsimplu,putându-selucracuelșiîntr-unsimplueditorde
text.
HTMLesteunlimbajbazatpeSGML(StandardGeneralizedMarkupLanguage),
acestareprezentândunstandardinternațional(ISO-8879)aprobatîn1986.
Teoriadinspateleacestuilimbajsebazeazăpefaptulcămajoritatea
documentelorauelementecomune(deexemplu:titluri,paragrafesauliste)șicădacă
defineștiunsetdeelemente,poțimarcaelementeledocumentuluicutag-urile
corespunzătoare.
Ambelepaginiweb(ContactșiMain)aufostcreatefolosindHyperText
MarkupLanguage.Acesteaaufostcreateprinutilizareamaimultortag-uri
interconectate,ușordeutilizat.Autorulutilizeazăacestetag-uripentruamarcaun
elementînscopultransmiteriicătrebrowserinformațiadesprecetipurideelementesunt
folositeînpagină,camaiapoisăserealizezeafișareaacelordate.

5DouădintretrăsăturiledebazăaleHTMLsuntindependențafațădeplatformăși
hyperlinkurile(legăturilehypertext).Independențafațădeplatformăsereferălafaptul
cădocumentulHTMLesteafișatasemănătordinpunctdevederegraficpediferite
calculatoare,deși,interpretareadocumentuluipoatefifăcutădiferitdecătredouă
browserediferite(deexemplu:MozillaFirefoxșiGoogleChrome).Hyperlinkurile
permitnavigareamaiușoarăîntredouăpagini,sauchiarîntredouăelementedinaceeași
pagină.
2.2CSS
FolosinddoarHyperTextMarkupLanguage,nusepoaterealizastilizarea
elementelordinpaginăsauapaginii,deaceeavoifolosișiCascadingStyleSheets
(CSS).CSS-ulreprezintăunlimbajdestilizarealelementelorcreatecuHTML,spre
exemplucolorareaunuitabelsaumodificareafontuluiunuicuvant.Îndezvoltarea
modernăapaginilorwebsefoloseștenumaiCSSpentruastilizaelementele.
CSSoferădesignerilorșiprogramatorilorunmodeficientdeacontrolamodulîn
careseprezintăopaginăWEB.Înzilelenoastre,CSSaajunssăfiefolositexclusiv
pentru"WebDesign",darnusepoateexcludefaptulcăacestlimbajestefolositșiîn
altemediideprogramare.
Privindevoluțiaanilor'90cândstilizareauneipaginisefăceaprintag-uriHTML,
careeraudivizateîntreeleînmaimultefișiere,cenecesitauomuncăenormăpentrua
actualizaceva,cadeexempluoculoare.

6Evoluțiaacestuilimbajaaduslarealizareauneiconvențiiîntreprogramatori
caresusținefolosireanumeluigeneral"style.css"pentruacontrolaîntregulaspectal
proiectuluiWeb.
PentruastăpâniCSS,unprogramatorarenevoiedecunoștințeledebazăîn
limbajulHTML,acestlucrufăcându-lunlimbajpecâtdepopular,peatâtdesimplude
manevratșiînvățat.
ÎnaintedeeraCSS,programatoriieraunevoițisăinsereze,spreexemplu,tag-ul
<font>îninteriorulfișieruluiHTMLpentruacontrolafontul,culoareasaumărimeadin
interioruldocumentuluiWeb.
Aceastămetodăerarelativefectivăpentrucontrolareapebucățiaîntregului
document,darcândveneavorbadeimplementareasaudeactualizareapaginiiweb,
acestlucruconsumatimp,bani,câtșispațiu.
Îndecembrie1996,W3C(WorldWideWebConsortium)publicăCSS1(CSS
nivelul1),în1998estepublicatCSS2(CSSnivelul2)iarîniulie2007CSS2.1devine
"W3CCandidateRecommendation.Maiaredetrecutdouăetapepânăvadeveni
standardoficialacceptat.
2.3JavaScript

7Nuînultimulrând,pentrurealizareascript-urilorvoifolosicelmaicunoscut
limbajdestinatacestuilucru,șianumeJavaScript.JavaScript-ulesteunlimbajde
scriptingsuportatdeaproapeoricebrowserexistent.FolosindJavascriptsepotrealiza
procesărinumericedebază,procesărialetextelor,realizareaanimăriitextuluisaua
imaginilor.Înacestcaz,amfolositJavaScriptpentruatransformadateleoferitedecătre
celepatruAPIînobiectedetipJSON,camaiapoisăfiecititedecătreacestprogramși
săfieafișateîntabelelegenerateautomat.
JavaScriptafostcreatdecătreBrendanEichînanul1995întimpulîncare
lucralacompaniaNetscapeCommunications.BrendanafostinspiratdeJava,Scheme
șiSelf.Pânăîn1995,NetScapeafostconsideratcelmaibunbrowserdinlume,înainte
caMicrosoftsăapăracuproiectul"InternetExplorer".De-alungultimpuluiauapărut
limbajeșibiblioteciderivatedinJavascript,șiastfel,lucrulcuJavaScriptadevenitdin
ceîncemaiușor.
Node.jsreprezintăunexecutoralJavascriptdezvoltatînmotorulJavascript
V8alChrome.
DinJavaScripts-aderivatșibinecunoscutaJQuery,careesteobibliotecăde
JavaScriptcreatăsubdeviza"Scriemaipuțin,realizeazămaimult".DinJavaScripts-au
maidezvoltatomulțimedeblblioteci,cadeexemplu"Chart.js",pentruacreacu
ușurințădiagrame,diagramebubbleșimultealteaspecte.
AJAXreprezintăunsetdetehnicidedezvoltarewebcarefoloseștemaimulte
tehnologiiwebpentrudezvoltareadeaplicațiiwebceruleazăasincron.Aceastătehnică
aapărutînmartie1999șiareformatuldefișierJS.
JSON(JavaScriptObjectNotation)reprezintăunformatdedateușordeînțeles
decătreutilizator,câtșidecătreunitateadecalcul.Acestareprezintăpracticolistade
caracteristiciceîiesteatribuităuneivariabile,înmodlogic.
Principalul"inamic"alformatuluiJSON,esteformatulXML(Extensible
markuplanguage),darînultimaperioadă,formatulJSONdeținesupremațiaîn
popularitate,deoareceesteunformatmultmaisimplu,carenuconținetag-uri,suportă
seriidedate,dar,lacapitolulsecuritatepierdedinpunctaj.Maijosavemcâteun
exempludinfiecaretipdeformat.

8DeșiXMLaaparulînanul1900,existașiînanul1985subformauneiextensii
pentruunaltstandard,SGML(StandardGeneralizedMarkupLanguage),iarJSONa
apărutîn2001,evoluțiaacestordouăformateafosttotaldiferită,JSONevoluândfoarte
rapidșicâștigândsupremațiaasupradatelordinWWW(WorldWideWeb).
Adesea,AJAXfoloseșteînpropriiletehnici,formatuldetextJSON,iar,cânda
fostimplementatinițial,lamijloculanilor2000,foloseaînmoduzualformatulXML.
Dar,datorităfaptuluicăformatulJSONestemultmaiușordeprocesatdecâtformatul
XML,dezvoltatoriiAJAXalegJSON.
ExempludefișierînformatJSON:
{"Studenți":[
{"firstName":"Titel","lastName":"Butucaru"},
{"firstName":"Gabriel","lastName":"Oprișan"},
{"firstName":"Vlad","lastName":"Voica"},
{"firstName":"Florin","lastName":"Stoicescu"}
]}
ExempludefișierînformatXML:
<Studenți>
<Student>
<firstName>Titel</firstName><lastName>Butucaru</lastName>
</Student>

9<Student>
<firstName>Gabriel</firstName><lastName>Oprișan</lastName>
</Student>
<Student>
<firstName>Vlad</firstName><lastName>Voica</lastName>
</Student>
<Student>
<firstName>Florin</firstName><lastName>Stoicescu</lastName>
</Student>
</Studenți>
Javascriptesteunlimbajcefoloseștefuncțiipentrua"aducelaviață"
conținutuldinpaginăweb,făcând-opeaceastasăreacționezeînfuncțiedeacțiunile
utilizatorului.
OfuncțieînJavaScriptreprezintăobucatădecodcare,vaexecutaun
evenimentatuncicândvafiiinvocată.Ofuncțiepoatefifolositădemaimulteoriîn
contextediferite,șipoateexecutaunevenimentcu"dublusens",cadeexemplufuncția
"hide/show"aunuibuton,careodataapăsată,faceoanumităpartedeconținutcareîi
esteatribuităsădispară,iardacăestereapasat,acelconținutvareapărea.
ConținutullimbajuluiJavascriptseaflăîninteriorultag-ului<script></script>.
RelațiadintreDOM(DocumentObjectModel)șiBOM(BrowserObject
Model)oreprezintăfaptulcăBOMestecompusdinobiectelegatedebrowser,cumar
fi"History","Screen","Document","Window"și"Navigator",iarDOMseaflăîn
interiorulobiectuluinumit"Document",carereprezintădefapt,conținutulpaginii,care
poatefimanipulatfolosindJavaScript.

102.4DespreAPI
CeesteunAPI?UnAPI(ApplicationProgrammingInterface)reprezintăunset
defuncțiișiproceduricarenepermitcreereadeaplicațiicefolosescdatesauaspectede
launsistemdeoperare,unserverweb,obazădedate,saudoardelaoaltăaplicație.
REST(Representationalstatetransfer)APIreprezintăunsetderegulisaustandarde
desprecumseconstruieșteoaplicațieweb.Din2005seînregistreazăorivalitateîntre
tipulsimpludeAPIșiRESTfulAPI,deoareceunRESTAPIestemultmaiușorde
înțeles,deintegratînaplicație,șireturneazărezultatesubformăJSON,careestemult
maiușordeprelucratșiînțelesdecâtXML,rezultatulunuiAPIsimplu.
DiferențadintreceledouăoconferăfaptulcăRESTAPIesteoversiunemai
evoluatăaclasiculuiAPI,maibunășimaiușordefolosit.Îndezvoltareaweb,cuvântul
APIsereferăadesealacaleadeareturnainformațiesaudatedelaunserviciuonline.
Dar,deceartrebuifolositacestAPI,totuși?
Recent,s-aînregistratocreșteredepopularitateîndomeniulprogramării.Mai
exact,vorbescdespreAPI-uri.Dineraîncaresedescărcaumanualdatedintr-obazăde
date,fărăavândsiguranțacăaceledatesevoractualizalatimp,deoarecetrebuiau
actualizatemanual,laeracândauapărutAPI-urile,transformându-neexperiențele
onlineradical,fiecăsuntemdezvoltatorisoftwaresaudoarsimpliiutilizatori.Un
importantaspectesteacelacăunAPIajutăenormundezvoltator,deoareceîioferămai
multtimppentruaseconcentrapedezvoltareaaplicațieișipefront-end.
SăpresupunemcănuexistauAPI-uri.Acum,pentruacreaoaplicațiece
necesităcâtevadatedintr-unsitewebsauobazădedate,eranevoiecadezvoltatorulsă
iadatelemanualdinaceabazădedatesausite,apoisăscrieuncodpentrualefurniza
aplicației.Acestlucrunecesitămulttimp.Dar,cebinecăexistăAPI-uri.

11AcumnumaiestenevoiedecâtdeuncodpentruacereaceledateAPI-ului,iar
elvafacerestuldetreabă.
Înainte,cândaveamnevoiedeajutordelaunvecin,mergeamlaellapoartăși
îlstrigăm.Acum,avemtelefoane,șiîlputemsunasăvinăel,pentruanescutideun
drumînplus.ExactlafelfuncționeazășiunAPI,caunapelcătreacelvecin(bazăde
date).
Dinanul2007,API-urilesefolosescaproximativde13orimaimultdecât
înainteși,conformEbay,binecunoscutaplatformădevânzărionline,aproximativ60%
dinvânzărileacesteiasefacprinintermediulAPI-uluiEbay.Darnuneoprimaici,
deoarecenudoarratadeutilizareaAPI-uriloracrescutsemnificativ,cișiratadecreare
aacestora.TotmaimulțiprogramatoriîncearcăsădezvoltediferiteAPI-uri.Câteva
exemplearfiApi-ulceoferăfaptealeatoriidesprepisici,numit"CatFactsApi",API-ul
ceoferăpeste350.000dememe-uri,numitși"MemeloadAPI".
2.5DespreOAuth2
OAuth2reprezintăuncadrudeautorizarecarepermiteutilizatoruluisăacceseze,
pentruuntimplimitat,anumiteconturisauserviciiHTTP,cadeexempluceldela
Facebook,Twitter,sauchiarBlizzard.Acestafurnizeazăaccesulladateprinutilizarea
contuluiunuiutilizatorperespectivapaginăweb,camaiapoisătransporteaceledate
cătreoaplicațiedesktop,mobilăsauweb.

12Oauth2defineștepatruroluri:Proprietarulresurselor,Clientul,Serverul
resurselorcâtșiServeruldeautorizare.
-Proprietarulresurseloresteutilizatorulcarepermiteaplicațieiweb,
desktopsaumobilăsăîifoloseascăcontulînregistratperespectivulsitedepecare
intenționeazăsăobținădatele,cuunacceslimitatdeacțiuni(ex:aplicațiaarevoiedoar
săscriesausăciteascădate)
-Serverulresurselor/Serveruldeautorizaregăzduieșteconturileprotejateale
utilizatorilor,verificăidentitateaacestora,apoioferăun"accestoken"pentruapermite
interacțiuneacudatele.Dinpunctuldevederealunuidezvoltator,unAPIîndeplinește
rolulserveruluiresurselor,câtșirolulserveruluideautorizare.
-Clientulestereprezentatdeaplicațiecearenevoiedeaccesullacontul
utilizatorului,darînaintedeastaarenevoiedepermisiunedelautilizatorșiacea
permisiunevatrebuivalidatădecătreAPI.

13Oexplicațiemaidetaliatădespreceseîntâmplăînaceastădiagramăeste:
1.Aplicațiacereautorizațiautilizatoruluipentruaaccesaserviciulderesurse
delautilizator.
2.Dacăutilizatoruloferăautorizațieaplicației,aceastaprimeștepermisiunea
deacces.
3.Aplicațiacereuntokendeaccesdelaserveruldeautorizare(API)prin
prezentareaproprieiidentități,împreunăcupermisiuneadeaccesoferitădeutilizator.
4.DacăAPI-ulvalideazaaceltokendeacces,autentificareaafostrealizată.
5.AplicațiacereresurseledelaAPI,prezentându-itoken-uldeacces.
6.Dacătokenuldeaccesestevalid,serverulderesurse(API-ul)returnează
resurselecătreaplicație.
ÎnaintedeautilizaOAuth2,utilizatorulvatrebuisăîșicreezeuncontîn
secțiuneapentruAPIauneipaginiweb,delacareutilizatoruldoreștesăobținăresurse.
Dupăcreareaacestuicont,utilizatorulvatrebuisăcreezeunclient,pentruaobține
"clientcredentials",carereprezintăun"clientID"șiun"clientsecret".
Oauth2esteunstandardfolositpentruarealizaoconexiunesecurizatăîntre
serveruldoritșiclient.
Un"AccessToken"reprezintăunbiletdeintrarecareconținedatelede
securitatemenționateanterior,numite"clientid"și"clientsecret".ClientIDreprezintă
unșirdecaracteregeneratealeatoriu,definindidentitateaclientuluicreatpepaginăweb
dorită.ClientSecretreprezintă,lafelcașiClientID,unșirdecaracteregenerat
aleatoriu,caretrebuieținutsecretîntreclientșiAPI,careseactualizează,uneori,la
fiecaresesiune,șiestelimitatlaunnumărdecereripeoră.

142.6DespreBlizzardșiAPI-ullor
BlizzardEntertainment,Incesteocompanieamericanădezvoltatoaredejocuri
videocares-afondatpe8februarie1991înIrvine,California,StateleUniteale
Americii.Aceastăcompanies-aconcentratpedezvoltareacontinuăaseriilor"Warcraft",
"Starcraft"și"Diablo",daradezvoltatșialtegenuridejoc,cumarfi"Overwatch",care
esteunshooterlapersoanaatreia.Blizzardaobținutfoartemultăpopularitateprinseria
"Warcraft",desprecareaușicreatofranciza,compusădin5jocuriprincipale,Warcraft:
Orcs&Humans,WarcraftÎI:TidesofDarkness,WarcraftIII:ReignofChaos,World
ofWarcraft,șiHearthstone.Primele3reprezintăjocuridingenuldestrategie,aldoilea
esteunMMORPGlacares-aumaidezvoltatîncă6expansiuni,iarultimulreprezintăun
jocdigitaldecărți.Toatejocurilesusmenționatepotfijucateșionline,saudoaronline.
Înanul2008,companiaActivisionafuzionatcucompaniaVivendiGames,
companiapărinteaBlizzard-ului,formândnouăcompanieActivisionBlizzard.În2019
valoareacompanieiActivisionBlizzards-aînregistratcăfiinddeaproximativ36de
miliardededolari,acestlucruridicândaceastăcompanieîntopuri.
API-ulBlizzardestecompusdinmaimultetipuridecererisauapeluri,care,
împreună,formeazăsistemulpecarenoiîlvedemîntr-unjocvideodezvoltatdeei.În
legăturăcujoculvideonumit"WorldofWarcraft",avemmaimultetipuridecereriși
apeluri,careseîmpartîn3marisecțiuni,API-urilepentrucomunitate,API-urilepentru
dateledinjocșiAPI-urilepentruprofiluljucătorilor.Fiecaretipdecerere/apelseocupă
decâteunaspectdinjoc,cumarficele4API-uriutilizatedemine,careseocupăcu
dateledespreanimaleledinWow,câtșiprețulunuiGameToken.

15Înprezentaaplicațiecomercialăeuamfolosit4API-urinumite"Mounts
Index",careconțineolistăcuanimaleledestinatecălăritului,"WowTokenIndex",care
conțineprețulunuitokenfolositpentruacumpăratimpdejoc,"PetMasterList",care
conținelistadeanimaledestinateluptelorîntreanimale,și"PetIndex",careconține
listadeanimaleinofensive,destinatesocializăriiîntrejucători.
ÎnAPI-ulBlizzardexistămultealtetipuridecereri/apeluri,careșiele
reprezintătipurideAPI-urimaimici.DoarpentrujoculWorldofWarcraftexistă67de
API-uridespredateledinjoc,57deAPI-uridespreaspectelelegatedecomunitateși12
API-uridespreprofiluljucătorilor.
PentruaobțineacceslaunAPIdelaBlizzard,vatrebuisănecreămuncont
pedevelop.battle.net,pentruacreamaiapoiunclient,pentruaobțineClientIDși
ClientCredentials.
2.7DespreSublimeText

16SublimeTextreprezintăuneditordetextepentrucodurișimarkupapărutpe18
Ianuarie2008.Înprezents-aajunslaversiunea3.2.1aacestuia.Acestaconține23de
temevizualediferite,cuopțiuneadeadescărcașialteteme.
Acestaaratăîndreaptăominihartaacoduluiscris,pentruanavigamaiușorprinel.
SublimeTextoferăunmoduldeautocompletare,careprezicevariabilace
utilizatorulintenționeazăsăoscrieînaintecaaceastasăfiecompletată.
2.8DespreURL-uri
UnURL(UniformResourceLocator,tradus:DescriptorUniformdeResurse)
reprezintăformatuluneilocațiidininternet.
StructuracompletăaunuiURLestereprezentatăastfel:protocol://nume-
calculator-gazdă:port/cale-director/resursa
Protocolulestereprezentatderegulilecareguverneazătransferuldatelorîn
rețea.

17Înpractică,seutilizeazăurmătoareleprotocoale:
-file(carespecificăunURLlocal)
-Http(careindicăadresadeinternetauneipaginiweb)
-Ftp(utilizatpentruadresareaîninternetafișierelor)
-gopher(indicăadresaURLaunuidirectorGophercarereprezintăunsistem
utilizatpentrulocalizareașitransferulinformațiilordeindexareanumelor
fișierelorîninternet)
-telnet(permiteconectareaîntimpreallaunaltcalculatorînInternetși
utilizareaacestuiacașicumarfiuncalculatorlocal)
2.9DespreFavicons
Unfaviconreprezintăuntipdeimaginececonțineunasaumaimulteimagini
micuțenumiteicoane.Îngeneral,acesteiconițesuntamplasatelângănumeleunei
paginiwebsaualuneiaplicațiipentruaajutautilizatorulsădistingămaiușoracea
paginăsauprogramderestul,caredeținacelașinume.
Imagineaalbastrădelângănumele“BlizzardStore”reprezintăunfavicon.
Înimagineaurmătoareputețiobservacodulprincareamimplementatacest
favicon:

18
Acestcodincludeîndocumentaceeașiimagine,dardedimensiunidiferite,
pentruafiafișatăcorectpetoatetipurilededispozitiveșisistemedeoperare.
2.10DespreBazedeDate
PHP,acronimuldelaHypertextPreprocessor,reprezintăunlimbajde
programarecaresefoloseșteînscopurigenerale,deșiinițial,afostcreatpentru
dezvoltareaweb.AfostoriginalcreatdecătreRasmusLerdorfîn1994.Înainte,
acronimulPHPînsemna"PersonalHomePages".Înimagineaurmătoareputețiobserva
fișierulPHPalaplicațieiprezentate:

19
PHPMyAdminreprezintăounealtăpentruadministrareabazelordedatecreate
cuMariaDBșiMySQLcareaapărutpe9septembrie1998,scrisăînPHP.Aceastanu
poatefuncționapeunsistemdeoperarefărăafiinstalateșiconfigurateprimadată
MySQLșiPHP.AșaaratăinterfațaPHPMyAdmin,afișatăîntr-unbrowser:

20MySQLreprezintăunsistemdegestiuneauneibazededaterelaționale.Numele
acesteias-aformatdintr-unaltnumeșiunacronim,șianume,"My",carereprezintă
numelefiiceico-fondatoruluiMySQL,MichaelWidenius,șiSQL,acronimuldela
"StructuredQueryLanguage".MySQLafostdezvoltatdinlimbajuldeinterogarenumit
SQL.
"TheApacheHTTPServer",numitpescurtserverulApache,reprezintăun
servergratuit,opensourceșiesteîncontinuaredezvoltatdecătreFundațiaSoftware
Apache.
XAMPPesteunpachetdeprogramepentruscripturilescriseînlimbajelede
programarePHPșiPearl.ÎnimagineaurmătoareesteafișatăinterfațaXAMPP,unde
putemobserva5rânduridebutoane,fiecarereprezentândcătreofuncțielegatăde
Apache,MySQL,FileZilla,MercuryșiTomcat.Aceastăinterfațăfacepornirea,oprirea,
navigareașisetareaacestoraplicațiimaiușoară.
Obazădedatereprezintăunsistemorganizatdedate,ceseclasificădupămodul
deorganizareșimoduldestocare.Secunoscmaimultemodeledebazededate,printre
carebazădedatedetipobiect-relațional,bazădedatedetipobiect-orientat,bazade
datedetipdistribuite,bazadedatedetipdatesemantice,modelullogic,etc.

21Înprezentaaplicațieamutilizatobazădedatedetipobiect-relațional.Acest
modeldebazededateesterecunoscutprinexistențadatelorîntr-untabelbidimensional,
compusdinliniișicoloane,undeliniilereprezintăentitățileatribut,carecorespund
coloanelor.
Proiectareauneibazededatedetiprelaționalsedesfășoarăîndouăetape.
Primaetapăesteconstruireatabelelorcarecompunbazadedate,adicătrebuiedefinită
structurafiecăruitabelîmpreunăcuproprietățilesale.Adouăetapăestereprezentatăde
stabilirearelațiilordintretabele.Înschemeleurmătoareputețiobservatipurilederelații
dintretabele:
Relațiiledetipul1:1(unulaunu),presupuncăunuimembrudincolecțiaAîi
corespundeunsingurmembrudincolecțiaB.
Relațiiledetipul1:msaum:1(unulamulțisaumulțilaunu),carepresupuncă
unuimembrudinprimaentitateAîicorespundmaimulțimembridinadouaentitateB;
astfelderelațiisemainumescșirelațiiierarhice
Relațiiledetipulm:m(mulțilamulți),încareunuimembrudinentitateaAîi
corespundmaimultedatedincolecțiaBșiinvers

22Relațiidetipmulțilamulțisemainumescșirelațiidetiprețea.
Bazadedatedetipobiect-orientatmarcheazătrecerealaatreiagenerațiede
bazededate.Eladucebazelordedateunplusdedeschidere,flexibilitateșidarezultate
bunepentruproblememarișicomplexe.
Bazadedatedetipdistribuitereprezintăuntipdebazededatelogicintegrate
șifizicdistribuitepemaimultesistemedecalcul.
Bazadedatedetipdatesemantice,orientatespreobiecteseocupăcu
reprezentareasemnificațieidatelor,structuradebazăfolosităfiindceadeclasăde
obiectedefinităprinabstractizaredinentitateafizică.
Modelullogicdebazededateînseamnăcăoricesistemdegestiuneabazeide
date,pentruamanipulaobazădedatefoloseșteunanumittipdemodellogicdedate
fundamentale(ierarhice,rețea,relaționale,orientateobiect)șiderivate(distribuite).
FTP(FileTransferProtocol)reprezintăunprotocolstandardderețeafolosit
pentruatransferafișiereîntreunclientșiunserverprintr-orețeadecomputere.
Înzilelenoastreestefoarteimportantsăschimbămîntrenoidate.Pentruaface
asta,unmodfoartecomunîlreprezintăHTTP(HyperTextTransferProtocol),iaraltul
esteFTP.
Inițial,afostconceputșipublicatînanul1971decătreAbhayBhushan.
Filezillareprezintăunsoftwaregratis,destinatcafiindoaplicațieFTP,careeste
compusdinserverulFileZillașiclientulFileZilla.

23CAPITOLUL3-PROIECTAREAȘIIMPLEMENTAREAAPLICAȚIEI
3.1Prezentaresianalizaaplicatie
AceastăaplicațiaafostrealizatăînscopuldeaajutajucătoriideWorldof
WarcraftsăialacunoștințăprețurileanimalelorînsușibilecâtșiprețulunuiGame
Token.
Aplicațiaestealcătuitădindouăpaginiweb,"Licență.html"și"Pagină
Contact.html".Paginaprincipală,"licență.html"estealcătuitădinmaimultecapitole,iar
"PaginăContact.html"serveștedreptunmijlocprincareutilizatorulpoatecontacta
dezvoltatorulpentrueventualenelămuririsauprobleme.
Primapaginăeste"Licență.html"carearatăașa:
Peaceastăpaginăputemobservaunmesajdeîntâmpinare,împreunăcucâteva
paragrafeceoferăinformațiidesprerolulsite-uluișifuncționalitățilesale.
Înpaginăsuperioarăasite-uluiputemobservadouăbaredenavigație,
suprapuse.Prima(ceadedeasupra)sereferălacontactulutilizatoruluicupagină,având
patrubutoane:
-Home:prinapăsareaacestuibuton,paginavarevenilaformainițială,
formăafișatăanterior.

24-Contact:Acestbutonredirecționeazăpaginaactualăcătre"Pagina
Contact.html".
PaginaContact.htmlafostcreatăfolosinddoarHTMLșiCSS,fiindopagină
simplă,cunupreamultefuncționalități.Aiciputemobservaparteadestilizareapaginii
decontact,creatăcuCSS,împreunăcuprimeletreicâmpuridinpagină,șicumesajulde
întâmpinare,iarînadouăpozăputemobservacâmpuldestinatconținutuluimailuluiși
cumafostcreatbutonuldesubmit.

25
Aiciamcreatbutonuldetiplistăpentruselectareațăriiutilizatorului.Conțineun
coddestuldelung,dareuosăafișezdoaropartedinel:

26
-Login:Acestbutonafișeazăofereastrădetippopupînpagină,șiestedestinată
logăriiutilizatorului,dacăacestaareuncontînregistratînbazadedateasite-ului.Din
păcatenuesteîncăimplementat,deoarecesite-ulnuareîncăobazădedate.

27
Aceastăfuncțiesepoateînchidedacădămclickînafaraferestrei,saudacă
apăsambutonulcancel.
Amcreatfuncția"spunându-i"JavaScript-uluifaptulcă,dacăfereastra
modalesteafișată,șieuapăsbutonulnumit"Cancel"saudacăapăsaltundevaînafara
ferestrei,fereastravatrebuisăseînchidă.
-Search:Acestcâmppermitecăutareadatelorafișateîninteriorulpaginii.Dinpăcatenu
esteîncăimplementat,darosăfieînviitorulapropiat.
Pentruarealizaaceastăaplicație,amfolositHTML,deoareceestecelmaifolosit
limbajdemarcaredinzilelenoastre,CSS,deoarecepotstilizafoarteușorșimaicurat
conținutul,șiJavascript,deoareceesteunlimbajdescriptingfoartepopularînzilele
noastre,șiușordeutilizat.

28AiciputemobservaunfragmentdecoddinlimbajulHTML:
Înimagineaanterioarăamcreat,folosindhtml,paginadeautentificare.Amcreat
douăcâmpuripentruaintroducetext,unulpentrunumeledeutilizator,iarcelălalt
pentruparolă,douăbutoane,unulpentruachemafuncțialoginf()șialtulpentrua
închidefereastrapopup.Amcreatșiunelementdetipcheckboxcautilizatorulsăaibă
posibilitateasăaleagădacăpaginaîivareținesaununumeledeutilizatorpentru
următoareaautentificare.ÎncăunexempludecodcreatcuHTMLesteacesta:
Înacestfragmentdecodamcreatpaginaprincipală,ceacareapareprimadata
cânddeschidemsite-ul.Amfolosit4paragrafepentruaoferiinformațiiutilizatorului,și
unheaderpentruaafișamesajul"WelcomeatBlizzardStore"cauntitlu.
Înimagineaurmătoareputemvedeaceseîntâmplăatuncicândapăsamunul
dintrecelepatrubutoanedinaldoilearând.Euîlvoiapăsapecelnumit"BattlePets":

29
Aiciputemobservacăprintr-ofuncțiejavascriptsegenereazăautomatuntabel
ceconțineanumiteînregistrăridinAPI-ulblizzard.Acesteînregistrărineoferă
informațiidespreID-ulaceluianimal,numele,familiadincarefaceparte,câtșiprețul
acestuia.Înparteasuperioarăatabeluluiputemobservaunmesaj.Amalessăafișezacel
mesajdeoareceîncoloanacuprețuri,pelângăvaloareaprețului,amtrecutșilitera"G",
caresereferălaGold(Aur),careesteceamaivaloroasămonedădinjoc.Amținutsă
precizezcătoateprețurileafișatepeaceastăpaginăsuntexprimateînmonedadinjoc,și
anumeGold.Amalessăincludșicâteunheaderpentrufiecarecoloană,ajutând
utilizatorulsăîșideaseamaceînseamnăacelecaracteredintabel.
MaijosputemobservacumaratăfuncțiarealizatăînJavaScript,necesarăpentru
generareaacestuitabel:

30
Putemobservacămaisusexistădouăcapturideecran,deoarecefuncțiaafost
destuldemarepentruaocuprindeîntr-osingurăcaptură.Înprimacapturăclientulface
unapelcătreAPI,utilizândun"AccessToken",API-ulîioferăresurseleceruteapoi
estecreatăovariabilaîncaresevastocarăspunsuldetipJSON,carevafiiteratșise

31vorextragedatelenecesaredinel.Iterareasefaceînadouăcapturădeecran,prin
funcția"for".Înprimacaptură,deasuprafuncției"for"sepoateobservacumeste
construitheader-ultabelului(primaliniedintabel).Maiîntâiamdeclaratfuncția
numită"afisareBattlePets",urmatădeconstructorul(),apoiamdeclaratconstanta
"cerereBattlePets"cafiind"newXMLHttpRequest",pentruaputeaceredatedintr-un
serverweb.
Amdeclaratconstanta"adresa",reprezentândînsușitokenulnostrudeacces,
apoiamspecificattipuldecerere"open()"șimetoda"GET"șiapoiamfolositmetoda
"send()"pentruatrimiteocererecătreAPI.
Dupăceamdeclaratvariabila"paragraf",pentruaputeaafișaunparagraf
folosindofuncțieJavascript,amfolositfuncția".appendChild()"pentruaadăuga
fiecareparagrafîncâmpul"conținut".Amstilizatvariabila"paragraf"apoiamfolosit
funcția(.onreadystatechange=function())pentruatransmiteprogramuluisătreacămai
departedoardacăcerereadeareturnadatedinAPIafostaprobată.
Amdeclaratvariabila"raspunsBattlePets"pentruafolosifuncția".parse()",
pentruatransformarăspunsuldelaAPI,careestesubformatstring,într-unobiect
javascript(JSON).
Amdeclaratvariabila"animaleBattlePets"pentruadefinicarecâmpanume
neintereseazădinacelfișierJSON.Încontinuare,amcreattabelulșiamadăugat
headerele,camaiapoisăfolosimfuncția"for"pentruatransmiteprogramuluicătrebuie
săgenerezeuntabelcuunnumărdeînregistrăridefinitdeacelfișierJSON,camaiapoi
săîlcompletezecuînregistrări.Maijosdetag-ul"script"putemobservaacestfragment
decod:
Acestfragmentafostcreatcuscopulindicăriicătrefuncțiatabelului,înce
locațiedinpaginăvatrebuisăsegenereze.Aceastăfuncțieesteinvocatăprinapăsarea
butonuluidinbaradenavigare,numit"BattlePets",careafostconstruitastfel:

32
Acestedouăbaredenavigareconțincâtepatrubutoane,cedeservesccalegătură
directăîntreutilizatorșifuncțiileprogramului,realizateînJavascript.Aufoststilizate
folosindCSSastfel:

33NavbarXesteclasadecsscaresereferălatotconținutulcefacepartedin
aceastăclasă.
NavbarXinput[type=text]sereferălacâmpuriledetiptext.
NavbarXasereferălatoatebutoaneleceauatașatuntag<a>,pentruunlink.
.NavbarXa:hoversereferălatoatebutoaneleceauatașatuntag<a>,peste
carevomtrececursorul.
Activesereferălaoclasădinacestprogram.
Amsetatculoareadefundalabutoanelorcafiindtransparent,deoarecenu
intenționamsăobstrucționezimagineadefundal,înacestfelneincarcandpagina,vizual,
preamult.Încontinuare,amfolositJavaScriptpentruaadăugaîncăofuncțiepentru
acestebutoane,careacționeazăascunzândconținutulunuitabel,dacăunaltbutonvafi
apăsat.Cândvomapăsa,deexemplu,butonul"Mounts",conținutuldejaafișatal
tabeluluiBattlePetsvafiascuns,pentruanusesuprapunecutabelulMounts.
y.style.display="none";
z.style.display="none";
w.style.display="none";
v.style.display="none";
x.style.display='block';-Acestcodsetraduce"cândaceastăfuncțievafichemată,
numaielementulxsevaafișa,iarcelelaltevorfiascunse".

34
Ultimaparte,darnușiceadinurmăoreprezintătitlulpaginii,împreunăcu
imagineadefundal,caresuntdefiniteastfel:

353.1Proiectare,Modelare
Oaplicațiewebreprezintăunsistemsoftwarecesebazeazăpe
tehnologiileșistandardeleW3C(WorldWideWebConsortium)ceoferăresurse
webspecifice,conținutșiserviciiprinintermediuluneiinterfețeutilizatornumită
browserweb.
AccesullaconținutulresurselorWebsefaceprintr-unprotocol:HTTP-Hyper
TextTransferProtocol.

363.3DiagrameUMLșiERD
DiagramaERDilustrândrelațiainterfețeicuutilizatorul.
DiagramaERDilustrândrelațiainterfețeicuutilizatorul(2).

37
DiagramaUMLilustrândschimburilededatedintreentități.

38DiagramăpentrufuncțiaHide/Show
CAPITOLUL4–CONCLUZII
4.1Concluzii
Dupăcumștimcutoții,schimbuldeinformațiiesteesențialîntr-osocietate
cuungraddedezvoltaretehnologicălafelcaalnostru.Respectivaaplicațieafost,în
mare,creatăfolosindlimbajuldescripting"JavaScript",carereprezintăunlimbajfoarte
puternicșipopularînzilelenoastre.
Aplicațiaarescopuldeafurnizainformațiiutilizatorilorcuscopuldeaîi
influențasăfacăanumitedeciziisaunu,înfuncțiedeinformațiileoferite.Deexemplu,
unutilizatorvaștiidacătrebuiesăintreacumînjocsăcumpereunanumitanimal
deoareceprețulîiestemaiscăzutdecâtînultimele2luni,orisămaiaștepte,deoarece
prețurileaucamrămaslafelînultimaperioadă.

39Suntconștientcăaceastăaplicațiemaiarenevoiedemulteîmbunătățiri,dar,
cutimpul,măvoiasiguracăosăodezvoltlagraduldeaplicațiecomercialăcemerită
timpulpecareunutilizatorîlpierdeatuncicândacceseazăacestlink.
4.2PosibilitățideDezvoltare
Versiuneaprezentăaacesteiaplicațiiwebcomercialenumită"BlizzardStore"
nuestenicidecumoaplicațiefinalizată,cimaidegrabăprimaversiuneaacesteiaplicații,
cevafiîmbunătățităcutimpul.
Intenționezsălegaceastăaplicațiedeobazădedate,pentrua-iofericâteva
îmbunătățiriminoredesuprafață,cumarfifuncționalitateabareidecăutaresau
posibilitateautilizatoruluisăîșiînregistrezeuncontpeaceastăaplicație.
Intenționezca,peviitor,sălegaceastăpaginădemaimulteAPI-uridela
Blizzard,pentruaoferinunumaiinformațiidespreprețulanimalelor,darșimultealte
informațiidesprecelelalteaspectealetuturorjocurilordelaBlizzard.
Osăîncercsăcreezunchatîntreutilizatoriipaginiicareauuncontcreat.
Osădezvoltometodădeclasificarepentrufiecareaspectaljoculuipecare
osăîlimplementez,saucareestedejaimplementat.
Osăcreezîncăopaginănumită"News"pentruaînștiințautilizatoriide
posibileleofertedinjocurileBlizzard
Acesteasuntdoarnișteideidespremodulîncaresemaipoatedezvolta
pagina,dar,odatăcuavansulfoarterapidaltehnologiei,maipotapăreașialtele.

40BIBLIOGRAFIE
(Resurseinternet)
1.JohannReinke.CeesteOAuth2?onlinela:
http://www.bubblecode.net/en/2016/01/22/understanding-oauth2/
[accesat:02.06.2019]
(Resurseinternet)
2.ChrisHoffman.CeesteunAPI?disponibilonlinela:
https://www.howtogeek.com/343877/what-is-an-api/
[accesat:27.05.2019]
(Resurseinternet)
3.CeesteunAPIsideceamfolosiunul?disponibilonlinela:
https://medium.com/@TebbaVonMathenstien/what-is-an-api-and-why-should-i-use-
one-863c3365726b
[accesat:19.06.2019]
(Resurseinternet)
4.CelemaipopularemetodedeafaceocerereHTTPinJavascriptdisponibilon
linela:https://www.freecodecamp.org/news/here-is-the-most-popular-ways-to-make-
an-http-request-in-javascript-954ce8c95aaa/
[accesat:08.06.2019]

41(Resurseinternet)
5.CSSTutorialdisponibilonlinela:https://www.w3schools.com/css/default.asp
[accesat:18.05.2019]
(Resurseinternet)
6.CumseanalizeazăunobiectdetipJSONînJavascript(Dec29,2018)disponibil
onlinela:https://appdividend.com/2018/08/17/how-to-parse-json-in-javascript/
[accesat:05.06.2019]
(Resurseinternet)
7.DesprefuncțiileJavascriptdisponibilonlinela:https://javascript.info/function-
basics
[accesat:13.06.2019]
(Resurseinternet)
8.DespreJSONdisponibilonlinela:https://www.json.org/
[accesat:03.06.2019]
(Resurseinternet)
9.DespresistemeledesecuritatefolositedeBlizzarddisponibilonlinela:
https://develop.battle.net/documentation/guides/using-oauth
[accesat:02.06.2019]

42(Resurseinternet)
10.DocumentațieAPIBlizzarddisponibilonlinela:
https://develop.battle.net/documentation
[accesat:28.05.2019]
(Resurseinternet)
11.Funcțiahide/showatașatăunuibutondisponibilonlinela:
https://stackoverflow.com/questions/9075440/javascript-button-show-hide-on-text-
changed
[accesat:24.06.2019]
(Resurseinternet)
12.HTMLTutorialdisponibilonlinela:
https://www.w3schools.com/html/default.asp
[accesat:14.05.2019]
(Capitolîntr-ocarte)
13.Alina-FlorentinaCiltan,(2016),Else(Ed.),JavaScript(142pg).
(Capitolîntr-ocarte)
14.D.Crockford,(2008),Javascript:TheGoodParts,O'Reilly(Ed.)
(Capitolîntr-ocarte)
15.StoyanStefanov,(2010),JavaScriptPatterns,O'Reilly(Ed.)
(Resurseinternet)
16.JavascriptTutorialdisponibilonlinela:
https://www.w3schools.com/js/default.asp
[accesat:21.05.2019]

43(Resurseinternet)
17.JavascriptTutorialInteractivdisponibilonlinela:https://www.javascript.com/
[accesat:18.06.2019]
(Resurseinternet)
18.TransformăJSONîntr-untabelînHTMLdisponibilonlinela:
https://travishorn.com/building-json2table-turn-json-into-an-html-table-a57cf642b84a
[accesat:22.06.2019]
(Capitolîntr-ocarte)
19.SeanMcManus,(2014),WebDesigninEasySteps(240pg).
(Capitolîntr-ocarte)
20.JonDuckett,(2014),JohnWiley&SonsInc(Ed.),WebDesignwithHTML,
CSS,JavaScriptandjQuerySet.