Dezvoltarea Aplicatiilor Rest Folosind Slim Framework

Dezvoltarea aplicațiilor REST folosind

Slim Framework

CAPITOLUL 1. INTRODUCERE

1.1. Domeniul de aplicare al temei

1.2. Prezentarea temei proiectului

CAPITOLUL 2. FUNDAMENTARE TEORETICĂ

2.1. Internet (World Wide Web)

2.2. HTTP(Hypertext Transfer Protocol)

2.2.1. Introducere HTTP

2.2.2. Transferul argumentelor și metode în http

2.2.3. Erori de HTTP (status codes)

2.3. PHP (Hypertext Preprocessor)

2.4. REST

2.5. Slim Framework

2.6. CSS

2.7.Backbone.js

2.8.Bootstrap

CAPITOLUL 3. SPECIFICAȚIILE APLICAȚIEI

3.1. Scurtă descriere a aplicației

CAPITOLUL 4. PROIECTAREA ÎN DETALIU

4.1. Arhitectura aplicației

4.2. Descrierea componentelor aplicației

CAPITOLUL 5 . UTILIZAREA APLICAȚIEI

CAPITOLUL 1. INTRODUCERE

Domeniul de aplicare al temei

În prezent,

Structura proiectului

În acest proiect am urmărit utilizarea limbajului de programare PHP, implementarea metodelor RESTfull, a limbajului de stil CSS, precum și implementarea Slim framework, care facilitează scrierea aplicațiilor de tip web. În acest sens, am creat un produs software care constă într-un website ce cuprinde o bază de date cu filme; pentru fiecare film este disponibilă o descriere, un trailer și o recenzie (“review”) pe care utilizatorii le pot vizualiza.

CAPITOLUL 2. FUNDAMENTARE TEORETICĂ

2.1. Internet (World Wide Web)

Prin Internet înțelegem o rețea mondială unică de calculatoare interconectate prin protocoalele standardizate de comunicare Transmission Control Protocol și Internet Protocol, numite pe scurt TCP/IP. Prin internet se pot transmite categorii vaste de informație, resurse, servicii: pagini web, e-mail, servicii de chat, transfer de fișiere, jocuri online, transfer de voce (VoIP – Voice over Internet Protocol). Internetul a început la sfârșitul anilor 1960, ca un experiment, a cărui scop era să creeze o rețea de informații rezistentă, care să permită pierderea unor calculatoare fără să se piardă comunicarea între celelalte.

În ziua de astăzi, Internetul este susținut și întreținut de o mulțime de firme comerciale. El se bazează pe specificații tehnice foarte detaliate, ca de exemplu pe așa-numitele "protocoale de comunicație", care descriu toate regulile de transmitere a datelor în rețea. Protocoalele fundamentale ale Internetului, care asigură interoperabilitatea între orice două calculatoare sau aparate inteligente care le implementează, sunt Internet Protocol (IP), Transmission Control Protocol (TCP) și User Datagram Protocol (UDP). Aceste trei protocoale reprezintă însă doar o parte din nivelul de bază al sistemului de protocoale Internet, care mai include și protocoale de control si aplicative, cum ar fi: DNS, PPP, SLIP, ICMP, POP3, IMAP, SMTP, HTTP, HTTPS, SSH, Telnet, FTP, LDAP, SSL si WAP.

World Wide Web (pe scurt web) este un sistem de documente și informații de tip hipertext legate între ele care pot fi accesate prin rețeaua mondială de Internet. Documentele, care rezidează în diferite locații pe diverse calculatoare-server, pot fi regăsite cu ajutorul unui URI (Uniform Resource Identifier). Hipertextul este prelucrat cu un ajutorul unui program de navigare în web numit browser, care descarcă paginile web de pe un server web și le afișează pe un terminal. La baza funcționării webului stau 3 standarde, și anume:

HyperText Transfer Protocol (HTTP) – stivă de protocoale OSI prin care serverul web și browserul clientului (utilizatorului) comunică între ele;

Uniform Resource Identifier (URI) – sistem universal de identificare a resurselor din web, folosit pentru a identifica și localiza paginile web.

HyperText Markup Language (HTML) – standard de definire și prezentare a paginilor web;

Prescurtarea HTML vine de la Hypertext Markup Language; HTML reprezintă un limbaj de marcare pe care browser-ele îl înțeleg și cu ajutorul căruia pot fi afișate paginile web. HTML a fost dezvoltat de Tim Berners Lee la CERN în 1989. HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language), o așa numită aplicație a acestuia. HTML a fost inițial văzut ca o posibilitate pentru fizicienii care utilizează calculatoare diferite, să schimbe între ei informații cu ajutorul internetului. Erau prin urmare necesare câteva condiții esențiale: independența de platformă (forma să nu se schimbe de la un calculator la altul), posibilități hypertext și structurarea documentelor. Hypertext se traduce prin faptul că orice cuvânt, frază, imagine sau element al documentului văzut de un utilizator poate face referință la un alt document, sau chiar la paragrafe din interiorul aceluiași document, fapt care ușurează mult navigarea între părțile componente ale unui document sau între multiple documente. Structurarea riguroasă a documentelor permite convertirea acestora dintr-un format în altul, precum și interogarea unor baze de date înglobând aceste documente.

În primii ani de evoluție, HTML a evoluat lent, în principal pentru că îi lipseau posibilitățile de a reda publicații electronice profesionale; limbajul permitea controlul asupra fonturilor, dar nu permitea inserarea graficii. În 1993, NCSA a îmbogățit limbajul pentru a permite inserarea graficii și a construit primul navigator grafic: Mosaic. Au urmat apoi contribuții ad-hoc ale diverselor firme care au adus tot felul de adăugiri limbajului HTML astfel încât, în 1994, limbajul părea scăpat de sub control.

2.2. HTTP (Hypertext Transfer Protocol)

2.2.1. Introducere HTTP

HTTP (Hypertext Transfer Protocol) este metoda cea mai des utilizată pentru accesarea informațiilor în Internet, care sunt păstrate pe servere World Wide Web (WWW). Protocolul HTTP este un protocol de tip text, fiind protocolul "implicit" al WWW. Adică, dacă un URL nu conține partea de protocol, aceasta se consideră ca fiind “http”. HTTP presupune că pe calculatorul destinație rulează un program care înțelege protocolul. Fișierul trimis la destinație poate fi un document HTML (abreviație de la HyperText Markup Language), un fișier grafic, de sunet, animație sau video, de asemenea un program executabil pe server-ul respectiv sau și un editor de text. După clasificarea după modelul de referință OSI, protocolul HTTP este un protocol de nivel aplicație. Realizarea și evoluția sa este coordonată de către World Wide Web Consortium (W3C). HTTP oferă o tehnică de comunicare prin care paginile web se pot transmite de la un computer aflat la distanță spre propriul computer. Dacă se apelează un link sau o adresă de web cum ar fi „http://www.exemplu.com”, atunci se cere calculatorului host să afișeze o pagină web (index.html sau altele). În prima fază, numele (adresa) „www.example.com” este convertit de protocolul DNS (Domain Name System) într-o adresă IP. Urmează transferul prin protocolul TCP pe portul standard 80 al serverului HTTP, ca răspuns la cererea HTTP-GET. Informații suplimentare, ca de exemeplu indicații pentru browser, limba dorită și altele, se pot adăuga în header-ul (antetul) pachetului HTTP. În urma cererii HTTP-GET, urmează din partea serverului răspunsul cu datele cerute, ca de exemplu: pagini în HTML, cu fișiere atașate ca imagini, fișiere de stil (CSS), scripturi (Javascript), dar pot fi și pagini generate dinamic (SSI, JSP, PHP și ASP.NET). Dacă dintr-un anumit motiv informațiile nu pot fi transmise, atunci serverul trimite înapoi un mesaj de eroare. Modul exact de desfășurare a acestei acțiuni (cerere și răspuns) este stabilit în specificațiile HTTP.

O sesiune HTTP este o secvență a tranzacțiilor de rețea cerere și răspuns. Un client HTTP inițiaza o cerere de stabilire a unei conexiuni Transmission Control Protocol (TCP) la un anumit port de pe un server (de obicei port 80). Un server HTTP care ascultă pe acel port așteaptă un mesaj de cerere al unui client. La primirea cererii, serverul trimite înapoi o linie de stare, cum ar fi "HTTP/1.1 200 OK", și un mesaj propriu. Corpul acestui mesaj este de obicei resursa solicitată, cu toate că un mesaj de eroare sau alte informații pot fi de asemenea returnate.

