Realizarea Unei Aplicatii Web cu Baze de Date Destinata Fundatiilor Si Ong Urilor

Realizarea unei aplicatii web cu baze de date destinata fundatiilor si ONG-urilor

Propunerea de proiectare a sistemului informatic

Aplicatia web cu baze de date este destinata fundatiilor si ONG-urilor, care au rolul de a ajuta persoanele defavorizate care nu au sau nu isi permit sa isi cumpere haine, sa isi achitizitioneze cele necesare in casa, sansa la educatie etc. Aceasta aplicatie web le permite utilizatorilor sa introduca produsele care inca functioneaza si sunt intr-o stare cat de cat buna si pe care doresc sa le arunce intr-o baza de date pentru a le dona. Acestia introduc un numar de contact, adresa, numarul de telefon si fac donatia.

Pentru punerea in practica a aplicatiei web, se vor utiliza urmatoarele tehnologii:

HTML (HyperText Markup Language), care va fii utilizat pentru realizarea unui schelet a aplicatiei web

CSS, utilizat pentru aranjarea in pagina a elementelor HTML si pentru a ii da o culoare si o forma

jQuery, utilizat pentru comportamentul aplicatiei web, atunci cand utilizatorii vor interactiona cu aceasta

PHP si MySql pentru legatura cu bazele de date si afisarea acestora in browser

Baza de date va contine 3 tabele:

tabela Donator, care va contine id_donator (cheie primara), nume_donator, adresa_donator, telefon_donator, produs_donat

tabela Donatii, care va contine id_produs (cheie primara), id_donator (cheie de legatura), nume_donator, telefon_donator, produs_donat – unde ceilalati utilizatori vor putea sa analizeze donatiile facute in cadrul aplicatiei

tabela contact, id_contact, nume, telefon si comentariu – unde utilizatorul va putea sa puna intrebari in legatura cu aplicatia web si sa isi spuna parerea despre aplicatie

Pentru a putea implementa aceasta aplicatie, se va utiliza un server local numit WAMP, care este de tip open-source. Nu este nevoie de descarcarea unui server PHP si a unui server de baze de date MySql, deoarece WAMP-ul le are integrate. Documentele vor fii stocate in directorul web, care este realizat la instalarea server-ului si este rulat in browser. Adresa URL care va fii scrisa in browser pentru a accesa componentele aplicatiei este urmatoarea: http://localhost/nume_fisier.php. Browser-ul va analiza fisierele de tip PHP aflate pe server si le va transforma in cod dinamic HTML, care va fii inteles si afisat de catre browser-ul web.

Pentru a putea face interogari asupra bazei de date, vom utiliza limbajul PHP:

se va realiza un fisier de baze de date, care va fii inclus la fiecare tranzactie asupra bazei de date

baza de date poate fii realizata utilizand PHP MyAdmin sau se pot realiza fisiere de tip .php si rulate in browser, care vor contine query-uri SQL pentru crearea bazei de date, a tabelelor si inserarea datelor.

Studiu de fezabilitate – oportunitatea proiectării sistemului informatic, costuri, impactul estimat

Aceasta aplicatie web va fii donata ONG-urilor si fundatiilor pentru a o putea utiliza in vederea ajutorarii oamenilor defavorizati, care nu au avut sansa la o viata normala. Implementarea acesteia nu necesita costuri suplimentare, deoarece este realizata cu tehnologii de tip open source. Singurul cost este reprezentat de gazduirea pe un server si numele domeniului utilizat. Domeniul utilizat va fii .ro, care le ofera clientilor posibilitatea de inregistrare anuala, iar costurile achitate reprezinta costul inchirierii acestor domenii pe perioada de un an. In cazul in care numele domeniului, dupa expirarea acestuia nu este reinnoit, acesta va fii sters. Daca domeniul se doreste a fii rascumparat, se va plati o taxa de 75 de euro pentru restaurare.

Consider ca o astfel de aplicatie va veni in ajutorul oamenilor care au nevoie sa duca o viata normala printr-o metoda simpla si cu un cost minim. Aplicatia este usor de utilizat, avand un design prietenos.

Stabilirea cerintelor functionale si nefunctionale. Analiza datelor si a procedurilor din punct de vedere static, dinamic, functional utilizand un instrument CASE

Pentru stabilirea cerintelor functionale si nefunctionale, s-a utilizat un instrument CASE numit Visual Paradigm.

Diagrama generala a cazurilor de utilizare:

Actorii sunt: donatorul, omul defavorizat si ONG-ul.

Un donator plaseaza o donatie. Acest caz de utilizare include introducerea datelor de identificare si a produselor donate. Ca si punct de extensie este necesara verificarea starii de functionalitate. Extensia se face in functie de necesitatea oferita de produsul donat omului defavorizat, pentru a vedea cat de bine corespunde nevoilor acestuia. Omul defavorizat comunica cu donatorul prin efectuarea unui apel telefonic prin care ii poate multumi donatorului pentru produsul donat. ONG-ul, comunica cu omul defavorizat prin nevoia de a afla cerintele persoanei defavorizate. Acesta comunica cu ONG-ul oferind informatii cu privire la nevoile lipsa.

Diagrama de clase:

Reprezinta o agregare compusa, in care clasa produse donate este strict legata de clasa aplicatie. Agregarea compusa este reprezentata printr-un romb plin plasat la capatul clasei intreg (aplicatie). Clasele domiciliu si prin posta sunt mostenite de superclasa transport. Relatia dintre cele 3 este una de generalizare si este permisa mostenirea multipla.

Diagrama de stare:

Cercul plin reprezinta starea intiala de la care se incepe, iar cel plin la mijloc si gol pe margini reprezinta sfarsitul vietii obiectului. In cadrul diagramei de stari au fost reprezentate si actiuni speciale care contin: actiune efectuata la intrarea intr-o stare (verificarea datelor de identificare) si actiune efectuata la iesirea dintr-o stare (verificat). Actiunea efectuata pe parcursul unei stari, de exemplu verificare calitate, poate fii intrerupta de un eveniment extern.

Diagrama de activitate:

Pentru realizarea diagramei de activitate au fost utilizate 3 partitii: Donator, ONG si Om defavorizat. Separarea a fost realizata in functie de responsabilitati. Diagrama de mai sus reda paralela unor actiuni. Activitatea intreprinsa de donator consta in completarea unui formular. ONG-ul verifica datele si i-a o decizie in functie de starea produselor donate. Daca acestea sunt nefunctionabile opreste procesul, iar in cazul in care acestea corespund solicita furnizarea acestora. Omul defavorizat, ca si activitate primeste produsul si trimite o multumire prin ONG, care ajunge la Donator si se opreste procesul.

Descrierea textuala a cazurilor de utilizare

4. Modelarea logica si fizica a sistemului – proiectarea statica, dinamica si functionala utilizand instrumente CASE

Diagrama de secventa:

Diagrama de secventa de mai jos prezinta temporal interactiunile intre obiecte. Rolul diagramei este de a modela scenariile posibile pentru a descoperi interfetele necesare fiecarui obiect si pentru a valida fiecare interfata cu adevarat utilizata. Duarata de viata a obiectului este reprezentata prin linia punctata vertical, iar timpul se scurge de sus in jos. Trimiterea mesajelor se reprezinta cu sageti orizontale indicand apelul unei operatii.

Diagrama de colaborare:

Diagrama de colaborare reprezinta diagrama care arata interactiunea dintre obiecte, parti sau subsisteme. Diagrama de comunicare este similara diagramei de secventa, diferenta constand in lipsa informatiei despre timp.

Definitivarea diagramei de clase (completarea cu atribute si metode):

Diagrama de mai sus ofera o imagine de ansamblu a sistemului tinta, prin descrierea obiectelor si claselor din interiorul sistemului si a relatiilor dintre ele. Aceasta ofera o mare varietate de utilizari: de la modelarea structurii de date specifice domeniului pana la sistemul tinta. Aveti posibilitatea reutilizarii acesteia in cadrul diagramei de interactiune pentru modelarea detaliata a comportamentului dinamic.

Proiectarea bazei de date

Baza de date contine 3 tabele cu urmatoarele informatii:

Tabela Donator va fii tabela unde cel care va dona unul sau mai multe produse va trebui sa introduca numele, telefonul si produsul sau produsele pe care acesta doreste sa le doneze

Tabela Donatii, este tabela unde cei care doneaza, pentru a se asigura ca produsele au ajuns la oamenii defavorizati, pot intra si extrage cu voia donatorilor numerele de telefon pentru a verifica daca procesul este valid

Tabela Contact, reprezinta tabela unde donatorii au posibilitatea de a introduce datele si pot sa lase un mesaj pentru beneficiarul aplicatiei web. Aici el poate completa parerile despre site si poate adresa intrebari

Tabela Donator si tabela Donatii sunt legate intre ele, utilizand o tabela de legatura Donator_Donatii, in care legaturile sunt de tipul unu la multi, folosind DonatorId si DonatiiId ca si chei de legatura.

Un donator poate avea unul sau mai multe date de contact, relatia fiind de unu la multi.

Proiectarea videoformatelor si a iesirilor

In cadrul etapei de analiza a sistemului informatic, intrarile si iesirile au fost identificate si prezentate, exprimand cerintele informationale la nivelul aplicatiei informatice. Sunt utilizate mai multe formulare pentru introducerea datelor predefinite, utilizate pentru a creea, a citi, a updata si a sterge informatia.

In faza de proiectare logica se reprezinta doar o ciorna a formularelor, ele fiind privite doar ca structura si machete si sunt realizate cu ajutorul unui produs program.

Obiectivul prezentarii detaliate a iesirilor este si acela de a determina formatul si continutul tuturor rapoartelor imprimate si ale documentelor si ecranelor furnizate de sistem.

Proiectarea iesirilor se va face astfel incat sa serveasca pentru:

transmiterea rezultatelor prelucrarii pe calculator utilizatorului

transmiterea proiectelui situatiilor finale programatorului, fara ambiguitate pentru a-i permite acestuia trecerea la intocmirea programelor necesare editarii sau vizualizarii.

In definitivarea formei si formatului de prezentare a situatiilor finale trebuie sa tinem seama de o serie de considerente practice cum ar fi:

Respectarea unor cerinte ale factorilor de decizie privind macheta situatiilor finale;

Restrictii tehnice;

Elemente de eficienta;

Lizibilitate – spatiere;

Utilizarea formularelor pretiparite

Utilizarea monitoarelor sau terminalelor video;

Utilizarea generatoarelor de rapoarte.

Activitatile parcurse in realizarea unui sistem de coduri sunt:

Analiza elementelor ce urmeaza a fi codificate;

Precizarea si uniformizarea tehnologiei, a denumirilor;

Stabilirea caracteristicilor si a relatiilor dintre elementele de codificat;

Alegerea tipurilor de coduri; estimarea capacitatii, lungimii si formatului codurilor;

Atribuirea codurilor elementelor de codificat;

Intretinerea nomenclatoarelor de coduri.

Este indicat a se utiliza, acolo unde este cazul, sistemele de codificare existente la nivelul economiei nationale(CAEN, SIRUES, SIRUTA, CNP, etc).

