Cuprins INTRODUCERE ………………………….. ………………………….. ………………………….. ……………….. 2… [620268]

Licență

Cuprins INTRODUCERE ………………………….. ………………………….. ………………………….. ……………….. 2… [620268]

Byadmin ianuarie 1, 2024

Cuprins

INTRODUCERE

…………………………..
…………………………..
…………………………..
………………..

2

CAPITOLUL 1
–

TEHNOLOGII WEB FOLOSITE

…………………………..
………………………..

4

1.1

LIMBAJUL DE PROGRAMARE PHP
…………………………..
…………………………..
…

4

1.2

SGBD
–
UL MYSQL

…………………………..
…………………………..
…………………………..
.

5

1.3

LIMBAJUL DE MARCARE HTML

…………………………..
…………………………..
…….

7

1.4

JAVASCRIPT

…………………………..
…………………………..
…………………………..
……….

9

1.5 LIMBAJUL DE STILIZARE CSS

…………………………..
…………………………..
………….

10

CAPITOLUL 2
–

DIAGRAME UML

…………………………..
…………………………..
………………

12

2.1 DIAGRAMA CAZURILOR DE UTILIZARE

…………………………..
……………………..

12

2.2 DIAGRAMA DE OBIECTE

…………………………..
…………………………..
………………….

13

2.3 DIAGRAMA DE ACTIVITATE

…………………………..
…………………………..
……………

13

2.4 DIAGRAMA DE STARE

…………………………..
…………………………..
……………………..

15

CAPITOLUL 3
–

REALIZAREA APLICA
ȚIEI

…………………………..
…………………………..
.

16

3.1 INTERFA
ȚA PUBLICĂ

…………………………..
…………………………..
……………………….

16

3.2 PANOUL DE ADMINISTRATOR

…………………………..
…………………………..
…………

29

3.3 BAZA DE DATE

…………………………..
…………………………..
…………………………..
……..

37

3.4 PAGINA DE AUTENTIFICARE

…………………………..
…………………………..
…………..

40

CONCLUZII

…………………………..
…………………………..
…………………………..
…………………….

43

BIBLIOGRAFIE

…………………………..
…………………………..
…………………………..
……………….

45

INTRODUCERE

Comer
țul electronic s
–
a dezvoltat foarte mult în ultimii ani 40

de

ani, tehnologia a
evoluat
,

iar utilizatorii au fost obi
șnuiți să apese butonul "Comandă acum", să selecteze
metodă de plată
și să aștepte până va fi livrată comanda, de obicei în 24 de ore.

De
–
a lungul ultimilor ani, Comer
țul Electronic a devenit o activitat
e comună pentru
multe c
ompanii.
Unele dintre acestea au acc
eptat această provocare, fără a
lua în
co
nsiderare schimbările cultural
e

pe care le implică situația în cauză, precum și

infrastructura necesară pentr
u a continua proiectul inițial.

Pentru a începe dezvoltarea unei aface
ri în lumea electronică, există un
ele puncte
care trebuie să fie î
ndeplinite. În primul rând
,

trebuie să se stabilească o strategie de
marketing, pentru a crea un catalog de produse, pentru a defini costurile și prețurile de
vânzare, piața țintă, prețurile

de transport și de manipulare. În prezent, majoritatea
companiilor doresc să i
ncludă dezvoltarea E
–
Business, dar a
ceastă nouă tehnologie, care
se
bazează pe Internet,
va rămâne pentru o lungă perioadă de timp o
variant
ă foarte bună

de
dezvoltare a unei af
aceri.

Pentru a putea utiliza această tehnologie într
–
un mod
adecvat

este necesar să se
bazeze pe o bună organizare a informațiilor și proce
selor. Aceasta este o provocare

din
cauză

că cele mai multe companii nu au propriile lor sisteme
informa
ț
ionale
car
e să ofere
sprijin pentru a rezolva
diversele nevoi
. Pentru a realiza o dezvoltare corespunzătoare a
acestui proiect este nevoie de personal calificat.

Paginile HTML
constituie în anumite condi
ții cel mai ieftin m
ijloc de a publica
informa
ții pe

Internet
ș
i practic există patru tipuri de site
–
uri Web: site
–
uri cu pagini statice,
site
–
uri cu pagini dinamice
,

site
–
uri dezvolta
te pe baze de date
și magazine
virtuale.

Tema de licen
ță “
Solu
ț
ii informatice pentru integrarea sistemelor economice
” oferă
o
oportunitate asupra abordării mai multor domenii de activitate în realizarea acestei
lucrări, cum ar fi: logistică, comer
țul electronic și abordarea tehnicilor de progamare și
Web
și de gestiune a bazelor de date MySQL.

Apli
ca
ț
ia
creată este un site cu pag
ini dinamice. Acestea necesită o actualizare
periodică a elementelor specific
ate
. La proiectarea unui astfel de site trebuie luate în
considerare următoarele

elemente:

–
Modul in care vor fi actualizate datele pe site
;

–
Costuril
e oper
atiunilor de actualizar
e periodica
.

“
Comunicarea
cu clien
ții (utilizatorii) care apelează un astfel de site, se poate
realiza prin inserarea de formulare de
e
–
mail, pe paginile site
–
ului. Î
n

felul acesta se va
transmite automat un mesaj de răspuns vizitatorului site
–
ului, în
știi
n
țându
–
l astfel de
primirea mesajului transmis
.
” (P
etrascu
, 2001
)

Aplica
ț
ia
î
și propune să realizeze managementul unui restaurant de tip pizzerie,
facilitând comandarea de pizza, dar
și prezentarea produselor, a ofertelor și

a evenimentelor
disponibile.

Ap
lica
ția Web trebuie sa fie remarcată prin eficacitate, robustețe si eficiență. Acest
produs nu trebuie să se expună riscului unui e
șec, ci prin robustețea sa să exprime siguranță
utilizatorilor în momentul utilizării. Trebuie să ofere securitate tuturor da
telor achizi
ționate
în baza de date.

În prezent, o multitudine de organizații, firme, companii sau instituții își stabilesc
hotărârile și își extind activitățile zilnice pe baza informațiilor culese din bazele lor de date.
Pentru ca datele existente să fie

cu adevărat utile trebuie să fie riguroase, complete, de
actualitate și la obiect. În plus, organizarea lor trebuie sa fie realizată astfel încât să poată fi
regăsite cu ușurință, în ansamblul dorit de către utilizator.

“
Programele de aplicații au și ele

rolul lor, chiar unul important, însă fără o
proiectare reușită a bazei de date, chiar și cele mai bune programe nu pot ocoli probleme
generate de datele incorecte și lipsite de soliditate. Aceste probleme sunt produse
întotdeauna de proiectarea neadecvat
ă a bazei de date. În schimb, o bună proiectare
garantează funcționalitatea și performanțele necesare pentru baza de date
.”

(Vlădoiu, 2014).

CAPITOLUL 1
–

TEHNOLOGII WEB FOLOSITE

1.1

LIMBAJUL DE PROGRAMARE PHP

În această aplica
ție Web s
–
a decis utilizarea

lim
bajului
PHP
,

deoarece
este
un limbaj
foarte popular

și,
nefiind

un
framework

în sine,

structurarea unui posibil framework se va
face cu
u
șurință. Majoritatea gazdelor web moderne acceptă PHP și MySQL, iar în timp ce
limbajele de genul Ruby on Rails castigă

popularitate, momentan găzduirea pentru acestea
nu este la fel de obi
șnuită
.

(
Peacock, 2010
)

PHP

(HypertextPreprocessor) este un limbaj de scripting de uz general, cu

cod
–
sursă
deschis
, utilizat pe scară largă,
și care este potrivit în special p
entru dez
voltarea aplica
țiilor
W
eb.

In cadrul codului HTML al unei pagini Web putem insera cod PHP car
e va fi
executat de fiecare dat
ă

când acea pagina este vizitată
. Codul P
HP este interpretat de că
tre
server
–
ul Web, fiind generat
un
co
d HTML sau orice alt tip de
con
ț
inut care va putea fi
vizualizat de orice vizitator al paginii Web.

Un alt motiv pentru care am optat pentru utilizarea limbajului
PHP este
acela c
ă
este
simplu de utilizat, fiind un

limbaj de programare structurat
, ca
și

C
–
ul
,

Perl
–
ul sau începând
de la versiunea 5 chiar

Java
, sintaxa limbajului fiind o combina
ție a celor trei. Datorită
modularită
ții sale poate fi folosit și

pentru a dez
volta aplica
ții de sine stătăto
are, de
exemplu în combina
ție cu

PHP
–
GTK

sau poate fi folosit ca

Perl

sau

Python

în linia de
comandă. Probabil una din cele mai importante facilită
ți ale limbajului este conlucrarea cu
majoritatea

bazelor de date rela
ționale
, de la

MySQL

și până la

Oracle
, trecând prin

MS Sql
Server
,

PostgreSQL
, sau

DB2
.

PHP