Mesaje HTTP

Mesajele HTTP sunt formate din cereri făcute de client către server și răspunsuri de la server la client.

HTTP – message = Request | Response

Mesajele de cerere și răspuns sunt formate dintr-o linie de start, zero sau mai multe câmpuri antet, o linie goală care indică sfârșitul câmpurilor de antet și, eventual, un corp mesaj.

Corpul mesajului (dacă există) al unui mesaj HTTP este utilizat pentru a transporta corpul asociat cu cererea sau răspunsul.

2.2.2. Transferul argumentelor și metode în http

HTTP defineste metode (uneori menționate ca verbe), pentru a indica acțiunea care se doreste a fi efectuata pe resursa identificată.

Utilizatorul doreste adeseori sa transmita informatii speciale la website. Aici HTTP pune la dispozitie două posibilități:

Transferul datelor în combinație cu o cerere pentru o resursă (HTTP-metoda "GET")

Transferul datelor în combinație cu o cerere specială (HTTP-metoda "POST")

În figura 2.1.1 se poate observa un exemplu de cerere și răspuns în http.

Metodele disponibile sunt :

GET 

este cea mai folosită metodă, fiind utilizată atunci când serverului i se cere o resursă.

HEAD 

se comportă exact ca metoda GET, dar serverul returnează doar antetul resursei, ceea ce permite clientului să inspecteze antetul resursei, fără a fi nevoit să obțină și corpul resursei.

PUT 

metoda este folosită pentru a depune documente pe server, fiind inversul metodei GET.

POST

a fost proiectată pentru a trimite date de intrare către server.

DELETE

sterge resursa specificata.

TRACE 

este o metodă folosită de obicei pentru diagnosticare, putând da mai multe informații despre traseul urmat de legătura HTTP.

OPTIONS

este folosită pentru identificarea capacităților serverului Web, înainte de a face o cerere.

CONNECT

este o metodă folosită în general de serverele intermediare.

PATCH

este utilizat pentru a aplica modificări parțiale asupra unei resurse.

2.2.3. Erori de HTTP (status codes)

Erorile de HTTP sunt clasificate în 5 clase, astfel:

1xx – erori informaționale: această clasă a status-ului indică un răspuns provizoriu al serverului și conține numai linia de status (de răspuns) sau alte aplicații opționale. Nu sunt aplicații necesare pentru acestă clasă de răspuns/status. Aceste status-uri pot fi ignorate.

2xx – răspuns reușit: clasa de răspuns/status ce indică utilizatorului că cererea a fost primită, înțeleasă și acceptată cu succes.

3xx – redirectări: această clasă de răspuns/status indică faptul că acțiunile următoare vor trebui făcute de browser pentru a putea fi îndeplinită cererea. Cererea ar putea fi direcționată de browser fără a interacționa cu utilizatorul dacă și numai dacă metoda folosită în cea de a doua cerere este „Primit/recepționat” sau „Direcționat/condus”.

4xx – erori ale utilizatorilor: această clasă de mesaje/statusuri este folosită în cazurile în care utilizatorul ar putea greși formularea cererii. Excepția fiind răspunsurule pentru cererile tip „Direcționat/condus”, atunci serverul ar trebui să conțină o intrare cu o explicație a situației erorii și dacă e o eroare temporară sau pemanentă. Aceste răspunsuri sunt aplicabile pentru orice fel de cerere. Browser-ele ar trebui să arate orice intrare cerută de utilizator.

5xx – erori de server: răspunsurile/status-urile ce încep cu unitatea/cifra 5 indică cazurile în care serverul e conștient de greșelile produse sau e incapabil să execute cererea. Excepție face răspunsul unei cereri „Direcționat/condus”; serverul ar trebui, în acest caz sa includă o afișare cu o explicație a situației de eroare, fie că e temporară sau permanentă.

2.3. PHP (Hypertext Preprocessor)

2.3.1. Ce este PHP?

Pe scurt, ce este PHP? Ca idee generală, PHP reprezintă un limbaj de programare ce permite modificarea paginilor web înainte ca acestea să fie transmise de server către browserele utilizatorilor.

PHP poate genera conținut HT orice fel de cerere. Browser-ele ar trebui să arate orice intrare cerută de utilizator.

5xx – erori de server: răspunsurile/status-urile ce încep cu unitatea/cifra 5 indică cazurile în care serverul e conștient de greșelile produse sau e incapabil să execute cererea. Excepție face răspunsul unei cereri „Direcționat/condus”; serverul ar trebui, în acest caz sa includă o afișare cu o explicație a situației de eroare, fie că e temporară sau permanentă.

2.3. PHP (Hypertext Preprocessor)

2.3.1. Ce este PHP?

Pe scurt, ce este PHP? Ca idee generală, PHP reprezintă un limbaj de programare ce permite modificarea paginilor web înainte ca acestea să fie transmise de server către browserele utilizatorilor.

PHP poate genera conținut HTML pe baza unor fișiere existente sau pornind de la zero, poate să afișeze o imagine sau orice alt conținut accesibil prin web, sau să redirecționeze utilizatorul către alte pagini. În cadrul acestui proces, PHP poate consulta baze de date, fișiere externe sau alte resurse, poate trimite email-uri sau executa comenzi ale sistemului de operare. Întrucat procesarea se realizează la nivelul serverului web, înainte ca paginile web să ajungă în browser, PHP este considerat un limbaj de programare server-side.

Modul în care PHP generează conținut pentru o pagină ce va fi afișată de browser este prin instrucțiunile delimitate de etichetele  “<?php”  și ”?>”. Astfel, orice se află între aceste tag-uri va fi considerat cod-sursă și va fi executat de interpretorul PHP și înlocuit cu rezultatul execuției. Ce este în afara tag-urilor rămâne neschimbat și este transmis către browser.

PHP este un limbaj de programare de tip interpretat. Aceasta înseamnă că fișierele ce conțin cod-sursă PHP sunt interpretate ca atare în momentul execuției, de către PHP. Așadar, pentru execuția unei porțiuni de cod PHP este folosit codul-sursă așa cum a fost scris el și nu este transformat într-o formă intermediară (binară sau cod-mașină) cum se intamplă la Java sau C/C++. Acest lucru oferă flexibilitate, întrucât orice modificare a fișierelor sursă va fi aplicată imediat la următoarea execuție, fără alți pași intermediari. Există și dezavantaje la acest mod de lucru, cum ar fi timp mai mare de execuție a codului, dar în anumite situații avantajele pot cântări mai mult decât dezavantajele. Datorită faptului că limbajul este unul interpretat, PHP mai este numit și limbaj de scripting.

În sens mai larg, PHP este un limbaj de programare universal (sau general-purpose), oferind toate facilitățile oricărui limbaj avansat. Codul scris în PHP poate face aproape aceleași lucruri ca un cod de C/C++ sau Java. Cu toate acestea, PHP s-a impus în zona web ca limbaj server-side, ce extinde funcționalitatea serverelor web. Din acest motiv, programarea în PHP mai este denumită și programare web sau programare web server-side.

PHP și paginile dinamice

Interpretorul PHP acționează ca o componentă adițională, o extensie a serverului web care este invocată de ori cate ori o pagină PHP este accesată. Această componentă procesează codul-sursă din pagină și apoi transmite rezultatul înapoi la web-server, ajungând în final în browser-ele utilizatorilor. Acest proces este prezentat în partea dreaptă, în partea stângă fiind reprezentată deservirea unei pagini statice, fără intervenția interpretorului PHP.

Din imaginile de mai sus, se observă că atunci când nu există un interpretor PHP, paginile sunt transmise direct către utilizatori așa cum sunt salvate pe disc, fără modificări. Pentru a actualiza conținutul acestora, este nevoie de intervenție directă asupra lor și salvarea modificărilor pe server. Aceste pagini sunt denumite "pagini statice". Spre exemplu, presupunând că avem o pagină statică ce afisșază membrii unei comunități, la fiecare înscriere a unei noi persoane, pagina ar trebui modificată manual de către cineva cu acces la serverul web. Lucrurile se complică dacă acea listă este personalizată, cu trimiteri către alte informații (cum ar fi detalii de contact pentru fiecare, etc.) sau cu un design întortocheat. Toate aceste probleme pot fi rezolvate cu ajutorul PHP.