Multe limbaje de programare, pachete de programe si sisteme de gestiune a bazelor de date dispun de module specializate in editarea de rapoarte, ceea ce conduce la reducerea considerabila a eforturilor programatorilor. De obicei, aceste generatoare solicita prezentarea titlului, antetului de coloana, continutul unui rand de date, gradele de total si maniera lor de afisare, la inceputul sau la sfarsitul grupului de date, a paginii sau raportului. De asemenea se pot selecta dimensiunea unei linii, coloane, pagini, spatierea dintre linii, coloane, afisarea datelor privind momentul listarii. Astfel de module specializate exista in pachete de programe pentru gestionarea bazelor de date cum ar fi: ACCESS, d’BASE, ORACLE, FOXPRO, PARADOX, etc.

Parcurgerea unei situatii finale trebuie sa fie cat mai usoara, “citirea” unei situatii nu trebuie sa dea nastere la ambiguitati. Este necesar ca situatia sa fie autoexplicativa.

In proiectarea situatiilor finale intervin o serie de restrictii datorate caracteristicilor si performantelor tehnice ale echipamentelor periferice si anume: numarul maxim de caractere pe linie, numarul maxim de linii pe pagina/ecran. Pe piata se afla o gama variata de echipamente de redare a rezultatelor. Exista mai multe tipuri de imprimante, console si terminale video, ceea ce creeaza posibilitatea unei alegeri adecvate a perifericelor destinate obtinerii diverselor tipuri de situatii finale.

Proiectarea ierarhiei paginilor aplicatiei Web

Aplicatia web destinata fundatiilor si ONG-urilor pentru ajutorarea oamenilor defavorizati contine cateva sectiuni importante pentru a facilita modul de donare a produselor pentru donatori. Aceste sectiuni sunt:

Prima pagina contine detalii despre aplicatia web si modul in care se ajuta oamenii defavorizati. Aceasta mai contine meniul cu ajutorul caruia se poate naviga dintr-o pagina in alta.

Meniul contine urmatoarele elemente:

Donez nu arunc

Donatii facute

Galerie

Contacte

Pe pagina Galerie se vor gasi imagini, care reprezinta activitatea fundatiei pentru ajutorarea oamenilor.

Pagina Donez nu arunc reprezinta una dintre cele mai importante pagini din cadrul aplicatiei web. Aici cel care doreste sa doneze un produs poate sa adauge un produs prin completarea unui formular. Datele vor fii introduse in cadrul unui datagrid inserat cu ajutorul jQuery. Pe aceasta pagina se mai gasesc si alte butoane pentru schimbarea datelor introduse, pentru stergerea unor date sau pentru modificarea unor date, daca acestea au fost introduse gresit. In momentul in care se activeaza butoanele se vor deschide ferestre noi pentru completarea unor formulare, prin care datele din baza de date vor fii manipulate.

Pagina Donatii facute, reprezinta a 2 pagina ca importanta din cadrul aplicatiei, deoarece aici, donatorul este capabil sa vada donatiile realizate. Acesta poate sa sune alti donatori, pentru a se asigura ca produsele vor ajunge unde trebuie. Datele sunt afisate intr-un datagrid, pe care se poate face si sortare.

Pagina Contact, este ultima pagina din cadrul aplicatiei web in cadrul careia,utilizatorul poate sa introduca datele de contact si un mesaj catre administratorul site-ului sau pentru adresarea de intrebari.

Stabilirea necesarului de resurse software si hardware

Web-ul, aplicatiile web si comunitatea web in ansamblu au evoluat de la aparitia Internet-ului la Web 2.0 si la viziunea web-ului semantic, din acest motiv, fiind esentiala renuntarea la abordarea de tip ad-hoc si adoptarea principiilor proiectarii web.

La nivel de infrastructura, web-ul este un spatiu creat prin intermediul unor limbaje si protocoale specificate formal.

Aplicatiile web moderne sunt sisteme software complexe, iar dezvoltarea acestora necesita o abordare metodologica a proiectarii lui. Similar cu proiectarea aplicatiilor software, proiectarea web implica utilizarea unor abordari sistematice si cuantificabile pentru realizarea specificatiilor, implementarii, operatiilor si intretinerii aplicatiilor web de calitate superioara.

O aplicatie web este un sistem software bazat pe tehnologiile si standardele consortiului World Wide Web (W3C) care ofera resurse web specifice cum ar fi continut si servicii prin intermediul unei interfete numita browser web.

Aceasta definitie include in mod explicit tehnologiile dar si interactiunea utilizatorului. De aici putem deduce ca tehnologiile in sinea lor, la fel ca si serviciile web, nu sunt aplicatii web, dar pot fi o parte a acestora.

Proiectarea reprezinta in general o aplicatie practica a stiintei folosita in scopul planuirii aplicatiilor intr-un mod mai rapid, mai ieftin si mai sigur. Proiectarea software este definita ca o aplicatie a stiintei si matematicii prin care capacitatile unui sistem de calcul sunt facute utile oamenilor prin intermediul programelor, procedurilor si documentatiei asociate. Pe baza acestei definitii, putem defini proiectarea web in doua moduri: proiectarea web reprezinta aplicarea unei abordari sistemice si cuantificabile (concepte, tehnici, metode si utilitare) in analiza, proiectarea, implementarea, testarea, operarea si intretinerea aplicatiilor web de calitatea superioara si proiectarea web reprezinta o disciplina stiintifica implicate in studiul acestei abordari.

Aplicatiile web au grade variate de complexitate. Acestea pot fi pur informationale sau aplicatii de comert electronic complexe care functioneaza 24 de ore pe zi / 7 zile pe saptamana.

Arhitecturi in functie de aspectul datelor

