Proiectarea Unui Sistem E Commerce

Cuprins

1. Introducere 2

1.1. Enunțul temei 2

2. Fundamentare teoretică 3

2.1. PHP 3

2.2. Baze de date 5

2.3. HTML 7

2.4. CSS(Cascading Style Sheets) 9

2.5. Serverul Apache 12

2.6. Platforma EasyPhp 13

2.7. Platforma Notepad++ 15

3. Specificațiile Aplicației 16

3.1. Schema Bloc 16

3.2. Funcționalități 17

4. Documentația tehnică a aplicației 19

4.1. Descrierea structural-funcțională 19

4.1.1. Structura generală 19

4.2. Scripturi generale 21

4.3. Modulul „Login” 24

4.4. Modulul „Administrator” 27

4.4.1. Sub-modulul Acasa 28

4.4.2. Sub-modulul Administrare masini 30

4.4.3. Sub-modulul Rapoarte 33

4.5. Modulul Utilizator 36

4.5.1. Sub-modulul Acasa 36

4.5.2. Sub-modulul Date de contact 39

4.5.3. Sub-modulul Cont 39

4.6. Baza de date 40

4.6.1. Tabela an 43

4.6.2. Tabela cos_cumparaturi 43

4.6.3. Tabela detalii_tehnice 44

4.6.4. Tabela marca 45

4.6.5. Tabela masina 46

4.6.6. Tabela tara 47

5. Ghidul Utilizatorului 48

5.1. Accesul în aplicație 48

5.2. Creare Cont 49

5.3. Rolul Administrator 50

5.3.1. Pagina principală 50

5.3.2. Administrare Mașini 51

5.3.3. Rapoarte 52

5.4. Rolul Cumpărător 53

5.4.1. Pagina principală 53

5.4.2. Date de contact 54

5.4.3. Contul tău 55

6. Concluzii 56

7. Bibliografie 57

Introducere

Enunțul temei

În următoarele pagini se va prezenta un sistem „e-commerce” de prezentare si de vânzare a unor mașini, cu alte cuvinte un ”magazin online”.

Proiectarea generală are ca obiectiv definirea sistemului din punct de vedere structural și funcțional. Ea presupune stabilirea componentelor sistemului informatic, analiza datelor de intrare, stabilirea legăturii dintre componentele sistemului, astfel încât toate elementele sale să formeze un întreg.

Aplicația are ca obiectiv oferirea informațiilor într-un mod simplu,intuitiv și rapid.

Aplicația asigură două servicii:

Un serviciu pentru administrator cu rol privat

Un serviciu pentru cumpărător cu rol public

Serviciul pentru administrator asigură gestionarea utilizatorilor, popularea bazei de date, ștergerea și modificarea anumitor câmpuri din baza de date.

Serviciul pentru cumpărător asigură vizualizarea și a detaliilor relevante despre mașinile din baza de date.

Gestionarea informațiilor se realizează cu ajutorul unei baze de date MySQL.  Este cel mai popular sistem de gestionare al bazelor de date open-source la ora actuală[4], fiind o componentă cheie a stivei LAMP (Linux,Apache, MySQL, PHP)[1].

În cadrul aplicației, proiectarea bazei de date presupune utilizarea a 7 tabele cu legături între ele.

Fundamentare teoretică

PHP

PHP este un limbaj de programare. Numele PHP provine din limba engleză și este un acronim recursiv : PHP: Hypertext Preprocessor. Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în principal înglobat în codul HTML, dar începând de la versiunea 4.3.0 se poate folosi și în mod „linie de comandă” (CLI), permițând crearea de aplicații independente. Este unul din cele mai importante limbaje de programare web[5] open-source și server-side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare. Conform statisticilor este instalat pe 20 de milioane de situri web și pe 1 milion de servere web[6].

Exemplu de cod PHP:

<?php

echo "Salut, sunt un script PHP !";

?>

PHP este un limbaj simplu de utilizat, structura seamănă foarte mult cu limbajele C și Perl, având în comun câteva componente chiar și cu limbajul Java, rezultând o sintaxă combinată din cele 3 limbaje.

O facilitate importantă a limbajului este lucrul cu majoritatea bazelor de date relaționale: de la MySQL până la Oracle, ș.a.

PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Windows, sau Mac OS X și poate interacționa cu majoritatea serverelor web. Codul dumneavoastră PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de utilizator (clientului -browserului- fiindu-i transmis numai cod HTML).

Arhitectura tip LAMP a devenit populară în industria web ca modalitate rapidă, gratuită și integrată de dezvoltare a aplicațiilor. Alături de Linux, Apache și Mysql, PHP reprezintă litera P, deși uneori aceasta se referă la Python sau Perl. Linux ocupă rolul de sistem de operare pentru toate celelalte aplicații, MySQL gestionează bazele de date, Apache are rol de server web, iar PHP are rol de interpretator și comunicator între acestea.

PHP folosește extensii specifice pentru fișierele sale: .php, .php3, .ph3, .php4, .inc, .phtml. Aceste fișiere sunt interpretate de către serverul web iar rezultatul este trimis în formă de text sau cod HTML către browser-ul clientului. [7]

PHP-ul este unul din cele mai folosite limbaje de programare server-side, conform unui studiu efectuat de Netcraft în aprilie 2002, apărând pe 9 din cele 37 milioane de domenii cercetate în studiu. De asemenea, există un grafic al creșterii folosirii PHP-ului pe site-ul oficial. Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor caracteristici :

Familiaritatea : sintaxa limbajului este foarte ușoară combinând sintaxele unora din cele mai populare limbaje Perl sau C;

Simplitatea : sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci sau de directive de compilare, codul PHP inclus într-un document executându-se între marcajele speciale;

Eficiența : PHP-ul se folosește de mecanisme de alocare a resurselor, foarte necesare unui mediu multiutilizator, așa cum este web-ul;

