Sunteți pe pagina 1din 10

CUPRINSCUPRINS

Introducere.................................................................................2 1. Fiierele HTML..........................................................................3 2. Cum am realizat paginile..........................................................6 3. Fiierele PhP...............................................................................7 4. Crearea bazei de date i tabela cu EasyPhP............................8 5. Bibliografie................................................................................10

Introducere
Aceasta aplicaie este destinat femeilor care vor sa-si cumpere o pereche de pandtofi care este la moda. Aplicaia a fost realizata in HTML, PhP si MySQL. Proiectul este structurat pe 3 capitole: 1.Realizarea fiierului index.html si a link-urilor conexe. 2.Descrierea fiierelor adugare.php. 3.Ofera o imagine de ansamblu crerii bazei de date si tabele cu EasyPhP 3.0.

Fiierele HTML
Fiierul index.html este permite accesarea altor fiiere HTML, cu ajutorul barei de meniu ce se afla in partea de sus a pagini. Ca orice fiier HTML primul tag este <html>, iar ultimul tag</html>, astfel browserul va ti s interpreteze coninutul fiierului in funcie de tag-urile specificate. Urmatoarea partea component este antetul delimitat prin tag-urile <head> </head>. In interiorul acestui tag am deschis un nou tag,<title></title>, care permite definirea numelui de fereastr, care in cazul fiierului index.html este Main Page (img. 1). Este indicat ca orice site s aib definit un nume.

Img. 1 Ultima parte componenta este partea de coninutul propriu-zis, <body> </body>, in interiorul caruia se vor putea introduce elementele ce vor fi afiate in fereastr. In fiierele aplicaiei mele HTML, am folosit atributul style="background-color: #19A347;", care permite schimbarea culorii de fundal, in cazul de faa, culoarea #19A347.(vezi linia 5 din img. 2) A urmat adaugarea titlului, Magazin MGM Pantofi, care a fost introdus in tag-ul <h1></h1>. text align pentru alinierea la centru, si am folostit valoare font-family utilizand fontul Verdana.si culoarea albastru(blue)(vezi linia 7 img. 2)

Img. 2 In continuare am adaugat niste imagini cu tag-ul <img>, carora le-am particularizat marimea cu atributele width i height(vezi linia 8 din img. 2). In urmatoarele randuri s-a creat un tabel cu tag-ul <table></table>, cu 1 singur rand, definit de tag-ul <tr></tr>, si o coloana definit de tag-ul <td> </td> in care am introdus o scurta reclama.

Cu ajutorul tag-ului <font></font>, i a atributelor size i face, am putut modifica mrimea i stilul textului folosit. Totul pana aici se regaseste pe prima pagina a site-ului.(vezi img. 3)

Img3 In continuare va voi prezenta diferite pagini din site. Index.html In aceasta pagina se afla 2 imagini,o bara de meniu de unde avem acces la cealalte pagini si un buton HOME. Care are rolul de a ne aduce inapoi pe prima pagina,si controlul de la playerul de muzica care canta in timp ce utilizatorul isi cauta incaltamintea cea mai potrivita pentru ea. A doua pagina luata in functie de pozitia butonului care o deschide din bara de meniu Pantofi.html Aici este prezentat oferta magazinului MGM Pantofi . Linkul este format pe cuvantul Pantofi. Accesand site-al asta in fata utilizatorului apar categoriile de incaltaminte de care are magazinul in stoc:Sandale; Botine; Cizme; Pantofi cu toc. Facand click pe imaginea incaltamintelor se intra pe o alta pagina unde sunt prezentate mai multe modele din fiecare. Apoi utilizator allege care ii place cel mai mult. Dupa acesta trebuiesc comletate datele personale care sunt pe o alta pagina a site-ului adauga.html,care de altfel se poate accesa si din meniul principal(index.html).

Img4

Img. 5 Adauga.html Odata ajuns pe pagina Formular de contact utilizatorul completeaza campurile si datele sunt salvate intr-o baza de data.Daca intre timp vreun utilizator s-ar razgandi si ar vrea sa steraga comanda dj facuta si acesta este posibil cu ajutorul unui buton Stergere .

Img.6
2

Stergere.html Aceasta pagina face posibila ca un utilizator sa-si poata sterge comanda odata facuta introducand numele in campul si apasand pebutonul Stergere.

Img.7

Cum am realizat paginile

Adauga.html

Img. 8

Stergere.html

Img.9

Fiierele PhP
In proiectul meu se gasete un tip de fiier i anume de adugare. In fiierul adaugare.php, se citesc datele transmise de la formular, se afieaz aceste date i se transmit la tabela comenzi pentru adugarea inregistrrii. <?php $n=$_POST["nume"]; $p=$_POST["prenume"]; $o=$_POST["oras"]; $s=$_POST["strada"]; $nr=$_POST["numarul"]; $t=$_POST["telefon"]; $c=$_POST["produs"]; $obs=$_POST["obs"]; Efect: Citirea variabilelor transmise din HTML //conectare la server $con=mysql_connect('localhost','root','mysql'); Efect: se conecteaz la serverul MySQL //selectarea bazei de date $db=mysql_select_db('pantofu'); Efect: se selecteaz baza de date pantofu

$sql="INSERT INTO `pantofu`.`comanda` ( `nr_curent` , `nume` , `prenume` , `oras` , `strada` , `numar` , `telefon` , `produsul dorit` , `observatii` ) VALUES (NULL , '$n', '$p', '$o', '$s', '$nr', '$t', '$c', '$obs');"; Efect: datele introduse pe pagina Formular comanda.se vor salva in baza de data Pantofu in tabelul Comenzi si se vor afisa pe ecran.

Crearea bazei de date si tabela cu EasyPhP 3.0


Administrarea MySQL se poate face din script PhP sau folosind browser-ul i accesd aplicaia PhPMyAdmin scris in PhP. Interfaa grafic PhPMyAdmin permite att crearea bazelor de date, ct i generarea tabelelor i manipularea datelor din tabele. Astfel, folosind interfaa grafica, mi-am creat baza de date comanda, folosind exemplu din img. 10.

Img. 10

In baza de date pantofu, am generat tabela comenzi cu 9 cmpuri(vezi. Img. 11)

Img. 11 Pentru fiecare cmp al tabelei a trebuit s se specifice: numele cmpului tipul de dat suportat lungimea cmpului modificatori de cmp

Bibliografie
Giurgiu, L., Tehnici avansate de programare web:curs, Sibiu, Editura Academiei Forelor Terestre Nicolae Blcescu, 2009 http://www.w3schools.com/ - site cu tutoriale i exemple pentru programare Web