Datele pot fi grupate in una din urmatoarele categorii arhitecturale: (1) date structurate de tipul celor aflate in baza de date; (2) documente de tipul celor utilizate in sistemele de management al documentelor; (3) date multimedia de tipul celor incluse pe serverele media. Aplicatiile web nu sunt limitate la una din aceste categorii de date, ele integreaza documente, media si baze de date.

Arhitecturi axate pe baze de date

Sunt disponibile numeroase utilitare si abordari pentru integrarea bazelor de date in aplicatiile web. Aceste baze de date sunt accesate fie direct prin intermediul extensiilor serverului web (in cazul arhitecturilor pe doua straturi), fie prin serverele de aplicatii (in cazul arhitecturilor pe N straturi). Pentru accesul la bazele de date relationale sunt disponibile interfete (APIs) pentru diferite platforme (Java Database Conectivity pentru aplicatii bazate pe Java sau Open Database Conectivity pentru tehnologii Microsoft).

Arhitecturi pentru managementul documentelor web

In afara de datele structurate din bazele de date si cele multimedia de pe serverele media, continutul aplicatiilor web este frecvent procesat sub forma documentelor. Arhitecturile de management al continutului ofera posibilitatea integrarii documentelor din surse diferite, reprezentand un mecanism pentru integrarea acestora in aplicatiile web.

Figura de mai jos reprezinta componentele unei arhitecturi de management a continutului. Un server web receptioneaza o cerere de la client si o trimite mai departe serverului de furnizare a continutului. Daca continutul solicitat nu este în cache atunci cererea este trimisa mai departe serverului de management al continutului. Continutul poate fi disponibil direct pe server (în forma statica ca un document sau într-o baza de date) sau poate fi accesat extern. În functie de tipul de integrare continutul extern poate fi extras fie prin accesarea bazelor de date externe (direct sau prin utilizarea unui serviciu de agregare) sau dintr-un serviciu sindicat. Spre deosebire de accesarea unei baze de date, serviciile sindicat pot avea si functii suplimentare (exemplu facturarea automata a drepturilor de licenta).

Componentele unei arhitecturi de management a continutului

Sursa: http://www.scrigroup.com/files/informatica/webdesign/22_poze/image009.gif

Arhitecturi pentru datele multimedia

Capacitatea de a manipula un volum mare de date are un rol important în proiectarea sistemelor care utilizeaza continut multimedia. Desi volumul de date nu este important în arhitecturile web axate pe baze de date, acesta influenteaza considerabil arhitectura si proiectarea aplicatiilor web multimedia.

Datele multimedia – audio si video- pot fi transmise prin intermediul protocoalelor internet standard (HTTP sau FTP), asemenea celorlalte date utilizate în aplicatiile web. Aceasta abordare este utilizata de un numar mare de aplicatii web deoarece prezinta avantajul ca nu

necesita componente suplimentare pe server; dezavantajul este ca descarcarile de fisiere multimedia sunt foarte lente.

Se pot utiliza tehnologii streaming pentru a minimiza perioada de asteptare pentru redarea continutului multimedia; prin streaming un client reda un fisier audio si/sau video la câteva secunde dupa ce începe receptionarea acestuia de pe server. Aceasta tehnica evita descarcarea întregului fisier înainte de a începe redarea lui. Continutul trebuie transmis în timp real, ceea ce necesita o latime de banda corespunzatoare (garantarea latimii de banda a transmisiei este numita calitatea serviciului – quality of service).

În general sunt folosite doua protocoale pentru streaming-ul de continut multimedia: un protocol preia transmisia datelor multimedia la nivelul retea, iar celalalt controleaza fluxul prezentarii (exemplu pornirea si oprirea unui clip video) si transmisia meta-datelor. Un exemplu de protocol de retea este RTP (Real Time Protocol) care coopereaza cu un protocol de control numit RTSP (Real Time Streaming Protocol).

Exista doua domenii distincte de aplicatii pentru streaming-ul datelor multimedia: primul face disponibil la cerere continutul existent (video la cerere) iar al doilea distribuie live continutul unui numar mare de utilizatori (exemplu web casting). Fiecare din aceste doua cazuri de utilizare formuleaza cereri diferite la nivelul retelei si arhitecturilor hardware si software. Desi fiecare utilizator stabileste propria sa conexiune la server într-un scenariu la cerere cauzând probleme majore ale latimii de banda si încarcarii serverului, broadcasting-ul realizeaza cereri sporite la nivelul retelei. În mod ideal, un server utilizat pentru broadcasting sa administreze un singur stream media, care este difuzat simultan catre toti utilizatorii de catre infrastructura retelei (exemplu de router-e) ca în figura de mai jos. Deoarece multicasting-ul nu este suportat în general în internet, serverul trebuie sa foloseasca conexiuni punct-la-punct pentru a simula functionalitatea broadcast.

Componentele unei arhitecturi pentru datele multimedia

Sursa:

http://www.scrigroup.com/files/informatica/webdesign/22_poze/image010.gif

Proiectarea aplicatiilor web pe baza tehnologiei

Web-ul a aparut ca un sistem hypertext extrem de simplu care sustine conceptual de legaturi globale. Ulterior, web-ul s-a focalizat pe conexiuni la baze de date, acestea implicand proiectarea informatiei, fiind utilizata partial in proiectarea aplicatiilor web. Integrarea modulelor software extinse pe partea clientului si serverelor, are o importanta deosebita pentru web.

Cei care dezvolta aplicatii web, ar trebui sa descompuna aplicatiile web pe trei straturi logice, care la randul lor se impart in doua jumatati pe baza aceluiasi principiu. Se identifica urmatoarele trei straturi:

Proiectarea prezentarii – in care se prezinta aspectul, un rol important avand interfetele utilizator multi-formale