Securitate : PHP-ul pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță;

Flexibilitate : fiind apărut din necesitatea dezvoltării web-ului, PHP a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit server web, PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, server, etc.;

Gratuitate : este probabil cea mai importantă caracteristică a PHP-ului. Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă a PHP-ului la nevoile web-ului, eficientizarea și securizarea codului.[1]

Baze de date

O Bază de date, uneori numită și Bancă de date, reprezintă o modalitate de stocare a unor informații și date pe un suport extern (un dispozitiv de stocare), cu posibilitatea extinderii ușoare și a regăsirii rapide a acestora. La prima vedere sarcina poate părea banală. Totuși, în condițiile în care este vorba de a lucra cu milioane de elemente, fiecare putând consta din mari cantități de date care trebuie accesate simultan prin Internet de către mii de utilizatori răspândiți pe întreg globul; și în condițiile când disponibilitatea aplicației și datelor trebuie să fie permanentă (de ex. pentru a nu pierde ocazia de a încheia afaceri), soluțiile bune nu sunt de loc simple.

De obicei o bază de date este memorată într-unul sau mai multe fișiere. Bazele de date sunt manipulate cu ajutorul sistemelor de gestiune a bazelor de date.

Cel mai răspândit tip de baze de date este cel relațional, în care datele sunt memorate în tabele. Pe lânga tabele, o bază de date relațională mai poate conține: indecși, proceduri stocate, declanșatori, utilizatori și grupuri de utilizatori, tipuri de date, mecanisme de securitate și de gestiune a tranzacțiilor etc.[1]

Cele mai utilizate sisteme de gestiune ale unor baze de date:

relationale de tip client-server(SQL): Oracle, MySQL, Microsoft SQL Server,DB2, Interbase;

relationate locale: Access, FoxPro, dBase, Paradox.

În continuare vor fi prezentate câteva considerente teoretice despre baza de date MySQL.

Figura 2.3.1 Siglă MySQL

Principalul scop de a învăța un limbaj de programare precum PHP este interacțiunea pe care acesta o are cu bazele de date.

MySQL este cel mai popular sistem de gestiune a bazelor de date destinat utilizării cu PHP, în mare măsură deoarece este gratuit. Totuși, prin intermediul PHP este posibil accesul la aproape orice SGBD modern.

Bazele de date relaționale înțeleg SQL(Structurated Query Language), un limbaj relativ simplu, folosit pentru solicitarea datelor. În ciuda simplității sale, SQL este un limbaj foarte puternic, care poate obține accesul la date stocate în mai multe tabele, poate filtra datele dorite și poate sorta, rezuma și afișa rezultatele.

În general, bazele de date relaționale își stochează datele într-un singur fișier sau catalog. Această caracteristică de organizare facilitează administrarea datelor, deoarece executarea copiei de siguranță, respectiv restaurarea unui singur fișier sau catalog se realizează mai ușor.[8]

Deși este folosit foarte des împreună cu limbajul de programare PHP, cu MySQL se pot construi aplicații în orice limbaj major. Există multe scheme API disponibile pentru MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, cum are fi: C, C++, C#, Java, Perl, PHP, Python, FreeBasic, etc., fiecare dintre acestea folosind un tip spefic API. O interfață de tip ODBC denumită MyODBC permite altor limbaje de programare ce folosesc această interfață, să interacționeze cu bazele de date MySQL cum ar fi ASP sau Visual Basic. În sprijinul acestor limbaje de programare, unele companii produc componente de tip COM/COM+ sau .NET (pentru Windows) prin intermediul cărora respectivele limbaje să poată folosi acest SGBD mult mai ușor decât prin intermediul sistemului ODBC. Aceste componente pot fi gratuite (ca de exemplu MyVBQL) sau comerciale.

Licența GNU GPL nu permite încorporarea MySQL în softuri comerciale; cei care doresc să facă acest lucru pot achiziționa, contra cost, o licență comercială de la compania producătoare, MySQL AB.

MySQL este componentă integrată a platformelor LAMP sau WAMP (Linux/Windows-Apache-MySQL-PHP/Perl/Python). Popularitatea sa ca aplicație web este strâns legată de cea a PHP-ului care este adesea combinat cu MySQL și denumit Duo-ul Dinamic. În multe cărți de specialitate este precizat faptul ca MySQL este mult mai ușor de învățat și folosit decât multe din aplicațiile de gestiune a bazelor de date, ca exemplu comanda de ieșire fiind una simplă și evidentă: „exit” sau „quit”.

Pentru a administra bazele de date MySQL se poate folosi modul linie de comandă sau, prin descărcare de pe internet, o interfață grafică: MySQL Administrator și MySQL Query Browser. Un alt instrument de management al acestor baze de date este aplicația gratuită, scrisă în PHP, phpMyAdmin.

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

HTML

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browser-ul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).[1]

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documentele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.[1]

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.[1]

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de mail le blochează intenționat.[1]

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm .În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta /> browser-ul interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea între litere mici și mari). Pagina principala a unui domeniu este fișierul index.html respectiv index.htm Această pagină este setată a fi afișată automat la vizitarea unui domeniu.[1]

Toate paginile HTML încep și se termină cu etichetele <html> și </html>. În interiorul acestor etichete găsim perechile <head>, </head> și <body>, </body>.

Head conține titlul paginii între etichetele <title> și </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi și linkuri către fisiere externe (de exemplu scripturi, fișiere de tip CSS sau favicon).[1]

Exemplu de cod HTML:

<html>

<head>

<title>Titlu Paginii</title>

</head>

<body>

<p>Conținut Pagină</p>

</body>

</html>