Folosind o secvență de cod PHP am putea prelua lista de membri dintr-o bază de date, eliminând problema actualizării; nu va mai fi nevoie să se modifice pagina odată cu fiecare membru nou, ci script-ul PHP va afișa în mod automat noile persoane adăugate în baza de date. Este rezolvată și problema link-urilor personalizate, sau a design-ului, iar toate elementele specifice unei persoane pot fi generate în mod automat.

Aceste pagini sunt, așadar, modificate de către PHP la momentul accesării lor de către utilizatori. În funcție de parametrii primiți și de secvența de cod definită de programator, aceași pagină poate avea conținut diferit. Această proprietate este denumită dinamism, iar o astfel de pagină este considerată pagină dinamică.

2.3.2 Variabile și constante

Ce sunt variabilele?

Variabilele sunt elemente ce au o anumită valoare la un moment dat. Valoarea unei variabile se poate schimba de-a lungul execuției unui script.

Lucrul cu variabile în PHP este foarte ușor. Nu trebuie specificat un tip pentru ele (de genul "variabilă text", "variabilă numerică"), ci acesta este determinat în mod automat.

Variabilele sunt diferențiate de celelalte elemente ale limbajului prin caracterul $. Astfel, o variabilă are forma “$nume”. Numele variabilei poate fi orice identificator valid (un text ce conține doar litere, cifre și underscore, fără spații sau alte caractere; un identificator nu poate începe cu o cifră).

Declararea variabilelor.

În PHP declararea variabilelor se realizează în același timp cu inițializarea lor (cu atribuirea unei valori de început). Atribuirea unei valori se realizează cu ajutorul instrucțiunii de atribuire ce are forma “<nume variabila> = <valoare>;” .

Ștergerea variabilelor

De obicei nu e nevoie ca variabilele să fie șterse după ce au fost folosite. Totuși, lucrul acesta se poate face în următoarele moduri:

Afișarea variabilelor

Afișarea se poate realiza utilizând instrucțiunea “print $variabilă”.

Ce sunt constantele?

Constantele sunt entități care nu își schimbă valoarea pe parcursul execuției. Sunt utile pentru a recunoaște ușor valorile folosite în cod.

Constantele se definesc folosind define:

2.3.3. Expresii și operatori în PHP

Expresiile sunt construcții ale limbajului PHP care au o valoare. O expresie poate fi un șir de caractere, un număr, o variabilă sau chiar o construcție mai complexă (cum ar fi un apel de funcție). Ideea de bază este că orice poate fi evaluat la o valoare este considerat a fi expresie.

Limbajul PHP este construit în jurul expresiilor, iar acest concept, deși ignorat de mulți programatori, este foarte important în înțelegerea corectă a modului în care interpretorul PHP evaluează și execută secvențele de cod.

Cele mai simple expresii în PHP sunt, așa cum am amintit, numerele (denumite și “number literals”) sau șirurile de caractere (“string literals”). Acestea au o valoare ce poate fi determinată în orice moment, iar această valoare poate fi folosită în operații (cel mai adesea, la atribuiri). În urma unei atribuiri, o variabilă va prelua valoarea expresiei atribuite, devenind ea însăși o expresie.

De menționat este că expresiile sunt evaluate de la dreapta la stânga. În exemplul de mai sus, mai întâi se execută și evaluează expresia “$a = 1” iar apoi se execută atribuirea “$b = …” în care operandul din dreapta este înlocuit cu valoarea efectivă obținută.

Nu doar atribuirile sunt expresii. Apelurile de funcții (predefinite sau definite de programator) sunt considerate expresii și ele, întrucât returnează o valoare. De asemenea, asocierea mai multor expresii, folosind operatori, generează o nouă expresie.

Un alt lucru important referitor la expresii este că valoarea lor se poate modifica în funcție de context. Mai exact, se modifică tipul de date de care aparține expresia (din string în numeric, din numeric în logic, etc). Astfel, dacă într-o operație este necesar un anumit tip de date, iar expresia folosită are alt tip, atunci valoarea este convertită în mod automat. Asta poate fi un lucru bun, sau poate introduce erori în cod; de aceea este important să se acorde o atenție sporită valorilor expresiilor, în special atunci când se combină tipuri de date diferite.

Expresiile sunt fundamentul limbajului PHP și aproape orice este o expresie. Ele apar peste tot în codul sursă și pot fi folosite în atribuiri, ca parametrii ai funcțiilor sau pentru specificarea condițiilor din structurile de control. În cele ce urmează vor fi prezentați operatorii limbajului PHP care pot fi aplicați unor expresii și care generează (prin compunere) noi expresii.

Operatori in PHP

Operatorii sunt elemente de limbaj ce se aplică expresiilor și dau nastere unor noi expresii. Există mai multe tipuri de operatori, cu sintaxă și roluri diferite. De reținut este că toți operatorii vor determina conversia expresiilor componente atunci când acestea au tipuri diferite de date. Regula de conversie diferă de la un tip de date la altul și de la un operator la altul.

Operatori disponibili in PHP:

Operatori de comparare

Operatorul ternar

Operatori de incrementare/decrementare

Operatori de atribuire

Operatori pentru șiruri de caractere

Operatori de control al erorilor

Operatorul de execuție

Operatori aritmetici

Operatori pe biți

Operatori logici

Operatori pentru vectori

2.3.4. Structuri de control in PHP

În limbajul PHP, la fel ca în oricare alt limbaj de programare, instrucțiunile cuprinse într-o secvență de cod-sursă se execută succesiv, una după alta. Există însă anumite instrucțiuni care modifică ordinea de execuție a liniilor de cod. Din acest motiv ele poartă numele de structuri de control, întrucât ele controlează fluxul de execuție.

Structurile de control din PHP sunt:

structura alternativă (instrucțiunea “if” cu variantele ei)

structura de selecție multiplă (“switch”)

structuri repetitive (for, while, do… while, foreach)

structuri de întrerupere a fluxului (break, continue, return)

structura de salt necondiționat (goto)

directivele de includere (include, require)

directiva declare

O parte din acestea sunt rar folosite în practică (cum ar fi goto sau declare), motiv pentru care nu vor fi prezentate în continuare.

Structura alternativă IF

Poate cea mai des intalnită structură de control este instructiunea “if”. Aceasta este folosită pentru a executa o secvență de cod în funcție de valoarea de adevăr a unei condiții. Sintaxa este prezentată mai jos:

Această formă permite executarea unei instrucțiuni numai dacă este indeplinită o condiție.

Instrucțiunea de executat poate fi simplă (o singură instrucțiune) sau un bloc (mai multe instrucțiuni delimitate de acolade). Regula este ca atunci când este nevoie să se execute mai mult de o instrucțiune, trebuie obligatoriu creat un bloc (trebuie folosite acoladele).

Instructiunea “if – else”

De multe ori este nevoie să se specifice și o operație ce trebuie efectuată dacă nu este îndeplinită o condiție. În acest caz se folosește if – else.

Instrucțiunea de selecție multiplă

O instrucțiune ce se aseamană cu if este switch, o structură ce permite executarea uneia sau mai multor linii de cod în funcție de valoarea unei expresii. Instrucțiunea “switch” este utilă în cazurile în care este nevoie să se verifice mai multe valori posibile ale unei expresii.

2.3.5. Funcții in 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, etc) ce pot fi folosite în orice moment, fără a fi nevoie de vreo acțiune specială și există functii definite de utilizator, scrise practic de programatori. Pentru ca acestea să poată fi folosite este nevoie să fie declarate (și implementate).

De ce sunt folosite Functiile ?

Printre avantajele folosirii funcțiilor, se numără:

reutilizarea codului

Spre exemplu, dacă este nevoie să se execute aceeași secvență de cod în mai multe părți ale unui programm 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, adică o problemă mai mică, reprezintă un subprogram, implementat într-o funcție care contribuie la rezultatul final.

menținerea ușoară a codului și înțelegerea mai ușoară 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 aceleași secvențe de cod nu se repeta, atunci va fi mai ușor și de înțeles și de modificat sau întreținut.

2.3.6. Variabile predefinite

Superglobals, variabile speciale

