FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT IOAN SLAVICI [604664]

FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT “IOAN SLAVICI”
TIMIȘOARA
UNIVERSITATEA “IOAN SLAVICI” TIMIȘOARA
FACULTATEA DE INGINERIE
DOMENIUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI
FORMA DE ÎNVĂȚĂMÂNT – ZI

LUCRARE DE LICEN ȚĂ

COORDONATOR ȘTIINȚIFIC
Prof. Univ. Dr. Ing. Ec. SLAVICI Titus

ABSOLVENT: [anonimizat]
2019

FUNDAȚIA PENTRU CULTURĂ ȘI ÎNVĂȚĂMÂNT “IOAN SLAVICI”
TIMIȘOARA
UNIVERSITATEA “IOAN SLAVICI” TIMIȘOARA
FACULTATEA DE INGINERIE
DOMENIUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI
FORMA DE ÎNVĂȚĂMÂNT – ZI

APLICA ȚIE JAVA -WEB DE TIP
PUZZLE LOGIC

COORDONATOR ȘTIINȚIFIC
Prof. Univ. Dr. Ing. Ec. SLAVICI Titus

ABSOLVENT: [anonimizat]
2019

SUMAR

Aplicația Nonogram Logic Puzzle este un tip de puzzle logic în care celulele unui tabel trebuie
colorate sau l ăsate albe în funcție de numerele din lateralul și de deasupra tabelului. Acestea sunt de
cele mai multe ori alb -negru și descriu o imagine binara , dar pot fi și colorate, în cazu l acesta numerele
„indiciu” ar fi colorate pentru a indica culoarea celulei pe care o descriu.

Aceste aplicații nu au nici o restricție din punct de vedere al mărimi și nu sunt obligatoriu
pătrate.

Această aplicație este utilizată pentru a demonstra abilit ățile dobândite în domeniul
programării de-a lungul semestrelor de studii la facultate , cât și in particular.

Prezenta lucrare cuprinde în detaliu aspecte teoretice și practice ale modalităților de concepere
și implementare a aplicației.

Lucrarea este structurată în 5 capitole, fiecare capitol la rândul lui conținînd mai multe
subcapitole.

Capitolul 1 – Introducere cuprinde prezentarea domeniului din care face parte proiectul, a
temei și structurar a aplicației.

Capitolul 2 – Tehnologii utilizate prezintă o introducere a noțiunilor legate de Internet și
aplica ții web, cum ar fi concept de protocoale, aplicații pentru internet, servere web și aplicații web,
pagini web statice și dinamice, limbajul de programare Java, mediul de programare IntelliJ IDEA ,
Stripes Framework, A pache Tomcat, Apache Maven , limbaje de markup și scripting precum HTML,
JavaScript și CSS. Limbajul Java este prezentat prin descrierea principalelor noțiuni ale acestui
limbaj. Prezentarea modului de includere a codului Java în cadrul codului HTML, utiliz ând JSP(Java
Server Pages) și rolul pe care îl are framework -ul Stripes în ușurarea procesului de creație . Este
prezentat și modul de utilizare al limbajului de markup CSS (Cascading Style Sheets).

Capitolul 3 – Specificații ale aplicației introduce conceptul studiului de caz, un joc de tip
puzzle logic . Capitolul oferă informații asupra tipului de joc Nonogram, metode de rezolvare,
contradicții, interfața cu utilizatorul și modalitatea de verificare a rezolv ării.

Capitolul 4 – Implementarea aplicației descrie în detali u aplicați a. Implementarea acest eia
a fost realizată folosind limbajul de programare Java împreun ă cu JSP (Java Server Pages) și
framework -ul Stripes , datorită portabilitatii acest ora, a resurselor aproape nelimitate care pot fi g ăsite
pe internet și a altor calit ăți precum ușurința implement ării.
Este prezentat modul de creare a interfeței, site -ul folosin d CSS pentru a crea sti lul acestei
pagini, datorit ă abilitații acestui format de a centraliza întregul aspect al unui site, permi țând
modificarea într-un singur loc, iar întregul site î și schimba aspectul.
De asemenea voi prezenta logica dinamic ă din spatele modului de “verifica re” a soluțiilor
jocul ui prezentat .
Prin combinarea acestor produse, aplicația realizată este foarte flexibilă, permi țând adăugarea
funcționalităților cu u șurință.

Capitolul 5 – Concluzii prezintă aprecierea mea asupra aplicației realizată și posibile viitoare
iterații ale acesteia.

DECLARAȚIE DE AUTENTICITATE
A
PROIECTULUI DE FINALIZARE A STUDIILOR

Titlul proiectului _____________________________________________________
___________________________________________________________________
___________________________________________________________________

Autorul proiectului ____________________________________________ _

Proiectul de finalizare a studiilor este elaborat în vederea susținerii examenului de finalizare
a studiilor organizat de către Facultatea _______________I.E.T.I._________________________ din
cadrul Universității din Oradea, sesiunea________iulie______ ___ a anului universitar
__2018___________.

Prin prezenta, subsemnatul (nume, prenume, CNP)_____________________
___________________________________________________________________
___________________________________________________________________,
decla r pe proprie răspundere că aceast proiect a fost scris de către mine, fără nici un ajutor neautorizat
și că nici o parte a proiectului nu conține aplicații sau studii de caz publicate de alți autori.
Declar, de asemenea, că în proiect nu există idei, tabe le, grafice, hărți sau alte surse folosite
fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,
Data Semnătur a

CUPRINS

Pagina

CAPITOLUL 1. INTRODU CERE ………………………….. ………………………….. ………………………….. ………………… 1
1.1. TEMA PROIECTULUI ………………………….. ………………………….. ………………………….. ………………………. 1
CAPITOLUL 2. TEHNOLO GII UTLIZATE ………………………….. ………………………….. ………………………….. … 3
2.1. PAGINI WEB ȘI SERVERE WEB………………………….. ………………………….. ………………………….. …………. 4
2.2. APACHE TOMCAT ………………………….. ………………………….. ………………………….. ………………………….. . 5
2.3. PAGINI WEB STATICE ȘI DINAMICE ………………………….. ………………………….. ………………………….. ….. 6
2.4. INTELLI J IDEA ………………………….. ………………………….. ………………………….. ………………………….. …. 7
2.5. LIMBAJUL JAVA ………………………….. ………………………….. ………………………….. ………………………….. … 7
2.6. MAVEN ………………………….. ………………………….. ………………………….. ………………………….. ……………. 9
2.7. FRAMEWORK -UL STRIPES ………………………….. ………………………….. ………………………….. ……………….. 9
2.8. LIMBAJUL JAVASCRIPT ………………………….. ………………………….. ………………………….. ……………… 11
2.9. LIMBAJUL HTML ………………………….. ………………………….. ………………………….. ……………………… 12
2.10. LIMBAJUL CSS ………………………….. ………………………….. ………………………….. ………………………….. 12
CAPITOLUL 3. SPECIFI CAȚII ALE APLICAȚIEI ………………………….. ………………………….. ……………….. 13
3.1. PREZENTARE “NONOGRAM ” ………………………….. ………………………….. ………………………….. ………….. 13
3.2. REZOLVAREA JOCULUI LO GIC ………………………….. ………………………….. ………………………….. ………… 13
3.3. CONTRADICȚII ………………………….. ………………………….. ………………………….. ………………………….. … 17
3.4. INTERFAȚA GRAFICĂ ………………………….. ………………………….. ………………………….. ……………………. 18
3.5. VERIFICAREA REZOLVĂRII ………………………….. ………………………….. ………………………….. ……………. 20
CAPITOLUL 4. IMPLEME NTAREA APLICAȚIEI ………………………….. ………………………….. ……………….. 21
4.1 ORGANIZAREA FIȘIERELO R ………………………….. ………………………….. ………………………….. ……………. 21
4.1.1. Structura logică a fișierelor ………………………….. ………………………….. ………………………….. …… 22
4.2 CREAREA APLICAȚIEI ( BACK END ) ………………………….. ………………………….. ………………………….. …. 23
4.2.1. Clasa Grid …. ………………………….. ………………………….. ………………………….. ………………………. 23
4.2.2. Clasa N otRandomNrGenerator ………………………….. ………………………….. ………………………….. . 24
4.2.3. Clasa TopTableGen ………………………….. ………………………….. ………………………….. ……………… 24
4.2.4. Clasa SideTableGen ………………………….. ………………………….. ………………………….. ……………… 25
4.2.5. Clasa HashMap ………………………….. ………………………….. ………………………….. ……………………. 26
4.2.6. Clasa RandomGridAction ………………………….. ………………………….. ………………………….. ……… 26
4.2.7. Clasa ForwardResolution ………………………….. ………………………….. ………………………….. ……… 27
4.2.8. Clasa Appl icationServlet ………………………….. ………………………….. ………………………….. ……….. 27
4.3 CREAREA INTERFEȚEI CU UTILIZATORUL (FRONT END ) ………………………….. ………………………….. ……. 28
4.3.1. Crearea layout.JSP ………………………….. ………………………….. ………………………….. ………………. 29
4.3.2. Crearea taglibs.JSP ………………………….. ………………………….. ………………………….. ……………… 30
4.3.3. Crearea randomGrid.JSP ………………………….. ………………………….. ………………………….. ……… 30
CAPITOLUL 5. CONCLUZ II ………………………….. ………………………….. ………………………….. …………………….. 35
5.1 CONCLUZII ………………………….. ………………………….. ………………………….. ………………………….. ……… 35
5.2 POSIBILITĂȚI DE DEZVO LTARE ………………………….. ………………………….. ………………………….. ……….. 35
BIBLIOGRAFIE ………………………….. ………………………….. ………………………….. ………………………….. ………………. I
LISTA FIGURILOR ………………………….. ………………………….. ………………………….. ………………………….. ……….. II
ANEX A I ………………………….. ………………………….. ………………………….. ………………………….. ………………… III – XI

1

CAPITOLUL 1.
INTRODUCERE

Jocurile logice contribuie nu doar la dezvoltarea logicii și puterii mentale, ci sunt și un mediu
interesant de desfășura procese educative eficient e care pot stimula creativitatea.

Spiritul concurenței jucăuș e este un impuls social mai străvechi decât cultura însăși și pătrunde
toate aspectele vieții. Ritualul s -a dezvoltat din joc sacru; poezia s -a născut în joc și a fost crescută în
joc; muzica și dansul erau expresii pure de joc. Trebuie să deducem că civilizația este, în primele sale
faze, jucată. Se ridică în joc și nu șovăie niciodată.1

Stilul de viață de astăzi pune accent tot mai mult pe resursele de internet. Cu scopul de a crește
eficiența, procesul educațional ar trebui să includă și resursele de internet.2

Introducerea gamificării în sala de clasă este o provocare reală abordat ă tot mai mult de către
profesori . Primele reacții au mers de la "dar, domnule/doamnă profesor, a ți spus că nu ni se permite
să jucăm jocuri în timpul cursurilor " la "cine a mai auzit vreodată să se joace jocuri într -o clasă de
matematică în liceu ". Problema care trebuie rezolvată este de a aborda lipsa interesul ui elevilor de a
memora ceva simplu , de exemplu cele mai des utilizate puteri ale numerelor reale . O rezolva re a
aceast ei problem e a fost testată prin intermediul platformei Kahoot! . La redare, întrebările sunt afișate
pe ecran și elevilor li se cere să apese butonul corect. De la joc la joc, există opțiunea de a amesteca
ordinea întrebărilor și a răspunsurilor și de asemenea, opțiu nile de premiere a celui mai rapid răspuns
și a secvențelor de răspunsuri corecte. De asemenea, creatorii de jocuri pot vedea un raport de joc
care conține statisticile jocului.3

Dezvoltarea rapidă din ultima perioadă a resurselor software și hardware din domeniul
tehnologiei informației oferă beneficiul unei comunicare mai bune și al unui acces mult mai rapid la
toate categoriile de informații. Aceast ă evolu ție a dat cale liber ă unei noi industrii, industria jocurilor
în mediu digital .

Prezen ta lucrare cuprinde în detaliu aspecte teoretice și practice ale modalităților de concepere
și implementare a aplicației.

Lucrarea este structurată în 5 capitole, fiecare capitol la rândul lui având mai multe
subcapitole.

