Magazinul Virtual. Cumperi Simplu și Ieftin
Universitatea Transilvania din Brașov
Facultatea Matematică și Informatică
Specializarea Informatică
LUCRARE DE LICENȚĂ
Coordonator științific :
Conf. Univ. Dr. Livia Sângeorzan
Absolvent:
Vlădăreanu Cătălin Alexandru
Brasov 2016
Magazin Virtual
Cumperi simplu și ieftin
Cuprins
Capitolul 1 – Scurtă prezentare proiect
Lucrarea de față prezintă realizarea unui magazin virtual pentru facilitarea cumpăraturilor de acasă, in funcție de categorii, subcategorii și cantitați.Am ales acest subiect pentru că exemplifică foarte bine folosirea unor tehnologii Web precum: HTML5, CSS3 , JAVASCRIPT , JQUERY , PHP , MYSQL.
Pe pagina “ Home” a magazinului clientul poate să caute un produs dupa nume in bara de search prezentă in partea de sus a magazinului. Sub bara de navigație este o reclamă formată din mai multe slide-uri care se schimbă singure la câteva secunde sau la click-ul utilizatorului. Mai jos sunt mai multe taburi care prezintă “Ultimile produse adăugate, Cele mai vândute”.In partea de jos avem link-uri cu informații utile.
Administratorul magazinului are control asupra produselor, poate introduce produse noi, edita produsele deja existente sau sa le șteargă. Când o comandă nouă este lansată, administratorul schimbă statusul comenzii din comandă in desfăsurare in pregatită, respectiv efectuată.
Utilizatorul poate să viziteze magazinul, să vadă produsele din fiecare categorie și subcategorie, prețul acestora căt și o scurtă descriere.Dacă se hotărăște să achiziționeze un produs sau mai multe, acesta il pot aduga in coș, poate schimba cantitatea sau adăuga și alte produse.Urmatorul pas este lansarea comenzii, se verifică daca utilzatorul este logat , dacă este logat se finalizează comanda, iar dacă nu acesta este invitat să se logheze sau sa isi facă un cont nou, dupa care poate sa iși continue cumpărăturile.
Capitolul 2 – HTML și HTML5
2.1 Prezentare HTML
HTML a fost creat de Berners-lee în anul 1991, “HTML 2.0” a fost publicat în anul 1995.HTML 4.01 a fost o versiune majoră a HTML-ului și a fost publicată în anul 1999.Chiar dacă versinea 4.01 este folosită foarte des, acum avem acces la HTML5, o versiunea extinsă a HTML 4.01, publicată în anul 2012.
HTML vine de la Hypertext Markup Language, și este cel mai răspândit limbaj folosit pentru a scrie pagini web. Hypertext se referă la modul în care sunt legate împreună paginile Web(HTML documents).HTML este un limbaj de marcaj, care după cum sugerează și numele, înseamnă că folosim HTML pentru a “marca” un document text cu tag-uri care îi comunică browser-ului web cum să structureze informația primită.
Inițial, Html a fost făcut cu intenția de a defini structura unui document(paragrafe, liste), dar acum HTML este folosit pentru a crea pagini web cu ajutorul diferitelor tag-uri aflate în limbajul HTML.
Standardul HTML este WORLD WIDE WEB Consortium, W3C, el face posibilă recunoașterea documentelor de orice browser la fel.Principalele elemente în html sunt <html>,<head>,<title> și <body>.
Un fișier HTML poate să fie creat cu ajutorul oricărui editor de text, dar pentru a avea un control asupra calității codului scrie, este recomandat să folosim un editor specializat, de exemplu nodepad++ , care pune în evidență tag-urile, proprietăți, atribute etc
Structura de bază a unei pagini HTML este următoarea:
a)O pagină începe cu <HTML> și se termină cu </HTML>;
b)Conține un antet (HEAD) și corpul (BODY);
c)Antetul este cuprins între etichetele <HEAD> și </HEAD> ;
d)Corpul este cuprins între etichetele <BODY> și </BODY>;
e)Opțional, antetul poate conține titlul paginii, cuprins între tag-urile <TITLE> </TITLE>
f)Titlul apare pe de titlu ferestrei afișate browser.
g)Corpul poate conține texte / imagini.
h)Numele tag-urilor nu case sensitive, deci fi scrise cu litere mici sau cu litere mari .
2.2 Prezentare HTML5
HTML5(Hyper Text Markup Language) este cea mai nouă versiune de HTML, fiind un limbaj de marcare a textului și nu unul de programare. Acest standard introduce noi facilități cum ar fii rularea audio-video și drag and drop direct din browser fara a mai fii nevoie de alte plugin-uri, Adobe flash , Microsoft Silverlight. Browserele compatibile cu HTML5 sunt ultimile versiuni de: Apple Safari, Google Chrome, Mozilla Firefox, Opera, iar de la Internet Explorer 9.0 sunt disponibile doar o parte din noile facilitati. Este format din elemente speciale numite tag-uri.
2.3 Elemente noi în HTML5
1)HTML5. DOCTYPE
În html5 avem un doctype mai ușor de scris, nu este necesar să se scrie sau versiunea veche mai lungă, acest lucru se face doar pentru vesiunile mai vechi de browsere.
2)HTML5 elementul figure
Pentru versiunea veche că să asociem un paragraf cu o imagine trebuia să scriem
, din păcate nu există o modalitate ușoară de a asocial paragraful cu imaginea, dar html5 vine cu o soluție. Elementul <figure> combinat cu <figcaption> asociază semantic textul cu poza.
3)HTML5 atribute inchise cu ghilimele
Începând cu html5 nu este absolute necesar ca atributele să fie între ghilimele dacă nu se dorește acest lucru.
4)HTML5 text editabil
Ultimile browsere au un nou atribut ce poate să fie aplicat elementelor, numit contenteditabile, acesta permite utilizatorului să modifice textul din element, cât și textul copiilor acestuia.
5)Html5 Introducere email
Dacă la tipul unui formular introducem “email”, browser-ul o să accepte numai string-uri care care corespund unei adrese de email valide.
6)HTML 5 placeholder
Pentru versiunile anterioare trebuia să folosim JavaScript pentru a creea un placehonder în interiorul unui textbox, cu ajutorul atributului placeholder în html5 se remedieaza această problemă.
7)HTML5 atributul required
Formularele acceptă un nou atribut “required”, care specifică, că un anume câmp este necesar să fie completat.
8)HTML5 preincarcarea video
Atributul preload poate să încarce un video cu scopul de a scădea durata de așteptare a vizitatorului, Acesta atribut se poate folosi adăugând preload după video.
.
9)HTML5 expresii regulate
Cu ajutorul atributului pattern, se poate insera o expresie regulată direct în fișierul html, în exemplul de mai jos se acceptă litere mari și mici de la a-z, iar string-ul trebuia să aibă un minim de 4 caractere și un maxim de 10.
10)HTML5 elementul mark
Elementul mark în html5 sublineaza un anumit text, se poate folosi în interiorul unui paragraf pentru a se face remarcată o anumită bucată de text.
11)HTML5 sintaxa
Sintaxa html5 oferă mai multă simplitate și oferă support pentru următoarele:
a)Tag-ul <script>. De obicei se adaugă tipul atributului cu o valoare ” text/javascript”elementelor de tip script cum am exemplificat mai jos:
dar în html 5 se poate scrie fără type.
b)Tag-ul <link> . Acest tag se folosește pentru a lega un fișier css de unul html, iar înainte de html5 se scria:
, dar acum se poate scrie :
c)Elemente HTML5. Elementele din html 5 sunt marcate folosind la început și la sfârșit tag-uri. Tag-urile sunt delimitate folosind <nume tag>, diferența dintre tag-ul de început și cel de la sfârșit este “/” celui din urmă.<p>…</p> , un element poate să fie scris în html5 cu litare mari, mici sau combinate , dar de obicei se scriu cu litere mici.
d)Atribute HTML5. Elementele pot să conțină attribute care sunt folosite pentru a seta diferite proprietăți unui element.Unele attribute sunt definite global și pot fii folosite asupra oricărui element, în timp ce altele sunt definite pentru elemente specifice.Toate atributele au un nume și o valoare și arată ca în exemplul următor:. Atributele pot să fie specificate doar în tag-ul de început, niciodată în cel de sfârșit, pot să fie scrise cu litere mici, sau combinat, de obicei doar cu litere mici.
e)tag-uri HTML5. Odată cu html 5 au fost introduse și tag-uri noi, <header>, <section>, <article>, <aside>, <footer>, <nav>, <dialog>, <figure>.
12)HTML5 implementare audio-video, implementare audio-video, înainte de HTML5 nu a existat posibilitatea de a reda elemente video sau audio direct în html, acum acest lucru este posibil prin folosirea elementului <audio>, respectiv <video> ca în exemplul de mai jos.
13)HTML5 <input>. Tag-ul input are un număr nou de valori , 13 pentru formulare.
Search implemeanteaza un search bar cu un mic “x” care ajută la ștergerea rapidă a textului din searchbar.
Number este folosit pentru a specifica un număr, se scrie un număr minim, unul maxim, se folosesc cele două săgeți pentru a mari sau micșora valoarea numărului.
Range este asemănător cu number, reprezintă o valoare numerică între două valori specificate, diferența este că aici valorea fixă nu este importantă.
Alte exemple sunt “email, url, tel, ranges, date and time”.
HTML5 cnavas. Oferă o modalitate usoară și puternică de a desena diferite elemente folosind JavaScript.În exemplul de mai jos folosesc canvas pentru a desena un pătrat roșu.În afară de Internet Explorer 8, toate browserele noi suportă canvas.
Capitolul 3 – CSS
3.1 Prezentare CSS
CSS vine de la „Cascading Style Sheet”, este folosit pentru a controla stilul unui document web într-un mod ușor , de a simplifica procesul de design pentru a face o pagina de web cât mai prezentabilă.
Cu ajutorul CSS-ului se poate controla culoarea textului, stilul fontului, spațiul dintre paragrafe, cum sunt aranjate coloanele și mărimea lor, când imaginile de background și culorile sunt folosite, crearea unor pagine web responsive, adăugarea a diverse efecte, etc.
CSS este ușor de folosit și înțeles, dar cu toate acestea prezintă un control bun asupra unui document HTML, de obicei CSS este combinat cu limbajul de marcaj HTML, HTML5 sau XHTML.
3.2 Avantaje CSS
a)Cu ajutorul CSS salvăm timp. CSS poate fii scris o singură data, după care să fie refolosit pe diverse pagini html.Se poate defini un stil pentru fiecare element HTML și aplicat pe câte pagini web se dorește.
b)Paginile se încărca mai repede. Dacă folosim CSS . nu este nevoie să scriem atributele tag-urilor HTML de fiecare dată, este suficiemt să scriem o singură regulă și se aplică oriunde apare acel tag, iar în concluzie mai puțin cod înseamnă timp de răspuns mai bun.
c)Codul este ușor de întreținut. Ca să facem o modificare globală, schimbăm doar stilul, și toate elementele în toate paginile web o să fie updatate automat.
d)Mai bun decât HTML. În plus față de HTML. CSS are o gamă mai largă de atribute, din cauza aceasta se pot realiza pagini web care să arate mult mai bine.
e)Compatibil cu diverse device-uri. CSS permite realizarea de pagini web responsive pentru orice fel de device.
3.3 Elemente CSS
Sintaxa CSS
CSS este compus dintr-un set de reguli care sunt interpretate de browser și aplicate elementelor din document, în mare un stil este compus din trei părți:
a)selector – un selector este un tag HTML
b)Proprietate- o proprietate este timpul atributului tag-ului html.
c)valoare – valorile sunt atribuite proprietăților, de exemplu color:red, unde red este valoare, iar color proprietate.
ELEMENTE DE MARCAJ
Elementele de marcaj din CSS sunt considerate un „box model”, iar orice tag din HTML este văzut în acest „box model”. „Box model” este alcătuit din marigine(margin), bordura(border), umplutura(padding) și conținutul.
Cu ajutorul acestor proprietăți se editează spațiul exterior dintre elementele din limbajul de marcaj. Marginea(margin) este spațiul din exteriorul unui element, nu are culoare și este transparent. Bordura(border), poate să fie modificată prin diverse metode, se poate face o linie punctată, una continuă, colorată,etc.Umplutura(padding) este spațiul dintre conținut și bordura, această nu are culoare, nu se poate specifică una, doar preia culoarea fundalului din element.Dacă mai multe elemente se află una lângă alta, marginile acestora se contopesc. Cu ajutorul acestora se implementează interfețele și sunt indisepensabile pentru layout.
SELECTORI
Selectorii reprezintă una din cele mai importante aspecte în CSS pentru că sunt folosiți pentru a “selecta” elemente din pagină web care urmează să fie stilizate, aceștia pot să fie definiți în mai multe feluri.
a)Selectori universali. Selectorul universal este notat cu “*” și este folosit pentru toate elementele de pe pagină.
b)Selectorul “type”. Acesta selectează fiecare instanță a elementului menționat în tot documentul.
c)Selectorul “id”. Este folosit pentru a definii stilul pentru un singur element unic, este folosit cu un “#” în fața valorii id-ului. un “#” în fața valorii id-ului.
d)Selectorul “Clasa”. Poate să fie folosit pentru a selecta orice elemnt HTML care are atributul clasă.Toate elementete care au clasă o să fie formatate în funcție de regula definită.
Culoare text
Culoarea, în CSS, se poate seta prin trei moduri, fiecare cu diferite tipuri de valori:
a)cu valori – rgb(323,423,12);
b)prin denumire – blue
c)hexazecimal – #fsgfd5
Comentarii
Fiecare limbaj de programare permite să adaugi note sau alte lucruri care te pot ajuta pe tine sau alți programatori să înțelegi/înțeleagă mai bine codul, nu chiar orice comandă din css este foarte ușor de înțeles, de unde rezultă că unele secțiuni de cod pot să beneficieze dacă adăugăm comentarii.
Foi de stil
Când un browser citește o foaie de stil, o să formateze documentul HTML după informațiile din foaia respectiva.
Există trei modalități de a insera o foia de stil:
a)Foaie externă, cu ajutorul acesteia se poate modifica un întreg website, modificând un singur fișier.
b)Foaie internă, poate să fie folosită doar în interiorul unei singure pagini.
c)Foaie inline, se poate folosii pentru a schimba stilul unui singur element.
Formatarea background-ului
Proprietătile fundalului în CSS, iar aici avem:
a) background care setează toate proprietătile background într-o singură declarație.
b) background-attachment stabilește dacă imaginea de fundal este fixă sau defilează impreună cu restul paginii.
c) background-color setează culoarea de fundal a unui element.
d) background-image setează imaginea de fundal a unui element.
e) background-position setează poziția de început a unei imagini de fundal.
f) background-repeat stabilește dacă și cum va fi repetată imaginea de fundal.
Formatarea textului
Proprietătile CSS pentru formatarea textului:
a) color setează culoarea textului.
b) direction setează direcția textului.
c) line-height setează distanța dintre linii.
d) letter-spacing măreste sau micsorează spațiul dintre caractere.
e) text-align aliniază un element în cadrul textului.
f) text-decoration adaugă decorațiuni unui text.
g) text-indent indentează prima linie de text dintr-un element.
h) text-shadow adaugă umbră unui text.
i) text-transform controlează literele unui element.
j) vertical-align setează alinierea verticală a unui element.
k) white-space Setează spațiul alb din interiorul unui element.
l) word-spacing măreste sau micsorează spațiul dintre cuvinte.
Fonturi
Proprietătile pentru fonturi în CSS:
a)font setează toate proprietătile fontului într-o singură declarație.
b) font-family specifică familia de fonturi.
c) font-size specifică dimensiunea fontului.
d) font-style specifică stilul fontului.
e) font-variant specifică dacă textul este afișat sau nu cu majuscule mici.
f) font-weight specifică grosimea fontului.
Unități de măsură
CSS suportă următoarele unități fixe de măsură: inchi, centrimetri, pixeli și unități relative de măsură: procentaje și unități em.
a)%-definește o măsurare ca și procentaj relativ la altă valoare
b) cm – măsurare în cm.
c) em – o unitate de măsură relativă pentru înălțimea fontului în spații em.
d) ex – unitate de măsură relativă la fontul x-heignt.
e) in – unitate de măsură în inchi.
f) mm – unitate de măsură în milimetrii.
g) px- unitate de măsură în pixeli.
Link-uri
Un link sau hyperlnik realizează conexiunea dintre o pagină la alta.
Un link are patru stări diferite: link, visited, active și hover:
a) a:link – setează stilul pentru un link normal/nevizitat care nu are mouse-ul deasupra.
b) a:visited – setează stilul pentru un link care a vizitat link-ul, dar nu are mouse-ul deasupra.
c) a:hover – seatează stilul pentru un link când vizitatorul pune mouse-ul deasupra.
d) a:active –setează stilul pentru un link care urmează să fie apăsat.
Liste
Listele sunt de trei feluri: liste neordonate, liste ordonate și liste definite.
Tabele
Când construim un tabel fără stil CSS sau atribut, browserul o să îl afișează fără border, iar folosind CSS putem să îi imbunatatiam aspectul vizual.
Adăugarea unei margini unui tabel:
În exemplul de mai sus fiecare tabel are marginea lui și puțin spațiu între ele, că să evităm acest lucru trebuie să folosim proprietatea border-collapse. Această proprietate acceptă două valori: collapse și separate.
Display și Visibility
Proprietatea Display definește valorea standard de afișare a tuturor elementelor, de exemplu valorea standard a lui <div> este block, iar noi putem să o schimbăm în inline, etc.
Cele mai folosite valori ale proprietății display sunt: block, inline, inline-block și none.
Display Bock-Forțează un element să se afiseaze în block:
Proprietatea Visibility, acestă proprietate se poate folosi pentru a stabili dacă un element este vizibil sau nu, ea poate să primească următoarele valori:
a)visible – valoare standard, totul este vizibil.
b)hidden – totul este ascuns.
c)collapse – această valoare face ca întregul rând sau coloană să fie scos din imagine.
d)inherit – specifică că valorea visibility este moștenită de la elemental părinte.
Poziționarea unui element
Proprieteatea “position” spune cum o să fie poziționat un element în pagină. Sunt câteva metode prin care CSS ne lasă să poziționăm elementele:
a) Poziționare statică – poziționarea statică a unui element în funcție de cum este pagina poziționată normal, static este setat standard, iar această poziționare nu este afectată de elementele top, bottom, left, right.
b) Poziționare relativă- poziționarea relativă a unui element față de poziția normal,, ea este afectată de proprietăți ca și: top , bottom, left, right.
c) Poziționare absolută – poziționarea absolută este poziționarea relativă față de primul element părinte altul decât static. Dacă nu se găsește un așa element, o să fie poziționat pe pagină relativ la marginea “top-left” a mărginii browserului.
d) Poziționare fixă – poziționarea fixă este la fel ca cea absolută, singura diferență este că un element poziționat fix se aliniază după “viewport” și nu este afectat de “scroll”.
Capitolul 4 – JAVASCRIPT
4.1 Prezentare
JavaScript este un limbaj de programare interpretat, ușor și foarte popular care poate fii integrat într-o pagină HTML. Poate să îmbunătățească dinamica și elementele de interacțiune ale paginii lăsând programatorul să facă calcule, să verifice formulare, să scrie jocuri interactive, să adauge efecte special, să modifice grafica, să ajute la securitate, etc.
Avantajele folosirii JavaScript sunt:
a)interacționează mai puțin cu serverul, ceea ce introduce vizitatorul se validează înainte să se trimită la server, iar acest lucru înseamnă mai puțin trafic și o încărcare a serverului mai mică.
b)Interfeță mai bogată – se poate folosii JavaScript pentru a include tot felul de componente grafice pentru a îmbunătății intefata cu vizitatorii site-ului.
c)Interactivitate mărită – se pot realiza interfețe care să reacționeze atunci când vizitatorul ține mouse-ul deasupra unei interfețe.
d) dacă vizitatorul uită să introducă ceva nu trebuia să reîncarce pagina pentru a vedea dacă a uitat ceva.
Dezavantajele folosirii JavaSript:
a)nu poate să lucreze cu mai multe nuclee sau procesoare.
b)nu poate să fie folosit pentru aplicații pentru rețea.
c) JavaScript , partea de client, nu poate să citească sau să scrie fișiere din motive de securitate. În HTML JavaScript-ul trebuie să fie introdus între tag-urile <script> </script>:
4.2 Securitate JavaScript pentru formulare
Aplicația de mai jos ajută la validarea datelor de intrare, script-ul forțează utlizatorul să completeze cu informații casetele formularului ca să poată să treacă la pasul următor.
4.3 Evenimente JavaScript
Există o mulțime de evenimente JavaScript, fiecare putând fi atașate diverselor elemente-etichete HTML, conducând la o interacțiune dinamică a acestora cu utilizatorul. Tabelul de mai jos prezintă doar o scurtă selecție a unor astfel de evenimente, numite și evenimente HTML DOM (Document Object Model), precizându-se acțiunea la care sunt declanșate, respectiv eticheta HTML de care pot fii atașate (multe dintre aceste evenimente putând fi comune mai multor etichete HTML).
4.4 Obiectele în JavaScript
JavaScript este un limbaj de programare orientat pe obiecte, oferă câteva capabilitatati de bază pentru programator:
a)încapsulare- abilitatea de a stoca într-un obiect, date sau metode, împreună.
b)moștenire – capabilitatea unei clase de a se “baza” pe altă sau mai multe, pentru a copia unele dintre proprietăți și metode.
c)agregație – capabilitatea de a stoca un obiect într-un altul.
d)polimorfism – capabilitatea de a scrie o funcție sau o metodă în mai multe moduri diferite.
Obiectele sunt instantiate cu ajutorului operatorului new , iar pentru a crea un obiect new este urmat de o metodă constructor:
Capitolul 5 – BOOTSTRAP
5.1 – Prezentare
Bootstrap este un front- end framework popular și puternic care folosește HTML , CSS și JS pentru a crea mult mai repede și ușor un site responsiv. Include template-uri de design făcute cu html și css pentru componente care interacționează cu utlizatorul, forumulare, butoane, tabele, bară de navigație, dropdown, alerte, taburi, carusele și multe altele .
Bootstrap permite creearea unui site responsive , salvează mult timp, te ajută în creearea unui design consistent pe toate paginile siteului, este ușor de folosit, compatibil cu toate browserele moderne și este open source.
Pentru a putea folosi bootstrap mai întâi trebuie să downloadam fișierele necesare, după care să intregram în fișierele HTML sursă către acestea.
5.2 – Sistemul grid bootstrap
Sistemul grid bootstrap oferă o modalitate ușoară pentru a creea un site responsive, în funcție de device-ul folosit pentru a intra pe site.
Din tabelul de mai sus reiese că putem să adaptăm paginile pentru orice tip de device folosit, în funcție de numărul de pixeli al acestuia. Folosind aceste informații o să facem un design responsive pe coloane pentru fiecare device în parte.
În acest exemplu, pentru device-urile de peste 1200px pe ecran o să apară 6 cutii aliniate una lângă alta pe un singur rând, peste 992px o să apară câte 3 cutii pe 2 rânduri, peste 768 px o să apară 2 cutii pe 3 rânduri, pe sub 768px o să apară fiecare cutie pe rândul ei.In acest mod se poate realize orice site responsive care sa corespunda cerintelor.
5.3 – Elemente Bootstrap
Bara de navigație
Cu ajutorul Boostrap se poate realiza o bară de navigație responsive pentru o pagină web. Acest nav bar, pe dispozitive mici, telefoane/tablete o fie “prabușit”, dar o să se expandeze când utilizatorul apasă pe butonul “meniu”.Pentru dispozitive mai mari decât tableta o să apară ca o bară de naviagtie normală pentru laptop sau desktop.
Pe dispozitive mici meniul o să arate:
Pe dispozitive mari meniul o să arate:
Pentru adăugarea unui drop-down la acest meniu de navigație trebuie să mai adăugăm în lista o clasă “dropdown”.
Iar rezultatul este:
Tabele
Tabele în HTML sunt folosite pentru a prezenta date într-un “tabel” cu rânduri și coloane, iar folosind bootstrap se poate îmbunătății înfățișarea și se devină responsive.
Realizarea unui tabel simplu se face cu cod CSS de bază, linii orizontale pentru delimitare și padding, acest lucru este posibil adăugând clasa “table” din boostrap tabelului respectiv.
Iar rezultatul este afișat mai jos:
Formulare
Bootstrap asigura următoarele tipuri de formulare:
a)formulare așezate vertical;
b)formulare așezate în linie;
c)formulare orizontale;
Un formular vertical simplu, făcut cu ajutorul Boostrap, vine cu CSS realizat global, iar pentru realizarea lui trebuia să: adăugăm un rol “form” formularului părinte, <form role = “form”, adăugăm un div cu clasa .form-group care o să se ocupe de spațiere și mai adăugăm o clasa .form-control elementelor <input>, <textarea> <>.
Formularele o să arate:
Capitolul 6 – Baze De Date
6.1 Prezentare
O bază de date este o colecție structurată de date.Bazele de date pot să fie stocate pe un calculator și examninate folosind un program special, aceste programe se numesc DMS(database management systems). .
Structura unei baze de date trebuie proiectată corect pentru a obține o aplicație performanță, pentru că de ea depinde timpul de acces la baza de date și asigură integritatea datelor.
O bază de date trebuie să fie ușor de întreținut, acest lucru se obține dacă există cât mai puține informații redundante.
O bază trebuie să asigure: abstractizarea datelor, independența datelor, partajarea datelor, securitatea datelor, integritatea datelor și integrarea datelor.
Baze de date relaționale
O bază de date relațională este un set de tabele pentru stocarea datelor, fiecare tabela are un nume unic și poate relaționa cu unu sau mai multe tabele din cadrul bazei de date.
Tabele într-o bază de date sunt o colecție de rânduri și coloane, aceastea mai sunt cunoscute ca entități sau clase.
Rândurile conțin informații despre un singur element, numite și înregistrări.
O coloană reprezintă date specifice reprezentând carcteristici ale intregistrarilor din tabel, aceastea sunt cunoscute ca și câmpuri.
O relație este o legătură între două tabele, acesta face posibilă găsirea datelor într-un tabel care conține înregistrări specifice ale altui tabel.Relațiile pot să fie de mai multe feluri:
a)relații unu – unu: o înregistrare dintr-o tabelă corespunde cu o singură înregistrare din cealaltă tabelă;
b)relații unu – mai multe: unei intregistrari dintr-o tabela îi corespund mai multe intregistrari din cealaltă tabelă;
c)relații mai multe – mai multe: mai multor înregistrări dintr-o tabelă îi corespund mai multe înregistrări din cealaltă tabelă.
Fiecare coloană a tabelelor are definit un tip de data care o să specifice ce fel de date pot să exite în coloane respectivă.De exemplu coloana username poate să fie definită ca varchar(20), lucru care indică că are un string de 20 de carcatere.
Cheia primară. Cele mai multe tabele au o coloană sau un număr de coloane care pot să fie folosite pentru a identifica înregistrările.De exemplul tabelul USER poate să aibă o coloană numită userID care este unică pentru fiecare rând.
Cheia străină. Coloanele care sunt cheie străină sunt coloane care se leagă de coloana cheie primară din alte tabele.
6.2 XAMPP
XAMPP este o distribuție Apache mică și ușoară care conține cele mai comune tehnologii de web development într-un singur pachet. Conținutul sau, mărimea mică, portabilitatea îl fac o unealtă folositoare pentru studenți care dezolva și testează aplicații în PHP și MySQL.XAMPP este disponibil gratis pentru download și conține module Apache , MySQL, FileZilla, Mercury și Tomcat.
6.3 Apache
Serverul Apache este un program care rulează în background sub un sistem de operare, suportă multi-tasking, și oferă servicii altor aplicații care se conectează la el, de exemplu web browserele. Inițial a fost făcut să meargă doar cu sistemele de operare Linux/Unix, dar mai târziu a fost adaptat să lucreze și sub alte sisteme, inclusiv Windows și Mac.
Apache oferă un număr de servicii pentru clienți, oferite prin diferite protocoale, de exemplu: hypertext transper protocol(HTTP), de obicei prin portul 80, simple mail transfer protocol (SMTP), de obicei prin portul 25, domain name service(DNS) prin portul 53 și file transfer protocol(FTP) pentru upload și download de fișiere prin portul 21.
Principalul rol a lui apache este să comunice peste rețele, și pentru asta folosește protocolul TCP/IP care permite dispozitivelor cu adrese IP din aceiași rețea să comunice unul cu altul.
6.4 MySQL
MySQL este cel mai popular sistem de management open source al unei baze de date SQL.MySQl reprezintă o excelentă introducere în tehnologia bazelor de date moderne, de asemenea rămâne o resursă de bază pentru bazele de date cu volum mare.
Capitolul 7 – PHP
7.1 – Prezentare
PHP este un limbaj de programare care permite dezvoltatorilor web să realizare conținut care interacționează cu bazele de date. PHP este folosit pentru a dezvolta aplicații web.
PHP a început ca un mic proiect open source care a evoluat din ce în ce mai mult când dezolvatorii au aflat ce folositor poate să fie.Prima versiune a fost lansată de Rasmus Lerdorf în anul 1994.
PHP este un limbaj server side, interpretorul citește și traduce toate comenzile de pe o pagină , iar rezultatul este trimis înapoi browser-ului sub formă de cod HTML.
Este integrat în multe baze de date populare, MySQL, PostgreSQL, Oracle,Sybase, Infomix, Microsoft SQL Server.
Principalele caracteristici ale php sunt: simplicitate, eficacitate, securitate, flexibilitate, el poate să:
a)lucreze cu fișiere din sistem;
b)să lucreze cu formulate, să primescă date din fișiere;
c)să salveze date într-un fișier;
d)să trimită date prin emal;
e)să întoarcă data la un utilizator;
f)administratorul adaugă, modifică și șterge elemente din data de bază prin php;
g)acceseze variabile cookies și să seteze cookies;
h)adiministratorul poate să restricționeze accesul userilor spre o anumită pagină din site.
7.2 Sintaxa PHP
Primul script – printare text pe ecran
Php este închis între tag-ul <?php ?>, ca să printam un text pe ecran trebuie să folosim comanda print, continuată de un string, variabilă sau text.
„Print” este comanda care ii spune scriptului ce sa faca, fiind urmata de un text.Dupa executarea script-ului pe ecran o sa apara mesajul „Salut”.
Variabile
Asemanator cu alte limbaje de programare, php permite definirea de variabile, in php sunt mai multe tipuri de variabile, dar cea mai comuna este string, aceasta poate sa contina text si numere.Toate string-urile incep cu semnul „$”.Ca sa atribuim un sting unei variabile trebuie sa introducem in script urmatoarele:
Formatarea textului
Modalitatea de a formata textul in cadrul unui script php este acela de a folosii HTML.Acest lucru este necesar deoarece PHP e un limbaj server-side, iar codul este executat inainte ca pagina sa fie trimisa la browser.
Elemente de decizie
If , switch sunt folosite pentru a lua decizii bazate pe diferite conditii.
Dupa executarea codului precedent pe ecran o sa apara textul „weekend placut”.Scriptul verifica valorea variabilei d, daca aceasta este 30 atunci o sa apara pe ecran weekend placut”., daca nu o sa apara „SALUTUUT”
Switch permite evaluarea unui grup de expresii, dupa care cauta valoarea introdusa spre cautare, daca exista un rezultat codul asociat o sa fie executat, daca nu o sa fie executat codul standa
Instructiuni repetitive
Instructiunile repetitive in PHP sunt folosite pentru a executa aceiasi bucata de cod de un numar specificat de ori.Php suporta patru tipuri de repetitie:
for – trece printr-un bloc de cod de un numar specificat de ori
while – trece printr-un bloc de cod atata timp cat conditia specificata este adevarata
do whule – trece printr-un bloc de cod o singura data, dupa care repeta blocul atata timp cat conditia speciala este adevarata
foreach – trece printr-un bloc de code pentru fiecare element din sir.
Instructiunea for:
Codul de mai sus porneste cu variabilele a si b setate initial la 0, dupa care trece prin instructiunea for de patru ori, de fiecare data incrementand a cu 10 si b cu 5, rezultatul final fiind:
GET si POST
Exista doua metode prin care browserul poate sa trimita informatii serverului, metoda GET si metoda POST.
Metoda GET trimite informatii scrise de utilizator catre baza de date.Nu este recomandata folosirea GET pentru trimiterea de parole sau alte informatii importante din motive de securitate, acesta metode este restrictionata la a trimite doar 1024 de caractere, nu pot sa fie folosit sa trimita date binare, de exemplu imagini sau documente word .
Metoda POST
Metoda POST transfera informatii prin intermediul hedarelor HTTP. Informatia este trimisa la fel ca in metoda post si pusa intr-un header numit QUERY_STRING.Metoda POST nu are nici o restrictie pentru dimensiune, poate sa fie folosita pentru trimiterea de cod ASCII sau date binare, are o securitate mai buna fata de metoda GET in functie de protocolul HTTP.
Includere fisiere
Un fisier PHP poate sa fie inclus intr-un altul inainte ca serverul sa il execute.Exista doua functii PHP care pot sa fie folosite pentru includere, functie include() si functia require();
Includerea este un punct puternic al PHP care ajuta la realizarea de functii, headere, footere sau elemente care pot sa fie refolosite.
Functia include() copiaza tot textul dintr-un fisier si il copiaza in fisierul care foloseste functia, daca o sa fie orice problema scriptul o sa genereze o atentionare, dar o sa continue executia.
Functia require() se comporta la fel ca functie include() , singura diferenta este ca require nu genereaza doar o atentionare in caz ca este o problema.
Sesiuni
O varianta alternativa pentru a face datele accesibile pe toate paginile un site este acela de a folosii sesiunile PHP.
O sesiune creaza un fisier intr-un director temporar pe serverul unde sesiune variabilelor inregistrate si valorile lor sunt stocate.Aceste data o sa fie disponibile pe toate paginile site-ului in timpul vizitei.
Sesiune poate sa fie pornita cu ajutorul functiei session_start().Functia verifica prima data daca cumva o alta sesiune este deja pornita, dupa verificare daca este negativa o sa porneasca o sesiune.Variabilele sesiunii sunt stocate intr-un array asociativ numit $_SESSION[].Aceste variabile pot sa fie apelate cat timp dureaza sesiune.
Dupa cinci refresh-uri pe pagina cu rezultatul obtinem:
Distrugerea unei sesiuni se poate realiza cu functia session_destroy().Aceasta functie nu are nevoie de un argument si o singura apelare poate sa distruga toate variabilele sesiunii.Daca se doreste distrugerea unei singure variabile a sesiunii se foloseste functia unse().
Capitolul 8 – Prezentarea aplicatiei
8.1 Scurta prezentare a aplicatiei cu Diagrama Use Case si Diagrama Bazei de date
8.1.1 Use case diagram
O diagramă use case este o diagramă UML folosită frecvent pentru a analiza diferite sisteme.
Diagrama use case ajută: să adunăm informații despre un sistem, să avem o privire de ansamblu asupra sistemului, să indentificam factorii interni și externi care influențează sistemul, să vedem modul în care utilizatorii interacționează cu sistemul.
Elementele utilizate într-un use case sunt următoarele:
a) Actorul – actorul este un utilizator al sistemului, sau alt sistem informatic care inteactioneaza cu sistemul analizat.
b) Use case-use case-urile sunt reprezentate sub formă unei elipse în interiorul căruia este și un nume.
c) Asocierea- asocierea este utilizată pentru a indica legătura dintre un actor și un use case, în sensul că acel actor participă într-un fel în acel use case.
Relația de tip generalizare
Între actori și use case-uri pot exista relații de generalizare atunci când un actor sau un use case poate să fie asimilat unei clase de actori, respectiv de use case-uri.
Relația de tip extensie
Relatiiile de tip extensie se folosesc atunci când se modelează un comportament opțional, care nu condiționează finalitatea use-cașului de bază.
Relația de tip includere
Această relație se folosește atunci când use case-ul inclus nu este o parte esențială a fluxului din use case-ul de bază sau este un comportament care se repetă în mai multe use-case-uri.
8.1.2 Diagrama bazei de date
8.2 Baza de date a aplicatiei
8.2.1 Realizarea bazei de date MYSQL in XAMPP
Baza de date a fost realizata cu MYSQL din XAMPP folosind phpMyAdmin.Ca sa pornim phpMyAdmin intram in orice broswer dorim, iar la adresa scriem http:localhost/phpmyadmin/.
In fereastra care o sa apara apasam pe butonul new, in dreapta scriem numele bazei de date si apasam create.
Dupa ce apasam create phpMyAdmin va realiza o comanda SQL pentru a face o baza de date, aceasta o sa fie trimisa serverului MySQL.
8.2.2 Crearea unui tabel
In primul rand o sa realizam tabela admin, care o sa contine datele de identificare pentru administratorii autorizati ca sa lucreze in baza de date. Crearea unui tabel se face dupa ce selectam baza de data dorita, din tabul strucure, scriem numele tabele si apasam GO.
Tabelul admin o sa aiba 4 campuri, dupa apasarea butonului Go phpMyAdmin o sa ne cere sa introducem toate detaliile campurilor tabelului.
Campurile tabelului admin sunt adminID (int), username (varchar cu valoare maxima de 20 de caractere), password(varchar cu valoare maxima de 20 de caractere) si last_log_date( cu valoare date).
Tipul varchar este folosit pentru siruri de caractere unde lungimea variaza, campul adminID este cheie primara cu auto_increment.
Cheia primara a unui tabel are valori distincte si are rolul de idenfiticator unic.Auto_increment indica modul in care campul adminID o sa fie format, valorea unui nou articol adaugat o sa fie automat adaugata si calculata, prin incrementarea valorii precedente.
Tabelul se realizeaza apasand butonul save din dreapta jos.
Tabelul user o sa aibe 7 campuri cu primarykey userID.
Dupa modele celor 2 tabele realizate mai intainte, mai facem inca 2:
a)produse cu 8 campuri, cheie primara productID unde o sa se stocheze toate informatiile despre produse.
b)tranzactii cu 6 campuri, cheie primara transID, chei straine : userID si productID, unde o sa se stocheze informatiile despre tranzactii.
8.3 Interfata cu utilizatorul
Prin lansarea aplicatiei, apare fereastra principala a paginii Web, pagina Home, de unde utilizatorul poate sa vada catalogul magazinului, sa caute un produs in search bar, sa vada caruselul cu reclame, tab-urile cu diferite informatii, sa intre in cont sau sa faca un cont nou, sa vada cosul de cumparaturi si sa vada informatii importante (cum cumpara, numar de telefon al magazinului, adresa)
8.3.1 Header-ul
In partea de sus se gaseste o bara cu informatii, un logo, un search bar si doua butoane contul tau si cosul tau.
8.3.2 Bara cu informatii
Bara cu informatii are scopul de arata clientului imediat cum intra pe site anumite informatii esentiale, numar de telefon, contact, magazin etc.
Este realizata in HML, CSS si Bootstrap este responsiva, iar pe rezolutii mici unele informatii sunt ascunse cu ajutorul Boostrap, astfel ramanand doar telefonul vizibil.
Varianta device-uri mari:
Varianta device-uri mici
Clasa “hideen-xs” din BootStrap ascunde paragrafele cand rezolutia este mica.
8.3.4 Logo
Logo-ul este realizat in PhotoShop, daca utlizatorul face click pe aceasta este redirectionat catre pagina „home”.
8.3.5 Search Bar
Cu ajutorul la search bar utilizatorul poate sa caute in baza de date a magazinului orice produs dupa nume, dupa apasarea butonului se afiseaza toata rezultatele care corespund cautarii.Este realizat cu HTML,PHP, CSS si Bootstrap.
Trebuie scris cod php
8.3.6 Contul meu
Din butonul contul meu utilizatorii pot sa se logheze pe site sau sa ii faca un cont nou.
Log in ii trimite pe o pagina cu un formular unde trebuie sa completeze datele de intregistrare sau daca nu are cont sa isi faca un unul nou.
Sign up ii redirectioneaza pe o pagina cu un formular unde trebuia sa completeze diferite date care urmeaza sa fie introduse in baza de date.
Datele introduse se duc in tabelul „user” din baza de date.
.
8.3.7 Cosul tau
Butonul Cosul tau redirectioneaza utilizatorul catre cosul de cumparaturi.Aici utilizatorul poate sa vada toate produsele adaugate, sa schimbe cantitatea pe care doreste sa o cumpere la fiecare produs si sa sterga din cos.
Cosul este realizat cu HTML,CSS si PHP.
8.3.8 Trimite comanda
Trebuie scris codul php
Logo-ul, search-ul, contul tau si cosul tau sunt realizate reponsive cu ajutorul bootstrap, sunt create pe un rand fiecare cu 4 coloane, la rezolutii mari aceastea apar pe ecran ca un singur rand, iar la rezolutii mici ele o sa fie afisate pe 3 randuri unu sub alt
8.3.8 Bara de navigatie
Bara de navigatie ajuta userul sa caute in toate produsele magazinului, in categoriile si in subcategoriile acestuia.
In pagina Caini, este un drop-down de unde utilizatorul poate sa aleaga subcategia “Hrana”, “Accesorii”,”Intretinere” sau poate sa vada toate produsele din categoria “Caini”.
Pagina “Pisici” este asemanatoare ca pagina “Caini”, tot un drop-down cu produse care pot sa fie afisate in functie de categorie sau subcategorie.
Restul taburilor din meniul de navigatie “Pesti”, “Pasari”, “Reptile” prezinta aceleasi caracteristici ca cele doua prezentate mai sus.
Bara de navigatie si meniul drop-down au fost realizate cu ajutorul HTML, BootStrap, CSS si PHP, acestea sunt responsive, pe device-uri mai mici se redimensioneaza.
8.3.9 “Caruselul”
Caruselul este o colectie de cateva imagini care au scopul de publicitate pentru magazin. Imaginile se shimba singure la cateva secunde, pot sa fie schimbate inainte sau inapoi de utilizator folosind sagetile sau sa sara la o anumita pagina folosind cerculetele.
Caruselul este responsive si este realizat cu ajutorul HTML, CSS si BootStrap.
8.3.10 Taburile cu informatii
Sub carusel avem 3 butoane unde putem sa aflam diferite informatii.
a)Ultimile produse adaugate pe site
b)Cele mai vandute produse
c)Produse populare in diferite orase
Taburile sunt realizate cu HTML, CSS,PHP si Bootstrap si sunt responsive, pe ecrane de dimensiune mica se aranjeaza una sub alta.
Utilizatorul poate sa selecteze oricare din tab-uri, iar informatia precedenta o sa dispara.
8.3.11 Footer
In partea de jos a paginii “home” avem “footer-ul” unde se afla informatii importante pentru clienti despre magazin, produse, cumparaturi etc.Daca utilizatorul face click pe informatia dorita o sa fie redirectionat spre pagina respectiva.
Footerul este responsive, pe dimensiuni mici informatiile se aliniaza una sub alta.
8.4 Interfata cu administratorul
8.4.1 Autentificarea administratorului
Administratorul site-ului trebuie sa intre pe http://localhost/mOnlineBeforeShitsBoot/storeAdmin/inventory_list.php, de unde o sa fie rugat sa se inregistreze cu datele de administrator:
Dupa logare acestuia o sa ii apara un meniu de unde poate sa aleaga 2 variante:
Sa lucreze pe stoc, sa adauge , sa editeze si sa stearga produse.
Sa schimbe statusul comenzilor.
8.4.2 Adaugare produse
Dupa ce intra in cont administratorul apasa pe “Administrare inventor” , aici o sa ii apara o lista cu toate produsele din magazin, iar sub aceasta o sa fie un formular pentru adaugarea unui produs nou.
Lista este realizata cu un formular si este introdusa in baza de date.
Dupa ce administratorul adauga un produs sau mai multe, deasupra formularului de adaugare se vede lista cu toate produsele din site.
Datele sunt luate din baza de date si afisate pe site cu un table.
8.4.3 Editare produse
Dupa ce administratorul a introdus un produs sau mai multe are posibilitatea sa editeze informatiile din cadrul bazei de date cu ajutorul unui formular care face update.Pentru a face acest lucru administratorul trebuie sa apese pe “editeaza” din lista de produse.
8.4.5 Stergere produs
Administratorul poate sa stearga un produs din magazine daca doreste.Aceste lucru se face din meniul administratorului, la lista de produse, trebuie sa apese pe butonul sterge.
8.4.5 Modifica statusul comenzii
Trebuie sa scriu codul php
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: Magazinul Virtual. Cumperi Simplu și Ieftin (ID: 117595)
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.