Lucrare de licența [307124]

[anonimizat] ‘‘Evenimente în Brașov’’

Autor: Manoliță Mădălina Elena

Coordonator științific: conf.univ.dr. Sângeorzan Livia

Brașov,2016

Introducere

În primul capitol este prezentată evoluția și dezvoltarea limbajului de marcare HTML5 (Hyper Text Markup Language) și cum a ajuns să fie folosit de cele mai mari companii de pe planetă.

[anonimizat]3. CSS3 reprezintă o actualizare ce va aduce câteva atribute noi și ajută la dezvoltarea noilor concepte în webdesign.

În al treilea capitol este prezentat limbajul de programare JavaScript care este folosit pentru a [anonimizat] o bibliotecă JavaScript concepută pentru a [anonimizat], animații și cereri de tip Ajax.

În al patrulea capitol este prezentat un alt limbaj de programare numit PHP (Personal Home Page). Folosit inițial pentru a [anonimizat], el fiind folosit împreună cu MySQL care este un sistem de gestionare a bazelor de date. PHP și MySQL sunt foarte des folosite împreună pentru a introduce date într-o bază de date. Bazele de date fiind o modalitate de a stoca informații și date pe un suport extern.

[anonimizat], este o [anonimizat], elegantă. [anonimizat], rutare, sesiuni, [anonimizat].

[anonimizat], este cel mai popular Framework din lume. Utilizarea lui ajută la economisirea considerabilă a [anonimizat].

În al șaptelea capitol și al optulea este prezentat pe scurt XAMPP (x-os, Apache, MySQL, PHP, Pearl) respectiv editorul de text Atom.

[anonimizat]-ul fără a [anonimizat].

Motivație

Această lucrare are rolul de a ajuta toate persoanele ce sunt interesate de activitățile din Brașov.

M-am decis să fac acest proiect deoarece și eu sunt interesată de evenimentele petrecute în Brașov și imi doresc ca și persoanele la fel ca mine să poată beneficia de mai multe informații dintr-o [anonimizat] a mai căuta altundeva.

[anonimizat], [anonimizat].

Obiectivul acestei lucrări este de a prezenta modalități de realizare a paginlor web atractive și convingătoare. Este foarte important ca pagina să fie cât se poate de clară pentru a [anonimizat]-urile trebuie să vizibile și ușor accesibile.

Capitolul 1 – HTML5

Scurt Istoric

În timpul analizarii spațiului Web, s-a dezvoltat și primul limbaj de marcare a [anonimizat] (Standard Generalized Markup Language). [anonimizat]rners-Lee a susținut și a lucrat la un limbaj din ce în ce mai îmbunătățit numit: HTML.

În luna iulie 1996, W3CWorld Wide Web Consortium a publicat standardul HTML 3.2, care includea specificații în ceea ce privește conceprea și interpretarea tabelelor și imaginilor, compatibil în totalitate cu o versiune mai veche a limbajului de marcare hypertext HTML 2.0. Până în ianuarie 1997, majoritatea navigatoarelor au implementat aceste specifcații, excepție au făcut Netscape și Microsoft Internet Explorer acestea și-au adăugat propriile specifcații nestandardizate la acel moment precum posibilitățile de inserare a elementelor direct în paginile Web, suportul pentru cadre sau pentru execuția scripturilor pe partea clientului (JavaScript).

O versiune mai noua de HTML, cea cu numarul 4.01, a fost standardizată pe data de 24 Decembrie 1999 și ofera suport extins pentru numeroase atribute și elemente. Din păcate majoritatea browserelor continuă să introducă și elemente care nu se regăsesec în standardizarea W3C astfel programarea aplicațiilor Web poate să conducă la rezultate și interpretări diferite în funcție de aplicația folosită.

Standarul HTML5 propriu-zis a fost publicat de către W3C ca Working Draft în 2008, un stadiu de recomandare W3C fiind așteptat în 2014. WHATWG (Web Hypertext Application Technology Working Group) continuă să lucreze la HTML, renunțând însa la versionare. Astfel, specificțiile pentru HTML sunt considerate un’’standard’’, HTML5. S-a convenit că HTML5 se scrie legat pentru că standardele ar trebui sa aibă un nume standard.

HTML5 este conceput pentru a fi compatibil cu versiunile anterioare, drept urmare, orice document valid HTML4 sau XHTML este valid și în HTML5, dacă folosește doctype-ul nou. Convenabil, fiindcă acest lucru înseamnă că nu trebuie să uităm tot ce stim despre HTML și să o luam de la capăt.

HTML5 introduce elemente și atribute noi care reflectă utilizarea tipică a unui site modern. Unele dintre ele sunt semantic înlocuite cu utilizări comune de blocuri generice <div> și de elemente inline <span>, de exemplu <nav> – block de navigație în site, <footer> – în mod normal se referă la partea de jos a unei pagini web sau la ultima linie de cod HTML sau <audio> și <video> în loc de <object>. Unele elemente depreciate din HTML 4.01 au fost șterse, inclusiv elementul de prezentare <font> și <center>, al căror efect este realizat cu CSS (Cascading Style Sheets).

Limbajul HTML

HTML este prescurtarea de la Hypertext Markup Language, el reprezintă limbajul pe care browserele îl înteleg și cu ajutorul lui pot fi afișate paginile web. HTML nu utilizează instrucțiuni precum limbajele de programare, ci el folosește etichete sau tag-uri.

Sintaxa generală a unui tag este reprezentată în Fig.1.

Fig.1 Sintaxa generală a unui tag

Limbajul HTML nu este un limbaj case-sensitive.

Un fișier sau un document HTML mereu începe cu tagul <html> și se termină cu </html>.

Între cele două marcaje menționate mai sus apar două secțiuni:

Antetul documentului care este delimitat de marcajele reprezentate în Fig.2.

Fig.2 Antetul documentului

Corpul documentului care este delimitat de marcajele reprezentate în Fig.3.

Fig.3 Corpul documentului

În Fig.4 se prezintă structura de bază a unui document HTML.

Fig.4 Structura de bază a unui document HTML

Principalele tag-uri HTML:

Tag-ul <body>

Atribute ale lui body se regăsesc în Tabel1.

Tablel1. Atribute ale lui body

În Fig.5 se regăsește sintaxa atributelor.

Fig.5 Sintaxa atributelor

Tag-ul headings

Headings sunt definte cu tag-urile <h1> până la <h6>tags. <h1> definește cel mai important heading. <h6> defineste cel mai “mic” heading.

Structura unui heanding este prezentată în Fig.6.

Fig.6 Structura unui heading

Tag-uri pentru formatarea textului în pagină

În Tabel2. se regăsesc tag-uri pentru formatarea textului.

Tabel2. Tag-uri pentru formatarea textului

Tag-ul pentru Link-uri(legături) <a>:

Cu ajutorul legăturilor un text obișnuit se transformă în hipertext sau hiper-media. Legăturile sunt zone active într-o pagină. Ele se inserează cu ajutorul etichetei <a> și a atributului "href", care ia valoare adresa URL a resursei solicitate.

Sintaxa tag-ului <a> pentru este prezentată în Fig.7.

Fig.7 Sintaxa tag-ului <a>

În Fig.8 este prezentată sintaxa tag-ul <a> dacă dorim să fie o imagine în loc de text.

Fig.8 Sintaxa tag-ului <a> cu imagine

Tag-ul pentru liste:

Listele pot fi ordonate și neordonate.