1.1.Tema proiectului
Evoluția informaticii a avut un impact masiv asupra omenirii. De la ușurarea acesului la
informație pentru orice categorie de vârstă, la generarea de noi profesii și locuri de muncă bazate pe
funcționarea calculatoarelor, prezența tehnologiei în viața omul ui este greu de omis în ziua de azi.

1 Johan Huizinga “Homo Ludens”, p.1, Taylor & Francis 1949
2 Titus Slavici “ Re-shaping Education: Role of Internet Resources in Increasing the Efficiency of the Educational Process” vol.9 2018
3 Titus Slavici “ Re-shaping Education: Role of Internet Resources in Increasing the Efficiency of the Educational Process” vol.9 2018

2

Să ne gândim numai la bănci, casierii, hoteluri, magazine, toate folosesc calculatoare pentru
a-și ține evidenț ele, trasfer de date și multe altele.

Majoritatea oamenilor folosesc calculatoare pe care au programe care le u șureaz ă munca,
comunicarea și studiul, dar de asemenea vor avea instalate și programe de joc, pentru a se destinde,
pentru a avea un moment de recreere.

În func ție de preferinte , există jocuri care s ă satisfac ă nevoia de „pauza” a fiecăruia.

Jocurile abstracte sunt acele jocuri strategice sau de logic ă unde tema în sine nu este in prim
plan fa ță de experien ța de a juca . Acestea mai sunt cunoscute și sub numele de „perfect knowl edge
games” , refer indu-se la faptu l că orice participant are o înțelegere complet ă a regulilor și a abili tăților
sale, iar î n cazul celor cu mai mult de un juc ător, a adversarului.

Jocuri abstracte cu mai mult de un participant sunt : șah, table, dame, go, moar ă, etc. De
asemenea exist ă și categoria cu un sigur juc ător cum sunt: sudoku, minesweeper, nonogram, etc.

Aplica ția Nonogram Logic Puzzle este un tip de puzzle logic în care celulele unui tabel trebuie
colorate sau l ăsate albe în func ție de numerele din lateralul și de deasupra tabelului. Acestea sunt de
cele mai multe ori alb -negru și descriu o imagine binara, dar pot fi și colorate, în cazu l acesta numerele
„indiciu” ar fi colorate pentru a indica culoarea celulei pe care o descriu.

Aceste aplica ții nu au nici o restric ție din punct de vedere al m ărimi și nu sunt obligatoriu
pătrate.

Aceast ă aplicaț ie este utilizat ă pentru a demonstra abilit ățile dobândite în domeniul
programării de-a lungul semestrelor de studii la facultate , cât și in particular.

3

CAPITOLUL 2.
TEHNOLOGII UTILIZATE

Calculatorul a devenit parte integrantă vieții, majoritatea oamenilor folosindul din momentul
în care se trezesc dimineața, pe timpul zilei în diferitele domenii de activitate, cât și seara cu
vizualizarea unui film, iar tot mai mulți sunt cei care stau neclintiți în fața calculatoarelor, navighează
prin rețeaua de calculatoare ce acoperă întreaga lume, călătoresc și activează în spațiul cibernetic.

Jocurile și jucatul este unul dintre mijloa cele de bază a exprim ării creativității și inteligenței ,
influențate de mediul cultural relevant. Jocurile au găsit o expresie naturală în epoca computerizată
contemporană , unde comunic area este din ce în ce mai moderată de tehnologia de calcul. Utilizarea
pe scara largă a jocurilor electronice duce la dezvoltări conceptuale și politice care trebuie examinate
și înțelese. Oamenii implicați în proiectarea, administrarea, vânzarea etc. de jocuri pe calculator se
confruntă c u situații și aspecte noi în fiecare zi, ce țin de psihologie, impact social, impact economic,
și criminalitate printre altele, și nu sunt dependente de experiența generațiilor anterioare.

Internetul este o gigantică rețea de calculatoare, mai precis, o rețea de rețele de calculatoare.
Dezvoltarea internetului a fost foarte rapidă, în anul 1985, aproximativ 2000 de calculatoare erau
legate la precursorul internetului NSFNET. În momentul de față există zeci, chiar sute de milioane de
calculatoare conectat e în întreaga lume, care permit accesul în rețea a unui număr foarte mare de
oameni. În fiecare an, comunitatea primește milioane de noi utilizatori care doresc s ă activeze pe
internet.

Internetul în România a pătruns relativ încet, multă vreme fiind considerat un lux inutil. Dar
acum, pentru uz personal, mai ales datorită costurilor foarte mici ale serviciilor telefonice, este foarte
larg răspândit . Din punct de vedere al infrastructurii lucrurile au avansat destul de mult, iar din punct
de vedere al resurselor informatice disponibile evoluția pare sa fie de neoprit.

Majoritatea companiilor și chiar unele structuri administrative au ințeles deja necesitatea unei
prezenț e în lumea v irtuală.

În ultimii ani, adăugarea de mecanisme de joc la serviciile non -game a câștigat o atenție relativ
mare. Discuțiile populare conectează gamificarea cu marketing -ul reușit și creșterea profitabilității
prin implicarea mai mare a clienți lor. Un experiment pe teren a gamific at un serviciu utilitar de
tranzacționare peer -to-peer prin implementarea mecanismului de joc cu insigne pe care utilizatorii le
pot câștiga prin îndeplinirea unor variet ăți de sarcini. Au fost 3234 de utilizatori care au fost repartizați
aleatoriu în grupuri de control și au fost supuși diferitelor versiuni ale sistemului de insigne într -un
design de 2 × 2. Rezultatele arată că simpla punere în aplicare a mecanismelor de gamificare nu duce
automat la creșteri semnificat ive în activitatea de utilizare a serviciului utilitar studiat, totuși acei
utilizatori care și -au monitorizat în mod activ propriile insigne și cele ale altora din studiu au arătat o
activitate proprie crescută.4

Pentru a ne da seama ce ne rezervă viitorul în privința rețelei Internet, trebuie să înțelegem
tipurile de tehnologii elaborate de experții implicați în dirijarea rețelei și aplicațile practice ale
acestora.

4 Gordana Dodig -Crnkovic and Thomas Larsson “Game Ethics” vol.4. 2005

4

▪ Colaborare
În dezvoltarea internetu lui s-au făcut mari progrese în domeniul conferințelor video la distanțe
marii. De exemplu, există tehnologii care permit colaborarea la anumite documente prin intermediul
rețelei. De asemenea putem lua parte la conferințe audio și chiar să folosim o platf ormă electronică
pentru a ne expune schemele și proiectele, astfel încât acestea să poată fi vizualizate de către toți
participanții.

▪ Obiecte
Creatorii paginilor Web nu mai sunt limitați la texte și grafică, așa incât putem fi siguri că
vom găsi o mulț ime de elemente interesante pe Web și cu o viteză foarte mare de accesare. Câteva
inovații recente permit chiar și distribuirea de programe prin Web.

▪ Mesaje e -mail complexe
Nu mai suntem limitați la mesaje simple de text. Limbajul HTML permite formata rea
acestora, cu caractere aldine și cursive, și cu diferite formate de paragraf. Mai mult decât atât, putem
atașa mesaje de e -mail, imagini și alte elemente multimedia .

2.1. Pagini Web și Servere Web

O pagină Web este un document potrivit pentru a acționa ca o resursă web pe World Wide
Web. Pentru a afișa grafic o pagină web, este necesar un browser, cum ar fi Internet Explorer, Mozil la
Firefox, Google Chrome, etc. Acesta este un tip de software care poate prelua pagini web de pe
Internet. Când este accesat de un browser, acesta poate fi afișat ca pagină web pe un monitor sau pe
un dispozitiv mobil. Paginile web tipice sunt documente hipertext care conțin hyperlink -uri, adesea
denumite pur si simplu link -uri, pentr u navigarea către alte pagini web.

Termenul de pagină web se referă de obicei la ceea ce este vizibil, dar se poate referi și la
conținutul codului sursă în sine, care este de obicei un fișier text ce conține hipertext scris în HTML
sau într -un limbaj de markup comparabil. Cele mai multe browsere web actuale includ posibilitatea
de a vizualiza codul sursă. Navigatoarele web vor avea în mod frecvent acces la mai multe elemente
de resurse web, cum ar fi foi de stil (CSS), scripturi și imagini, în timp ce prezintă fiecare pagină web.

Un site web va conține în mod obișnuit un grup de pagini web care sunt conectate împreună
sau pot avea o altă metodă coerentă de navigare. Cea mai importantă pagină web de pe un site web
este pagina index. În funcție de setările serverului web, pagina index poate avea orice nume, dar cele
mai comune nume sunt index.html și index.php. Când un browser accesează pagina de pornire a unui
site web sau orice adresă URL care indică m ai degrabă un director decât un anumit fișier, serverul
web servește paginii index. Dacă în cadrul configurației nu este definită nicio pagină de index sau
dacă pe server nu există un astfel de fișier, va fi afișată o eroare sau o listă de directoare în br owser.

Site-urile Web și paginile web care le compun sunt de obicei găsite cu ajutorul unui motor de
căutare, dar pot primi trafic de la rețele de socializare și alte surse. Într -o rețea, un browser web poate
prelua o pagină web dintr -un server de la dist anță. Browserul web utilizează Hypertext Transfer
Protocol (HTTP) pentru a face astfel de cereri către server. Serverul web poate restricționa accesul la
o rețea privată (de exemplu, un intranet corporativ).

O pagină web statică este livrată exact așa cum este stocată, ca și conținut web în sistemul de
fișiere al serverului. În schimb, o pagină web dinamică este generată de o aplicație web, condusă de

5
software -ul de pe server, care rulează pe partea clientului (în browserul web) sau ambele. Paginile
web d inamice ajută browserul (clientul) să îmbunătățească pagina web prin modificarea de către
utilizator a serverului.

Un server web este un software sau un hardware de tip server dedicat executării software –
ului respectiv, care poate satisface cererile clien ților World Wide Web. Un server web în general, va
conține unul sau mai multe site -uri Web. Cererile de rețea primate se proceseaza prin HTTP și alte
câteva protocoale.5

Funcția principală a unui server web este de a stoca, procesa și livra pagini web căt re clienți.6
Comunicarea dintre client și server are loc utilizând Hypertext Transfer Protocol (HTTP). Paginile
livrate sunt cel mai frecvent documente HTML, care pot include imagini, foi de stil (cum ar fi CSS)
și scripturi în plus față de conținutul textului.

Un agent utilizator, de obicei un browser web sau un crawler web, inițiază comunicarea făcând
o solicitare pentru o anumită resursă utilizând HTTP, serverul răspunde cu conținutul acelei resurse
sau cu un mesaj de eroare dacă nu poate face acest lucru. Resursa este de obicei un fișier real pe
spațiul de stocare secundar al serverului, dar acest lucru nu este neapărat cazul și depinde de modul
în care este implementat serverul web.

În timp ce funcția principală este de a oferi conținut , o implementare completă a HTTP include
și modalități de primire a conținutului de la clienți. Această caracteristică este utilizată pentru
trimiterea formularelor web, inclusiv încărcarea fișierelor.

Multe servere web generice suportă, de asemenea, scri pting de la server folosind pagini Active
Server (ASP), PHP (Hypertext Preprocessor) sau alte limbi de scripting. Aceasta înseamnă că
comportamentul serverului web poate fi scris în fișiere separate, în timp ce software -ul de server
propriu rămâne neschimb at. De obicei, această funcție este utilizată pentru a genera dinamic
documente HTML ("on -the-fly") spre deosebire de returnarea documentelor statice. Primul este
utilizat pentru recuperarea sau modificarea informațiilor din bazele de date. Acesta din urmă este de
obicei mult mai rapid și mai ușor de memorat, dar nu poate oferi conținut dinamic.

Serverele web se găsesc în mod frecvent încorporate în dispozitive precum imprimante,
routere, camere web și în aparate care deservesc numai o rețea locală. Server ul web poate fi apoi
utilizat ca parte a unui sistem de monitorizare sau administrare a dispozitivului în cauză. Aceasta
înseamnă, de obicei, că nu trebuie instalat niciun software suplimentar pe computerul client, deoarece
este necesar doar un browser web (care este acum inclus în majoritatea sistemelor de operare).

2.2. Apache Tomcat