Proiectarea interactiunilor – in care se proiecteaza navigarea prin utilizarea retelelor si casetele de dialog prin utilizarea componentelor

Proiectarea functionala – reprezinta inima aplicatiei web

Initial, World Wide Web-ul a fost caracterizat prin pagini Html axate pe document si bazate pe text, pentru care termenul de “aplicatie web” parea exagerat. Limbajul de descriere a unui document HTML isi are originea in domeniul presei si promoveaza crearea de documente mari, structurate, care sunt imbunatatie prin legaturi. Secretul succesului a constat in integrarea totala a legaturilor globale (URL-uri). Trecerea catre „adevaratele” aplicatii web, impreuna cu dezvoltarea limbajelor de scripting (exemplu JavaScript pe partea de browser) si a interfetelor (exemplu CGI pe partea de server) au permis interactivitatea, accesul la bazele de date si crearea de documente HTML dinamice.

Implementarea Aplicatiei

Pentru realizarea aplicatiei web cu baze de date au fost utilizate mai multe tehnologii, precum: HTML, CSS, JavaScript, jQuery,PHP si MySQL.

HTML – HyperText Markup Language:

Este un limbaj utilizat pentru descrierea scheletului unei aplicatii web. Cu ajutorul acestui limbaj se descriu elementele din cadrul aplicatiei web. Se utilizeaza etichete HTML cu ajutorul carora se descriu aceste elemente.

HTML vine de la Hyper Text Mark-up Language si reprezinta codul care se afla la baza paginilor web.

Paginile HTML reprezinta fisiere formate din tag-uri si au ca extensie .htm sau .html. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>, mai exista si unele tag-uri care nu se inchid, atunci utilizandu-se <eticheta/>. Navigatorul web analizeaza aceste etichete si afiseaza rezultatul pe ecran. HTML-ul este un limbaj care stie sa faca deosebirea intre litere majuscule si miniscule.

Pagina principala a unui domeniu este fisierul „index.html” respectiv „index.htm”. Această pagină este setată a fi afișată automat la vizitarea unui domeniu.

Ca si exemplu, la vizitarea domeniului www.nume.ro se afiseaza o pagina: www.nume.ro/index.html.

Etichetele pot avea unul sau mai multe atribute care primesc valori:

<eticheta atribut=’valoare’>..</eticheta>

Un document HTML reprezinta:

<!DOCTYPE html> – versiunea de HTML utilizata si tipul

Zona head, care reprezinta medatale (date despre pagina web) <head></head>

Zona body, reprezinta partea vizibila in cadrul browser-ului <body></body>

Versiunea HTML poate fi:

HTML 4.01:

<!DOCTYPE html public “-//w3c//dtd html 4.01//en” “http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Transitional

<!DOCTYPE html public “-//w3c//dtd” html 4.01 transitional//en” http://www.w3.org/tr/html4/loose.dtd>

HTML 4.01 Frameset

<!DOCTYPE html public “-//w3c//dtd” html 4.01 frameset//en” http://www.w3.org/tr/html4/frameset.dtd>

HTML 5

<!DOCTYPE html>

Paginile HTML incep cu etichetele <html></html>, care definesc o pagina web.

In cadrul etichetelor <html></html> se regasesc perechile <head></head> si <body></body>.

Sectiunea <head></head> contine titlul paginii, care se pune intre etichetele <title></title>, meta date <meta>, stiluri pentru a formata textul pentru toata pagina, script-urile pentru legaturile cu fisierele externe.

Introducere meta:

<meta name=”” content=””/>

Link catre fisier extern CSS:

<link rel=”stylesheet” type=”text/css” href=”nume_fisier.css”/>

Structura de baza unei pagini HTML:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Se pot introduce comentarii pentru a descriere codul, iar acesta nu va fii afisat in cadrul browser-ului:

<!–comentariu –>

CSS – Cascading Style Sheets:

Este un limbaj utilizat pentru asezarea in pagina a elementelor HTML, pentru realizarea template-urilor, pentru a da culoare paginilor web. Acest lucru se poate realiza utilizand un singur fisier .css, cu ajutorul caruia se poate da culoare intregii aplicatii web.

JavaScript:

JavaScript reprezinta un limbaj de programare orientat obiect, care este diferit de Java. Acest limbaj este utilizat pentru a adauga interactivitate in cadrul paginilor web. Codul JavaScript este rulat de catre browser. Limbajul este utilizat la nivel mondial in construirea site-urilor web, dar este utilizat si pentru accesul la obiecte existente in alte aplicatii. A fost dezvoltat de catre Brendan Eich sub numele de Mocha, apoi LiveScript si redenumit in final JavaScript.

Javascript are o sintaxa apropiata de cea a limbajului C, dar are mai multe in comun cu limbajul Self decat cu Java.

jQuery:

jQuery reprezinta o librarie JavaScript, realizata pentru a usura si imbunatati procese precum traversarea arborelui DOM in HTML, animatii, cereri de tip Ajax. jQuery ruleaza in orice browser. Pentru a putea incarca jQuery in cadrul paginilor web, se adauga o librarie care este recomandat sa fie descarcata de pe un CDN (Content Delivery Network) de la Microsoft sau Google. Biblioteca a fost lansata in anul 2006 de catre John Resig.

PHP:

PHP este un limbaj de programare orientat pe server. PHP reprezinta HyperTextPreprocessor. A fost utilizat initial pentru a realize pagini web dinamice. Acesta este

utilizat pe scara larga in dezvoltarea paginilor si aplicatiilor web, deoarece este open source si este un limbaj puternic.

Conform unor statistici realizate, acest limbaj este instalat pe 20 de milioane de site-uri web si pe 1 milion de servere web. Free Software Foundation il considera a fii un software liber.