În Fig.9 se regăsește sintaxa tag-ului pentru liste neordonate <ul>.

Fig.9 Sintaxa tag-ului <ul>

Tag-ul <ul> îl poate avea ca și atribut pe style (vezi Fig.9).

În Tabel3 se regăsesc valorile ce ii pot fi atriuite lui style.

Tabel3 Valori atribuite lui style

În Fig.10 se regăsește sintaxa tag-ului pentru liste ordonate <ol>.

Fig.10 Sintaxa tag-ului <ol>

Tag-ul <ol> îl poate avea ca și atribut pe type (vezi Fig.10).

În Tabel4 se regăsesc valorile ce ii pot fi atriuite lui type.

Tabel4 Valori atribuite lui type

Limbajul XHTML

De-a lungul utilizării, limbajul HTML a dat dovadă de un număr mare de neajunsuri pentru ca W3C să se gândească la o nouă specificație. Printre problemele principale se numară: dificultatea de personalizare sau extindere a limbajului, inadecvarea limbajului HTML pentru tranzații automate de date, neintegrarea cu alte limbaje de marcare si că interpretarea de către navigatoare este ambiguă. Navigatoarele Web s-au "obișnuit" cu codul HTML de multe ori scris gresit în efortul de a se face o afișare "frumoasă". Problemele au început atunci când site-urile trebuiau văzute pe dispozitive mobile.

Ca urmare a acestor concluzii, W3C a dezvoltat eXtensible HyperText Markup Language(XHTML), o reformulare HTML în eXtensible Markup Language(XML) cu scop principal în trimiterea datelor. Deci XHTML repară erorile apărute în HTML:

este usor expandabil;

este special conceput pentru schimbul automat de date;

se integrează foarte bine cu celelalte limbaje de marcare formulate în XML;

Prin XHTML, W3C a raspuns necesităților, care se impuneau în mod imperios, ale pietei în care figurează o multime de dispozitive mobile care permit conectarea la Internet. În plus, interpretarea codului nu mai este ambiguă, pentru că fiecare document XHTML trebuie să fie riguros formatat și confruntat cu un Document Type Definition(DTD), care cere o sintaxă corectă, pentru a oferi navigatoarelor un timp mai scurt de interpretare.

În Fig.11 avem un exemplu de document XHTML validat DTD:

Fig.11 Document XHTML

HTML5

HTML5 este a cincea versiune a standardului HTML, și din octombrie 2011 este în continuă dezvoltare. Obiectivele principale sunt de a îmbunătăți limbajul cu un suport pentru cele mai recente dezvoltări, atât pentru calculatoare cât și pentru dispozitivele mobile, reușind până în momentul de fată să acapereze multă atenție din partea oamenilor, bineînteles prin faptul că este usor de citit și foarte bine înteles de calculatoare și dispozitive.

HTML5 își propune să însumeze nu numai HTML 4.0, dar și XHTML DOM2HTML. HTML5 este un răspuns la observația că HTML și XHTML utilizate în comun pe World Wide Web sunt un amestec de caracteristici introduse de specificații diferite. Împreuna cu acestea mai sunt și caracteristicile diferite aduse de software, de browsere și multe erori de sintaxă în documentele web existente.

În concluzie HTML5 devine o încercare de a defini un singur limbaj de marcare care poate fi scris în oricare dintre sintaxele HTML sau XHTML. Acesta include modele detaliate de prelucrare pentru a încuraja mai multe implementări, extinde, îmbunătățește și raționalizează disponibilitățile pentru documentele web și introduce marcarea și aplicații API (application programming interfaces) pentru aplicații web complexe. Din aceste motive, HTML5 este un posibil candidat perfect pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au fost create din considerarea că va trebui să devină capabil să ruleze pe dispozitive mobile cum ar fi smartphone-urile sau tabletele.

HTML5 nu e singur, în sprijinul său vin alți doi stâlpi ai web-designului CSS și Javascript. Mulți programatori vorbesc de cele trei limbaje de programare ca fiind cele care formează structurile unei pagini web:

HTML – proportionează nivelul structural al paginii, organizând conținutul cum ar fi: textul, fotografiile, tabelele, etc;

CSS – proportionează nivelul de comportament, de prezentare a unei pagini web, dând o bună aparență conținutului HTML.

Javascript – adaugă un alt nivel de comportament aducând pagina web la viață pentru a interacționa cu vizitatorii.

De aici rezultă că utilizând HTML5, veți putea construi pagini web, adevărat, însă culorile, aranjarea conținutului în pagină, stilurile CSS în general, nu se mai pot adăuga cu atribute HTML ci cu CSS. Cu HTML5 de acum veți putea adăuga doar conținutul unei pagini web. Prin separarea conținutului de stil vom avea mai puține încurcături în pagină, mai puțină confuzie, iar paginile se vor încărca mult mai repede.

Elemente noi in HTML5

În Tabel5 găsim câteva din elementele noi apărute în HTML5.

Tabel5. Elemente noi în HTML5

Prezentarea celor mai importante tag-uri aduse de HTML5

Tag-ul <audio>

În Fig12 regăsim sintaxa tag-ului <audio>.

Fig12. Sintaxa tag-ului <audio>

Tag-ul <audio> poate folosi atributele regăsite în Tabel6.

Tabel6 Atributele tag-ului <audio>

Sematică:

Tag-ul <audio>se folosește pentru a adăuga sunet, muzică în pagina web.

Tag-ul <video>

În Fig13. regăsim sintaxa tag-ului <video>.

Fig14. Sintaxa tag-ului <video>.

Tag-ul <video> poate folosi atributele regăsite în Tabel7.

Tabel7. Atributele tag-ului <video>.

Sematică:

Tag-ul <video> este un element multimedia folosit pentru a adăuga în pagina web video, clipuri și alt conținut video.

Tag-ul <figure>

Tag-ul < figure> poate conține elementul <figcaption> ca să adauge o scurtă descriere la ceea ce e adăugat în <figure>.

În Fig15. regăsim sintaxa tag-ului <figure>.

Fig16. Sintaxa tag-ului <figure>

Sematică:

Tag-ul <figure> se folosește pentru a adăuga în pagină un grup de elemente care au un conținut de sine stătător, cum ar fi diagrame, poze, cod, etc.

Conținutul din elementul <figure> e atașat la derularea paginii, dar poziția lui este independentă.

Tag-ul <link>

În Fig17. regăsim sintaxa tag-ului <link>.

Fig.18 Sintaxa tag-ului <link>

Tag-ul <link> poate folosi atributele regăsite în Tabel8.

Tabel8 Atributele tag-ului <link>

Capitolul 2 – CSS3

Scurtă descriere

Denumirea de CSS provine din limba engleza de la Cascading Style Sheets, care se poate traduce ca fiind foi de stil în cascadă, stiluri ce pot fi definite atât în headerul unei pagini web, cât și într-un fișier separat, individual. Cea de-a doua variantă fiind cea recomandată.

CSS este utilizat atât de autorii cât și de cititorii unei pagini web pentru a defini culori, fonturi, layout, precum și alte aspecte legate de prezentarea documentelor. El este conceput în primul rând pentru a permite separarea documentului ca și conținut (scris în HTML sau un Markup Language similar) de documentul de prezentare (scris în CSS).

Această separare îmbunătățete accesibilitatea conținutului, oferă o mai mare flexibilitate și poate diminua caietul de sarcini al celui care se ocupă de mentenanța unui site web prin asigurarea unui control mai simplu.