Apache Tomcat (denumit și Tomcat Server) implementează mai multe specificații Java EE,
inclusiv Java Servlet, Pagini JavaServer (JSP), Java EL și WebSocket și oferă un mediu se rver HTTP
"pur Java" în care poate rula codul Java.

Tomcat este dezvoltat și întreținut de o comunitate deschisă de programatori, sub auspiciile
Apache Software Foundation, lansată sub licența Apache License 2.0 și este un software open source.

5 Webdevelopersnotes. "What is web server?" . 1 Februar ie 2019 .
6 Patrick Killelea “Web performance tuning” (a2 -a editie) 2002.

6
Catalina

Catalina este containerul de servlet al lui Tomcat si implementează specificațiile Sun
Microsystems pentru servlet și Pagini JavaServer (JSP). În Tomcat, un element Realm reprezintă o
"bază de date" cu nume de utilizator, parole și roluri (simila re grupurilor Unix) atribuite acelor
utilizatori. Implementările diferite ale Realm permit Catalina să fie integrată în medii în care astfel
de informații de autentificare sunt deja create și întreținute și apoi să utilizeze aceste informații pentru
a impl ementa Container Managed Security așa cum este descris în Specificația Servlet.7

Aplica ție web

De asemenea, a fost adăugată o îmbunătățire a aplicațiilor web bazate pe utilizator și sistem,
în scopul de a adăuga suport pentru implementare în întreaga gamă de medii. De asemenea, încearcă
să gestioneze sesiunile, precum și aplicațiile din rețea.

2.3. Pagini Web Statice și Dinamice

Pagina web statică (uneori numită pagină “flat” sau pagină staționară) este o pagină web care
este livrată browser -ului web al utilizatorului exact așa cum este stocată8, spre deosebire de paginile
web dinamice generate de o aplicație web.

În consecință, o pagină web statică afișează aceleași informații pentru toți utilizatorii, din toate
contextele, acestea fiind supuse capacităților moderne ale unui server web de a negocia tipul sau
limba conținutului documentului, în cazul în care astfel de versiuni sunt disponibile și serverul este
configurat să facă acest lucru.

Paginile web statice sunt adesea documente HTML stocate ca fișiere într -un sistem de fișiere
și puse la dispoziție de serverul web prin HTTP (totuși adresele URL care se termină cu ".html" nu
sunt întotdeauna statice). Cu toate acestea, interpretările libere ale termenului ar putea include pagini
web stocate într -o bază de date și ar putea chiar să includă pagini formate folosind un șablon și servite
printr -un ser ver de aplicații, atâta timp cât pagina este neschimbată și prezentată în esență ca fiind
stocată.

Navigarea hipertext clasică, numai cu HTML sau XHTML, oferă conținut "static", ceea ce
înseamnă că utilizatorul solicită o pagină web și vede doar pagina și informațiile de pe acea pagină.

Totuși, o pagină web poate oferi și o experiență "live", "dinamică" sau "interactivă"
utilizatorului. Conținutul (textul, imaginile, câmpurile de formate etc.) dintr -o pagină web se poate
schimba, ca răspuns la diferite co ntexte sau condiții.

Există două moduri de a crea efectul de pagina dinamica :

Folosirea script -urilor de pe partea clientului pentru a schimba comportamentele interfeței
într-o anumită pagină web, ca răspuns la acțiunile mouse -ului sau ale tastaturii sau la evenimentele
de sincronizare specificate. În acest caz, comportamentul dinamic apare în cadrul prezentării.9

7 http://www.tomcat.apache.org "Apache Tomcat Configuration Reference – The Realm Component" 1 Noiembrie 2013
8 Steven Melendez "The Difference Between Dynamic & Static Web Pages" 10 August 2018
9 Brent W Benson “JavaScript” 1999

7
Utilizând script -urile de pe server pentru a schimba sursa paginii furnizate, cat timp
utulizatorul se afla între pagini, ajustâ nd secvența sau reîncărcând paginile Web sau conținutul web
furnizat browserului. Răspunsurile serverului pot fi determinate de condiții, cum ar fi datele dintr -un
formular HTML afișat, parametrii din URL, tipul de browser utilizat, trecerea timpului, o ba ză de
date sau starea serverului.

Paginile web care utilizează scripting pe partea clientului trebuie să utilizeze tehnologia de
prezentare numită “rich interfaced pages”. Limbile de scripting de pe partea clientului, cum ar fi
JavaScript sau ActionScript , utilizate pentru tehnologiile Dynamic HTML (DHTML) și respectiv
Flash, sunt utilizate frecvent pentru a orchestra tipurile de suporturi (sunet, animații, schimbarea
textului etc.). Scripting -ul permite, de asemenea, utilizarea script -urilor la distanță, o tehnică prin care
pagina DHTML solicită informații suplimentare de la un server, folosind un cadru (framework)
ascuns, XMLHttpRequests sau un serviciu web.

Paginile web care utilizează scripting -urile de pe server sunt adesea create cu ajutorul unor
limbi de la server, cum ar fi JSP, PHP, Perl, ASP, ASP.NET, ColdFusion și alte limbi. Aceste limbi
de server utilizează în mod obișnuit interfața comună a gateway -ului (CGI) pentru a genera pagini
web dinamice.

2.4. Intellij IDEA

Intellij IDEA este un mediu de programare sau un mediu integrat de dezvoltare (IDE) utilizat
pentru programare în limbajul Java. Acest mediu a fost creat de compania JetBrains( cunoscut înainte
ca IntelliJ) și este disponibil cu licenta de Appache 2 ediția de comunitate sau cu ediția comercială.
Ambele pot fii utilizate pentru dezvoltarea software.10

2.5. Limbajul JAVA

Java este un limbaj de programare cu scop general, care este bazat pe clasă, orientat pe obiecte
(deși nu este o limbă OO pură, deoarece conține tipuri primitive) ș i proiectat să aibă cât mai puține
dependențe de implementare posibil. Este destinat să permită dezvoltatorilor de aplicații să "scrie o
dată, să ruleze oriunde" (WORA/Write Once Run Anywhere),11 ceea ce înseamnă că codul Java
compilat poate rula pe toate p latformele care suportă Java fără a fi nevoie de recompilare.12

Aplicațiile Java sunt în mod obișnuit compilate ca "bytecode" care pot rula pe orice mașină
virtuală Java (JVM/Java Virtual Machine), indiferent de arhitectura de bază a calculatorului. Sintax a
Java este similară cu C și C++, dar are mai puține facilități Low -level decât oricare dintre ele.
Începând cu anul 2018, Java a fost una dintre cele mai populare limbi de programare utilizate în
conformitate cu GitHub, în special pentru aplicațiile web c lient-server, cu un 9 milioane de
dezvoltatori raportati.

Unul dintre obiectivele de proiectare ale limbajului Java este portabilitatea, ceea ce înseamnă
că programele scrise pentru platforma Java trebuie să ruleze în mod similar pe orice combinație de
hardware și sistem de operare cu suport adecvat pentru timpul de rulare. Acest lucru se realizează
prin compilarea codului Java la o reprezentare intermediară denumită Java bytecode, în loc de codul
mașinii specific arhitecturii. Instrucțiunile Java bytecode sunt similare cu codul mașinii, dar sunt

10 http://www.jetbrains.org “IntelliJ Opend -Source Project – Confluence”
11 Computer Weekly “Write Once, Run Anywhere?” 2 Mai 2002
12 Oracle “12 Design Goals of the Java Programming Language” 1 Ianuarie 1999

8
intenționate să fie executate de o mașină virtuală (VM) scrise special pentru hardware -ul gazdă.
Utilizatorii finali folosiind în mod obișnuit un mediu de rulare Java (JRE/ Java Runtime Environment)
instalat pe pro pria mașină pentru aplicații Java separate sau într -un browser web pentru aplicații Java.

Limbajul Java este bazat pe 5 principii care au fost respectate încă din primele variante:
1. Simplu, orientat pe obiect si familiar
2. Robust si sigur
3. Portabil si cu o arhitectura neutră
4. Executat cu performata optima
5. Dimanic, interpretat si cu fire de execuție multiple

Sintaxa acestui limbaj este în mare parte influnențată de C++. Spre deosebire de C ++, care
combină sintaxa pentru programare structurată, generică și or ientată pe obiecte, Java a fost construit
aproape exclusiv ca un limbaj orientat pe obiecte. Tot codul este scris în interiorul clasei și fiecare
element de date este un obiect, cu excepția tipurilor de date primitive (adică numere întregi, numere
rațional e, valori booleene și caractere), care nu sunt obiecte din motive de performanță. Java
reutilizează câteva aspecte populare ale limbajului C ++ (cum ar fi metoda printf).

Spre deosebire de C ++, Java nu suporta supraîncărcarea operatorului sau moștenirea multiplă
pentru clase, deși moștenirea multiplă este acceptată pentru interfețe.

