{"id":2639,"date":"2026-05-10T23:32:32","date_gmt":"2026-05-10T20:32:32","guid":{"rendered":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/?page_id=2639"},"modified":"2026-05-10T23:53:55","modified_gmt":"2026-05-10T20:53:55","slug":"programare-web-laborator-ajax","status":"publish","type":"page","link":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/programare-web\/programare-web-laborator-ajax\/","title":{"rendered":"Programare Web: Laborator AJAX"},"content":{"rendered":"<h2>Lectura obligatorie<\/h2>\n<p><a href=\"https:\/\/www.w3schools.com\/xml\/ajax_intro.asp\" target=\"_blank\" rel=\"noopener\">AJAX Tutorial<\/a><br \/>\n<a href=\"http:\/\/www.w3schools.com\/jquery\/jquery_ajax_intro.asp\" target=\"_blank\" rel=\"noopener\">jQuery \u2013 AJAX Introduction<\/a><br \/>\n<a href=\"http:\/\/www.w3schools.com\/jquery\/jquery_ref_ajax.asp\" target=\"_blank\" rel=\"noopener\">jQuery AJAX Methods<\/a><\/p>\n<h2>Cerin\u021be de implementare<\/h2>\n<h3>Cerin\u021ba nr. 1<\/h3>\n<p>Pentru aplica\u021bia web dezvoltat\u0103 p\u00e2n\u0103 \u00een prezent \u00een cadrul orelor de laborator, implementa\u021bi urm\u0103toarea func\u021bionalitate folosind pe frontend exclusiv JavaScript (f\u0103r\u0103 utilizarea libr\u0103riilor externe, de exemplu jQuery, \u0219i f\u0103r\u0103 utilizarea selectorilor specifici jQuery, precum <code>$<\/code>, chiar dac\u0103 ace\u0219tia sunt accepta\u021bi de sintaxa JavaScript):<\/p>\n<p>Realiza\u021bi afi\u0219area paginat\u0103 a unui num\u0103r de n \u00eenregistr\u0103ri din baza de date, prezentate c\u00e2te k pe pagin\u0103, sub forma unui tabel cu k linii.<\/p>\n<p>Tabelul va include dou\u0103 butoane:<\/p>\n<ul>\n<li>Next k<\/li>\n<li>Previous k<\/li>\n<\/ul>\n<p>Aceste butane vor deveni disabled:<\/p>\n<ul>\n<li>butonul Next k, atunci c\u00e2nd sunt afi\u0219ate ultimele k \u00eenregistr\u0103ri;<\/li>\n<li>butonul Previous k, atunci c\u00e2nd sunt afi\u0219ate primele k \u00eenregistr\u0103ri.<\/li>\n<\/ul>\n<p>\u00cenregistr\u0103rile vor fi preluate de pe backend printr-un apel AJAX care va returna datele \u00een format JSON.<\/p>\n<h3>Cerin\u021ba nr. 2<\/h3>\n<p>Implementa\u021bi aceea\u0219i func\u021bionalitate descris\u0103 la Cerin\u021ba nr. 1, cu diferen\u021ba c\u0103 apelul AJAX care returneaz\u0103 cele k \u00eenregistr\u0103ri va transmite datele \u00een format XML.<\/p>\n<h3>Cerin\u021ba nr. 3<\/h3>\n<p>Implementa\u021bi afi\u0219area paginat\u0103 conform Cerin\u021bei nr. 1 (afi\u0219are de c\u00e2te k \u00eenregistr\u0103ri), \u00eens\u0103 folosind apeluri AJAX realizate prin intermediul jQuery. De asemenea, afi\u0219area \u0219i popularea elementelor din frontend vor fi realizate tot folosind jQuery.<\/p>\n<h3>Cerin\u021ba nr. 4<\/h3>\n<p>Implementa\u021bi o variant\u0103 de afi\u0219are paginat\u0103 a c\u00e2te k \u00eenregistr\u0103ri realizat\u0103 exclusiv pe backend, f\u0103r\u0103 utilizarea:<\/p>\n<ul>\n<li>JavaScript<\/li>\n<li>jQuery<\/li>\n<li>altor libr\u0103rii de frontend<\/li>\n<\/ul>\n<p>Navigarea \u00eentre pagini se va realiza exclusiv prin mecanisme server-side.<\/p>\n<h3>Cerin\u021ba nr. 5<\/h3>\n<p>Pentru anumite entit\u0103\u021bi din baza de date, implementa\u021bi o modalitate de editare folosind vanilla AJAX (plain JavaScript).<\/p>\n<p>Presupunem existen\u021ba unei tabele \u00een backend, ale c\u0103rei \u00eenregistr\u0103ri sunt identificate printr-un atribut cheie (de exemplu: <code>id<\/code>).<\/p>\n<p>Se cere realizarea unui formular care s\u0103 con\u021bin\u0103:<\/p>\n<ul>\n<li>o list\u0103 (<code>select<\/code>) cu valorile atributului cheie;<\/li>\n<li>c\u00e2mpurile corespunz\u0103toare celorlalte atribute ale entit\u0103\u021bii selectate.<\/li>\n<\/ul>\n<p>Func\u021bionalitatea trebuie s\u0103 respecte urm\u0103toarele cerin\u021be:<\/p>\n<ol>\n<li>La schimbarea elementului selectat din list\u0103, valorile celorlalte c\u00e2mpuri din formular vor fi actualizate printr-un apel AJAX c\u0103tre backend.<\/li>\n<li>La modificarea valorilor atributelor din formular, butonul Save, ini\u021bial dezactivat (<code>disabled<\/code>), va deveni activ.<\/li>\n<li>Ap\u0103sarea butonului Save va salva modific\u0103rile pe server.<\/li>\n<li>Dac\u0103 utilizatorul modific\u0103 datele din formular \u0219i \u00eencearc\u0103 s\u0103 selecteze un alt element din list\u0103 f\u0103r\u0103 a salva modific\u0103rile, acesta va fi avertizat c\u0103 exist\u0103 modific\u0103ri nesalvate \u0219i va fi \u00eentrebat dac\u0103 dore\u0219te salvarea acestora \u00eenainte de continuare.<\/li>\n<\/ol>\n<p>Implementarea se va realiza exclusiv folosind vanilla AJAX (plain JavaScript).<\/p>\n<h3>Cerin\u021ba nr. 6<\/h3>\n<p>Implementa\u021bi Cerin\u021ba nr. 5 folosind jQuery.<\/p>\n<h2>Observa\u021bii suplimentare<\/h2>\n<ul>\n<li>\u00cen cazul apari\u021biei unor erori la apelurile AJAX efectuate pentru implementarea cerin\u021belor de mai sus, acestea trebuie semnalizate \u0219i afi\u0219ate utilizatorului \u00eentr-o manier\u0103 c\u00e2t mai user-friendly (exemplu: ce se \u00eent\u00e2mpl\u0103 dac\u0103 calculatorul utilizatorului este deconectat de la Internet chiar \u00een timpul efectu\u0103rii unui apel AJAX?);<\/li>\n<li>\u00cen cadrul orelor de laborator pot fi formulate \u0219i cerin\u021be suplimentare fa\u021b\u0103 de cele prezentate \u00een acest enun\u021b. Pentru fiecare \u00eentrebare adresat\u0103 de cadrul didactic referitoare la codul surs\u0103 al rezolv\u0103rii, la care studentul nu poate oferi un r\u0103spuns justificat, se vor sc\u0103dea 2 puncte din nota laboratorului.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Lectura obligatorie AJAX Tutorial jQuery \u2013 AJAX Introduction jQuery AJAX Methods Cerin\u021be de implementare Cerin\u021ba nr. 1 Pentru aplica\u021bia web dezvoltat\u0103 p\u00e2n\u0103 \u00een prezent \u00een cadrul orelor de laborator, implementa\u021bi urm\u0103toarea func\u021bionalitate folosind pe frontend exclusiv JavaScript (f\u0103r\u0103 utilizarea libr\u0103riilor&hellip; <a href=\"https:\/\/www.cs.ubbcluj.ro\/~bufny\/programare-web\/programare-web-laborator-ajax\/\" class=\"more-link\">Continue Reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":267,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/2639"}],"collection":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/comments?post=2639"}],"version-history":[{"count":7,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/2639\/revisions"}],"predecessor-version":[{"id":2647,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/2639\/revisions\/2647"}],"up":[{"embeddable":true,"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/pages\/267"}],"wp:attachment":[{"href":"https:\/\/www.cs.ubbcluj.ro\/~bufny\/wp-json\/wp\/v2\/media?parent=2639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}