De asemenea CSS-ul poate reduce complexitatea și repetarea tag-urilor folosite pentru formatare din structura conținutului. CSS poate permite ca aceeași pagină să fie prezentată în diferite stiluri de redare pentru diferite medii, cum ar fi pe ecranul unui calculator, în imprimare sau vocal (când este redat printr-un cititor de ecran).

O dată cu apariția sa, mulți dezvoltatori web au considerat că CSS este un mod de formatare mult mai puternic și mai usor de utilizat, și au considerat că <FONT> este un tag învechit. În 2006 s-a făcut update, capabilitățile CSS-ului au fost îmbunătățite considerabil în ceea ce privește design-ul layout-ului unei pagini web. Cu toate acestea, multe site-uri web încă utilizează CSS numai pentru formatarea textului, în timp ce pentru layout folosesc tabele. Pentru că Internetul este într-o crestere și dezvoltare rapidă și continuă datorită utilizării tot mai frecvente a telefoanelor mobile și a PDA-urilor, este necesară crearea unor pagini web accesibile utilizatorilor care folosesc o mare varietate de dispozitive mobile. Un design web fără tabele îmbunătătește considerabil accesibilitatea, în acest sens.

Autoritatea în ceea ce privește acest tip de fișiere, este deținută de World Wide Web Consortium (W3C). Aceștia oferă specificațiile complete, lista browserelor care suportă CSS, instrumente de validare, precum și informații despre învățarea CSS.

CSS3 oferă o mulțime de lucruri noi pentru a îmbunătăți un website. Multe dintre noile opțiuni nu sunt axate pe funcționalitate, dar pe parcursul anilor s-a observat că utilizatorii vor pe lângă funcționalitate, un design modern.

Elemente CSS2 și CSS3

În Tabel9 sunt prezentate elemente de CSS2 și CSS3.

Tabel9 Elemente de CSS2 și CSS3

Tipuri de reguli CSS

O foaie de stil externă este ideală atunci când stilul respectiv se aplică mai multor pagini. Cu o foaie CSS externă, puteți modifica aspectul întregului site modificând un singur fișier, de altfel este cea mai bună metodă de a utiliza CSS.Exemplu în Fig.19.

Fig.19 Exemplu

Fiecare pagină trebuie să se lege la foaia de stil folosind tagul <link> despre care am vorbit în capitolul HTML5.

De reținut este faptul că un fișier HTML poate conține mai multe foi de stil externe, chiar și stil inline. Ordinea de aplicare a stilului este: stil inline, stil din fișier extern.

Singurul lucru care poate schimba acest lucru este dacă la adăugarea unei proprietăti la final adăugăm !important el va avea prioritate față de toate celelalte proprietăți aplicate unei clase.

În Fig.20 avem o reprezentare și o ordine de adăugare a stilurilor corectă.

Fig.21 Aplicarea în cascadă a stilurilor CSS

În Fig.22 este prezentată structura unui stil CSS.

Fig.22 Structura unui stil CSS

Capitolul 3 – JavaScript, jQuerry

Prezentarea limbajului JavaScript

Inițial, JavaScript a fost dezvoltat de Netscape sub denumirea LiveScript, un limbaj de scriptare care intenționa să extindă capacitățile HTML și să ofere o alternativă partial la un număr mare de scripturi CGI Computer-Generated Imagery pentru prelucrarea informațiilor din formulare și pentru a adăuga dinamism în paginile utilizatorilor. După lansarea limbajului Java, Netscape a început să lucreze împreună cu firma Sun pentru a oferi un limbaj de scriptare a cărui sintaxă și semantică erau strâns legate de Java – motiv pentru care denumirea a fost schimbată în JavaScript. După finalizarea limbajului, Netscape și Sun l-au lansat împreună.

După lansarea sa, în decembrie 1995, JavaScript și-a atras sprijin din partea principalilor distribuitori din domeniu, printre care Sybase, Apple, Borland, In-formix, Oracle, Digital, HP și IBM. Situația s-a complicat însă atunci când a intervenit Microsoft. Întelegând importanța scriptării Web, Microsoft a dorit să ofere suport și pentru JavaScript. Când Netscape a preferat să acorde licența de tehnologie companiei Microsoft în loc să o vânda, Redmond a analizat JavaScript, bazându-se pe documentația publică, și a creat propria sa implementare, JavaScript, care este recunoscută de Microsoft Internet Explorer versiunile 3.0 și ulterioare. JavaScript 1.0 este aproximativ compatibil cu JavaScript 1.1, care este recunoscut în Netscape Navigator 3.0 și browserele ulterioare.

Pe lângă JavaScript, Microsoft are propriul său concurent pentru JavaScript, numit VBScript, realizat pentru pătrunderea pe Web a actualilor programatori VB. VBScript este un subset al limbajului Visual Basic. Deoarece Netscape nu recunoaște VBScript, principalele sale utilizări sunt pentru intraneturile unde se înregistrează o abundență de utilizatori de Microsoft Internet Explorer.

Aspecte fundamentale ale limbajului JavaScript

JavaScript poate fi încorporat în HTML

JavaScript este găzduit în documentul/ fișierul HTML și executat din interiorul lor. Cele mai multe obiecte JavaScript au etichete HTML pe care le reprezintă, astfel încât programul este inclus la nivelul esențial, pe partea de client, al limbajului. Pentru a fi un programator JavaScript eficient, trebuie să cunoaștem foarte bine limbajul de marcare HTML. JavaScript folosește HTML ca modalitate de a sări în cadrul de lucru al aplicațiilor Web și-i extinde capacitățile normale, asigurând evenimente pentru etichetele HTML și permitând acestui cod condus de evenimente să se execute din interiorul documentului.

JavaScript este dependent de mediu

JavaScript este un limbaj de scriptare, nu un instrument în sine. JavaScript este motorul de interpretare din mediu- Netscape Navigator, Microsoft Internet Explorer sau unul din motoarele pe parte de server. Când este inclus într-un document HTML, JavaScript depinde de browser pentru a fi recunoscut. Dacă browserul nu-l recunoaște, programul va fi ignorat, ba chiar mai rău- dacă nu ținem seama de browserele neacceptate programul JavaScript în sine poate fi afișat ca text pe pagina HTML.

JavaScript este un limbaj interpretat

JavaScript este interpretat de browser înainte de a fi executat. JavaScript ramâne parte a documentului HTML la care este atașat. Dezavantajul unui limbaj interpretat este că executarea programului durează mai mult, deoarece browserul compilează instructiunile în timpul rulării, chiar înainte să le execute. Avantajul constă în faptul că este mult mai ușor de actualizat codul sursă, acest lucru reprezintând un avantaj și confort programatorului.

JavaScript este flexibil în privința tipului de date

Spre deosebire de Java sau C++, JavaScript diferă mult în privința tipului de date. JavaScript este mult mai flexibil. Putem declara variabilele de un anumit tip, dar nu suntem obligati să facem această declarare; putem lucra cu o variabilă, deși nu-i cunoaștem tipul specific înainte de rulare.

Exemplu: avem o variabilă numită myVal, îi atribuim o valoare de tip șir și apoi o afișăm într-o casetă de mesaje.

În Fig.23 este prezentat exemplul de mai sus.

Fig.23 Exemplu JavaScript

În exemplul următor nu se mai declară variabila myVal înainte de folosire, lucru perfect valid în JavaScript, dar inacceptabil într-un limbaj de programare strict cu privința tipului de date.