Crearea unui fișier HTML este foarte simplă, putând fi făcută cu ajutorul oricărui editor de text. Totuși, pentru a avea un control ridicat asupra corectitudinii codului scris, este recomandat să utilizăm un editor specializat, care să pună în evidență diversele elemente de marcare (TAG-uri , numite și „elemente” sau „etichete”) sau, mai mult, să poată verifica și detecta erorile. [9]

Din categoria editoarelor care pun în evidență diferitele elemente face parte editorul Notepad++, iar din categoria validatoarelor face parte CSE HTML Validator Lite, ambele fiind gratuite și putând fi descărcate de pe Internet.[9]

O serie de elemente din HTML permit utilizarea de atribute de culoare. Acestea pot fi specificate în două moduri: prin constanta HTML ce reprezintă numele culorii (în engleză, bineînțeles). Există 216 astfel de constante recunoscute de majoritatea browser-elor.[9]

CSS(Cascading Style Sheets)

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.[1]

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in web design.[1]

Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități web design.[1]

Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:

• Selectors

• Box Model

• Backgrounds and Borders

• Image Values and Replaced Content

• Text Effects

• 2D/3D Transformations

• Animations

• Multiple Column Layout

• User Interface

Deși au apărut unele deficiente de compatibilitate intre browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.

CSS3 – Borduri[1]

Acum CSS3 oferă posibilitatea de a crea borduri cu colțurile rotunjite fără a folosi elemente grafice de fundal așa cum se folosea anterior acestui upgrade.[1]

Proprietatea CSS3 border-radius definește prin valorile exprimate in pixeli cat de rotunjite vor fi colțurile unui element HTML sau unei imagini. Fiecare colț poate avea o alta valoare exprimată in pixeli diferită de un alt colț al aceluiași element. Prin urmare putem folosi pana la 4 valori diferite atribuite unui element HTML sau imagine.[1]

Exemplu:

border-radius: 5px ;

– definește valoarea de 5px radius pentru toate cele 4 colțuri ale elementului.

border-radius: 5px 7px 12px 4px;

– aceste valori multiple definesc cat de mult vor fi rotunjite colțurile elementului HTML, iar pentru fiecare colt este specificata valorarea. Colțul stânga-sus are valoarea border-radius de 5px, colțul dreapta-sus are valoarea border-radius de 7px, colțul dreapta-jos al elementului HTML are valoarea de 12px iar colțul din stânga -jos are valoarea de 4px.

CSS3 – Borduri Rotunjite – Optimizat.[1]

Varianta ne-comprimată sau ne-optimizată:

border-radius-left: 5px;

border-radius-right: 7px;

border-radius-top: 12px;

border-radius-bottom: 4px;

Varianta compresată/optimizată:

border-radius: 5px 7px 12px 4px;

width: 300px;

border-radius:25px;

Elementul HTML div este definit de următoarele proprietăți CSS: dimensiunea in lungime este redată de valoarea in pixeli a proprietății width, folosește o bordură de 2 pixeli, o bordură solidă de culoare gri-închis definită de culoarea HEX #333333. Culoarea de fundal este gri deschis definită de HEX #dddddd. Bordura rotunjită este de 25 pixeli pentru toate cele 4 colțuri.[1]

Noțiunea de stil este, pentru un document HTML, asemănătoare cu formatarea documentului, spre exemplu, pentru un document Word. Exisă o mulțime de atribute prin care se pot stabili font-urile, caracteristicile de aliniere a textului, forma elementului, culorile de fond și ale literelor, marginile, poziția elementelor, etc. [9]

Serverul Apache

Apache este un server HTTP de tip open source. Apache a jucat și joacă un rol important în dezvoltarea web-ului, fiind folosit în prezent în circa 65.2 % din paginile web.[10]

Apache este un server web cu o contribuție notabilă la dezvoltarea Internetului (world wide web). Apache a reprezentat prima alternativă viabilă la Netscape Communications Corporation, și a evoluat rapid în funcționalitate și performanță ca un rival competitiv pentru alte servere web bazate pe Unix.[1]

Apache este dezvoltat de o comunitate deschisă de programatori sub emblema Apache Software Foundation. Aplicația este disponibilă pentru o mare varietate de sisteme de operare incluzând Unix, FreeBSD, Linux, Solaris, Novell NetWare, Mac OS X,Microsoft Windows si OS/2.[1]

Serverul Apache este caracterizat ca fiind un software gratuit și open source, acesta făcând ca, începând din aprilie 1996, el să fie cel mai popular server HTTP. Cu toate că în noiembrie 2005 a început să piardă din cota de piață, în aprilie 2008 Apache stătea încă la baza a peste 50 % din siturile web, iar în iunie 2013 a ajuns la 65.2%.[1]

Prima versiune a serverului a fost creată de Robert McCool, care la vremea aceea era implicat în proiectul National Center for Supercomputing Applications, cunoscut pe scurt ca NCSA HTTPd. A doua versiune a serverului a fost o rescriere substanțială, de data aceasta punându-se accentul pe crearea unui layer prioritar (Apache Portable Runtime) și a suportului de module.[1]

Apache suportă o mare varietate de module care îi extind funcționalitatea, acestea variază de la server side programming și până la scheme de autentificare. Câteva limbaje suportate sunt: mod_perl, mod_python, Tcl și PHP. Ca alte module putem enumera : SSL și TLS support (mod_ssl), un modul proxyun, modul de rescriere URL (cunoscut ca un motor de rescriere mod_rewrite), custom log files(mod_log_config) și suport de filtrare (mod_include și mod_ext_filter). O altă calitate a serverului Apache este virtual hosting (găzduirea virtuală), care constă în posibilitatea de a găzdui mai multe situri simultan pe același server.[1]

Principalul competitor al serverului Apache este Microsoft Internet Information Services (IIS), urmat de Sun Java System Web Server al companiei Sun Microsystems și multe altele, cum ar fi Zeus Web Server.[1]