PHP dispune de câteva variabile implicite. Acestea sunt pre-populate de PHP în momentul execuției, deci nu trebuie definite sau inițializate. Sunt disponibile în orice porțiune a codului și în orice script PHP și pot fi folosite fără să fie nevoie de alte pregatiri. Anumite variabile (ca de exemplu $_POST) au valori doar în anumite situații (spre exemplu, doar atunci când sunt folosite formulare).

Mai jos sunt descrise pe scurt aceste variabile:

$_GET

Vector asociativ ce conține parametrii transmiși prin URL sau printr-un formular. De exemplu, dacă pagina noastră PHP se numește “test.php’’ , un URL de genul

ar popula variabila $_GET cu următoarele valori :

$_POST

Similar cu $_GET, doar că parametrii sunt transmiși prin formulare (forms).

$_REQUEST

Înglobeaza atât $_GET , cât și $_POST.

$_SESSION

Folosită pentru a defini date ce sunt disponibile atât timp cât utilizatorul accesează site-ul, indiferent de paginile vizualizate. În mod normal o variabilă este definită doar când un utilizator cere o pagină. La finalul executiei scriptului, valorile variabilelor se pierd (inclusiv variabile $_GET, $_POST, etc). Dacă sunt puse în vectorul $_SESSION, valorile pot persista și după terminarea execuției scripturilor.

$_SERVER

Furnizează informații despre server, pagina cerută și utilizatorul care accesează pagina.

$_ENV

Afișează informații despre mediul curent în care este instalat și ruleaza interpretorul PHP, despre scriptul curent, etc.

$_COOKIE

Folosită pentru a vedea elementele de tip Cookies de la site-ul/pagina curentă, disponibile pe calculatorul utilizatorilor.

$_FILES

Folosită la încărcarea fișierelor pe server (file upload).

GET versus POST

GET:

Datele transmise către server prin GET apar la finalul URL-ului, așa cum au fost introduse; acest lucru ar putea fi un dezavantaj când este vorba de date senzitive, dar ajută la modificarea ușoară a datelor pentru retrimitere.

Cantitatea de date GET depinde de lungimea maximă permisă a URL-ului, care în Internet Explorer este de 2 083 caractere. Așadar prin GET nu se pot transmite prea multe date.

Rezultatul unui request GET poate fi preluat din cache-ul browser-ului sau al proxy-ului web. Trebuie ca URL-ul să fie diferit la fiecare request nou pentru a fi siguri că datele reale sunt preluate.

Caracterele speciale pot fi codificate folosind atributul enc-type al formularului; dezavantajul este că această codificare va reduce cantitatea de date ce pot fi transmise (ex. 3 caractere japoneze sunt reprezentate cu ajutorul a 42 caractere normale: %26%2312454%3B%26%2312455%3B%26%2312502%3B).

În PHP, elementele formularului sunt disponibile prin intermediul variabilei globale $_GET (sau prin $_REQUEST)

POST:

Cantitatea de date ce poate fi transmisă prin POST poate fi restricționată doar de către serverul web, deși nu există o limitare reală.

Datele transmise prin POST nu apar în URL și nu pot fi alterate usor, ceea ce oferă un oarecare grad de securitate.

În mod implicit, datele preluate prin POST nu sunt puse în cache-ul de la browser sau proxy-server; astfel, folosind această metodă, vor fi afișate întotdeauna datele reale.

Codificarea caracterelor speciale se poate realiza ca și la GETș folosind atributul enc-type al formularului (application/x-www-form-urlencoded); avantajul este că nu există limitări de cantitate a datelor.

În PHP, elementele formularului sunt disponibile prin intermediul variabilei globale $_POST (sau prin $_REQUEST)

2.4. REST

Stilul architectural care stă la baza Web este numit “Representational State Transfer” sau, mai simplu, „REST”. REST a răspuns la necesitatea IETF, pentru un model despre cum ar trebui să funcționeze WEB. Acesta este un model idealizat al interacțiunilor din cadrul unei aplicații Web globale.

Roy T. Fieldings definește REST ca un set coordonat de constrângeri arhitecturale care încearcă să reducă la mínimum latența și comunicarea în rețea și, în același timp, încearcă maximizarea și scalabilitatea implementării componentelor. REST permite prinderea și reutilizarea de interacțiuni, substituirea dinamică a componentelor și procesarea de acțiuni de către intermediari, răspunzand astfel nevoilor de distribuire a unui sistem hipermedia la scară Internet.

2.4.1. Elemente arhitecturale

REST distinge trei clase de elemente arhitecturale:

Date

Conectori

Componente

Date

