Aplicatie de Gestiune cu Servere de Baze de Date Multiple

Cuprins:

INTRODUCERE

Browsere

Hyperlinks

URL

Protocolul HTTP

Protocolul FTP

Pagini web dinamice – avantaje

DNS

LIMBAJ DE MARCARE – HTML

Conținut și aspect într-un document HTML

Elemente HTML

Formulare HTML

Crearea unui formular

LIMBAJE DE PROGRAMARE – PHP ȘI JAVASCRIPT

PHP

Sintaxă

Variabile

Operatori

Structuri de control

Funcții

Sesiuni

JAVASCRIPT

Variabile

Funcții

Lucrul cu obiecte

JavaScript și Html

Lucrul cu evenimente

FORMATAREA PAGINILOR WEB – CSS

Sintaxa

Id-urile CSS. Clasele CSS

Fonturi CSS

Alinierea obiectelor

Stiluri pentru legături

Fundaluri CSS

Padding. Margin

BAZE DE DATE – MYSQL ȘI POSTGRESQL

Structura unei baze de date relaționale

Proiectarea unei baze de date – MySQL

Crearea unei baze de date MySQL și a unui tabel

Ștergerea și modificarea unui tabel MySQL

Accesul la datele dintr-o baza de date, interogarile SQL

Modificarea datelor dintr-o baza de date

Sortarea si gruparea

ARHITECTURA MAGAZINULUI VIRTUAL

Modul administrator

Formular login administrator

Modul client

Structura datelor magazinului virtual

Structura bazelor de date

Fluxul informațional

TEHNICI DE LUCRU UTILIZATE

INTERFȚA CU UTILIZATORUL

PROTECȚIA DATELOR

Protocol criptografic SSL

Elemente de securitate PayPal

Elemente de securitate într-un magazin virtual

TESTAREA APLICAȚIEI

10.1.Uploadul fișierelor pe server

10.2. Testare modul client

10.2.1. Serviciul PayPal

10.3. Testare modul administrator

CONCLUZII ȘI PERSPECTIVE VIITOARE

BIBLIOGRAFIE

Introducere

Societatea contemporană, descrisă printr-un aflux de informție de diferite tipuri și pe diverse canale, necesită strategii și instrumente complexe pentru stocare, procesare și în special interpretare. În acest context se pune problema transformării informației în date și organizarea acestora într-o asemenea manieră încât în orice moment să poată fi extrase cu promptitudine și exactitate, datele favorabile realizării unui scop specific.

Datele sunt preluate din măsuratori și observații, acestea constituind mesajul primit de un receptor sub o anumită formă. Utilizatorii doresc obținerea informației și nu manipularea unor date seci. Informația se obține prin introducerea datelor disponibile într-un anumit context conferindu-le în acest fel o anume semnificație.

În zilele noastre, magazinul virtual este foarte răspândit în mediul online, deoarece reprezintă soluția perfectă în materie de business. Clienții au posibilitatea de a alege dintr-o varietate mare de produse, costurile magazinului sunt mici și plata se poate face prin intermediul cardului bancar sau a firmelor de curierat, respectiv poștă.

Un magazin virtual implică mai multe etape. Înainte de a ajunge în mediul online, trebuie realizată o structură, posibilă prin intermediul limbajelor de programare, marcare și scriptare și baze de date. Limbajele folosite pentru aceasta aplicatie sunt: HTML, PHP, JAVA SCRIPT și CSS. Bazele de date sunt cele mai importante, deoarece magazinul transmite informația către baza de date, aflată pe un server cum ar fi APACHE. Dacă magazinul are două baze de date cum este și in cazul de față, acest lucru va spori performanța. În cazul în care se transmite o informație către server, iar acela nu răspunde sau este ocupat, va răspunde celălalt server, acest lucru constituind un magazin bine optimizat.

Un magazin virtual construit de la zero implică:

Design (CSS);

Script – linii de cod, funcții(HTML, PHP, JAVA SCRIPT);

Implementarea modulelor: administrare, coș de cumpărături, adăugare produse, contact( formular de contact, hartă), formular de logare/înregistrare;

Baze de date(MySQL, POSTGRESQL);

Transferul fișierelor prin protocolul FTP;

Testarea aplicației.

1.1. Browsere

Un browser este un soft care oferă o interfață între utilizator și serverul web de pe internet. Browser-ul contactează serverul și transmite cererea de informație apoi primește informția și o afișează pe calculatorul clientului. Acest lucru este posibil prin instalarea programelor specializate adecvate acestor servicii. Accesul la informație se realizează cu ajutorul browserelor de web. Acesta acționează în numele utilizatorului îndeplinind următoarele sarcini:

Contactează un server web;

Solicită informații;

Afișeză informațiile pe ecran.

Browser-ul este un program care utilizează limbajul de marcare HTML.

1.2. Hyperlinks

O pagină web permite un acces ușor la alte pagini prin hiperlinks (hiperlegaturi). O hiperlegatură permite accesul la o altă pagină de web sau la un alt calculator. O legătură apare de obicei subliniată sau este indicată de transformarea cursorului de la mouse intr-o mâna. Acesta permite o navigare ramificată, stabilirea unui traseu personal, pentru fiecare persoană care navighează pe web.

1.3. URL

Un localizator uniform de resurse(URL) este o secvență de caractere standardizată, folosită pentru denumirea, localizarea și identificarea unor resurse de pe internet, inclusiv documente text, imagini, clipuri video, expuneri de diapozitive, etc. Schema care este folosită este:

<protocol>://<nume_DNS>/<nume_local>

Unde:

Protocol – este protocolul folosit (de cele mai multe ori http);

nume_DNS – este numele domeniului pe care se află resursa;

nume_local – este format din calea și numele resursei de pe discul local.

1.4. Protocolul HTTP

HTTP (Hyper Text Transfer Protocol) este un protocol cerere/răspuns bazat pe serviciile TCP folosit la transferul informației Hypertext/Hypermedia între client și server. Are și rolul de a traduce formatul în care serverul stochează informția în formatul recunoscut de browser ce lanseză o cerere HTTP – transfer nonASCII.

O cerere HTTP conține URL-ul resursei și metoda de transfer – GET sau POST. La inițierea transferului HTTP verifica metainformații stocate in antetele resurselor. Aceste metainformții indică formatul resursei transferate cu diverse nivele de structurare. HTTP ignoră erorile, adică metainformația sau parametrii nerecunoscuți, ceea ce a dus la evoluția controlată a HTTP.

Erorile de HTTP sunt clasificate în 5 clase:

Erori informaționale de tipul 1XX – Ex.: 101 – schimbare protocol:
Server-ul înțelege și are intenția de a de a îndeplini cererea utilizatorului, răspunând prin această eroare că părți ale server-ului sunt în proces de schimbare/mutare. Server-ul va schimba protocolul imediat după ce răspunsul pentru linia 101 va fi terminată. Protocolul ar trebui schimbat doar în momentul în care acest lucru este avantajos și se permite.

Răspuns reușit de tipul 2XX – Ex.: 203 – informație neautorizată:
Informația returnată/revenită nu e definitivă ca fiind din server-ul principal, ci e adunata/receptionata de la un server local.

Redirectări de tipul 3XX – Ex.: 301 – modificat/mutat permanent:
Cererii i-a fost atribuite o sursă nouă și permanentă URI iar cererile următoare ar trebui să folosească una din sursele returnate URI. Dacă acest mesaj/cod este primit ca răspuns al unei cereri tip „Primit/recepționat” sau „Direcționat/condus”, browser-ul nu trebuie să redirectționeze automat cererea, doar dacă nu poate fi confirmată de către utilizator.

Erori ale utilizatorilor de tipul 4XX – Ex.: 404 – negăsit:
Serverul nu a găsit nimic care să corespundă cererii URL. Nu se dau indicații despre condiția temporară sau permanentă.

Erori de server de tipul 5XX – Ex.: 500 – eroare internă de server:
Server-ul a întâmpinat o condiție neașteptată și o previne spre a putea îndeplini cererea.

1.5. Protocolul FTP

FTP(FileTransfer Protocol) este un protocol (set de reguli) utilizat pentru accesul la fișiere aflate pe servere din rețele de calculatoare particulare sau din internet.

Serverele de FTP accepta două tipuri de conexiuni:

Anonimă – se permite un acces restricționat la un director public de pe server, de unde se pot obține diverse fișiere. Conectarea anonimă se realizează prin specificarea numelui de utilizator anonymous și parola;

Normală – necesită identificarea utilizatorului, adică se specifică numele de utilizator și parolă, unde utilizatorul poate accesa propriul director de pe server.

Accesul la fișierele de pe server este permis sau nu, pe baza drepturilor de acces al utilizatorului.

Transferul fișierelor se poate realiza in:

Mod text – transferul de fișiere text(.TXT, .BAT, .HTML, .HTM, .JS, etc);

Mod binar – transferul de fișiere ce conțin date sau programe (imagini, video, muzică, documente Word, Excel, etc).

1.6. Pagini web dinamice – avantaje

Paginile dinamice sunt ceea ce dă viață Web-ului. Paginile statice sunt formate din text, imagini și tag-uri HTML pentru formatare. Dacă o informație se modifică atunci se va modifica și pagina, deoarece paginile statice sunt create și întreținute manual. Aceasta implică încărcarea paginii într-un editor, realizarea modificărilor, reformatarea textului dacă este necesar și apoi salvarea fișierului, ceea ce necesita o perioadă mare de timp pentru a efectua aceste operații, in special dacă numarul paginilor este mare.

Paginile dinamice conțin foarte puțin text, deoarece extrag informațiile necesare din alte aplicații. Paginile dinamice pot comunica cu bazele de date, foi de calcul tabelar, sisteme de gestiune a bazelor de date client-server și multe alte aplicații.

Paginile Web dinamice permit crearea aplicațiilor puternice, având urmatoarele caracteristici:

Interogarea aplicațiilor de baze de date existente pentru obținerea datelor ;

Crearea de interogări dinamice care facilitează obținerea în mod flexibil a datelor;

Execuția procedurilor stocate;

Execuția codului condițional on-the-fly pentru a personaliza răspunsurile în funcție de situațiile specifice;

Sporirea capabilităților formularelor HTML standard prin folosirea unor funcții de validare;

Popularea în mod dinamic a elementelor din formulare;

Personalizarea modului de afișare a informațiilor legate de dată, timp și monedă folosind funcții de formatare;

Ușurarea creării aplicațiilor de introducere a datelor prin wizards;

Generarea automată de e-mail, site-uri comerciale, coșuri de cumpărături, etc.

1.7. DNS

DNS (Domain Name System) se folosește la gestionarea domeniilor în internet. Este un sistem distribuit de păstrare și interogare a unor date arbitrare într-o structură ierarhică.

Caracteristicile sistemului de nume (DNS) sunt:

folosește o structură ierarhizată (figura 1.7.1 )

deleagă autoritatea pentru nume;

baza de date cu numele și adresele IP este distribuită.

Figura 1.7.1 Ierarhia DNS

Capitolul 2. Limbaj de marcare -HTML

HTML este o abreviere de la Hypertext Markup Language și reprezintă structura oricărei pagini de Web. HTML nu este un limbaj de programare. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum și aspectul pe care îl are pagina din punct de vedere grafic. În fond, HTML este modul în care îi comunicam browserului ce elemente dorim să introducem în pagina Web și care este aspectul acestora. HTML nu este un limbaj case-sensitive, adică nu face distincția între literele mici și cele mari(majuscule).

Codul HTML se scrie în editoare de text cum ar fi Notepad din Windows, fiind cel mai accesibil, dar recomand Notepad ++, deoarece este mult mai accesibil și variat.

2.1. Conținut și aspect într-un document HTML

Pentru a realiza documente Web eficiente, cu impact asupra cititorului, și pentru a valorifica pe deplin puterea limbajului HTML, trebuie să țineți seama de o idee fundamentală: HTML este destinat structurării documentele și nu doar formatării în vederea afișării lor. HTML furnizează modalități variate pentru a defini aspectul documentului: specificații legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc.

HTML conține numeroase căi de structurare a conținutului documentului fără a pune problema felului cum vor fi afișate elementele: titluri, liste, paragrafe, imagini, etc.aza de date cu numele și adresele IP este distribuită.

Figura 1.7.1 Ierarhia DNS

Capitolul 2. Limbaj de marcare -HTML

HTML este o abreviere de la Hypertext Markup Language și reprezintă structura oricărei pagini de Web. HTML nu este un limbaj de programare. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum și aspectul pe care îl are pagina din punct de vedere grafic. În fond, HTML este modul în care îi comunicam browserului ce elemente dorim să introducem în pagina Web și care este aspectul acestora. HTML nu este un limbaj case-sensitive, adică nu face distincția între literele mici și cele mari(majuscule).

Codul HTML se scrie în editoare de text cum ar fi Notepad din Windows, fiind cel mai accesibil, dar recomand Notepad ++, deoarece este mult mai accesibil și variat.

2.1. Conținut și aspect într-un document HTML

Pentru a realiza documente Web eficiente, cu impact asupra cititorului, și pentru a valorifica pe deplin puterea limbajului HTML, trebuie să țineți seama de o idee fundamentală: HTML este destinat structurării documentele și nu doar formatării în vederea afișării lor. HTML furnizează modalități variate pentru a defini aspectul documentului: specificații legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc.

HTML conține numeroase căi de structurare a conținutului documentului fără a pune problema felului cum vor fi afișate elementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite în limbajul HTML fără a impune browserului să le afișeze într-un anumit mod. Browserului i se lasă astfel posibilitatea de a afișa respectivele elemente în conformitate cu rolul pe care îl au ele în structura documentului și nu respectând regulile impuse de creatorul documentului HTML.