În Fig.23 este prezentat exemplul de mai sus.

Fig.23 Exemplu JavaScript

Pentru a arăta mai bine flexibilitatea limbajului JavaScript vom modifica și tipul valorii pe care o reprezintă variabila myVal la fel ca în Fig.24.

Fig.24 Exemplu JavaScript

JavaScript este un limbaj orientat pe obiecte

Netscape și alții se referă la JavaScript ca la un limbaj de programare orientat spre obiecte (OOP), dar aceasta este o deformare a adevăratului înteles al sintagmei OOP. JavaScript este un limbaj bazat pe obiecte. Cu alte cuvinte vom lucra cu obiecte predefinite care încapsulează date (proprietăți) și comportamente (metode), dar nu le vom putea subclasa.

Relația dintre JavaScript si HTML

Scripturile JavaScript sunt integrate într-un document HTML folosind perechea de etichete <script> și </script>. Într-un document HTML pot exista mai multe perechi de etichete <script> și fiecare pereche poate încadra mai multe seturi de instrucțiuni JavaScript.

Atributele etichetei <script> se regăsesc în Tabel10.

Tabel10 Atributele etichetei <script>

Instrucțiunile JavaScript pot fi implementate folosind diverse metodologii. Modalitatea cea mai bună de a profita de limbajul JavaScript este definirea funcțiilor JavaScript în secțiunea <head>, urmată de apelarea acestor funcții din secțiunea <body>. Această metoda asigură evaluarea (și, dacă este necesară, executarea) tuturor instrucțiunilor înainte ca utilizatorul să interacționeze cu documentul.

Operatori JavaScript

Funcția fundamentală a operatorului de atribuire este aceea de a atribui o valoare unei variabile, plasând valoarea în memorie. Când JavaScript întâlnește operatorul de atribuire (=), privește mai întâi în dreapta căutând o valoare. După aceea privește în stânga și se asigură că există un loc unde să stocheze numărul.

Întotdeauna JavaScript acționează de la dreapta spre stânga. JavaScript recunoaște alți 8 operatori de atribuire, care sunt defapt combinații între un operator de atribuire și un operator aritmetic sau un operator la nivel de biți.

În Tabel11 se regăsesc operatorii de atribuire.

Tabel11 Operatori atribuire

În Tabel12 se regăsesc operatorii de comparație.

Tabel12 Operatori de comparație

Până la JavaScript 1.1, limbajul era foarte indulgent atunci când compară operanzi aparținând unor tipuri de date diferite. De exemplu, când compara numărul 4 cu sirul "4", JavaScript mai întâi transforma operandul sir într-un număr și apoi compară cele două numere. În cazul acestui exemplu, le găsea egale.

Funcții în JavaScript

O funcție JavaScript este pur și simplu un script care este desprins ca o secțiune separată de cod și căreia i se atribuie un nume. Folosind numele respectiv, un alt script poate să apeleze după aceea executarea acelei secțiuni oricând și de oricâte ori are nevoie. Multe limbaje de programare, de pilda C/C++ și Java, folosesc de asemenea funcții, în timp ce altele conțin aceeasi semantică dar le numesc metode, proceduri sau subrutine.

Funcțiile ajuta la divizarea multelor sarcini pentru care a fost conceput un program. Când sunt apelate, funcțiilor li se pot transfera valori, numite argumente. După aceea, argumentele se pot folosi ca variabile în interiorul blocului de instrucțiuni.

Crearea funcțiilor

Fragmentul de cod din Fig.25 arată sintaxa pentru declararea unei funcții în JavaScript:

Fig.25 Sintaxa unei funcții în JavaScript

Cuvântul cheie function este folosit pentru a specifica un nume, nume funcție, care servește ca identificator pentru setul de instrucțiuni cuprins între acolade. Încadrate între paranteze drepte și separate prin virgule se află numele argumentelor, care conțin toate valorile pe care le primește o funcție.

Obiecte JavaScript în corespondență cu HTML

În Tabel13 se regăsesc obiecte JavaScript în corespondență cu HTML.

Tabel13. Obiecte JavaScript

jQuerry

jQuery este bibliotecă JavaScript, concepută pentru a ușura și îmbunătăți procese precum managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript". Biblioteca a fost lansată în 2006 de către John Resig.

jQuerry este folosit pentru a rezolva următoarele probleme specifice programării web:

Modificarea și înregistrarea evenimentelor în browser

manipularea elementelor CSS

efecte și animații

cereri de tip AJAX

utilități – versiunea browser-ului, funcția each.

Un exemplu de cod jQuerry pentru cunoscutul text "Hello World" este prezentat în Fig.26.

Fig.26 Exemplu JQuery

Selectori jQuery sunt folosiți pentru a "găsi" (sau selecta) elemente HTML bazate pe nume, id, clase, tipuri, atribute, valorile lor de atribute și multe altele. Se bazează pe selectoarele CSS existente dar are unii selectori proprii personalizați.

În Tabel14 se regăsesc câtiva din acești selectori.

Tabel14 Selectori JQuery

AJAX

AJAX are rolul de a spori gradul de interactivitate, viteză și uzabilitatea unei pagini web. Este o tehnică de dezvoltare web pentru crearea de aplicații web interactive. Ideea este să faci pagina web mai receptiva la acțiunea userului prin schimbul de date cu serverul, discret și în porții mici, fără a mai aștepta încărcarea întregii pagini la fiecare modificare facută de user. Aceasta face ca o aplicatie web să funcționeze asemănător uneia instalată pe desktop, întelegând prin asta că o aplicație desktop iți realizează procesele fără a face noi click pe ceva anume.

Ajax nu este o tehnologie în sine. Termenul este folosit pentru definirea aplicațiilor web ce folosesc un ansamblu de tehnologii:

HTML sau XHTML pentru structura semantică a informațiilor CSS pentru prezentarea informațiilor

Javascript pentru interactivitate, pentru procesarea informațiilor prezentate;

Funcționalitatea AJAX este prezentată în Fig.27 ca o comparative dintre legătura HTML-baza de date, tradițională și metoda care conține AJAX

Fig,27 Funcționalitatea AJAX comparativ HTML

Capitolul 4 – PHP, MySQL

PHP

PHP (Hypertext Preprocessor) este un limbaj de programare folosit pentru a produce pagini web dinamice. Este folosit în prezent pe o scară largă de dezvoltare a paginilor și a aplicaților web. PHP se folosește împreuna cu HTML, dar de la versiunea 4.3.0, este folosit și în linie de comanda(CLI), permitând crearea unei aplicații independente.

PHP este unul dintre cele mai importante limbaje de programare web open-source și server-side, există versiuni disponibile pentru majoritatea serverelor web și pentru toate sistemele de operare. PHP este disponibil sub Licenta PHP și Free Software Foundation îl consideră a fi un software liber.

Limbajul a fost dezvoltat de inventatorul său, Rasmus Lerdof însa odată cu creșterea numărului de utilizatori, dezvoltarea a fost preluată de o nouă enti-tate, numita The PHP Group (Grupul PHP).

Avantaje si Caracteristici al limbajului

Avantaje:

Înspre deosebire de JavaScript, PHP rulează pe server, iar utilizatorul nu are acces la el, astfel neputând sa îl modifice cum era posibil în JavaScript.În concluzie dacă vom folosi PHP suntem mult mai securizați.