Apache este folosit de unele din cele mai mari situri din lume. Astfel, motorul de căutare folosit de Google folosește o versiune modificată de Apache numită Google Web Server (GWS); și proiectele Wikimedia inclusiv Wikipedia rulează tot pe un server Apache.[1]

Platforma EasyPhp

EasyPHP este un pachet WAMP ce conține PHP server-side limbaj de scripting, serverul web Apache, MySQL SQL server, precum și instrumente de dezvoltare, cum ar fi manager de baze de date phpMyAdmin, debugger Xdebug și multe altele. Nimic pentru a configura. Sa făcut deja! Ai nevoie doar de a descărca, intall … și cod. Pagina de administrare vă permite să lista docroot, extensii, schimba portul Apache, zona de fus orar, schimba timpul de execuție, raportarea erorilor, încărcați dimensiunea fișierului max, adăuga / elimina alias, gestiona module .

Figura 2.7.1 Start Server

Figura 2.7.2 Start MySQL

Figura 2.7.3 Meniu EasyPHP

În figura de mai sus este prezentat meniul platformei. Selectând opțiunea Administration utilizatorul poate administra partea de PHP/Apache/MySQL.

Platforma Notepad++

Notepad++ este un editor de text gratuit pentru Windows, găzduit la Sourceforge. Programul permite editarea codului sursă specific unui număr mare de limbaje de programare, precum C, C++, Pascal, Cobol, HTML, PHP.

Facilități remarcabile sunt:

Colorare sintactică pentru 48 de limbaje de programare (se poate modifica de către utilizator);

Tipărirea color a codului sursă (WYSIWYG);

Autocompletare = deducerea și întregirea automată a cuvântului de cod din biblioteca utilizată;

Interfață cu mai multe ferestre (utilizează tab-uri);

Suport pentru căutări/înlocuiri cu expresii regulate PERL;

Suport pentru macroinstrucțiuni.

Notepad++ se bazează pe motorul Scintilla, fiind programat în C++ și utilizând Win32 API și biblioteca STL, asigurând astfel o execuție rapidă și un consum redus de resurse.

Figura 2.7 Platforma Notepad++

Specificațiile Aplicației

Schema Bloc

În acest subcapitol este prezentată schema bloc a aplicației.

Principalele componente ale aplicației:

Administrator

Utilizator/Cumpărător

Login

Componentele aplicației au la rândul lor subcomponente așa cum se poate vedea in figura 3.1.1

Modulul Administrator conține următoarele sub-module:

Acasa- vizualizare mașini/ștergere

Administrare mașini

Rapoarte

Modulul Utilizator conține următoarele sub-module:

Acasa- vizualizare mașini/filtre

Date de contact

Cont

Figura 3.1.1 Schema Bloc a aplicației

Funcționalități

În cadrul acestui subcapitol vor fi prezentate viitoarele funcționalități ale aplicației. Aceasta va conține 2 module principale plus modulul de Login. De asemenea aplicația va avea o bază de date de 7 tabele.

În cadrul modulului Login va fi implementată o interfață care sa asigure conectarea în condiții de siguranță la aplicația curentă. Vor fi implementați 2 tipuri de utilizatori: administor și utilizator/cumpărător.

Fiecare utilizator după ce se va conecta va fi redirecționat în modulul din care face parte în funcție de tipul de utilizator pe care îl deține: tipul administrator va fi redirecționat la modulul Administrator iar tipul utilizator/cumpărător va fi redirecționat la modulul Administrator.

În cadrul fiecărui modul utilizatorul va putea să acționeze doar componentele modulului respectiv, fiind restricționat de tipul de utilizator.

Modulul Administrator va implementa următoarele sub-module:

Acasa- vizualizare mașini/ștergere

Administrare mașini

Rapoarte

Administratorul va putea manipula baza de date și utilizatorii.

Modulul Utilizator conține următoarele sub-module:

Acasa- vizualizare mașini/filtre

Date de contact

Cont

În continuare vor fi prezentate pe scurt tabele care vor alcătui baza de date a aplicației.

Aplicația va conține o bază de date cu 7 tabele:

Tabela login – va conține utilizatorii și tipul acestora

Tabela masina – va conține informații generale despre mașină

Tabela detalii_tehnice – va conține informații mai amănunțite despre mașină

Tabela cos_cumparaturi – va conține informații despre mașinile adăugate la favorite de către cumpărător

Tabela an

Tabela marca

Tabela tara

Figura 3.2.1 Tabele

Documentația tehnică a aplicației

Descrierea structural-funcțională

Structura generală

Scopul prezentei aplicații este de a un sistem „e-commerce” de prezentare si de vânzare a unor mașini, cu alte cuvinte un ”magazin online”, utilizând limbajul de script PHP și serverul de baze de date MySQL, legătura cu mediul web fiind limbajul HTML.

Aplicația trebuie să asigure 3 servicii de bază(figura 4.1):

Un serviciu pentru administrator cu rol privat

Un serviciu pentru profesor cu rol privatâ

Serviciul pentru administrator asigură popularea bazei de date, ștergerea și modificarea anumitor câmpuri din baza de date.

Serviciul pentru utilizator asigură vizualizarea mașinilor și posibilitatea de a adăuga la favorite mașinile.

Gestionarea informațiilor se realizează cu ajutorul unei baze de date MySQL.  Este cel mai popular sistem de gestionare al bazelor de date open-source la ora actuală[4], fiind o componentă cheie a stivei LAMP (Linux, Apache, MySQL, PHP)[1].

În cadrul aplicației, proiectarea bazei de date presupune utilizarea a șapte tabele cu legături între ele.

Figura 4.1.1 Structura generală a aplicației

Scripturi generale

Interfața cu utilizatorul se face prin scripturi CSS. Aceste scripturi asigură formatarea elementelor de tip HTML precum se poate observa mai jos:

a, a:hover