Pentru ca browserele să nu aibă probleme la afișarea paginilor s-a introdus declarația tipului de document(DOCTYPE – document type definition) care specifică browserului și validatoarelor ce grupe de etichete și atribute folosește acea pagină și cum trebuie ele interpretate. Tipul de document se declară la începutul paginii înainte de tag-ul “head”. Deoarece foarte multă lume nu dă atenție acestei declarații pot apărea (și sigur apar) probleme și/sau diferențe de afișare a paginii între diferite browsere.

2.2. Elemente HTML

–––––Inserare diacritice––––

Tabel 2.2.1. Elemente de baza (tag-uri).

Tabel 2.2.2 Elemente pentru liste

Tabel 2.2.3 Elemente pentru formatarea caracterelor

Tabel 2.2.4 Elemente pentru cadre

Tabel 2.2.5 Elemente pentru tabele

Tabel 2.2.6 Elemente pentru adaugarea imaginilor

Tabel 2.2.7 Elemente pentru formulare

Tabel 2.2.8 Elemente avansate

Tabel 2.2.9 Elemente pentru formatarea textului

2.3. Formulare HTML

Formularul reprezintă unul dintre cele puternice elemente ale unei pagini Web. Prin intermediul formularelor se realizează interactivitatea cu vizitatorul paginii, acestea permițându-vă să obțineți informații despre cei care vizitează paginile dumneavoastră.

Un formular este un ansamblu de zone active, alcătuit din mai multe tipuri de elemente: butoane, casete de selecție, câmpuri de editare, etc., ce permit utilizatorilor să introducă efectiv informații. Aceste informații sunt ulterior transmise serverului pe care este găzduită pagina dumneavoastră, unde vor putea fi prelucrate.

O sesiune cu o pagina Web ce conține un formular cuprinde două etape:

Utilizatorul completează formularul și, prin apăsarea butonului de expediere, trimite serverului datele înscrise în formular.

aplicație dedicată de pe server (un script) analizează informațiile transmise și, în funcție de configurația scriptului, fie stochează datele într-o bază de date, fie le transmite la o adresă de mail indicată de dumneavoastră. Dacă este necesar, serverul poate expedia și un mesaj de răspuns utilizatorului.

Cel mai important lucru pe care trebuie să-l înțelegeți în legătură cu formularele este că aici apar două probleme distincte și care necesită instrumente diferite pentru a le gestiona.

Structura formularele poate varia, de la o simplă casetă de text pentru introducerea unui șir de caractere, până la un ansamblu complex, cu multiple secțiuni și care oferă facilități puternice de transmitere/prelucrare a datelor.

2.3.1 Crearea unui formular

Un formular este definit într-un bloc delimitat de etichetele <FORM> </FORM>. Eticheta </FORM>, de închidere, este obligatorie. În interiorul blocului sunt incluse:

elementele formularului, în care vizitatorul urmează să introducă informații

un buton de expediere (submit), la apăsarea căruia, datele sunt transmise către server

opțional, un buton de anulare (reset, cancel), prin care utilizatorul poate anula datele înscrise în formular

Eticheta <FORM> are două atribute esențiale:

action – comunică browserului unde să trimită datele introduse în formular. În general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primește datele formularului.

method – precizează metoda utilizată de browser pentru expedierea datelor formularului.

Atributul method poate avea două valori:

POST – folosită în cele mai multe cazuri. Indică serverului să furnizeze datele direct scriptului ca date de intrare standard.

GET (valoarea implicită) – datele din formular sunt adăugate la adresa URL precizată de atributul action, între adresa URL și date fiind inserat un "?".

Cea mai facilă cale prin care informațiile introduse într-un formular pot parveni creatorului paginii este folosirea comenzii mailto:

<A href="mailto:[anonimizat]">

De data aceasta nu mai este vorba de crearea unei legături care să lanseze în execuție aplicația de mail a utilizatorului, ci de transmiterea datelor introduse în formular la o adresă de mail specificată de dumneavoastră. Acest lucru se poate realiza precizând ca valoare a atributului action următoarea secvență: "mailto:adresa_mail", ca în exemplul următor:

<FORM action=mailto:[anonimizat] method="post">

Atributul action comunică browserului unde să trimită datele introduse în formular. Folosind comanda mailto: browserului i se indică să trimită datele la adresa de mail specificată în comandă. Dezavantajul este că această comandă nu este executată în acest mod decât de browserele Netscape. Browserele Internet Explorer nu recunosc comanda mailto: prezentă în cadrul formularelor. Acestea o execută la fel cum este ea executată atunci când face parte din eticheta <A> ca valoare a atributului href adică lansează aplicația de mail a utilizatorului. ??????? TREBUIE TESTAT PE FIREFOX SAU CHROME

Pentru a defini elementele care fac parte din formular se utilizează etichetele <INPUT>, <SELECT>, <OPTION> și <TEXTAREA>.

Prin intermediul etichetei <INPUT> se pot introduce în formular câmpuri de editare (casete de text), câmpuri de tip password, butoane de expediere și anulare, butoane radio și casete de validare.

Eticheta <INPUT> are următoarele atribute:

type – prin care se precizează tipul elementului.

name – permite atașarea unui nume fiecărui element al formularului.

value – permite atribuirea unei valori inițiale unui element al formularului.

Fiecare element introdus prin eticheta <INPUT> reprezintă o variabilă. Informația introdusă de utilizator în câmpul elementului respectiv reprezintă valoarea pe care o primește această variabilă. Din acest motiv, toate elementele introduse prin eticheta <INPUT> trebuie să aibă atribuit un nume. Acest lucru este obligatoriu deoarece, în caz contrar, variabila reprezentată de acel element nu va avea un identificator.

Atributul type poate avea următoarele valori:

text – se folosește pentru a introduce un câmp de editare pe o singură linie

password – se folosește pentru a insera un câmp de editare în care caracterele introduse sunt înlocuite cu asteriscuri (*)

radio – folosit pentru a insera un șir de butoane radio (elemente care se folosesc pentru a selecta dintr-o listă de opțiuni una și numai una dintre ele)

checkbox – folosit pentru a introduce un șir de casete de validare (elemente care se folosesc când dintr-o listă de opțiuni se poate alege mai mult de o singură variantă)

submit – se folosește pentru a introduce un buton de expediere

reset – se folosește pentru a introduce un buton de anulare a informațiilor introduse în formular

button – se folosește pentru a introduce în formular un buton obișnuit

hidden – se folosește pentru a introduce în formular un câmp ascuns

Pentru elementele de tip casetă de text și password sunt utile și atributele:

maxlength – stabilește numărul maxim de caractere care poate fi introdus în câmpul de editare

size – stabilește lățimea acestui câmp.

Fiecare element de tip buton radio are același nume și anume "opinie", deoarece nu se poate selecta decât un singur element, astfel încât orice ambiguitate este exclusă. Fiecare buton radio trebuie să aibă o valoare. Din acest motiv pentru fiecare buton atributul value a fost setat la o altă valoare.

O casetă de validare are două stări: marcată sau nemarcată (on sau off). Ca și la butoanele radio, atributul name are în exemplul considerat o singură valoare, iar atributul value are, pentru fiecare casetă, valori distincte. Serverului îi sunt transmise numai acele valori care au fost marcate în casetele de validare corespunzătoare

În cadrul unui formular se pot introduce și butoane obișnuite (altele decât butoanele Submit și Reset). Rolul acestora este de a iniția anumite acțiuni în momentul când utilizatorul face click cu mouse-ul pe ele. Limbajul HTML nu oferă instrumentele necesare pentru a specifica ce anume se întâmplă când butonul este apăsat. Pentru aceasta este necesar să includeți în documentul HTML scripturi JavaScript care să trateze aceste evenimente. Ca și butoanele Submit și Reset, butoanele obișnuite sunt incluse în formular cu ajutorul etichetei <INPUT> având atributul type setat la valoarea button:

<INPUT type="button" name="buton" value="text">.

Butoanele pot fi folosite pentru a valida informațiile introduse în formular, pentru a deschide documente și a iniția diverse alte acțiuni din partea browserului.

Câmpurile ascunse sunt elemente care fac parte dintr-un formular, dar nu sunt vizibile în cadrul paginii. Prin intermediul acestora se pot include în formular informații care nu pot fi alterate de browser sau de utilizator. Introducerea unui astfel de câmp în formular se face prin eticheta

<INPUT type="hidden">.

Ca și în cazul celorlalte elemente ale formularului este necesară prezența atributelor name și value, ca în exemplul următor:

<INPUT type="hidden" name="ascuns" value="modifica">

Câmpurile ascunse pot servi la o gestionare mai bună a datelor transmise la server. De exemplu, să presupunem că avem un formular care cere utilizatorului câteva informații inițiale: numele și adresa. Pe baza acestora, aplicația de pe server inițiază afișarea unui nou formular care solicită introducerea unor informații mai detaliate. Deoarece este plictisitor pentru vizitator să reia introducerea informațiilor inițiale, scriptul poate fi configurat să depună primele informații în câmpurile ascunse ale celui de-al doilea formular. În această situație este utilă folosirea câmpurilor ascunse deoarece serverul procesează un singur formular la un moment dat și nu are cum să știe că cel de-al doilea formular a fost completat de aceeași persoană.

Cu ajutorul etichetei <SELECT> </SELECT> se poate introduce într-un formular un meniu derulant. Crearea unui meniu pentru vizitatorii paginii îi ajută la selectarea unor opțiuni dintr-o listă predefinită. Fiecare opțiune care face parte din blocul <SELECT> se introduce prin eticheta <OPTION>.

Cu ajutorul etichetei <TEXTAREA> </TEXTAREA> se poate insera în pagină o casetă de text multi-linie care permite vizitatorului să introducă un text mai lung, care se poate întinde pe mai multe linii. Această etichetă se folosește atunci când dorim să cerem vizitatorului o opinie despre un anumit subiect, care necesită introducerea unui text mai lung decât o singură linie (acest element se mai numește și casetă de comentarii). Atributele rows și cols stabilesc numărul de linii, respectiv de coloane rezervate pentru introducerea textului.

Capitolul 3. Limbaje de programare: PHP și JAVASCRIPT

3.1. PHP

PHP (Hypertext Preprocessor) este un limbaj scriptual server-side compatibil cu HTML. Scopul limbajului este de a genera pagini dinamice și codul se execută pe server. La nivel de bază PHP poate colecta date din formulare, poate trimite sau primi cookies, dar cel mai important lucru îl constituie suportul pentru baze de date de dimensiuni mari.

3.1.1. Sintaxă

Reguli de sintaxă:

Codul php este delimitat folosind <?phpsau<script language=”php”?>pentru început și ?> sau </script>pentru sfârșit.

Închiderea unui rând se face obligatoriu cu caracterul “;” ;

Numele funcțiilor nu sunt Case Sensitive;

Numele variabilelor sunt Case Sensitive;

Adăugarea unui comentariu se face cu caracterele “//”, “#” sau “/*…*/”.

3.1.2. Variabile PHP

diacritice

Variabilele sunt elemente ce au o anumita valoare la un moment dat. Valoare unei variabile se poate schimba de-a lungul executiei unui script. Lucrul cu variabile in PHP este foarte usor. Nu trebuie specificat un tip pentru ele (de genul "variabila text", "variabila numerica") ci acesta este determinat in mod automat. Variabilele sunt diferentiate de celelalte elemente ale limbajului prin caracterul $. Astfel, o variabila are forma $nume. Numele variabilei poate fi orice identificator valid (un text ce contine doar litere, cifre si underscore, fara spatii sau alte caractere; un identificator nu poate incepe cu o cifra).

În PHP există 8 tipuri de variabile primitive:

4 tipuri scalare: întregi, numere cu virgulă flotuantă, șiruri și booleene;

2 tipuri compuse: matrice și obiecte;

2 tipuri speciale: resurse si NULL.

Întreg (integer) este un simplu număr întreg exprimat în sistem zecimal, hexazecimal sau octal, opțional putând purta și semn (+ sau -).
În sistem octal numărul trebuie precedat de 0 iar pentru hexazecimal precedat de 0x.

Numărul cu virgula flotantă (float) sau dublă precizie este un număr real care poate fi folosit cu următoarea sintaxă:

$a=3.14; //număr zecimal
$a=-2.59; //număr zecimal negativ
$a=1.3e2; //130
$a=6E+3; //6000

Șirul (string) este o variabilă care conține o combinație de numere, litere, simboluri și spații delimitate între două ghilimele simple sau duble. Șirurile pot conține și nume de variabile.

Variabila booleană exprimă valoarea de adevăr: TRUE sau FALSE. Orice valoare diferită de zero sau șir care nu este gol (conține cel puțin un caracter) sunt considerate ca TRUE.

Matricei (array) i se pot atribui mai multe valori comparativ cu numerele sau șirurile care pot conține doar o singură valoare. Matricele folosesc chei sau indexi pentru a identifica valorile stocate.
O matrice se crează folosind funcția array().

Variabile statice
O altă caracteristică importantă a scopului variabilei este variabila statică care există doar in scopul funcției locale dar își pierde valoarea când execuția scriptului încetează.

Variabile variabile
Câteodată este util să avem nume variabil pentru variabilă.

3.1.3. Operatori PHP

Operatorii aritmetici sunt: adunare, scadere, inmultire si impartire.

Operatorii de atribuire sunt:

Principalul operator de atribuire este = si inseamna asocierea operatorului din stanga cu valoarea expresiei din dreapta (a nu se confunda cu egalitatea). Valoarea unei expresii de atribuire este valoarea atribuita, adica valoarea lui $a=5 este 5.

Operatorii de comparatie sunt:

Operatorii logici sunt:

Verificarea functionarii operatorilor de comparatie si logici se poate face folosind structurile de control care vor fi prezentate in Capitolul 4.

Operatori multipli
Intr-o constructie PHP pot fi pot fi folositi impreuna mai multi operatori.

Incrementarea si decrementarea unui numar
Marirea unui numar cu o unitate se numeste incrementare, iar scaderea cu o unitate se numeste decrementare.

Incrementarea se poate realiza adunand o unitate la acel numar (sau variabila) sau putem folosi varianta prescurtata, si similar pentru decrementare.