Codul PHP este simplu, clar și foarte ușor de înteles. Astfel chiar și un programator începator poate citi foarte ușor codul și poate chiar să îl dezvolte urmând puțini pași.

Este un limbaj gratuit astfel existând foarte multă documentație pe internet fiind foarte popular, acestea fiind puse la dispoziția oricui.

Limbajul de programare PHP nu este dependent de sistemul de operare acest lucru fiind un avatanj imens deoarece utilizatorul nu este fortat să folosească un anumit sistem de operare, PHP fiind compatibil și poate folosit cu succes pe UNIX, Microsoft și MAC.

Caracteristici:

PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Win-dows, Linux, sau Mac OS X și poate interactiona cu majoritatea serverelor web. Codul PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de utilizator.

PHP este foarte simplu de utilizat, fiind un limbaj de programare structurat la fel ca și Perl-ul, C-ul, iar începând de la a-5-a versiune și Java, sintaxa lui fiind o combinație a celor trei.

Probabil una din cele mai importante facilități ale limbajului este conlucrarea cu majoritatea bazelor de date, începând de la MySQL până la Oracle, trecând prin PostgreSQL, MS Sql Server, sau DB2.

PHP foloseste extensii specifice pentru fișierele sale: .php, .php3, .ph3, .php4, .inc, .phtml. Aceste fișiere sunt interpretate de către serverul web, iar rezultatul este trimis în formă de text sau cod HTML către navigatorul clientului.

Fiecare program PHP include două linii speciale, care indică serverului PHP că textul cuprins între cele două linii este alcătuit din instrucțiuni PHP: <?php cod php ?>

Tipuri de date

Tipurile de date din PHP sunt prezentate în Tabel15.

Tabel15 Tipuri de date

Variabile

În limbajul de programare PHP variabilele sunt reprezentate de semnul $ urmat de numele variabilei: $nume = valoare;

În PHP există și variabile numite "variabile predefinite" care reprezintă nucleul PHP, sunt alocate automat de către modulul PHP, și sunt accesibile în program.

Cele mai importante dintre ele se regăsesc în Tabel16.

Tabel16 Variabile

Operatori

Principalii operatori folosiți în PHP sunt:

Operatori aritmetici: adunare (+), scădere (-), înmultire (*), împărțire (/), modul (%), incrementare (++), decrementare (- -).

Operatori de atribuire: =, + =, – =, *=, /=, %=, &=, .=.

Operatori relaționari: ==, != , >, <, >=, <=.

Operatori logici: !, &&, and, or, xor.

Expresii regulate

Expresiile regulate (regex) sunt un șir de caractere sablon care descriu mulțimea cuvintelor posibile care pot fi formate cu acele caractere, respectând anumite reguli.

Lista cu caractere speciale și rolul lor în expresii regulate se regăsește în Tabel17.

Tabel17. Caractere speciale

Funcții în PHP

Funcțiile sunt blocuri de cod PHP (secvențe de cod) bine delimitate și identificate printr-un nume, ce execută un set de operații. Funcțiile pot fi executate de mai multe ori în cadrul unui script prin simpla apelare a numelui lor.

Există funcții predefinite, specifice limbajului PHP (cum ar fi print, empty) ce pot fi folosite în orice moment, fară a fi nevoie de vreo acțiune specială; și există funcții definite de utilizator, scrise practic de programatori. Pentru ca acestea să poată fi folosite, este nevoie să fie declarate (și implementate).

Avantajele utilizării functiilor:

reutilizarea codului

Spre exemplu, dacă este nevoie să se execute aceeași secvență de cod în mai multe părți ale unui program sau script, pentru a nu se rescrie codul de fiecare dată, se definește o funcție care este apelată de mai multe ori.

modularizare

Odată cu apariția funcțiilor (a subprogramelor, în general) s-a introdus și conceptul de modularizare care presupune împărțirea (spargerea) problemei ce trebuie rezolvată în probleme mai mici. Fiecare modul problemă mai mică reprezintă un subprogram, implementat într-o funcție care contribuie la rezultatul final.

menținerea ușoara a codului și întelegerea mai ușoara a logicii aplicației

sau a scriptului. Acestea sunt urmări imediate ale primelor 2 puncte. Dacă scriptul este structurat, împărțit în bucăți mai mici, în care aceeași secvență de cod nu se repetă atunci va fi mai ușor și de înteles și de modificat sau întreținut.

Un exemplu de funcție PHP care adună două variabile este prezentat în Fig.28.

Fig.28 Exemplu funcție PHP

Important!

închiderea unui rând se face obligatoriu cu caracterul ";"

numele funcțiilor nu sunt case sensitive (nu se face diferența între utilizarea literelor mari sau mici)

numele variabilelor sunt case sensitive (se face diferența între utilizarea literelor mari sau mici)

MySQL

SQL (Structured Query Language) este un standard international în căutarea și găsirea de informații din bazele de date. MySQL (un sistem de management pentru baze de date) este, în fapt, un server SQL – el răspunde interogațiilor de informație care sunt cuprinse în SQL. Bazele de date SQL se folosesc de obicei pentru a înmagazina informații cum ar fi mesaje din forum, stiri, evenimente sau alte date ce trebuie reținute. Puteți "comunica" cu MySQL folosind o mare varietate de limbaje de programare (PHP-ul fiind unul dintre cele mai des folosite).

Deci MySQL este un server multi-user (mai mulți utilizatori) și multi-thread (mai multe fire de execuție), utilizează SQL, limbajul standard de interogare a bazelor de date din întreaga lume. MySQL este disponibil public din 1996, dar istoria dezvoltării sale începe în 1979, sub o licenta "Open Source".

MySQL este o componentă integrată a platformelor LAMP(Linux), WAMP (Windows-Apache-MySQL-PHP), MAMP (MAC-Apache-MySQL-PHP), XAMPP (X-OS-Apache-MySQL-PHP, Perl). Popularitatea sa ca aplicație web este strâns legată de cea a PHP-ului care este adesea combinat cu MySQL. În multe cărți de specialitate este precizat faptul că MySQL este mult mai ușor de învățat și folosit decât multe din aplicațiile de gestiune a bazelor de date, ca exemplu comanda de ieșire fiind una simplă și evidentă: "exit" sau "quit".

Trasaturi caracteristice SQL

SQL este prezentat în limba engleză. Folosește cuvintele select, insert, delete ca părți ale setului de comenzi.

SQL este un limbaj neprocedural: specifică ce informații dorești, nu cum să le obții. Cu alte cuvinte SQL nu îti cere să specifici metoda de acces la date. Toate cererile SQL folosesc optimizarea cererilor- o parte a RDBMS-pentru a determina rapid remedierea datelor specificate. Aceste trasaturi usurează obținerea rezultatelor dorite.

Procesarea SQL asupra înregistrărilor nu se poate face decât asupra unei singure înregistrări la un moment dat. Cea mai comună forma a unui set de înregistrări este un tabel.

SQL poate folosit de un sir de utilizatori incluzând DBA, programatori de aplicații, personal de management și multe alte tipuri de utilizatori.

SQL pune la dispoziție comenzi pentru o varietate de task-uri incluzând:

-date interogate

-inserarea, extragerea și ștergerea rândurilor într-un tabel

-crearea, modificarea și ștergerea obiectelor de tip bază de date

-controlul accesului la baza de date și la obiectele de tip bază de date

Setul cel mai important de comenzi SQL

În Tabel18 se regăsesc cele mai importante comenzi în MySQL