poate rula pe majoritatea sistemelor de operare, de la

UNIX
,

Windows
,
sau

Mac OS X

ș
i poate interac
ționa cu majoritatea

server
–
elor W
eb
. Codul PHP este
interpretat de server
–
ul Web

și generează un cod

HTML

care va fi
văzut de utilizator
(clientului/browserului

fii
ndu
–
i transmis numai cod HTML).

“
Mai mult, spre deosebire de limbajele de scripting, precum JavaScript, PHP
rulează pe server
–
ul Web, nu în browser
–
ul Web. Prin urmare, PHP poate obține accesul la
fișiere, baze de date și alte resurse la care programul Jav
aScript nu poate avea permisiune.

Acestea reprezintă bogate surse de conținut dinamic care determină vizitatorii să le
acceseze
.”

(McCarty, 2001), (Marinoiu, 2011).

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.

Figura nr.
1.1
–

Cele mai populare limbaje de programare
ce necesită gazde Web
(preluat
ă

de pe w3techs.com)

“
Script
–
urile PHP pot fi incluse
în paginile Web în diferite
moduri, uzual folosindu
–
se construc
ția
<?php … ?>.

Tot

ce
ea

se află cuprins între ace
ști delimitatori este procesat de
către interpretorul PHP, iar rezultatul este trimis browser
–
ului sub formă de cod HTML,
navigatorul urmând a
–
l interpreta
și afișa pentru
utilizator
.
”

(
Buraga, 2003
)

1.2

SGBD
–
UL MYSQL

Multe produse din magazinele de comer
ț electronic necesită un fel de alege
re din
partea clientului, fie că

este vorba despre dimensiune, culoare sau chiar materialul sa
u
ingredientele din care este fă
cut produsul.

De aceea este nevoie de cr
eare
a unei baze de date
care sa con
țină ș
i apo
i să afi
ș
eze aceste produse.

“Încă de la începutul civiliza
ției umane, stocarea informațiilor pentru utillizarea lor
a reprezentat o
necessitate.” (Du
șmănescu, 2005)

“
O bază de date e
ste o colec
ție integrată de înregistrări corelate în mod logic sau de
fi
șiere consolidate într
–
un fond comun care oferă date pentru una sau mai multe utilizări.

Termenul de bază de date se referă atât la datele propriu
–
zise cât
și la structurile de date în

care sunt stocate datele
și metadatele corespunzătoare
.
”

(
Tudoric
ă, 2016
)

“
În momentul de față, bazele de date reprezintă elementul central în toate sistemele
de stocare și regăsire a informației. Acestea, inițial au apărut ca o necesitate pentru
rezolvarea unor probleme mai simple, precum păstrarea informațiilor generale dintr
–
o
instituție, rezervarea biletelor de avion și păstrarea înregistrărilor financiare din sistemul
bancar
.” (Vlădoiu, 2014)

“În
proiectarea bazei de date, prima

etapa si una d
intre cele mai importante este
alegerea unui SGBD
.” (Du
șmănescu, 2005)

Înregistrările organizate sunt păstrate automat, iar căutarea sau extragerea datelor se
realizează mult mai ușor și
mai
eficient de pe oricare câmp al înregistrării, în special pe c
ele

pentru care există indecși.

“
Aceste date pot fi consultate prin intermediul unui sistem de gestiune a bazelor de
date, care poate extrage răspunsuri pentru interogările pe care un utilizator sau un program
le adresează, prin intermediul unui limbaj specif
ic ș
i anume un limbaj de interogare.”
(Vlădoiu, 2014)

“
Un sistem de
gestiune a bazelor de date este un set de aplica
ții care controlează
organizarea
, stocarea, extragerea, gestion
area
și re
cuperarea datelor dintr
–
o bază
de date.“
(Tudoric
ă, 2016
)

“
În reali
tate, există lucruri despre care vrem să stocăm date și există
diverse legături
între acestea.
Ideea semnificativă din fundalul tuturor bazelor de date este aceea că
utilizatorului, fie el o persoană sau un program de aplicație, nu i se atribuie rolul de a

se
preocupa cu modul în care datele sunt stocate fizic pe un suport extern de informație. El are
posibilitatea de a manipula aceste date în termenii leg
ăturilor care există între ele.
SGBD
–
ul
va executa cererile utilizatorilor asupra datelor
stocate fizic
.” (Vlădoiu, 2014)

“
SQL
(Structured Query Language) este un limbaj de interogare structurată. Acesta
nu este un limbaj de programare propriu
–
zis, ci este specializat în lucrul cu bazele de date.
Rolul său este să extragă, să organizeze și să actualizeze inf
ormațiile din bazele de date

relaționale. Toate serverele importante de baze de date utilizate în aplicațiile client/server,
utilizează acest limbaj
”

(Perkins, 1997).

Folosind anumite func
ții din limbajul PHP se poate obține cu ușurință accesul la
datele r
ezidente într
–
o bază de date MySQL
și le poate modif
i
ca. Majoritatea interactiunilor
cu o bază de date se desfă
ș
oară după un model secven
țial
simplu:

–

Se deschide o conexiune cu serverul MySQL
;

–

Se specifică baza de date la care se va ob
ț
ine accesul
;

–

S
e emit interogă
ri SQL, se

ob
ț
ine

accesul la rezultatele interogă
rilor

și se execută operații
non
–
SQL;

–

Se î
nchide conexiunea cu serverul MySQL
.

(McCarty 2002)

Există

două categorii de interogări care se pot executa cu ajutorul lim
bajului SQL
și
anume
:

interogări
SELECT (care returnează înregistrări ale unui tabel)
și interogări
UPDATE, INSERT
și DELETE (care nu returnează înregistrări, dar în schimb le modifică).
Astfel, în aplica
ția web ce urmează a fi prezentată vor fi necesare aceste tipuri de inter
ogări
pentru a afi
șa produsele din baza de date, pentru a le modifica
ș
i
pentru a
șterge anumite
produse. În timp ce interogările SELE
CT vor fi folosite pentru

afi
șarea produselor în
interfa
ța publică, în timp ce interogările UPDATE, INSERT și DELETE pot f
i utilizabile
doar în interfa
ța p
rivată de către administratorul

site
–
ului
.

1.3

LIMBAJUL DE MARCARE HTML

HTML este inima programării web, dar este oarecum limitată
, acest
a

fi
i
nd

până la
urmă un limbaj de formatare a documentelor. Se bazează pe etichete, care instruiesc
browser
–
ul cum să afi
șeze o bucată de text sau o imagine. Ca atare, codul HTML este
limitat la o interac
țiune statică, într
–
o singură direc
ție cu utilizatorul. Pag
ina web poate fi
foarte sofisticată
și atrăgătoare pentru ochii utilizatorului, dar utiliz
atorul nu poate
interac
ționa cu

pagina.

“
HTML (HyperText Markup Language)
reprezintă un set de coduri speciale care se
inserează într
–
un text, pentru a se adăuga inf
orma
ții despre formatare și despre legături.

HTML se bazează pe Limbajul Generalizat Standard de Marcare. Astfel, se folosesc
marcaje (tag
–
uri) pentru a comunica unui interpretor HTML (program de navigare) că
documentul este scr
is
și formatat în limbajul H
TML

standard.
” (
Taylor
, 1998
)

“Acest limbaj oferă posibilitatea de a se publica pe Web documente ce con
țin texte,
tabele, imagini, liste, secven
țe video sau audio. Spre deosebire de un roman, care se citește
in mod liniar, un site Web este realizat astfel
încât s
ă

se poată accesa direct pagina dorită,
fără să existe obliga
ția de a se parcurge restul paginilor.” (Dumitra
ș
cu, 2006)

“Această

op
țiune este posibilă cu ajutorul implementării unor legături (link
–
uri) prin
intermediul cărora un
ansamblu de pagini s
unt legate î
ntre ele, creând astfel site
–
ul. În
general un site Web este alcătuit dintr
–
o pagina de index ce reprezintă primă pagina care
con
ține paginile celorlalte titluri. Aceste titluri sunt atribuite link
–
urilor, astfel în
cât un
simplu click pe legătu
ră

permite accesarea directă a pagin
ii dorite.” (Dumitra
șcu, 2006)

Marcajele de bază care apar î
n majoritatea paginilor Web:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<
/body>

</html>

Linia de cod
<meta charse
t="utf
–
8"> reprezintă

marcajul “meta” prin care se pot

adaugă diverse proprietă
ți pentru documentul HTML. În această linie se specifică tipul de
caractere pe care urmează să

le folosească aplica
ția, UTF
–
8 fiind o caracteristică de codare
capabilă să codifice toate punctele posi
bile de cod

Unicode
.

“
Site
–
urile web interactive sau dinamice oferă con
ținut și personalizare mai
îmbogă
țite. Interacțiunea nu poate fi statică
–

neces
ită construc
ții

pentru instructiuni de tip
IF
și instructiuni repetitive
, care nu fac parte din sintaxa HTML.
” (Eas
ttom
, 2007
)