Java utilizează comentarii similare cu cele din C ++. Există trei stiluri diferite de comentarii:
un stil de linie marcat cu două tăieturi (//), un stil cu mai mul te linii deschis cu / * și închis cu * /, iar
stilul de comentare Javadoc a fost deschis cu / ** și închis cu * / . Stilul de comentare Javadoc permite
utilizatorului să pornească executabilul Javadoc pentru a crea documentația pentru program și poate
fi citită de unele medii de dezvoltare integrate (IDE), cum ar fi Eclipse, pentru a permite
dezvoltatorilor să acceseze documentația din cadrul IDE.

Un servlet Java procesează sau stochează o clasă Java în Java EE conformă cu Java Servlet
API, un standard pen tru implementarea claselor Java care răspunde la solicitări. Servlet -urile ar putea
să comunice pe orice protocol client -server, dar sunt cel mai des folosite cu HTTP. Astfel, servletul
este adesea utilizat ca stenogramă pentru "servletul HTTP"13. Astfel, u n dezvoltator de software poate
folosi un servlet pentru a adăuga conținut dinamic unui server web utilizând platforma Java.
Conținutul generat este de obicei HTML, dar poate folosi și alte date, cum ar fi XML și mai frecvent
JSON. Servlet -urile pot mențin e starea în variabilele de sesiune în multe tranzacții ale serverului
utilizând cookie -urile HTTP sau maparea URL -urilor.

API-ul Java servlet a fost, într -o oarecare măsură, înlocuit de două tehnologii Java standard
pentru servicii web:

Web RESTful (J AX-RS 2.0) util pentru serviciile AJAX, JSON și REST.

Web XML (JAX -WS) util pentru SOAP Web Services.

Pentru a implementa și rula un servlet, trebuie folosit un container web. Un container web
(cunoscut și ca un container de servlet) este în esență co mponenta unui server web care
interacționează cu servlet -urile. Containerul web este responsabil pentru gestionarea ciclului de viață
al servlet -urilor, maparea unei adrese URL la un anumit servlet și asigurarea că solicitantul de adrese
URL are drepturile de acces corecte.

13 http://www.novocode.com “Servlet Essentials” 18 Decembrie 2017

9
API-ul Servlet, conținut în ierarhia javax.servlet a pachetului Java, definește interacțiunile
containerului web și ale unui servlet.14

Un Servlet este un obiect care primește o solicitare și generează un răspuns bazat pe această
solicitare. Pachetul de bază Servlet definește obiectele Java pentru a reprezenta cererile și răspunsurile
servletului, precum și obiectele care reflectă parametrii de configurare ai servletului și mediul de
execuție. Pachetul javax.servlet.http de finește subclasele specifice HTTP ale elementelor servlet
generice, inclusiv obiectele de gestionare a sesiunii care urmăresc multiple cereri și răspunsuri între
serverul web și un client. Servlet -urile pot fi ambalate într -un fișier WAR ca o aplicație web .

2.6. Maven

Maven este un instrument software pentru gestionarea și automatizarea proiectelor Java. Este
similar ca funcționalități cu Apache Ant, dar se bazează pe concepte diferite. Maven este găzduit de
Fundația Software Apache, unde făcea parte din Proie ctul Jakarta. Maven utilizează o “construcție”
cunoscută sub numele de Modelul Obiect de Proiect (POM) pentru a descrie proiectul software
construit, dependențele fata de alte module, componente externe și ordinea de implementare. Dispune
de obiective pred efinite pentru îndeplinirea unor sarcini bine definite, cum ar fi compilarea codului
și ambalarea acestuia. Maven descarcă în mod dinamic bibliotecile Java și plug -in-urile Maven din
unul sau mai multe depozite. Maven oferă suport integrat pentru recuperar ea fișierelor din Maven 2
Central Repository și alte depozite Maven și poate încărca artefacte în depozite specifice după o
construcție reușită. Un cache local de artefacte descărcate acționează ca mijloc principal de
sincronizare a rezultatelor proiectelo r într -un sistem local. Maven este construit folosind o arhitectură
bazată pe plugin -uri care îi permite să utilizeze orice aplicație controlată prin intrarea standard.15

2.7. Framework -ul Stripes

Ca dezvoltatori Java, doriți să vă valorificați cunoștințele, bogăția de biblioteci și instrumente.
Dar când vine vorba de dezvoltarea web, multe cadre(Framewor -uri) par prea complexe. Sunt dificile
de învațat și este greu să -i utilizați în asa mod încat să facă exact ceea ce aveți nevoie din cauza
designului lor "c utie închisa". Stripes aduce simplitatea înapoi la dezvoltarea web -ului Java. Poate fi
utilizat în câteva minute, și puteți merge mult cu câteva concepte simple. Veți petrece timpul în
dezvoltarea aplicației dvs, nu configurând și reconfigurând mediul și t oate elementele necesare.
Deoarece Stripes este foarte transparent, veți înțelege exact ce se întâmplă de la solicitare la răspuns.
Popularitatea Stripes continuă să crească datorită designului curat și a extensibilității sale. Datorită
designului său desc his, Stripes vă permite să vă integrați cu ușurință instrumentele preferate:
bibliotecile de etichete, cadrele AJAX, soluțiile ORM, injectoarele de dependență și multe altele.

Stripes este un cadru (Framework) de aplicații web open source bazat pe modelul model –
view -controller (MVC). Scopul său este să fie un cadru mai ușor decât Struts, prin utilizarea
tehnologiilor Java, cum ar fi adnotările și genericele care au fost introduse în Java 1.5, pentru a atinge
"convențional peste configurație". Acest lucru p une accentul pe ideea că un set de convenții simple
utilizate în întreg cadrul reduc cheltuielile de configurare. În practică, aceasta înseamnă că aplicațiile
Stripe au nevoie de mult mai putine fișiere de configurare, reducând astfel activitatea de dezvol tare
și mentenanța.16

14 http://www.novocode.com “Servlet Essentials” 18 Decembrie 2017
15 Frederic P.Miller, Ag nes F. Vandome, John McBrewster “Apache Maven” 201 0
16 Frederic Daoud “Stripes: … and Java Web Development is Fun Again” 27 Octombrie 2008.

10

Stripes "ActionBean" este un obiect care primește datele trimise în cereri și procesează
intrarea utilizatorului. Defineste in acelasi timp proprietățile formularului și logica de procesare a
acestuia. Stripes descoperă automat Action Beans la timpul de desfășurare prin scanarea căii de
clasă(Classpath) a aplicației web. Pachetul ActionResolver.Packages init -param al filtrului Stripes (în
web.xml) stabilește una sau mai multe rădăcini de pachete.

Rezoluția este un obiect creat ca răspu ns la cererea procesată. O rezoluție poate transmite la
o pagină JSP, poate transmite date sau poate returna un mesaj de eroare. Rezoluțiile sunt returnate de
metodele Handler ale ActionBeans

Exempl u de cod :

HelloAction.java
import net.sourceforge.stripes.action.ActionBean ;
import net.sourceforge.stripes.action.ActionBeanContext ;
import net.sourceforge.stripes.action.DefaultHandler ;
import net.sourceforge.stripes.action.ForwardResolution ;
import net.sourceforge.stripes.action.Resolution ;
import net.sourceforge.stripes.action.UrlBinding ;

@UrlBinding ("/hello-{name=}.html" )
public class HelloAction implements ActionBean {
private ActionBea nContext context ;
private String name ;

public ActionBeanContext getContext () {
return context;
}

public void setContext (ActionBeanContext context ) {
this.context = context;
}

public void setName(String name ) {
this.name = name;
}

public String getName() {
return name;
}

@DefaultHandler
public Resolution view() {
return new ForwardResolution (“/WEB-INF/HelloWorld .jsp”);
}

11
}

HelloWorld.jsp
<html><body>
Hello ${actionBean.name} <br/>
<br/>
<s:link beanclass= "HelloAction" ><s:param name="name" value="John" />Try
again </s:link><br>
</body></html>

2.8. Limbajul JavaScript

JavaScript abreviat ca JS, este un limbaj de programare la nivel înalt, interpretat. JavaScript
are o sintaxă de tip curly -bracket (acolada), tastare dinamică, orientată pe obiecte, bazată pe
prototipuri și funcții de primă clasă.17

Alături de HTML și CSS, JavaScript este una dintre tehnologiile de bază ale World Wide
Web. JavaScript facilitează pagini web interactive și este o parte esențială a aplicațiilor web. Marea
majoritate a site -urilor web le utilizează, iar browserele web majore au un motor dedicat JavaScript
pentru al executa.18

Ca limbaj cu mai multe paradigme, Ja vaScript acceptă stiluri de programare bazate pe
evenimente, funcționale și imperative (inclusiv orientate pe obiect sau bazate pe prototipuri). Are
API-uri pentru a lucra cu text, matrice, date, expresii regulate și DOM, însă limba în sine nu include
niciun I/O (Input/Output), cum ar fi facilități de rețea, stocare sau grafică. Se bazează pe mediul gazdă
în care este încorporat pentru a oferi aceste caracteristici.

Inițial, numai în partea clientului implementată în browserele web, motoarele JavaScript su nt
acum încorporate în multe alte tipuri de software -gazdă, inclusiv în servere web, în servere de baze
de date și în programe non -web, cum ar fi procesoare de text și software PDF, medii care fac
JavaScript disponibil pentru scrierea aplicațiilor mobile ș i desktop.

Termenii "Vanilla JavaScript" și "Vanilla JS" se referă la JavaScript, care nu este extins de
niciun cadru (Framework) sau de alte biblioteci. Scripturile scrise în Vanilla JS sunt simple cod
JavaScript.

Deși există similitudini între JavaScri pt și Java, inclusiv numele limbii, sintaxa și bibliotecile
standard respective, cele două limbi sunt distincte și diferă foarte mult în ceea ce privește designul.
JavaScript a fost influențat de limbi de programare, cum ar fi Self și Scheme. Formatul de s erializare
JSON, utilizat pentru a stoca structurile de date în fișiere sau pentru a le transmite în rețele, se bazează
pe JavaScript.

17 David Flanagan “JavaScript – The Definitive guide”
18 http://vanilla -js.com “Vanilla JS” 15 Decembrie 2017

12
2.9. Limbajul HTML

Hypertext Markup Language (HTML) este limba standard de marcare a documentelor
proiectate pentru a fi afișate într -un browser web. Acesta poate fi asistat de tehnologii cum ar fi foi
de stil cascadă (CSS) și limbaje de scripting, cum ar fi JavaScript.

Browserele web primesc documente HTML de la un server web sau de la un depozit local și
fac documentel e în pagini web multimedia. HTML descrie structura unei pagini web semantic și
include indicii pentru apariția documentului.

Elementele HTML sunt blocurile de bază ale paginilor Web. Cu elemente HTML, imaginile
și alte obiecte, cum ar fi formulare interac tive, pot fi incorporate într -o pagină randată. HTML oferă
un mijloc de a crea documente structurate prin desemnarea unei semantici ierarhizate pentru text, cum
ar fi titluri, paragrafe, liste, linkuri, citate și alte elemente. Elementele HTML sunt delimit ate prin
etichete(Tags), scrise cu paranteze unghiulare. Etichete precum <img /> și <input /> introduc direct
conținutul în pagină. Alte etichete precum <p> înconjoară și furnizează informații despre textul
documentului și pot include și alte etichete ca s ubelemente. Browserele nu afișează etichetele HTML,
ci le folosesc pentru a interpreta conținutul paginii.

HTML poate încorpora programe scrise într -o limbă de scripting, cum ar fi JavaScript, care
afectează comportamentul și conținutul paginilor web. Inc luderea CSS definește aspectul și aspectul
conținutului. Consorțiul World Wide Web (W3C) actualul întreținător al standardelor CSS, a
încurajat utilizarea CSS peste codul explicit de prezentare HTML începând din 1997.

2.10. Limbajul CSS

Foi de stil cascadă (CS S/ Cascading Style Sheets) este un limbaj de foi de stil utilizat pentru
descrierea aspectului unui document scris într -un limbaj de markup precum HTML. CSS este o
tehnologie de bază a World Wide Web, alături de HTML și JavaScript.19

CSS este conceput pent ru a permite separarea prezentării și a conținutului, inclusiv aspectul,
culorile și fonturile. Această separare poate îmbunătăți accesibilitatea conținutului, poate oferi mai
multă flexibilitate și control în specificațiile vizuale, permite mai multor pag ini web să utilizeze o
formatare comuna prin specificarea CSS relevantă într -un fișier .css separat și reducerea complexității
și repetării în conținutul structural.

Separarea formatării și a conținutului face, de asemenea, fezabilă prezentarea aceleiași pagini
de marcare în diferite stiluri pentru diferite metode de randare, cum ar fi pe ecran, prin imprimare,
prin voce (prin intermediul browserului bazat pe vorbire sau cititorului de ecran) dispozitive tactile.
CSS are, de asemenea, reguli de formatare a lternativă dacă conținutul este accesat pe un dispozitiv
mobil.

Numele de cascad ă provine de la schema de prioritate specificată pentru a determina ce regulă
de stil se aplică dacă mai multe reguli se potrivesc cu un anumit element. Această schemă priorit ară
este previzibilă.

În plus față de HTML, alte limbi de marcare susțin utilizarea CSS, inclusiv XHTML, XML
simplu, SVG și XUL.

19 David Flanagan “JavaScript – The Definitive guide”

13

CAPITOLUL 3.
SPECIFICAȚIILE APLICAȚIEI

3.1. Prezentare Nonogram

Nonogramele, cunoscute și ca Picros s, sunt puzzle -uri logice de imagine în care celulele dintr –
o rețea trebuie colorate sau lăsate necompletate în funcție de numerele din partea laterală si superioară
a grilajului pentru a descoperi o imagine ascunsă. În acest tip de puzzle, numerele sunt o formă d e
tomografie discretă care măsoară câte linii neîntrerupte ale pătratelor umplute există în orice rând sau
coloană dată. De exemplu, un indiciu al "4 8 3" ar însemna că există seturi de patru, opt și trei pătrate
umplute, în acea ordine, cu cel puțin un pă trat gol între grupurile succesive.

Aceste puzzle -uri sunt deseori negre și albe – descriind o imagine binară – dar ele pot fi, de
asemenea, colorate. Dacă sunt colorate, indicii numărului sunt de asemenea colorați pentru a sugera
culoarea pătratelor. Dou ă numere colorate diferit pot avea un spațiu între ele , dar nu este obligatoriu .
De exemplu, un patru negru urmat de un doi roșu ar putea însemna patru cutii negre, câteva spații
goale și două cutii roșii sau ar putea însemna pur și simplu patru cutii negr e urmate imediat de cele
două roș ii.

Nonogramele nu au teoretic limite în ceea ce privește mărimea și nu sunt limitate la aspectul
de pătrat.

3.2. Rezolvarea Jocului Logic

Tehnici de rezolvare

Pentru a rezolva un puzzle, trebuie să determinăm care celule vor fi pline și care vor fi goale.
Celulele care pot fi determinate prin logică trebuie umpl ute. Dacă se utilizează o ghicire, o singură
eroare se poate răspândi pe întregul câmp și poate ruina complet soluția. O eroare apare uneori la
suprafață numai după un timp, când este foarte greu să corectezi puzzle -ul.

Puzzle -urile mai simple pot fi de obicei rezolvate printr -un raționament pe un singur rând (sau
o singură coloană) la fiecare moment dat, pentru a determina cât mai multe poziții pline și spații pe
acest rând posibil. Se încearcă apoi un alt rând (sau o coloană), până când nu există rânduri care să
conțină celule nedeterminate. Puzzle -uri mai dificile pot necesita, de asemenea, mai multe ti puri de
raționamente care includ mai mult de un rând (sau o coloană). Aceasta funcționează în căutarea
contradicțiilor: atunci când o celulă nu poate fi o cutie, deoarece o altă celulă ar produce o eroare, va
fi cu siguranță un spațiu , și invers. Jucătorii avansați sunt uneori capabili să caute chiar mai adânc
decât în primul raționament .

14
Căsuțe simple

La începutul soluției, se poate utiliza o metodă simplă pentru a determina cât mai multe cutii
posibil. Această metodă utilizează conjuncțiile posibile pentru fiecare bloc de cutii. De exemplu, într –
un rând de zece celule cu un singur indiciu de 8, blocul legat de 8 cutii se poate distribui după cum
este prezentat în figura 3.1 .

Fig 3.1 Căsuțe simple 8/10

Aceeași logică se aplică, desigur, atunci când există mai multe indicii în rând. De exemplu,
într-un rând de zece celule cu indicii de 4 și 3, blocu rile de legături de cutii ar putea fi :

Fig 3.2 Căsuțe simple (4,3)/10

Spații simple

Această metodă constă în determinarea spațiilor prin căutarea unor celule care sunt în afara
oricărui domeniu de blocuri posibile. De exemplu, luând în considerare un rând de zece celule cu
cutii în a patra și a noua celulă și cu indicii de 3 și 1, blocul legat la indicele 3 se va răspândi prin cea
de-a patra celulă, iar indiciul 1 va fi la a noua celulă.

În primul rând, indiciul 1 este complet și va exi sta un spațiu la fiecare parte a blocului legat.

Fig 3.3 Spații simple (4,3)/10

În al doilea rând, indiciul 3 se poate distribui undeva între a doua celulă și a șasea celulă,
deoarece trebuie întotdeauna să includă a patra celulă; totuși, aceasta po ate lăsa în orice caz celulele
care nu pot fi cutii, adică prima și a șaptea.

15
În acest exemplu, toate blocurile sunt contabilizate; acest lucru nu este întotdeauna cazul.
Jucătorul trebuie să fie atent pentru că pot exista indicii sau blocuri care nu sunt încă legate între ele.

Forțarea

În această metodă, semnificația spațiilor va fi arătată. Un spațiu plasat undeva în mijlocul unui
rând incomplet poate forța un bloc mare de o parte sau de alta. De asemenea, un spațiu care este prea
mic pentru orice b loc posibil poate fi umplut cu spații.

De exemplu, luând în considerare un rând de zece celule cu spații în celula a cincea și a șaptea
și cu indicii de 3 și 2:

Fig 3.4 Spatii celula 5,7

• indicele de 3 ar fi forțat la stânga, pentru că nu se putea potrivi în altă parte.
• golul celulei a șasea este prea mic pentru a găzdui indicii ca 2 sau 3 și poate fi umplut
cu spații.
• în cele din urmă, indicele de 2 se va distribui prin celula nouă în conformitate cu
metoda Simple Boxes de mai sus.

Lipirea

Uneori există o cutie lângă graniț ă care nu se situează mai departe de graniță decât lungimea
primului indiciu. În acest caz, primul indiciu se va răspândi prin acea cutie și va fi forțat să iasă
dincolo de graniță.

De exemplu, luând în considerare u n rând de zece celule cu o cutie în a treia celulă și cu un
indiciu de 5, indicele de 5 se va răspândi prin cea de -a treia celulă și va continua până la cea de -a
cincea celulă din cauza graniței .

Fig 3.5 Lipirea

Această metodă poate funcționa și în mijlocul unui rând, mai departe de granițe.

16
• Un spațiu poate acționa ca o margine, dacă primul indiciu este forțat spre dreapta
acelui spațiu.

• Primul indic iu poate fi, de asemenea, precedat de al te indicii , dacă toate indiciile sunt
deja lega te la stânga spațiului forțat.

Fig 3.6 Lipirea

Îmbinarea și împărțirea

Cutiile mai aproape un ele de celălalt e pot fi uneori îmbinate într -un bloc sau împărțite de un
spațiu în mai multe blocuri. Când există două blocuri cu o celulă goală între ele, această celulă va fi:

• Un spațiu , dacă gruparea cele două blocuri cu o cutie ar produce un bloc prea mare.

• O casetă , dacă diviziunea celor două blocuri cu un spațiu va produce un bloc prea mic
care nu are suficiente celule libere rămase .

De exemplu, luând în considerare un rând de cincisprezece celule cu cutii în a treia, a patra, a
șasea, a șaptea, a unsprezecea și a treisprezecea celulă și cu indicii de 5, 2 și 2:

Fig 3.7 Îmbinarea și împărțirea

• Indicația de 5 va alătura primele două blocuri de o cutie într -un bloc mare, deoarece
un spațiu va produce un bloc de numai 4 cutii care nu este sufici ent.

• Indiciile cu valoarea 2 vor împărți ultimele două blocuri cu un spațiu, deoarece o cutie
va produce un bloc de 3 cutii continue, care nu este permisă.

Imagi nea arată de asemenea, modul în care sunt completate indicii le de la 2. Totuși, aceasta
nu face parte din tehnica de îmbinare și impărțire , ci din tehnica lipiciului descrisă mai sus.

17
Punctarea

Pentru a rezolva puzzle -ul este de asemenea foarte important să închideți imediat fiecare bloc
legat sau completat de casete prin separarea spațiilor , așa cum este descris în metoda spațiilor simple.
Punctuația precisă de obicei duce la tehnica forțării și este vitală pentru finalizarea puzzle -ului.

Mercur

Mercurul este un caz special al tehnicii de spații simple. Denumirea sa provine d e la metoda
retragerii mercurului din părțile laterale ale unui container.

Fig 3.8 Mercur

Dacă există o casetă într -un rând care se află la aceeași distanță de limită cu lungimea primului
indiciu, prima celulă va fi un spațiu. Acest lucru se datorează faptului că primul indiciu nu se va
potrivi în partea stângă a cutiei. Va trebui să se răspând ească prin cutia aceea , lăsând în urmă prima
celulă. În plus, atunci când caseta este de fapt un bloc de mai multe cutii spre dreapta, vor exista mai
multe spații la începutul rândului, determinate prin utilizarea acestei metode de mai multe ori.

3.3. Contrad icții

Unele puzzle -uri mai dificile pot necesita, de asemenea, raționamente avansate. Atunci când
toate metodele simple de mai sus sunt epuizate, căutarea contradicțiilor poate ajuta. Este înțelept să
folosiți un creion (sau altă culoare) pentru a facilit a corecțiile. Procedura include:

• Încerca rea unei celulă goal e posibil a fi o cutie (sau apoi un spațiu).

• Folosirea tuturor metodel or disponibile pentru a rezolva cât mai mult posibil , pornind
de la premiza că primul pas este corect.

• Dacă se găsește o eroare, celula încercată sigur nu va fi o cutie. Va fi un spațiu (sau o
cutie, dacă s -ar fi încerca t spațiu ca și premiză ).

18

Fig 3.9 Contradicții

În acest exemplu, o casetă este încercată în primul rând, ceea ce duce la un spațiu la începutul
acelui rând. Spațiul forțează apoi o cutie în prima coloană, care se lipe ște de un bloc de trei cutii în al
patrulea rând. Cu toate acestea, acest rezultat este greșit, deoarece a treia coloană nu permite niciun
fel de căsuțe, ceea ce duce la concluzia că celula încercată nu trebuie să fie o cutie, deci trebuie să fie
un spațiu.

Problema acestei metode este că nu există o cale rapidă de a spune care celul ă goală trebuie
încercată mai întâi. De obicei, numai câteva celule duc la progres, iar celelalte celule duc la impasuri .
Celulele cele mai demne de început pot fi:

• celule care au mulți vecini non -goi;

• celule care sunt aproape de granițe sau aproape de blocurile de spații;

• celule care se află în rânduri care constau din mai multe celule ne -goale.

3.4. Interfa ța grafic ă

Fișierul predefinit pentru directorul web este randomGrid.jsp, iar accesând serverul prin
http://localhost:1337/gridPuzzleProject/RandomGrid.action , serverul va trimite fisierul de bază,
adică pagina principală a site -ului. Adnotatia „ .action” este utilizată pentru a atrag e atenția
framework -ului că acest apel este intenționat pentru el.

19

Fig 3.10 Pagina principala

Pagina principală, după cum se vede, reprezintă o pagina de joc de tip Nanogram
necompletată.

Fig 3.11 Joc completat

20
3.5. Verificarea rezolvari

Design -ul paginii a fost realizat utilizand HTML și CSS, iar algoritmul care verifică
rezolvarea finală a jocului a fost realizat utilizând cod Java Script scris în paginile JSP.

Acest algoritm parcurge pas cu pas rândurile și coloa nele citiind numerele din lateralul
tabelului și verifică dacă a fost rezolvat corespunzător.

Fig 3.12 Vizualizarea algoritmului de verificare

21

CAPITOLUL 4.
IMPLEMENTAREA ȘI UTILIZAREA APLICAȚIEI

4.1. Organizarea fisierelor

Fig 4.1 Organizarea fisierelor

4.1.1 Structura Logică a fi șierelor

Organizarea fi șierelor în acest proiect, este bazat ă pe structura standard a proiectelor care
utilizeaz ă Maven . O organizare standardizat ă este incurajat ă pentru a permite oricui interac ționeaz ă
cu codul men ționat s ă se simt ă ca acas ă și să găseasc ă orice element cu u șurință.

Structura este una care poate fi in țeleas ă cu ușurință și urmeaz ă un șablon simplu:

numeleProiectului (scris in camelCase)

22
• src (fișierele surs ă)
o main
▪ java (fișierul principal unde vom g ăsi majoritatea codului surs ă)
• com.example.gridPuzzleProject (denumire standard pentru
fișiere)
1. dao
2. model
3. web
▪ resources (fișierul care con ținue propriet ățile glo bale și alte xml -uri
pentru bazele de date)
▪ webapp (fișierul care con ținue majoritatea elementelor necesare
pentru a comunica cu pagina web)
• pages (fișier care con ținue toate paginile JSP)
• layout
• grid.jsp
• index.jsp
• randomGrid.jsp
• WEB -INF
• Target (o serie de fi șiere care se cre ează automat de către Maven și unde găsim .War –
ul)
• .iml-ul proiectului
• pom.xml

1) Directorul DAO (Data Access Object) este un model structural care permite izolarea
aplica ției (logica programat ă), de către stratul persistent, care este de obicei responsabil cu p ăstrarea
relației cu baza de date sau alte mecanisme persistente, folosind un API abstract.