Initial, acest limbaj a fost dezvoltat de Rasmus Lerdorf. In momentul in care a luat amploare si numarul utilizatorilor a crescut, dezvoltarea a fost preluata de Grupul PHP.

MySql:

MySql reprezinta un sistem de gestiune a bazelor de date relationale. Acesta a fost produs de compania suedeza MySQL AB si distribuit sub Licenta GNU. Este unul dintre cele mai populare SGBD-uri de tip open-source, reprezentand o component cheie a stivei LAMP( Linux, Apache, MySQL, PHP ).

MySQL este componentă integrata a platformelor LAMP sau WAMP (Linux/Windows-Apache-MySQL-PHP/Perl/Python). Popularitatea sa ca aplicatie web este strans legata de cea a PHP-ului care este adesea combinat cu MySQL si denumit Duo-ul Dinamic.

Pentru administrarea bazelor de date MySQL se poate utilize modul linie de comanda sau interfata grafica: MySQL Administrator si MySQL Query Browser. Un al instrument de management al bazelor de date, este reprezentata de aplicatia gratuita, scrisa in PHP, phpMyAdmin.

MySQL poate sa fie rulat pe multe dintre platformele software existente: AIX, FreeBSD, GNU/Linux, Mac OS X, NetBSD, Solaris, SunOS, Windows 9x/NT/2000/XP/Vista.

Prezentarea aplicatiei:

Am ales construirea unei aplicatii web care sa poata fii utilizata de fundatii, ONG-uri pentru a veni in ajutorul oamenilor care nu au avut sansa la o viata normala. In urma unei analize realizate, am observat ca in Romania exista aplicatii pentru a face donatii, dar majoritatea au un design greoi, care ii incurca pe donatori.

Dupa analizarea mai mult multor aplicatii de acest gen, am incercat sa realizez un design cat mai simplu, care sa vina in ajutorul utilizatorului atunci cand doreste sa faca o donatie. Aplicatia poate fii dezvoltata si poate sa fie utilizata la nivel mondial.

In momentul in care am inceput sa lucrez la aceasta aplicatie, am luat in considerare faptul ca aceasta, trebuie sa aiba un meniu prietenos, care sa poate fii usor utilizat de catre orice persoana, indiferent de nivelul de educatie. In prezent, site-ul se afla in dezvoltare si voi dori sa imbunatatesc design-ul, sa fie vizibil si pe tablete si telefoane mobile, pentru a putea fii utilizat la scara larga si astfel sa fie ajutati milioane de oameni.

In pagina principala, este prezentat meniul, care permite navigarea catre toate celelalte pagini web din cadrul site-ului si o descriere despre o fundatie fictiva. Template-ul a fost realizat in HTML si CSS, utilizand ca si editor: Notepad++.

Fig1. Pagina principala din cadrul aplicatiei web

Pagina Donez-nu arunc, contine un formular HTML, in care donatorul poate sa incarce in baza de date produsul pe care doreste sa il doneze. Aceste date vor fii afisate intr-un datagrid implementat cu jQuery. Daca donatorul a gresit o anumita informatie, acesta poate sa schimbe datele. Daca se decide sa renunte la donatie, sau sa doneze un alt produs are si posibilitatea sa stearga inregistrarea adaugata dupa id.

Fig2. Pagina in care donatorul poate realiza o donatie

In cadrul paginii Donatiile facute, utilizatorul poate sa vada donatiile totale, care au fost realizate si au ajuns la beneficiari. Pagina contine un datagrid, pe care se poate realize si sortarea, dupa campurile existente in cadrul tabelului.

Fig3. Pagina in care donatorul poate sa vada mesajele de multumire al tuturor donatorilor

Pagina Galerie, este pagina care contine imagini, unde se pot adauga activitatile fundatiilor sau ONG-urilor. Galeria de imagini este realizata in jQuery.

Fig4. Pagina care reprezinta activitatea fundatiei

Pagina Contact, este pagina unde donatorul, poate sa completeze datele personale si sa adreseze o intrebare fundatiei sau ONG-ului care utilizeaza aplicatia, astfel incat acestea pot raspunde si lamuri donatorul in privinta donatiilor facute.

Fig5. Pagina de contact din cadrul aplicatiei web

Testarea aplicatiei

Pentru a testa aplicatia, a fost nevoie de un server web, astfel incat sa poata fii rulate fisierele .php. Fisierele au fost salvate in directorul root, unde a fost instalat serverul local WAMP.

Pentru a accesa aplicatia, a fost incarcat in URL-ul browser-ului urmatorul link: http://localhost/WebTechnologies/index.php.

Pentru a putea vedea erorile de jQuery, JavaScript, s-a accesat consola browser-ului prin apasarea butonului F12. In cadrul consolei se pot vedea erorile aparute pe partea de client. Pe partea de backend, serverul web afiseaza eroarea produsa in cadrul fisierului php. In cazul unei erori de baze de date, PHP pune la dispozitie mai multe posibilitati de testare: utilizarea functiei mysqli_error() sau utilizarea metodei var_dump(), care intoarce tipul de data si valoarea.

Descrierea activitatilor de mentenanta:

Aplicatia web, poate fii intretinuta usor. Mentenanta bazelor de date poate fii realizata utilizand PHP MyAdmin. Este oferita o interfata grafica, facand posibila utilizarea simpla a acesteia de catre orice persoana, care detine cunostinte de baza in domeniul programarii.

Codul din cadrul paginilor web, poate fii usor de intretinut prin modificarea acestuia cu ajutorul unui editor de text. Se pot schimba sursele imaginilor, sursele link-urilor si a altor elemente din cadrul aplicatiei.

Codul utilizat pentru implementarea datagrid-ului care contine datele din baza de date:

Codul de mai jos implementeaza un datagrid cu ajutorul unui widget realizat de catre cei de la jQuery.

In variabila source sunt stocate: tipul datelor (json), field-urile din baza de date care vor fii stocate si url-ul unde se selecteaza datele care urmeaza a fii afisate.

$(document).ready(function () {

// prepare the data

var source ={

datatype: "json",

datafields: [{name:'id_donatie'},{ name: 'nume' },{ name: 'telefon' },{ name: 'email' },{ name: 'nume_produs' },{ name: 'descriere_produs' },{ name: 'stare_produs' }],

url: '../WebTechnologies/selectare_donatie.php'

};

$("#jqxgrid").jqxGrid({

source: source,

theme: 'classic',

columns: [{text:'Id',datafield:'id_donatie',width:50},{ text: 'Nume', datafield: 'nume', width: 200 },{ text: 'Telefon', datafield: 'telefon', width: 200 },{ text: 'E-mail', datafield: 'email', width: 200 },{ text: 'Nume Produs', datafield: 'nume_produs', width: 200 },{ text: 'Descriere Produs', datafield: 'descriere_produs', width: 400 },{ text: 'Stare Produs', datafield: 'stare_produs', width: 200 }],

height:220,

width:1009

});

});

Pentru a ne putea conecta la baza de date avem nevoie de un fisier de conexiune. Atunci cand realizam orice asupra bazei de date avem nevoie de includerea fisierului de conectare.

<?php

$host = "localhost";

$username = "root";

$password = "";

$dbname = "Donatii";

$con = mysqli_connect($host,$username,$password,$dbname) or die("Conexiunea nu a putut fii realizata!");

//if(!$con){

//echo "Conexiunea nu a putut fii realizata: ". mysqli_connect_error($con);

//}else{

//echo "Conexiunea a fost un succes!";

//}

?>

Template-ul a fost realizat de la zero intr-un editor de text: Notepad++:

<!DOCTYPE html> <!–specifica browser-ului versiunea de html utilizata pentru afisarea corecta a continutului, in acest caz HTML5–>

<html> <!–specifica faptul ca este vorba despre o pagina web–>

<head> <!–sectiunea generala – metadata (date despre pagina)–>

<title>Doneaza, orice conteaza</title> <!–este importanta pentru motoarele de cautare, pentru partea de cautare etc–>

<link rel="shorcut icon" href="../WebTechnologies/donate.png"/>

<meta charset="UTF-8"/> <!–sirul de caractere in care este scris site-ul, contine aproape toate caracterele si simbolurile existente–>

<link rel="stylesheet" href="style.css"/>

</head>

<body> <!–sectiunea vizibila in cadrul paginii web–>

<div class="mainWrapper"> <!–container principal–>

<div class="header"> <!–container pentru header (logo, motto si meniu)–>

<h1>Fa un suflet sa zambeasca</h1>

<img id="logo" src="../WebTechnologies/logo.jpg" width="250" height="200" alt="Doneaza ceva" title="Doneaza ceva"/>

<ul class="meniu">

<li><a href="../WebTechnologies/index.php">Despre noi</a></li>

<li><a href="../WebTechnologies/donez.php">Donez – nu arunc</a></li>

<li><a href="../WebTechnologies/toate_donatiile.php">Donatiile facute</a></li>

<li><a href="../WebTechnologies/galerie.php">Galerie</a></li>

<li><a href="../WebTechnologies/Contact.php">Contact</a></li>

</ul>

</div>

<div class="content" style="overflow:auto;">

<h2>Asociatia "Fa un suflet sa zambeasca"</h2>

<p style="text-indent:50px;font-weight:bold;padding-left:6px;color:#FFFF66;font-family:Arial,Verdana,'Times New Roman';">Asociatia "Fa un suflet sa zambeasca" este cat se poate de transparenta,

la baza ei fiind 3 membri fondatori, care nu doresc altceva decat sa ajute oamenii, care nu au avut sansa la o viata normala. Asociatiai "Fa un suflet sa zambeasca" este dornica sa primeasca noi membri in echipa, membri dornici sa ajute si ei la randul lor oamenii aflati in dificultate.

<pre style="text-align:center;color:lightcyan;font-size:18px;font-family:Arial,Verdana,'Times New Roman';">Cu aleasa dragoste

Asociatia "Fa un suflet sa zambeasca"</pre></p>

<p style="text-indent:50px;font-weight:bold;padding-left:6px;color:#FFFF66;">Din pacate, lumea in care traim si pe care noi o dorim mai buna, uneori ne ofera si probleme prea grele de purtat doar pe umerii nostri.

<p style="text-indent:50px;font-weight:bold;padding-left:6px;color:#FFFF66;font-family:Arial,Verdana,'Times New Roman';">

La capăt nu ne rămân decât jertfele iubirii și mulțumirea binefacerii,pe toate celelalte le pierdem.Un credincios al lui Hristos nu trece în lumea aceasta

printre trupuri,ci printre suflete.

Nu ne uităm la fețe,ci la conștiințe.

Nu vedem râsul oamenilor,ci tragediile lor.

Fii alături de cei care vor să facă bine,întinde-ți mâna prin întunericul amar și aprinde făclia speranței.Nu ai puterea să o faci tu roagă pe alții care știi ca o pot face.Dă mai departe acest mesaj.Clădește casă în ceruri aici castelul de nisip se sfarmă sub valuri.

Singur nu reușești,împreună vom reuși!

</p>

<img src="../WebTechnologies/zambet.jpg" title="Ofera un zambet" alt="Ofera un zambet" width="150" height="100" style="position:relative;left:79%;"/>

<p style="text-align:right;font-weight:bold;color:#FFFF66;font-family:Arial,Verdana,'Times New Roman';">Fii solidar…<br/>