1.4

JAVASCRIPT

JavaScript
este una dintre cele mai importante tehnologii de pe web. Acesta oferă
mijloacele de a adaugă func
ționalită
ț
i dinamice paginilor web
și servește drept coloană
vertebrală a dezvoltării web în stil Ajax. Limbajul permite schimbări complete într
–
o pagină
web prin înlăturarea sau ascunderea eleme
nte
lor. JavaScript oferă utilizatorilor o interfa
ță
prietenoasă (DRAG&
DR
OP) sau aplica
ții pe mai multe
nivele (DROP DOWN)
.

„
C
onstruc
ții
le

lipsă necesare pentru a face pagini web interactive sunt găsite în
limbajul JavaScript. Acest limbaj orientat pe obiecte oferă unei pagini web
capacit
atea de a
ajunge la un nivel foarte
ridicat de interac
țiune între utilizator și aplicatie.
”(Easttom, 2007)

Script
–
ul a
r trebui inclus î
ntr
–
un cod HTML

printr
–
un fi
șier separat sau prin referință

pen
tru a putea fi interpretat de că
tre browser.

În ciuda numelui
și a unor similarități în sintax
ă, între JavaScript
și limbajul Java nu
există nicio legătură. Ca
și

Java
, JavaScript are o sintaxă apropiată de cea a

limbajului C
,
dar are mai multe în comun cu

limbajul Self

decât cu

Java
.

Cea mai des întâlnită utilizare a
limbajului
JavaScript este în scriptarea

paginilor
web
.
Dezvoltat
orii web pot îngloba în paginile
HTML scrip
t
–
uri pentru diverse activită
ți,
cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri
și alte efecte
animate.

Browser
–
ele re
țin în memorie o reprezentare a unei pagini web sub forma
unui

arbore

de

obiecte

și pun la dispoziție aceste obiecte script
–
urilor JavaScript, care le pot
citi
și manipula. Arborele de obiecte p
oartă numele de

Document Object Model

sau

DOM
.
Exi
stă un standard

W3C

pentru DOM
–
ul pe care trebuie să îl pună la dispozi
ție un browser,
ceea ce oferă premiza scrierii de script
–
uri

portabile
, care să func
ționeze pe toate
browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat.
De
și tendința browser
–
elor este de a se alinia standardului W3C,
unele din acestea încă
prezintă incompatibilită
ți majore, cum este cazul

browser
–
ului
Internet Explorer
.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este

AJAX
,
abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea
de cereri

HTTP

în fundal, fără a reîncărca toată pagina web,
și actualizarea numai anumitor

por
țiuni ale paginii prin manipularea DOM
–
ului paginii. Tehnica AJAX permite construirea
unor interfe
țe web

cu timp de răspuns mi
c, întrucâ
t opera
ția (costisitoare ca timp) de
încărcare a unei pagini HTML complete este în mar
e parte eliminată.

1.5
LIMBAJUL DE STILIZARE CSS

Cascading Style Sheets (CSS)
reprezintă modalitatea recomandată de a controla
prezentarea

aspectului într
–
un do
cument web. Principalul avantaj al CSS
–
ului fa
ță
de acea
parte a HTML
–
ului legată

de prezentare este acela că stilul poate fi păstrat în întregime
separat de con
ținut.

CSS

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
.

Există

3 m
etode pentru a specifica regulile de stilizare pentru elementele dintr
–
un
document

HTML
ș
i anume:

–

Plasarea regulilor intr
–
un fi
ș
ier separat extern spre care se face referire pr
intr
–
un link sau
printr
–
o regulă

de tip @import
;

–

Plasarea regulilor într
–
un
fi
ș
ier
separat

intern î
n cadrul tag
–
ur
ilor <style> … </style>
(această metodă

fiin
d folosită în aplica
ția ce urmează să fie prezentată
)
;

–

Plasarea regulilor î
ntre tag
–
urile de marcare ale
elementului pentru care se dore
ște o
anumită

stilizare (inline)
.

Figura nr
.
1.2
–

Exempl
u de stilizarea inline (preluată

de pe
www.w3schools.com/css/css_howto.asp
)

“
Cea mai
recomandată dintre aceste metode este aceea prin care regulile de stilizare se
plasează într
–
un fi
șier intern, mai ales în prima fază a stilizării, pentru a
e
vita problemele
cauzate de memoria CACHE a browser
–
ului. De asemenea, se recomandă evitarea pe cât

posibilă a stilurilor plasate inline deoarece pagina HTML va primi o cantitate de cod prea
mare pentru a putea fi citită cu u
șurință de către dezvoltatori, mai ales în cazul mai mulți
dezvoltatori lucrează la aceea
și aplicație
.
”

(
O’Brien, 2008
)

CAPITOLUL 2
–

DIAGRAME UML

“UML (acronim pentru Unified Modeling Language) este

un limbaj vizual de
modelare utilizat pentru specificarea, construirea și documentarea sistemelor de aplicații
orientate obiect și nu numai. O diagramă este o prezentare grafică a unui set de elemente,
cel mai adesea exprimat ca un graf cu noduri (element
ele)
și arce (relațiile).” (Mihai
Gabroveanu, 2016)

2.1 DIAGRAMA CAZURILOR DE UTILIZARE

O diagramă a cazurilor de utilizare (use case diagram) prezintă o colec
ție de cazuri
de utilizare
și actori care:

–

oferă o descriere generală a modului în care va fi
utilizat sistemul;

–

furnizează o privire de ansamblu a func
ționalităților ce se doresc a fi oferite de sistem;

–

arată cum interac
ț
ion
ează sistemul

cu unul sau mai mul
ți actori;

–

asigură faptul că sistemul va produce ceea ce s
–
a dorit.

Figura nr.
2.1
–

Diagrama cazurilor de utilizare pentru un administrator de site

În figura nr.
2.1
este prezentată o diagramă UML în care utilizatorul beneficiază de
datele de autentificare, reprezentând astfel unul dintre administratori. Un administrator, în
afară de viz
ualizarea site
–
ului, lucru ce poate fi făcut de orice utilizator, poate să acceseze
și
panoul de control, având posibilitatea realizării ac
țiunilor de mai sus.

Prin modificarea datelor se în
țelege modificarea a anumitor caracteristici a
înregistrărilor, da
r
și ștergerea de înregistrări existente sau adăugarea de înregistrări noi.

2.2 DIAGRAMA DE OBIECTE

Diagramele de obiecte (de instan
țe) ilustrează obiecte și legături. Diagramele de
obiecte reprezintă structura statică
și sunt folosite în primul rând pentr
u a arăta un context
–

spre exemplu, înainte sau după o interac
țiune.

Numele fiecărui obiect reprezentat corespunde unui model incomplet, în care clasa
obiectului nu a fost încă specificată. Clasa singură evită introducerea de nume care nu sunt
necesare î
n diagrame și permite în același timp exprimarea mecanismelor generale valabile
pentru multe obiecte.

Figura nr.
2.2
–

Diagrama de obiecte pentru un client fără date de autentificare

În figura nr.
2.2
sunt prezentate toate op
țiunile vizitatorului pe site
. Obiectele din
această diagramă sunt reprezentate de paginile care pot fi accesate, fiecare din acestea
oferind informa
ții noi legat
e de restaurantul Lorena’s Pizzeria
. Fiecare pagină este
denumită sugestiv pentru a ajuta utilizatorul să î
și procure ușor
informa
țiile de care are
nevoie.

2.3 DIAGRAMA DE ACTIVITATE

Diagramele de activitate s
e folosesc pentru modelarea aspectelor dinamice ale un
ui
sistem, la diferite nivele: începâ
nd de l
a nivelul „business process”, până

la nivel
de
opera
ț
ie
a unei clase.
Din acest motiv, î
n diagramele d
e activitate se folosesc un numă
r
mare de simboluri.

O

diagramă de activitate poate reda pa
ș
ii unui proces

de calcul, fluxul controlului
într
–
o operatie, execu
ția secvențială sau paralelă

a unor ac
ț
iuni.

O ac
țiune reprezint
ă un singur pas într
–
o activitate: un calcul, gă
sirea unor date,
verificarea unor date
, etc.

Figura nr.
2.3
–

Diagrama de activită
ți pentru un client care vizitează site
–
ul

În figura nr.
2.3
sunt eviden
țiate exact acțiunile unui clie
nt care vizitează s
ite
–
ul.
După
ce
intră pe prima pagină, identifică pagina care consideră că de
ține informațiile de
care el are nevoie la momentul respectiv (fie că are nevoie să
știe care sunt produsele
disponibile, fie că are nevoie de numărul de telefon pentru a face o c
omandă, pre
țul pentru
a organiza o petrecere la restaurant etc.)
și decide dacă pe pagina accesată găsește
informa
țiile necesare. Dacă nu a găsit momentan ceea ce avea nevoie, poate să salveze
numărul de telefon
și să apeleze ulterior restaurantul. În caz
contrar, folosindu
–
se de