Aspectul cheie al REST este starea elementelor de date; componentele sale comunic[ prin transferul de reprezentări ale stării actuale sau dorite a elementelor de date.

În REST orice care poate fi numit poate fi o resursă. O resursă este o mapare conceptuală a unui set de entități; doar semantica unei resurse trebuie sa fie statică; entitățile se pot modifica în timp. Aceasta înseamnă că entitatea din spatele unei resurse se poate schimba în timp. REST folosește identificatori de resurse pentru a distinge între resurse. Într-un mediu Web identificatorul este un UR (Uniform Resource Identifier ).

Toate componentele REST efectuează acțiuni cu privire la inerpretările resurselor.

Interpretarea este compusă din:

O secvență de biți (conținutul)

Interpretare metadate (care descriu conținutul)

Metadate care descriu metadate

Conectori

Conectorii gestionează comunicarea în rețea pentru o componentă.

Conectorii prezintă o interfață generală abstractă pentru comunicarea componentei, conducând la:

Separarea de preocupări

Consolidare simplitate

Comutabilitate

REST încapsulează diferite activități de accesare și transfer de reprezentări în diferite tipuri de conectori:

Client: emite cereri, primește răspunsuri

Server : așteaptă cereri, emite răspunsuri

Cache: poate fi situată la conectorul de server sau client pentru a salva răspunsuri, mai poate fi partajat între mai mulți clienți

Tunnel : cereri de relee

Resolver : tranformă identificatorii de resurse în adrese de rețea

Componente

Componentele REST sunt identificate prin rolul lor în cadrul unei aplicații.

Agentul utilizator folosește un conector de client pentru a iniția o cerere și devine destinatarul final al răspunsului.

Serverul de origine utilizează un conector de server pentru a primi cererea și este sursa definitivă de reprezentare a resurselor sale. Fiecare server oferă o interfață generică serviciilor sale ca o ierarhie a resurselor.

Componentele intermediare acționează atat ca și client, cât și ca sever, cu scopul de a înainta cereri și răspunsuri.

2.4.2. Arhitectura

REST definește arhitectura prin introducerea de restricții pe interacțiunile componentei în loc să predefinească topologia unei componente. Se ignoră detaliile de implementare și sintaxă protocol pentru a realiza:

Scalabilitatea interacțiunilor unei componente

Desfășurarea independentă a componentelor

Acceptarea componentelor intermediare care să reducă latentă interacțiunilor

Componentele unei arhitecturi REST pot fi rearanjate dinamic, intermediarii pot fi plasați în fluxul unei reprezentări și acționează similar unui filtru.

REST nu este legat de un anumit protocol, permițând intermediarilor să tranforme reprezentări pe drumul lor prin sistem; acesta oferă o integrare perfectă la diferite protocoale, deși HTTP este protocolul cel mai utilizat pe Internet. În figura următoare avem un exemplu de arhitectură:

Orchestrația serviciilor web REST nu este o mare problemă, deoarece protocoalele sunt deja standardizate. Numai structurile de date și URI-urile serviciilor implicate trebuie să fie cunoscute; putem folosi orice limbaj de script cu un suport HTTP decent.

2.4.3. Serviciul Web REST

Pentru a înțelege mai bine stilul arhitectural REST îl vom prezenta cu ajutorul unui exemplu simplu de serviciu web.

Serviciul va oferi această funcționalitate :

Utilizatorul poate încărca o imagine

Metadate pot fi atașate la imagini

Imagini și metadate atașate pot fi șterse

Resurse.

Captarea cheii în REST este resursa, așa că vom începe prin identificarea resurselor din exemplul nostru.

Picture

Picture-Collection

Reprezentări.

Fiecare resursă are o reprezentare asociată.

Picture: binar și XML

Picture-Collection: XML

Adresare.

Resursele, în cazul nostru, sunt adresabile prin intermediul unui URI. Numai resursele pot fi adresate.

Metode.

HTTP definește un set de metode, iar în exemplul nostru vom folosi GET, PUT, POST și DELETE, iar opțional OPTIONS.

PUT este folosit pentru a încărca o nouă imagine pe server. Cererea PUT returnează codul de raspuns creat și un URI al resursei create. PUT poate fi efectuată pe /picture. În figura 2.5. avem un exemplu de utilizare al metodei PUT.

POST este utilizat pentru a adăuga mai multe metadate la resursa abordată. De exemplu, date GPS, cum ar fi longitudine și latitudine, pot fi ușor anexate la resursă. POST poate fi efectuată pe /picture/ID. Returneazaă reprezentarea actualizată a metadatei imaginii și necesită autentificare. În figura 2.6. avem un exemplu de utilizare al metodei POST.

DELETE este utilizat pentru a șterge o resursă. Poate fi utilizată pe /picture/ID și necesită autentificare. Dacă serverul acceptă cererea, codul de raspuns este 202 Accepted. În figura 2.7. avem un exemplu de utilizare al metodei DELETE.

GET este utilizat pentru a prelua o reprezentare a resursei specificate. Nu necesită autentificare și poate fi utilizată pe:

/picture/index, pentru a obține o listă de imagini disponibile

/picture/ID cu Accept:text/xml, pentru a obține metadata imaginii și Accept:image/jpeg pentru a obține reprezentarea binară.

În figura 2.8. avem un exemplu de utilizare al metodei GET.

OPTIONS poate fi folosit pentru a returna o descriere a serviciului accesat.

2.5. Slim Framework

Slim este un micro framework PHP care ne ajută să scriem mai rapid aplicații web simple, dar puternice și API-uri. Mai jos putem observa un exemplu simplu de cod:

Slim framework are următoarele caracteristici:

Router puternic

Metode HTTP standard și personalizate

Parametrii traseului cu metacaractere și condiții

Traseu middleware

Redare șablon cu vizualizări particularizate

Mesaje instantanee

Cookie-uri securizate cu criptare AES-256

HTTP caching

Manipulare și depanare erori

Arhitectură middleware și cârlig

Configurare simplă

2.5.1. Middlewares

Slim framework implementează o versiune a protocolului Rack. Ca rezultat, o aplicație Slim poate avea middleware-uri care pot inspecta, analiza sau modifica mediul aplicației, cererea și răspunsul înainte sau după ce aplicația Slim este invocată.

Arhitectura Middleware

Ne putem imagina o aplicație Slim ca fiind nucleul unei mingi acoperite de mai multe straturi. Fiecare strat al mingii este un middleware. Când invocăm aplicatia Slim prin metoda run(), se invocă prima dată cel mai din exterior middleware . Când este gata, stratul de middleware este responsabil pentru invocarea opțională a următorului strat middleware pe care îl înconjoară. Acest proces pătrunde mai adanc spre nucleul mingii, prin fiecare strat middleware, până când nucleul aplicației slim este invocat. Acest proces este posibil deoarece fiecare strat middleware, precum și aplicația Slim în sine, implementează o metodă publică call(). Când adăugăm un nou middleware aplicației Slim, middleware-ul adăugat va deveni un nou strat exterior ce va înconjura stratul din exterior de middleware sau aplicația Slim însăși.

Scopul unui middleware este de a inspecta, analiza sau modifica mediul de aplicare, cererea și răspunsul înainte sau după ce aplicația Slim este invocată. Este ușor pentru fiecare middleware să obțină referințe despre aplicația Slim primară, a mediului ei, cererea și răspunsul aplicației. Modificările aduse obiectelor se vor propaga imediat pe parcursul aplicației și altor straturi de middleware. Acest lucru este posibil deoarece fiecărui strat middleware îi este dată o referință la același obiect al aplicației Slim.

2.5.2. Hooks

O aplicație Slim oferă un set de “cârlige” la care putem înregistra propriile reapelări.

Un “cârlig ” reprezintă un moment din ciclul de viață al unei aplicații Slim, când îi va fi invocată o listă prioritară de apelări atribuite cârligului. O apelare este asignată cârligului și este invocată când cârligul este apelat.Dacă mai multe apelări sunt asignate unui singur cârlig, atunci fiecare apelare este invocată în ordinea asignării lor.

O apelare este asignată unui cârlig folosind metoda hook():

<?php

$app = new \Slim\Slim();

$app->hook(‘the.hook.name’, function (){

//Do something

});

Primul argument din codul de mai sus este numele cârligului urmat de apelare. Fiecare cârlig menține o listă de priorități a apelărilor înregistrate. În mod implicit, fiecărei apelări asignate unui cârlig îi este dată prioritatea 10. Dacă vrem să-i dăm prioritatea 7 atunci vom introduce 7 ca al treilea parametru al metodei hook():

<?php

$app = new \Slim\Slim();

$app->hook(‘the.hook.name’, function (){

//Do something

}, 7);

Astfel îi vom asigna prioritatea 7.

Cârligele implicite invocate mereu într-o aplicație Slim sunt urmatoarele:

slim.before

slim.before.router

slim.before.dispatch

slim.after.dispatch

slim.after.router

slim.after

Cârligele customizate pot fi create și invocate într-o aplicație Slim. Pentru a invoca un cârlig customizat folosim applyHook(), care va invoca toate apelările asignate cârligului. Ca și exemplu vom invoca un cârlig customizat denumit robert:

<?php

$app = new \Slim\Slim();

$app->applyHook(‘robert’);

2.5.3. Response

Fiecare instanță a unei aplicații Slim are un obiect de răspuns. Obiectul de răspuns este o abstracție a răspunsului HTTP al aplicației către clientul HTTP.

Un raspuns HTTP are trei proprietăți primare:

Status

Header

Body

Response Status

Răspunsul HTTP întors la client va avea un cod de stare care indică tipul de răspuns, cum ar fi: 200 OK, 400 Bad Request, 500Server Error. Putem folosi obiectul de răspuns al aplicației pentru a seta statusul de răspuns al HTTP astfel:

<?php

$app->response->setStatus(400);

Response Headers

Antetul HTTP este o listă de chei și valori care furnizează metadate despre răspunsul HTTP.

Response Body

Corpul HTTP este conținutul real al răspunsului HTTP livrat clientului.

Response Cookies

Slim oferă metode pentru a trimite cookie-uri cu răspunsul HTTP. Mai jos avem un exemplu prin care putem seta cookie-uri:

<?php

$app->setCookie(

$name,

$value,

$expiresat

$path

$domain

$secure,

);

Response Helpers

Obiectul de răspuns oferă metode pentru a inspecta și a interacționa cu răspunsul HTTP subadiacent, și anume finalizare și redirecționare.

2.5.4. Flash Messages

Slim suportă mesaje flash la fel ca Rails și alte framework-uri mai mari. Mesajele flash ne permit să definim mesaje care vor persista până la urmatoarea cerere HTTP, dar nu mai departe. Acest lucru este util pentru a-i afișa mesaje utilizatorului despre un anumit eveniment sau o eroare care se produce.

Avem trei tipuri de mesaje:

Flash Next

Această metodă stabilesște un mesaj care va fi disponibil în următoarea cerere de vizualizare a șabloanelor:

<?php

$app->flash(‘errorr’, ‘User password is required’);

Flash Now

Această metodă stabilește un mesaj care va fi disponibil în cererea curentă de vizualizare a șabloanelor. Mesajele setate cu această metodă nu vor fi valabile în următoarea cerere.

<?php

$app->flashNow(‘info’, ‘Your account has expired’);

Flash Keep

Această metodă îi spune aplicației să păstreze mesajele flash existente setate în cererea anterioară, astfel încât să fie disponibile la crererea următoare.

<?php

$app->flashKeep();

2.6. CSS

CSS sau “foi de stil în cascadă’’ este un limbaj de stil folosit pentru a descrie aspectul și formatarea unui document scris într-un limbaj de markup. Chiar dacă de cele mai multe ori este folosit pentru a stiliza pagini web și interfețe scrise în HTML si XHTML, limbajul poate fi aplicat la orice tip de document XML, inclusiv XML simplu, SVG și XUL .

CSS este creat în principal pentru a permite separarea conținutului documentului de prezentarea documentului, inclusiv elemente cum ar fi aspectul, culorile și fonturile. Această separare poate îmbunătăți accesibilitatea la conținut, oferă mai multă flexibilitate și control în specificarea caracteristicilor de prezentare și reduce complexitatea și repetiția în conținutul structural.

Pentru a realiza o pagină web avem nevoie și de HTML, deoarece CSS a fost dezvoltat astfel încât să conlucreze cu HTML. Utilizând CSS obținem:

Control mai bun asupra paginii web

O dimensiune mai mică a paginiilor web

O comoditate mai mare

Efecte mai complexe

Documentul are formatarea introdusă într-un singur loc

Etichetele sunt editate mai rapid

Codul paginii este încărcat mai rapid.

Sintaxa CSS are structura pe trei nivele:

Inline

Embeded

Externă.

CSS poate permite, de asemenea, ca aceeași pagină de marcare să fie prezentată în diferite stiluri pentru diferite metode de redare, cum ar fi pe ecran, în print, prin voce și pe Braille pe bază de dispozitive tactile. De asemenea poate fi folosit pentru a permite paginii web sa fie afișată în mod diferit în funcție de dimensiunea ecranului sau dispozitivul pe care este privită.

CSS specifică o schemă de prioritate pentru a determina ce reguli de stil se aplică în cazul în care mai mult de o regulă este în conflict cu un anumit element. În această așa-numită cascadă, prioritățile sau greutățile sunt calculate și atribuite regulilor, astfel încât rezultatele să fie previzibile.

2.7.Backcone.js

Backbone.js este o librarie folosită pentru a oferi structură aplicațiilor web folosind events, models, collections și views conectate la un API cu o interfață RESTful JSON.

RESTful JSON este o interfață care are la bază o structură arhitecturală REST și care folosește pentru reprezentarea informației formatul JSON.

Backbone face parte din familia MV. El ia câte ceva din MVC (Model View Controller), MVP (Model View Presenter) și MVVM (Model View ViewModel).

Model-view-controller (MVC) este un model de arhitectură software utilizat pentru punerea în aplicare a interfețelor. Pe langă faptul că divide aplicația în trei tipuri de componente, MVC definește și interacțiunile dintre ele.

Un controller: trimite comenzi modelului pentru a actualiza starea modelului.

Un model: notifică view și controller, atunci când a existat o schimbare în starea sa.

View: solicită informații de la modelul de care are nevoie pentru a genera o reprezentare pentru utilizator.

Model-view-presenter este o derivare a patern-ului arhitectural MVC.

Model-view- viewmodel este un patern architectural folosit în ingineria software.

Cu Backbone putem reprezenta datele ca modele, care pot fi create, validate, distruse și salvate pe server. Ori de câte ori o acțiune UI provoacă schimbarea atributului unui model, modelul declanșează un eveniment schimbare; toate View-urile care afișează starea modelului pot fi notificate de schimbare, astfel încât acestea sa răspundă în mod corespunzător.

Backbone este o încercare de a descoperi setul minim de date (modele și colecții) și primitivele interfeței utilizatorului (vizualizări și URL-uri) care sunt utilizate în general în construirea aplicațiilor web cu Java Script.

2.7.1. Backbone.Events

Event este un modul care poate fi încorporat la orice obiect, oferindu-i obiectului capacitatea de a lega și de a declanșa evenimente personalizate.

În events avem următoarele obiecte:

On object.on(event, callback, [context])

Leagă o funcție de reapelare la un obiect. Reapelarea va fi invocată atunci când eventul este demis.

Off object.off([event], [callback], [context])

Șterge o funcție de apelare legată la un obiect. Dacă nu este specificat niciun context, toate versiunile reapelării cu diferite contexte vor fi eliminate.

Trigger object.trigger(event, [*args])

Trigger reapelează evenimentul dat.

Once object.once(event, callback, [context])

La fel ca On , numai că trage o dată înainte să fie demis.

listenTo object.listenTo(other, event, callback)

Îi spune unui obiect să asculte un anume eveniment al altui obiect.

stopListening object.stopListening([other], [event], [callback]) 

Îi spune unui obiect să nu mai asculte la evenimente.

listenToOnce object.listenToOnce(other, event, callback)

La fel ca listenTo, numai că trage o dată înainte să fie demis.

2.7.2. Backbone.Model

Modelele sunt inima oricărei aplicații Java, ele conțin date interactive, precum și o mare parte a logicii care le înconjoară: conversii, validări și de control acces. Mai jos vom prezenta câteva modele:

extend Backbone.Model.extend(properties, [classProperties])

Extend stabilește în mod corect lanțul de prototip, astfel subclasele create cu extindere pot fi extinse și subclasate cât de mult dorim.

constructor / initialize new Model([attributes], [options])

Când creăm o instanță a unui model, putem trece valorile inițiale ale atributelor, care vor fi setate pe mode. Dacă definim o funcție Inițializare, aceasta va fi invocată atunci când modelul este creat.

get model.get (attribute) 

Obține valoarea curentă a unui atribut din model. De exemplu: note.get("title")

set model.set (attributes, [options]) 

Setează un hash de atribute (unul sau mai multe), pe model

escape model.escape(attribute)

Similar cu get, numai că întoarce versiunea HTML al unui atribut al modelului.

has model.has(attribute)

Returnează true dacă atributul este setat cu o valoare nenulă sau nedefinită.

unset model.unset(attribute, [options]) 

Elimină un atribut ștergându-l din hash-ul atributelor interne.

clear model.clear([options]) 

Șterge toate atributele din model, inclusiv atributul model.

id model.id

O proprietate specială a modelelor, id-ul este un șir arbitrar (id întreg sau UUID).

attributes model.attributes 

Proprietatea atributelor este hash-ul intern care conține starea modelului, de obicei o formă a obiectului JSON care reprezintă modelul datelor de pe server.

changed model.changed

Proprietatea de schimbare este hash-ul intern care conține toate elementele care s-au schimbat de la ultima setare.

defaults model.defaults or model.defaults()

Hash-urile implicite pot fi folosite pentru a specifica atributele specifice modelului.

destroy model.destroy([options]) 

validate model.validate(attributes, options)

Această metodă este nedefinită.

url model.url() 

Returnează URL-ul relativ , unde resursa modelului ar fi situată pe server.

clone model.clone() 

Returnează o noua instanță a modelului cu atribute identice.

2.7.3. Backbone.Collection

Colecțiile sunt seturi ordonate de modele. Orice eveniment care este declanșat pe un model într-o colecție va fi declanșat și pe colecție direct, pentru comoditate. Modele din Backbone.Collection:

model collection.model

Suprascrie această proprietate pentru a specifica clasa de model pe care colecția o conține.

models collection.models 

Acces brut la gama de modele JavaScript din interiorul colecției.

add collection.add(models, [options])

Adaugă un model colecției.

remove collection.remove(models, [options]) 

Șterge un model din colecție.

reset collection.reset([models], [options])

Înlocuiește o colecție cu o nouă lista de modele.

set collection.set(models, [options])

Metoda set efectuează o actualizare inteligentă a colecției cu lista metodelor.

get collection.get(id)

Ia un model dintr-o colecție, specificat de un id.

at collection.at(index)

Ia un model dintr-o colecție, specificat de un index.

push collection.push(model, [options])

Adaugă un model la sfârșitul colecției.

pop collection.pop([options])

Șterge și înlocuiește ultimul model dintr-o colecție.

unshift collection.unshift(model, [options]) 

Adaugă un model la începutul colecției.

shift collection.shift([options])

Șterge și înlocuiește primul model dintr-o colecție.

comparator collection.comparator

Dacă definiți un comparator, acesta va fi folosit pentru a menține colecția în ordinea sortată.

sort collection.sort([options])

Forțează o colecție să se resoteze singură.

pluck collection.pluck(attribute)

Smulge un atribut din fiecare model din colecție.

where collection.where(attributes)

Întoarce o matrice a tuturor modelelor dintr-o colecție care se potrivesc cu atributele trecute.

url collection.url or collection.url()

Setează proprietatea url (sau funcția), pe o colecție care face legătura locației sale pe server.

clone collection.clone()

Returnează o nouă instanță a colecției cu o listă identică de modele.

fetch collection.fetch([options]) 

Adună un set prestabilit de modele pentru această colecție de la server și le setează colecției atunci când ajung.

create collection.create(attributes, [options])

Crează o nouă instanță a unui model într-o colecție.

2.7.4. Backbone.View

Un view este folosit pentru a afișa informația din interiorul modelului. Mai mult decât atât, într-un view avem posibilitatea de a intercepta anumite evenimente precum: click, keydown, keyup .

extend

Backbone.View.extend(properties, [classProperties])

constructor/initialize

new View([options])

el

view.el 

$el

view.$el 

setElement

view.setElement(element)

attributes

view.attributes

$(jQuery)

view.$(selector) 

template

view.template([data]) 

render

view.render() 

remove

view.remove()

delegateEvents

delegateEvents([events])

undelegateEvents

undelegateEvents()

2.8. Twitter Bootstrap

Bootstrap este un framework pentru design HTML/CSS și Javascript prin utilizarea unor funcționalități din jQuery. Este un framework care are ca principală sarcină oferirea elementelor necesare pentru realizarea unui produs finisat într-un timp scurt. Ca proiect open-source, inițiat de echipa de dezvoltare de la Twitter, a prins foarte repede în comunitatea online, având un trend exponențial pe mai multe direcții. El a ajuns la versiunea 2.2.x și în același timp librăria a declanșat dezvoltarea unor terțe librării și extensii care au ca scop completarea și rafinarea unui pachet întreg de resurse necesare în jurul acestui framework. Twitter Bootstrap are deja scrisă o foaie de stil CSS pentru utilizatori.

2.8.1. Ce oferă Bootstrap?

Suport device-uri mobile: de când cu Bootstrap 3, oferă suport pentru acestea prin crearea de layout-uri responsive în funcție de device-ul care îl accesează.

Browser suport: este suportat de toate browserele populare.

Ușor de folosit: poți începe să lucrezi cu bootstrap doar cu cunoștințe de HTML și CSS; de asemenea site-ul oficial Bootstrap oferă o documentație bună.

Design receptiv: CSS-ul receptiv al lui Bootstrap se ajustează la Desktop, Tablete și Mobile.

Oferă utilizatorilor o soluție curată și uniformă pentru construirea interfețelor.

Conține componente built-in frumoase și funcționale ușor de customizat.

Acesta prevede, de asemenea, personalizare bazată pe web.

Și cel mai bun din toate, este o sursă deschisă.

Pachetul Bootstrap include:

Schelet: Bootstrap oferă o structură basic cu sistem grid, stiluri de link, background.

CSS: Bootstrap vine cu setările CSS globale și cu elemente fundamentale HTML stilizate și îmbunatățite cu clase extensibile.

Componente: Bootstrap conține multe componente reutilizabile construite pentru a oferi iconografie, dropdowns, navigație, alerte, popovers și mult mai mult.

Plugin-uri JavaScript :Bootstrap conține foarte multe plugin-uri JQuery personalizate.

Customizare: Putem customiza componetele Bootstrap, variabilele LESS și plugin-uri JQuery pentru a obține propria noastră versiune.

Ca urmare a succesului și popularității câștigate de acest framework html/css au apărut comunități și pagini web cu scop declarat de a oferi (gratis sau comercial), pachete de interfețe utilizator complete și gata de integrat în aplicații din diverse domenii.

2.8.2. stiluri

Bootstrap are integrate mai multe stiluri predefinite cum ar fi aspectul tabelelor, butoanelor, panourilor de logare, etc. Datorită acestui lucru munca utilizatorilor este redusă deoarece nu mai trebuie să programăm totul de la zero. Bootstrap ne oferă posibilitatea de a modifica stilurile originale dacă dorim sau le putem folosi așa cum sunt. În figura 2.8.1. putem observa exemple de butoane, tabele și panouri de logare.

2.8.3. utilizare bootstrap

Coloane

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

Folosind css-ul responsive coloanele se vor așeza în pagina conform figurii 2.8.2.

Dacă avem o rezoluție a dispozitivului mai mică de 767px atunci coloanele se vor alinia una sub cealaltă și își vor lua dimensiunile în funcție de dimensiunile dispozitivului.

Pentru crearea coloanelor în Bootstrap ne putem folosi de funcția .row. Vom lua un exemplu în care vom avea două div-uri care ocupă câte patru coloane fiecare .

În div-ul al doilea avem loc și putem muta div-ul roșu maxim patru coloane spre dreapta, în exemplul nostru îl vom muta două coloane spre dreapta . Pentru a putea face acest lucru trebuie să adăugăm clasa .offset după clasa .span4.

Pentru redimensionarea automată a coloanelor în funcție de lățimea ecranului folosim clasa .row-fluid în locul clasei .row.

Machetă

Pentru a centra toate coloanele și tot conținutul într-o pagină folosim un div cu clasa .container, iar pentru a putea transforma layout-ul într-unul fluid adugăm clasa .container-fluid.

O pagină Responsive este o pagina ce se adaptează la toate rezoluțiile.

Texte

Pentru alinierea textelor, Bootstrap ne furnizează trei clase diferite:

.text-left : aliniază text-ul la stânga

.text-center : centreză text-ul

.text-right : aliniază text-ul la dreapta

Pentru culori asupra textelor avem următoarele clase:

muted : gri

text-warning: galben

text-error : roșu

text-info : albastru

text-succes : verde

Liste

Listele sunt foarte utile mai ales când dorim să creăm o bară de meniu. Pot fi utilizate două clase, și anume .unstyled și .inline . Când folosim cele două clase împreună ne va dispune lista pe același rând.Aplicând cele două clase, obținem:

<ul class=”unstyled inline”>

<li>Home</li>

<li>About</li>

<li>Resource</li>

</ul>

Rezultatul obținut va fi: Home About Resource

Pentru a crea tabele în Bootstrap avem la dispoziție câteva clase pentru a-l înfrumuseța. Clasa principală pentru a-l transforma într-un adevărat tabel este table.

CAPITOLUL3. SPECIFICAȚIILE APLICAȚIEI

3.1. Scurtă descriere a aplicației

Aplicația web RMovieDatabase este destinată tuturor utilizatorilor de internet, în special celor pasionați de filme. Prin intermediul ei utilizatorii pot căuta și obține informații dintr-o gamă largă de filme.

Prima pagină a aplicatiei este formată dintr-un navbar în partea de sus a paginii cu butoanele Add Movie , Search, ,About si Resources. Pagina home conține o clasă header, o clasă container, două clase row, dintre care una carousel și una content, în care avem dispuse filmele și o clasă footer, în care avem numele autorului aplicației.

În figura 3.1. avem o schemă a sistemului în care funcționează aplicația.

Fig. 3.1. Schema sistemului

3.2. Interfața paginii de acces

Câand accesăm serverul prin comanda http://localhost/RMovieDatabase , severul va trimite trimite fișierul de bază, adică prima pagină a site-ului, și anume index.php (Fig 3.2.) ce va fi afișat în browser (Fig 3.3.).

Fig. 3.2. index.php

Fig. 3.2. Pagina Home a aplicației

CAPITOLUL 4. PROIECTAREA ÎN DETALIU

4.1. Arhitectura aplicației

Pentru server și pentru baza de date am folosit bine cunoscutul XAMP, care este un pachet de aplicații care constituie infrastructura software necesară găzduirii site-urilor web: server de web (Apache), server de baze de date (MySQL), interpretoare pentru scripturi scrise în limbajele PHP. XAMPP a fost creat însă pentru a pune la dispoziția dezvoltatorilor un instrument eficient de testare a diferitelor aplicatii in dezvltare. Odată instalat pe calculatorul propriu, pachetul de aplicații va face ca acesta să aibă comportamentul unui server, permițând testarea aplicațiilor scrise.

În phpmyadmin am stocat informațiile într-o bază de date în format MySQL, numită “rmd” și care conține un tabel cu toate filmele, numit “movie”. În figura 4.1. avem baza de date din XAMP în phpmyadim.

Fig.4.1.Baza de date

Pentru implementarea metodelor REST în aplicație am folosit framework-ul Slim. Am folosit acest framework pentru comunicarea cu server-ul. Codul folosit pentru implementarea metodelor este următorul:

$app = new Slim();

$app->get('/movies', 'getMovies');

$app->get('/movies/:id', 'getMovie');

$app->get('/movies/search/:query', 'findByName');

$app->post('/movies', 'addMovie');

$app->put('/movies/:id', 'updateMovie');

$app->delete('/movies/:id', 'deleteMovie');

$app->run();

function getMovies() {

$sql = "select * FROM movie ORDER BY name";

try {

$db = getConnection();

$stmt = $db->query($sql);

$movies = $stmt->fetchAll(PDO::FETCH_OBJ);

$db = null;

// echo '{"movie": ' . json_encode($movies) . '}';

echo json_encode($movies);

} catch(PDOException $e) {

echo '{"error":{"text":'. $e->getMessage() .'}}';

}

}

function getMovie($id) {

$sql = "SELECT * FROM movie WHERE id=:id";

try {

$db = getConnection();

$stmt = $db->prepare($sql);

$stmt->bindParam("id", $id);

$stmt->execute();

$movie = $stmt->fetchObject();

$db = null;

echo json_encode($movie);

} catch(PDOException $e) {

echo '{"error":{"text":'. $e->getMessage() .'}}';

}

}

function addMovie() {

error_log('addMovie\n', 3, '/var/tmp/php.log');

$request = Slim::getInstance()->request();

$movie = json_decode($request->getBody());

$sql = "INSERT INTO movie (name, genre, country, year, description, picture) VALUES (:name, :genre, :country, :year, :description, :picture)";

try {

$db = getConnection();

$stmt = $db->prepare($sql);

$stmt->bindParam("name", $movie->name);

$stmt->bindParam("genre", $movie->genre);

$stmt->bindParam("country", $movie->country);

$stmt->bindParam("year", $movie->year);

$stmt->bindParam("description", $movie->description);

$stmt->bindParam("picture", $movie->picture);

$stmt->execute();

$movie->id = $db->lastInsertId();

$db = null;

echo json_encode($movie);

} catch(PDOException $e) {

error_log($e->getMessage(), 3, '/var/tmp/php.log');

echo '{"error":{"text":'. $e->getMessage() .'}}';

}

}

function updateMovie($id) {

$request = Slim::getInstance()->request();

$body = $request->getBody();

$movie = json_decode($body);

$sql = "UPDATE movie SET name=:name, genre=:genre, country=:country, year=:year, description=:description, picture=:picture WHERE id=:id";

try {

$db = getConnection();

$stmt = $db->prepare($sql);

$stmt->bindParam("name", $movie->name);

$stmt->bindParam("genre", $movie->genre);

$stmt->bindParam("country", $movie->country);

$stmt->bindParam("year", $movie->year);

$stmt->bindParam("description", $movie->description);

$stmt->bindParam("picture", $movie->picture);

$stmt->bindParam("id", $id);

$stmt->execute();

$db = null;

echo json_encode($movie);

} catch(PDOException $e) {

echo '{"error":{"text":'. $e->getMessage() .'}}';

}

}

function deleteMovie($id) {

$sql = "DELETE FROM movie WHERE id=:id";

try {

$db = getConnection();

$stmt = $db->prepare($sql);

$stmt->bindParam("id", $id);

$stmt->execute();

$db = null;

} catch(PDOException $e) {

echo '{"error":{"text":'. $e->getMessage() .'}}';

}

}

Pentru a da structură aplicației am folosit Backbone.js, care este un MVC (Model View Controller). Backbone.js oferă structură aplicațiilor prin folosirea events, models, collections și views conectate la un API cu o interfață RESTful JSON. Mai jos avem un exemplu de cod din aplicație:

routes: {

"" : "list",

"movies/page/:page" : "list",

"movies/add" : "addMovie",

"movies/:id" : "movieDetails",

"about" : "about",

"search/:query" : "search",

"movieSearch/:id" : "movieSearch"

},

initialize: function () {

var self = this;

this.headerView = new HeaderView();

$('.header').html(this.headerView.el);

var MyApp = new Backbone.Router();

$("#searchmovies").submit(function(){

MyApp.navigate("search/" + $('#searchInput').val(), {trigger: true});

return false;

});

},

list: function(page) {

var p = page ? parseInt(page, 10) : 1;

var movieList = new MovieCollection();

movieList.fetch({success: function(){

$("#content").html(new MovieListView({model: movieList, page: p}).el);

}});

this.headerView.selectMenuItem('home-menu');

},

movieDetails: function (id) {

var movie = new Movie({id: id});

movie.fetch({success: function(){

$("#content").html(new MovieView({model: movie}).el);

}});

this.headerView.selectMenuItem();

},

addMovie: function() {

var movie = new Movie();

$('#content').html(new MovieView({model: movie}).el);

this.headerView.selectMenuItem('add-menu');

},

about: function () {

if (!this.aboutView) {

this.aboutView = new AboutView();

}

$('#content').html(this.aboutView.el);

this.headerView.selectMenuItem('about-menu');

},

search: function (query) {

$('#content').html(new SearchView({query: query}).el);

//this.searchView.initPage(query);

},

movieSearch: function(imdbId){

$('#content').html(new MovieSearchView({id: imdbId}).el);

}

});

