Site-uri și aplicații pentru web

Curs 7


Generalități

De ce client-server?

Deși arhitectura denumită client-server este o soluție de dezvoltare a aplicațiilor relativ recentă, se poate observa că aplicațiile actuale sunt în marea lor majoritate bazate pe această arhitectură. Suplețea oferită de posibilitatea separării aplicației în două părți distincte, partea de reprezentare a informațiilor și partea de producere și prelucrare a acestora, face ca și unele aplicații de tip desktop să fie realizate în această arhitectură (editorul Atom, Visual Studio Code și altele).

Dar această arhitectură s-a impus datorită creșterii spectaculoase a numărului de aplicații web create în ultimii ani. Acestea profită cel mai mult de avantajele oferite de această arhitectură software.

Cursul va fi axat de alfel doar pe studiul aplicațiilor web, cele de tip desktop fiind nesemnificative din perspectiva numărului și importanței lor practice.

O aplicaţie web este definită ca fiind alcătuită din două părți principale: o parte care se execută într-o aplicație de navigare în Internet (componenta client) și o parte care se execută pe un calculator având rolul de server (componenta server). Pentru fiecare dintre cele două părți există limbaje și tehnologii dedicate. Asfel, pentru partea executată în aplicația de navigare, aplicația va consta dintr-un ansamblu de fișiere conținând cod HTML, CSS și JavaScript. Pentru cealaltă parte, executată pe server, aplicația constă dintr-un ansamblu de fișiere executabile. Acestea sunt lansate în execuție de o aplicație de tip server de web (de exemplu Apache sau NGINX), conectată la Internet, care primește comenzi de la componenta client. Pentru scrierea codurilor componentelor părții de server pot fi utilizate toate limbajele de programare de uz general (C, C++, Java, Python, C#, etc.) dar și limbaje dedicate (PHP, PERL).

Spre deosebire de aplicaţiile obişnuite, care pot fi executate numai după obţinerea unui kit de instalare şi instalarea pe calculator, aplicaţiile web pot fi executate imediat ce interfaţa expusă de acestea s-a încărcat în fereastra browser-ului. Aceste aplicații sunt deci permanent la îndemână, nu utilizează spaţiul de stocare al calculatorului pe care rulează și, depinzând doar de disponibilitatea unui browser, se pot rula utilizând orice terminal pe care este instalată o astfel de aplicație (deci și pe terminale mobile: telefoane sau tablete).

Tipice pentru această familie de aplicații sunt magazinele virtuale, aplicațiile destinate schimbării de mesaje (Facebook, Twitter, Instagram), cele destinate poștei electronice, etc..

Observații:

  1. Partea de server a unei aplicații web utilizează, pe lângă serverul de web menționat și aplicații de tip server de baze de date. Un server de baze de date deservește simultan mai multe aplicații web.
  2. Atenţie la termenul server! Când se referă la un calculator, acesta are nişte caracteristici aparte, respectiv este conectat întro reţea şi pe el rulează continuu un ansamblu de aplicaţii accesibile prin reţea. De cele mai multe ori serverele nu aparţin unui utilizator anume ci unei firmei care oferă servicii de găzduire de site-uri și aplicații pentru web. Dar dacă termenul se referă la un program, este vorba despre o aplicaţie care furnizează resurse (informații) unei rețele de aplicații client. Aplicațiile client trimit aplicației server cereri iar aplicația server răspunde cererilor primite.

Exemplu de arhitectură hardware necesară exploatării unei aplicații web:

Tipuri de arhitecturi client-server

Arhitectura cu două niveluri (eng. 2-Tier Architecture):

Este adoptată în cazul aplicațiilor care folosesc pentru păstrarea datelor un serviciu web. Nivelul 1 rulează în browser-ul terminalului client (PC, telefon inteligent sau tabletă) și integrează atât partea de prezentare cât și cea de prelucrare a datelor (eng. bussiness logic). Nivelul 2 îl reprezintă un serviciu web specializat în stocarea datelor (eng. Database-as-a-Service, prescurtat DBaaS).

Calculatoarele client și serverul sunt conectate direct, comunicarea fiind realizată fără utilizarea unui nivel intermediar (de exemplu un server de web). Clientul declanșează o acțiune și primește instantaneu răspuns. Rezultatul cel mai rapid este primit exploatând actst tip de sistem.

Această arhitectură se folosește pentru aplicații relativ simple: trimitere de mesaje (eng. chat), aplicații de cumpărare a biletelor online ș.a..

Avantajele acestei arhitecturi țin de ușurința proiectării aplicației client, de rapiditatea răspunsului, de modul de implementare.

Dezavantajele sunt legate de mai slaba performanță în cazul unui număr foarte mare de utilizatori care trimit cereri simultan și, uneori, un grad mai scăzut de securizare.


Arhitectură cu trei niveluri (eng. 3-Tier Architecture):

Acest tip de arhitectură, pe lângă client și server, are nevoie de un nivel intermediar, (eng. middleware). Cererea trimisă de componenta client (nivelul 1) spre server este adresată nivelului intermediar (nivelul 2). În acesta au loc prelucrările cerute și eventuale accesări ale nivelului 3, acesta fiind de regulă un server de baze de date (Oracle, MySQL, PostgreSQL, Mssql etc.). Prelucrările efectuate în nivelul intermediar au ca și rezultat crearea unei noi prezentări grafice (practic o pagină web generată dinamic) și trimiterea acesteia spre client.

Frecvent această arhitectură este referită folosind denumirea MVC (prescurtare pentru Model - View - Controller).

Cele trei niveluri sunt:

  • nivelul de prezentare sau interfața cu utilizatorul (eng. view);
  • nivelul aplicației, în care datele sunt prelucrate (eng. controller);
  • nivelul de date, care gestionează datele aplicației (eng. model).

Avantajele acestui tip de arhitectură sunt legate de rapiditatea dezvoltării, scalabilitate, fiabilitate și securitate.


Arhitectură multinivel (eng. n-Tier Architecture sau Multitier architecture):

Acest tip de arhitectură oferă un model prin care dezvoltatorii pot crea aplicații flexibile și reutilizabile. Având această separare a componentelor aplicației, dezvoltatorii pot modifica sau adăuga "din mers" anumite module, fără ca aceasta să necesite refacerea întregii aplicații.

Exemplu de arhitectură pe mai multe niveluri (https://ro.qaz.wiki/wiki/Multitier_architecture):

Avantajele acestui tip de arhitectură sunt aceleași pe are le oferă arhitectura cu trei niveluri, fiind practic doar o extindere a acesteia.

Dezavantajele sunt legate de complexitatea crescută a aplicațiilor, care afectează durata de implementare și nivelul de calificare a dezvoltatorilor.





Aplicații client-server

Modelul client-server se referă la structurarea aplicațiilor software în componente client și componente server. Componentele client adresează componentelor server comenzi prin care solicită informații. Dacă rulează pe calculatoare diferite, clienții și serverele comunică prin rețea. Pe un server pot rula aplicații accesate de mai mulți clienți. Un client nu partajează cu nimeni altcineva resursele sale. Funcția lui este aceea de a solicita informații unei aplicații de tip server. Exemple de aplicații informatice care utilizează modelul client-server sunt magazinele virtuale, aplicațiile de poștă electronică, aplicațiile web, etc..


TOP

XAMPP

În cele expuse s-au menționat denumiri ale unor aplicații care intervin în funcționarea aplicațiilor web: browser-e, aplicații de tip server web (Apache, Nginx) și aplicații de tip server de baze de date (Oracle, MySQL, PostgreSQL, Mssql etc.). Standardizarea comunicării cu astfel de aplicații a făcut însă posibilă punerea la dispoziția dezvoltatorilor a unor seturi restrânse de aplicații, conținând, printre altele, un server de web și un server de baze de date.

Observație: Toate sistemele de operare integrează aplicații de navigare, deci pachetele de aplicații menționate conțin doar setul de aplicații necesare dezvoltării părții de server ale unei aplicații web.

Un astfel de pachet de aplicații este XAMPP, disponibil pentru toate sistemele de operare majore: Windows, Linux și macOS (Apple).

Pachetul conține mai multe aplicații, importante fiind serverul de web Apache, serverul de baze de date MariaDB (echivalentul gratuit al serverului MySQL) și interpretorul de cod PHP.

Odată instalat, XAMPP poate pune la dispoziţia dezvoltatorilor o infrastructură care poate fi imediat utilizată pentru crearea aplicațiilor web. Evident, odată finalizată, aplicația va fi copiată pe serverul firmei care o va găzdui. Mutarea unei aplicații pe un server necesită însă și operarea unor mici adaptări.

XAMPP se poate descărca de la adresa https://www.apachefriends.org/ro/download.html.

Se poate limita spațiul necesar instalării selectând la începutul procesului de instalare doar aplicațiile care vor fi necesare, ca în imagine:

Instalarea se va realiza în rădăcina discului C: (sau D: sau E:, etc), prezenţa pe calculator a pachetului de aplicaţii manfestându-se doar prin apariția directorului /xampp în rădăcina partiției utilizate pentru instalare.

Pentru a testa site-uri și aplicații pentru web, vor trebui lansate în execuție două componente: serverul de web Apache și serverul de baze de date MySQL. Aceasta se realizează lansând în execuție panoul de control XAMPP xampp-control.exe (dublu clic în fereastra aplicației File Explorer):


Verificarea funcţionării aplicaţiilor necesare pentru crearea aplicațiilor web se poate realiza tastând în browser adresa unei aplicaţii web integrată în XAMPP, PHPMyAdmin:

   http://localhost/phpmyadmin/

Aplicația lansată, PHPMyAdmin, este programată în limbajul PHP și permite gestionarea serverului de baze de date MySQL.

Observație: Încărcarea în fereastra browser-ului a unei aplicații web sau a unui site web va produce o serie de comenzi adresate serverului de web de pe calculatorul pe care este găzduită aplicația. Aceste comenzi sunt compuse dintr-un verb (GET), un nume de fișier și, eventual, unul sau mai multe argumente suplimentare. Fișierul referit în comandă poate fi de diferite tipuri (HTML, CSS, JavaScript, PHP etc.). Cele care au un conținut static (texte, imagini, fișiere de stiluri) vor fi "servite" de server imediat (adică transferate aplicației client) în timp ce fișierele care conțin cod PHP vor fi executate pe server (într-un interpretor specializat).





XAMPP

XAMPP este un pachet de aplicații software gratuit, "open source" și multiplatformă care odată instalat pe calculatorul personal, îl transformă pe acresta într-un server complex cu două componente: o aplicație de tip server de web, Apache și un server de baze de date, MySQL. Pachetul conține și un interpretor de cod PHP, deci acest limbaj va putea fi utilizat la programarea componentelor părții de server a aplicației web în curs de dezvoltare.


TOP

Utilizarea serverului Apache pentru realizarea unei aplicații web

Un server de web este un program reactiv. El rulează în continuu pe calculatorul destinat gestionării unuia sau mai multor site-uri și aplicații web şi aşteaptă cereri din partea unei aplicaţii client (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera etc.).

Ca aplicaţie, serverul pentru web accesează un ansamblu de fişiere și directoare dispuse într-un anumit director de pe discul calculatorului pe care acesta este instalat. Dacă o aplicaţie client trimite o comandă prin care solicită un fişier existent, serverul Apache îl va furniza (dacă nu este un fișier conținând un program PHP) respectând regulile unui protocol precizat în cererea clientului (http, https, ftp). Dacă serverul primește o comandă care conține denumirea unui fișier PHP, serverul de web va lansa în execuție interpretorul de cod PHP și îi va trimite acestuia fișierul referit în comandă.

Pentru a exemplifica utilizarea pachetului aplicații XAMPP pentru realizarea și testarea unei aplicații (sau site) web, vor fi parcurși pașii următori:

  1. Se lansează în execuție serverul Apache;
  2. Se crează un subdirector derivat din .../xampp/htdocs/. Acesta va conține toate fișierele site-ului. De exemplu: E:/xampp/htdocs/FamiliaMea/
  3. Se crează apoi fișierele care compun site-ul sau se descarcă și se adaptează un model de site (un template, de exemplu un template care folosește componente prestilizate, bazat pe Bootstrap).
  4. Notă: Scopul cursului nefiind crearea unei aplicații web "de la zero", vom adopta a doua variantă, deci vom descărca un template gratuit. Pentru a limita activitatea de stilizare, template-ul va fi bazat pe Bootstrap și va fi descărcat de la adresa: https://bootstrapmade.com/family-multipurpose-html-bootstrap-template-free/.
  5. Se afișează pagina principală a aplicației web (index.html) tastând în caseta de adrese a browserului adresa http://localhost/FamiliaMea/




La o primă analiză a template-ului, se poate vedea că meniul derulant din bara de navigare (Drop Down) nu conține legături spre pagini existente ci doar un model de scriere a unui astfel de meniu. Posibil ca în versiunea cumpărată a template-ului să existe și alte modele de pagini, ceea ce ar ușura crearea unor pagini suplimentare și legarea lor în site folosind opțiuni din meniul derulant.

După traducerea textelor, un rezultat posibil ar putea fi:

Observație: Dacă testarea în XAMPP a unui site (sau a unei aplicații web) se realizează cu succes, va urma copierea sa pe serverul unei firme de găzduire și realizarea adaptărilor care se impun.


TOP