Numere aleatoare
rand() este functia din PHP care genereaza automat numere aleatoare. Poate primi parametri limita minima si maxima a numerelor generate.

Functia de rotunjire
round() este functia de rotunjire si poate primi ca parametru numarul de cifre zecimale dupa rotunjire.

3.1.4. Structuri de control

Structurile de control sunt structurile dintr-un limbaj care iti permit sa controlezi fluxul executiei intr-un program sau script.

Instructiuni if else elseif

Sintaxa: if – then – else. If testeaza o conditie si daca este adevarat atunci se merge pe ramura then. Daca nu, se merge pe ramura else.

Instructiunea Switch

Switch functioneaza asemanator cu if, dar permite conditiilor sa aiba mai mult de 2 valori. La if conditia poate fi adevarata sau falsa, in switch conditia poate lua orice numar de valori diferite (atata timp cat este evaluata drept integer, string sau double).
break: asigura neciclicitatea

default: situatie prestabilita in cazul in care nici un caz nu se potriveste variabilei

Bucle while

Buclele ii spun limbajului PHP sa execute in mod repetat o instructiune sau un bloc. O bucla while executa blocul in mod repetat atata timp cat conditia este adevarata. De obicei se foloseste bucla while atunci cand nu se stie cu exactitate cate iteratii sunt necesare.

Bucle for si foreach

Instructiunea repetitiva for se foloseste atunci cand se stie cu exactitate cate iteratii se vor efectua. Are nevoie de un contor care se initializeaza, se evalueaza conditia, iar dupa fiecare iteratie, contorul creste ( sau scade). Foreach este o bucla care se foloseste cu tablouri.

Bucle do while

Are un comportament putin diferit de bucla while, adica testarea se face la sfarsit. Aceasta inseamna ca instructiunea sau blocul din bucla se executa cel putin o data.

Iesirea dintr-o structura de control sau dintr-un script se face cu ajutorul a 3 posibilitati:
break – executia scriptului va continua de la prima linie din script care umreaza dupa bucla
continue – face saltul la urmatoarea iteratie a buclei
exit – daca vrei oprirea executiei intregului script.

3.1.5 Funcții PHP

Functiile sunt descrise prin intermediul unui prototip de functie, adica aceeasi metoda folosita în manualul PHP pe suport electronic. Prototipurile functiilor sunt oarecum mai complexe decat modelele sintactice folosite în rest, dar prototipurile functiilor furnizeaza mai multe informatii decat sabloanele sintactice simple.

Funcții pentru lucrul cu array:

Functia array_keys returneaza cheile unui array. Sintaxa functiei este urmatoarea array_keys( array $input [, mixed $search_value [, bool $strict ]] ). Parametrii $search_value si $strict sunt optionali, daca $search_value este specificat atunci rezultatul functiei va fi lista de chei pentru elementele care au valoarea specificata in $search_value.

Functia array_push iti adauga un element sau mai multe elemente la sfarsitul unui array. Sintaxa este urmatoarea : array_push ( array &$array , mixed $var [, mixed $… ] )

Functia array_slice returneaza o sectiune a array-ului care este specificata prin offset si lenght. Sintaxa este urmatoarea : array_slice ( array $array , int $inceput [, int $lungime [, bool $pastreaza_cheile]] ). Parametrii $lungime si $pastreaza_cheile sunt optionali.

Functia sort returneaza array-ul sortat dupa valoarea elementelor. Sintaxa este urmatoarea : sort ( array &$array [, int $sort_flags ]). Parametrul $sort_flags este optional si el poate avea valoarea : SORT_REGULAR – ordoneaza fara sa schimbe tipul de date, SORT_NUMERIC – ordoneaza comparand elementele ca fiind de tip numeric, SORT_STRING – ordoneaza comparand elementele ca siruri de caractere, SORT_LOCALE_STRING – ordoneaza comparand elementele ca siruri de caractere in functie de setarile locale.

Funcții pentru data si timp:

Functia date iti returneaza data curenta sau o data pe care o psecifici intr-un anumit format. Sintaxa functiei este : date ( string $format [, int $timestamp ] ).

Functia time iti returneaza numarul de secunde care au trecut de la inceputul Epocii UNIX (adica din data de 1 ianuarie 1970). Sintaxa functiei este : time() fara nici un parametru.

Functia mktime iti returneaza timestamp-ul (adica data unix = numarul de secunde …) pentru o data. Sintaxa functiei este: mktime ( [ int $hour [, int $minute [, int $second [, int $month [, int $day [, int $year [, int $is_dst ]]]]]]] ). Toti parametrii sunt optionali (daca nu pui nici un parametru default iti da time).

3.1.6 Sesiuni PHP

Sesiunea reprezinta o modalitate prin care PHP retine informatii de la o pagina la alta.
Odata cu initializarea unei sesiuni, utilizatorul poate pastra anumite variabile chiar daca in continuare viziteaza si alte pagini ale site-ului. In principiu informatia se pastreaza pana la inchiderea browser-ului, sau pana cand utilizatorul distruge in mod intentionat sesiunea curenta.

Lucrurile se desfasoara ca in felul urmator: in momentul cand un user s-a logat la site, PHP atribuie acestuia un identificator unic de sesiune : SID. Acest SID este inglobat intr-un coockie cu numele PHPSESSID si trimis apoi catre browserul utilizatorului. Daca browserul nu suporta cookie-uri sau acestea sunt dezactivate, atunci acest SID este adaugat la adresa URL. In acelasi timp se creeaza pe server un fisier cu numele SID. In continuare daca utilizatorul doreste sa stocheze anumite informatii, acestea vor fi practic scrise in acest fisier SID de pe server.

Sesiunile au urmatoarele avantaje:

– Pot fi folosite chiar daca browserul utilizatorului nu suporta cookie-uri sau daca acestea sunt dezactivate.

– Permit stocarea unui volum mare de informatii, spre deosebire de cookie-uri care sunt limitate in aceasta privinta.

– Sunt mai sigure in raport cu cookie-urile deoarece informatiile nu sunt transmise in mod repetat intre client si server.

Initializarea unei sesiuni se face cu functia session_start().

Aceasta trebuie sa fie printre primele linii de cod dintr-un script PHP, deoarece apelul acestei functii trebuie facut inainte de trimiterii catre browser-ul Web a vreunui cod HTML sau chiar a unui spațiu vid.

Daca folosim stocarea iesirii in buffer, instructiunea session_start() nu trebuie inserata neaparat la inceputul codului.

Instructiunea session_start() nu este necesară daca in fisierul de configurare "php.ini", variabila "session.auto_start" are valoarea TRUE.

3.2. JAVASCRIPT

JavaScript a fost dezvoltat prima data de catre firma Netscape, cu numele de Live Script, un limbaj de script care extindea capacitatile HTML, ofera o alternativa partiala la utilizarea unui numar mare de scripturi CGI pentru prelucrarea informatiilor din formulare si care adauga dinamism in paginile web.

Java Script a aparut din nevoia ca logica si inteligenta sa fie si pe partea de client , nu doar pe partea de server. Daca toata logica este pe partea de server, intreaga prelucrare este facuta la server, chiar si pentru lucruri simple, asa cum este validarea datelor. Astfel, Java Script il inzestreaza pe client si face ca relatia sa fie un adevarat sistem client-server.

Un pas important spre interactivizare a fost realizat de JavaScript, care permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web, mai exact în cadrul browser-ului utilizatorului, usurand astfel si traficul dintre server si client. De exemplu, într-o pagina pentru colectarea de date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea introducerii si apoi pentru a trimite serverului doar date corecte spre procesare.

JavaScript contine o lista destul de ampla de functii si comenzi menite sa ajute la operatii matematice, manipulari de siruri, sunete, imagini, obiecte si ferestre ale browser-ului, link-urile URL si verificari de introduceri ale datelor în formulare. Codul necesar acestor actiuni poate fi inserat în pagina web si executat pe calculatorul vizitatorului.

In general se considera ca exista zece aspecte fundamentale ale limbajului JavaScript pe care orice programator in acest limbaj ar trebui sa le cunoasca :

JavaScript poate fi intrudus in HTML – De obicei codul JavaScript este gazduit in documentele HTML si executat in interiorul lor. Majoritatea obiectelor JavaScript au etichete HTML pe care le reprezinta, astfel incat programul este inclus pe partea de client a limbajului. JavaScript foloseste HTML pentru a intra in cadrul de lucru al aplicatiilor pentru web.

JavaScript este dependent de mediu – JavaScript este un limbaj de scriptare; software-ul care ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc.) Este important sa luam in considerare aceasta dependenta de browser atunci cand utilizam aplicatiiJavaScript.

JavaScript este un limbaj in totalitate interpretat – codul scriptului va fi interpretat de browser inainte de a fi executat. JavaScript nu necesita compilari sau preprocesari, ci ramane parte integranta a documentului HTML. Dezavantajul acestui limbaj este ca rularea dureaza ceva mai mult deoarece comenzile JavaScript vor fi citite de navigatorul Web si procesate atunci când user-ul apeleaza la acele functii ( prin completare de formulare, apasare de butoane, etc). Avantajul principal este faptul ca putem mult mai usor sa actualizam codul sursa.

JavaScript este un limbaj flexibil – in aceasta privinta limbajul difera radical de C++ sau Java. In JavaScript putem declara o variabila de un anumit tip, sau putem lucra cu o variabila desi nu-i cunoastem tipul specificat inainte de rulare .

JavaScript este bazat pe obiecte – JavaScript nu este un limbaj de programare orientat obiect, ca Java, ci mai corect, este "bazat pe obiecte"; modelul de obiect JavaScript este bazat pe instanta si nu pe mostenire.

JavaScript este condus de evenimente – mare parte a codului JavaScript raspunde la evenimente generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele, sunt imbunatatite pentru a accepta handlere de evenimente.

JavaScript nu este Java – Cele doua limbaje au fost create de companii diferite, motivul denumirii asemanatoare este legat doar de marketing.

JavaScript este multifunctional – limbajul poate fi folosit intr-o multitudine de contexte pentru a rezolva diferite probleme: grafice, matematice, si altele.

JavaScript evolueaza – limbajul evolueaza, fapt pozitiv care insa poate genera si probleme, programatorii trebuind sa verifice permanent ce versiune sa foloseasca pentru ca aplicatiile sa poata fi disponibile unui numar cat mai mare de utilizatori de browsere diferite.

JavaScript acopera contexte diverse – programarea cu acest limbaj este indreptata mai ales catre partea de client, dar putem folosi JavaScript si pentru partea de Server. JavaScript este limbajul nativ pentru unele instrumente de dezvoltare web, ca Borland IntraBuilder sau Macromedia Dreamweaver.

Un script JavaScript este un program inclus într-o pagină HTML. Deoarece este încadrat de tagul <script>, textul scriptului nu apare pe ecran, dar este rulat și interpretat de către browser. Tagul <script> este prezent cel mai frecvent în secțiunea <head> a paginii HTML, deși se pot pune și in secțiunea <body>. De obicei, scripturile care urmează să afișeze mesaje pe ecran sunt scrise in <body>.

JavaScript ne permite să creăm o interfață activă cu utilizatorul, să dea o impresie vizuală plăcută în timp ce navgăm prin paginile site-ului. Putem verifica validitatea informațiilor introduse într-un formular înainte ca datele să fie trimise către server. Putem face calcule matematice, crea pagini HTML dinamice, personalizate în funcție de opțiunile utilizatorului sau al browserului. JavaScript controlează browserul, și prin intermediul scripturilor putem deschide ferestre noi, putem afișa mesaje de avertizare si putem pune mesaje in bara de stare a ferestrei browserului. Putem genera ceasuri, calendare, și documente cu timpul înscris. Putem chiar verifica prezența plug-in-urilor în browser, și putem redirecta utilizatorul spre o pagină diferită în cazul în care browserul nu are un anumit plug-in.

JavaScript-ului i-a fost impus o serie de limitări, majoritatea din rațiuni de securitate:

Nu permite citirea sau scrierea de fișiere pe calculatorul utilizatorului. Singura excepție este permisiunea de a scrie în directorul de cookie-uri al browserului, dar și aici sunt anumite limite.