utils.loadTemplate(['HeaderView', 'MovieView', 'MovieListItemView', 'AboutView', 'MovieListSearchView', 'MovieSearchDetailsView'], function() {

app = new AppRouter();

Backbone.history.start();

});

Pentru interfața grafică am folosit front end framework-ul Bootstrap. Pentru designul header-ului aplicației am folosit codul următor:

<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="brand" href="#">RMovieDatabase</a>

<div class="nav-collapse">

<ul class="nav">

<li class="add-menu"><a href="#movies/add"><i class="icon-edit icon-white"></i> Add Movie</a></li>

</ul>

<ul class="nav pull-right">

<li>

<form id="searchmovies" class="navbar-search pull-left" action="">

<input id="searchInput" type="text" class="search-query span2" placeholder="Search">

</form>

</li>

<li class="divider-vertical"></li>

<li class="about-menu"><a href="#about">About</a></li>

<li class="divider-vertical"></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="http://documentcloud.github.com/backbone/" target="_blank">Backbone.js</a></li>

<li><a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a></li>

<li><a href="http://documentcloud.github.com/underscore/" target="_blank">Underscore.js</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

Capitolul 5. Utilizarea Aplicației

În acest capitol prezentăm modul de utilizare al aplicației împreună cu interfețele sale în toate situațiile posibile. Cum este o aplicație, accesul web la ea se face cu un program browser web (Chrome, Mozilla Firefox, Opera, Internet Explorer). Vom începe cu prima pagină, prezentată în figura 5.1.