Funcțional itatea acestui API este de a ascunde de aplicație toate complexitățile implicate în
efectuarea operațiunilor CRUD în mecanismul de stocare de bază. Acest lucru permite ambelor
straturi să evolueze separat fără să știe nimic unul despre celalalt.

2) Direct orul Model conține toate clasele Java care nu interac ționeaza direct cu paginile JSP,
bazele de date sau servlet -ul. Aici punem logica back -end.

3) Directorul Web conține clasa ApplicationServlet, care este responsabil ă pentru activarea
servlet -ului initi al. De asemenea în acest fi țier se g ăsesc fi șierele:

• action care conține toate clasele de tip actiune utilizate de catre cadrul(framework)
Stripes

• filter directorul în care va fi creat ă clasa care imple men tează interceptor ,
responsabil ă pentru verificarea login -ului

4) Directorul Layout conține fișierele utilizate în paginarea site -ului web și în recunoa șterea
anumitor etichete .

23

4.2. Crearea aplicatiei (back -end)

Fig 4.2 Backend

4.2.1 Clasa Grid

Prima clas ă creat ă se afl ă în directorul Model, aceasta este clasa Grid , o folosim pentru a
creea o matrice p ătrată (pentru moment) pe care o vom popula mai tarziu utiliz ând o alta clas ă.

public static Integer[][] populate( Integer size){
Integer[][] randomGrid = new Integer[size][size];
for (int i = 0; i <randomGrid.length ; i++) {
for (int j = 0; j <randomGrid.length ; j++) {
randomGrid[i][j] = NotRandomNrGenerator.randomIsh();
}
}
return randomGr id;
}