informa
ții poate apela pe loc numărul de telefon al restaurantului, pentru a face o comandă
sau o rezervare, poate să contacteze direct restaurantul prin formularul de pe pagină de
contact, etc.

2.4 DIAGRAMA DE STARE

O
diagramă de stări modelează via
ța unui obiect prin stările sale și schimbările de
stare care au loc pe parcursul vie
ții. Schimbările de stare sunt determinate de evenimente, o
diagramă de stări reprezentând un automat cu stări
finite.

Diagramele d
e stări m
odelează

efectul

interac
ț
iuni
lor

asupra st
ării interne a fiecă
rui obiect.

Figura nr.
2.4
–

Diagrama de stă
ri pentru administrator

Dacă

în figura nr.

2.3

s
–
au eviden
țiat acțiunile unui client, în figura nr.
2.4
vor fi
eviden
țiate acțiunile unui administr
ator, de data aceasta prin intermediul unei diagrame de
stare. Utilizatorul va accesa site
–
ul, va accesa pagina de logare
și va introduce datele pentru
autentificare. Dacă autentificarea s
–
a realizat cu success, va fi accesat panoul de control,
utilizatoru
l fiind astfel considerat administrator pe site. Administratorul va căuta sec
țiunea
în care dore
ște să modifice date (acest lucru implicând modificarea caracteristicilor unor
date existente,
ștergerea unor date existente dar și adăugarea de date noi), va e
xecuta
modificările dorite
și le va salva. După ce aplicația

Web va fi actualizată cu succe
s,
administratorul se v
a deloga de pe site
și va părăsi

site
–
ul.

CAPITOLUL 3
–

REALIZAREA APLICA
Ț
IEI

3.1 INTERFA
Ț
A PUBLIC
Ă

Design
–
ul
unui website este
și cartea sa
de vizită, designul reprezintă unul din cele
mai importante elemente ce alcătuiesc un website. Design
–
ul mereu trebuie să fie în trend
cu noile tehnologii
,

dar
și cu celelate website
–
uri. Practic
,

tehnologia se schimbă
și designul
la fel, un exemplu ar put
ea fi următorul: în urmă cu cel pu
țin 2 ani , tehnologia HTML era
pe versiuna 4 , stilurile (CSS) erau la versiunea 2 , acest lucru implica foarte multă muncă ,
mai ales în rotunjirea marginilor unui chenar. Ca element de design era foarte important
orice
progam de editare grafică, iar imaginile în format PNG s
au GIF erau foarte folosite,
de
o
a
rece fiecare col
ț și fiecare element de la marginea chenarului trebuia stilizat la nivel
grafic, ulterior implementat pe website la nivel de linie cod, acest lucru îng
reuna foarte
mult încărcarea site
–
lui. Noua tehnologie HTML5
ș
i CSS3 , totul se rezumă la 2 li
nii de cod
de stilizare
și anume „border
–
radius:4px sau n numere px (pixeli) iar pentru margini
border:Npx solid #ccc unde N este cifra”. Î
n

ziua de astăzi tehno
logia mobilă se apropie cu
puterea de pondere de pia
ță de 50%, ceea ce înseamnă că aproape a ajuns la concurență
dispozitivelor de tip desktop, iar varianta mobilă sau responsive a unui website este foarte
importantă.

Revenind asupra primului paragraf
:

un

utilizator este un poten
țial cli
ent al afacerii
care o avem pe I
nternet, dacă designul nu este atrăgător sau dacă are probleme vizuale
există posibiliatea că acel utilizator să rămână d
oar un simplu utilizator
,

nu
și
un client.

Design
–
ul
primei pag
ini
, e
ste format din elemente

din 2 libră
rii,
ș
i anume librăria
modernizr.js
si

librăria provenită din

bootstrap.

Figura nr.
3.1
–

Prima pagină a aplica
ției

După
cum se poate observa, acest design este unul flat
și minimalist, culorile sunt de
tip HEX, neefind
prezentă nici o imagine de tip brackgrou
nd, imagine care ar ajuta la
cr
eare
a unor elemente

din design
–
ul
site
–
ului.

Slider
–
ul, este creat cu ajutor librăriei modernizr.js
,
această librărie a folosită în
locul carousel
–
u
lu
i bootstrap, deoarece oferă un plus

de s
ti
lizare

prin anima
ț
iile predefinite
din aceasta
.

Figura nr.
3.2
–

Slider
–
ul d
epe prima pagină

Figura nr. 3.3
–

Prezentarea codului indentat pentru afi
șarea slider
–
ului

Î
n figura

3.3
am
prezentat

codul html

pentru afi
ș
area slide
–
ului. Acest cod,
este unul
minimalist, la baza lui fiind elemente din

cadrul familiei „bullet list”
:
<ul><li>Continut</li></ul>.

Produsele

din
prima pagină

sunt afi
șate prin intermediul unei interogări asupra bazei
de date cu ajutorul unei structuri

repetitiv
e

WHILE
, sin
taxa SQL folosită pentru interogarea
datelor intr
oduse în tabela produse, con
ținând

elementul „LIMIT 8”
și
“
ORDER by id
DESC
”
.
“LIMIT 8” reprezint
ă limitarea afi
șării numărului de elemente la 8
, în timp ce
“
ORDER by id
” indică coloana după care se va realiz
a ordonarea, iar
“DESC” indic
ă
modul de ordonare descrescător.

Se observă de asemenea în codul prezentat mai sus
apari
ția funcției
mysql_fetch_array($query). Această func
ție returnează
parametrul
$query sub formă de
vector, atribuindu
–
se variabilei $row la

fiecare itera
ție a ciclului WHILE.

Pentru
a afi
șa informațiile detaliate ale produselor, am folosi
t elemente din librăria
grid.js
, astfel am ob
ținut un dropdown foarte elegant, care oferă un grad mult mai ridic
at de
a ajunge la informa
țiile
detalitate.

Informa
țiile detaliate sunt afișate în următoarea formă
:



Nume



Descriere



Pre
ț



Imagine produs

Figura nr.
3.4
–

Lista de produse de pe prima pagină

Codul sursă pentru afi
șarea conț
inului

este următorul
:

<
?php

$query = mysql_query("select * from produse ORDER by id DESC LIMIT 8")or
die(mysql_error());

while ($row = mysql_fetch_array($query)) {$id = $row['id'];?>

<li>

<a style="color:#fff" href="#" data
–
largesrc="administrator/<?php echo $row['Photo']; ?>
"

data
–
title="<?php echo $row['Name']; ?>" data
–
description="data
–
description">

<?php echo $row['Price']; ?> LEI

</div>

</div>

</a>

<h2 style="color:#000">Detalii Produs</h2>

<h3 style="color:#000"><b><?php echo $row['Name'];

?></b></h3>

<hr>

<?php echo $row['Description']; ?>

</p>

</div>

</li>

<?php } ?>

</ul>

Acest cod sursă este
unul minimalist

din pu
n
ct de vedere a
l

sintaxei HTML
,
principala formă de afi
șare a conț
inutu
lu
i,
rămânând în continua
re „bullet list
–
ul”, precum
și
la slide
–
show.

Con
ț
inutul

este afi
șat direct din baza de date folosind

structura repetitivă

WHILE.

Lista

de evenimente din prima pagină
folose
șt
e de asemenea structura repetivă
WHILE, con
ț
in
t
ul fiind interogat din
tabela „evenimente”.
Ș
i aici elementele sunt ordonate
după ID în formă descrescăt
oare, iar limita de afi
șare este de

doar 2 elemente, în cazul
nostru doar ultimele 2 evenimente a
dăugate
.

Figura nr.
3.5
–

Lista de evenimente de pe prima pagină

Afi
ș
area
evenimentelor se face folosind clasel
e de bootstrap col
–
md
–
6,
cod
folosit
pentru

afi
șarea pe 2 coloane
ale
desktop
–
ului

și col
–
xs
–
12, clasă
utilizată pentru

afi
șarea
con
ținutului într
–
o singură coloană, în varianta mobilă a website
–
ului. Butonul „TOATE
EVENIMENTE
LE”, con
ține un hyper
–
link, cu trimite
re

către pagina

evenimente.php.

În cadrul
paginii

cu toate produsele
(
produse.php
)

design
–
ul
afi
șării produsel
or este
acela
și precum și în prima pagină, dar de data aceasta sintaxa de interogare
SQL

este
diferită
:

$query = mysql_query("select * from produse ORDER by id DESC ")or
die(mysql_error());

Această

interogare nu
mai este limitată în ceea ce prive
ște

număr
ul de elemente. D
e
aceea ea va afi
șa toate informațiile din baza de date
My
SQL, din tabela produse. Singura
asemănare între interogarea din pagina principală
ș
i această interogare este aceea că or
dinea
afi
șării este aceeași, după
cămpul
ID în ordine
descrescătoare
.

Fig
ura nr.
3.6
–

Pagina de Produse a aplica
ției