Pe această pagină, utilizatorul poate verifica toate filmele din baza proprie de date, dispuse pe trei pagini. Dacă selectăm primul film, ni se va deschide pagina din figura 5.2. În această pagină avem detalii despre film, precum genul filmului, anul lansării, o scurtă descriere a acțiunii filmului, poza de copertă a filmului și, în plus, utilizatorul are posibilitatea de a vizualiza trailer-ul filmului.

Dacă utilizatorii doresc să caute un film anume sau un film care nu există în baza de date a aplicației, pot apela la secțiunea de “search” situată în navbar-ul din partea de sus a paginii. În figura 5.3., se realizează o căutare după titlul filmului “Blended”.

În urma căutării, ne sunt afișate sub forma unei liste toate filmele care conțin cuvântul “blended”. Selectăm filmul dorit pentru a accesa pagina din figura 5.4. unde avem informații despre film.

Adăugarea de filme se face prin apăsarea butonului “Add Movie” din navbar, care deschide o alta pagină ce oferă posibilitatea administratorului să introducă datele unui nou film. Vom crea un film numit test, pe care apoi îl vom șterge. Aceste operații sunt prezentate în figurile 5.5. , 5.6. și 5.7.

După ce se realizează introducerea informațiilor despre film în spațiile corespunzătoare, datele vor fi salvate folosind butonul “Save”.

După ce se apasă butonul “save” , va trebui sa apară o confirmare de creare/ salvare a informațiilor introduse, adică validarea faptului că filmul a fost creat și introdus în baza de date. Pentru confirmare, se va afișa mesajul “The application was built by…” .

Ștergerea unui film se realizează cu ajutorul butonului “Delete”, după care va fi afișată confirmarea acestei operațiuni prin mesajul : “Movie deleted successfully” .

În secțiunea “About”, utilizatorii au posibilitatea să adreseze întrebări sau să lase impresii/ păreri/ opinii/ sugestii cu privire la aplicația web în sine sau orice topic legat de pagina pe care au vizitat-o.

Butonul “Resources” (figura 5.9.) din navbar este de tip drop-down și conține link-uri către tehnologiile cu ajutorul cărora a fost creată aplicația (Twitter Bootstrap, Underscore js) .

Așadar, prin toate cele prezentate anterior, am expus modul de utilizare al aplicației implementate, împreună cu interfețele sale și toate operațiile ce pot fi realizate fie de utilizatori, fie de administratorul paginii web.