Nu permite citirea/scrierea de fișiere pe server. Alternativa este să rulați pe server un program care să preia datele trimise de script și să le scrie pe server (un CGI, scris într-un limbaj precum Perl sau PHP, sau un program Java.

Un script JavaScript nu poate închide o fereastră de browser care nu a fost deschisă de el. Astfel se evită situația când intrați pe un site și vi se închid celelalte ferestre active care conțin alte site-uri…

Nu poate citi informații dintr-un browser care conține o pagină web de pe un alt server, ca să nu puteți afla pe ce site-uri navigeaza utilizatorul.

3.2.1. Variabile JavaScript

Spre deosebire de alte limbaje de programare care impun declararea prealabilă a variabilelor, cu specificarea tipului de date pe care acestea le conțin (întregi, reale, caracter etc.) JavaScript procedează puțin altfel: o variabilă este creată prin simpla afectare (atribuire) a unei valori, din acel moment ea devenind disponibilă.

Tipuri de variabile

În limbajul JavaScript nu trebuie specificat tipul variabilelor. Atunci când este creată o variabilă, valoarea atribuită determină tipul variabilei

Numele variabilelor

Fiecare variabilă are un nume. Regulile după care se formează numele variabilelor sunt următoarele:

numele variabilelor pot conține toate literele alfabetului (majuscule sau minuscule), cifre (0 la 9) și caracterul de subliniere ( _ );

numele variabilelor nu trebuie să conțină spații și semne de punctuație;

numele variabilelor sunt sensibile la majuscule și minuscule;

primul caracter al numelui unei variabile trebuie să fie o literă sau un caracter de subliniere;

nu este o limită teoretică pentru numărul de caractere al numelui unei variabile dar trebuie tastat corect de două ori numele unei variabile pentru a putea fi utilizată.

Variabile locale și globale

În JavaScript, cuvântul cheie var poate servi la declararea unei variabile. Totuși, în foarte multe cazuri, poate fi omis. Variabila va fi în mod automat declarată în momentul în care i se atribuie o valoare. Pentru a ști în care situație o variabilă trebuie să fie declarată trebuie înțeles conceptul de portabilitate.

Portabilitatea unei variabile (sau funcții) indică dacă variabila (sau funcția) definite într-o zonă a programului sunt accesibile dintr-o altă zonă a programului.

Există două tipuri de variabile:

variabile globale – sunt definite în exteriorul oricărei funcții JavaScript (funcțiile sunt întotdeauna globale);

variabile locale – sunt definite în interiorul unei funcții. A se utiliza cuvântul cheie var pentru a evita confuzia între o variabilă locală și o variabilă globală cu același nume.

Conversia tipurilor de date

Ori de câte ori este posibil JavaScript convertește în mod automat tipul de date întâlnit. Pentru conversia tipurilor de date, JavaScript propune următoarele două funcții:

parseInt() – convertește un șir de caractere într-un număr întreg;

parseFloat() – convertește un șir de caractere într-un număr în virgulă mobilă.

3.2.1. Funcții JavaScript

Funcțiile sunt blocuri de instrucțiuni care realizează un anumit task. Înainte de a fi apelate (folosite) funcțiile trebuie definite. Locul prielnic pentru acest lucru este, în general, în partea de <head> a documentului html pentru a ne asigura că toate funcțiile au fost parsate(analizate) înainte de a fi invocate de evenimente utilizator. Definirea unei funcții respectă sintaxa:

function nume_functie(parameters, arguments)

{
instrucțiuni
}

unde parameters reprezintă parametrii trimiși funcției, iar arguments sunt argumentele care pot fi trimise funcției (numărul acestora e variabil, poate să difere de la un apel la altul). În interiorul funcției aceste argumente pot fi referite prin vectorul arguments[i] sau
nume_funcție.arguments[i], unde i merge de la 0 și pană la arguments.length. Parametrii sunt trimiși funcției prin valoare, deci modificari ale lor înnăuntru funcției nu sunt vizibile in afară, exceptând cazul când parametrul este obiect când modificările din interiorul funcției sunt vizibile și în exteriorul ei. În corpul funcției poate să apară instrucțiunea return daca funcția trebuie să intoarcă o valoare. Exemple de funcții:

function power(x,n) {

var rez;

rez=1;

for(i=1; i<=n; i++)

rez=rez*x;

return rez;

}

function myFunc(carObj) {
carObj.type="Toyota"
}

…
mycar = {type:"Honda", model:"Accord", year:1995}
x=mycar.type;

myFunc(mycar);

y=mycar.type; //modificările efectuate în myFunc sunt vizibile și în apelant

…

Există în JavaScript o serie de funcții predefinite:

eval(expr): evaluează o expresie dată ca și parametru (string); dacă expresia este instrucțiune, o execută

isFinite(number): determină dacă argumentul este un număr finit; dacă number=NaN returnează false, altfel true

isNaN(testValue): determină dacă testValue este NaN

parseFloat(str): transformă stringul str în valoare float și o returnează

parseInt(str [, radix]) : transformă str într-o valoare de tip întreg și o returnează; radix este baza de numerație

Number(obj) : convertește obj la number

String(obj) : convertește obj la string

escape/unescape(str) : folosite pentru codificare/decodificare stringuri.

3.2.3 Lucrul cu obiecte JavaScript

Obiectele sunt structuri care înglobează atât date (atribute), cât și cod (metode). JavaScript are o seamă de obiecte predefinite, dar oferă și posibilitatea de a creea altele noi.

Crearea obiectelor

Creearea unui obiect nou JavaScript se poate face în două moduri:

folosind un object initializer :

objectName = {property1:value1, property2:value2,…, propertyN:valueN}

unde objectName este numele obiectului nou creeat, iar property1,…,propertyN sunt numele proprietăților (atributelor), iar value1,…, valueN sunt valorile proprietăților respective. ObjectName și operatorul de atribuire sunt opționale. Dacă nu vreau să refer acest obiect nicăieri în program, atunci nu e nevoie să-l atribui la o variabilă. Exemplu de obiect:

myHonda = {color:"red", wheels:4, engine:{cylinders:4,size:2.2}}

(proprietatea engine este la rândul ei un obiect)

folosind o funcție constructor : această metodă era folosită in versiunea 1.1 și anterioarele. Pentru a creea un obiect nou tebuie să parcurgem doi pași:

să definim un tip de obiect scriind o funcție constructor;

să creeăm o instanță a obiectului cu operatorul new.

Exemplu:

function car(t, m, y) {
type = t
model = m
year = y

this.displayCar=displayCar
}

//am definit tipul car cu proprietățile type, model, year și metoda displayCar

function displayCar() {

document.write(“<B>”+this.type+” “+this.model+” “+this.y+</B>”);

}

//creeăm o instanță a tipului nou definit

mycar = new car("Eagle", "Talon TSi", 1993)

Ștergerea obiectelor

Ștergerea unui obiect se face cu instrucțiunea delete numeObj.

This

JavaScript, la fel ca și Java are un cuvânt cheie special, this, care poate fi folosit în interiorul unei metode pentru a referi obiectul curent. Un exemplu de folosire a cuvântului rezervat this este validarea informației dintr-un textbox:

<INPUT TYPE="text" NAME="age" SIZE=3 onChange="validate(this, 18, 99)">

unde validate este o funcție care are trei parametrii dintre care primul este un obiect de tip textbox.

Accesul la proprietăți

Există două modalități prin care pot să accesez proprietățile unui obiect: fie prin numele proprietății (obj.property), fie printr-un index (obj[index_property]). Fiecărei proprietăți a unui obiect i se atașază un index la creearea obiectului; se pleacă de la indexul zero și se atribuie fiecărei proprietăți/câmp (in ordinea în care sunt definite) un index unic. Daca proprietatea pe care o doresc este a i-a proprietate definită, atunci eu pot sa-i accesez valoarea prin construcția: obj[i].

Obiecte predefinite

Există în JavaScript următoarele obiecte predefinite (pe lânga cele care țin de browser) : Array, Boolean, Function, Date, Math, Number, RegExp, String, fiecare având propriile metode.

JavaScript – “prototype-based language”

JavaScript nu este un limbaj “class-based” la fel ca C++ și Java ci este un limbaj “prototype-based”, adică nu face distincția între clasă și instanță a unei clase, el are doar conceptul de obiect. În centru unui limbaj “prototype-based” stă noțiunea de prototypical object care este un obiect folosit ca și template pentru a obține proprietățile inițiale ale unui obiect nou. Orice obiect poate să-și specifice proprietățile fie la creare, fie la run-time. În plus, orice obiect existent poate fi asociat ca și prototype pentru alt obiect, permițând celui de-al doilea să partajeze proprietățile cu primul (să aibă aceleași proprietăți ca și primul).

JavaScript permite și operația de moștenire între clase. JavaScript implementează moștenirea prin faptul că permite utilizatorului să asocieze un obiect prototypical unei funcții constructor.

3.2.4. JavaScript si Html

Scripturile JavaScript pot fi introduse în documentele Html prin patru modalități:

ca și instrucțiuni sau funcții scrise în interiorul unui tag <SCRIPT>

<SCRIPT LANGUAGE=”Javascript”>
JavaScript statements…
</SCRIPT>

specificând un fișier sursa JavaScript (fișier cu extensia js)

<SCRIPT SRC="common.js">
</SCRIPT>

specificând o expresie JavaScript ca valoare a unui atribut HTML

<HR WIDTH="&{barWidth};%" ALIGN="LEFT">

<H4>&{myTitle};</H4>

Entitățile JavaScript încep cu “&” și se termină cu “;” și sunt cuprinse in interiorul acoladelor

ca handler de eveniment pentru elemente ale unui formular

<INPUT TYPE="button" VALUE="Press Me" onClick="funcție()">

3.2.5 Lucrul cu evenimente

Majoritatea scripturilor JavaScript sunt orientate pe evenimente. Evenimentele sunt acțiuni ale utilizatorului asupra documentului Html. Exemple de evenimente sunt: click-ul pe un buton, editarea unui câmp de tipul text, mutarea mouse-ului peste un link, etc. Pentru fiecare astfel de eveniment se pot defini handlere de evenimente care sunt funcții javascript sau secvențe de instrucțiuni care se vor executa atunci când evenimentul respectiv are loc. Evenimentele (și handlerele de evenimente) care se pot folosi sunt predefinite și sunt urmatoarele:

Un handler de evenimente este asociat unui tag Html. Asocierea se poate face fie când se specifică tagul Html, fie mai târziu prin cod JavaScript. În primul caz, sintaxa generală de definire a unui eveniment este următoarea:

<TAG eventHandler="JavaScript Code">

unde TAG este tagul Html pentru care se va defini handlerul, eventHandler este unul din handlerele definite în tabelul de mai sus, iar "JavaScript Code" este o secvența de instrucțiuni JavaScript separate prin “;” sau numele unei funcții JavaScript. Pentru cel de-al doilea caz, forma generală este următoarea:

<SCRIPT LANGUAGE="JavaScript">

…

obj.eventHandler=”JavaScript Code”;

…

</SCRIPT>

unde obj este numele obiectului javascript (asociat unui anumit tag) căruia i se asociaza handlerul de evenimente, iar eventHandler și “JavaScript code” au aceleași semnificații ca și în primul caz. Exemple de lucru cu evenimente:

pentru un buton se definește un handler pentru evenimentul onClick:

…

<head>

<SCRIPT>

function calc(f) {

…

}

</SCRIPT>

</head>

…

<INPUT TYPE="button" VALUE="Calculeaza" onClick="calc(this.form)">

Când utilizatorul va face click pe buton se va apela funcția calc (definită în secțiunea head) cu parametrul this.form care este forma curentă în care este definit butonul.

Pentru un anumit link (myLink din frame-ul myFrame al documentului), la trecerea mouse-ului peste el se va deschide o nouă fereastră care va conține documentul mydoc.html:

Document.myFrame.MyLink.onMouseOver=”window.open('mydoc.html', 'newWin')";

Fiecare eveniment are asociat un obiect event care va conține informații despre evenimentul respectiv ca tipul evenimentului, poziția cursorului, etc. De pildă, în cazul evenimentului onMouseDown obiectul event va conține tipul evenimentului (“onMouseDown”), poziția pe axa Ox si Oy a cursorului de mouse, un număr care reprezintă butonul mouse-ului folosit și un câmp care va conține eventuali modificatori (Control, Alt, Shift, ..). Când are loc un eveniment pentru care s-a definit un handler, obiectul event este trimis handler-ului ca și argument, iar execuția este cedată handler-ului de eveniment.

Una dintre cele mai frecvente utilizări ale evenimentelor este validarea datelor înainte de a fi trimise la server.

Capitolul 4. Formatarea paginilor web: CSS

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

4.1. Sintaxa

Sintaxa CSS-ului este compusă doar din 3 părți: selector { proprietate: valoare }, unde selectorul este elementul (X)HTML pe care dorești să îl stilizezi, proprietatea este chiar titlul (numele) proprietății respective, iar valoarea reprezintă stilul pe care îl aplici proprietății.

Fiecare selector poate avea multiple proprietăți, și fiecare proprietate din acel selector are valori independente. Proprietatea este separată de valoare cu semnul ":". Toate proprietățile împreună cu valorile lor, aparținând aceluiași selector sunt cuprinse între acolade "{}". Multiplele valori din aceeași proprietate sunt separate prin virgula "," și dacă o valoare conține mai mult de un cuvânt, acestea se cuprind între ghilimele ' " '.

Sintaxa CSS este structurată pe trei nivele:

nivelul 1 fiind proprietățile etichetelor din documentul HTML, tip inline;

nivelul 2 este informația introdusa în blocul HEAD, tip embedded;

nivelul 3 este reprezentat de comenzile aflate în pagini separate, tip externe.

Cea mai mare importanță (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mică importanță o are cea de nivelul 3. Folosirea unui fișier extern(nivel 3) care să conțină comenzi CSS este foarte practic deoarece poate fi utilizat în mai multe situații(mai multe fișiere HTML pot folosi același fișier extern CSS) eliminând timpul necesar introducerii codului corespunzător în fiecare pagină și totodată editarea lor într-un singur loc pentru mai multe fișiere. Extensia acestor fișiere este .css. Legătura paginilor HTML cu fișierele extrene CSS se face prin introducerea următoarei linii:

<link rel="stylesheet" type="text/css" href="fisier_css.css">

unde rel – fișierul este tip stylesheet; type – tip text ce conține comenzi CSS; href – fișierul sau adresa fișierului CSS.

Comenzile embedded(nivel 2) sunt cele găzduite oriunde între perechea de etichete <head> și </head> conform sintaxei:

<style type="text/css">

<!–… comenzi CSS …–></style>

unde style – specifică unde începe și unde se termină blocul CSS, iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, conținutul blocului style.

Comenzile CSS inline(nivel 1) suprascriu orice altă comandă CSS. Sunt amplasate în interiorul etichetelor HTML aflate în zona BODY si au sintaxa:

<eticheta style="codul CSS dorit">

…textul sau obiectul asupra caruia este aplicat codul CSS…

</eticheta>

Este permisă folosirea comentariilor în CSS ca și în HTML: /* Acesta este un comentariu în CSS */.

Beneficiile sintaxei CSS sunt:

formatarea este introdusă într-un singur loc pentru tot documentul;

editarea rapidă a etichetelor;

datorită introducerii într-un singur loc a etichetelor se obține o micșorare a codului paginii, implicit încărcarea mai rapidă a acesteia.

4.2. Id-urile CSS. Clasele CSS

Id și class sunt comenzi care dau unei formatări CSS un nume. Se folosesc atunci când dorim să aplicăm un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor conține caracterul _.

Elementul id se aplică unui style de format o singură dată sau la o singură etichetă HTML, plasându-se un nume acelui style. Acest element necesită existența comenzilor CSS în zona HEAD sau într-un fișier extern.

Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca și la id necesită existența comezilor CSS în zona HEAD sau într-un fișier extern.

4.3. Fonturi CSS

Proprietățile fontului pot stabili stilul, mărimea, înălțimea liniei și tipul fontului folosit:

font-family: este o listă de fonturi din care browser-ul va folosi fontul în ordinea în care le recunoaște (primul folosit va fi primul din lista, dacă nu este recunoscut îl folosește pe al doilea și tot așa mai departe). Este recomandat ca ultima poziție din listă să fie un font generic (de exemplu serif, sans-serif sau monospace). În situația în care numele fontului este format din două cuvinte se încadrează între ghilimele duble pentru ca browser-ul să le interpreteze împreună.

font-size este parametrul prin care stabilim dimensiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente; pentru dimensiunea exprimată în puncte folosim același exemplu înlocuind px cu pt. Dimensiunea exprimată prin keywords folosește cuvinte în loc de cifre. Șapte cuvinte înlocuiesc dimensiunile de la 1 la 7 de la eticheta FONT FACE din HTML.

font-style: este folosit pentru a adăuga caracteristica italică fontului. Poate lua valorile normal si italic.

font-weight: font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

4.4. Alinierea obiectelor

Ele se clasează în:

text-align poziționează pe orizontală obiecte (de exemplu text sau imagini) și admite valorile left, right și center.

vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel și poate lua valorile: top, middle și bottom.

float este folosit pentru alinierea textului cu imaginile; poate avea valorile: left si right. În funcție de valoarea aleasă imaginea va fi aliniată în partea opusă a paginii.

Tabulare

text-indent este folosit pentru alinierea textului în interior având valori exprimate în inci(in), centimetri(cm) sau pixeli(px).

Decorare

text-decoration adaugă sublinierea sau tăierea blocului text asociat și poate avea valorile underline, line-through sau none.

Culoare

color definește culoarea textului dintr-o zonă sau întreaga pagină.

4.5. Stiluri pentru legături

În HTML culoarea legăturilor poate fi stabilită prin atributele LINK, ALINK și VLINK declarate în interiorul etichetei BODY. Același lucru și chiar mai mult poate fi realizat folosind sintaxa CSS. Astfel:

a definește stilul general pentru legătura

a:link definește stilul legăturii nevizitate

a:visited definește stilul legăturii vizitate

a:active definește stilul legăturii active (nu prea se folosește)

a:hover definește stilul când mouse-ul este deasupra legăturii

4.6. Fundaluri CSS

Culoare de fond

background-color definește culoarea de fond și poate fi asociat oricărei etichete HTML

Imagine de fond

background-image asociază o imagine ca fundal unui obiect. Imaginile pot fi folosite ca fundal în spatele întregii pagini, a unui obiect sau a textului. Iată un exemplu de stil care aplică o imagine(poza.jpg) paragrafelor:

background-repeat este un parametru care, în functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond, se repetă pe orizontală și verticală; poate lua valorile:

repeat-x imaginea se repeta pe orizontală

repeat-y imaginea se repeta pe verticală

no-repeat imaginea nu se repetă

background-position permite controlul poziției obiectului; astfel sunt acceptate două valori:

în prima poziție poate fi: top, center, bottom, percentage sau pixel

în a doua poziție poate fi: right, center, left, percentage sau pixel

4.7. Padding. Margin

Padding stabilește distanța dintre obiect și chenar simultan pentru toate laturile. Distanțele pot fi stabilite și individual folosind padding-top, padding-bottom, padding-left sau padding-right.

Margin stabilește distanța dintre chenar și celelalte obiecte din pagină simultan pentru toate laturile. Distanțele pot fi stabilite și individual folosind margin-top, margin-bottom, margin-left sau margin-right.

Valorile pentru padding si margin pot fi exprimate în: px(pixeli), in(inci), pt(puncte) sau cm (centimetri).

Chenare

Comanda CSS pentru definirea chenarului este border având proprietățile asociate width, style și color. Astfel:

border-width stabilește grosimea chenarului și poate fi exprimată în px(pixeli), pt(puncte), cm (centimetri) sau in(inci).

border-style stabilește tipul chenarului și poate fi dotted, dashed, solid, double, groove, ridge, inset si outset.

border-color stabilește culoarea chenarului și poate fi exprimată prin valoare hexazecimală sau în cuvinte.

Poziționare

Poziționarea permite așezarea unui obiect într-un anume loc folosind coordonatele. Totodată obiectele pot fi poziționate pe straturi diferite, unul deasupra celuilalt.

Atât poziționarea absolută (ABSOLUTE) cât și cea relativă (RELATIVE) folosesc proprietățile left și top exprimate în px(pixeli), in(inci), pt(puncte), procentaje sau cm(centimetri).

poziționare absolută plasează obiectul în pagină exact în locația dată de left și top. Astfel poate fi creat un element liber față de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.

poziționare relativă este poziția normală pe care o ocupă un element, după elementele anterioare si înaintea celor următoare. Poate fi deplasat fata de aceasta poziție folosind proprietățile left si top.

poziționare tridimensională: elementele sunt poziționate pe ecran pe o suprafața bidimensională dar pot fi așezate și unul deasupra celuilalt, într-o stivă utilizând un indicativ (index-z) începând cu 0, următorul 1 si tot așa în continuare. Elementul cu indexul cel mai mare este așezat deasupra.

Capitolul 5. Baze de date – MySQL și PostgreSQL

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

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

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

5.1. Structura unei baze de date relationale

O baza de date relationale stocheaza datele în tabele, iar fiecare tabel stocheaza in coloane informatii despre un anumit tip de element.

Exemplu de tabel dintr-o baza de date relationala.

Primul rând al tabelului atribuie nume pentru fiecare coloana.
Fiecare rând al tabelului, altul decât primul rând, descrie o singura persoană.

Fiecare coloana, descrie un anumit atribut.

Pentru a se putea face referire, mai usor, la un anumit rând al tabelului, se obisnuieste ca fiecare tabel sa contina o coloana care identifica în mod unic fiecare rând. Aceasta coloana se numeste "cheia primara" a tabelului. In exemplul prezentat, coloana numita "PersoanaID" serveste drept cheie primara.

Daca nici o coloana nu contine o valoare unica pentru fiecare rând, se pot combina valorile mai multor coloane pentru a crea o "cheie primara compusa".

O baza de date relationala se numeste astfel datorita capacitatii sale de a stabili relatii între date din mai multe tabele.

Urmatorul exemplu prezinta doua tabele si o relatie între acestea.

Al doilea tabel contine informatii despre meseriile caracteristice ale persoanelor prezentate in exemplul anterior. Mai precis, tabelul identifica persoana cu o anumita meserie. Numele meseriei serveste drept cheie primara a tabelului, care mai contine, în afara de aceasta, o singura coloana.

Coloana respectiva stocheaza atributul "PersoanaID" din primul tabel, al persoanei care cunoaste meseria descrisa de un anumit rând. De exemplu, angajatul cu numarul 003 este inginer.

"PersoanaID" este atât cheia primara a tabelului original, dar si o coloana din noul tabel. Coloana "PersoanaID" a noului tabel se numeste "cheie externa"; desi nu este cheia primara a noului tabel, este cheia primara a unui alt tabel.

Aplicatia software care gazduieste o baza de date se numeste "sistem de gestiune a bazelor de date" (SGBD). Exista multe sisteme de gestiune a bazelor de date, printre cele mai populare asemenea sisteme se numara: DB2 , Interbase , MySQL , Oracle , Postgresql , SQL Server , Sybase .

MySQL este cel mai popular sistem de gestiune a bazelor de date destinat utilizarii cu PHP, în mare masura deoarece este gratuit. Totusi, prin intermediul PHP este posibil accesul la aproape orice SGBD modern.

Bazele de date relationale înteleg SQL (Structured Query Language), un limbaj relativ simplu, folosit pentru solicitarea datelor. In ciuda simplitatii sale, SQL este un limbaj foarte puternic, care poate obtine accesul la date stocate în mai multe tabele, poate filtra datele dorite si poate sorta, rezuma si afisa rezultatele.

În general, bazele de date relationale îsi stocheaza datele într-un singur fisier sau catalog. Aceasta caracteristica de organizare faciliteaza administrarea datelor, deoarece executarea copiei de siguranta, respectiv restaurarea unui singur fisier sau catalog se realizeaza mai usor.

Sistemele de gestiune a bazelor de date relationale necesita mai multe cicluri de procesor pentru a satisface o cerere de date decât cele necesare pentru accesul la un fisier normal, dar ofera protectie sporita a datelor, iar pentru accesul la distanta usureaza traficul deoarece majoritatea operatiilor sunt efectuate de programul SQL, astfel singurele date transmise in retea ar fi rezultatul cerut.

5.2. Proiectarea unei baze de date – MySQL

La crearea unui tabel intr-o baza de date, este important sa se tina cont de "cheia primara". Coloanele dintr-un tabel trebuie sa se bazeze pe cheia primara în totalitatea sa. O alta operatie importanta este specificarea unui tip de date pentru fiecare coloana. Majoritatea bazelor de date relationale accepta urmatoarele tipuri de date generale:

Caracter

Întreg

Zecimal

Data si ora

Binar

Tabelul urmator rezuma tipurile de date cele mai frecvent utilizate, acceptate de MySQL si de majoritatea bazelor de date relationale. MySQL accepta multe alte tipuri de date, dar acestea sunt cele mai folosite.

Pentru selectarea tipurilor de date este indicat sa se aleagă:

BLOB ca tip pentru datele pe care nu trebuie manipulate si la care nu se va obtine acces prin intermediul limbajului SQL.

un tip data sau ora adecvat pentru coloanele care contin date calendaristice sau ore.

un tip numeric pentru coloanele folosite pentru numere sau în calcule.

Pentru cantitati foarte mari sau foarte mici, se va selecta DOUBLE ca tip de date.

Pentru coloane care contin numere fara parte zecimala de dimensiuni medii, se va selecta SMALLINT sau INTEGER ca tip de date.

Pentru alte coloane care contin date numerice, se va selecta DECIMAL ca tip de date.

CHAR sau VARCHAR ca tip pentru celelalte coloane, chiar si pentru cele care contin cifre, cum ar fi un cod postal.

5.3. Crearea unei baze de date MySQL și a unui tabel

Pentru a crea o baza de date, se va folosi urmatoarea comandă

CREATE DATABASE nume_db;

unde "nume_db" este numele bazei de date care va fi creata.
Inainte de a crea un tabel sau a lucra cu alte comenzi intr-o baza de date, se va accesa baza de date existenta prin comanda:

USE nume_db;

unde "nume_db" este numele bazei de date. Cu aceeasi comanda "USE nume_db" se schimba si baza de date in care vrem sa lucram.
Pentru a crea un tabel într-o baza de date, se va emite comanda "CREATE TABLE", care are urmatoarea forma:

CREATE TABLE tabel (coloana tip, coloana tip, …);

unde "tabel" este numele tabelului, "coloana" este numele unei coloane, "tip" este tipul datelor incluse în coloana, se poate specifica un numar nedefinit de coloane.

În afara tipului de date, intre paranteze, se pot specifica si alte atribute optionale ale unei coloane:

NOT NULL – Fiecare rând trebuie sa contina o valoare a coloanei asociate; valorile nule nu sunt permise.

DEFAULT valoare – Daca nu este data o valoare a coloanei asociate, se va presupune valoarea specificata.

AUTO INCREMENT – MySQL va repartiza în mod automat un numar de serie ca valoare a coloanei asociate.

PRIMARY KEY – Coloana asociata este cheia primara a tabelului care o contine.

5.4. Ștergerea și modificarea unui tabel MySQL

Stergerea unui tabel sau a unei coloane este un act irevocabil, datele fiind definitiv sterse. Pentru a sterge un tabel, se va scrie urmatoarea comanda:

DROP TABLE tabel;

unde "tabel" este numele tabelului care va fi sters.

Dupa crearea unui tabel, se poate modifica prin emiterea unei comenzi "ALTER TABLE", care are mai multe forme. Urmatoarea forma a comenzii permite stergerea unei coloane din tabel:

ALTER TABLE tabel DROP coloana;

unde "tabel" este numele tabelului care va fi modificat, iar "coloana" este numele coloanei care va fi stearsa.

O alta forma a comenzii permite adaugarea unei coloane noi în tabel:

ALTER TABLE tabel ADD coloana tip [optiuni];

unde "tabel" este numele tabelului care va fi modificat, "coloana" este numele coloanei care va fi adaugata, "tip" este tipul noii coloane, iar "[optiuni]" constituie toate optiunile dorite, precum PRIMARY KEY.

Pentru a vedea toate bazele de date create in MySQL, se va folosi urmatoarea comanda:

SHOW DATABASES;

Pentru a vedea toate tabelele dintr-o baza de date din MySQL, se va folosi urmatoarea comanda:

SHOW TABLES;

Pentru a vedea toate coloanele dintr-un tabel, si atributele acestora, se va folosi urmatoarea comanda:

SHOW COLUMNS FROM tabel;

5.5. Accesul la datele dintr-o baza de date, interogarile SQL

Cea mai elementara forma de interogare este comanda "SELECT" simpla.

Cea mai simpla interogare raporteaza toate coloanele din toate rândurile unui tabel.

Interogarea are urmatoarea forma:

SELECT * FROM tabel;

unde "tabel" este numele tabelului la care se va obtine accesul.

Aceasta comanda va afisa un tabel cu fiecare rând pe o linie separata. Datele de iesire includ numele coloanelor si linii care separa coloanele.

Pentru selectarea unor anumite coloane sau raportarea coloanelor într-o anumita ordine, se poate folosi urmatoarea forma a comenzii "SELECT":

SELECT coloana1, coloana2 FROM tabel;

unde "tabel" este numele tabelului, iar "coloana1" si "coloana2" sunt coloanele la care se va obtine accesul si al caror continut va fi afisat.

Puteti specifica mai multe coloane, separate prin virgula.
Daca se va selecta numai acele rânduri care satisfac un anumit criteriu, clauza "WHERE" va permite specificarea unei conditii; rândurile care nu satisfac conditia nu sunt raportate.

5.6. Modificarea datelor dintr-o baza de date

Pentru a insera un nou rând într-un tabel, folositi comanda "INSERT", care are urmatoarea forma:

INSERT INTO tabel VALUES (valoare1, valoare2);

– Unde "tabel" este numele tabelului la care se va adauga rândul.
– "valoare1" este valoarea pentru prima coloana din tabel, iar "valoare2" este valoarea celei de-a doua coloane din tabel. Se pot da mai mult sau mai putin de doua valori; numarul valorilor date ar trebui sa fie egal cu acela al coloanelor din tabel.
O coloana poate primi si valoarea "NULL", cu exceptia situatiilor când definitia coloanei nu permite.
O forma mai buna (si recomandata) a comenzii INSERT specifica numele coloanelor carora le sunt atribuite valorile:

INSERT INTO tabel (coloana1, coloana2) VALUES (valoare1, valoare2);

Unde coloana denumita "coloana1" primeste valoarea "valoare1", iar coloana denumita "coloana2" primeste valoarea "valoare2".
Pot fi specificate mai mult sau mai putin de doua coloane si valori. Numarul coloanelor specificate trebuie sa fie egal cu numarul valorilor specificate.
Coloanele care nu sunt denumite în comanda "INSERT" si care nu au o valoare prestabilita (DEFAULT) primesc valoarea NULL, cu exceptia situatiilor când valoarea respectiva nu este permisa (în acest caz, comanda INSERT esueaza).
Daca doriti sa adaugati mai multe randuri intr-un tabel, intr-o singura inserare, puteti folosi urmatoarea forma a comenzii INSERT:

INSERT INTO tabel (coloana1, coloana2)
    VALUES (valoare1, valoare2),
        (valoare3, valoare4),
        (valoare5, valoare6);

Pentru a modifica valoarea unui rând sau mai multor rânduri existente într-un tabel, folositi o comanda "UPDATE", care are urmatoarea forma:

UPDATE tabel SET coloana1=valoare1, coloana2=valoare2
    WHERE conditie;

– Unde "tabel" este numele tabelului ale carui rânduri urmeaza sa fie modificate, "coloana1" este numele primei coloane care urmeaza a fi modificata, "valoare1" este valoarea care va fi repartizata în "coloana1", "coloana2" este numele celei de-a doua coloane care urmeaza a fi modificata, "valoare2" este valoarea care va fi repartizata în "coloana2", iar "conditie" identifica rândul sau rândurile care urmeaza a fi actualizate, dupa o anumita conditie.
Poate fi actualizat un numar mai mare sau mai mic de coloane. Daca se doreste ca toate randurile coloanei sa fie actualizate, clauza "WHERE" poate fi omisa.
De exemplu, comanda urmatoare modifica din coloana "titlu" numele asociat cartii in "Curs2", in randul unde coloana "pret" are valoarea 5.

UPDATE carte SET titlu=’Curs2’
    WHERE pret=5;

Pentru a sterge un rând dintr-un tabel, folositi comanda "DELETE", care are urmatoarea forma:

DELETE FROM tabel WHERE conditie;

Daca se vrea a fi sterse toate rândurile tabelului, clauza WHERE poate fi omisa.
De exemplu, comanda urmatoare sterge rândul din tabelul "carte" asociat titlului "Curs2":

DELETE FROM carte WHERE titlu='Curs2';

4. Sortarea si gruparea

Deseori, este important ca datele sa fie raportate într-o anumita secventa. Puteti specifica ordinea de raportare a rezultatelor interogarii folosind clauza "ORDER BY", care are urmatoarea forma:

ORDER BY valoare

Daca se vor folosi mai multe câmpuri de sortare, acestea vor fi separate prin virgula.
Daca doriti sa indicati o sortare descendenta, în locul uneia ascendente, specificati "DESC" dupa valoare.
De exemplu, pentru a ordona toate cartile în functie de pret, de la cel mai mare la cel mai mic, respectiv dupa titlu pentru un pret egal, puteti folosi urmatoarea interogare:

SELECT pret, titlu FROM carte
    ORDER BY pret DESC, titlu;

Pentru a include numai titlurile care au un pret mai mare de 50, adaugati o clauza WHERE la comanda SELECT:

SELECT pret, titlu FROM carte
    WHERE pret>50
    ORDER BY pret DESC, titlu;

De exemplu, interogarea urmatoare raporteaza numarul cartilor si pretul mediu al acestora:

SELECT count(*), avg(pret) FROM carte;

– Datele de iesire vor fi afisate pe o singura linie.
Clauza SQL "AS" specifica un nume nou pentru o coloana sau expresie. Numele specificat este folosit ca titlu în rapoartele SQL. Clauza "AS" este utila în lucrul cu functiile din tabelul anterior, va ajuta sa identificati mai usor datele de iesire.
De exemplu, interogarea precedenta poate fi rescrisa pentru a include o clauza "AS", astfel:

SELECT count(*) AS Carte_Numar,
    avg(pret) AS Pret_Mediu
    FROM carte;

O alta clauza utila este "GROUP BY", aceasta are urmatoarea forma:

GROUP BY coloana-sortare

– Unde "coloana-sortare" este numele sau valoarea unei coloane, specificata într-o clauza "ORDER BY", care trebuie sa urmeze dupa clauza "GROUP BY".
De exemplu, avem un tabel "carte" cu 4 coloane (carteid, titlu, anul si pret), interogarea urmatoare raporteaza numarul cartilor si pretul mediu pentru fiecare an (anul) în parte:

SELECT count(*), avg(pret) FROM carte
    GROUP BY anul
    ORDER BY anul;

Pentru a include în datele de iesire numai grupurile selectate, specificati clauza "HAVING" imediat dupa clauza "GROUP BY". Clauza "HAVING" are urmatoarea forma:

HAVING conditie

De exemplu, pentru a include numai cartile al caror atribut "anul" are valoare mai mare decât 1980, srieti urmatoarea interogare:

SELECT count(*), avg(pret) FROM carte
    GROUP BY anul
    HAVING anul>1980
    ORDER BY anul;

Capitolul 6. Arhitectura magazinului virtual

În cadrul acestui magazin virtual s-au folosit următoarele limbaje:

HTML

PHP

JavaScript

CSS

SQL – MySQl

– PostgreSQL

Magazinul este alcătuit din două părți și anume, cea a utilizatorului și cea a administratorului.

6.1. Modul administrator

Acest modul permite administratorului, adăugarea produselor, editarea produselor, primirea comenzilor și a mesajelor trimise de clienți.

Modulul administrator este alcătuit din patru pagini: Comenzi, User, Mesaje și Produse.

Pagina Comenzi (dashboard.php) este destinată pentru primirea comenzilor efectuate de către clienți. Aceasta conține informații depre client cum ar fi: nume, adresă și număr de telefon, și informații despre produs: nume, preț, data la care a fost trimisă comanda și status comandă (Figura 6.1.1.). Dacă se dorește anularea comenzii, se va realiza prin apăsarea butonului Șterge (deleteorder.php). În cazul în care sunt multe comenzi și se dorește căutarea unei anumite comenzi, acest lucru se va realiza prin Filtru.

Figura 6.1.1. Panou de administrare – Pagina Comenzi

Pagina User (user.php) este destinată pentru administrator. Aceasta cuprinde userul și parola administratorului (Figura 6.1.2.).

Figura 6.1.2. Panou de administrare – Pagina User

Pagina Mesaje (message.php) este destinată pentru primirea mesajelor trimise de către clienți, unde iși pot exprima părerea despre magazin, cerere de informații despre produse sau eventuale nemulțumiri. Această pagina conține două funcții: filtrarea și ștergerea mesajelor (deletemessage.php) (Figura 6.1.3.).

Figura 6.1.3. Panou de administrare – Pagina Mesaje

Pagina Produse (products.php) este destinată administratorului care poate adăuga (addproduct.php), edita (editproductdetails.php), șterge (deleteproduct.php) sau filtra produse (Figura 6.1.4.).

Figura 6.1.4. Panou de administrare – Pagina produse

Butonul Adaugă Produse redirecționeaza administratorul către o nouă pagina unde poate adăuga următoarele informații: produs (denumire), descriere, preț, categorie și imagine (Figura 6.1.5.).

Figura 6.1.5. Panou de administrare – Adaugă Produse

Butonul Edit are aceleași funcții ca și butonul Adaugă produse, numai ca editează numele produsului, descrierii, prețului și a categoriei.

6.1.1 Formular login administrator

Acest formular reprezintă calea către panoul de administrare. Formularul login (login.php) se află pe pagina principală a magazinului, pagină accesibilă oricărei persoane. Logarea se realizează prin introducerea username-ului și parolei (Figura6.1.1.1.).

Figura 6.1.1.1. Formular login administrator

6.2. Modul client

Acest modul este destinat clienților, care au posibilitatea de a căuta un produs anume, adăugarea în coș a unui produs și votarea acestuia , trimiterea unui mesaj printr-un formular de contact, vizualizarea locației prin intermediul Google Maps și accesarea paginii de Facebook a magazinului.. Clientul nu necesită înregistrare pentru a trimite comanda, deoarece în momentul adăugarii produsului în coș se va completa un formular ce va conține datele clientului.

Modulul client conține cinci pagini: Home (index.php), Produse (products.php), Coș (cart.php), Contact (contact.php) și Locația noastră (location.php).

Pagina Home conține două imagini interactive cu produse și un formular de login a administratorului (Figura 6.2.1.).

Figura 6.2.1. Modul client – Pagina Home

Pagina Produse conține produsele cu butonul Comandă, votarea acestora și funcția de căutare (Figura 6.2.2.). Prin apăsarea produsului se va afișa imaginea acestuia și specificațiile respective. Imaginile au funcția de a fi derulate normal prin apăsarea butonului de mouse click-stânga sau prin slide show (Figura 6.2.3.).

Figura 6.2.2. Modul client – Pagina Produse

Figura 6.2.3. Modul client – Pagina Produse – Imagini

Pagina Coș conține produsul care a fost adăugat din pagina Produse, cu posibilitatea de a șterge produsul și formularul care se va completa cu datele clientului: nume, adresă și telefon (Figura 6.2.4.). Câmpurile formularului sunt obligatorii, iar în cazul necompletării acestora se va afișa o casetă text care va avertiza clientul să completeze câmpul respectiv (Figura 6.2.5.). Clientul mai are posibilitatea de a plăti online prin intermediul PayPal. (Figura 6.2.6.).

Figura 6.2.4. Modul client – Pagina Coș

Figura 6.2.5. Modul client – Pagina Coș – Completare câmpuri

Figura6.2.6. Comandă prin PayPal

Pagina Contact conține un formular de contact, unde clientul poate trimite un mesaj cu privire la produse, nelamuriri, ș.a.m.d. (Figura 6.2.7.). Acest formular conține: nume, e-mail, subiect, mesaj și butonul de trimitere. După apăsarea butonului Trimite se va afișa o fereastră care va arăta ca mesajul se trimite și apoi se va redireționa către pagina Home (Figura 6.2.8.).

Figura 6.2.7. Modul client – Pagina Contact

Figura 6.2.8. Modul client – Pagina Contact – Trimitere mesaj

Pagina Locația noastră conține o harta generată de Google Maps care conține locația magazinului. “Locația” în acest caz am ales sa fie chiar adresa Universitații Hyperion (Figura 6.2.9.).

Figura 6.2.9. – Modul Client – Pagina Locația noastră

6.3. Structura datelor magazinului virtual

Magazinul virtual este alcătuit din următoarele fișiere:

Modul client:

Index.php – pagina principală;

Login.php – funția care realizează logarea către panoul de administrare;

Products.php – pagina care conține produse;

Addtocart.php – funcția care adaugă produsul in coș;

Cart.php – pagina care conține coșul de cumpărături;

Acceptorder.php – funcția care trimite comanda în panoul de administrare;

Sending1.php – mesajul care apare după ce se trimite comanda;

Contact.php – pagina de contact;

Messageexec.php – funcția care trimite mesajul în panoul de administrare;

Sending.php – mesajul care apare după ce se trimite mesajul clientului;

Location.php – funcția google maps care indică locația magazinului pe hartă;

Db.php – fișierul care inițializează conectarea la baza de date;

Magazin.sql – baza de date PostgreSQL;

Magazin1.sql – baza de sate MySQL.

Modul de administrare:

Dashboard.php – pagina care conține comenzile clienților;

Deleteorder.php – funcția care șterge comanda;

User.php – pagina care conține username-ul și parola administratorului;

Message.php – pagina care conține mesajele trimise de către clienți;

Deletemessage.php – funcția care șterge mesajele trimise de către clienți;

Products.php – pagina care conține produsele adăugate de către administrator;

Addproduct.php – pagina care conține adăugrea produselor;

Addexec.php – funcția care adaugă produsele în magazin;

Editproductdetails. Php – pagina care conține editarea produselor;

Execeditproduct.php – funcția care editează produsele;

Editproductimage.php – pagina care conține editarea imaginii produsului;

Editpicexec.php – funcția care editează imaginea produsului;

Deleteproduct.php – funcția care șterge produsul adăugat;

Connect.php – funcția care realizează conectarea la baza de date.

Fișiere de tip .css și .js utilizate la designul grafic a magazinului.

6.4. Structura bazelor de date

Bazele de date realizate în MySQL și PostgreSQL conțin următoarele tabele:

add_products

Tabel 6.4.1. Adăugare produse în magazin

Cart

Tabel 6.4.2. Coș de cumpărături

Contact

Tabel 6.4.3. Trimiterea mesajului

Mesaje

Tabel 6.4.4. Primirea mesajului în panoul de administrare

Orders

Tabel 6.4.5. Primirea comenzilor în panoul de administrare

Products

Tabel 6.4.6. Produsele adăugate în magazin

User

Tabel 6.4.7. Logarea utilizatorului

Aceste baze de date sunt aceleși în MySQL și PostgreSQL.

Figura 6.4.1. Relaționarea bazelor de date în MySQL.

Relaționarea bazelor de date în PostgreSQL (Figura 6.4.2.).

Figura 6.4.2. Relaționarea bazelor de date în PostgreSQL.

6.5. Fluxul informațional

Fluxul informațional reprezintă totalitatea informațiilor transmise într-un interval de timp de la un emițător de informație la un receptor de informație printr-o mulțime de canale informaționale.

Magazinul virtual pentru a fi accesibil clienților, este necesară urcarea lui pe server. Informațiile ajunse pe server prin intermediul internetului sunt vizibile de către client, unde poate accesa, adăuga în coș și comanda produsele. Aceste comenzi sunt procesate prin intermediul bazei de date care trimit informația către administrator, acesta mai departe onorând comanda prin intermediul unui serviciu de livrare către client. Pentru a putea realiza trimiterea unei comenzi, fișierele, pe lănga structura lor ce implica design, formulare, etc., trebuie sa conțina sesiuni care fac legătura cu baza de date pentru a putea informa clientul dacă comanda a fost trimisă cu succes sau dacă a dat eroare. Fără aceste sesiuni magzinul nu este funcțional. Pentru a putea întelege mai bine, mai jos am realizat schema fluxului informațional.

Schema 6.5.1. Schema fluxului informațional

Capitolul 7. Tehnici de lucru utilizate

În capitolul 6 am vorbit despre ce conține magazinul virtual, adică ceea ce vede clientul și administratorul. În acest capitol voi relua același subiect, dar îl voi dezvolta prin faptul că voi descrie tehnicile de lucru utilizate în magazin.

index.php este fișierul care conține informații despre pagina principală. În cadrul acestei pagini am folosit HTML și JavaScript, dupa cum urmează:

<div id="header">

<h1><a href="index.php"><img src="xres/images/logo.png" class="logo" alt="" /></a>

<div align="right"><a href="https://www.facebook.com/alexandra.tunsoiu"><img src="reservation/facebook.jpg" /></a>

</div></h1>

<ul id="mainnav">

<li class="current"><a href="index.php">Home</a></li>

<li><a href="products.php">Produse</a></li>

<li><a href="cart.php">Coș</a></li>

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

<li><a href="location.php">Locatia noastra</a></li>

</ul>

</div>

Acest cod afișează categoriile, logo-ul magazinului și o legătură către facebook.

<script type="text/javascript">

$("#slideshow > div:gt(0)").hide();

setInterval(function() {

$('#slideshow > div:first')

.fadeOut(1000)

.next()

.fadeIn(1000)

.end()

.appendTo('#slideshow');

}, 3000);

</script>

Acesta este un script de tip JavaScript care este folosit la interactivitatea imaginilor, de tip slide-show.

<form action="admin/dashboard.php" method="post" style="margin-bottom:none;">

<span style="margin-right: 11px;">Username: <input type="text" name="user" style="width: 165px; margin-left: 15px; border: 3px double #CCCCCC; padding:5px 10px;"/>

</span><br>

<span style="margin-right: 11px;">Password: <input type="password" name="password" style="width: 165px; margin-left: 15px; border: 3px double #CCCCCC; padding:5px 10px;"/>

</span><br><br>

<input type="submit" id="submit" value="Login" style="height: 34px; margin-left: 15px; width: 191px; padding: 5px; border: 3px double rgb(204, 204, 204);" />

</form>

Acesta este un formular de login pentru administrator care îl redirecționează către panoul de administrare.

Cart.php este fișierul unde sunt adăugate produsele. Funcția folosita pentru coș este următoarea:

<script language="javascript">

$action = (isset($_GET['action']) && $_GET['action'] != ') ? $_GET['action'] : 'view';

switch ($action) {

case 'add' :

addToCart();

break;

case 'view' :

}

$cartContent = getCartContent();

$numItem = count($cartContent);

$pageTitle = 'Cosul de cumparaturi';

require_once cart.php';

// afiseaza un mesaj de eroare daca exista

displayError();

if ($numItem)

</script>

Funcția php care apelează baza de date este:

<?php

include('db.php');

$Product=$_GET['Product'];

$Price=$_GET['Price'];

mysql_query("INSERT INTO cart (Product, Price)

VALUES('Sony Vaio Pro 13', '6999')");

header("location: cart.php");

exit();

?>

Coșul are și funcția de a șterge comanda:

<script src="admin/js/jquery.js"></script>

<script type="text/javascript">

$(function() {

$(".delbutton").click(function(){

//Save the link in a variable called element

var element = $(this);

//Find the id of the link that was clicked

var del_id = element.attr("id");

//Built a url to send

var info = 'id=' + del_id;

if(confirm("Esti sigur ca vrei sa stergi?"))

{

$.ajax({

type: "GET",

url: "admin/deleteroom.php",

data: info,

success: function(){

}

});

$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")

.animate({ opacity: "hide" }, "slow");

}

return false;

});

});

</script>

După ce este adăugat produsul în coș, clientul trebuie să completeze un formular care conține detalii despre livrare.

<center>

<form action="sending1.php" method="post" enctype="multipart/form-data" name="addorder" onsubmit="return validateForm()">

<input name="prodid" type="hidden" type="text" value="<?php echo $id ?>"/>

<input name="pname" type="hidden" value="<?php echo $pname ?>" />

Nume:<br />

<input name="cname" type="text" class="ed" /><br />

Adresă:<br />

<input name="address" type="text" id="rate" class="ed" /><br />

Nr. Telefon: <br />

<input name="contact" type="text" id="qty" class="ed" onkeypress="return isNumberKey(event)" /><br />

<input type="submit" name="Submit" value="Trimite" id="button1" />

</form>

</center>

Câmpurile din formular sunt obligatorii, așa că am folosit un script JavaScript care avertizează clientul dacă un câmp este necompletat:

<script type="text/javascript">

function validateForm()

{

var a=document.forms["addorder"]["cname"].value;

if (a==null || a=="")

{

alert("Va rugam introduceti numele!");

return false;

}

var b=document.forms["addorder"]["address"].value;

if (b==null || b=="")

{

alert("Va rugam introduceti adresa!");

return false;

}

var c=document.forms["addorder"]["contact"].value;

if (c==null || c=="")

{

alert("Va rugam introduceti numarul de telefon!");

return false;

}

}

</script>

Pentru câmpul Telefon am adăugat o funcție care permite introducerea doar a cifrelor:

<SCRIPT language=Javascript>

function isNumberKey(evt)

{

var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

return true;

}

</SCRIPT>

Pentru plata online prin PayPal a comenzii s-a folosit următorul formular:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="business" value="[anonimizat]">

<input type="hidden" name="lc" value="US">

<input type="hidden" name="item_name" value="Sony Vaio Pro 13">

<input type="hidden" name="item_number" value="1">

<input type="hidden" name="amount" value="2166.81">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="button_subtype" value="services">

<input type="hidden" name="no_note" value="0">

<input type="hidden" name="shipping" value="5.00">

<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">

<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

</form>

Pagina contact.php conține un formular de contact realizat prin:

<div id="contactright">

<h3><center>Formular de contact</center></h3>

<form class="validate" action="sending.php" method="POST">

<p>

<label for="name" class="required label">Nume:</label><br>

<input id="name" class="contactform" type="text" name="name" />

</p>

<p>

<label for="email" class="required label">E-mail:</label><br>

<input id="email" class="contactform" placeholder="Exemplu: [anonimizat]" type="text" name="email" />

</p>

<p>

<label for="subject" class="required label">Subiect:</label><br>

<input id="subject" class="contactform" type="text" name="subject" />

</p>

<p>

<label id="message-label" for="message" class="required label">Mesaj:</label><br>

<textarea id="message" class="contactform" name="message" cols="28" rows="5"></textarea>

</p>

<p>

<label></label>

<input class="contactform" id="submit-button" type="submit" name="Submit" value="Trimite" style="height: 35px;" />

</p>

</form>

</div>

Fiecărui câmp i s-a atribuit restricții de scris, cum ar fi la câmpul E-mail trebuie introdus un text de tip [anonimizat].

Pagina location.php este realizată printr-un script elaborat de Google Maps:

<title>Google Maps || Powered By MapsEasy.com Maps Generator</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

function LoadGmaps() {

var myLatlng = new google.maps.LatLng(44.4323700,26.1260000);

var myOptions = {

zoom: 18,

center: myLatlng,

disableDefaultUI: true,

panControl: true,

zoomControl: true,

zoomControlOptions: {

style: google.maps.ZoomControlStyle.DEFAULT

},

mapTypeControl: true,

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR

},

streetViewControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("MyGmaps"), myOptions);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title:"universitatea hyperion"

});

}

</script>

<body onload="LoadGmaps()" onunload="GUnload()">

<center><div id="MyGmaps" style="width:500px;height:400px;border:1px solid #CECECE;">

</div>

</center>

Pentru a modifica locația de pe hartă trebuie schimbate longitudinea si latitudinea din codul var myLatlng = new google.maps.LatLng(44.4323700,26.1260000).

Fișierul cel mai important, fără de care sesiunile PHP nu sunt funcționabile, este db.php, care inițializează conectarea la serverul unde este aflată baza de date.

<?php

$server = "localhost";

$database = "magazin1.sql";

$username = "alexandra";

$parola = "";

// conectarea la serverul MySQL

$connect = mysql_connect($server,$username,$password) or die( mysql_error() );

// selecteaza baza de date

$db = mysql_select_db($database,$connect) or die( mysql_error() );

?>

Fișierul addproduct.php este format dintr-un formular care adaugă produsele în magazin.

<form action="addexec.php" method="post" enctype="multipart/form-data" name="addproduct" onsubmit="return validateForm()">

Produs<br />

<input name="pname" type="text" class="ed" /><br />

Descriere<br />

<input name="desc" type="text" id="rate" class="ed" /><br />

Pret<br />

<input name="price" type="text" id="qty" class="ed" onkeypress="return isNumberKey(event)" /><br />

Categorie<br />

<input name="cat" type="text" class="ed" /><br />

Imagine: <br /><input type="file" name="image" class="ed"><br />

<input type="submit" name="Submit" value="Salveaza" id="button1" />

</form>

Câmpurile formularului sunt obligatorii, iar în cazul necompletării lor se va afișa o casetă text care va afișa un mesaj de avertizare.

<script type="text/javascript">

function validateForm()

{

var a=document.forms["addproduct"]["pname"].value;

if (a==null || a=="")

{

alert("Introduce numele produsului!");

return false;

}

var b=document.forms["addproduct"]["desc"].value;

if (b==null || b=="")

{

alert("Adauga descrierea produsului!");

return false;

}

var c=document.forms["addproduct"]["price"].value;

if (c==null || c=="")

{

alert("Introduce pretul!");

return false;

}

var d=document.forms["addproduct"]["cat"].value;

if (d==null || d=="")

{

alert("Adauga descrierea produsului!");

return false;

}

var e=document.forms["addproduct"]["image"].value;

if (e==null || e=="")

{

alert("Incarca o imagine!");

return false;

}

}

</script>

Pentru câmpul Pret am introdus funcția prin care se poate introduce doar cifre:

<SCRIPT language=Javascript>

function isNumberKey(evt)

{

var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;

return true;

}

</SCRIPT>

Pentru a putea fi executată comanda de a adauga produse am creat fișierul addexec.php, unde a fost creata următoare sesiune:

<?php

include('connect.php');

if (!isset($_FILES['image']['tmp_name'])) {

echo "";

}else{

$file=$_FILES['image']['tmp_name'];

$image= addslashes(file_get_contents($_FILES['image']['tmp_name']));

$image_name= addslashes($_FILES['image']['name']);

$image_size= getimagesize($_FILES['image']['tmp_name']);

if ($image_size==FALSE) {

echo "Aceasta este o imagine!";

}else{ move_uploaded_file($_FILES["image"]["tmp_name"],"reservation/img/products/" . $_FILES["image"]["name"]);

$location=$_FILES["image"]["name"];

$pname=$_POST['pname'];

$desc=$_POST['desc'];

$price=$_POST['price'];

$cat=$_POST['cat'];

$update=mysql_query("INSERT INTO products (imgUrl, produs, pret)

VALUES

('$location','$pname','$price')");

header("location: products.php");

exit();

}

}

?>

Bazele de date pot fi create manual sau automat prin selectarea câmpurilor din cadrul MySQL și PostgreSQL. Pentru a crea o tabela se va folosi comanda CREATE TABLE. În continuare voi arăta cum se realizează o tabelă cu această comandă și voi folosi ca și exemplu două tabele din cadrul acestui magazin:

Tbl add_product

MySQL

CREATE TABLE add_products (

ID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

Produs TEXT,

Pret TEXT,

ImgUrl TEXT

);

PostgreSQL

CREATE TABLE add_products

(

"ID" integer NOT NULL DEFAULT 11,

"imgURL" text,

"Produs" text,

"Pret" text,

CONSTRAINT add_products_pkey PRIMARY KEY ("ID")

Tbl contact

MySQL

CREATE TABLE contact (

ID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

Nume TEXT,

Email TEXT,

Subiect TEXT,

Mesaj TEXT

);

PostgreSQL

CREATE TABLE contact

(

"ID" integer NOT NULL DEFAULT 11,

"Nume" text,

"E-mail" text,

"Subiect" text,

"Mesaj" text,

CONSTRAINT contact_pkey PRIMARY KEY ("ID")

)

Pentru a insera valori în tabela contact, de exemplu, se va folosi comanda INSERT INTO:

INSERT INTO `magazin1`.`contact` (`ID`, `Nume`, `Email`, `Subiect`, `Mesaj`) VALUES ('1', 'Tunsoiu Alexandra', '[anonimizat]', 'magazin', ' Este un magazin foarte bun, cu produse de calitate.'); . Această comandă se aplică în MySQL și PostgreSQL.

Pentru a șterge o tabelă se va folosi comanda DELETE FROM:

DELETE FROM `contact`

Pentru a modifica un rând din tabela contact se va folosi comanda ALTER TABLE:

ALTER TABLE `contact` CHANGE `Subiect` `Subiect1` TEXT CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL;

Capitolul 8. Interfața cu utilizatorul

Interfața unei pagini web este ceea ce vizitatorul vede, este partea cu care utilizatorul interacționează, este imaginea și identitatea unei pagini web și implicit a magazinului virtual. Realizarea ei este foarte importanta deoarece ea poate determina revenirea sau nu a clientului.

Interfața magzinului este una foarte simplă, cu un aspect modern, ușor de utilizat de absolut oricine. Facilitățile oferite nu sunt multe, dar sunt cele mai importante din cadrul oricărui magazin virtual. Magzinele virtuale sunt foarte variate, iar adepții cumpărătuilor online sunt în căutare de ceva simplu, la o distanța de un simplu click. Acest magazin oferă această posibilitate, avân următoarele facilități:

Interfața Client

Interfață modernă

Căutare produs

Listarea produselor

Afișare galerie de imagini

Afișare specificații

Afișare coș de cumpărături

Buton de Comandă (adaugă în coș)

Buton șterge din coș

Posibilitatea de cumpărare fara cont de utilizator

Formular de introducere a datelor de expediere

Posibilitatea de cumpărare cu cardul, prin intermediul PayPal

Afișarea unei sigle cu link către rețeaua de socializare Facebook

Votare produs

Formular de contact

Hartă Google Maps

Interfața Administrator

Autentificare pe bază de utilizator și parolă

Gestionarea comenzilor

Ștergerea comezilor

Filtrarea comenzilor

Administrarea mesajelor

Filtrarea mesajelor

Adăgare produse

Editare produse

Ștergere produse

Filtrare produse

Deconectare administrator

Interfața grafică cu utilizatorul a unui sistem computerizat include metafore de interacțiune, imagini și concepte folosite pentru a transmite funcționalitate și înțeles (semantică) într-un mod vizual.

Caracteristicile fiecărei componente de interfață și secvențele funcționale ale interacțiunilor cu utilizatorul produc aspectul și percepția paginilor Web și relațiile dintre pagini. Designul grafic nu este folosit numai cu scopul de a înviora informația, grafica paginilor Web fiind parte integrantă a experienței vizitatorului magazinului. În cazul documentelor interactive este imposibil să se separe complet designul grafic de funcțiile designului de interfață.

Una dintre regulile în conceperea unei interfețe utilizator pentru un produs software este următoarea: o interfață utilizator este bine scrisă atunci când programul se comportă exact așa cum se așteaptă clienții săi.

Procesul de design poate fi direcționat fie spre scop, fie spre utilizator. În cazul proiectării dirijate de scop, primează scopurile producătorului (ofertantului) informației și nu cele ale consumatorului (utilizatorului). Atenția este focalizată spre tehnologie și ușurința implementării, nu spre eficiența utilizatorului, neluându-se în calcul ergonomia acțiunilor acestuia. In ceea ce privește proiectarea dirijată de utilizator, interfața trebuie să mulțumească, să menajeze și să ajute utilizatorul. Designul trebuie să se realizeze având în vedere cerințele utilizatorului, nu cele ale administratorului magazinului virtual.

Scopul principal este cel de a satisface nevoile tuturor clienților potențiali, adaptând tehnologia Web așteptărilor lor. Nu trebuie cerut clientului/utilizatorului unui document Web să se conformeze, pur și simplu, unei interfețe care pune obstacole în realizarea scopurilor sale.

Cea mai importantă problemă de interfață în cazul magazinelor virtuale este absența orientării în cadrul organizării locale a informației. Pictogramele clare, consistente, o privire de ansamblu asupra magazinului și o pagină de produse bine puse la punct, pot da utilizatorilor încrederea că au posibilitatea de a găsi produse de calitate și siguranță în ceea ce privește tranzacțiile online.

Utilizatorii trebuie să aibă întotdeauna posibilitatea de a se întoarce cu ușurință la pagina de start și la oricare alte puncte importante de navigare prezente în cadrul magzinului. Aceste legături fundamentale, care ar trebui să fie prezente în fiecare pagină a magazinului, sunt butoane grafice sau ancore text, furnizând legături de navigare de bază și dând certitudinea utilizatorului că se află în continuare în domeniul magazinului.

Într-o pagină Web, atunci când clientul are posibilitatea de a urma o legătură hipertext nu poate cunoaște cu certitudine unde va fi condus, câtă relevanță va avea pentru el informația disponibilă la celălalt capăt al legăturii și în ce mod informația spre care este condus se raportează la pagina curentă. Așadar, trebuie furnizat un anumit context al navigării.

Fiecare obiect de interfață (e.g.: butoanele, sigla organizației) are asociat un simbol. Oriunde este reprezentat într-o pagină Web obiectul în cauză trebuie folosit simbolul care îl reprezintă. Pentru a fi eficientă, interfața posedă un număr redus de simboluri, restrângându-se pe cât posibil la minim vocabularul de interacțiune cu utilizatorul.

Pentru a convinge utilizatorii că produsele disponibile în magazin sunt bună calitate și clar prezentate, proiectarea magazinului se va realiza cu aceeași atenție cu care s-ar realiza orice alt tip de document, folosindu-se aceleași standarde de editare și de design ireproșabil. Un magazin neglijent construit, având un design vizual slab, nu va inspira încredere clienților, mai ales în domenii precum comerțul electronic.

Stabilitatea funcțională în designul Web înseamnă asigurarea funcționării elementelor interactive ale site-ului în vederea exploatării eficiente a acestuia. Stabilitatea funcțională presupune două componente:

realizarea optimă a magazinului chiar de la prima versiune a acestuia, din momentul construirii și implementării;

menținerea unei bune funcționări a magazinului de-a lungul existenței sale.

Capitolul 9. Protecția datelor

Clientul trebuie să se simtă cât mai confortabil în magazinul virtual. Comanda prin poșta clasică este o afacere imensă la nivel mondial, dar vânzarile prin Internet reprezintă doar câteva procente din aceste sume. Cumpărarea și vânzarea prin intermediul rețelelor reprezintă o experiență nouă și neliniștitoare pentru cea mai mare parte a oamenilor. Pentru a mări confortul clientului în magazinul virtual, pot fi folosite modalități referitoare la desființarea mitului insecurității, oferirea de garanții care să nu dea loc la neînțelegeri, explicarea procesului de comandare a mărfii, imaginea firmei sa para ceva tangibil, utilizarea mărturiilor de la clienți.

9.1. Protocol criptografic SSL

Secure Sockets Layer (SSL) și Transport Layer Security (TLS), succesorul său, sunt protocoale criptografice care permit comunicații sigure pe Internet. Între SSL 3.0 și TLS 1.0 există anumite diferențe, dar protocolul rămâne aproximativ același. Termenul "SSL" folosit aici se poate referi la ambele protocoale, excepție făcând cazurile specificate explicit în context.

SSL (Secure Sockets Layer) este un acronim care reprezintă un protocol web dezvoltat de compania Netscape pentru a transmite fără risc documente private prin Internet. Pentru a cripta datele, SSL utilizează un sistem criptografic cu două chei: una publică, cunoscută de oricine, și una privată, secretă, cunoscută numai de destinatarul mesajului. Majoritatea browserelor web suportă SSL, și multe situri web utilizează protocolul de utilizator pentru a transmite informații confidențiale, cum ar fi numerele de carduri de credit. Prin convenție, URL-ul care are nevoie de o conexiune SSL începe cu https: (în loc de http:).

SSL asigură autentificarea endpoint-urilor și confidențialitatea comunicației prin Internet folosind criptografia. În utilizările uzuale, numai serverul este autentificat (identitatea sa este certificată), în timp ce clientul rămâne neautentificat; autentificarea mutuală presupune existența unei mecanism de distribuție a cheilor publice („PKI”) către clienți. Protocolul permite aplicațiilor de tip client-server să comunice securizat pentru a împiedica falsificarea autentificării prin metodele numite eavesdropping, tampering și message forgery.

SSL implică mai multe faze intermediare:

Verificarea mutuală de suportare a protocolului

Schimbarea cheilor prin intermediul criptării prin metoda cu chei publice și autenficare pe bază de certificate

Trasmiterea de trafic criptat prin sistemul cheilor simetrice

În timpul primei faze a protocolului, serverul și clientul negociază asupra algoritmului de criptare ce va fi folosit. Implementările curente permit următoarele posibilități:

criptografia bazată pe chei publice: RSA, Diffie-Hellman, DSA sau Fortezza;

pentru codări simetrice: RC2, RC4, IDEA, DES, Triple DES sau AES;

pentru funcții de hash unidirecțional: MD5 sau SHA.

TLS/SSL au o varietate de măsuri de securitate:

Numerotarea tuturor înregistrărilor cu numere de secvență în MAC-uri.

Folosirea unui mecanism de sumarizare a mesajului extins prin folosirea unei chei;

Protecție împotriva unor tipuri cunoscute de atacuri (incluzând atacuri de tip "man in the middle"), precum cele de tip forțare la folosirea a unor versiuni mai vechi (și mai puțin sigure) ale protocolului, sau versiuni mai puțin sigure ale algoritmilor de codare.

Mesajul care încheie handshake ("Finished") care trimite un hash all tuturor datelor schimbate între cele două părți.

Funcțiile pseudoaleatore împart datele în două jumătăți și le procesează cu doi algoritmi diferiți de hash (MD5 și SHA), și apoi face un XOR între ele. În acest fel se potejează și în cazul în care pentru unul dintre aceste două algoritmuri se găsește o vulnerabilite.

SSL rulează la un nivel care este inferior protocoalelor aplicație precum HTTP, SMTP și NNTP, dar care este superior protocoalelor de transport precum TCP sau UDP, care sunt componente ale suitei de protocale internet TCP/IP. Deși SSL poate adăuga securitate pentru orice protocol care folosește conexiuni statefull (precum TCP-ul), el este cel mai adesea folosit împreună cu HTTP, formând astfel HTTPS. HTTPS este utilizat pentru a securiza paginile web pentru aplicații gen comerț electronic. HTTPS folosește cerficatele cu chei publice pentru a verifica identitatea utilizatorilor finali.

Certificatul SSL nu este gratuit, dar cu siguranța este necesar pentru magazinul virtual care asigură siguranță clienților în vederea trimiterii datelor de contact și a tranzacțiilor online.

9.2. Elemente de securitate PayPal

PayPal este cea mai mare companie de procesare a plăților online la nivel global. În acest magazin am atașat acest serviciu, care prezintă elemente de securitate, oferindu-i clientului siguranța că datele cardului se vor trimite criptat și securizat. Cum recunoaște clientul ca acest serviciu este securizat? Prin următoarele elemente de securitate:

Adresa paginii PayPal începe cu „https://”

Figura 9.2.1. Element de securitate https://

În stânga adresei url, apare un lacăt. Acest lacăt este de două tipuri gri și verde. În acest caz, apare un lacăt gri și indică faptul că adresa saitului web a fost verificată și conexiunea dintre Firefox și pagina web este criptată pentru a preveni interceptările.

Figura 9.2.2. Element de securitate – lacăt gri

Certificatul SSL detalii tehnice – conexiune criptată, criptare de grad înalt (TLS_RSA_WITH_AES_128_CBC_SHA, CHEI PE 128 biți).

Figura 9.2.3. Certificat SSL

9.3. Elemente de securitate într-un magazin virtual

Un magazin securizat oferă încredere persoanelor care utilizează acest serviciu online. Elementele care indică acest lucru sunt:

Conexiune sexurizată la logare – protocolul https://

Termenii și condițiile – trebuie să fie lizibile și ușor de înțeles de oricine;

Confidențialitatea datelor;

Afișarea unui logo sau unei sintagme că magazinul este securizat (de ex. Bitdefender);

Compatibilitate SSL

PCI DSS și rezistența la atacuri ca XSS, CSRF, injecții SQL

Criptare de parole în baza de date

Cookie-uri de criptare

Blocarea încercărilor repetate de a recupera parole

Securitatea tranzacțiilor online

Capitolu 10. Testarea aplicației

10.1. Uploadarea fișierelor pe server

Pentru a uploada fișierele pe server am folosit un program open source XAMPP. Acesta conține serverele Apache, MySQL și FileZilla. Pentru a porni FileZilla Server se accesează din folderul XAMPP fișierul xampp-control.exe și se apasă Start.

Figura 10.1.1. Pornire server FileZilla

După ce a fost apăsat butonul de Start, va porni FileZilla Server. Conectarea la server se realizeză prin apăsarea butonului Admin unde va apărea urmatoare casetă:

Figura 10.1.2. Conectarea la FileZilla Server

Dupa apăsarea butonului de OK, se va deschide o nouă fereastră de unde se va face setarea in ceea ce privește IP-ul de unde sunt uploadate fișierele.

Figura 10.1.3. Setare privind IP-ul utlizatorului care uploadează fișierele pe server.

Următorul pas este adăugarea unui user.

Figura 10.1.4. Adăugare user.

Se va apăsa butonul OK și se va trece la următorul pas, acela de a uploada fișierele pe server.

Figura 10.1.5. Upload fișiere

După ce s-a realizat uplodul fișierelor prin apăsarea butoanelor Ok, se va deschide o fereastră web, unde se va introduce o adreră de tip : ftp://user:user@IP ce afișeză toate fișierele uploadate:

Figura 10.1.6. Fișierele uploadate pe server

10.2. Testare modul client