Pagina galeriei foto
(
galerie.php
)
, este
destinată prezentării vizual
e

a resta
u
ra
ntului.
Afi
șarea conținutului (imaginilor) este real
izat cu ajutorul div
–
urilor

ale căror clasă de
bootstrap
u
tilizată în aplica
ție este col
–
md
–
4. A
ceastă clasă permite afi
șarea a patru
elemente pe linie în varianta desktop, iar pentru variant
a

mobilă a paginii am folosit clasa

de bootstrap col
–
xs
–
6
, aceasta

facilitând afi
șarea elementelor pe două coloane
.

Pentru
interogar
ea bazei de date am folosit următoare sintaxă

SQL:

$query = mysql_query("select * from galerie ORDER by id DESC ")or die(mysql_error());

Această

sintaxă de interogare afi
șează toate elementele din baza de date
, iar
ordonarea elementelor se
realizează

în func
ție de
câmpul
ID
, în mod

descrescător
.

Ac
ț
iunea pe cli
ck asupra unei imagini, duce la

ac
ționarea script
–
ului lightbox, a
cărui scop este să deschidă un modal responsive, în care utilizatorul poate vedea o anumită
poză într
–
o dimensiune mu
lt mai mare, nefiind nevoie să părăsească pagina web
.

Acest
lucru poate fi observat în fig.
nr. 3.7.

Figura nr.
3.7
–

Afi
șarea modal
–
ului responsive

Pagina ofertelor

(
blog.php
)

în această

pagină sunt afi
ș
ate ofertele cu
rent
e,

dar
ș
i
cele t
recute, interog
area SQL este ac
ționată de urmă
torul query:

$query = mysql_query("select * from blog ORDER by id DESC ")or die(mysql_error());

La fel

ca
și în cazurile anterioare, s
–
a realizat

o interogare asupra întregii tabele, în
cazul acesta, tabela blog con
ține toate infor
ma
țiile datele necesare pentru

a afi
șa conținutul
evenimentelor. Fiind pagină destinată ofertelor, o limită asupra datelor afi
șate din baza de
da
te nu este necesară, dimp
otrivă

clien
ții ar trebui
chiar
să
aiba posibilitatea să
vadă
ofertele vechi
ș
i
ulterior să î
și formeze

o părere asupra restaurantului.

De aceea
,

ofertele
trebuie

în permanen
ță verificate
,

iar din punct de vedere al marketing
–
ului, fie că sunt oferte
vechi

sau noi, ele trebuie de

fiecare dată să atragă clientul
.

Un vizitator
este un poten
țial client de aceea el nu trebuie
decât

să fie convins
,

ci
și
atras în totalitate pentru a ne asigura că

el va face o comandă, pe baza informa
țiilor oferite
de

website.

Figura nr.
3.8
–

Pagina de Oferte a aplica
ției

Dupa cum se poate observa in
fig.
3.8
, ofertele sunt afi
ș
ate
într
–
o singură coloană,
iar
sintaxa de marcare HTML este următoarea
:

<?php $query = mysql_query("select * from blog ORDER by id DESC ")or
die(mysql_error());

while ($row = mysql_fetch_array($query)) {

$id = $row['id'];?>

<div style="background: url(administrator/<?php echo

$row['photo']; ?>);background
–
position:center;background
–
size:cover;height:230px;overflow:hidden;"></div>

Pentru
afi
șare
s
–
a

folosit un tag de t
ip <div>, împreună cu clasa B
oots
trap col
–
md
–
12, pentru afi
șarea într
–
o singur
ă coloană în varianta desktop. P
entru mobil
s
–
a

păstrat o
singură coloană de afi
șare, pri
n folosirea clasei de boostrap
col
–
xs
–
12.

Pagi
na evenimentelor

are forma unui

timeline, evenimentele
fiind afi
ș
ate sub
for
ma unui
ș
ir continuu de elemente.

Figura nr.
3.9
–

Pagina de Evenimente aplica
ț
iei

Pentru

acest tip de afi
șare a
e
venimentelor
s
–
a

urmărit exemplul
afi
șării de pe
Facebook, mai exact afi
șarea de tip timeline. Motivul pentru aceasta a fost că într
–
o lună

pot fi un număr mai ridicat de

evenimente

decât în alte luni
și de aceea

am dorit ca
vizitatorul să
aibă posibilitatea să le vadă pe toate în ordine cronologică
.

Pentru afi
șarea acestor
elemente
,
interogarea folosită a fost următoarea
:

$query =
mysql_query("select * from evenimente ORDER by id DESC ")or die(mysql_error());

Iar afi
ș
area
în sine s
–
a realizat prin intermediul următoarei sec
țiuni

de cod:

while ($row = mysql_fetch_array($query)) {

$id = $row['id'];?>

<li>

<span>

<?php echo $row['data']; ?>

</span>

</time>

</div>

<div class="col
–
md
–
5 col
–
xs
–
12 "style="margin
–
right:15px;background:
url(administrator/<?php echo $row['Photo']; ?>); background
–
size:cover;background
–
position:center;height:200px;"><a style="height:100%;width: 100%
;display:block;"
class="example
–
image
–
link" href="administrator/<?php echo $row['Photo']; ?>" data
–
lightbox="example
–
1"></a>

</div>

<hr>

<p>Locuri disponibile: <?php echo
$row['locuri']; ?></p>

</div>

</li>

Î
n
această sec
țiune de cod se pot observa

și elemente din HTML5 și anume tag
–
ul

“<time></time>”. Acest

tag este
destinat
în mod special afi
șării

timpului.

Stuctura repetivă

WHILE

afi
șează

elementele interogate

din baza de date din tabela
evenimente.

Elementele afi
șate sunt urmă
toarele:



Nume



Dată



Descriere



Locuri disponibile



Pret

Fo
tografia de prezentare a ev
enimentelui poate fi vizualiza
t
ă î
n lightbox, precum
ș
i î
n
pagina galeriei.

Evenimentele au un rol imp
ortant î
n acest tip de afacere
,

deoarece
prin

evenimente
se pot atrage clien
ți

ț
intă. Î
n cazul acestui
tip de aplica
ție
, este absolut necesar ca
evenimentele să poată fi vizualizate
și pe site, în acest mod
fiind posibilă cu u
șurință

promovarea evenimentelor pe re
țele sociale,
dar în acela
și timp fiind

promova
te
și
websiteul
,

dar
și restaurantul împreună cu întreaga afacer
e.

Pagina de contact

este una
dintre cele mai importate pagini a
le

unui site, deoarece
aici trebuie să se regăsească adresa, datele firmei (dacă este nevoie)
și

c
el mai important,
posibilitatea de a lua legătura cu o perso
ană

re
sponsabilă

cu rela
ți
ile cu clien
ții din cadrul
organiza
ției.

Figura nr.
3.10
–

Pagina de Contact a aplicatiei

În componen
ța

acestei pagini, au fost

folosit
e

două elemente foarte importante
și
anume, embed
–
ul Google M
aps, pentru a pune pe website harta locatiei actuale
și
f
ormularul
de contact.
Pentru afi
șarea h
ăr
ț
ii cu loca
ția

actuală s
–
a folosit următorul
IFRAME:

Se observă în codul de mai sus defin
irea loca
ției ca fiind Universitatea Petrol
–
Gaze
din Ploie
ști.

Acest lucru a fost posibil prin căutarea locatiei în motorul de căutare Google.
Apoi s
–
a accesat sec
țiunea Hărți de la rezultatele căutării și apoi butonul de distribuire.
Astfel apare o fereas
tră cu un link ce poate fi copiat
și apoi lipit ca valoare pen
tru sursa
(src) unui
IFRAME.

Figura nr.
3.11
–

Exemplu de link generat din Google Maps.

Formularul de pe pagina de Contact

nu este conectat la server
–
ul

SM
TP, ci este un
formular a
l

cărui

scop este acela

de a face inserarea

datelor
completate, către o anumită
tab
e
lă

din baza de date. Mesajele private se pot vedea din panoul de administrator
.

Sintaxa SQL
folosită pentru a adăuga informa
țiile în baza de date este următoarea
:

<?php if(isset
($_POST['submit_contact'])){

$Name=$_POST['name'];

$Email=$_POST['email'];

$Subject=$_POST['subject'];

$Message=$_POST['message'];

$dt=$_POST['dt'];

mysql_query("insert into contact (Name, Subject, Email, Message, data_timp)
values('$Name','$Subject','$Email','$Message',now())")or die(mysql_error());

header('location:contact.php'); }?>

Adăugarea datelor se face î
n tabela contact, după
ce s
–
a apăsat butonul de trimite a
mesajului, loca
ți
a de reîncărcare este aceea
și (contact.
php)

acest lucru se poate observa pe

ultima linie a codului de mai
sus
:

header('location:contact.php');.

3.2
PANOUL DE ADMINISTRATOR

Panoul de
administrator este cea mai importantă sec
țiune a unui website dinamic.
Prin intermediul panoul
ui

de administrare, se pot modif
i
ca datele pe care utilizatorii
le pot
vedea.

Un panou de administrare pe un website este foarte important deoarece anumite
costuri pot fi eliminate
, plus modul de a actualiza

datele nu este deloc complicat. Acele
costuri sunt

eliminate din cauza faptului că restaurantul, în loc să plătească o altă firmă
pentru între
ținerea și actualizar
ea site
–
ului, acesta poate fi “
î
ngrijit” direct de către

administratori.

Panoul de administrator este compus de
trei sec
ț
iuni, două

dintre ele

fiind statice iar
a
treia

dinamic
ă
.

Prima
sec
țiune este meniul panoului de administrare de pe latura stânga, conținutul
de aici es
te static
,

iar el se poate regăs
i în fi
șierul sidebar.php. Meniul vertical din header
–
ul
site
–
ului

este al doilea

element
sta
tic al panoului de control. A
cesta la rândul său este format
din mai multe elemente.

Primul d
intre ele

este LOGO
–
ul, situat

în latura stângă, deasupra
meniului.

Al doi
lea element

este titlul (Panou de Control), următorul element
este un
hyperlink către int
erfa
ța publică a site
–
ului,
iar
următorul element
este numele
administratorului. N
umele este identificat în urma interogării, bazate pe logarea
administratorului.

Ultimul element
este butonul de
delogare.

Pagina
setată ca default în urma logării
, este pagi
na administratorilor.

A
ici se pot
vedea toate detaliile administratorilor,

iar tot
odată aceasta
reprezintă

și una din secțiunile
dinamice ale panoul
ui

de administrator, toate informa
țiile
fiind

afi
șate com
plet în urma
interogării bazei
de date.

Figura n
r.
3.12
–

Lista de administratori

Butonul “Adaugă

Administrat
or”

va deschide un modal din framework
–
ul
Bootstrap.

A
colo vor fi
afi
șate câmpurile necesare pentru adăugarea unui nou administrator.
Câmpurile sunt următoarele: username, parolă
și nume

complet.

Figura nr.
3.13
–

Modal
–
ul adăugării unui nou administrator

Această modalitate
prin care un

administrator este adăugat de către alt administrator
este mult mai sigură decât cazul în care un administrator era nevoit să î
și facă singur cont,
deoarece există posibilitatea înregistrării per
soanelor care nu sunt angaja
ți ai restaurantului.

Butonul
“
E
ditează
”

va deschide un alt modal, din framework
–
ul bootstrap, de
data
aceasta datele

sunt preluate din baza de date
și
afi
șate ca val
oare

în
tr
–
un input. Î
n acest
mod
,

datele sunt editate
cu succes
prin ac
ționarea butonului
salvează
.

Butonul “
Ș
terge” are r
olul de a elimina
con
ținutul nedorit, în cazul de față un alt
administrator.
Pentru a putea
șterge

continutul din baza de date

link
–
ul
ce trebuie accesat
este următorul
http:/
/localhost/lorena/administrator/modaluri/admin/delete.php?id=3
, unde
id=3 este defapt id
–
ul cu care
este înregistrat administratorul în
baza de date.

<?php

include('../../config.php');

$id=$_GET['id'];

mysql_query("delete from administrator where
id='$id'")or die(mysql_error());

header('location:../../index.php');

?>

În

pagina produselor

din panoul de control se poate vedea că întreaga bază

de date
cu p
roduse este afi
șată, existând posiblitatea editării produselor sau a adăugării altor
produse

no
i.

Figura nr.
3.14
–

Lista de produse

Î
ntreg
con
ținutul este dinamic, iar afișarea produselor este sub formă de tabel.

Pe
prima coloană a tabelului este id
–
ul produsului iden
tificat în baza de date

în tabela produse
.

Imaginea
produselor este

afisată prin acela
și lightbox folosit și în interfața publică,
oferind posiblitatea administratorului să vizualizeze fotografia într
–
o dimensiune mai mare
prin simpla ac
țiune a unui click direct pe poză
.

Butonul “Adaugă produs”

va deschide un modal oferit

de framework
–
ul bootstrap
unde câ
mpurile pot fi
completate
,

iar rezultatul va fi reprezentat de adă
ugare
a cu success a
unui nou produs î
n baza de date.

Butonul

“Edit”
va deschide modal
–
ul prezentat în fi
gura nr.
3.15
, prin intermediul
că
ruia pot fi vi
zua
l
izate detaliile produsului în î
ntregime pentru a facilita editarea lor
.

Figura nr.
3.15
–

Modal
–
ul de editare a caracteristicilor unui produs

Afi
ș
area detaliilo
r se face

prin intermediul câ
mpului
value
din tag
–
ul
input.

Se pot salva modificările prin
ac
ționarea butonului “Save”

sau se po
t abandona
modific
ările

apăsând

pe butonul
“No” sau
î
n afara modal
–
ului
.

În

pagina galeriei
,
galeri
a foto a site
–
ului este dinamică, administratorul (sau
administratorii) fiind singurii carepot

popula baza de date

cu po
ze.

Figura nr.
3.16
–

Lista de poze din galerie

Afi
ș
area poz
elor se face folosind clasa de B
ootstrap
col
–
md
–
4
, organizând

patru
poze pe linie. S
–
a

folosi
t

stilul CSS pentru a afi
șa butoanele de editare și ș
tergere peste poza
in partea de sus, stilul
impl
ică valorile:

position:absolute;top:0;left:0;right:0; si u
n
background: rgb cu transparen
ță
.

Pentru a ad
ă
uga o poza în galerie se va executa ac
ț
iunea as
upra butonului “Adaugă

Imagine”
și

se va deschide
modal
–
ul prezentat in figura nr.
3.17
.

Figura nr.
3.
17
–

Modal
–
ul de adăugarea a unei noi imagini

Î
n baza de date
se va completa tabela
Photo
, sub forma
uploads/galerie/nu
mepoza.jpg. Pozele se pot edita sau încărca din nou pe site prin ac
ț
iunea
asupra butonului
“E
dit
”, dar se pot
ș
terge prin ac
ț
iunea butonului destinat acestei
ac
ț
iuni.
Butonul de editare a fost

folosit
,

deoarece s
–
a

considerat
că există
și cazul în care se dorește

schimbarea unei poze, dar
și pă
strarea ei în aceea
și poziție.

În

p
agina oferte

s
–
a
decis
crearea

un
ui feed
(posibilit
atea afi
șării tuturor
elementelor)
asupra
ofertelor noi
ș
i vechi. A
dăugarea ofertelor este dinamică
, prin utilizarea
modal
–
urilor.

Figura nr.
3.18
–

Lista de oferte din panoul de control

Lista de oferte este afi
șată într
–
o formă de tabel, coloanele
fiind împăr
ț
ite astfel:
id,

nume oferta, con
ți
nut, imagine
, ac
ț
iuni.

A
fi
ș
area imaginilor se

face cu ajutorul lightbox
–
ului, prin ac
ț
iunea asupra imaginii
cu un click.

Adă
u
garea ofertelor se face prin ac
ț
iunea
asupra butonului
”Adauga oferta
”
,

rezultatul fiind cel prezentat in figura nr.
3.19
.

Figura nr.
3.19
–

Modal
–
ul de adăugare a unei noi oferte

Pagina evenimentelor
. Î
n cazul unui restaurant evenimentele sunt foarte
importante,
de aceea informa
țiile despre un eveniment trebuie să fie cât
mai concrete.

Afi
ș
area evenimentelor se face cu ajutorul unui tabel, împăr
țit pe mai multe coloane și
anume
:

id,

num
e, data, locuri, pre
ț, imagine și acț
iuni.

Figura nr.
3.20
–

Lista de evenimente din panoul de control

Adă
ugarea evenimentelor,
prin ac
țio
narea butonului “Adauga Eveniment”, se va
deschide un modal, iar în acest modal se vor găsi câmpurile ce trebuiesc completate, pentru
ca un eveniment să fie cât mai

complet.

Figura nr.
3.21
–

Modal
–
ul de adăugare a unui nou eveniment

Afi
ș
area imaginii ev
enimentu
lui se poate
face prin ac
ț
iunea c
u un click asupra
imaginii, afi
șarea fiind făcută

cu ajutorul lightbox
–
ului.

Pagina contact,

având formularul de contact din sec
țiunea publică a site
–
ului ce
trimite mesajele de la vizitatori către baza de date, în
sec
țiunea privată a panoului de control
mesajele pot fi citite
și ulterior șterse
.

Figura nr.
3.22
–

Lista de mesaje din panoul de control

După

cum se
observă
,
împreună cu id
–
ul din baza de date care este
de tip
auto
increment

(la fiecare înregistrare no
uă
, acesta va lua valoarea +
1)
.
Câmpul datei
reac
ționează la fel, în momentul în care s
–
a trimis un mesaj, baza de date va completa

automat câmpul destinat datei, tocmai pentru a se putea
ține evidența cronologică a
mesajelor. Mesajele de asemenea pot fi
șt
erse, dar se pot vedea
și mai detaliat, prin acțiunea
asupra butonului “vezi”. Se va deschide un modal, care întocmai unui email , datele sunt
organizate pentru a facilitata citirea cu aten
ție a mesajului.

Figura nr.
3.23
–

Modal
–
ul de vizionare a unui
mesaj primit

3.3 BAZA DE DATE

A
avea un magazin cu o diversitate mare

de

produse este foarte avantajos pentru
afacere, dar trebuie oferită o mai mare flexibilitate cu aceste produse. Analizând modul de
extindere a informa
țiilor stocate despre produsele noastre, și extinderea produselor în acest
fel, anumite produse trebuie să
permită utilizatorului să personalizeze produsul, în sensul să
aibă posibilitate să selecteze o variantă a produsului. Astfel se vor incărca imagini
și text ca
parte a produsului pentru a ajuta clientul în decizia sa
. (Peacock, 2010
)

Conectarea la baza de
date
din localhost/phpmyadmin
s
–
a fă
cut astfel

în fi
ș
ierul
administrator/config.php
:

<?php

mysql_select_db('lorena', mysql_connect('localhost','root',''))or die(mysql_error());

error_reporting(E_ALL);

ini_set("display_errors", 0);

?>

Î
n

această

por
țiune de cod, ‘lorena’ reprezintă numele bazei de date, localhost
reprezintă numele host
–
ului (în cazul acestei aplica
ții este vorba de o găzduire locală, chiar

pe ma
șinăria de pe care se va prezenta proiectul)
,

iar root reprezintă numele dezvoltatorul
ui
Web

care folose
ște și modifică baz
a de date
.

Baza de date este
format
din urmă
toarele tabele:

–

Tabelul administrator
format din

coloanele id, Username, Password

ș
i nume_complet

ce
con
ține înregistrări despre toate persoanele care au drept de administr
are pe site. Cu
ajutorul acestui tabel se va face verificarea în momentul când o persoană încearcă să se
autentifice pe site. De asemenea
,

tot din acest tabel se va afi
șa în partea dreaptă sus numele
administra
torului care este logat în acel

moment;

–

Tabe
lul blog
format din

coloanele id, title, content
ș
i
photo. Înregistră
rile din acest
a vor fi
afi
șate î
n pagina O
ferte

(blog.php)
;

–

Tabelul contact format din coloanele id, N
ame, Email, Message, data_timp
și Subject.
Acestea sunt informa
ț
ii legate de mesaje
le primite de administrator de la utilizatori.

–

Tabelul evenimente format din coloanele id, Titl
e, locuri, pret, data, Content
și Photo.
Aceste î
nregis
trări se vor afi
șa î
n pagina E
venimente

(evenimente.php)

–

Tabelul g
alerie format din coloanele id
și
Photo
și reprezintă conț
inutul de pe pagina
G
alerie

(galerie.php)

–

Tabelul produse

format din coloanele id, Name, D
escription, Price, Photo ce con
ț
in
inf
orma
țiile despre toate produsele afișate î
n pagina P
roduse

(produse.php)

Pentru afi
ș
area tuturor acest
or elemente din ba
za de date s
–
au folosit interogă
ri de
tip
SELECT,

ca în exemplul urmă
tor:

$query = mysql_query("select * from produse ORDER by id DESC ")or
die(mysql_error());

Apoi, folosind
o structură repetitivă de tip WHILE înregistrările se afi
șează
pe
pagină, aplicându
–
se de fiecare dată

reguli de stilizare diferite:

while ($row = mysql_fetch_array($query)) {

$id = $row['id'];

<div class="col
–
md
–
4 col
–
xs
–
6" style="background: url(administrator/<?php echo

$row['Photo']; ?>);
b
ackground
–
size:cover;background
position:center;

height:300px;">

<a style="height:100%;width: 100%;display:blo
ck;" class="example
–

image
–
link"
href="administrator/<?php echo $row['Photo']; ?>" data
–

lightbox="example
–
1"></a>;

</di
v>

<?php } ?>

De
asemenea interogările de tip SELECT apar
și în
panoul de administrare pentru a facilita modificarea
și
organizarea înregistrărilor existente deja în baza de date. Prin
intermediul acestora, se afi
șează din nou toate elementele din
tabel
ul respective, de data această cu op
țiun
i de
ș
tergere sau de
modificare.

Restul
int
erogărilor pentru modificarea în
registrărilor
sunt folosite doar pentru paginile din panoul de administrare.

Pentru simplificarea utilizării ac
țiunilor de adăugare, ștergere
sau modifica de înregistrări, acestea au fost mai întâi adăugate în
folder
–
ul numit “modaluri”, iar mai apoi repartizate în trei fi
șiere
diferite (adaugă.php, delete.php
și editează.php) și
separate în
câte un folder cu nume sugestiv (blog, events, etc.) pentru
pagina asupra căreia se ac
ționează. Singura excepție de la
această regulă este folder
–
ul contact care con
ține doar un fișier
de
ștergere a mesajelor primite și un fișier pentru viziona
rea
mesajelor de la vizitatorii de pe site.

Apoi, pentru fiecare ac
țiune în parte se face includerea
por
țiunii de cod acolo unde este nevoie de aceasta
astfel:

<?php include 'modaluri/galerie/editeaza.php'; ?>

<?php include 'modaluri/galerie/adauga.php'; ?>

Figura nr. 3.24
–

Organizarea

modal
–
urilor

Numele folder
–
ului “modal
–
uri” vine
de la modul în care îi sunt afi
șate toate aceste
op
țiuni administratorului de site cu privire la modificarea

înregist
rărilor,
și anume sub
formă de
modal
–
uri.

Î
n fiecare modal,
după ce se realizează toate modificările necesare, administratorul
are două posibilită
ți
,

și anume să salveze modificările sau să le anuleze. Aceste două
posibilită
ți sunt oferite prin in
termediul a două butoane cu nume sugestive. În cazul în care
se alege op
țiunea de anulare a modificărilor, modal
–
ul se închide. În caz contrar,
modificările se salvează în baza de date
și pot fi imediat vizibile

utilizatorilor care vizitează
site
–
ul.

Inter
ogările de modificare ale înregistrărilor au fost realizate după cum urmează
:

–

Inserarea de noi înregistră
ri:
mysql_query("insert into galerie (Photo) values
('$location')") or die(mysql_error());

–

Ștergerea de înregistră
ri existente:
mysql_query("delete

from galerie where id='$id'")or
die(mysql_error());

–

Modificarea
înregistrărilor
existente:
mysql_query("UPDATE galerie SET
Photo='$location' WHERE id = '
$id'") or die(mysql_error());

3.4 PAGINA DE AUTENTIFICARE

Orice website care are

un panou de administrare, trebuie să aibă în componen
ța sa o
pagină de logare, această pagină fiind principalul mod de a proteja site
–
ul
și pe clienții
acestuia împotriva rău
–
voitorilor.

Pe
o pagină de logare

trebuie completate anumite informa
ții.

Minimul de informa
ții
de acest gen este reprezentat de numele utilizator
și de parolă. Acestea
sunt verificate de
sintaxa PHP î
mpreună cu baza de date. Dacă datele introduse corespund cu cele din baza de
date, accesul asupra panoului de administrator este

asigurat. În caz contrar, va fi afi
șat un
mesaj de eroare,

caz în care utilizatorul care î
ncearcă să se autentifice
,

ori este acel tip de

persoană

rău
–
voitoare men
ționată mai sus, ori

este un administrator care
și
–
a introdus gre
șit
datele, iar la următo
ar
ea încercare le va introduce
corect
.

Figura nr.
3.25
–

Pagina de logare a aplica
ției

Con
e
xiunea
la baza de date, este aceea
și ca și în partea destinată utilizatorilor,
printr
–
o includere a fi
șierului config.php, după care se continuă cu codul necesar afi
ș
ării
elementelor de pagină
.

Sintaxa de cod,
pentru verificarea datelor din baza de date este urmă
toarea:

<?php

include 'config.php';

if (isset($_POST['login'])) {

$Username = $_POST['Username'];

$Password = $_POST['Password'];

$result = mysql_query("se
lect * from administrator where Username='$Username' and
Password='$Password'")or die(mysql_error());

$count = mysql_num_rows($result);

$row = mysql_fetch_array($result);

if ($count > 0) {

session_start();

$_SESSION['id'] = $row['id'];

header('locatio
n:index.php');

} else {

?>
<br>

<strong>Warning!</strong> Please check your Username and Password!

</div>

<?php } }
?>

Dup
ă

cum se poate observa în codul de mai sus, dacă datele sunt valide, sesiunea ca
adm
inistrator a început. D
acă din gre
șeală
administratorul a

ie
șit de pe link
–
ul
localhost/lorena/administrator,
se
p
oate

reveni fără
ca administratorul
să
se mai logheze

încă
odată. Sesiunea este în continuare validă
.
Continuarea validită
ții sesiunii este marcată

de sintaxel
e session_start() care marchează începutul sesiunii în care s
–
au re
ținut anumite
valori
ș
i
$_SESSION['id'] = $row['id'] prin care se preiau în variabilele l
ocale acele valori
re
ținute în sesiune.

CONCLUZII

Avantaje ale prezentă
rii on
–
line a unui restaurant:

Fiind
dezvoltate pentru a putea fi accesate de pe orice browser, aplica
țiile web
trebuie testate doar pentru diferite astfel de navigatoare.
Astfel, la ele se poate lucra de pe
orice siste
m de operare, nefiind necesară
ș
i testarea pe mai multe din acestea. Rezultă astfel
costuri mai scăzute în procesul

de realizare a unei aplica
ții
web.

Spre
deosebire de aplica
țiile tradiționale, cele web sunt
disponibile
și ușor de
accesat oriunde
și oricând, atât timp cât se utilizează un PC sau un telefon care are
conexiune la Internet. A
șadar, atât clienții
,

cât
și proprietarii au mai ușor acces la ele. În
plus, aplica
țiile web sunt mai ușor de costumizat de
cât cele de pe desktop. Designul,
prezentarea
și întregul mesaj sunt mai ușor de modificat, dar pot fi prezentate și dife
rit
pentru diferite grupuri de
utilizatori.

Con
ț
inutul
unei aplica
ții web poate fi accesat de pe o varietate de dispozitive (PC,
telefoane mobile, tablete, PDA
–
uri, mai nou console
și multe altele), sporind și mai mult
posibilită
țile utilizatorilor să aibă acces și să interacționeze cu informațiile. Iar aplica
ț
iile
web pot interac
ționa între ele mult mai ușor, spo
rind astfel accesul clien
ților
la date.

Nu
în ultimul rând, acestea sunt u
șor de instala
t (prin intermediul actualizăr
ilor se
poate ajunge la to
ți utilizatorii deodată), se adaptează la un volum de inf
orma
ții din ce în ce
mai mare
și sunt mai bine securizate (găsindu
–
se pe servere dedicate
)
.

Avantaje ale creă
rii unui site dinamic:

Site
–
urile dinamice
sunt mult mai flexibile, fiind mult mai u
șor de gestionat.
Configurarea acestora este mult mai complicat
ă deoarece utilizează limbajul de programare
PHP, însă odată configurat acesta este mult mai u
șor de modificat. Folosind un CMS
(content management system) con
ținutul site
–
ul poate fi actualizat, modificat, pot fi create
pagini noi, iar con
ținutul irelevan
t poate fi
șters. Aceste modificări se realizează rapid, nu
necesită cuno
ștințe de programare și pot fi în desfășurare chiar și atunci când un vizitator
este prezent pe pagina respectivă
.

Un

site dinamic

oferă

utilizatorului
o serie de

avantaje
:

–

control

deplin asupra site
–
ului (pagini, texte, imagini, categorii si subcategorii);

–

optimizarea SEO;

–

posibilitate de integrare a unui

magazin online

î
n interiorul site
–
ului;

–

reducerea costurilo
r de între
ț
inere;

–

utilizatorul nu se limitează

doar la crearea unei singure pagini de aterizare (landing page);

–

rapoarte privind traficul pe site
–

c
are este cel mai vizualizat con
ț
inut,

de unde provin
vizitatorii (re
ț
ele de socializare, blog
–
uri etc.)
, ce cuvinte cheie fol
o
sesc pentru a ajunge pe
site, câ
t timp petrec pe fiecare pagina
utilizatorii
și multe alte informaț
ii;

–

posibilitate de integrare a newsletter
–
ului.

BIBLIOGRAFIE

1.

Buraga, S. (2003),
Aplicatii W
eb lacheie
, Editura
Polirom, Ia
ș
i

2.

Dumitrașcu, L. (2006),
Crearea site
–
urilor web
–
Colecția Masterate U.P.G.,
Editura
Universitatății Petrol
–
Gaze, Ploiești.

3.

Dușmănescu, D. (2005),
Baze de date.
Editura Universității, Ploiești.

4.

Easttom, C. (2007),
Advanced JavaScript,
Editura
Wordware Applications Library
,
Texas

5.

P
etrascu
, C. (2
001),
Curs
–

Mediul Internet

6.

Tudorică, B.G. (2016),
Călătorie prin lumea Big D
ata
, Editura PRINTECH,
Bucure
ști

7.

Taylor,
D. (1998),
Crearea pginilor Web cu HTML 4
, Editura Teora, Bucure
ști

8.

Heilmann, C. (200
6),
Beginning JavaS
cript with
DOM Scripting and Ajax
, Editura
Apress, New York.

9.

Marinoiu, C. (2011).
Programare în PHP
. Editura Universității Petrol
–
Gaze din
P
loiești

10.

McCarty, B. (2002).
PHP 4
. Editura Teora, Bucure
ști

11.

O’Brien, P., Olsson, T. (2008),
The U
ltimate CSS Reference
, Editura
SitePoint Pty
Ltd
, USA

12.

Peacock, M. (2010),
PHP 5 e
–
commerce Development
,
Editura Packt Publishing
Ltd
.
,

Birmingham

13.

Perkins, J. B. (1997).
SQL fără profesor în 14 zile
. Editura Teora, Bucure
ști

14.

Aplica
ț
ii Web
,disponibil online
la

www.atelierdeweb.ro/aplicatii
–
web/
, [accesat:
26.06.2017]

15.

Care este diferenta dintre un site static si unul dinamic?
,
disponibil online la
dow
–
media.ro/care
–
este
–
diferenta
–
dintre
–
un
–
site
–
static
–
si
–
unul
–
dinamic/
,

[accesat:
26.06.2017]

16.

Cascading Style Shee
ts
,

disponibil online la
ro.wikipedia.org/wiki/Cascading_Style_Sheets
, [accesat: 26.06.2017]

17.

Ce este PHP?
,disponibil online la
php.net/manual/ro/intro
–
whatis.php
, [accesat:
26.06.2017]

18.

Curs 5

–

Comert electronic
,disponibil online la
www.aut.upt.ro/staff/diercan/data/PIPPS/curs
–
06.pdf
, [accesat: 25
.06.2017]

19.

Di
agrame de activitate
, disponibil online la
http://andrei.clubcisco.ro/cursuri/3ip/curs/5.uml
–
alte%20modele/5.6_UML_Diagrame_de_activitate.doc
,
[accesat 27.06.2017]

20.

Diagrame de obiecte
, disponibil online la
http://users.utcluj.ro/~jim/OOPR/Resources/Laboratory/DiagrameDeObiecte.pdf
,
[accesat 27.06.2017]

21.

Diagr
ame de stari
, disponibil online la
http://andrei.clubcisco.ro/cursuri/3ip/curs/5.uml
–
alte%20modele/5.8_UML_Diagrame_de_stari.doc
.,
[accesat
27.06.2017]

22.

JavaScript
, disponibil online la
ro.wikipedia.org/wiki/JavaScript
, [accesat:
26.06.2017]

23.

Mihai Gabroveanu (2005).Reprezentarea UML a claselor
. Disponibil online la:
http://inf.ucv.ro/~mihaiug/courses/poo/slides/Curs%2005%20
–
%20UML.pdf
,
[accesat: 27.06.2017]

24.

Modelarea cazurilor de utilizare
, disponibil online la
http://inf.ucv.ro/~mihaiug/courses/is/lab/lab3
–
4.pdf
,
[accesat 27.06.2017]

25.

PHP
,disponibil online la
ro.wikipedia.org/wiki/PHP
, [accesat
: 26
.06.2017]

26.

Vlădoiu, M.
(2014).
Curs
Baze
de Date,
http://www.unde.ro/cursuri/BD, [accesat
25.06.2015]

27.

Vlădoiu, M. (2014).
Curs Sisteme de Gestiune a Bazelor de Date
http://www.unde.ro/cursuri/BD, [accesat 25.06.2015]

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Cuprins INTRODUCERE ………………………….. ………………………….. ………………………….. ……………….. 2… [620268] (ID: 620268)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Cuprins INTRODUCERE ………………………….. ………………………….. ………………………….. ……………….. 2… [620268]

Copyright Notice

. Fundamente Teoretice Ale Disciplinei [622144]

Struggles Only A Critical Thinker Will Understand [611198]

STILUL DE COMUNICARE ABORDAT IN POLITICA [629508]

la tema : TRANZ IȚIA DE LA ”BANCA TRADIȚIONALĂ” LA ”BANCA VIRTUALĂ” ȘI IMPLICAȚIILE SALE Efectuată de studentul Frunză Mihail Facultății… [617495]

E. Florian, Dreptul familiei, Ed. „C.H. Beck”, Bucure ști, 2006; E. Florian, Protec ția drepturilor copilului, Ed. „C.H.Beck”, Bucure ști, 2006; P…. [619750]

Să-mi aleg meseria cât mai bine [612303]

Copyright Notice

Similar Posts