{ outline: none;

text-decoration: underline;

color: #AEB002;}

a:hover

{ text-decoration: none;}

ul

{ margin: 2px 0 22px 17px;}

ul li

{ list-style-type: circle;

margin: 0 0 6px 0;

padding: 0 0 4px 5px;

line-height: 1.5em;}

#main, #logo, #menubar, #site_content, #footer

{ margin-left: auto;

margin-right: auto;}

#header

{ background: #323534 url(back.png) repeat-x;

height: 177px;}

#menubar

{ width: 880px;

height: 46px;}

ul#menu

{ float: right;

margin: 0;}

ul#menu li

{ float: left;

padding: 0 0 0 9px;

list-style: none;

margin: 1px 2px 0 0;

background: #5A5A5A url(tab.png) no-repeat 0 0;}

ul#menu li a

{ font: normal 100% 'trebuchet ms', sans-serif;

display: block;

float: left;

height: 20px;

padding: 6px 35px 5px 28px;

text-align: center;

color: #FFF;

text-decoration: none;

background: #5A5A5A url(tab.png) no-repeat 100% 0;}

ul#menu li.selected a

{ height: 20px;

padding: 6px 35px 5px 28px;}

ul#menu li.selected

{ margin: 1px 2px 0 0;

background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover

{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;

color: #FFF;}

ul#menu li a:hover

{ color: #E4EC04;}

#site_content

{ width: 880px;

overflow: hidden;

margin: 20px auto 0 auto;

padding: 0 0 10px 0;}

#content ul

{ margin: 2px 0 22px 0px;}

#footer

{ width: 100%;

font-family: 'trebuchet ms', sans-serif;

font-size: 100%;

height: 80px;

padding: 28px 0 5px 0;

text-align: center;

background: #3B3939 url(footer.png) repeat-x;

color: #A8AA94;}

#footer p

{ line-height: 1.7em;

padding: 0 0 10px 0;}

#footer a

{ color: #A8AA94;

text-decoration: none;}

.form_settings

{ margin: 15px 0 0 0;}

.form_settings p

{ padding: 0 0 4px 0;}

.form_settings .submit

{ font: 100% arial;

border: 0;

width: 99px;

margin: 0 0 0 212px;

height: 33px;

padding: 2px 0 3px 0;

cursor: pointer;

background: #3B3B3B;

color: #FFF;}

table

{ margin: 10px 0 30px 0;}

table tr th, table tr td

{ background: #3B3B3B;

color: #FFF;

padding: 7px 4px;

text-align: left;}

table tr td

{ background: #E5E5DB;

color: #47433F;

border-top: 1px solid #FFF;}

În script se poate observa că se formatează de la elemente care influențează întreaga pagină precum elementul body până la elemente care se focusează doare pe anumite porțiuni precum elementul a(link).

Modulul „Login”

Modulul are rolul de intrare în aplicație. Pentru aceasta în primul rând se face conectarea la server și la baza de date.Apoi se deschide o nouă sesiune pentru stocarea datelor.După sesiune urmează preluarea datelor cum se poate observa mai jos.

În continuare se verfică credențialele. Verificăm dacă userul se află în baza de date printr-o interogare în baza de date.

Dacă userul și parola au fost introduse corect se selectează tipul utilizatorului. Dacă persoana ce dorește autentificarea în baza de date are credențiale de utilizator va fi redirecționată în modulul utilizator iar dacă are credențiale de administrator va fi redirecționată în modulul administrator.

În cazul în care utilizatorul nu se află în baza de date sau parola este greșită acesta va fi redirecționat către pagina de login și i se va afișa următorul mesaj de eroare: ” Utilizatorul sau Parola au fost introduse gresit te rugam sa reincerci!! ”.

Verificarea dacă utilizatorul sau parola au fost introduse incorect se face în scriptul php de mai jos și în figura 4.2.1:

Figura 4.2.1Login- Introducerea greșită a utilizatorului sau a parolei

Formularul de transmitere a datelor se poate observa în scriptul html de mai jos:

După cum se poate observa câmpurile utilizator și parolă au atributul ”required”. Acest atribut este folosit pentru ca utilizatorul să nu încerce autentificarea fără sa fi completat toate câmpurile.

Acest modul conține și opțiunea creării de utilizatori. Formularul de transmitere a datelor se poate observa în scriptul de mai jos:

Tabela folosită în acest modul este tabela login și conține următoarele câmpuri:

Figura 4.2.1 Tabela login

Câmpul ID este de tip întreg și este un identificator unic al înregistrărilor din tabelă, câmpul user este de tip șir de caractere, având dimensiunea maximă de 50 de caractere și conține numele de acces în aplicație al utilizatorului, câmpul password reprezintă parola iar câmpul type este tipul de utilizator acesta poate fi administrator sau utilizator.

Modulul „Administrator”

Modulul Administrator va implementa următoarele sub-module:

Acasa- vizualizare mașini/ștergere

Administrare mașini

Rapoarte

Administratorul poate interacționa cu toate modulele. Delogarea acestuia se face de preferință prin accesarea link-ului „Logoff”.

Figura 4.2.4 Pagină Administrator- Meniu

Sub-modulul Acasa

Această componentă are 2 operații de bază: vizualizarea și ștergerea mașinilor din baza de date.

În scriptul php de mai sus se face afișarea mașinilor. Prima dată se face conectarea la server și la baza de date. După care cu ajutorul unei interogări in tabela masina se selectează toate masinile apoi cu ajutorul funcției mysql_fetch_array() se afișează toate câmpurile din baza de date.

După cum se observă sunt afișate și două link-uri „Afiseaza” și „Sterge”.

Accesarea link-ului „Afiseaza” va redirectiona administratorul într-o pagină unde vor fi afișate atât detaliile tehnice cât și cele generale. Afișarea se face comform scriptului php de mai jos:

Prima dată se caută detaliile generale despre mașină și se afișează, apoi se caută detaliile tehnice și se afișează.

Observăm că și aici este afișat link-ul „Sterge”. Ștergerea se face în cascadă. Întâi se șterg înregistrarile ce conțin informațiile generale din tabela masina apoi se șterg înregistrările ce conțin informațiile tehnice din tabela „detalii_tehnice” cum se poate observa în scriptul php de mai jos:

Ștergerea se face în funcție de id-ul mașinii din tabela masina. Acesta este transmis prin variabila id, și este preluat de variabila $id prin metoda GET[].

Sub-modulul Administrare masini

Această componentă conține două operații principale: de adăugare și stergere. Pe lângă aceste două operații se face și afișarea mașinii adăugate.

Formularul de transmiterea datelor se poate observa mai jos.

Observăm folosirea funcților marca(), an(), tara(). Aceste funcții au scopul de a selecta din baza de date marca, anul și țara și de a le afișa sub forma unor inputuri de tip drop-down. Funcțiile se pot observa în scriptul de mai jos:

Introducerea datelor în baza de date se face comform scriptului de mai jos:

Observăm apelarea funcției move_uploaded_file(). Această funcție are rolul de mutare a fisierelor în directorul „img_masini”. În acest director se stochează toate pozele mașinilor.

Preluarea datelor se face cu metoda POST așa cum se poate observa mai jos:

Funcția mysql_real_escape_string este folosită pentru evitarea „Injection”, pentru ca datele să fie preluate corect.

Inserearea detaliilor tehnice se face asemănător ca cea a datelor generale, așa cum se poate observa în scriptul de mai jos:

Preluarea datelor se face cu metoda POST:

Formularul de transmiterea datelor se poate observa in scriptul html de mai jos:

Ștergerea se face ca în componenta „Acasa”, în cascadă sau dacă au fost intorduse doar detaliile generale se face ștergerea doar din tabela masina.

Afișarea se face folosind aceleași scripturi explicate în componenta „Acasa.

Sub-modulul Rapoarte

Această componentă conține 3 tipuri de rapoarte:

După An

După Marcă

După Țară

Figura 4.4.1 Rapoarte

Selectarea rapoartelor se face cu ajutorul funcțiilor an(), marca() și tara(). Acestea populează inputuri de tipul drop-down.

Raport Marca

Formularul de transmiterea datelor se face comform scriptului de mai jos:

Crearea raportului propriu-zis se face comform scriputului:

Preluarea datelor despre marcă se face prin metoda POST și informația se stochează în variabila $marca. Cu ajutorul variabilei se face o interogare în baza de date și se selectează toate mașinile ce au marca conform variabilei $marca și apoi cu ajutorul funcției mysql_fetch_array() se afișează informațiile generale. Afișarea detaliilor tehnice se face ca în componenta „Acasa”.

Raport An

Formularul de transmiterea datelor se face comform scriptului de mai jos:

Crearea raportului propriu-zis se face comform scriputului:

Preluarea datelor despre anul de producție se face prin metoda POST și informația se stochează în variabila $an. Cu ajutorul variabilei se face o interogare în baza de date și se selectează toate mașinile ce au anul de producție conform variabilei $an și apoi cu ajutorul funcției mysql_fetch_array() se afișează informațiile generale. Afișarea detaliilor tehnice se face ca în componenta „Acasa”.

Raport Tara

Formularul de transmiterea datelor se face comform scriptului de mai jos:

Crearea raportului propriu-zis se face comform scriputului:

Preluarea datelor despre țara de proveniență se face prin metoda POST și informația se stochează în variabila $tara. Cu ajutorul variabilei se face o interogare în baza de date și se selectează toate mașinile ce au anul de producție conform variabilei $tara și apoi cu ajutorul funcției mysql_fetch_array() se afișează informațiile generale. Afișarea detaliilor tehnice se face ca în componenta „Acasa”.

Modulul Utilizator

Modulul Utilizator conține următoarele sub-module:

Acasa- vizualizare mașini/filtre

Date de contact

Cont

Sub-modulul Acasa

În această componentă sunt afișate toate mașinile din baza de date. Pentru a vedea toate detaliile tehnice ale unei mașini trebuie accesat link-ul ”Afiseaza”, pentru a adăuga în coș o mașină utilizatorul trebuie sa apese pe butonul .

De asemenea această pagină conține filtre după: marcă, țară de proveniență și anul fabricării.

În primul rând verificăm dacă sunt setate anumite filtre. Dacă nu sunt setate afișarea se face comform scriptului de mai jos:

După cum putem observa mai sus există posibilitatea de a adăuga o mașină la favorite. Pentru afișarea detaliilor tehnice utilizatorul va trebui sa acceseze link-ul cu mesajul „Afișează mai multe detalii”.

Afișarea detaliilor tehnice se face comform scriptului de mai sus. Exista posibilitatea ca o mașină să fie scoasă de la favorite prin accesarea link-ului „Sterge”.

Dacă sunt aplicate filtre atunci se face verificarea transmiterii datelor în primul rând :

Apoi se preiau datele cu metoda POST[]:

După verificăm dacă sunt toate 3 filtrele setate:

Dacă sunt setate toate filtrele se face afișarea comform scriptului de mai jos :

Se caută intrările în baza de date pe baya filtrelor și se face afișarea.

Dacă nu sunt setate toate cele 3 filtrele verificarea se face pentru cate 2 filtre în toate combinațiile :

Apoi se face afișarea la fel ca în cazul cu 3 filtre dar acum vor fi 2.

Dacă este setat un singur filtru, verificarea se face după fiecare filtru în parte:

Apoi se face afișarea la fel ca în cazul cu 3 filtre dar în acest caz în funcție de un singur filtru.

Sub-modulul Date de contact

Această componentă este creată static și poate fi modificată doar de administratorul site-ului. Aici se afișează datele de contact ale firmei.

Afișarea se face conform scriptului de mai jos:

Sub-modulul Cont

Această componentă conține afișarea mașinilor adăugate la favorit de către utilizator. Sub-modulul Cont lucrează cu tabela cos_cumparaturi.

Scriptul de mai jos realizează afișarea din baza de date a mașinilor favorite corespunzătoare utilizatorului logat la acel moment in aplicație.

În prima parte a scriptului se verifică dacă sunt intrări în baza de date. Dacă nu există atunci se afișează un mesaj de eroare.

Dacă în baza de date există intrări se începe afișarea. Cu ajutorul funcției mysql_fetch_row() se face afișarea mai întai a datelor generale cum se poate observa mai sus, apoi a datelor tehnice cum se poate observa în scriptul de mai jos.

Baza de date

Figura 4.6.1 Baza de date

După cum s-a mai precizat, aplicația utilizează o bază de date MySQL. Această alegere a fost influențată în principal că utilizarea serverului este liberă și este un server de bază de date multi-platformă, rulând atât pe sistemele Windows cât și pe sisteme Linux-Unix.

Proiectarea bazei de date a impus utilizarea a mai multor tabele, fiecare având un rol bine definit, între ele existând legături impuse de specificul aplicației.

Figura 4.6.2 Listă Tabele

Figura 4.6.3 Listă Tabele

Figura 4.6.5 Listă Tabele

Tabela an

Rolul acestei tabele este să stocheze anii de producție a mașinii.

Figura 4.6.3 Tabela An

Câmpurile prevăzute pentru această tabelă conform figurii 4.6.3 sunt:

ID – de tip întreg, cu autoincrementare, index, cheie primară

An – de tip întreg.

Adăugarea în tabelă s-a făcut cu o comandă SQL de forma :

Selectarea din baza de date s-a făcut cu o comandă SQL de forma:

Tabela cos_cumparaturi

Rolul acestei tabele este să stocheze informații despre activitatea utilizatorilor și despre ce tip de mașini preferă aceștia.

Figura 4.6.4 Tabela cos_cumparaturi

Câmpurile prevăzute pentru această tabelă conform figurii 4.6.4 sunt:

ID –de tip întreg, cu autoincrementare, index, cheie primară

ID_masina- de tip întreg, reprezintă ID-ul din tabela masina(legătură cu tabela masina)

Utilizator- de tip șir de caractere, stochează numele utilizatorului

Adăugarea în tabelă s-a făcut cu o comandă SQL de forma :

Selectarea din baza de date s-a făcut cu o comandă SQL de forma:

Ștergerea din baza de date s-a făcut cu o comandă SQL de forma:

Tabela detalii_tehnice

Rolul acestei tabele este să stocheze detaliile tehnice ale mașinii.

Figura 4.6.4 Tabela detalii_tehnice

Câmpurile prevăzute pentru această tabelă conform figurii 4.6.4 sunt:

ID –de tip întreg, cu autoincrementare, index, cheie primară

ID_masina- de tip întreg, reprezintă ID-ul din tabela masina(legătură cu tabela masina)

Stare_tehnica- de tip șir de caractere, stochează starea tehnica a masinii

Motorizare – de tip șir de caractere, stochează informatii despre motorizare

Climatizare – de tip șir de caractere, stochează informatii despre climatizare

Kilometraj – de tip întreg, stochează informatii despre kilometrii parcuși de mașină

Culoare – de tip șir de caractere, stochează informatii despre cumoasea mașinii

Adăugarea în tabelă s-a făcut cu o comandă SQL de forma :

Selectarea din baza de date s-a făcut cu o comandă SQL de forma:

Ștergerea din baza de date s-a făcut cu o comandă SQL de forma:

Tabela marca

Rolul acestei tabele este să stocheze informații despre marca mașinii.

Figura 4.6.4 Tabela marca

Câmpurile prevăzute pentru această tabelă conform figurii 4.6.4 sunt:

ID –de tip întreg, cu autoincrementare, index, cheie primară

Marca – de tip șir de caractere, stochează informații despre marca mașinii

Adăugarea în tabelă s-a făcut cu o comandă SQL de forma :

Selectarea din baza de date s-a făcut cu o comandă SQL de forma:

Ștergerea din baza de date s-a făcut cu o comandă SQL de forma:

Tabela masina

Rolul acestei tabele este să stocheze informații generale despre mașină.

Figura 4.6.4 Tabela cos_cumparaturi

Câmpurile prevăzute pentru această tabelă conform figurii 4.6.4 sunt:

ID –de tip întreg, cu autoincrementare, index, cheie primară

Marca – de tip șir de caractere, stochează informații despre masrca mașinii

Descriere –de tip șir de caractere,stochează informații despre mașina

Pret –de tip întreg, stochează informații despre prețul masinii

An_productie –de tip întreg, stochează anul de producție al mașinii

Tara_provenienta –de tip șir de caractere, stochează informații despre numele tării de proveniență

Pic_name –de tip șir de caractere, stochează informații despre numele imaginii mașinii

Adăugarea în tabelă s-a făcut cu o comandă SQL de forma :

Selectarea din baza de date s-a făcut cu o comandă SQL de forma:

Ștergerea din baza de date s-a făcut cu o comandă SQL de forma:

Tabela tara

Rolul acestei tabele este să stocheze informații despre țara de provenientă a masinii.

Figura 4.6.4 Tara

Câmpurile prevăzute pentru această tabelă conform figurii 4.6.4 sunt:

ID –de tip întreg, cu autoincrementare, index, cheie primară

Tara – de tip șir de caractere, stochează informații despre numele țîrii de proveniență

Adăugarea în tabelă s-a făcut cu o comandă SQL de forma :

Selectarea din baza de date s-a făcut cu o comandă SQL de forma:

Ștergerea din baza de date s-a făcut cu o comandă SQL de forma:

Ghidul Utilizatorului

Accesul în aplicație

Accesul în aplicație se face prin pagina de login. Aici se face autentificarea. Utilizatorul trebuie să își introducă numele și parola în formular.

Figura 5.1.1 Formular de autentificare

Dacă numele sau parola sunt introduse greșit atunci utilizatorul va fi redirecționat la pagina de autentificare.

Creare Cont

Dacă userul nu are cont acesta poate creea unul accesand butonul ”Creaza user” din figura 5.1.1.

Figura 5.2.1 Crează user

În urma completării datelor in formular se apasă butonul ”Fa-ti cont”. Se va genera un mesaj conform figurii 5.2.2

Figura 5.2.2 Mesaj noua parolă

Rolul Administrator

Pagina principală

Meniul acestui modul se poate observa in figura 5.3.1.1

Figura 5.3.1.1 Meniu Administrator

Deconectarea este simplă. Aceasta se realizează accesând butonul ”Logoff”.

În pagina principală sunt afișate toate mașinile din baza de date. Pentru a vedea toate detaliile tehnice ale unei mașini trebuie accesat link-ul ”Afiseaza”, pentru a șterge mșina din baza de date trebuie accesat link-ul ”Sterge” ca in figura 5.3.1.2

Figura 5.3.1.1 Pagina principală- exemplu mașină afișată

Administrare Mașini

Componenta ”Administrare Masini” are 2 parți :

Adaugare Masina- introducerea datelor generale despre mașină în baza de date (vezi figura 5.3.2.1)

Adaugare Detalii Tehnice – introducerea datelor tehnice despre mașină în baza de date (vezi figura 5.3.2.2)

Figura 5.3.2.1 Adăugare Mașină- detalii generale

Figura 5.3.2.1 Adăugare Mașină- detalii generale

Rapoarte

În figura 5.3.3.1 sunt prezentate tipurile de rapoarte posibile: după marcă, an și țară.

Figura 5.3.3.1 Rapoarte- pagina principală

Generarea rapoartelor este simplă:

selectează unul dintre câmpurile :Marca,An sau Tara

Apasă butonul ”Vezi raport”

După cei 2 pași utilizatorul va fi redirecționat la o pagina ca în figura 5.3.3.2

Figura 5.3.3.2 Exemplu Raport

Rolul Cumpărător

Pagina principală

Meniul acestui modul se poate observa in figura 5.4.1.1

Figura 5.4.1.1 Meniu- pagina principală

Deconectarea este simplă. Aceasta se realizează accesând butonul ”Logoff”.

În pagina principală sunt afișate toate mașinile din baza de date. Pentru a vedea toate detaliile tehnice ale unei mașini trebuie accesat link-ul ”Afiseaza”, pentru a adăuga în coș o mașină utilizatorul trebuie sa apese pe butonul .

Figura 5.4.1.2 Afișare mașini- Pagina principală

Tot în această pagina exista un submeniu în partea dreptă cu Filtre precum în figura 5.4.1.3

Figura 5.4.1.3 Filtre- Pagina principală

Utilizatorul poate filtra mașinile după marcă sau an sau țară sau după toate cele 3 criterii.

După cum se poate observa in figura 5.4.1.3 filtrele au 2 butoane:

Filtreaza- după apăsarea butonului filtrele selectate de utilizator vor fi aplicate iar pe pagină vor apărea doar mașinile ce îndeplinesc acele criterii.

Reset Filtre- acest buton resetează toate filtrele și pe pagină vor apărea toate mașinile

Date de contact

În această pagină utilizatorul poate să vadă datele de contact ale companiei.

Figrura 5.4.2.1 Date de contact

Utilizatorul poate trimite foarte ușor un e-mail accesând link-ul ”Trimite Email”.

Contul tău

Acest capitol conține afișarea mașinilor adăugate la favorite în baza de date de către utilizator.

Concluzii

Scopul aplicației este de a informeza cumpărătorul/utilizatorul de noile mașini apărute pe piață.

Aplicația își propune să ofere utilizatorilor posibilitatea de a accesa anumite informații mult mai rapid și mai ușor.

Fiind accesibilă printr-un browser web aplicația este foarte ușor de accesat. Oricine poate accesa site-ul, de pe calculator, de pe telefon, de pe tabletă sau de pe laptop.

Pentru a accesa site-ul, aplicația asigură moduri de vizualizare personalizate – fiecare utilizator va avea acces la anumite informații prezentate într-o formă specifică profilului de utilizator din care face parte.Acest aspect asigură o autentificare unică și o securitate bazată pe roluri.

Cel mai important aspect al aplicației este că aceasta asigură compabilitatea cu majoritatea navigatoarelor, prin intermediul codului html, in construirea ei nefolosindu-se elemente specifice doar pentru anumite navigatoare.

7. Bibliografie

[1] http://ro.wikipedia.org/wiki/World_Wide_Web#Istoric

[2] Rețele de calculatoare,  Andrew S. Tanenbaum, ed.Computer Press AGORA sub licență

Prentice Hall ISBN 973-97706-3-0

[3] Standarde web

[4]  DB-Engines Ranking

[5]^ „Usage of server-side programming languages for websites”

[6]^ „Statistici pentru Aprilie 2007”

[7]^ File Extension .PHP Details

[8]http://www.marplo.net/php-mysql/baze_de_date.html

[9] Valeriu Lupu : Html PHP Mysql

[10]   W3Techs iunie 2013

[11] http://www.easyphp.org/introduction.php

[12] „jQuery: The write less, do more, JavaScript library”. The jQuery Project

[13] „Situl jQuery”. [14] Resig, John (14 ianuarie 2009). „jQuery 1.3 and the jQuery Foundation”. jQuery Blog

[15] „jQuery UI”

[16] „Plugin-uri jQuery”

[17] „License – JQuery JavaScript Library”