public static Integer[][] recreateGrid(String gridCode, int size){
Integer[][] newGrid = new Integer[size][size];

String[] temp1 = gridCode.split("/");
String[] temp2;
for (int i = 0; i < temp1.length ; i++) {
temp2 = temp1[i].split("");
for (int j = 0; j < temp1.length ; j++) {
newGrid[i][j]= Integer.parseInt(temp2[j]);
}
}
return newGrid;

24
}

4.2.2 clasa NotRandomNrGenerator

Clasa NotRandomNrGenerator este folosiita pentru a popula matricea cu valoarea 0 sau 1
pentru a sugera dac ă o rubric ă din grilajul final ar trebui sa fie plin ă sau goal ă. Aceast ă clasă a fost
numit ă în acest mod pentru a sugera că sanșele nu sunt egale, 1 apare în aproximativ 2/3 din cazuri.

public class NotRandomNrGenerator {

public static int randomIsh(){
Random random = new Random();

int[] randomnChoice = {0,0,1,1,1,1};

return randomnChoice[random.nextInt(6)];
}

}

4.2.3 Clasa TopTableGen

Odat ă generat ă matricea trebuie generate tabelele din lateralul și deasupra jocului, acestea
trebuie s ă reprezinte pozi țiile chenarelor care sunt negre. Datorit ă felului în care ajung citite și
utilizate acestea , ele sunt generate separat în clasele urm ătoare .

Prima dintre aceste clase pe care o voi prezenta este TopTableGen , responsabil ă pentru
crearea tabelului din partea superioar ă a spa țiului de joc. Aceasta clasă parcurge matricea coloan ă cu
coloan ă și pentru fiecare val oare de 1 g ăsită în coloan ă o aduna la o val oare instanțiată ca 0, dac ă
următorul element din coloanal este 0 matricea nu mai adaug ă nici un num ăr salveaz ă numarul în
sine, reseteaz ă valoarea variabilei temporare ca 0 și continu ă până termin ă de citit coloan a și apoi
trece la următoarea .

public static Map<Integer, ArrayList<Integer>> topTableGen(Grid grid) {

Map<Integer, ArrayList<Integer>> multiMap = new HashMap<>();

if (grid.getSize() != null) {
column = grid.getGrid();
Integer key = 0;
Integer gridSize = grid.getSize();
for (int i = 0; i < gri dSize; i++) {
Integer checkPosition = 0;
ArrayList<Integer> value = new ArrayList<>();

for (int j = 0; j < gridSize; j++) {
if (column[j][i] != 0) {
checkPosition += column[j][i];
} else if ((column[j][i] != 0)&&(checkPosition != 0)) {
checkPosition += column[j][i];
} else {

25
if (checkPosition !=0) {
value.add(checkPosition);
checkPosition = 0;
}
}
}
if (checkPosition != 0) {
value.add(checkPosition);
}
multiMap.put(key, value);
key++;
}

return multiMap;
}
return null;
}

4.2.4 Clasa SideTableGen

În mod asem ănător clasa SideTableGen populeaz ă o matrice nou ă cu valorile necesare dup ă
ce cite ște rând cu r ând matricea generat ă anterior.

public static Map<Integer, ArrayList<Integer>> sideTableGen(Grid grid) {

Map<Integer, ArrayList<Integer>> multiMap = new HashMap<>();

if (grid .getSize() != null) {
Integer gridSize = grid.getSize();
tempGrid = grid.getGrid();
Integer key = 0;
for (int j = 0; j < gridSize; j++) {
Integer checkPosition = 0;
ArrayList<I nteger> value = new ArrayList<>();
Integer[] row = tempGrid[j];

for (Integer i : row) {

if (i != 0) {
checkPosition += i;

} else if((i != 0) && (checkPosition != 0)){
checkPosition += i;
} else {
if(checkPosition != 0) {
value.add(checkPosition);
}
checkPosition = 0;
}
}
if(checkPosition != 0) {
value.add(checkPosition);
}

26
multiMap.put(key, value);
key++;

}
return multiMap;
}
return null;
}

4.2.5 Clasa HashMap

Ambele clase folosesc HashMap pentru a salva valorile colectate. HashMap este o parte a
colecției Java de la Java 1.2. Acesta oferă implementarea de bază a interfeței Map a Java , și stochează
datele în perechi (cheie, valoare). Pentru a accesa o valoare trebuie să știi cheia. HashMap este
cunoscut sub numele de HashMap deoarece folosește o tehnică numită Hashing. Hashing este o
tehnică de transformare a unui String mare pe un String mic care reprezintă același String. O valoare
mai scurtă ajută la indexarea și la căutări mai rapide.

În directorul web>action se afl ă clasa BaseAction , care implementeaz ă interfa ța ActionBean
și este utilizat ă de către cadrul (framework) Stripes pentru a gestiona contextul, sesiunea, cererea
(apelul) și răspunsul.

public class BaseAction implements ActionBean {

protected ActionBeanContext context;
protected HttpServletRequest request;
protected HttpServletResponse response;
protected HttpSession session;

@Override
public void setContext(ActionBeanContext context) {

this.context = context;
this.request = context.getRequest();
this.response = context.getResponse();
this.session = this.request != null ? this.request.getSession() : null;
}

@Override
public ActionBeanContext getContext() {
return this.context;
}
}

4.2.6 Clasa RandomGridAction

Clasa RandomGridAction este cea care intera cționeaz ă cel mai direct cu cadrul (Framework)
Stripes folosind adnota țiile necesare pentru a -l aten ționa pe acesta legat de ac țiunile care urmeaz ă să
aibe loc.

Adnota ția DefaultHandler utilizat ă sugereaz ă că metoda urmatoare este cea de baza în cazul
în care nu se găsește una specifi că pentru evenimentul respectiv. În cazul acesta este utilizat ă pentru

27
a apela clasele care cre ează tabelele necesare jocului și pentru a le oferi ca un r ăspuns c ătre pagina
JSP randomgrid.jsp.

@DefaultHandler
public Resolutio n view() {
Integer size = 5;
if (size != null) {
Integer[][] randomGrid = Grid.populate(size);
this.grid = new Grid(size, randomGrid);
this.request.getSession().setAttribute("grid", grid);
}
return new ForwardResolution("/pages/randomGrid.jsp");
}

4.2.7 Clasa ForwardResolution

Clasa ForwardResolution este folosit ă pentru a face conexiunea cu URL -ul potriv it
ActionBean -ului utilizat. Acest constructor este preferat în interac țiunile cu ActionBean deoarece
asigur ă folosirea URL -ului corect. În general paseaz ă cone xiunea sau apelul c ătre un șablon, deseori
un .jsp.

Mai exist ă RedirectResolution care paseaz ă apelul c ătre Browser, în general utiliz ând un alt
ActionBean și StreamingResolution care returneaz ă un text.

Adnota ția HandlesEvent este utilizat ă de către ActionBean pentru a declara c ă metoda care
urmeaz ă este capabil ă de a se ocup a de evenimentul creat de client. Este utilizat ă de c ătre
AnnotatedClassActionResolver pentru a mapa cereri la metodele aferente în momentul rul ării
programului. Aceasta adnotare prime ște ca variabila un sir (string) care reprezint ă evenimentul .

@Han dlesEvent("check")
public Resolution check() {
String nr = this.request.getParameter("nr");
return new StreamingResolution("text/plain", nr);
}

4.2.8 Clasa ApplicationServlet

Clasa ApplicationServlet este utilizat ă pentru a ini ția servletul și a apela clasa BaseDao, care
inițiază legatura cu baza de date.

ApplicationServlet extinde clasa abstracta HttpServlet folosit ă ca o subclas ă pentru a crea un
servlet HTTP pentru site -urile WEB, de asemenea se ocup ă de apelurile Get.

public class ApplicationServlet extends HttpServlet{
public void init(ServletConfig config) throws ServletException {
super.init(config);
BaseDao.init("com.postgresql.Driver", "jdbc:postgresql://localhost/resta urant",
"postgres", "postgres");
System.out.println("Application initialized successfully");
}
}

28

4.3. Crearea interfetei cu utilizatorul (front -end)

Fig 4.3 FrontEnd

În cre area interfe ței cu utilizatorul am folosit paginile JSP. Paginile JavaServer (JSP) este o
tehnologie standard Java care vă permite să scrieți pagini dinamice, bazate pe date pentru aplicațiile
web Java. JSP este construit pe baza specificațiilor Java Servlet. Cele două tehno logii lucrează
împreun ă, în special în aplicațiile web. Din perspectiva codificării, cea mai evidentă diferență dintre
acestea este că servlet ele se folosesc cu cod Java și apoi încorpor ează marcajul de pe partea clientului
(ca HTML) în acel cod, în timp c e JSP pornște cu scriptul sau marcajul de pe partea clientului, apoi
încorpor ează JS pentru a conecta pagina la backend -ul Java. Este o tehnologie de bază Java web.
Paginile JSP sunt relativ rapide, ușor de construit și interacționează fără probleme cu ser vletele Java
într-un container de servlet ca Tomcat.

JSP este adesea folosit la dezvoltarea aplicațiilor bazate pe server. Această aplicație bazată pe
server este, fără îndoială, foarte importantă în designul paginii web moderne și, de asemenea, în
stabilirea procesul standard de securitate și validare de că tre JavaScript. Deci, este ușor să spunem că
JSP și JavaScript sunt interconectate unul cu celălalt și astfel, putem să dezvoltăm dinamic și să
procesăm pagina. JavaScript este implementarea de către Microsoft a specificației de limbă ECMA
262. Java Script este o limbă care implement ează pe deplin , aduce unele îmbunătățiri și profită de
capabilitățile Microsoft Internet Explorer .

Java Script ne sprijină în comunicarea cu diferite limbi de scriere dinamică si este, fără
îndoială, foarte popular pentru dezvo ltatorii din partea serverului. Știm că lumea modernă rulează cu
sisteme bazate pe internet. Acest sistem bazat pe internet interacționează direct cu sever și, de
asemenea, verificarea diferitelor tipuri de procesare a evenimentelor pe care le folosim în m od regulat.
Deci, la început, trebuie să cunoaștem diferite proceduri de manipulare a evenimentelor din Java
Script, precum și caracteristicile Java Script.

În acest context JavaScript este folosit pentru a încărca elemente de logic ă care vor fi utilizate
de către client ( în front -end) sau pentru a crea elemente mai dinamice în pagin ă.

29
Alături de JavaScript, în JSP putem scrie cod HTML și încorpora pagini de stil CSS, acestea
din urma fiind utilizate în JSP pentru a suprascrie anumit e caracteristici care dorim sa fie unice intr –
o singura pagin ă fără a schimba aspectul unui întreg site.

4.3.1 layout.jsp

Pagina layout.jsp este folosit ă pentru a încărca regulile de baz ă HTML și pentru a stabili
conexiunea cu bootstrap.css, direct din header, aceasta permi țând încărcarea acestor elemente înainte a
oricărui alt element. De asemenea este folosit pentru a încărca paginarea care va fi suprascris ă ulterior
folosind CSS.

<html lang="en">
<head>
<meta charset="UTF -8">
<meta name="viewport" content="width=device -width, initial -scale=1.0">
<meta http -equiv="X -UA-Compatible" content="ie=edge">
<title>gridGame</title>

<link href="https://stackpath.bootstrapcdn. com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384 –
WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
integrity="sha384 –
smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorig in="anonymous"></script>
</head>
<body>

<%–<aici sunt amplasate toate elementele de paginatie> –%>

<div class="container">
<div class="row justify -content -center">
<s:layout -component name="mainContent">
</s:layout -component>
</div>
</div>
</body>
</html>

4.3.2 taglibs.jsp

Pagina taglibs.jsp conține marcajele suplimentare create pentru a comunica anumite
elemente , iar î n pagina principala se face referință la aceasta.

page contentType="text/html;charset=UTF -8" language="java"
taglib prefix="s" uri="http://stripes.sourceforge.net/stripes.tld"
taglib prefix="c" uri= ”http://java.sun.com/jsp/jstl/core ”

30
4.3.3 randomGrid.jsp

Pagina randomGrid.jsp conține toate elementele necesare pentru aspectul si func ționalitatea
jocului în sine.

Primele secven țe de cod din pagin ă acționeaz ă ca un header încărcând elementele necesare
ulterior.

<jsp:useBean id="actionBean" scope="request"
type="com.example.gridPuzzleProject.web.action.RandomGridAction"/>