Tabel18 Comenzi MySQL

Scrierea comenzilor SQL

Comenzile SQL pot fi pe una sau mai multe linii.

Clauzele sunt uzual plasate pe linii separate.

Tabelarea poate fi folosită.

Cuvintele de comandă nu pot fi separate pe mai multe linii.

Comenzile SQL nu sunt 'case sensitive'.

O comandă SQL este introdusa la promptul SQL și liniile subsecventelor sunt numărate.

Un exemplu de comenzi SQL valide este prezentat în Fig.29.

Fig.29 Exemplu MySQL

Exemple ale celor mai importante comenzi SQL se regăsesc în Fig.30

Fig.30 Comenzi SQL

Framework-ul Laravel

Laravel este un gratuit, open-source PHP web-framework, creat de Taylor Otwell.

Laravel este o aplicație web-framework cu sintaxa expresivă, elegantă. Laravel încearcă să ajute dezvoltatorii web prin facilitarea sarcinilor comune utilizate în majoritatea proiectelor de web, cum ar fi autentificare, rutare, sesiuni, și cache-ul. Este accesibil, puternic, având instrumente puternice pentru aplicații mari, robuste.

Instalare Laravel

Instalare Composer

Laravel utilizează Composer pentru a gestiona dependențele sale. În primul rând, descărcați composer.phar. de pe https://getcomposer.org /download /.

Descărcați Laravel installer folosind Composer în cmd command prompt:

composer create-project laravel/laravel

Pornire server Laravel

Puteți utiliza un server de web cum ar fi Apache sau Nginx. Dacă lucrați cu PHP 5.4+, puteți utiliza comanda serve din Artisan:

php artisan serve

MVC

Aplicațiile Laravel urmează modelul tradițional de design Model-View-Controller, în cazul în care utilizați:

controllere să se ocupe de cererile utilizatorilor și de a prelua date, folosind modele;

modele pentru a interacționa cu baza de date și de a prelua obiecte, informații;

view pentru a face paginile;

În plus, rutele sunt folosite pentru a lega URL-uri pentru acțiunile controlorului desemnat, așa ca în Fig.31.

Fig.31 Rute

Model: crearea unui model, pentru a reprezenta un evenimment.

Laravel vine cu utilitatea CLI Artizan, care oferă o mulțime de comenzi utile pentru a ajuta la construirea aplicației.

Pentru a crea un model, în linia de comandă vom scrie comandă următoare:

php artisan make:model Event

Modele sunt toate stocate în directorul principal app, astfel încât comanda va genera un fișier app/Event.php, ca în Fig.31.

Fig.31 Model

Pentru a genera un fișier de migrare de date pentru crearea unei tabele în baza de date vom scrie în linia de comandă următoarea comandă:

php artisan make:migration create_events_table

Fișierul de migrare este situat la database\migrations\2017_02_02_ 153743 _create_events_table.php și va arăta ca în Fig.32.

Fig.32 Fișier migrare

Controller: este menționat ca o resursă

Utilizând o altă comandă Artisan, se creează controllerul:

php artisan make:controler EventController -r

Va fi generat un fișier de controler Http\Controllers \EventController.php ca în Fig.23 și Fig.34.

Fig.33 Controller

Fig.34 Controller

Se generează automat un controller cu toate acțiunile tipic CRUD.

CRUD

În programarea calculatoarelor, create, read, update și delete (CRUD) sunt patru funcții de bază de stocare. Cuvintele sunt uneori folosite la definirea celor patru funcții de bază ale CRUD, regăsire în loc de citire, modificare în loc de actualizare sau distruge în loc de delete.

În Tabel19 se regăsesc funcțiile ce aparțin de CRUD.

Tabel19 Funcții CRUD

Rute

Avem nevoie să definim căi pentru a asocia adrese URL cu toate aceste acțiuni de controller.

În fișierul de configurare rute găsim routes\web.php – se adăugă următoarea linie de cod pentru a defini un traseu pentru resursa Event:

Route::resource ('events','EventController');

Această definiție va defini toate rutele legate de resursa noastră prezentate în Tabel20.

Tabel20 Rute

View

Fișierele View sunt stocate în folderul de resources\views.

Fișierele View Laravel utilizează Blade template, și sunt numite. blade.php.

Fișierul View resources\views\admin\events\index.blade.php va avea codu ca și in Fig.35.

Fig.35 View

Framework-ul Bootstrap

Bootstrap este cel mai popular Framework din lume. A fost realizat de catre Mark Otto si Jacob Thornton la twitter. Este un ajutor pentru toti Web Developerii. Utilizarea lui ajută la economisirea considerabilă a timpului investit în realizarea unui web-site. Cel mai important de stiut este faptul ca Bootstrap este un proiect open-source, ceea ce înseamnă ca poate fi folosit la realizarea proiectelor atât individuale cât comerciale.

Instalare Bootstrap3

Primul lucru pe care trebuie sa îl facem este să downloadam Bootstrap-ul de site-ul http://getbootstrap.com/. Odata ajunsi pe pagină oficială putem apasa pe butonul down-load sau accesa pagina Customize de unde îl putem personaliza chiar înainte de a-l descarca.

Descarcați-l in folderul public al proiectului vostru.

În interiorul arhivei descărcate vom gasi 3 foldere: css, img si js la fel ca în Fig.28.

În folderul CSS găsim stilurile, mai exact fișierele responsabile pentru stilizarea paginilor.

În img găsim pictograme pe care le vom putea utiliza în paginile noastre.

În folderul js, bineînteles, vom găsi doua fișiere JavaScript.

Tot ce ne mai ramane de facut este sa îl integram în Laravel.

<script src="/js/app.js"></script>

Fișierul va arăta la fel ca în Fig.36

Fig.36 Cale fișier Bootstrape

Stiluri

Bootstrap-ul are integrate multe stiluri predefinite cum ar fi aspectul butoanelor, al tabelelor, al panourilor de logare etc, asta înseamnă ca nu trebuie sa programezi totul de la 0, poti modifica stilurile originale sau le poti folosi exact asa cum sunt.

Folosirea Bootstrap-ului

Bootstrap este axat pe un sistem grila (Grid System). Sistemul predefinit are 12 coloane care generează un recipient de 940 pixeli lățime dacă nu folosim css-ul responsive, și între 724px și 1170px lățime dacă îl folosim.

Atunci când rezoluția dispozitivului este mai mica de 767px, coloanele se vor alinia una sub cealaltă și îsi vor modifica dimensiunile lățimii după cele ale dispozitivului.

HTML-ul de Bază a Framework-ului

În interiorul coloanelor se adăugă conținutul care doriți să apară pe server.

În exemplul următor, reprezentat în Fig.37, ținând cont că lucrăm cu 12 coloane, am alocat pentru fiecare câte 4 coloane.

Pentru a face asta, vom crea un <div> cu o clasă .row în care vom introduce coloanele. Pentru a aloca unui <div> 4 coloane utilizăm clasa .col-md-4.

În interiorul coloanelor, am adăugat tipuri de butoane.

Fig.37 Exemplu

Toate acestea vor avea codul ca și în Fig.38.

Fig.38 Cod Exemplu

Alinierea Textelor

Putem alinia textele folosind trei clase diferite furnizate de către bootstrap, prezentate în Tabel21.

Tabel21 Aliniere text

XAMPP