<span>Împreună putem schimba vieți!</span></p>

</div>

<div class="footer">

<div class="footer_meniu" style="text-align:center;position:relative;top:10%;">

<a href="../WebTechnologies/index.php">Despre noi |</a>

<a href="../WebTechnologies/donez.php">Donez – nu arunc |</a>

<a href="../WebTechnologies/toate_donatiile.php">Donatiile facute |</a>

<a href="../WebTechnologies/galerie.php">Galerie |</a>

<a href="../WebTechnologies/Contact.php">Contact</a>

</div>

<span style="position:relative;top:55px;left:40%;color:white;font-size:14px;font-family:'Times New Roman'">&copy; <?php echo date('Y')?> "Fa un suflet sa zambeasca"</span>

</div>

</div>

</body>

</html>

Bibliografie:

Elemente utilizate in cadrul aplicatiei web cu baze de date:

Logo:

https://askthekidwhisperer.files.wordpress.com/2011/08/healthy-happy-kid.jpg

http://www.hirolaconservation.org/images/logo/Donate.png

Efecte CSS:

Text-shadow aplicat la header si meniu:

http://hallofhavoc.com/2011/03/cool-text-effects-using-css3-text-shadow/

Continut site (texte, imagini etc.):

http://safimoameni.blogspot.co.uk/p/despre-noi.html

https://devorbacugandurilemele.files.wordpress.com/2009/09/zambet.jpg

http://pichost.me/1766978/

http://www.prowallpapers.ro/wallpapers/copil_trist-1024×768.jpg

http://3.bp.blogspot.com/-YfW1WxWmi-w/VApn7V3CWYI/AAAAAAAAR3E/Nf5loFSd8N8/s1600/Stunning%2BRaina%2BWallpapers%2BHQ%2B-%2BImagesAdda.in.jpg

http://fc00.deviantart.net/fs70/i/2013/032/f/8/rainbow_space_wallpaper_background_by_mcrroxxmysoxx-d5ti1qu.png

http://dailyinspires.com/wp-content/uploads/2013/02/funky_colorful-rainbow-wallpaper-HD.jpg

http://lzamgs.com/images/img10/abstract-quotes-about-life-background-1.jpg

Lighbox – Non Commercial Use: http://flipgallery.net/#download

http://2.bp.blogspot.com/_NDMEIWLQA0I/TIlIt3ur-5I/AAAAAAAAFuY/_u0A0-vN4eQ/s1600/coif.jpg

http://www.ziuaveche.ro/wp-content/uploads/2011/12/2_haiti.jpg

http://www.rotaryclubdanubius.ro/html/media/articles/0/0/12/IMG_1284.jpg

http://savelife.info/rom/files/2011/11/salvati_viata.jpg

http://www.romaniapozitiva.ro/wp-content/uploads/2014/12/Electrolux-Cooking-caritabil-la-Casa-Regala-Cheese-cake-Large.jpg

http://www.prokinder.ro/wp-content/gallery/targ-caritate/20140225_174536.jpg

http://www.antena3.ro/thumbs/big2/2011/12/06/isi-fac-temele-pe-stomacul-gol-si-n-au-lipsit-niciodata-de-la-scoala-tu-le-poti-oferi-o-sansa-in-119944.jpg

http://lh3.ggpht.com/-QN-CH3l7wSQ/VF4J0dXXjjI/AAAAAAAAA_E/pbjc5vssguo/s640/8X6F6SM8dY.png

http://romaniaresponsabila.ro/wp-content/uploads/2015/02/pusculita.jpg

http://eficientcurs.ro/wp-content/uploads/2014/09/pusculita-eficient-curs.png

http://stockfresh.com/thumbs/taichesco/3379581_mare-porc-pusculita-clasic-roz.jpg

http://jeasyui.com/demo/main/index.php?plugin=DataGrid – DataGrid

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/bind-jquery-grid-to-mysql-database-using-php.htm

http://www.jqwidgets.com/download/:

For personal, non-commercial use

The non-commercial version is suitable for a personal website that does not generate any direct or indirect revenue,

a school website or a non-profit organisation. If you agree to use jQWidgets for non-commercial purposes, please proceed with your download.

http://www.inmatriculari-auto-iasi.ro/images/contact.jpg

http://www.misiuneacasa.ro/forum/attachment.php?attachmentid=69239

Bind jQuery Chart to MySql Database using PHP

http://www.jquery-bootgrid.com/

Download jQuery Widgets SDK

For non-profit organizations or
non-commercial personal website

http://jsfiddle.net/jqwidgets/6HRU8/

http://ro.wikipedia.org/wiki/HyperText_Markup_Language

http://ro.wikipedia.org/wiki/JavaScript

http://ro.wikipedia.org/wiki/JQuery

http://ro.wikipedia.org/wiki/PHP

http://ro.wikipedia.org/wiki/MySQL

https://www.google.ro/#q=Cercul+plin+reprezinta+starea+initiala+de+la+care+se+incepe,+iar+cel+plin

http://discipline.elcom.pub.ro/isc/Curs_ISC_2010_43_v01.pdf

http://www.cs.ubbcluj.ro/~tzutzu/Didactic/AnalizaGestSisteme/Curs%2003%20-%20Scenarii.Diagrame%20de%20interactiune.pdf

http://www.preferatele.com/informatica/PROIECTAREA-LOGICA-A-SISTEMELO255.php

http://www.scritub.com/stiinta/informatica/Proiectarea-aplicaiilor-web204316910.php

http://en.wikipedia.org/wiki/World_Wide_Web

http://www.scrigroup.com/calculatoare/webdesign/Proiectarea-aplicatiilor-web-p43336.php