<include file="/pages/layout/taglibs.jsp" >

Aceasta secven ță este urmat ă de codul care suprascrie anumite elemente CSS cre eând stilul
caracteristic al paginii.

<style>
#topColumnNumber,
#sideRowTable {
font-size: 1.2em;
font-weight: 600;
}

#topColumnNumber tbody {
display: flex;
flex-direction: row;
}

#topColumnNumber tbody tr {
width: 30px;
display: flex;
margin -right: 2px;
flex-direction: column;
align -items: center;
justify -content: flex -end;
}

#checkboxT able tbody td {
width: 30px;
height: 30px;
}

#checkboxTable tbody td input {
width: 100%;
height: 100%;
}

#sideRowTable {
float: left;
}

#sideRowTable tbody {

31
display: flex;
flex-direction: column;
}

#sideRowTable tbody tr {
width: 100%;
height: 30px;
margin -bottom: 2px;
display: flex;
flex-direction: row;
align -items: center;
justify -content: flex -end;
}

input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}

label {
display: block;
margin -bottom: 0 !important;
width: 30px;
height: 30px;
background: lightgray;
cursor: pointer;
}

input[type=checkbox]:checked + label {
background: black;
}
</style>

Următoarea secven ță este utilizat ă pentru realizarea și popularea grilajului și a tabel elor lateral
și superior. Aceasta are loc în momentul acces ării pagini RandomGrid.action, deoarece aceast ă
acțiune este considerat ă un eveniment după care ascultă serverul. În momentul stabiliri acestuia se
trimite un apel c ătre server și ca r ăspuns prime ște cele dou ă Hash Map-uri și matricea. Programul apoi
le parcurge utiliz ând func ția forEach, și populea ză un tabel cu care clientul poate interac ționa în
browser.

<s:layout -render name="/pages/layout/layout.jsp">
<s:layout -component name="mainContent">

<html>
<body>

<form action="/RandomGrid.action?check" id="form" method="post">
<input type="hidden" name="nr" id="nr"/>
<table id="topColumnNumber">

32
<c:forEach items="${actionBean.topTableGen}" var="entry"
varStatus="topColumn">
<tr id="topColumnTableRow<c:out value="${topColumn.index}"/>">
<td id="topColumnTableNr<c :out value="${topColumn.index}"/>">
<c:forEach items="${entry.value}" var="item" varStatus="loop">
${item}${!loop.last ? ',' : ''}
</c:forEach>
</td>
</tr>
</c:forEach>

</table>
<table id="sideRowTable">

<c:forEach items="${actionBean.sideTableGen}" var="en try"
varStatus="sideTable">
<tr id="sideTableRow<c:out value="${sideTable.index}"/>">
<td id="sideTableNr<c:out value="${sideTable.index}"/>">
<c:forEach items="${entry.value}" var="it em" varStatus="loop">
${item} ${!loop.last ? ',' : ''}
</c:forEach>
</td>
</tr>
</c:forEach>

</table>
<table id="checkboxTable">

<c:forEach items="${actionBean.sideTableGen}" var="entry" varStatus="row">
<tr>
<c:forEach items="${actionBean.sideTableGen}" var="key"
varStatus="col">
<td>
<input type="checkbox" id="chk<c:out
value="${row.index}${col.index}"/>">
<label for="chk<c:out value="${row.index}${col.index}"/>"></label>
</td>
</c:forEach>
</tr>
</c:forEach>
</table>

Secven ța prezentat ă anterior este urmat ă de codul pentru butonul care are rol de submit, la
apăsarea acestuia se apeleaza o func ție javascript care parcurge r ândurile și coloanele jocului proasp ăt
rezolvat și compar ă soluția cu numere din tabelele laterale și superioare.

<button type="submit" class="btn btn -primary float -right" onclick="check()">Check
Solution</button>
<script type="text/javascript">

33

Algoritmul de verificare funcționeaz ă prin pa rsarea valorilor din tabel pas cu pas și num ărarea
căsuțelor marcate care înregistreaz ă aceast ă marcare ca un checkbox . Se folosesc o serie de for -uri
pentru a citi valorile binare din c ăsuțele marcate și pentru a le compara cu valorile deja existente în
tabelele relevante . La prima eroare programul se opre ște și returneaz ă un mesaj care anun ță clientul
(jucătorul) c ă soluția sa nu este corect ă.

function check() {

var mistakeChecked = false;

for (var i = 0; i < ${actionBean.gridSize}; i++) {
if (mistakeChecked) {
var nr = document.getElementById("nr").value = "incorrect";
}

var checkBoxFinalValue = 0;
var sideRowTableFinalValue = 0;

for (var j = 0; j < ${actionBean.gridSize}; j++) {
if (document.getElementById("chk" + i + j).checked) {
checkBoxFi nalValue += 1;
}
}
for (var k = 0; k < document.getElementById("sideTableNr" +
i).innerHTML.split(',').length; k++) {
var tdElements = document.getEleme ntById("sideTableNr" +
i).innerHTML;
var tdElement = tdElements.trim();
var tdArray = tdElement.split(',');

for (var m = 0; m < tdArray.length; m++) {
tdArray[m] = tdArray[m].trim();
tdArray[m] = parseInt(tdArray[m]);
}

var value = tdArray.reduceRight(function (acc, val) {
return acc + val
});
sideRowTableFinalValue = +value;
}

if (sideRowTableFinalValue == NaN) {
sideRowTableFinalValue = 0;
}
if (checkBoxFinalValue != sideRowTableFinalValue) {
mistakeChecked = true;
}
}

for (var i = 0; i < ${actionBean.gridSize}; i++) {
if (mistakeChecked) {
var nr = document.getElementById("nr").value = "incorrect";

34
}
var checkBoxFinalValue = 0;
var topColumnTableFinalValue = 0;

for (var j = 0; j < ${actionBean.gridSize}; j++) {
if (document.getElementById("chk" + j + i).checked) {
checkBoxFinalValue += 1;
}
}
for (var k = 0; k < document.getElementById("topColumnTableRow" +
i).innerHTML.split(',').length; k++) {

var tdElements = document.getElementById("topColumnTableNr" +
i).innerHTML;
var tdElement = tdElements.trim();
var tdArray = tdElement.split(',');

for (var m = 0; m < tdArray.length; m++) {
tdArray[m] = tdArray[m].tri m();
tdArray[m] = parseInt(tdArray[m]);
}

var value = parseInt(tdArray.reduceRight(function (acc, val) {
return acc + val
}));
topColumnTableFinalValue = +value;
}
if (topColumnTableFinalValue == NaN) {
topColumnTableFinalValue = 0;
}
if (checkBoxFinalValue != topColumnTableFinalValue) {
mistakeChecked = true;
}
if (!mistakeChecked) {
var nr = document.getElementById("nr").value = "correct";
}
}
}
</script>
In final avem elemental care urmareste evenimente in partea clientului addEventLis tener.

<script>
document.addEventListener('DOMContentLoaded', function () {
const sideRowTableWidth =
document.querySelector('#sideRowTable').getBoundingClientRect().width;
const checkboxTable = document.querySe lector('#checkboxTable');
const topColumnNumber = document.querySelector('#topColumnNumber');
const topColumnNumberWidth =
document.querySelector('#topColumnNumber').getBoundingClientRect().width;
topColumnNumber.style.transform = 'translateX(' + (sideRowTableWidth ) + 'px)';
checkboxTable.style.width = topColumnNumberWidth + 'px';
})
</script>

35

CAPITOLUL 5.
CONCLUZII

5.1. Concluzii

Jocurile și jucatul este unul dintre mijloacele de bază a exprim ării creativității și inteligenței ,
influențate de mediul cultural relevant . Jocurile au găsit o expresie naturală în epoca computerizată
contemporană în care comunic area este din ce în ce mai des moderată de tehnologia de
computa ționala20.
Importanța Internetului în zilele noastre este deja cunoscută iar exploatarea oportunitaților
oferite de acesta trebuie s ă fie o prioritate pentru o firmă modernă mai ales dacă concurența are deja
prezență on line. Un website costă o singură dată și rămâne permanent, 24 de ore din 24 , în atenția
publicului din orice zonă a lumii. Oricând, conținutul unui website poate fi actualizat sau modificat
după plac.
La baza aplicației Logic Puzzle Game (Nonogram) stă limbajul de programare Java, care este
un limbaj foarte versatil și foarte des folosit. Din aceste motive am ales limbaj ul Java pentru
implementarea aplicației. În zilele noastre c ele mai multe aplicații web sunt scrise în Java, în special
partea de b ack-end împreuna cu JavaScript, HTTP și CSS în partea de front -end, împreuna formând
o soluție convenabilă pentru proiectarea unei aplicații web.

Lumea se schimbă de la o zi la zi, tehnologiile avansează, apar noi și noi aplicații software
care ne vor co nduce într -o lume din ce în ce mai computerizată. Eu cred că Java ocupă un loc foarte
important în această lume și are un rol deosebit în dezvoltarea noilor tehnologii.

Aplicația Logic Puzzle Game este doar o mică parte din această lume imensă a limbajului
Java, dar nu nesimnificativă , deoarece exemplific ă posibili tățile acestui limbaj, nu doar pentru a crea
sisteme de management și gestionare, dar și pentru a crea elemen te care apar în momentul în care
facem o pauza de la lumea real ă și ne relax ăm pentru 5 minute las ându -ne mintea s ă facă altce va.

5.2. Posibilități de dezvoltare

Versiunea prezentat ă în această lucrare a aplica ției Logic Puzzle Game nu este versiunea
finală, ci dimpotrivă prima versiune. Aplicația poate fi îmbunătățită, adăugând noi facilități. Iată
câteva lucruri noi care ar putea fi incluse în dezvoltarea acestui program:

• Sistem de autentificare encriptat
• Memorarea scorului raportat la jucator
• Selec tarea nivelului de dificultate
• Comunicarea cu sisteme externe cum ar fi social media

20 Johan Huizinga “Homo Ludens”, p.1, Taylor & Francis 1949

I

BIBLIOGRAFIE

1. Titus Slavici “ Re-shaping Education: Role of Internet Resources in Increasing the
Efficiency of the Educational Process” vol.9 2018
2. Johan Huizinga “Homo Ludens”, p.1, Taylor & Francis 1949
3. Titus Slavici “ Re-shaping Education: Role of Internet Resources in Increasing the
Efficiency of the Educational Process” vol.9 2018
4. Gordana Dodig -Crnkovic and Thomas Larsson “Game Ethics” vol.4. 2005
5. Webdevelopersnotes. "What is web server?" . 1 Februarie 2019 .
6. Patrick Killelea “Web performance tuning” (a2 -a editie) 20 02.
7. http://www.tomcat.apache.org "Apache Tomcat Configuration Reference – The
Realm Component" 1 Noiembrie 2013
8. Steven Melendez "The Difference Between Dynamic & Static Web Pages" 10 August
2018
9. Brent W Benson “JavaScript” 1999
10. http://www.jetbrains.org “IntelliJ Opend -Source Project – Confluence”
11. Computer Weekly “Write Once, Run Anywhere?” 2 Mai 2002
12. Oracle “12 Design Goals of the Java Programming Language” 1 Ianuarie 1999
13/14. http://www.novocode.com “Servlet Essentials” 18 Decembrie 2017
15. Frederic P.Miller, Agnes F. Vandome, John McBrewster “Apache Maven” 2010
16. Frederic Daoud “Stripes: … and Java Web Development is Fun Again” 27
Octombrie 2 008.
17. David Flanagan “JavaScript – The Definitive guide”
18. http://vanilla -js.com “Vanilla JS” 15 Decembrie 2017
19. David Flanagan “JavaScript – The Definitive guide”
20. Johan Huizinga “Homo Ludens”, p.1, Taylor & Francis 1949

II

LISTA FIGURILOR

Fig 3.1 Căsuțe simple 8/10
Fig 3.2 Căsuțe simple (4,3)/10
Fig 3.3 Spații simple (4,3)/10
Fig 3.4 Spații celul ă 5,7
Fig 3.5 Lipirea
Fig 3.6 Lipirea
Fig 3.7 Îmbinarea și împărțirea
Fig 3.8 Mercur
Fig 3.9 Contradicții
Fig 3.10 Pagina principal ă
Fig 3.11 Joc completat
Fig 3.12 Vizualizarea algoritmului de verificare
Fig 4.1 Organizarea fi șierelor
Fig 4.2 Backend
Fig 4.3 FrontEnd
Fig 3.1 -3.9 create de http://jsimlo.sk/