XAMPP face usoară instalarea serverului Apache și conține MySQL, PHP și Perl. XAMPP este chiar foarte ușor de instalat și de folosit – doar descarcă, extrage și pornește. Există multe alte programe asemănătoare cu XAMPP (WAMPP, Easy PHP) dar l-am ales pe acesta deoarece mi se pare cel mai usor și simplu de utilizat.

Ultima versiune include următoarele unelte: Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, and WEB-DAV + mod_auth_mysql.

Din ele cele mai utilizate:

Apache – este dezvoltat de o firma franceză și un server HTTP de tip open source, adică este gratis.

MySql – este un sistem de gestiune a bazelor de date relational, produs de compania suedeză MySQL AB și distribuit sub Licenta Publica Generala GNU

PHP – este un limbaj de programare orientat spre programarea web dinamică. Se poate folosi în combinație cu HTML, javascript, CSS, AJAX, PERL și Mysql pentru a realiza site-uri de o complexitate ridicată.

phpMyAdmin – este un sistem de gestiune a bazelor de date MySQL liber, open source, scris în PHP și destinat administrării bazelor de date prin intermediul unui browser web.

Editorul Atom

Atom este un editor de text modern, abordabil cu sursă deschisă și editabilă – un instrument ce poate fi personalizat după preferințe, și de asemenea, poate fi utilizat în mod productiv.

Facilități Atom:

este gratuit

este open-source.

este modular

are o mare comunitate

Pagina de pornire a editorului Atom este cea din Fig.39.

Fig.39 Editorul Atom

Prezentarea site-ului

Scurtă descriere

Site-ul “Evenimente în Brașov” cum am specificat și la începutul acestei lucrări a fost conceput pentru a ajuta toate persoanele ce sunt interesate de activitătile din Brașov.

Site-ul este realizat folosind ultimele tehnologii web pentru a ține evidența evenimentelor petrecute sau nu, în Brașov. De mică am fost la foarte multe evenimente asociate orașului Brașov, inspirată fiind de părinții mei, începând de la piese de teatru, filme, până la meciuri de fotbal, handbal, etc.

Pentru mine site-ul “Evenimente în Brașov” reprezintă evoluția orașului, deoarece nu doar arhitectura și istoria iși pot pune amprenta asupra ei ci și evenimentele culturale sau non-culturale.

Structura Site-ului

În Fig.40 este prezentată structura site-ului ea fiind un destul de simplă dar foarte funcțională.

Fig.40 Structura Site-ului

Administrarea site-ului

În acest capitol voi prezenta partea administrativă a site-ului.

Administrarea este realizată cu ajutorul framework-ului Laravel. Acest framework îți pemite sa creezi pagini atât exterioare cât si interioare.

Pagina de administrare poate fi folosită doar de către admin, dacă în momentul logării introducem date greșite va apărea un mesaj ca cel din Fig.41.

Fig.41 Login

Paginile Utilizatori Categorii, Locații și Evenimente

Dacă datele administratorului si parola au fost introduse corect atunci vom avea acces la paginile de administrare. Prima pagină este pagina principală a site-ului, pentru a putea urmări mult mai ușor încărcarea utilizatorilor, categoriilor, locațiilor sau a evenimentelor.

Dacă dorim să vizualizăm utilizatorii, atunci trebuie să accesăm din dreapta sus numele, si va fi afișat un meniu dropdown cu toate paginile administrate și vom allege utilizatori

După cum se vede în Fig.42 avem posibiltatea de a ștergere, modifcare sau adăugare a unui utilizator.

Fig.42 Pagina Utilizatori

Pentru a adăuga un utilizator, accesăm butonul “+” și vom intra pe pagina de adăugare utilizator, ce arată ca în Fig.43.

Fig.43 Adăugare utilizator

Pentru a adăuga un utilizator, trebuie completate următoarele câmpuri:

Nume: Numele utilizatorului;

Adresă E-Mail: Adresă e-mail;

Parolă: Parolă;

Confirmă: Parolă;

Rol: Poate fi user sau admin;

Dacă dorim să vizualizăm categoriile, tot din meniul dropdown selectăm “Categorii”. (vezi Fig.44)

Fig.44 Listă categorii

Pentru a adăuga o categorie, accesăm butonul “+” și vom intra pe pagina de adăugare categorie, ce arată ca în Fig.45.

Fig.45 Adăugare categorie

Aici sunt doar două câmpuri ce trebuie completate:

Categorie: Numele categoriei;

Culoare: Îi atribuim o culoare cu ajutorul unui fișier JavaScript;

Dacă dorim să vizualizăm locațiile, atunci selectăm “Locații”.

Pentru a adăuga o locație, accesăm butonul “+” și vom intra pe pagina de adăugare locație, ce arată ca în Fig.46.

Fig.46 Adăugare locație

Pentru a adăuga o locație, trebuie completate următoarele câmpuri:

Locație: Numele locației;

Adresă: Adresa locației;

Descriere: Informații despre locație;

Link: Site-ul oficial al locației; este un câmp opțional;

Facebook: Pagina oficială a locației; este un câmp opțional;

Imagine: Este un câmp opțional, putem adăuga o imagine reprezentativă a locației;

Dacă dorim să vizualizăm evenimentele, atunci selectăm “Evenimente”. Ca și administrator, trebuie gestionate si verificate evenimente pentru ca ele să apară pe interfață. (Fig.47)

Fig.47 Listă evenimente

Pentru a adăuga un eveniment, accesăm butonul “Adaugă” și vom intra pe pagina de adăugare eveniment, ce arată ca în Fig.48.

Fig.48 Adăugare Eveniment

Pentru a adăuga un eveniment, trebuie completate următoarele câmpuri:

Nume: Numele evenimentului;

Descriere: Informații despre eveniment;

Categorie: Îi putem atribuii o categorie deja existentă, dacă dorim ca evenimentului să ii se atribuie o categorie nouă, trebuie să adăugăm prima dată categoria;

Locație: Îi putem atribuii o locație deja existentă, dacă dorim ca evenimentului să ii se atribuie o locație nouă, trebuie să adăugăm prima dată locația;

Dată și oră: setăm data și ora evenimentului;

Imagine: Este un câmp optional, putem adăuga o imagine reprezentativă a evenimentului;

După accesarea butonului „Adaugă”, toate datele vor fi stocate în baza de date.

Funcționalităti

Faptul că am folosit framework-ul Laravel m-a ajutat foarte mult.

Aplicațiile Laravel urmează modelul tradițional de design Model-View-Controller, în cazul în care utilizați:

controllere să se ocupe de cererile utilizatorilor și de a prelua date, folosind modele;

modele pentru a interacționa cu baza de date și de a prelua obiecte, informații;

view pentru a face paginile;

Laravel aduce utilitatea CLI Artizan, iar pentru pornirea server-ului scriem comanda de mai jos în cmd:

php artisan serve

Așa cum am menționat și în capitolul dedicat framework-ului Laravel pentru a genera un fișier de migrare de date pentru crearea unei tabele în baza de date vom scrie în linia de comandă următoarea comandă:

php artisan make:migration create_events_table

Fișierul de migrare este situat la database\migrations\2017_02_02_ 153743 _create_events_table.php și va arăta ca în Fig.49.

Fig.49 Fișier migrare

MVC- Model-View-Controller

Model.

Modelul este acel loc în care sunt stocate informațiile despre obiectele aplicației.

Modelul nu știe nimic despre View și Controller.

În Fig.50 se regăsește codul modelul pentru pagina “Evenimente” din site-ul “Evenimente în Brașov”.

