Cristescu Diana-Andreea - Info ID Anul 2
Prezentare Generală și Arhitectură
Această aplicație web reprezintă o soluție digitală completă pentru modernizarea proceselor dintr-o bibliotecă publică, dezvoltată ca proiect final pentru materia Dezvoltarea Aplicațiilor Web (DAW). Proiectul demonstrează capacitatea de a construi un sistem complex de la zero, utilizând o stivă tehnologică nativă (fără framework-uri backend majore) pentru a evidenția înțelegerea profundă a protocoalelor web și a interacțiunii cu bazele de date.
Arhitectura sistemului se bazează pe patru piloni tehnologici esențiali:
• Backend Robust (PHP & MySQL): Logica server-side este implementată în PHP pur, utilizând o structură modulară (fragmentare) pentru mentenanță. Baza de date este puternic optimizată prin utilizarea exclusivă a Procedurilor Stocate pentru manipularea datelor, asigurând performanță și securitate.
• Frontend Interactiv (JS & CSS): Interfața utilizatorului nu este doar statică; ea comunică asincron cu serverul prin Fetch API (AJAX), permițând actualizarea stării (împrumuturi, wishlist, pagini citite) fără reîncărcarea paginii.
• Securitate "By Design": De la validarea datelor și prevenirea SQL Injection, până la criptarea parolelor și protecția sesiunilor, securitatea a fost un factor decisiv în fiecare etapă a dezvoltării.
Aplicația gestionează întregul ciclu de viață al interacțiunii cititor-bibliotecă: de la explorarea catalogului și rezervarea titlurilor, până la urmărirea progresului lecturii și vizualizarea termenelor de returnare într-un calendar personalizat.
1. Modulul de Explorare și Catalog (Browse)
Pagina de "Browse" reprezintă motorul principal de descoperire al platformei. Aceasta implementează un sistem avansat de filtrare care permite utilizatorilor să navigheze prin colecții (ex. Ficțiune, Știință) și sub-categorii specifice.
În lipsa unor filtre active, pagina afișează automat "New Arrivals" (cele mai recente cărți adăugate), utilizând proceduri stocate (GetLatestArrivals) pentru o încărcare rapidă și optimizată. Interfața include o grilă vizuală cu coperțile cărților, titluri interactive și autori, precum și o bară de căutare dinamică animată (demonstrativă), oferind o experiență de utilizare fluidă și intuitivă.
De asemenea, sistemul include paginare automată pentru a gestiona eficient volumele mari de date, asigurând performanța indiferent de numărul de titluri din bibliotecă.
2. Vizualizarea Detaliată a Cărților și Interacțiunea CRUD
Această componentă esențială (renderBookInfoCard) transformă simpla navigare într-o experiență interactivă completă. Pe lângă afișarea metadatelor critice (titlu, autor, editură, număr pagini, stoc curent și descriere), interfața integrează funcționalități avansate bazate pe operațiuni CRUD (Create, Read, Delete), gestionate asincron prin JavaScript (Fetch API). Această abordare asigură o experiență de utilizare fluidă, permițând actualizarea stării bazei de date fără reîncărcarea paginii.
Sistemul interoghează baza de date în timp real pentru a determina relația curentă dintre utilizator și carte, adaptând dinamic starea butoanelor de acțiune:
• Gestiunea Listei de Favorite (Wishlist): Permite adăugarea (Create) sau eliminarea (Delete) rapidă a cărții din lista de preferințe, modificând instantaneu pictograma vizuală (stea plină/goală) în funcție de răspunsul serverului.
• Sistemul de Împrumut (Borrowing): Implementează o logică de backend complexă. La apăsarea butonului "Borrow", serverul verifică întâi dacă titlul există în istoricul general al utilizatorului (user_library). Dacă nu, efectuează automat o inserare în biblioteca personală înainte de a crea înregistrarea în tabelul de împrumuturi active (loans). Interfața comută automat textul butonului între "Borrow" și "Return" bazat pe succesul operațiunii.
• Sistemul de Rezervări: Similar împrumuturilor, permite utilizatorilor să rezerve un exemplar sau să anuleze o rezervare existentă, actualizând stocul disponibil și feedback-ul vizual al butonului ("Reserve" vs "Cancel Reservation").
Pentru a asigura o continuitate vizuală perfectă, aplicația implementează și un mecanism de persistență a poziției de navigare. Folosind sessionStorage, poziția exactă de scroll a utilizatorului este salvată automat la accesarea unei cărți și restaurată imediat după reîncărcarea paginii. Astfel, utilizatorul nu pierde contextul vizual și poate continua explorarea listei exact de unde a rămas, eliminând frustrarea de a căuta din nou poziția anterioară în grila de cărți.
3. Biblioteca Personală și Urmărirea Progresului (My Books)
Această secțiune, accesibilă exclusiv utilizatorilor autentificați (protejată prin check_login.php), funcționează ca un panou de control personalizat pentru gestionarea lecturilor. Arhitectura paginii se bazează pe segregarea logică a datelor utilizatorului în trei stări distincte, fiecare populată printr-o procedură stocată dedicată MySQL, optimizată pentru a filtra rezultatele pe baza ID-ului din sesiune ($_SESSION['user_id']).
Interfața este organizată în secțiuni clare pentru o monitorizare eficientă a activității:
• Just Added: Afișează titlurile recent adăugate în bibliotecă prin procedura GetJustAddedBooksForUserId, permițând utilizatorului să vadă rapid ce intenționează să citească.
• In Progress: Este nucleul interactiv al paginii. Aici, cărțile sunt afișate împreună cu o bară de progres vizuală și un câmp de input (așa cum s-a detaliat în secțiunile anterioare), permițând actualizarea numărului de pagini citite. Datele sunt extrase prin GetInProgressBooksForUserId.
• Finished: Arhivează cărțile finalizate (procedura GetCompletedBooksForUserId), oferind un istoric vizual al realizărilor utilizatorului.
Componenta vizuală refolosește funcția renderBookCards pentru consistență stilistică și include, de asemenea, modalul de detalii (renderBookInfoCard), permițând utilizatorului să modifice starea cărților (ex: să returneze o carte sau să o mute în lista de favorite) direct din acest panou, fără a naviga înapoi în catalog.
4. Lista de Dorințe (Wishlist)
Această pagină servește ca un instrument de bookmarking personalizat, permițând utilizatorilor să salveze titlurile de interes pentru o consultare ulterioară. Accesul este restricționat exclusiv utilizatorilor autentificați (prin includerea fragments/check_login.php), asigurând confidențialitatea preferințelor de lectură.
Din punct de vedere tehnic, pagina demonstrează eficiența arhitecturii modulare a aplicației:
• Extragerea Datelor: Se utilizează procedura stocată GetUserWishlistFromId, care realizează o interogare optimizată (JOIN între tabelele wishlist și books) pentru a returna rapid doar cărțile marcate de utilizatorul curent.
• Reutilizarea Componentelor UI: Afișarea vizuală nu necesită cod nou, ci apelează funcția generică renderBookCards (cu parametrul specific '3' pentru stilizarea cardurilor de wishlist). Aceasta lucrează în tandem cu renderBookInfoCard, permițând utilizatorului să deschidă detaliile unei cărți și, prin intermediul logicii CRUD explicate anterior, să o mute direct din Wishlist în Împrumuturi sau să o șteargă din listă.
Astfel, pagina de Wishlist acționează ca o zonă tampon între simpla explorare (Browse) și angajamentul de lectură (My Books), facilitând planificarea pe termen lung a utilizatorului.
5. Sistemul Modular de Randare a Cardurilor (Render System)
Pentru a asigura consistența vizuală și mentenanța ușoară a codului, aplicația nu rescrie codul HTML pentru afișarea cărților în fiecare pagină, ci utilizează un motor centralizat de randare (fragments/render_book_card_list.php). Această abordare respectă principiul programării moderne DRY (Don't Repeat Yourself).
Funcția principală, renderBookCards, acționează ca un orchestrator care preia o listă de obiecte (cărți) și un parametru de stil ($cardStyle), adaptând ieșirea vizuală în funcție de context:
• Stilul 1 (Complet): Utilizat în secțiunea "In Progress". Include coperta, bara de progres vizuală calculată procentual, câmpul de input pentru actualizarea paginilor și setul complet de butoane (Borrow/Return și Reserve/Cancel).
• Stilul 2 (Simplificat): O variantă optimizată pentru secțiuni unde rezervarea nu este necesară, dar monitorizarea progresului rămâne activă.
• Stilul 3 (Compact): Folosit în "Wishlist". Elimină bara de progres pentru a se concentra strict pe acțiunile de gestiune a colecției.
Un aspect crucial al acestui modul este injecția automată a stării. Înainte de a genera HTML-ul, funcția interoghează baza de date (procedurile GetBorrowedBooksFromId și GetReservedBooksFromId) pentru a determina dacă utilizatorul are deja cartea împrumutată sau rezervată. Astfel, butoanele sunt generate direct cu starea corectă ("Return" în loc de "Borrow"), eliminând necesitatea unor verificări ulterioare din partea clientului.
6. Calendarul Activităților (Schedule)
Pagina "Schedule" oferă o perspectivă temporală asupra interacțiunii utilizatorului cu biblioteca, integrând un calendar dinamic dezvoltat complet în JavaScript (Vanilla), fără a depinde de librării externe greoaie.
Arhitectura acestui modul implică o comunicare strânsă între client și server prin intermediul unui API dedicat JSON (api/get_calendar_events.php). La încărcarea paginii, un apel asincron (fetchCalendarData) colectează toate împrumuturile și rezervările active. Datele brute, constând în intervale de timp (Data start - Data sfârșit), sunt procesate de funcția markDateRange, care populează un "Map" global (eventMap). Acest algoritm iterează prin fiecare zi a intervalului și asociază evenimentul cu data calendaristică specifică, rezolvând totodată problemele complexe legate de fusul orar (Timezone offsets) pentru a asigura o precizie perfectă a afișării.
Renderizarea vizuală (realizată de setDatesAndTitle) generează dinamic grila calendaristică pentru luna curentă, marcând zilele relevante cu indicatori vizuali distincți:
• Împrumuturi (Loans): Marcate cu pictograma specifică , indicând perioada în care cartea se află fizic la utilizator.
• Rezervări (Reservations): Marcate cu , evidențiind fereastra de timp în care cartea este reținută pentru ridicare.
Navigarea între luni este fluidă și recalculează instantaneu poziția evenimentelor fără a necesita noi interogări către server, demonstrând eficiența stocării locale a datelor în memoria browserului.
7. Înregistrare și Securitatea Conturilor (Sign Up)
Pagina de înregistrare constituie poarta de acces către funcționalitățile personalizate ale bibliotecii. Interfața este proiectată pentru a colecta datele esențiale (Nume, Prenume, Email, Parolă) într-un format intuitiv, incluzând elemente de UX moderne, precum funcționalitatea Show/Hide Password (implementată prin scriptul password_show_hide.js) care permite utilizatorilor să vizualizeze parola introdusă pentru a evita erorile de tastare. De asemenea, sunt integrate vizual opțiuni pentru autentificarea prin terți (Google, Apple, Facebook) pentru dezvoltări viitoare.
Logica de backend (api/submit_signup.php) este construită pe principii solide de securitate și validare:
• Validarea Datelor: Înainte de orice interacțiune cu baza de date, scriptul verifică integritatea datelor trimise (câmpuri obligatorii) și confirmă că parola coincide cu câmpul de confirmare ("Confirm Password").
• Unicitatea Utilizatorului: Se utilizează o funcție stocată (GetUserIdFromEmail) pentru a verifica rapid dacă adresa de email există deja în sistem, prevenind duplicarea conturilor.
• Criptarea Parolelor: Cel mai important aspect de securitate este stocarea parolelor. Aplicația NU stochează parole în clar. Se utilizează funcția nativă PHP password_hash() cu algoritmul PASSWORD_DEFAULT (care aplică automat "salt"-uri aleatoare), asigurând protecția datelor chiar și în cazul compromiterii bazei de date. Inserarea finală se face, ca și în restul aplicației, prin Prepared Statements pentru a bloca tentativele de SQL Injection.
8. Sistemul de Navigare Adaptiv și Autentificare (Menu & Login)
Experiența utilizatorului (UX) este centralizată într-un **meniu lateral dinamic**, care își adaptează complet structura și conținutul în funcție de starea sesiunii utilizatorului (verificată prin `isset($_SESSION['user_id'])`). Această abordare elimină necesitatea unei pagini separate de "Login", integrând formularul direct în fluxul de navigare pentru vizitatori.
Comportamentul dual al interfeței este structurat astfel:
• Modul Vizitator (Guest): Meniul afișează logo-ul instituției și un formular de autentificare compact, alături de opțiuni de înregistrare (Sign Up) și navigare publică (Browse/Help). Aceasta reduce fricțiunea pentru utilizatorii noi.
• Modul Utilizator (Logged In): Odată autentificat, formularul dispare și este înlocuit de un "User Card" cu avatarul și numele utilizatorului. Meniul expandează automat accesul către secțiunile private (Schedule, My Books, Wishlist, Settings) și funcția de Logout.
• Securitatea Backend: Procesul de login (api/submit_login.php) respectă standardele stricte de securitate. Scriptul nu compară niciodată parolele în clar. Acesta extrage hash-ul parolei din baza de date folosind proceduri stocate izolate (GetUserIdFromEmail, GetPasswordHashFromUserId) și utilizează funcția criptografică password_verify() pentru validare, protejând conturile chiar și în cazul unui acces neautorizat la baza de date.
9. Strategia de Securitate și Integritatea Datelor
Arhitectura aplicației a fost proiectată punând accent pe securitatea defensivă ("Defense in Depth"), implementând multiple straturi de protecție verificate direct în codul sursă pentru a contracara vulnerabilitățile web comune:
• Protecție Avansată SQL Injection: Interacțiunea cu baza de date este dublu securizată. În primul rând, se utilizează exclusiv PDO Prepared Statements, care separă logica SQL de datele utilizatorului. În al doilea rând, utilizarea extensivă a Procedurilor Stocate (ex: CALL GetUserIdFromEmail) adaugă un nivel suplimentar de abstractizare, limitând accesul direct la tabele și structura bazei de date.
• Managementul Securizat al Parolelor: Aplicația respectă standardele moderne de criptografie, stocând parolele exclusiv sub formă de hash-uri generate prin algoritmul Bcrypt (via password_hash). Verificarea la autentificare se face prin password_verify, asigurând că parolele în clar nu sunt niciodată expuse sau stocate, protejând utilizatorii chiar și în cazul compromiterii bazei de date.
• Prevenirea XSS (Cross-Site Scripting): Toate datele afișate în interfață (nume autori, titluri cărți, descrieri) sunt trecute sistematic prin funcția de sanitizare htmlspecialchars(). Aceasta neutralizează orice tentativă de injectare a codului malițios JavaScript prin input-urile utilizatorilor.
• Validare Server-Side și Anti-Spoofing: Aplicația nu se bazează pe validarea din browser (care poate fi ușor ocolită). Toate datele critice sunt re-verificate pe server (ex: verificarea existenței email-ului, coincidența parolelor). Mai mult, acțiunile sensibile (împrumuturi, modificări profil) folosesc identificatorul din sesiune ($_SESSION['user_id']) și ignoră orice ID trimis prin formulare ascunse, eliminând riscul de Form Spoofing.
• Controlul Accesului: Resursele private sunt protejate prin mecanisme de includere modulară (ex: fragments/check_login.php), care blochează execuția scriptului pentru utilizatorii neautentificați înainte de a încărca orice conținut sensibil.