III

ANEX A I
Exemplu Cod Stripes

HelloAction.java
import net.sourceforge.stripes.action.ActionBean;
import net.sourceforge.stripes.action.ActionBeanContext;
import net.sourceforge.stripes.action.DefaultHandler;
import net.sourceforge.stripes.action.ForwardResolution;
import net.sourceforge.stripes.action.Resolution;
import net.sourceforge.stripes.action.UrlBinding;

@UrlBinding("/hello -{name=}.html")
public class Hel loAction implements ActionBean {
private ActionBeanContext context;
private String name;

public ActionBeanContext getContext() {
return context;
}

public void setContext(ActionBeanContext context) {
this.context = context;
}

public void setName(String name) {
this.name = name;
}

public String getName() {
return name;
}

@DefaultHandler
public Resolution view() {
return new ForwardResolution (“/WEB -INF/HelloWorld.jsp”);
}
}

HelloWorld.jsp
<html><body>
Hello ${actionBean.name}<br/>
<br/>
<s:link beanclass="HelloAction"><s:param name="name" value="John"/>Try again</s:link><br>
</body></html>

Clasa Grid

public static Integer[][] populate( Integer size){
Integer[][] randomGrid = new Integer[size][size];
for (int i = 0; i <randomGrid.length ; i++) {
for (int j = 0; j <randomGrid.length ; j++) {
randomGrid[i][j] = NotRandomNrGenerator.randomIsh();
}
}
return randomGrid;
}

public static Integer[][] recreateGrid(String gridCode, int size){
Integer[][] newGrid = new Integer[size][size];

IV

String[] temp1 = gridCode.split("/");
String[] temp2;
for (int i = 0; i < temp1.length ; i++) {
temp2 = temp1[i].split("");
for (int j = 0; j < temp1.length ; j++) {
newGrid[i][j]= Integer.parseInt(temp2[j]);
}
}
return newGrid;
}

class NotRandomNrGenerator

public class NotRandomNrGenerator {

public static int randomIsh(){
Random random = new Random();

int[] randomnChoice = {0,0,1,1,1,1};

return randomnChoice[random.nextInt(6)];
}

}

Class TopTableG en

public static Map<Integer, ArrayList<Integer>> topTableGen(Grid grid) {

Map<Integer, ArrayList<Integer>> multiMap = new HashMap<>();

if (grid.getSize() != null) {
column = grid.getGrid();
Integer key = 0;
Integer gridSize = grid.getSize();
for (int i = 0; i < gridSize; i++) {
Integer checkPosition = 0;
ArrayList<Integer> value = new Arra yList<>();

for (int j = 0; j < gridSize; j++) {
if (column[j][i] != 0) {
checkPosition += column[j][i];
} else if ((column[j][i] != 0)&&(checkPosition != 0)) {
checkPosition += column[j][i];
} else {
if (checkPosition !=0) {
value.add(checkPosition);
checkPosition = 0;
}
}
}
if (checkPosition != 0) {
value.add(checkPosition);
}
multiMap.put(key, value);
key++;
}

V

return multiMap;
}
return null;
}

Class SideTableGen

public static Map<Integer, ArrayList<Integer>> SideTableGen(Grid grid) {

Map<Integer, ArrayList<Integer>> multiMap = new HashMap<>();

if (grid.getSize() != null) {
Integer gridSize = grid.getSize();
tempGrid = grid.getGrid();
Integer key = 0;
for (int j = 0; j < gridSize; j++) {
Integer checkPosition = 0;
ArrayList<Integer> value = new ArrayList<>() ;
Integer[] row = tempGrid[j];

for (Integer i : row) {

if (i != 0) {
checkPosition += i;

} else if((i != 0) && (checkPosition != 0)){
checkPosition += i;
} else {
if(checkPosition != 0) {
value.add(checkPosition);
}
checkPosition = 0;
}
}
if(checkPosition != 0) {
value.add(checkPosition);
}
multiMap.put(key, value);
key++;

}
return multiMap;
}
return null;
}

class BaseAction

public class BaseAction implements ActionBean {

protected ActionBeanContext context;
protected HttpServletRequest request;
protected HttpServletResponse response;
protected HttpSession session;

@Override

VI
public void setContext(ActionBeanContext context) {

this.context = context;
this.request = context. getRequest();
this.response = context.getResponse();
this.session = this.request != null ? this.request.getSession() : null;

}

@Override
public ActionBeanContext getContext() {
return this.context;
}
}

Class Ran domGridAction

@DefaultHandler
public Resolution view() {
Integer size = 5;
if (size != null) {
Integer[][] randomGrid = Grid.populate(size);
this.grid = new Grid(size, randomGrid);
this.request.getSession().setAttribute("grid", grid);
}

return new ForwardResolution("/pages/randomGrid.jsp");
}

Adnotația HandlesEvent

@HandlesEvent("check")
public Resolution check() {
String nr = this.request.getParameter("nr");
return new StreamingResolution("text/plain", nr);
}

Class ApplicationServlet

public class ApplicationServlet extends HttpServlet{

public void init(ServletConfig config) throws ServletException {
super.init(config);

BaseDao.init("com.postgresql.Driver", "jdbc:postgresql://localhost/restaurant",
"postgres", "postgres");
System.out.println( "Application initialized successfully");
}

}

VII
layout.jsp

<html lang="en">
<head>
<meta charset="UTF -8">
<meta name="viewport" content="width=device -width, initial -scale=1.0">
<meta http -equiv="X -UA-Compatible" content="ie=edge">
<title>gridGame</title>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384 -WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
integrity="sha384 –
smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPe a6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
</head>
<body>

<%–<aici sunt amplasate toate elementele de paginatie> –%>

<div class="container">
<div class="row justify -content -center">
<s:layout -component name="mainContent">
</s:layout -component>
</div>
</div>

</body>
</html>

taglibs.jsp

page contentType="text/html;charset=UTF -8" language="java"
taglib prefix="s" uri="http://stripes.sourceforge.net/stripes.tld"
taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"

randomGrid.jsp

<jsp:useBeanid="actionBean"scope="request"type="com.example.gridPuzzleProject.web.action.RandomGridActio
n"/>
<include file="/pages /layout/taglibs.jsp" >

<style>
#topColumnNumber,
#sideRowTable {
font-size: 1.2em;
font-weight: 600;
}

#topColumnNumber tbody {
display: flex;
flex-direction: row;
}

VIII
#topColumnNumber tbody tr {
width: 30px;
display: flex;
margin -right: 2px;
flex-direction: column;
align -items: center;
justify -content: flex -end;
}

#checkboxTable tbody td {
width: 30px;
height: 30px;
}

#checkboxTable tbody td input {
width: 100%;
height: 100%;
}

#sideRowTable {
float: left;
}

#sideRowTable tbody {
display: flex;
flex-direction: column;
}

#sideRowTable tbody tr {
width: 100%;
height: 30px;
margin -bottom: 2px;
display: flex;
flex-direction: row;
align -items: center;
justify -content: flex -end;
}

input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}

label {
display: block;
margin -bottom: 0 !important;
width: 30px;
height: 30px;
background: lightgray;
cursor: pointer;
}

input[type=checkbox]:checked + label {
background: black;
}
</style>

<s:layout -render name="/pages/layout/layout.jsp">

IX
<s:layout -component name="mainContent">

<html>
<body>

<form action="/RandomGrid.action?check" id="form" method="post">
<input type="hidden" name="nr" id="nr"/>
<table id="topColumnNumber">

<c:forEach items="${actionBean.topTableGen}" var="entry" varStatus="topColumn">
<tr id="topColumnTableRow<c:out value="${topColumn.index}"/>">
<td id="topColumnTableNr<c:out value="${topColumn.index}"/>">
<c:forEach items="${entry.value}" var="item" varStatus="loop">
${item}${!loop.last ? ',' : ''}
</c:forEach>
</td>
</tr>
</c:forEach>

</table>
<table id="sideRowTable">

<c:forEach items="${actionBean.sideTableGen}" var="entry" varStatus="sideTable">
<tr id="sideTableRow<c: out value="${sideTable.index}"/>">
<td id="sideTableNr<c:out value="${sideTable.index}"/>">
<c:forEach items="${entry.value}" var="item" varStatus="loop">
${item} ${!loop.l ast ? ',' : ''}
</c:forEach>
</td>
</tr>
</c:forEach>

</table>
<table id="checkboxTable">

<c:forEach items="${actionBean.sideT ableGen}" var="entry" varStatus="row">
<tr>
<c:forEach items="${actionBean.sideTableGen}" var="key" varStatus="col">
<td>
<input type="checkbox" id="chk<c:out value="${row.index}${col.index}"/>">
<label for="chk<c:out value="${row.index}${col.index}"/>"></label>
</td>
</c:forEach>
</tr>
</c:forEach>
</table>

<button type="submit" class="btn btn -primary float -right" onclick="check()">Check Solution</button>
<script type="text/javascr ipt">

function check() {

var mistakeChecked = false;

for (var i = 0; i < ${actionBean.gridSize}; i++) {
if (mistakeChecked) {
var nr = document.getElementById("n r").value = "incorrect";
}

var checkBoxFinalValue = 0;
var sideRowTableFinalValue = 0;

X
for (var j = 0; j < ${actionBean.gridSize}; j++) {
if (document.getElementById("chk" + i + j).checked) {
checkBoxFinalValue += 1;
}
}
for (var k = 0; k < document.getEleme ntById("sideTableNr" + i).innerHTML.split(',').length; k++) {
var tdElements = document.getElementById("sideTableNr" + i).innerHTML;
var tdElement = tdElements.trim();
var tdArray = tdElement.split(',');

for (var m = 0; m < tdArray.length; m++) {
tdArray[m] = tdArray[m].trim();
tdArray[m] = parseInt(tdArray[m]);
}

var value = tdArray.reduceRight(function (acc, val) {
return acc + val
});
sideRowTableFinalValue = +value;
}

if (sideRowTableFinalValue == NaN) {
sideRowTableFinalValue = 0;
}
if (checkBoxFinalValue != sideRowTableFinalValue) {
mistakeChecked = true;
}
}

for (var i = 0; i < ${actionBean.gridSize}; i++) {
if (mistakeChecked) {
var nr = document.getElementById("nr").value = "incorrect";
}
var checkBoxFinalValue = 0;
var topColumnTableFinalValue = 0;

for (va r j = 0; j < ${actionBean.gridSize}; j++) {
if (document.getElementById("chk" + j + i).checked) {
checkBoxFinalValue += 1;
}
}
for (var k = 0; k < document.getElementById("topColumnTableRow" +
i).innerHTML.split(',').length; k++) {

var tdElements = document.getElementById("topColumnTableNr" + i).innerHTML;
var tdEleme nt = tdElements.trim();
var tdArray = tdElement.split(',');

for (var m = 0; m < tdArray.length; m++) {
tdArray[m] = tdArray[m].trim();
tdArray[m] = parseInt(tdArray[m]);
}

var value = parseInt(tdArray.reduceRight(function (acc, val) {
return acc + val
}));
topColumnTableFinalValue = +value;
}
if (topColumnTableFinalValue == NaN) {
topColumnTableFinalValue = 0;
}
if (checkBoxFinalValue != topColumnTableFinalValue) {
mistakeChecked = true;
}

XI
if (!mistakeChecked) {
var nr = document.getEleme ntById("nr").value = "correct";
}
}
}
</script>
In final avem elemental care urmareste evenimente in partea clientului addEventListener.

<script>
document.addEventListener ('DOMContentLoaded', function () {
const sideRowTableWidth = document.querySelector('#sideRowTable').getBoundingClientRect().width;
const checkboxTable = document.querySelector('#checkboxTable');
const topCol umnNumber = document.querySelector('#topColumnNumber');
const topColumnNumberWidth = d
cument.querySelector('#topColumnNumber').getBoundingClientRect().width;
topColumnNumber.style.transform = 'translateX(' + (sideRowTableWi dth ) + 'px)';
checkboxTable.style.width = topColumnNumberWidth + 'px';
})
</script>

Similar Posts