Fig.50 Modelul Event

Pentru a evita alocarea în masă a domenilor, vom defini lista de câmpuri din model sub $fillable, astfel încât atunci când trimitem datele pentru modelul pe care îl va procesa în mod direct în acțiuni cum ar fi crearea, actualizarea, ștergerea, etc.

Controller

Controller-ul este factorul de decizie și legătura dintre Model și View.

Controllerul actualizează View-ul atunci când se schimbă modelul. De asemenea, actualizează modelului atunci când utilizatorul manipulează

View.

În Fig.51 se regăsește codul funcției pentru adăugarea de evenimente din site-ul “Evenimete în Brașov”.

Fig.51 Funcția pentru adăugare

În interiorul acestei funcții apelăm modele pentru categorii și locații, deoarece la creearea de eveniment avem nevoie de datele din tabele pentru categorii și locații.

Funcția returnează View pentru adăugare împreună cu datele extrase.

În Fig.52 se regăsește codul funcției pentru ștergere de evenimente din site-ul “Evenimete în Brașov”.

Fig.52 Funcție pentru ștergere

Funcția destroy are ca parametru “id”. În interiorul acestei funcții apelam modelul Event pentru a găsi evenimentul cu “id”-ul primit, apoi îl șterge.

În cazul în care un utilizator, o categorie sau o locație este ștearsă, atunci și evenimentul va fi șters. Codul pentru această metodă se găsește in fișerul de migrare si va fi ca în Fig.53.

Fig.53 Ștergere în cascadă

View

Fișierele View sunt stocate în folderul de resources\views.

Fișierele View Laravel utilizează Blade template, și sunt numite.blade.php.

Fișierul View resources\views\admin\events\index.blade.php va avea codul ca și in Fig.54 și Fig.55.

Fig.54 View Event index.blade.php

Fig.55 View Event index.blade.php

Baza de date

Baza de date este formată din patru tabele. În Fig.56 se poate vedea structura bazei de date si legăturile create pentru a se întelege mai bine cum funcționează.

Fig.56 Structură bază de date

Ghidul site-ului

Vizitatorul, utilizatorul și administratorul vizualizează aceeași primă pagină.

În momentul în care intrați pentru prima dată pe site-ul “Evenimente în Brașov” sunteți considerat vizitator.

În Fig.57 este ilustrată prima pagina.

Fig.57 Prima pagină

În bara de navigare colțul din stânga sus se găsește logo-ul iar în dreapta se găsește panoul de Login sau Înregistrare.

În conținutul site-ului se găsește o listă a evenimentelor în partea centrală iar în partea dreaptă un buton de adăugare și o listă de filtre.

Butonul de adăugare poate fi accesat doar dacă vizitatorul se înregistrează și devine utilizator.

Lista de filtre începe cu un filtru foarte util ce ajută vizitatorul să vizualizeze doar evenimentele într-un interval de timp. (Fig.58 part1)

Următorul filtru îi permite vizitatorul să vizualizeze și o arhiva evenimentelor. (Fig.58.part2)

Primele doua filtre pot fi folosite și în momentul în care unul din filtrele urmatoare este deja activ.

Dacă se dorește vizualizarea evenimentelor doar dintr-o anumită categorie, va fi accesată acea categorie din lista (Fig.58.part3), dacă va fi folosit unul din primele două filtre atunci vor fi afișate doar evenimentele din categoria aleasa filtrate corespunzator filtrului ales.

La fel ca și în cazul filtrului pentru categorii, filtrul pentru locații funcționeaza identic cu acesta. (Fig.58.part4)

Fig.58 Filtre

Dacă este activ unul din filtrele categorii sau locatii, sub lista de filtre va fi afisata o statistica in functie de evenimentele filtrate sau nu.

Exemplu1: Dacă sunt pe filtrul pentru locații Reduta, am bifat și filtrul Vizualizați arhiva statistica va arăta ca în Fig.59.

Exemplu2: Dacă sunt pe filtrul pentru locații Reduta și am completat filtru interval timp statistica va arăta ca în Fig.60.

Fig.59 Statistica-exemplul1 Fig.60 Statistica-exemplul2

În conținutul paginii sunt afișate evenimetele în funcție de filtrele adăugate de dumneavoastră.

Conținutul unui eveniment (Fig.61) va avea ca și informații detaliile:

Titlul evenimentului

Categoria din care face parte LA Locația unde va avea loc

Data și ora

Poza

Descriere eveniment

Fig.61 Conținut eveniment

Dacă apăsăm pe “Locație” din conținutul evenimentului atunci se va deschide o fereastră cu toate detaliile despre aceaa locație, la fel ca în Fig.62

Fig.61 Detalii locație

Dacă doriți să adăugați evenimente atunci trebuie să deveniți utilizator, pentru asta trebuie să vă înregistrați. (Fig.62)

Fig.62 Înregistrare

În momentul în care sunteți utilizator aveți dreptul de a adăuga evenimente, interfața va fi aceasi ca și pentru vizitator doar ca acum butonul “Adaugă eveniment” va fi disponibil pentru dumneavoastră.

Pentru a adăuga un eveniment aveți nevoie de un document de autenticitate pentru ca administratorul să aprobe evenimentul. (Fig.63)

Fig.63 Utilizator adaugă eveniment

Ca și utilizator, poți modifica datele tale de autentficare, de la nume, email parola, pana la tema site-ului ce include imaginea de background si culoarea bării de navigare.

În momentul înregistrării unui utilizator îi este atribuită o temă, dar această temă se poate schimba cu una din cele deja predefinte.

Toate aceastea se realizează din pagina de Profil aceasta accesând-o din meniu dropdown ce apare la click pe numele de utilizator. (Fig.64)

Fig.64 Utilizator meniu

La accesarea profilului se pot vedea toate datele utilizatorului, dacă accesăm butonul de edit, se pot edita toate datele. (Fig.65)

Fig.65 Profil

Pentru temă se gasește o lista cu teme predefinite (Fig.66). Iar la schimbare opțiunii în partea de jos se încarcă o previzualizare a temei alese. (Fig.67)

Fig.66 Lista teme

Fig.67 Temă previzualizare

Ca și utilizator poți vizualiza o listă cu evenimentele adăugate de tine. (Fig.68). Dacă evenimentul a fost aprobat de catre administrator atunci va fi o bifa in fata evenimentului dacă nu va fi un “X” (Fig.68). Poți edita sau șterge un eveniment.

Fig.67 Listă evenimente utilizator

Toate aceste pagini au fost create dinamic, astfel încât putem modifica, adăuga evenimente.

Site-ul “Evenimente în Brașov” este perfect atât pentru persoanele ce folosesc telefoane mobile sau calculator, deoarece folosind framework-ul Bootstrape, site-ul este responsive, ceea ce înseamnă că își adaptează dimensiunile în funcție de ce device e folosit.

Bibliografie

[1] L. Sângeorzan, C-tin Lucian Aldea–“Tehnologii Internet” Ed.Univ.Transilvania, 2003.

[1] L. Sângeorzan– “Tehnologii Web si WEBDesign” Ed.Univ. Transilvania, 2009.

Webografie:

[1] https://atom.io/docs

[2] https://laravel.com/docs

[2] http://ciobanu.cich.md

[3] http://preview.freelogodesign.org

[4] http://getbootstrap.com

[5] http://en.wikipedia.org/wiki

[6] http://w3schols.com

[7] http://php.net