Proiectarea și implementarea unei licitații online folosind PHP și MySQL [302614]

UNIVERSITATEA “TITU MAIORESCU” DIN BUCUREȘTI

FACULTATEA DE INFORMATICĂ

LUCRARE DE LICENȚĂ

COORDONATOR ȘTIINȚIFIC:

Conf.univ.dr.ing. PÎRNĂU MIRONELA

ABSOLVENT: [anonimizat]

2013

UNIVERSITATEA “TITU MAIORESCU” DIN BUCUREȘTI

FACULTATEA DE INFORMATICĂ

Proiectarea și implementarea unei licitații online folosind PHP și MySQL

COORDONATOR ȘTIINȚIFIC:

Conf.univ.dr.ing. PÎRNĂU MIRONELA

ABSOLVENT: [anonimizat]

2013

Cuprins

I. Introducere 4

II. Tehnologii folosite 5

II.1. PHP 5

II.2. MySQL 10

II.3. Apache 12

II.4. HTML 14

II.5. XML 16

II.6. JavaScript 18

II.7. JQuery 24

II.8. CSS 26

II.9. AJAX 27

III. HTML 4 vs HTML 5 27

III.1. Trecerea de la HTML4 la HTML5 29

III.2. Diferențele dintre HTML4 și HTML5 30

IV. [anonimizat] 32

IV.1. [anonimizat] 32

IV.2. Securitatea serverului Apache 39

V. DESCRIEREA APLICAȚIEI 44

V.1. Structura tabelelor și relațiile dintre ele 60

VI. CONCLUZII 65

VII. BIBLIOGRAFIE 66

VIII. ANEXE 68

I. Introducere

În ultimii ani Internetul s-a dezvoltat foarte mult reușiind să ajute din ce in ce mai mult societatea în absolut toate domeniile care o înconjoară devenind aproape indispensabil pentru aceasta.

De la simplu fapt de a [anonimizat], [anonimizat], Internetul a devenit destul de complex. Astfel încât în prezent acesta poate fi utilizat pentru a lucra de acasă, a [anonimizat], a putea plătii facturi online și pentru a putea vinde anumite produse și nu numai.

[anonimizat] o soluție eficientă atât persoanelor care vor să achiziționeze ceva online din orice parte a țării, [anonimizat] a [anonimizat].

Aplicația poate fi utilizată de toate persoanele care știu să folosească Internetul și care vor și au nevoie de lucruri pe care le pot găsi foarte ușor de acasă.

Scopul acestei aplicații este de crea un site Web pe care se licitează online un anumit produs destinat vânzării.

[anonimizat], de pe orice computer care are acces la Internet.

În capitolul II vă prezint în mare tehnologiile pe care le am folosit pentru crearea acestei aplicații.

În capitolul III vă voi prezenta diferențele dintre HTML 4 și HTML 5 și modul în care s-a trecut de la HTML 4 la HTML 5.

[anonimizat]-[anonimizat].

[anonimizat].

Această temă reprezintă unul din limbajele de programare destul de simple utilizate în timpul facultății în domeniul tehnologiei web și anume limbajul PHP împreună cu sistemul de gestiune a bazelor de date MySql.

II. Tehnologii folosite

Pentru crearea acestei aplicații am folosit în principal următoarele tehnologii: PHP, MySQL și Apache. [anonimizat] 3 [anonimizat] 5minute poți avea cele 3 programe pe care dorești să le folosești fără a mai pierde timp prea mult pentru a le căuta.

Auxiliar am mai folosit următoarele tehnologii: HTML, XML, JavaScript, JQuery, CSS, AJAX.

II.1. PHP

PHP este un acronim care provine din "Hypertext Preprocessor" și este un limbaj de scripting, realizat și distribuit în sistem Open Source, special realizat pentru a dezvolta aplicații web, prin integrarea codului PHP în documente HTML. Sintaxa sa provine din C, Java și Perl și este ușor de învățat. Scopul principal al limbajului este acela de a scrie rapid pagini web dinamice și oferă suport pentru manipularea bazelor de date de tip SQL (dBase, Informix, MySQL, mSQL, Oracle, PostgreSQL, Solid, Sybase, ODBC etc.) cât și acces la sisteme hipermedia. De asemenea, PHP suportă încărcarea fișierelor de pe calculatorul client, operație cunoscută sub numele de upload (standard propus de E. Nebel și L. Masinter de la Xerox) și oferă suport pentru cookies (mecanism de stocare a datelor în navigatorul client pentru identificarea utilizatorilor, propus de Netscape).

Această aplicație este disponibilă, gratuit, pe Internet, pentru medii Unix cât și pentru medii Windows, integrându-se în severul Apache.

PHP însemna inițial Personal Home Page. Istoria PHP-ului începe la sfârșitul anului 1994, când Rasmus Lerdorf dezvoltă prima versiune, ca proiect personal. PHP-ul este făcut public în anul 1995 sub denumirea de Personal Home Page Tools, fiind considerat un analizor simplist ce puteau fi incluse în cadrul documentelor HTML, permițând contorizarea accesului la paginile. Analizorul a fost rescris la mijlocul aceluiași an și denumit apoi PHP/FI 2.0, unde FI era o alta aplicație scrisă de Rasmus Lenford. Ulterior a fost adăugat și suportul pentru bazele de date mSQL și astfel PHP/FI a început să aibă succes, fiind disponibil gratuit pe Web. Programatorii Zeev Suraski și Andi Gutmans rescriu analizorul PHP și noua aplicație formează nucleul versiunii PHP 3.0 care include o parte din vechile surse PHP/FI 2.0. Relativ recent, la începutul anului 2000, a fost făcută publică versiunea PHP 4.0, utilizând puternicul motor de scriptare Zend și oferind suport nu numai pentru serverul Apache ci și pentru alte servere Web. De asemeni, PHP 4.x oferă posibilitatea accesării documentelor XML via DOM.

PHP în versiunea curentă 5.2.8 lansat pe 08 decembrie 2008 și reprezintă un pachet puternic care oferă un limbaj de programare accesibil din cadrul fișierelor HTML, limbaj asemănător cu Perl sau C. Marea calitate și cel mai mare avantaj al limbajului PHP este posibilitatea de conexiune cu un număr mare de baze de date. A realiza o pagină web dinamică cu o bază de date este extrem de simplu. Cea mai folosită dintre ele este denumită MySQL.

Limbajul PHP are deasemenea suport pentru diverse servicii server, utilizând protocoale precum IMAP, SNMP, NNTP, POP3 și HTTP.

Acest limbaj de programare este folosit pentru a produce pagini web dinamice, în dezvoltarea lor și a aplicațiilor web. În mod normal acesta se folosește înglobat în codul HTML, dar de la versiunea 4.3.0 acesta se poate folosi și în mod „linie de comandă” (CLI), putând permite crearea de aplicații independente.

Paginile HTML sunt de tip “static”, adică informațiile prezentate în aceste pagini sunt identice pentru toți vizitatorii, fiind simple pagini de prezentare. Web-ul este însă dinamic, adică pentru unel pagini este nevoie să fie actualizate “în timp real”.

Dacă doi vizitatori, aflați în locuri diferite, accesează același site de joburi în același timp astfel încât unul dorește afișarea joburilor din domeniul economic, iar al doilea dorește afișarea joburilor din domeniul securității și sănătății în muncă, atunci serverul web va afișa pentru fiecare vizitator al site-ului pagina corespunzătoare cerințelor specificate. Acest lucru este posibil datorită tehnologiilor de tip client-server. Acest tip de tehnologii presupun stocarea datelor pe un server web și apoi afișarea acestora la cererea fiecărui vizitator, în forma dorită de acesta.

PHP este unul dintre cele mai importante limbaje de programare web open-source și server-side. Există versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare. Privind statisticile putem observa că este instalat pe aproximativ 20 de milioane de site-uri web și pe aproximativ 1 milion de servere web. Este disponibil sub Licenṭa PHP ṣi Free Software Foundation îl consideră a fi un software liber.

Limbajul PHP a fost inventat și dezvoltat de către Rasmus Lerdorf. În timp, odată cu creșterea numărului de utilizatori, dezvoltarea a fost preluată de o nouă entitate, numită The PHP Group (Grupul PHP).

PHP 5

Pe 13 iulie 2004 a fost lansat PHP 5, cu Zend Engine II, ce a adus și o orientare obiect mai pronunțată și suportând mai multe caracteristici ale acestui tip de programare.

PHP 5 aduce mai multe noutăți față de versiunea 4:

Suport îmbunătățit pentru OOP

Introduce extensia PDO – PHP Data Objects, care definește o modalitate facilă și consistentă de accesare a diferitelor baze de date

Imbunătățiri de performanță

Suport îmbunătățit pentru MySQL și MSSQL

Suport nativ pentru SQLite

Suport SOAP integrat

Iteratori pentru date

Controlul erorilor prin tratarea de excepții

La sfârșitul lui 2007 doar versiunea 5.x mai era întreținută, deoarece în data de 13 iulie 2007 (exact la 3 ani după lansarea PHP5), PHP Group a anunțat că PHP4 va fi scos din uz pe 31 decembrie 2007, deși prognozează că anumite upgrade-uri de securitate se vor oferi până pe 8 august 2008. Dezvoltarea la PHP 6 începuse deja în decembrie 2007 și urmează să fie oferit odată cu scoaterea din uz a PHP4.

PHP 6

PHP 6 – are următoarea agendă de îmbunătățiri și modificări:

îmbunătățirea suportului pentru Unicode

retragerea definitivă a unor funcții ca register_globals și magic_quotes, și a variabilelor tip $HTTP_*_VARS

var va fi un alias pentru public, și folosirea lui va ridica o atenționare E_STRICT.

suport pentru int pe 64 biți.

taguri tip ASP sunt retrase definitiv.

XMLReader, XMLWriter, Fileinfo vor face parte din distribuția principală

următoarele pachete au fost scoase din distribuția principală: Freetype1, GD1, mime_magic

funcția ereg() nu mai este disponibilă

instanțierea obiectelor prin referință (& new Obiect()) generează o eroare E_STRICT.

erorile tip E_STRICT sunt incluse în E_ALL.

adăugarea instrucțiunii goto permite salturi la un alt bloc de comenzi.

namespace, import, și goto devin cuvinte rezervate.

accesarea caracterelor într-un șir (string) se face prin operatorul []. {} se scoate din uz ( ex: $str[42] funcționează, $str{42} nu funcționează)

constantele FILE_BINARY și FILE_TEXT devin disponibile pentru folosirea în funcții de citire/scriere fișiere

foreach va suporta array multi dimensional: foreach($a as $b => list($c, $d))

pentru operatorul ternar expresia pentru valoarea true nu mai este obligatorie ($a = $s ?: ‘b’; // returns $a = $s;)

opțiunea safe_mode a fost înlăturată.

operatorul and a fost înlăturat.

funcția microtime() returnează un float.

zend.ze1_compatibility_mode a fost înlăturat

Din punct de vedere al popularității, PHP-ul este unul din cele mai folosite limbaje de programare server-side, conform unui studiu efectuat de Netcraft în aprilie 2002, apărând pe 9 din cele 37 milioane de domenii cercetate în studiu. De asemenea, există un grafic al creșterii folosirii PHP-ului pe site-ul oficial.

Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor caracteristici :

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

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

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

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

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

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

Din punct de vedere al utilizării, PHP este simplu de utilizat, fiind un limbaj de programare structurat, sintaxa limbajului fiind o combinație între limbajul C, Perl și Java. Datorită modularității sale poate fi folosit și pentru a dezvolta aplicații de sine stătătorare, de exemplu în combinație cu PHP-GTK sau poate fi folosit ca Perl sau Python în linia de comandă. Probabil una din cele mai importante facilități ale limbajului este conlucrarea cu majoritatea bazelor de date relaționale, de la MySQL și până la Oracle, trecând prin MS Sql Server, PostgreSQL, sau DB2.

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

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

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

PHP România

PHP România este comunitatea oficială de programatori de PHP din România. Grupul a fost înființat în 2002, ajungând să cuprindă peste 18.000 de membrii înscriși oficial în 2011. Comunitatea oferă suport tehnic gratuit tuturor membrilor prin intermediul forumului de discuții și prin intermediul blogurilor membrilor activi ai comunității.

II.2. MySQL

MySQL este un server de baze de date disponibil gratuit, cu sursa deschisă (open-source) care oferă fiabilitate și avantaje reale. A fost dezvoltat de firma suedeză MySQL AB.

În prezent MySQL este cel mai popular SGBD (Sistem de gestiune a bazelor de date) open-source, folosit de mai bine de 8 milioane de utilizatori, de la corporații mari până la mici aplicații, toți aleg această variantă ușor de utilizat, fiind o componentă cheie a stivei LAMP (Linux, Apache, MySQL, PHP).

Administrarea bazei de date se realizeăză folosind utilitare care lucrează în linia de comandă. Cel mai important utilitar este mysql, un shell interactiv pentru controlul și interogarea bazei de date. Utilitarele rulează cel mai bine pe sistemul Linux, platformă pe care MySQL a fost dezvoltat inițial. Alte două utilitare cu sursă deschisă, oferite pe platformă Windows, care oferă un set de comenzi de administrare sunt MySqlManager, un utilitar de interogare în mod grafic similar cu mysql și WinMySQL admin, o consolă pentru administrarea detaliilor configurării lui MySQL. Recent cea mai utilizată metodă pentru serverele care au instalat panoul de comandă CPANEL este PHPMyAdmin, care oferă o interfață grafică pentru manipularea datelor din MySQL.

MySQL realizează cu ușurință importarea diverselor baze de date și exportarea sub forma fișierelor sql. Tranzacțiile nu sunt parte a tabelelor implicite(ISAM) ale lui MySQL, dar sunt incluse două tipuri noi de tabele Berkley DB(BDB) și InnoDB care au fost dezvoltate de alte firme.

MySQL operează în bază unui model client/server. Orice mașină care dorește să proceseze interogări asupra unei baze de date MySQL trebuie să ruleze MySQL server(mysqld), care este responsabil de tot traficul de tip intrări/ieșiri (incoming/outgoing) cu bază de date. Modelul de securitate folosit de MySQL se bazează pe nume de utilizator, parolă, nume server (hostname) sau adresă de IP și privilegii, fiind similar celui generic folosit de sistemele Unix. Prin privilegii se înțeleg în cazul MySQL operațiunile ce vor fi permise asupra bazei/bazelor de date, tabelelor sau indecșilor, cum sunt de exemplu SELECT, INSERT, UPDATE, DELETE, CREATE, DROP.

Datele sunt obiectul celor mai multe operații de prelucrare, iar sistemele de gestiune a bazelor de date furnizează cele mai complexe și puternice facilități pentru lucrul cu datele. PHP include o bibliotecă de funcții care furnizează o interfață cu sistemul MySQL de gestiune a bazelor de date. Folosind aceste funcții, un program PHP poate obține accesul la datele rezidente într-o bază de date MySQL și le poate modifica.

O bază de date (în cazul nostru MySQL) este un program ce poate stoca o cantitate foarte mare de informații și o poate organiza într-un format accesibil în mod direct sau de către un alt program (in cazul nostru PHP).

MySQL este un SGBD foarte rapid, care poate lucra cu baze de date de mari dimensiuni. MySQL permite lucru cu câmpuri numerice, dată și șir.

Caracteristicile cele mai importante sunt:

• Performanță sporită- folosește cu ușurință mai multe procesoare, este multi-threaded folosind threaduri kernel.

• Ușor de utilizat, rapid și flexibil

• Securitate și flexibilitate – MySQL oferă privilegii și parole pentru a asigura securitatea și flexibilitatea. Parolele sunt sigure deoarece tot traficul parolat este criptat atunci când ne conectăm la server.

Afișarea interogării în execuție și rularea ei pe baza de date se face cu ajutorul unor aplicații separate. Cele mai bune două instrumente sunt:

• Monitorul MySQL – un instrument cu linie de comandă pentru interacționarea cu serverul MySQL;

• phpMyAdmin, o interfață MySQL bazată pe PHP.

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

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

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

MYSQL poate să ruleze pe mai mult de 20 platforme incluzând Linux, Windows, OS/X, HP-UX, AIX, Netware, oferindu-ți flexibiliatatea de care ai nevoie pentru a avea controlul asupra bazei de date.

MySQL este organizat din două componente:

MySQL server: este considerat un program care se ocupă cu salvarea și organizarea bazei de date. Este considerat "the heart" pentru MySQL

MySQL client programs: Programe client, care oferă interfețe prin care se pot emite "statement"- uri SQL și posibilitatea de a afișa rezultate.

Instalarea acestui server de baze de date nu presupune și instalarea automată unui tool grafic care să ușureze controlul clientului asupra serverului. La instalare MySql pune la dispoziție un tool care funcționează de la linia de comandă și se numește MySql Command Line Client. Cel mai utilizat tool grafic pentru MySQL este MySQL-Front. Permite coordonarea și administrarea bazelor de date prin intermediul unei interfețe Window.

II.3. Apache

Apache este un server HTTP de tip open source pentru Unix, Microsoft Windows și alte platforme. Apache joacă un rol cheie în creșterea World Wide Web și continuă să fie cel mai popular web server, servind ca platformă de referință pentru celelalte servere web, care ajută în dezvoltarea webului, fiind folosit în prezent în circa 50 % din paginile web.

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

Serverul HTTP Apache este dezvoltat și menținut de o comunitate open de developeri, sub semnătura Apache Software Foundation.

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

Autorul pretinde că a fost ales un astfel de nume pentru a fii original, dar de fapt cea mai răspândită informație este că serverul este constituit dintr-o serie de schimbări în cel mai popular server HTTP din acel timp, NCSA HTTPd 1.3 și este prin urmare "a patchy" server. Totuși, pe site-ul oficial al serverului se spune că numele "Apache" a fost ales din respect pentru tribul American Indian al apache-ilor (Inde'), binecunoscut pentru strategiile superioare folosite în război. Cuvântul apache este numele apașilor, triburi de amerindieni.

În acel timp Apache era singura alternativă open source viabilă, la serverul web Netscape (cunoscut actual ca web serverul Sun Java System). De atunci a fost dezvoltat și concurează cu servere HTTP din Unix în ceea ce privește funcționalitatea și performanța. Din aprilie 1996 este cel mai popular server HTTP de pe Internet. Până în februarie 2006 Apache a fost folosit de 68% din site-urile de web. Cu toate că în noiembrie 2005 a început să piardă din cota de piață, în aprilie 2008 Apache stătea încă la baza a peste 50 % din siturile web.

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

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

Apache este suportat de diferite GUI, ce permite o configurare mai ușoară a serverului.

Serverul Apache suportă o mare varietate de module care îi mărește funcționalitatea. Modulele variază de la server side programming și până la scheme de autentificare. Câteva limbaje suportate sunt: mod_perl, mod_python, Tcl și PHP. Ca alte module putem enumera : SSL si TLS support (mod_ssl), un modul proxyun, modul de rescriere URL (cunoscut ca un motor de rescriere mod_rewrite), custom log files (mod_log_config) și suport de filtrare (mod_include și mod_ext_filter). Cu ajutorul serverului Apache care este virtual hosting (găzduire virtuală) ai posibilitatea de a găzdui simultan mai multe situri pe același server.

Caracteristicile serverului Apache:

Freeware

Ușor de instalat

Ușor de configurat

Versiune precompilată pentru orice fel de platformă

Foarte rapid

Oferă suport pentru autentificarea userilor

Permite implementare “multihomed” și “virtual servers”

Securitate mai bună decât alte servere WEB

II.4. HTML

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator) și este codul care stă la baza paginilor web. Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.

Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta /> browserul interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea între litere mici și mari). Pagina principală a unui domeniu este fișierul index.html respectiv index.htm Această pagină este setată a fi afișată automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afișată pagina www.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut="valoare"> … </eticheta>.

Componenta unui document HTML este:

1. versiunea HTML a documentului

2. zona head cu etichetele <head> </head>

3. zona body cu etichetele <body> </body> sau <frameset> </frameset>

HTML-ul nu este un limbaj case sensitiv (nu face deosebirea între litere mici și mari).

HTML ajută la prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat prin utilizarea unui agent HTML ,una stfel de software fiind browse web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare variază de la decorațiuni minore ale textului, de exemplu: cum ar fi specificarea faptului că un anumite cuvinte trebuie subliniate sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).

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

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

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

Elementele de marcare

Marcare structurală. Descrie scopul unui text.

De exemplu:

<h1>Fotbal</h1>

Direcționează browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structurală nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul în care acestea sunt afișate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine și mai mari decât restul textului. De notat că "h1" este folosit doar o singură dată per pagină deoarece cu el este marcat titlul ei.

Marcare pentru prezentare. Descrie cum apare un text, indiferent de funcțiile sale. De exemplu:

<strong>îngroșat</strong>

Va afișa textul "îngroșat" cu litere groase, aldine.

Marcare pentru hiperlink. Leagă părți ale unui document cu alte documente. De exemplu:

<a href="http://ro.wikipedia.org/">Wikipedia Românească</a>

Va reda Wikipedia românească ca hiperlink către un URL specificat.

Elemente speciale (widget). Creează obiecte, cum ar fi butoanele și listele.

Doar marcatorii de prezentare (împreună cu foile de stiluri – CSS) determină cum conținutul din interiorul marcatorului va fi prezentat. Ceilalți marcatori spun browserului ce obiecte să redea sau ce funcții să execute.

II.5. XML

XML (Extensible Markup Language ) este o formă condensată a Standard Generalized Markup Language (SGML) care permite dezvoltatorilor să creeze etichete particularizate, care oferă flexibilitate în organizarea și prezentarea informațiilor. XML este format de fapt din două metalimbaje, ambele descrise în același document. Primul este un set de reguli pentru realizarea de documente XML construite corect, în timp ce al doilea este un set de reguli pentru realizarea unei definiții a tipului documentului XML, sau DTD (Document Type Definition), care permite ca structura documentului XML să se supună unor constrângeri și să fie validată față de acele constrângeri.

După cum sugerează și numele, este un sistem extensibil de marcare, adică, mai pe înțelesul tuturor, este un sistem de marcare similar cu HTML, doar că este mult mai bun și mai dinamic, diferența esențială fiind că tagurile nu sunt definite, programatorul fiind liber să experimenteze.

Meta-limbajul XML este o simplificare a limbajului SGML (din care se trage și HTML) și a fost proiectat în scopul transferului de date între aplicații pe internet, descriere structură date.

XML are o natură duală fiind:

• un metalimbaj care permite descrierea de noi structuri de documente și vocabulare;

• un limbaj utilizat ca să exprime acea structură și acel vocabular în cazul unui document.

Definițiile tipului documentului XML (DTD-urile) descriu instanțe ale limbajului XML, numite uneori vocabulare XML. Dcumentele XML sunt create utilizând acele limbaje.

XML este un limbaj cu etichete și atribute asemănător cu HTML, dar un HTML transformat atât de mult, încât nu mai poate fi recunoscut. XML este mult mai structurat decât HTML. În timp ce procesoarele HTML acceptă în mod curent cod incorect și diform și încearcă să îi dea sens pe ecran, XML trebuie să se oprească atunci când găsește o eroare fatală, care poate fi aproape orice tip de eroare.

Caracteristicile lui XML

• XML este sensibil la tipul literelor deoarece majusculele nu reprezintă un concept universal

• XML este foarte precis cu privire la imbricarea corectă a etichetelor

• XML nu este bine protejat împotriva recursivității

• XML obligă la închiderea fiecărei etichete, chiar și a etichetelor vide

• XML necesită încadrarea valorilor atributelor fie între apostrofuri, fie între ghilimele

• XML recunoaște mai multe limbi

Limbajul XML a fost proiectat astfel încât să fie transparent la utilizare pentru a putea fi înțeles și utilizat cu ușurință. Descrierile XML succinte sau complicate din majoritatea documentelor sunt greu de înțeles în efortul de a fi explicit într-un mod în care programatorii să îl poată translata cu ușurință în aplicații care să funcționeze.

XML este acum și un model de stocare a datelor nestructurate și semi-structurate în cadrul bazelor de date native XML.

Datele XML pot fi utilizate în limbajul HTML, permit o identificare rapidă a documentelor cu ajutorul motoarelor de căutare. Cu ajutorul codurilor javascript, php etc. fișierele XML pot fi înglobate în paginile de internet, cel mai elocvent exemplu este sistemul RSS care folosește un fișier XML pentru a transporta informațiile dintr-o pagină web către mai multe pagini web.

Avantaje:

1.extensibilitate (se pot defini noi indicatori dacă este nevoie)

2.validitate (se verifică corectitudinea structurală a datelor )

3.oferă utilizatorilor posibilitatea de a-și reprezenta datele într-un mod independent de aplicație.

4.XML este simplu și accesibil (sunt fișiere text create pentru a structura, stoca și a transporta informația)

5.poate fi editat, modificat foarte ușor (necesită doar un editor text simplu precum notepad, wordpad etc.)

II.6. JavaScript

Firma Netscape Communications, din dorința de a extinde funcționalitatea popularului său program de navigare Netscape Navigator, a dezvoltat un limbaj de programare, astfel încât programele scrise în acest limbaj să poată fi incluse în cadrul paginilor Web. Inițial Netscape și-a denumit noul limbaj LiveScript, iar apoi, pentru a profita de renumele obținut de limbajul de programare Java, denumirea a fost schimbată în JavaScript.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucât operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte încastrate (embedded objects) în alte aplicații.

În general, aplicațiile, indiferent cât de bine sunt realizate, nu pot satisface cerințele tuturor utilizatorilor, motiv pentru care acestora li se pune la dispoziție un limbaj simplu de programare cu ajutorul căruia pot să creeze extensii ale aplicației. De obicei, aceste miniprograme nu sunt compilate, ci interpretate linie cu linie în timpul rulării aplicației. Cel mai obișnuit exemplu de astfel de microaplicații îl reprezintă macro-urile din Microsoft Office. Aceste microaplicații poartă denumirea generică de script-uri, iar colecția de comenzi și instrucțiuni care pot apărea în cadrul unui script poartă denumirea de limbaj de scriptare sau limbaj de tip script.

JavaScript este un limbaj de scriptare a cărui sintaxă seamănă, într-o oarecare măsură, cu cea a limbajelor C, C++, Pascal, Java sau Delphi, dar care are anumite particularități care îl fac să se deosebească esențial de orice alt limbaj de programare.

Pentru ca programul de navigare să poată executa instrucțiuni JavaScript, el trebuie configurat în așa fel încât să nu ignore astfel de instrucțiuni. Totodată programul de navigare trebuie să recunoască instrucțiunile JavaScript; Netscape Navigator oferă suport pentru JavaScript începând cu versiunea 2.0, în timp ce Internet Explorer oferă acest suport începând cu versiunea 3.0. Limbajul JavaScript este un limbaj bazat pe obiecte, adică un limbaj orientat obiect care conține obiecte predefinite.

De asemenea JavaScript este un limbaj proiectat astfel încât să reacționeze în momentul apariției unui eveniment.

Totodată JavaScript este un limbaj sigur în sensul că, în principiu, nu pot fi scrise microaplicații care să aibă acțiuni dăunătoare asupra calculatorului pe care este vizualizată pagina Web. De exemplu, nu va putea fi scris un script care să scaneze discul și să șteargă anumite fișiere. Totuși există posibilitatea păstrării anumitor parole introduse de către utilizator, ceea ce ar putea deranja pe unii dintre aceștia. Din această cauză majoritatea programelor de navigare oferă o opțiune a cărei activare nu permite executarea script-urilor.

În sfârșit, JavaScript este un limbaj independent de platforma pe care rulează, adică un același script va putea fi executat sub Unix, MacIntosh sau Windows fără a fi necesară prezența unui emulator sau efectuarea anumitor modificări.

Elementele limbajului JavaScript pot fi:

• Numerele care pot fi: numere întregi și numere reale;

• Boolean ce are valorile true și false;

• null este o valoare nedefinită;

• undefined: o proprietate de nivel superior poate avea valoarea undefined;

• NaN: Not a Number;

• String ‘text’. Pentru orice literal de tip string se utilizează metodele clasei String;

• Vectori și elemente de tip Obiect .

JavaScript este un limbaj “dinamic-tipizat” sau “slab-tipizat” (loosely-typed), ceea ce înseamnă că nu trebuie să specific tipul unei variabile când o declar fiindcă ea va fi convertită automat dacă va fi nevoie în timpul execuției scriptului. O variabilă se poate declara în două moduri:

• atribuindu-i o valoare: x=124

• cu ajutorul cuvântului rezervat var: var x=124

O variabilă JavaScript căreia nu i-a fost atribuită o valoare va avea valoarea undefined. Rezultatul evaluării unei variabile depinde de modul în care a fost declarată, astfel:

– dacă variabilei nu i-a fost atribuită o valoare și a fost declarată fără var rezultatul evaluării variabilei va fi o eroare runtime.

– dacă variabilei nu i-a fost atribuită o valoare, dar a fost declarată folosind cuvântul rezervat var rezultatul evaluării variabilei va fi undefined sau NaN în context numeric.

Variabilele, definite în afara funcțiilor, se numesc variabile globale și ele sunt accesibile oriunde în documentul curent. Variabilele, definite în interiorul funcțiilor, se numesc variabile locale și ele sunt vizibile numai în interiorul funcțiilor în care sunt declarate.

Sintaxa limbajului JavaScript este dezvoltata pe baza limbajului C/C++, operatorii, instrucțiunile decizionale si cele de ciclare fiind similare. JavaScript oferă clase predefinite.

Clasa String

Conține un șir de caractere. Este creat cu ajutorul constructorului String, este diferit de p variabila sau constanta string.

Se poate converti orice valoare intr-un obiect String folosind funcția String(obiect)

Proprietăți:

constructor – specifică funcția care creează prototipul obiectului

length – întoarce numărul de caractere din șir

prototype – permite adăugarea de proprietăți la obiectul String

Clasa Date

Permite manipularea datei și timpului.

Exemple de metode:

getDate() – întoarce valoarea datei obiectului

getDay() – întoarce ziua

getMonth – întoarce luna

getYear – întoarce anul (2 cifre)

getHours – întoarce ora obiectului Date

getMinutes – întoarce minutele obiectului Date

getSeconds – întoarce secundele

setMonth – setează luna

setDay – setează ziua

setHours – setează ora

setMinutes – setează minutele obiectului Date

setSeconds – setează secundele

toString – întoarce data convertită în string

Casete de dialog

Casetele de dialog sunt ferestre cu unul sau mai multe butoane, ce permit atenționarea utilizatorului, solicitarea unei confirmări sau a unei valori.

alert(text) – afișează o casetă de dialog cu textul: text și un buton OK

confirm(text) – afișează o casetă de dialog cu textul: text și două butoane Ok și Cancel

prompt(text [inițial]) – afișează o casetă de dialog cu unt control textbox în care utilizatorul poate introduce text, și butoane Ok și Cancel. Textul este inițializat cu valoarea: inițial, dacă nu se specifică o valoare inițială, cu valoare: undefined.

Evenimente:

OnLoad – are loc la terminarea încărcării unei ferestre sau a tuturor cadrelor dintr-un <FRAMESET>

OnSumbit – are loc înainte de expedierea datelor dintr-o formulă. Dacă handlerul întoarce: false, expedierea este anulată, iar controalele formei sunt reinițializate

OnClick – are loc când se face click pe un obiect al formei. Dacă handlerul întoarce false, în funcție de tipul controlului, se execută o acțiune implicită.

buton – nu se execută nimic

radio și checkbox – nu se selectează nimic

buton Submit – datele din formular nu sunt trimise

buton Reset – formularul nu este reinițializat

Ferestre

Obiectul window

Reprezintă o fereastră navigator sau un cadru, reprezentând nivelul superior pentru fiecare obiect document, Location și History.

Metoda Open

Deschide o fereastră de navigare, întoarce un obiect window asociat ferestrei.

[var_window = ] window.open(<URL>,<Nume>,[<Caracteristici>])

var_window – obiect fereastră

URL – resursa ce va fi încărcată în fereastră

Nume – numele ferestrei

Caracteristici – o listă de proprietăți ale ferestrei ce va fi deschisă (proprietăți ale obiectului window):

menubar – (boolean) Specifică dacă fereastra are bară de meniu

tootlbar – (boolean) Fereastra are toolbar

status – (boolean) Fereastra are bară de stare

scrollbars – (boolean) Fereastra are bare de scroll dacă documentul depășește dimensiunile ferestrei

resizable – (boolean) Permite redimensionarea ferestrei

width/height – dimensiunile (în pixeli ale ferestrei)

Obiectul Math

Conține constante și funcții matematice predefinite. Nu este necesară crearea lui.

Proprietăți:

E – întoarce numărul E (Euler)

LN2 – întoarce logaritm natural din 2

LN10 – întoarce logaritm natural din 10

PI – întoarce numărul PI

Metode:

abs(x) – valoarea absolută a lui x

sin(x),cos(x),tan(x) – funcții trigonometrice

asin(x),acos(x),atan(x) – funcții trigonometrice(arc)

exp(x) – funcție exponențială

log(x) – logaritm natural

random() – număr aleator între 0 și 1

max(x,y)/min(xy) – întoarce maximul/minimul dintre x și y

sqrt(x) – radical

Obiectul Array

Un obiect array conține un set de valori indexate. Indexul începe de la valoarea 0.

Un obiect array este creat cu instrucțiunea new var sir= new Array(20);

var zile=new Array("Luni","Marți","Miercuri","Joi","Vineri","Sâmbăta","Duminica");

Atribuirea elementelor tabloului:

sir[0]=10;

sir[1]=100;

sir[2]=1000;

Metode:

length – întoarce numărul de elemente ale tabloului;

join() – întoarce un șir obținut prin concatenarea tuturor elementelor tabloului;

concat() – întoarce un Array obținut prin concatenarea a două șiruri;

reverse() – întoarce șirul inversat;

slice() – întoarce o parte specificată a șirului;

sort() – întoarce șirul sortat

II.7. JQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătății procese precum traversarea arborelui DOM în HTML, managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript". Biblioteca în ianuarie 2006, la New York BarCamp de John Resig.

Acesta este în prezent dezvoltat de o echipa de dezvoltatori condusă de Dave Methvin. Utilizat de peste 55% din cei 10.000 de majoritatea site-urilor vizitate, jQuery este biblioteca JavaScript cele mai populare în uz astăzi. jQuery a fost de asemenea utilizat în MediaWiki începând cu versiunea 1.16.

Biblioteca jQuery este un singur fișier JavaScript, care conține toate DOM sale comune, eveniment, efecte, și funcțiile Ajax. Acesta poate fi inclus într-o pagină web prin conectarea la o copie locală, sau la una din mai multe exemplare disponibile de pe serverele publice.

jQuery este un software gratuit, open source, sub licența MIT. jQuery prevede, de asemenea, capabilități pentru dezvoltatori pentru a crea plug-in-uri pe partea de sus a bibliotecii JavaScript. Acest lucru permite dezvoltatorilor să creeze abstracțiuni pentru low-nivelul de interacțiune și de animație, efecte avansate și la nivel înalt.

Caracteristici

jQuery se poate folosi pentru a rezolva următoarele probleme specifice programării web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle, un proiect născut din jQuery

parcurgerea și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli)

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

extensibilitate prin plug-in-uri

utilități – versiunea browser-ului, funcția each

Multi-Browser (a nu se confunda cu cross-browser) sprijin.

metode de compatibilitate, care sunt disponibile în browsere nativ moderne

Modul cel mai popular și de bază, de a introduce o funcție jQuery este de a folosi funcția gata ().

jQuery poate fi utilizat prin funcția de $, care este o metodă de fabrică pentru obiectul jQuery. Aceste funcții, comenzi adesea numite, sunt legate ca toate acestea să întoarcă obiecte jQuery. Acestea sunt funcții de utilitate, care nu lucrează la obiect jQuery în sine.

De obicei, accesul la și manipularea mai multe noduri DOM începe cu funcția de $ fiind numit, cu un selector CSS șir, ceea ce duce la un obiect de referențiere jQuery elemente care se potrivesc în pagina HTML. Acest set de nod poate fi manipulat prin apelarea unor metode de instanță pe obiect jQuery, sau pe noduri în sine.

Pe lângă accesul la nodurile DOM prin ierarhia obiect jQuery, este de asemenea posibil pentru a crea elemente noi DOM dacă un string transmis ca argument la $ () arată ca HTML.

Metodele prefixate cu $ sunt metode de cartier sau care pot afecta proprietățile și comportamentul la nivel mondial.

jQuery plug-in-uri

Datorită arhitecturii jQuery, dezvoltatorii pot utiliza alte constructe în crearea de coduri plug-in pentru a extinde funcționalitatea. În prezent, există mii de plug-in-uri jQuery disponibile pe internet, care acoperă o gamă largă de funcționalități, cum ar fi: Ajax, servicii web, datagrids, liste dinamice, XML și XSLT unelte, trageți și plasați, evenimente, manipulare cookie, ferestre modale, chiar și un jQuery bazat pe Commodore emulator 64.

O sursă importantă de jQuery plug-in-uri este sub-domeniu al site-ului proiectului jQuery. Cu toate acestea, într-un efort de a scăpa site-ul de spam, plugin-urile din acest subdomeniu au fost șterse accidental în decembrie 2011. Noul site va include un depozit de GitHub găzduit, care va necesita dezvoltări pentru a retrimite plugin-uri lor și pentru a se conforma la cerințele de depunere de noi. Nu există alternativă plug-in în motoarele de căutare ca jQuery. Pagina tutoriale pe site-ul jQuery are o listă de link-uri către secțiunea jQuery plug-in-tutoriale sub.

QUnit este un cadru de automatizare de testare utilizat pentru a testa proiectul jQuery. Echipa de jQuery, s-a dezvoltat ca o bibliotecă în casă, unitate de testare. Echipa jQuery îl folosește pentru a testa codul său și plugin-uri, dar se poate testa orice generic cod JavaScript, inclusiv cod server-side JavaScript.

Începând din 2011, echipa de testare jQuery folosește QUnit cu TestSwarm pentru a testa fiecare versiune codebase jQuery.

II.8. 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. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.

CSS (Cascading Style Sheets) sau foi de stil în cascadă, reprezintă un mecanism simplu de a adăuga elemente de stil (tipuri de caractere, culori, aliniere, spațiere etc.) unui document web.

Tag-urile HTML au avut inițial rolul de defini conținutul unui document, de a face distincția între titlul unui paragraf (definit prin tag-urile <Hn>), conținutul paragrafului (definit prin tag-ul <P>), tabele (definite prin tag-ul <TABLE>) etc. Aspectul și modul de afișare al unui site cădeau în sarcina browserului, fără a fi folosite niciun fel de tag-uri de formatare.

Dar cum cele două principale browsere – Internet Explorer și Netscape Navigator – au continuat să adauge noi tag-uri și atribute limbajului HTML original, a devenit tot mai dificil să creezi un site în care conținutul documentului HTML să fie clar separat de modul său de prezentare.

Pentru a rezolva această problemă, consorțiul W3C, responsabil de standardizarea specificațiilor HTML, a creat stilurile și le-a adăugat specificațiilor HTML 4.0.

În prezent, marea majoritate a browserelor suportă CSS.

CSS specifică o schemă a priorităților pentru a determina care regulă de stil are prioritate atunci când există mai multe reguli aplicate aceluiași element. Este vorba de așa-numita prioritate în cascadă, prioritatea fiind calculată conform anumitor reguli, astfel încât rezultat să fie predictibil.

Informațiile de stil pot fi prezentate sub diferite forme, astfel putem deosebi:

stiluri inline, definite în interiorul unui element HTML

foi de stil interne, definite în interiorul elementului <HEAD>

foi de stil externe, definite într-un fișier cu extensia .css

Prioritatea cea mai mare o are stilul inline, după care, din punctul de vedere al priorității, urmează stilul definit în interiorul elementului <HEAD> și, în cele din urmă, stilul din foia externă. Prin urmare, o definire a stilului inline va prevala în fața stilului intern care, la rândul său, va prevala în fața stilului extern.

Propietățile de stil CSS oferă soluții a cel puțin două probleme cu care se confruntă creatorii documentelor HTML:

eliminarea redundanței stilurilor introduse în paginile web prin intermediul unor

marcatori;

îmbogățirea în termeni de design a paginilor Web.

II.9. AJAX

Ajax (sau AJAX), prescurtare pentru Asynchronous JavaScript and XML, este o tehnică de programare pentru crearea de aplicații web interactive. Intenția este să facă paginile web să devină mai rapide și deci mai acceptate, prin schimbul în fundal al unor cantități mici de date cu serverul, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta are ca scop creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web.

Ajax nu este o tehnologie în sine. Termenul este folosit pentru definirea aplicațiilor web ce folosesc un ansamblu de tehnologii:

HTML sau XHTML pentru structura semantică a informațiilor;

CSS pentru prezentarea informațiilor;

Javascript pentru interactivitate, pentru procesarea informațiilor prezentate;

Obiectul XMLHttpRequest pentru schimbul și manipularea informațiilor într-o manieră asincronă cu server-ul web;

XML este folosit de obicei pentru transferarea datelor între server și client, deși orice format funcționează, inclusiv HTML preformatat, text simplu etc.

III. HTML 4 vs HTML 5

HTML4 extinde HTML cu mecanisme pentru foi de stil, scripturi, frameuri, încapsulare obiecte, suport îmbunătățit pentru text de la dreapta la stânga și direcții mixte, tabele mai complexe, și îmbunătățiri ale formelor, oferind accesibilitate îmbunătățită pentru oamenii cu dizabilități.

HTML 4.01 este o revizie a HTML 4.0 care corectează erori și face anumite schimbări de la revizia precedentă.

Această versiune a HTML-ului a fost proiectată cu ajutorul experților în domeniul internaționalizării, în așa fel ca documentele să poată fi scrise în toate limbile și să fie transportate cu ușurință în jurul lumii. Aceasta s-a obținut prin încorporarea [RFC2070], care se ocupă cu internaționalizarea HTML-ului.

Un pas important a fost adoptarea standardului ISO/IEC:10646 (vezi [ISO10646]) ca set de caractere al documentului pentru HTML. Acesta este standardul cel mai cuprinzător care are de-a face cu probleme de reprezentare a caracterelor internaționale, direcția textului, punctuație și alte probleme ale limbilor lumii.

HTML oferă acum un suport mai bun pentru diversele limbi dintr-un document. Aceasta permite indexarea mai eficientă a documentelor pentru motoarele de căutare, topografie de mai bună calitate, conversie mai bună text-voce, ortografiere mai bună, etc.

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru World Wide Web, o tehnologie nucleu pentru Internet propusă inițial pentru software-ul Opera.

Este a cincea revizuire a standardului HTML (creat în 1990 și standardizat ca HTML4 din 1997) și din octombrie 2011 este în curs de dezvoltare. Obiectivele sale principale au fost acelea de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia în același timp menținândul ușor de citit de oameni și bine înțeles de computere și device-uri (browsere web, parsere, etc.). HTML5 își propune să însumeze nu numai HTML4, dar și XHTML1 și DOM2HTML (îndeosebi JavaScript).

Urmărind predecesorii săi imediați HTML 4.01 și XHTML 1.1, HTML5 este un răspuns la observația că HTML și XHTML utilizate în comun pe World Wide Web sunt un amestec de caracteristici introduse de specificații diferite, împreună cu acestea mai sunt și caracteristicile diferite aduse de software, de browsere, și multe erori de sintaxă în documentele web existente. Astfel, HTML5 devine o încercare de a defini un singur limbaj de marcare (markup language) care poate fi scris în oricare dintre sintaxele HTML sau/și XHTML. Acesta include modele detaliate de prelucrare pentru a încuraja mai multe implementări interoperabile; extinde, îmbunătățește și raționalizează disponibilitățile pentru documentele web și introduce marcarea și aplicații API (application programming interfaces) pentru aplicații web complexe. Din aceste motive, HTML5 este un posibil candidat pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au fost create din considerarea că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smartphone-urile sau tabletele.

III.1. Trecerea de la HTML4 la HTML5

Analiștii spun că anul acesta va fi anul HTML5. Conform oficialilor Microsoft, o dată cu noul Internet Explorer 9 vom avea suport HMTL5 și pe noul browser.

Trecerea la HTML5 de la HTML4 se face încă lent pentru că trebuie să așteptăm până ce producătorii de browse-ere se hotărăsc să facă schimbări și să facă posibilă redarea codului HTML5 de către browser. HTML 5 este noua versiune (o revizie majoră) a HTML-ului (Hypertext Markup Language), principalul limbaj de marcare (markup language).

Elementele care apar în prim plan în noul limbaj sunt <header>și <footer>folosite la structura standard a paginii sau <canvas>, <audio> și <video>care ne vor permite crea aplicații user-friendly, concluzia finală fiind distanțarea față de flash atunci când vine vorba de diverse animații. Scăpăm și de unele elemente din HTML 4.1 cum ar fi <font><center> sau <big> efectele lor fiind realizate cu ajutorul CSS.

Cele mai importante funcționalități în HTML5:

1. Stocarea offline a informațiilor.

Cred că aceasta e cea mai importantă caracteristică. Permiterea navigării paginilor web offline. Bineînțeles aceasta este deja posibilă prin intermediul Google Gears dar cu ajutorul HTML5 va fi o soluție nativă în browser. Acesta este primul pas serios spre a diminua prăpastia dintre desktop și Web și este viitorul Aplicațiilor Web.

2. HTML5 și DOM

Spre deosebire de versiunile anterioare de HTML și XHTML, care sunt definite în termeni de sintaxă, HTML5 este definit în termeni de Document Object Model (DOM) – Reprezentarea arborescentă folosită de către browser pentru a reda documentul.

3. Geolocation

Geolocation API – găsește locația curentă a utilizatorului. API-ul, în cazul în care browser-ul acceptă acest lucru și va acorda acces la aplicații web, se întoarce latitudinea, longitudinea, altitudinea, viteza și câteva alte detalii. (Dacă dispozitivul web nu are GPS, aceste detalii vor fi estimate folosind adresa de IP și de alți factori).

4. Video & Audio

API-urile audio & video sunt upgrade-uri importante pentru viitor (cum am specificat mai sus).

5. Drag and drop

Împreună cu o armată de JavaScript API-uri, HTML5 vine cu un Drag și Drop API, care aduc suport nativ.

III.2. Diferențele dintre HTML4 și HTML5

Elementele pe care le voi arăta mai jos au un înțeles puțin modificat în HTML5 pentru a reflecta mai bine utilizarea lor în web sau cum pot deveni cât mai folositoare.

1. Elementul a folosit fără atribut ‘href’ reprezintă un loc gol în care ar putea fi plasat un link, de asemenea poate conține mai degrabă un flux de conținut decât de a fi restricționat la o frază.

2. Elementul address este folosit cu scopul unui nou concept pentru secționare

3. Elementul b acum reprezintă un text span pentru a-i atașa un stil decalat față de situația normală, fără nici o importanță SEO cum ar fi evidențierea cuvintelor cheie sau a numelor unor produse într-o recenzie sau alte texte a căror prezentare tipică tipografică este boldită.

4. Elementul cite acum reprezintă doar titlul unei lucrări (a unei cărți, lucrări, eseu, poem, cântec, script, film, un program TV, un jos, o sculptură, o pictură, o piesă de teatru, o operă, un show musical, o expoziție, un raport legal) Specificațiile din HTML4 în care este utilizat pentru a marca numele unei persoane nu mai sunt considerate.

5. Elementul hr reprezintă acum o pauză tematică într-un paragraph

6. Elementul i reprezintă un span de text în alternanță după voce și stare, sau altfel, o altă abordare de la scopul normal, de exemplu o denumire taxonomică, o frază idiomatică din altă limbă, un nume de vas, sau alt scop în care prezentarea tipică tipografică este oblic scrisă. Folosirea ei diferă în funcție de limbă.

7. De la elementul label, browserului nu mai trebuie să-și mute focusul de la label la control doar dacă un astfel de comportament este standard pentru platforma de interacțiune cu userul.

8. Elementul meniu este redefinit pentru a fi utilizat de toolbars sau meniu de context.

9. Elementul small acum reprezintă o afișare mică ( pentru comentarii și afișări legale).

10. Elementul strong reprezintă accentul pus pe boldire.

11. Elementul head nu mai permite elementul object ca subelement.

12. DOCTYPE-ul e necesar să existe într-o pagină web deoarece prin acest tag îi spunem browser-ului cum să așeze pagina, în caz contrar browser-ul o va prezenta în modul standard. Până la apariția HTML5 declaram în modul următor:

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

Odată cu apariția HTML5 este necesar doar să scriem DOCTYPE și html: !DOCTYPE html.

13. STRUCTURE. Acest tag va reprezenta structura unui document ori o secțiune de aplicație. Va putea fi folosit împreună cu h1 și până la h6.

14. ARTICLE. Dacă vom avea un post dintr-un blog sau o știre dintr-un ziar acest tag le va delimita de content. Un fel de ghilimele

15. ASIDE. Reprezintă o bucată din content ce nu are importanță foarte mare

16. HEADER, FOOTER și NAV

Header e partea de sus a pagini unde deobicei ne va apărea banner-ul iar footer-ul este parte de jos, unde putem avea un meniu de navigare rapidă, drepturile de autor sau alte lucruri nu foarte importante pentru vizitator. Nav-ul va fi folosit pentru a defini zona navigației, meniul de cele mai multe ori.

17. DIALOG

DIALOG face posibilă renderizarea unui dialog scutindu-ne sa mai folosim padding-ul din CSS.

18. FIGURE

Figure va fi utilizat împreună cu o renderizare grafică sau video. Pe lângă acest tag mai avem audio și video ce vor renderiza fișiere multimedia.

19. DATALIST

Este utilizat pentru realizarea de combobox.

20. <canvas>, <audio> si <video> – permit folosirea unui API puternic pentru a crea aplicații user-friendly. Este un lucru benefic, deoarece programatorii pot alege să nu folosească Flash în realizarea animațiilor.

21. S-a renunțat la unele elemente care existau în HTML 4.1, cum ar fi <font>, <center> sau <big> (care pot fi acum realizate cu ajutorul CSS), dar și <frame> sau <frameset>.

Următoarele atribute sunt permise dar autorii nu mai încurajează utilizarea lor dar ei preferă folosirea soluțiilor alternative.

1. Atributul border la img – este important să avem valoarea 0 când este prezent. Se poate folosi CSS pentru a înlocui acest atribut.

2. Atributul language în elementul script. Este necesar a avea valoarea „javascript” (case-insensitive) când este prezent elementul script și intră în conflict cu atributul type. Autorii pot omite pur și simplu.

3. Atributul name elementului a. Autorii pot folosi atributul id în schimb.

4. Atributul summary a unui table. HTML5 definește câteva soluții alternative.

IV. Tehnologia client-server

Modelul client-server este o structură sau arhitectură, aplicație distribuită care partajează procesarea între furnizorii de servicii numiți servere și elementele care solicită servicii, numite clienți. Clienții și serverele comunică printr-o rețea de calculatoare, de obicei prin Internet, având suporturi hardware diferite, dar pot rula și pe același sistem fizic. Un server (fizic) rulează unul sau mai multe programe server, care partajează resursele existente cu clienții. Clientul nu partajează niciuna dintre resursele proprii, ci apelează la resursele serverului prin funcțiile server. Clienții inițiază comunicația cu serverele și așteaptă mesajele acestora. Pentru menținerea legăturii între cei doi, indiferent de pauzele care intervin, se folosește conceptul de sesiune, care de obicei este limitată în timp.

IV.1. Importanța tehnologiei client-server

Aproape toată structura Internetului se bazează pe modelul de client-server. Multe milioane de servere din toată lumea sunt conectate la Internet și rulează continuu. Majoritatea serviciilor oferite pe Internet rulează pe servere: Web; Domain Name System; e-mail sau poștă electronică; FTP sau transfer de fișiere; instant messaging sau mesagerie instantă; fișiere audio și video; jocuri ș.a.m.d. Pentru orice acțiune care este inițiată de un utilizator al Internetului, unul sau mai multe servere interacționează cu utilizatorul precum și între ele.

Pentru a deține poziție de lider în economia mondială, organizațiile trebuie să folosească cele mai noi tehnologii. Circumstanțele economice arată necesitatea ca, corporațiile să-și schimbe structura sa organizațională. În multe cazuri se alege calea decentralizării și restructurării. Se cere de a ajunge la o complexitate sporită și eliminarea redundanței.

Modelul computațional client-server prevede o platformă ideală pentru aplicațiile structurale. Procesul computațional ca sursă a informației aplicabile necesită ca elementele să fie integrate cu atenție. Stocarea datelor, lucrul cu bazele de date, aplicațiile, sistemele de operare, interfața utilizatorului și display-ul sunt elementele de bază a procesului computațional. Stocarea datelor dă posibilitatea accesului la porțiuni de date, dirijarea cu bazele de date organizează datele, iar aplicațiile prevăd o integrare a acestor două elemente la nivel de utilizator. Sistemul de operare controlează resursele calculatorului și alocă resurse la necesitatea utilizatorului. Ele controlează graficul de lucru, prioritățile și asigură accesul la așa device-uri ca printerele și prevede un canal de comunicare dintre client și server. Interfața utilizatorului îi dă posibilitatea de a comunica cu aplicația. Interfața poate fi de tipul Windows / Macintosh sau textuală ca Dos / Unix, în dependență de limbajul de programare. Ultimul element din acest model este display device care este un hardware fizic, care dă posibilitatea operatorului de a comunica cu interfața utilizatorului. Acesta e realizat sub forma de workstation sau client.

Puterea workstation, realizarea workgroup, dirijarea prin rețea la distanță, posibilitatea de extindere și probabilitatea sunt forțele creatoare ale sistemelor client-server. Altă cauză este reducerea prețului. În afară de reducerea prețului. Reînnoirea permanentă a componentelor hardware și software face ca implementarea sistemelor client-server să fie ușor de realizat.

Ce prezintă client-server?

În primul rând ce înseamnă client-server. Clientul este orice sistem sau proces care poate cere și primi date, servicii sau acces la alte sisteme prevăzute de server. Serverul este orice sistem sau proces cere prevede date, servicii sau acces la alte sisteme pentru client, în cele mai multe cazuri la mai mulți clienți simultan (ca resurse împărțite). Simpla definiție a tehnologiei client-server este că aplicația server acceptă cererile la date de la client și i le returnează. Clientul manipulează datele și prezintă rezultatele la utilizator sau acționează ca un server (sau agent), trimite rezultatele la client (server) care le-a cerut. Tehnologia client-server se bazează pe faptul că ea folosește un calculator desktop programabil pentru a efectua cea mai mare parte a procesării aplicației. În tehnologia client-server, desktop-ul obține informația de la alt calculator în configurația master-slave. Chiar dacă partea hardware în client-server e importantă, trebuie să ne focusăm asupra tehnologiei ce dă posibilitatea existenței ei, și anume a părții software.

Persoanele ocupate în domeniul tehnologiilor informaționale pot folosi client-server pentru a-și ușura lucrul. Client-server dă posibilitatea aplicațiilor pentru a fi folosite în mai multe domenii. Fiecare task (proces) poate fi rulat pe platforme diferite, sub diferite sisteme de operare, cu diferite protocoale de rețea. Fiecare task poate fi dezvoltat și susținut separat, accelerând crearea aplicațiilor. În termeni mai simpli client-server oferă posibilitatea divizării lucrului. Aplicația poate fi divizată în șase task-uri diferite, care include interfața utilizatorului, logica de prezentare, logica aplicației, cererile datelor și acceptarea rezultatelor, integritatea datelor, și dirijarea fizică a datelor, oferind mai multor profesioniști posibilitatea de a lucra asupra unei aplicației în același timp. Client-server oferă posibilitatea folosirii tacticii de divizate și cucerire. Client-server oferă posibilitatea utilizatorilor de a accesa datele ușor, reieșind din faptul că toate datele necesare sunt aproape de utilizator. Acesta ajută utilizatorii de a fi mai eficienți și de a termina aplicațiile mai rapid ca înainte, când nu exista client-server. Client-server mărește productivitatea muncii.

Procesarea aplicației care este divizată între mai multe calculatoare poate fi o procesare distribuită sau cooperativă. Procesarea distribuită împarte datele dintre două sau mai multe calculatoare, care pot fi geografic îndepărtate. Utilizatorul are accesul transparent la date. Procesarea cooperativă împarte funcțiile aplicației între două sau mai multe calculatoare prin relației peer-to-peer. Astăzi majoritatea rețelelor client-server care se folosesc sunt bazate pe accesul distribuit, care nu este același lucru ca procesarea distribuită. Procesarea e performată de ambii client și server în cele mai multe rețele actuale.

De la apariția modelului client-server multe schimbări au fost produse. Folosirea LAN-urilor a făcut modelul client-server mai atractiv pentru organizații. Alte beneficii de la procesarea client-server include costul minim, productivitatea sporită, și crearea mai rapidă a aplicațiilor. Reducerea prețului poate fi văzută prin faptul că mai puțini oameni mențin aplicațiile client-server, decât mainframe-urile. De asemenea cheltuielile pe hardware și rețea în mediul client-server sunt mai joase decât la mainframe. Utilizatorii sunt mai productivi, deoarece ei au un acces rapid la date și deoarece aplicațiile pot fi divizate între mai mulți utilizatori. Aplicațiile client-server fac lucrul organizațiilor mai efectiv.

Una din părțile negative ale procesării client-server este securitatea. Procesarea client-server nu are la baza sa principii de securitate necesare în zilele prezente. Cu intrarea client-server în secolul 21, securitatea sa este mărită și procesarea client-server se apropie de scopul său principal, care este de a oferi posibilitatea fiecărui nod din rețea să fie accesabil, când e necesar, de aplicație și de a oferi posibilitatea la toate componentele software de a lucra împreună.

Zece Caracteristici ale lui Bochenski.

Sunt zece caracteristici care reflectă proprietățile de bază ale sistemului client-server, după Barbara Bochenski, cum scrie în “Implementing Production-Quality Client Server System”.

Acestea zece caracteristici sunt:

1. Arhitectura client-server este compusă din procesul client și procesul server, care pot fi deosebite unul de altul, deși pot interacționa în mod similar.

2. Porțiunea client și porțiunea server poate opera pe diferite platforme – și de obicei așa și este – dar acesta nu este necesar.

3. Și platforma client, și platforma server pot fi înnoite (upgrade) independent.

4. Serverul poate deservi mai mulți clienți simultan. În unele sisteme client-server, clienții pot accesa multiple servere.

5. Sistemele client-server includ unele tipuri de facilități de rețea.

6. O porțiune mare (posibil toată) a logicii aplicației se află pe partea client.

7. Acțiunea este inițiată în caz general la partea client, nu server. Serverele bazelor de date pot acționa în dependență de trigheri, ca și regulile de business și procedurile de sortare.

8. Interfață grafică a utilizatorului user-friendly (GUI) în general se află pe partea client.

9. Capabilitățile limbajului de cereri structural (SQL) sunt caracteristice majorității sistemelor client-server.

10. Serverul bazei de date trebuie să prevadă protecția și securitatea datelor.

Originea procesării client-server

O părere generală asupra procesării client-server a fost prezentată de Ford Tamer, vice președintele de marketing pentru Dazel Corporation, care dă posibilitatea de a înțelege originea și statutul procesării client-server actuale. Prima generație tehnologiei client-server a început la mijlocul anilor ’80, cu trecerea corporațiilor de la puternicele mainframe-uri la dispersele microcalculatoare. Aplicația software era de multe ori bazată pe posibilitatea de a conecta clienții și serverele bazelor de date situate pe diferite platforme.

A doua generație a tehnologiei client-server (anii ’90) a fost generată de dezvoltarea aplicațiilor client-server actuale. Această perioadă de integrare a fost însoțită de dezvoltarea rapidă a companiilor, fiecare dezvoltând aplicații integrate, pentru a uni numeroasele PC-uri, microcalculatoarele și mainframe-urile în rețele și sisteme.

A treia generație a procesării client-server, după modelul lui Tamer, este marcată de analiza recentralizării pentru adresarea problemelor de securitate și dirijarea sistemelor de stocare a informației. La această etapă departamentele răspund la presiuni pentru a găsi soluții mai puțin costisitoare, mai centralizate pentru sistemele corporative, pentru a mări securitatea datelor.

Componentele rețelelor client-server

a) Server

Serverele așteaptă cererile de la client și reglează accesul pentru a împărți resursele. File server-ele fac posibilitatea de a împărți fișiere prin rețea prin menținerea bibliotecilor comune de documente, date sau imagini. Server-ele bazelor de date folosesc puterea limbajului SQL pentru a executa cererile în acest format de la clienți. Server-ele de tranzacții execută o serie de comenzi SQL și programe de procesare a tranzacțiilor (OLTP), în deosebire de server-ele bazelor de date, care răspund la o singură comandă.Group Ware server-ele adresează dirijarea datelor semi-structurale, așa ca e-mail, scheduling și altele. Internet-ul este un exemplu de un sistem larg Group Ware, popular în Lotus Notes. Web server-ele oferă posibilitatea clienților și server-elor de a comunica prin limbajul universal numit HTTP. Web-ul este “prima aplicație client server intergalactică”.

b) Client

Clienții, care sunt de obicei PC-uri, sunt utilizatorii de servicii oferite de serverele descrise mai sus. Sunt trei tipuri de clienți. Clienți fără interfață grafică necesită interacțiune minimă cu oamenii; non-GUI includ ATM-urile, telefoanele celulare, mașinile de fax și roboții. Al doilea tip – GUI-Clienți sunt niște modele cu interacțiune umană, cu așa modele obiect/acțiune ca meniurile căzătoare din Windows 3.x. Clienți cu interfață orientată pe obiecte (OOUI) dezvoltă ideea de GUI-clienți cu extinderea formatelor vizuale, mai multe locuri de lucru (workplaces), și interacțiune cu obiecte și aplicații. Windows 95/98 este un OOUI-Client.

c) Middleware

Middleware este tot software distribuit ce e necesar clienților și serverelor de a interacționa. În caz general middleware dă posibilitatea de comunicare, servicii de directoare, împărțirea distribuită de fișiere și scoaterea la tipar. Middleware suportă tipuri de servicii de server specifice, de la baze de date, ca ODBC și Oracle Glue la aplicații de tipul Group Ware – Lotus Notes.

Fat-client sau Fat-server.

Fat client sau fat-server sunt niște termeni populari în literatura de calculatoare. Acești termeni servesc descripției a tipului sistemelor client/server în funcție de loc. În sistemele fat-client cea mai mare parte din prelucrare are loc la client, ca la file-server sau database server. Fat-server-ul plasează mai multă funcție pe server și încearcă să minimizeze prelucrarea făcută de client. Exemple de fat-servere sunt tranzacțiile, Group Ware și Web server-ele. Deseori sistemele fat-client se numesc “2-Tier” sisteme și fat-serverele se numesc “3-Tier” sisteme.

Avantajele și dezavantajele ale client-server

Sistemele client-server au adus beneficii mari utilizatorilor, mai ales acelor a mainframe-urilor. Ca și consecință multe domenii din business sunt în procesul de trecere de la mainframe (sau PC) la sistemele client/server. Client-server a devenit o soluție a celor mai mari corporații. 79% din companiile din lista Times Top 1000 companies au adoptat soluțiile bazate pe client-server. Acesta este foarte important pentru businessul care avea de acum soluții. Mai jos se descrie de ce are loc migrarea la client-server. Întregul proces de trecere la un sistem nou necesită elaborarea strategiei întregii companii.

Cauzele trecerii la procesarea client-server

Client-server e descrisă ca o tehnologie de reducere a prețului. Această tehnologie nu vă oferă posibilități fundamentale noi, dar vă permite să efectuați lucrul vostru cu calculatoarele la un preț mai redus. Aceste tehnologii includ procesarea client-server, sistemele deschise, limbajele generației a patra și baze de date relaționale. Reducerea de cost este descrisă ca argumentul principal pentru trecerea la client-server. De fapt, lista argumentelor include controlul mai eficient, integritatea și securitatea sporită, performanța sporită și conectivitatea mai bună.

Conform datelor oferite de Gardener Group, reducerea costului la trecerea de la mainframe la client-server este de 50% din costul sistemului original.

Momentele negative ale trecerii la sistemele client-server.

Beneficiile de la trecerea la client-server sunt mari, dar mai este și elementul de risc în trecerea de la mainframe (PC-uri) la client-server. Gagliardi în cartea sa “Client-Server Computing: Killing The Mainframe Dinosaur And Slashing Runaway MIS Costs”, clasifică aceste riscuri în patru categorii: operațională, tehnologică, economică și politică. În plus, Gagliardi descrie aspectele de lungă și scurtă durată a fiecărui risc.

Riscurile Tehnologice.

Riscurile tehnologice sunt simple – va lucra sau nu sistemul nou? Dar mult mai important este riscul cu timpul sistemul va deveni inuzabil. Cu timpul orice sistem devine prea vechi ca să poată fi ne înnoit (upgrade). Întrecerea este cât timp va trece până la acest moment. Pentru rezolvarea acestei probleme consultanții trebuie să înțeleagă bine standardele sistemelor și tendințele de marketing, și ale avea în vedere la luarea deciziei.

Riscurile Operaționale

Aceste riscuri merg în paralel cu riscurile tehnologice în termen scurt și îndelungat. Respectiv ele sunt: se va ajunge oare la performanța necesară și are oare posibilitatea softul instalat de creștere și adaptare la cerințele business-ului vostru. Iarăși totul trebuie verificat pentru a primi decizia optimală.

Riscurile economice

În termen scurt firmele ascund costurile asociate cu implementarea inițială a sistemului client-server. Este adevărat că este un simț pe piață că sistemele client-server trebuie să includă astfel de componente:

1. GUI Interfață pentru client

2. Cereri SQL

3. Sisteme legale pentru server.

IV.2. Securitatea serverului Apache

Apache HTTP Server are un record bun de securitate și o comunitate de dezvoltatori foarte îngrijorată de problemele de securitate. Dar este inevitabil ca unele probleme – mici sau mari – vor fi descoperite în software-ul după ce este terminat. Din acest motiv, este esențial să se mențină conștienți de actualizările pentru software. După ce se instalează serverul HTTP direct de la Apache, se recomandă abonarea la lista de anunțuri Apache HTTP Server pentru a putea fi informați cu privire la versiuni noi și actualizări de securitate. Servicii similare sunt disponibile de la cele mai terți distribuitori de software Apache.

Desigur, de cele mai multe ori un server web este compromis, aceasta însă nu este din cauza problemelor din codul HTTP Server. Mai degrabă, este vorba de probleme în add-on, scripturi CGI, sau sistemul de operare de bază. De aceea toți cei care folosesc serverul Apache trebuie să fie conștienți de problemele și actualizările software-ului de pe sistemul lor.

Permisiunile pe directoare ServerRoot

În condițiile normale de funcționare, Apache este pornit de către utilizatorul root. În cazul executării oricărei comenzi, trebuie să se aibă în vedere protejarea modificării de către utilizatorii non-root. De aceea fișierele trebuie să fie inscriptibile numai de root în directoarele specifice. De exemplu, dacă alegeți să plasați ServerRoot în / usr / local / apache, atunci se sugerează că vă creați un director ca root, cu comenzi ca acestea:

mkdir / usr / local / apache

cd / usr / local / apache

mkdir conf bin bușteni

chown 0. conf bin bușteni

chgrp 0. conf bin bușteni

chmod 755. conf bin bușteni

Se presupune că /, / usr, și / usr / local sunt modificabile numai de către root. Când instalați executabil httpd, trebuie să vă asigurați că acesta este protejat în mod similar:

httpd cp / usr / local / apache / bin

chown 0 / usr / local / apache / bin / httpd

chgrp 0 / usr / local / apache / bin / httpd

chmod 511 / usr / local / apache / bin / httpd

Aveți posibilitatea să creați un subdirector htdocs, care este modificabil de către alți utilizatori – toate fișierele de acolo nu se execută de la rădăcină, și nu ar trebui să creeze fișiere acolo.

Dacă permiteți utilizatorilor non-root să modifice orice fișier a cărui rădăcină se execută atunci sistemul dumneavoastră devine compromis. De exemplu, cineva ar putea înlocui binar httpd, astfel încât data viitoare când îl porniți, acesta va executa un cod arbitrar. În cazul în care directorul de gater este inscriptibil (de către un utilizator non-root), cineva ar putea să înlocuiască un fișier jurnal, cu o legătură simbolică la unele fișiere ale sistemului, și apoi s-ar putea suprascrie rădăcina fișierului cu date arbitrare. În cazul în care fișierele jurnal propriu-zise sunt inscriptibile (de către un utilizator non-root), atunci cineva poate fi în măsură să suprascrie jurnalul de sine, cu date false

Server Side Include

Server Side Include (SSI) prezintă un administrator de server cu mai multe riscuri de securitate potențiale.

Riscul este prima sarcina crescută pe server. Toate SSI au permis fișierele care trebuie să fie analizate de către Apache, indiferent dacă există sau nu directive SSI incluse în fișiere. În timp ce această creștere a sarcinii este minoră, într-un mediu de server partajat poate deveni semnificativă.

Fișiere SSI reprezintă, de asemenea, aceleași riscuri care sunt asociate cu scripturi CGI în general. Prin utilizarea elementului cmd exec, SSI a permis fișierelor să poată executa orice script CGI sau program în conformitate cu permisiunile de utilizator și de grup, Apache rulează ca, configurat în httpd.conf.

Există mai multe moduri de a îmbunătăți securitatea fișierelor SSI în timp ce încă se poate profita de beneficiile pe care le oferă.

Pentru a izola o deteriorare aflată în deriva fișierelor SSI, un administrator de server poate permite suexec așa cum este descris în secțiunea General din CGI.

Activarea SSI pentru fișiere cu extensiile htm. sau .html poate fi periculoasă. Acest lucru este valabil mai ales într-un mediu de trafic comun, sau de mare server. SSI a permis ca fișierele să aibă o extensie separată, cum ar fi convențional .shtml. Acest lucru ajută la menținerea încărcării serverului la un nivel minim și permite gestionarea mai ușoară a riscului.

O altă soluție este să dezactivați capacitatea de a rula script-uri și programe de pagini SSI. Pentru a face acest lucru se înlocuie cu Include – IncludesNOEXEC în directiva Opțiuni. Rețineți că utilizatorii pot folosi în continuare <- # include = virtuala "…" -> pentru a executa script-uri CGI în cazul în care aceste script-uri sunt în directoarele desemnate de o directivă ScriptAlias.

CGI în general

Mai întâi de toate, trebuie întotdeauna să ne amintim că trebuie să ai încredere în scriitorii de scripturi CGI sau programe că au abilitatea de a identifica găuri potențiale de securitate în CGI, indiferent dacă acestea au fost în mod deliberat sau accidental. Script-urile CGI pot executa comenzi arbitrare în esență, pe sistemul dvs. cu permisiunile utilizatorului serverului web și pot fi, prin urmare, extrem de periculoase dacă acestea nu sunt verificate cu atenție.

Toate scripturile CGI vor rula ca același utilizator, astfel încât acestea au potențialul de a intra în neînțelegere (accidental sau deliberat) cu alte scripturi de exemplu, utilizatorul A urăște utilizatorul B, așa că îi scrie un script bazei de date CGI utilizatorului B. Un program care poate fi folosit pentru a permite scripturilor să ruleze ca utilizatori diferiți este suexec care este inclus cu Apache de la 1,2. O altă modalitate populară de a face acest lucru este cu CGIWrap.

Protejarea setărilor de sistem

Pentru a rula un sistem, veți dori să se oprească utilizatorii de la htaccess care pot înlocui caracteristicile de securitate pe care le-ați configurat. Iată un mod de a face acest lucru.

În fișierul de configurare server, se pune:

<Directory />

AllowOverride Nici unul

</ Directory>

Acest lucru previne utilizarea htaccess în toate directoarele. Afară de cele în mod special activat.

Protejarea fișierelor server

Un aspect al Apache, care este ocazional înțeles greșit este caracteristica de acces implicit. Asta este, în cazul în care nu se iau măsuri pentru a o modifica, dacă serverul poate găsi calea către un fișier prin reguli normale de cartografiere URL, aceasta poate servi clienților.

De exemplu, luați în considerare următorul exemplu:

# Cd /; ln-s / public_html

Accesarea http://localhost/ ~ root /

Acest lucru ar permite clienților să se plimbe prin întregul sistem de fișiere. Pentru a lucra în jurul acestei valorii de lucru, adaugă următorul bloc de configurare al serverului dvs.:

<Directory />

Comandați Deny, Allow

Refuzați de la toate

</ Directory>

Aceasta va interzice accesul implicit la locațiile sistem de fișiere. Adaugă blocuri corespunzătoare Directory pentru a permite accesul doar în acele zone care le dorești. De exemplu:

<Directory /usr/users/*/public_html>

Comandați Deny, Allow

Permiteți de la toate

</ Directory>

<Directory /usr/local/httpd>

Comandați Deny, Allow

Permiteți de la toate

</ Directory>

Acordați o atenție deosebită la interacțiunile de amplasare și directivele Directory, de exemplu, chiar dacă <Directory /> înterzice accesul, o directivă <Location /> l-ar putea răsturna.

Pentru a putea fi la curent cu ceea ce se întâmplă de fapt împotriva server-ului dvs. va trebui să verificați fișierele jurnal. Chiar dacă fișierele jurnal conțin doar reportaje cu ceea ce s-a întâmplat deja, ele vă va oferi o înțelegere a ceea ce se atacă împotriva serverului și vă permit să verificați dacă nivelul necesar de securitate este prezent.

O serie de exemple:

grep-c "/ JSP / source.jsp / JSP / / JSP / source.jsp???" access_log

grep "clientul refuzat" error_log | coada-n 10

Primul exemplu va lista numărul de atacuri care încearcă să exploateze informațiile vulnerabile Apache Tomcat Source.JSP, al doilea exemplu va lista cei ultimi zece clienți refuzați, de exemplu:

[Jo 11 iulie 2002 17:18:39] [eroare] [client foo.example.com] client negat de configurare a serverului: / usr / local / apache / htdocs / .htpasswd

După cum puteți vedea, fișierele jurnal raportează doar ceea ce deja s-a întâmplat, așa că, dacă clientul ar fi fost în măsură să acceseze fișierul htpasswd ar fi văzut ceva similar:

foo.example.com – [12/Jul/2002: 01:59:13 0200] "GET / HTTP/1.1 htpasswd."

V. DESCRIEREA APLICAȚIEI

Fișerele sunt structurate în foldere care cuprind fișiere adiționale: admin, css, js, img.

Fig 1: Fișierele aplicației

Și folderul admin care cuprinde fișierele importante: font, fișiere php:

Fig 2: Fișierele zonei de administrare

Pagina principală a site-ului cuprinde pozele produsului licitat, descriere produsului licitat, timpul rămas până când licitația se va termina, oferta curentă licitată de ultimul înregistrat, un formular de înregistrare a datelor persoanei care vrea să liciteze care conține: nume, prenume, telefon, adresa, suma pe care o adaugă în plus la oferta curentă: 1 leu, 2 lei, 5 lei, 10 lei și butonul trimite care înregistrează toate datele noi adăugate:

Fig 3: Pagina principală a aplicației

Fig 4: Continuarea paginii principale

După completarea formularului și apăsarea butonului trimite cel care a licitat va fi informat cu următorul mesaj:

Fig 5: Completarea formularului de înscriere la licitație și a sumei în plus licitate

Fig 6: Confirmarea înregistrării la licitație

Ceea ce înseamnă că utilizatorul a fost introdus cu succes în baza de date și oferta curentă este schimbată, i se vor adăuga cei 10 lei:

Fig 7: Noua ofertă curentă în urma licitării

După ce acesta este înregistrat se va reveni la pagina principală pentru a se înregistra un utilizator nou.

În următoarea figură sunt afișate înregistrările până la ora actuală, inclusiv cea creată de mine mai sus:

Fig 8: Înregistrările utilizatorilor care au licitat

Parola de logare a administratorului este stocată folosind o funcție criptografică din PHP SHA1 (http://www.tools4noobs.com/online_php_functions/sha1/), deoarece atunci când cineva neautorizat va dorii să sa conecteze la baza mea de date nu va putea să îmi afle parola: parola mea este qwerty care în SHA1 se va scrie b1b3773a05c0ed0176787a4f1574ff0075f7521e :

Fig 9: Codificarea parole de logare în zona de administrare a aplicației

Pagina de admin: nume admin: admin, parola: qwerty

Dacă cele două sunt scrise corect administratorul poate intra în baza de date:

Fig 10: Pagina de autentificare în zona de administrare a aplicației

Fig 11: Pagina principală din zona de administrare

Iar dacă acestea au fost scrise greșit administratorului i se va afișa următorul mesaj:

Fig 12: Mesajul care apare când este scris greșit numele sau parola administratorului

După ce administratorul a fost logat cu succes acesta poate schimba, vedea, șterge anumite lucruri din baza de date și licitația actuală.

De exemplu: Acesta poate schimba descrierea produsului licitat

Descriere actuală

Fig 13: Formularul de modificare a descrierii produsului licitat

Fig 14: Descrierea produsului licitat

Iar după ce acesta va modifica descrierea după apăsarea butonului trimite situat în partea stângă sub fereastra în care se scrie testul va apărea după un refresh al paginii principale noua descriere:

Fig 15: Modificarea descrierii produsului licitat

Fig 16: Confirmarea modificării descrierii

Fig 17: Noua descriere a produsului apare și pe pagina principală a aplicației

În stânga sus în partea de administrare vom găsii 2 link-uri unul de vizualizare a ofertelor: Vezi oferte, care prin apăsarea lui va afișa următoarele:

Fig 18: Persoanele și ofertele licitate înregistrate în licitație

Ofertele sunt afișate în ordine descrescătoare după ultima ofertă trimisă, care la rândul ei va avea și valoarea cea mai mare, în acest caz 528.

Dacă dorim ștergerea unei înregistrări/oferte putem apăsa pe butonul x din căsuța șterge din dreptul înregistrări pe care o ștergem.

De exemplu: Vom șterge înregistrarea cu numărul 4-Popescu Ionut

Fig 19: Confirmarea ștergerii unei înregistrării

După apăsarea butonului x vom fi anunțați că oferta a fost ștearsă cu succes și vom fi redirecționați către tabelul cu oferte, unde vom observa faptul că oferta cu număr 4 a fost ștearsă:

Fig 20: Vizualizarea noului tabel de înregistrări fără cea ștearsă

În partea dreaptă sus a tabelului cu ofertele înregistrate avem un link: Descarcă PDF , care prin apăsarea lui se va deschide o nou tab si ni se va crea un PDF cu toate ofertele din baza de date, care poate fi salvat, mărit, printat:

Fig 21: Pdf cu licitațiile înregistrate

Prin apăsarea butonului Inapoi din partea stângă a tabelului cu oferte vom fi trimiși înapoi în partea de administrare:

Fig 22: Întoarcerea la zona de adminstrare

Unde mai putem schimba 2 lucruri: data la care se termină licitația și oferta curentă.

Schimbarea datei la care se termină licitația se va face în următorul fel: data actuală este 7-Octombrie-2013 și dorim să o schimbăm în 10-Iulie-2013, selectăm datele noi și prin apăsarea butonului Schimbă în pagina principală ni se va afișa noua dată:

Fig 23: Modificarea datei la care se termină licitația

Fig 24: Confirmare modificării datei

Observăm că timpul rămas s-a micșorat:

Fig 25: Modificarea datei în pagina principală a aplicației

Oferta curentă se poate schimba prin introducerea în caseta noua ofertă este a ofertei noii și apăsarea butonului Schimbă.

Oferta curentă este 528lei și vrem să o modificăm la 600 lei:

Fig 26: Modificarea ofertei curente a produsului

Fig 27: Confirmarea modificării ofertei

Iar în pagina principală ni se va afișa noua ofertă:

Fig 28: Vizualizarea noii oferte în pagina principală a site-ului

În dreapta sus a zonei de administrare avem link-ul Logout care prin apăsarea lui ne va întoarce la pagina de login:

Fig 29: Ieșirea din zona de administrare

De altfel putem modifica și sumele pe care le poate licita în plus la oferta curentă. În următorul exemplu am modificat 1leu, 2lei, 5lei, 10lei cu 10lei, 25lei, 50lei si 100lei:

Fig 30: Schimbarea sumelor care pot fi licitate în plus de către licitatori

Ghidul de instalare al aplicației:

Pas 1: se instalează serverul Wamp de pe site-ul: http://www.wampserver.com/en/ unde găsim 2 variante de Wamp pentru 32bits și pentru 64bits. Astfel încât vom instala versiunea compatibilă cu sistemul nostru de operare. După aceea vom downloada server-ul și îl vom instala. Instalarea server-ului este foarte simplă. Împreună cu server-ul se vor instala implicit și următoarele programe: Apache 2.4.4, MySQL 5.6.12, PHP 5.4.12, PHPMyAdmin 4.0.4.

Pas 2: În subfolderul www din folderul wamp din Local Disk (C:) se copiază folderul în care avem toate fișierele php, sql, js, css ale aplicației.

Pas 3: Pornim server-ul Wamp. Intrăm în phpMyAdmin și creăm baza de date licitație apoi importăm baza de date licitatie.sql din folderul www.

Pas 4: Apoi intrăm în server, în localhost. Accesăm localhost/licitatie și se va deschide pagina principală a site-ului creat de noi.

Pas 5: Ca să intrăm în zona de administrare a site-ului, în localhost accesăm pagina localhost/licitatie/admin unde cu nume și parolă ne putem loga pentru a putea face modificări paginii principale.

V.1. Structura tabelelor și relațiile dintre ele

Fig 31: Diagrama tabelelor din baza de date

Tabela administrator cu următoarele câmpuri, ajută la logarea administratorului în zona de administrare a site-ului:

CREATE TABLE IF NOT EXISTS `administrator` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`utilizator` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`parola` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;

INSERT INTO `administrator` (`id`, `utilizator`, `parola`) VALUES

(1, 'admin', 'b1b3773a05c0ed0176787a4f1574ff0075f7521e');

Tabela descriere memorează descrierea produsului care urmează a fi licitat:

CREATE TABLE IF NOT EXISTS `descriere` (

`text` text COLLATE utf8_unicode_ci NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `descriere` (`text`) VALUES

('Bicicleta….');

Între tabela administrator și tabela descriere există o legătură 1:1, deoarece un produs licitat poate avea doar o singură descriere.

Tabela final memorează data la care se termină licitația

CREATE TABLE IF NOT EXISTS `final` (

`luna` int(2) NOT NULL,

`zi` int(2) NOT NULL,

`an` int(4) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `final` (`luna`, `zi`, `an`) VALUES

(7, 10, 2013);

Între tabela administrator și tabela final există o legătură 1:1, deoarece un produs licitat poate avea doar o singură dată finală.

Tabela ofertă memorează oferta curentă

CREATE TABLE IF NOT EXISTS `oferta` (

`valoare` int(10) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `oferta` (`valoare`) VALUES

(610);

Între tabela administrator și tabela ofertă există o legătură de 1:1 deoarece administratorul poate schimba oferta de la care să se pornească licitația.

Tabela utilizator memorează datele persoanelor care licitează.

CREATE TABLE IF NOT EXISTS `utilizator` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`nume` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`prenume` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`telefon` int(11) NOT NULL,

`adresa` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`oferta` int(10) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ;

INSERT INTO `utilizator` (`id`, `nume`, `prenume`, `telefon`, `adresa`, `oferta`) VALUES

(1, 'Dogaru', 'Cristina', 987654321, 'Giurgiu', 496),

(2, 'Puiu', 'Dan', 987654321, 'Bucuresti', 498),

(3, 'Moraru ', 'Radu', 2147483647, 'Valcea', 503),

(4, 'Popescu', 'Ionut', 19384756, 'Ploiseti', 508),

(5, 'Gheorge', 'George', 214783647, 'Bacau', 518);

Între tabela administrator și tabela utilizator există o legătură 1:n, deoarece administratorul poate vedea, modifica și șterge orice utilizator care a licitat.

Între tabela utilizator și tabela ofertă există o legătură 1:1, deoarece utilizatorul nou poate schimba oferta curentă adăugându-i noii oferte: 10lei, 25lei, 50lei, 100lei

VI. CONCLUZII

Aplicația mea a fost creată folosind serverul Wamp 2.4 care prin instalarea lui s-au instalat și următoarele programe necesare creării aplicației PHP 5.4.12, MySql 5.6.12, Apache 2.4.4 și phpMyAdmin 4.0.4.

Site-ul creat de mine se poate modifica pentru a putea fi licitat orice produs dorit și totodată se poate schimba modul de administrare, baza de date, timpul rămas, formularul de înregistrare al ofertelor și oferta de la care se pornește licitația.

Găzduirea website-ului se face la adresa: http://ancuta.byethost11.com/

Ideea mea pentru crearea acestei aplicații a pornit de la simplu fapt că lumea este din ce în ce mai dependentă de Internet, aceștia reușind să facă absolut orice prin intermediul lui.

Aplicația mea scoate în evidență cât de mult au evoluat lucrurile pe care le poți face cu ajutorul Internetului. Astfel încât poți să achiziționezi un produs din orice parte a țării, dar și din străinătate totul fiind posibil doar cu ajutorul unui calculator care are o conexiune bună la Internet, nefiind nevoie să te deplasezi până la persoana care deține produsul dorit.

Din perspectiva mea, aplicația este ceva de viitor, deoarece cu ajutorul ei poți licita produse noi, dar și produse vechi pe care nu le mai folosești și de care cineva ar putea avea nevoie, astfel încât va fi ușor și pentru vânzător să reușească să vândă aceste produse nefolositoare, dar și pentru cumpărător având în vedere faptul că prin această metodă va putea mult mai ușor să achiziționeze un lucru dorit.

Având în vedere faptul că aplicația este simplu de utilizat și pe înțelesul tuturor utilizatorilor de Internet, sper ca aceasta să fie folositoare pentru ei.

VII. BIBLIOGRAFIE

1. PÎRNĂU, M., [2009], „Tehnologii Web”, Editura Titu Maiorescu, București, ISBN 978-606-8002-23-1/004.55;

2. Tehnologia client/server pentru toți, Doug Lowe, EDITURA TEORA 1996, Anul Ediției:1996,ISBN:973-601-4215

3. Popescu,M – Curs Baze de date An III, sem 5, 2009-2010

4. Popescu,M – Curs Sisteme de gestiune a BD An III, sem 6, 2009-2010

5.PHP pentru World Wide Web, în imagini, Autor: Larry Ulman, Editura: TEORA, An aparitie: 2004 , ISBN: 6020

6. Dezvoltarea aplicațiilor Web cu PHP și MySQL, Autori : Luke Welling, Laura Thomson, Editura Teora, An apariție: 2005, Limba Romana ISBN: 1-59496-051-8

7. Invata singur PHP, MySQL si Apache. Toate intr-o singura carte, Autori: Julie C. Meloni, Editura: Corint, An apariție: 2005, ISBN: 973-653-657-2

8. Javascript fara mistere, Autor: Jim KEOGH, Editura: Rosetti, An apariție: 2006, ISBN 973-7881-10-9

9. Introducere in AJAX, Autor: Traian Anghel, Anul aparitiei: 2006, ISBN: 973-46– 0568-2

10. HTML, XHTML, CSS si XML prin exemple, Autor: Teodor Gugoiu, Editura: Teora, An aparitie: 2005, ISBN: 6059

11. www.w3schools.com

12. www.php.net

13. www.apache.org

14. www.mysql.com

15. http://ro.wikipedia.org/wiki/HyperText_Markup_Language

16. World Wide Web Consortium – W3C: http://www.w3c.org

17. http://en.wikipedia.org/wiki/Apache_HTTP_Server

18. http://talkpoint.ro/html-website-design-14/diferente-intre-html-4-si-html5-32/

19. http://ro.scribd.com/doc/99574714/Tehnologia-Client-Server

20. https://en.wikipedia.org/wiki/Cascading_Style_Sheets

21. http://en.wikipedia.org/wiki/JQuery

22. http://ro.wikipedia.org/wiki/Ajax_(programare)

23. http://www.w3schools.com/ajax/

24. http://www.tools4noobs.com/online_php_functions/sha1/

25. http://www.e-learn.ro/tutoriale/php/29.htm

26. http://www.mysqltutorial.org/

27. http://www.tutorialehtml.com/

28. http://www.mysql.com/products/workbench/

VIII. ANEXE

Structura bazei de date

Tabela administrator

CREATE TABLE IF NOT EXISTS `administrator` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`utilizator` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`parola` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;

INSERT INTO `administrator` (`id`, `utilizator`, `parola`) VALUES

(1, 'admin', 'b1b3773a05c0ed0176787a4f1574ff0075f7521e');

Tabela descriere

CREATE TABLE IF NOT EXISTS `descriere` (

`text` text COLLATE utf8_unicode_ci NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `descriere` (`text`) VALUES ('Bicileta….');

Tabela final

CREATE TABLE IF NOT EXISTS `final` (

`luna` int(2) NOT NULL,

`zi` int(2) NOT NULL,

`an` int(4) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `final` (`luna`, `zi`, `an`) VALUES (11, 15, 2012);

Tabela oferta

CREATE TABLE IF NOT EXISTS `oferta` (

`valoare` int(10) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `oferta` (`valoare`) VALUES(518);

Tabela utilizator

CREATE TABLE IF NOT EXISTS `utilizator` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`nume` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`prenume` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`telefon` int(11) NOT NULL,

`adresa` varchar(65) COLLATE utf8_unicode_ci NOT NULL,

`oferta` int(10) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ;

INSERT INTO `utilizator` (`id`, `nume`, `prenume`, `telefon`, `adresa`, `oferta`) VALUES

(1, 'Dogaru', 'Cristina', 987654321, 'Giurgiu', 496),

(2, 'Puiu', 'Dan', 987654321, 'Bucuresti', 498),

(3, 'Popescu ', 'Ionut', 2147483647, 'Valcea', 503),

(4, 'Moraru', 'Radu', 19384756, 'Ploiesti', 508),

(5, 'Gheorge', 'George', 2147483647, 'Bacau', 518);

Pagina principală

index.php

<?php require_once('connect.php');

$luna;

$zi;

$an;

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $luna = $info['luna'];}

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $zi = $info['zi'];}

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $an = $info['an'];}

$timp = $an . '-' . $luna . '-' . $zi;

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Licitatie</title>

<link rel="stylesheet" href="css/global.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script src="js/slides.min.jquery.js"></script>

<script>

$(function(){

$('#slides').slides({

preload: true,

preloadImage: 'img/loading.gif',

play: 5000,

pause: 2500,

hoverPause: true,

animationStart: function(current){

$('.caption1').animate({

bottom:-35},100);

if (window.console && console.log) {

console.log('animationStart on slide: ', current);

};

},

animationComplete: function(current){

$('.caption1').animate({

bottom:0},200);

if (window.console && console.log) {

console.log('animationComplete on slide: ', current);

};

},

slidesLoaded: function() {

$('.caption1').animate({

bottom:0},200);

}

});

});

</script>

</head>

<body>

<div id="container">

<div id="example">

<div id="slides">

<div class="slides_container">

<div class="slide">

<a href="#" ><img src="img/1.jpg" width="570" height="427" alt="Slide 1"></a>

<div class="caption1" style="bottom:0">

<p></p>

</div>

</div>

<div class="slide">

<a href="#" ><img src="img/2.jpg" width="570" height="427" alt="Slide 2"></a>

<div class="caption1">

<p></p>

</div>

</div>

<div class="slide">

<a href="#" ><img src="img/3.jpg" width="570" height="427" alt="Slide 3"></a>

<div class="caption1">

<p></p>

</div>

</div>

<div class="slide">

<a href="#" ><img src="img/4.jpg" width="570" height="427" alt="Slide 4"></a>

<div class="caption1">

<p></p>

</div>

</div>

<div class="slide">

<a href="#" ><img src="img/5.jpg" width="570" height="427" alt="Slide 5"></a>

<div class="caption1">

<p></p>

</div>

</div>

<div class="slide">

<a href="#" ><img src="img/6.jpg" width="570" height="427" alt="Slide 6"></a>

<div class="caption1">

<p></p>

</div>

</div>

</div>

<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>

<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>

</div>

<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">

</div>

</div>

<div id="descriere">

<h2>Descriere:</h2>

<p><?php $data = mysql_query("SELECT * FROM descriere") or die(mysql_error()); while($info = mysql_fetch_array( $data )){ echo $info['text'];} ?></p>

</div>

<div id="content">

<center><h2><iframe src="timer.php" width="350" height="45" border="0" ></iframe></h2></center>

<center><h2>Oferta curenta: <span style="color:green;font-weight:bold;"><?php $data = mysql_query("SELECT * FROM oferta") or die(mysql_error()); while($info = mysql_fetch_array( $data )){ echo $info['valoare'];} ?> </span>Lei</h2></center>

<form action="adauga.php" method="POST">

<table>

<tr><td>Nume:</td><td><input type="text" name="nume" /></td></tr>

<tr><td align="right">Prenume:</td><td><input type="text" name="prenume" /></td></tr>

<tr><td align="right">Telefon:</td><td><input type="text" name="telefon" /></td></tr>

<tr><td align="right">Adresa:</td><td><input type="text" name="adresa" /></td></tr>

<tr><td>Cat oferi in plus:</td><td><input type="radio" name="bid" value="1">1 leu <input type="radio" name="bid" value="2">2 lei <input type="radio" name="bid" value="5">5 lei <input type="radio" name="bid" value="10">10 lei</td></tr>

</table>

<input type="submit" value="Trimite" />

</form>

</div>

<script type="text/javascript">

function executare(){

var continut = document.getElementById("content");

continut.innerHTML="<center><span style='color:black;font-size:30px;'>Licitatia s-a terminat.</span></center>";

document.getElementById("content").style.height="50px";

}

var timp = new Date();

var x = timp.getTime();

var limita = <?php echo strtotime($timp) . '000';?>;

if(x > limita){

executare();

}

</script>

</body>

</html>

adauga.php

<?php

require_once("connect.php");

error_reporting(0);

$nume=$_POST['nume'];

$prenume=$_POST['prenume'];

$telefon=$_POST['telefon'];

$adresa=$_POST['adresa'];

$ofera=$_POST['bid'];

$ofertaCurenta;

$data = mysql_query("SELECT * FROM oferta") or die(mysql_error());

while( $info = mysql_fetch_array( $data )){ $ofertaCurenta = $info['valoare'];}

$totalOferta = $ofertaCurenta + $ofera;

mysql_query("INSERT INTO utilizator(nume,prenume,telefon,adresa,oferta) VALUES ('$nume', '$prenume', '$telefon', '$adresa', '$totalOferta')") ;

mysql_query("UPDATE oferta SET valoare={$totalOferta}");

if($_SERVER['REQUEST_METHOD'] == "POST")

{

echo "<center>Informatiile au fost trimise cu succes <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='img/3.gif' /></center>";

}

else {

echo "<center>A aparut o eroare la trimiterea formularului! <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='img/3.gif' /></center>";

}

?>

<?php header("Refresh: 2;url=index.php"); ?>

</body></html>

connect.php

<?php

mysql_connect("localhost", "root", "") or die(mysql_error()) ;

mysql_select_db("licitatie") or die(mysql_error()) ;

?>

timer.php

<?php

require_once('connect.php');

$luna;

$zi;

$an;

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $luna = $info['luna'];}

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $zi = $info['zi'];}

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $an = $info['an'];}

?>

<html>

<head>

<title>Timer</title>

</head>

<body>

<div>

<table cellpadding="0" cellspacing="0" width="100%" >

<tr>

<td align="center" valign="middle" style="font-size:20px;font-family:Arial;">

<script language="JavaScript" style="vertical-align:middle">

TargetDate = "<?php echo $luna . '/' . $zi . '/' . $an; ?> 00:00 AM";

BackColor = "white";

ForeColor = "black";

CountActive = true;

CountStepper = -1;

LeadingZero = true;

DisplayFormat = "Timp ramas: %%D%%:%%H%%:%%M%%:%%S%%";

FinishMessage = "Licitatia s-a terminat.";

</script>

<script language="JavaScript" src="js/countdown.js"></script>

</td>

</tr>

</table>

</div>

</body>

</html>

Global.css

/*

Resets defualt browser settings

reset.css

*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td

{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }

:focus { outline:0; }

a:active { outline:none; }

body { line-height:1; color:black; background:white; }

ol,ul { list-style:none; }

table { border-collapse:separate; border-spacing:0; }

caption,th,td { text-align:left; font-weight:normal; }

blockquote:before,blockquote:after,q:before,q:after { content:""; }

blockquote,q { quotes:"" ""; }

/*

Page style

*/

body {

background:url('../img/bg.png');

//background:#0095B6;

font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;

letter-spacing:0;

color:#434343;

//background:#efefef url(../img/background.png) repeat top center;

padding:20px 0;

position:relative;

text-shadow:0 1px 0 rgba(255,255,255,.8);

-webkit-font-smoothing: subpixel-antialiased;

}

#container {

width:580px;

padding:10px;

margin:0 auto;

position:relative;

z-index:0;

}

#example {

width:600px;

height:350px;

position:relative;

}

#ribbon {

position:absolute;

top:-3px;

left:-15px;

z-index:500;

}

#frame {

position:absolute;

z-index:0;

width:739px;

height:521px;

top:-3px;

left:-80px;

}

/*

Slideshow

*/

#slides {

position:absolute;

top:15px;

left:4px;

z-index:100;

}

/*

Slides container

Important:

Set the width of your slides container

Set to display none, prevents content flash

*/

.slides_container {

width:570px;

overflow:hidden;

position:relative;

display:none;

}

/*

Each slide

Important:

Set the width of your slides

If height not specified height will be set by the slide content

Set to display block

*/

.slides_container div.slide {

width:570px;

height:427px;

display:block;

background:#FFF;

}

/*

Next/prev buttons

*/

#slides .next,#slides .prev {

position:absolute;

top:207px;

left:-39px;

width:24px;

height:43px;

display:block;

z-index:101;

}

#slides .next {

left:585px;

}

/*

Pagination

*/

.pagination {

margin:26px auto 0;

width:120px;

}

.pagination li {

float:left;

margin:0 1px;

list-style:none;

}

.pagination li a {

display:block;

width:12px;

height:0;

padding-top:12px;

background-image:url(../img/pagination.png);

background-position:0 0;

float:left;

overflow:hidden;

}

.pagination li.current a {

background-position:0 -12px;

}

/*

Caption

*/

.caption {

z-index:500;

position:absolute;

bottom:-35px;

left:0;

height:30px;

padding:5px 20px 0 20px;

background:#000;

background:rgba(0,0,0,.5);

width:540px;

font-size:1.3em;

line-height:1.33;

color:#fff;

border-top:1px solid #000;

text-shadow:none;

}

/*

Footer

*/

#footer {

text-align:center;

width:580px;

margin-top:9px;

padding:4.5px 0 18px;

border-top:1px solid #dfdfdf;

}

#footer p {

margin:4.5px 0;

font-size:1.0em;

}

/*

Anchors

*/

a:link,a:visited {

color:#599100;

text-decoration:none;

}

a:hover,a:active {

color:#599100;

text-decoration:underline;

}

#descriere h2,#content h2{font-size:20px;color:#000;line-height:16px;}

#descriere p{font-size:15px;font-family:Arial;}

#descriere{

width:630px;

//height:230px;

margin-top:160px;

margin-left:auto;

margin-right:auto;

background:#FFF;

border:5px solid #000;

padding:10px;

color:#000;

}

#content form{font-size:15px;text-align:center;}

#content form table{margin:20px auto;}

#content{

width:450px;

height:300px;

margin-top:20px;

margin-left:auto;

margin-right:auto;

background:#FFF;

border:5px solid #000;

}

slides_min_jquery.js

(function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function()

{function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g)

{case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+"a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}

h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+"li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+"li:eq("+k+")",c).addClass(b.currentClass))}}functionx(){clearInterval(c.data("interval"))}functiony(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<divclass="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace("","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace("","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+",."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+")norepeat50%50%"});varz=d.find("img:eq("+h+")").attr("src")+"?"+(newDate).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}elsed.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){returnw("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#"class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+"li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+"li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+"lia",c).click(function(){returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$")1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){returnMath.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)

countdown.js

function calcage(secs, num1, num2) {

s = ((Math.floor(secs/num1))%num2).toString();

if (LeadingZero && s.length < 2)

s = "0" + s;

return "<b>" + s + "</b>";

}

function CountBack(secs) {

if (secs < 0) {

document.getElementById("cntdwn").innerHTML = FinishMessage;

return;

}

DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));

DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));

DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));

DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

document.getElementById("cntdwn").innerHTML = DisplayStr;

if (CountActive)

setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);

}

function putspan(backcolor, forecolor) {

document.write("<span id='cntdwn' style='background-color:" + backcolor +

"; color:" + forecolor + "'></span>");

}

if (typeof(BackColor)=="undefined")

BackColor = "white";

if (typeof(ForeColor)=="undefined")

ForeColor= "black";

if (typeof(TargetDate)=="undefined")

TargetDate = "12/31/2020 5:00 AM";

if (typeof(DisplayFormat)=="undefined")

DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";

if (typeof(CountActive)=="undefined")

CountActive = true;

if (typeof(FinishMessage)=="undefined")

FinishMessage = "";

if (typeof(CountStepper)!="number")

CountStepper = -1;

if (typeof(LeadingZero)=="undefined")

LeadingZero = true;

CountStepper = Math.ceil(CountStepper);

if (CountStepper == 0)

CountActive = false;

var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;

putspan(BackColor, ForeColor);

var dthen = new Date(TargetDate);

var dnow = new Date();

if(CountStepper>0)

ddiff = new Date(dnow-dthen);

else

ddiff = new Date(dthen-dnow);

gsecs = Math.floor(ddiff.valueOf()/1000);

CountBack(gsecs);

Zona de administrare

Index.php

<?php require_once('connect.php');?>

<?php require_once("sesiune.php"); ?>

<?php confirmare_logare(); ?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Zona de administrare</title>

<style type="text/css">

body{background:url('../img/bg.png');font-family:Arial;}

#container{

width:650px;

//height:300px;

margin-top:20px;

margin-left:auto;

margin-right:auto;

background:#FFF;

border:5px solid #000;

padding:20px;

}

</style>

</head>

<body>

<div id="container">

<a href="oferte.php">Vezi oferte</a><a style="float:right;"href="logout.php">Logout</a><hr />

<form action="descriere.php" method="post">

Descriere: <br /><textarea name="descriere" rows="12" cols="75">

<?php $data = mysql_query("SELECT * FROM descriere") or die(mysql_error()); while($info = mysql_fetch_array( $data )){ echo $info['text'];} ?>

</textarea><br />

<input type="submit" value="Trimite">

</form> <hr />

<form action="data-incheiere.php" method="post">

Data la care licitatia se va termina este:

<?php

$luna;

$zi;

$an;

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $luna = $info['luna'];}

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $zi = $info['zi'];}

$data = mysql_query("SELECT * FROM final") or die(mysql_error());

while($info = mysql_fetch_array( $data )){ $an = $info['an'];}

switch ($luna)

{

case 1:

$luna = "Ianuarie";

break;

case 2:

$luna = "Februarie";

break;

case 3:

$luna = "Martie";

break;

case 4:

$luna = "Aprilie";

break;

case 5:

$luna = "Mai";

break;

case 6:

$luna = "Iunie";

break;

case 7:

$luna = "Iulie";

break;

case 8:

$luna = "August";

break;

case 9:

$luna = "Septembrie";

break;

case 10:

$luna = "Octombrie";

break;

case 11:

$luna = "Noiembrie";

break;

case 12:

$luna = "Decembrie";

break;

default:

echo "eroare";

}

echo $zi . '-' . $luna . '-' . $an;

?>

<br />

<select name="ziua">

<option value="">Ziua</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

</select>

<select name="luna">

<option value="">Luna</option>

<option value="01">Ianuarie</option>

<option value="02">Februarie</option>

<option value="03">Martie</option>

<option value="04">Aprilie</option>

<option value="05">Mai</option>

<option value="06">Iunie</option>

<option value="07">Iulie</option>

<option value="08">August</option>

<option value="09">Septembrie</option>

<option value="10">Octombrie</option>

<option value="11">Noiembrie</option>

<option value="12">Decembrie</option>

</select>

<select name="an">

<option value="">Anul</option>

<option value="2012">2012</option>

<option value="2013">2013</option>

</select>

<input type="submit" value="Schimba">

</form>

<hr />

<form action="oferta.php" method="post">

Oferta curenta este <span style="color:green;font-weight:bold;"><?php $data = mysql_query("SELECT * FROM oferta") or die(mysql_error()); while($info = mysql_fetch_array( $data )){ echo $info['valoare'];} ?></span> Lei

<br />Noua oferta:<input type="text" name="oferta" /><input type="submit" value="Schimba">

</form>

</div>

</body>

</html>

Login.php

<?php //require_once("sesiune.php"); ?>

<?php //userLogat(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Login</title>

<style type="text/css">

body{

margin:0;

padding:0;

font-family:Arial;

background:url('../img/bg.png');

}

#intreg{

background:url('88.gif');

//background-color:#FFF;

position:absolute;

width:420px;

height:200px;

top:50%;

left:50%;

margin-left:-223px;

margin-top:-113px;

border:3px solid #000;

padding:10px;

opacity:0.8;

}

#login{

text-align:right;

width:415px;

float:left;

}

#login{padding-right:10px;}

form,input{

font-family:Arial;

font-size:16pt;

}

h2{

background-color:#000;

color:#FFF;

line-height:35px;

text-align:left;

padding-left:30px;

}

label,div{float:right;}

.verForm{

width:30px;

height:30px;

}

.campGresit{background-image:url('butoane/x.png');}

.campCorect{background-image:url('butoane/ok.png');}

</style>

</head>

<body>

<div id="intreg">

<div id="login">

<h2>Autentificare</h2>

<form method="post" name="login" action="autentificare.php">

<label>Nume utilizator:<input type="text" name="user" /></label><br />

<label>Parola:<input type="password" name="pass" /></label><br /><br />

<input type="submit" value="Login" />

</form>

</div>

</div>

</body>

</html>

Logout.php

<?php require_once("functii.php"); ?>

<?php

// Găsire sesiune

session_start();

// Eliberare variabile sesiune

$_SESSION = array();

// Distrugere cookie

if(isset($_COOKIE[session_name()])) {

setcookie(session_name(), '', time()-3600, '/');

}

// Distrugere sesiune

session_destroy();

redirectare("login.php");

?>

autentificare.php

<?php require_once("sesiune.php"); ?>

<?php require_once("functii.php"); ?>

<?php require_once("connect.php"); ?>

<?php //confirmare_logare(); ?>

<?php header("Refresh: 5;url=login.php"); ?>

<?php

$user = $_POST['user'];

$parola = $_POST['pass'];

$parola_hash = sha1($parola);

$interogare = "SELECT id, utilizator ";

$interogare .= "FROM administrator ";

$interogare .= "WHERE utilizator = '{$user}' ";

$interogare .= "AND parola = '{$parola_hash}' ";

$interogare .= "LIMIT 1";

$result_set = mysql_query($interogare);

confirmare_interogare($result_set);

if (mysql_num_rows($result_set) == 1) {

$user_gasit = mysql_fetch_array($result_set);

$_SESSION['user_id'] = $user_gasit['id'];

$_SESSION['user'] = $user_gasit['user'];

redirectare("index.php");

} else {

// utilizator si parola nu au fost gasite in baza de date

$message = "<br /><br /><br /><br /><br /><h3 align='center' style='font-family:Arial;' >Nume utilizator sau parola incorect.<br />

Verificati daca tasta <span style='color:#F00;' >CAPS LOCK</span> este inactiva si incercati din nou.<br />

Veti fi redirectionat imediat la pagina de autentificare.</h3>";

echo $message;

}

?>

Connect.php

<?php

mysql_connect("localhost", "root", "") or die(mysql_error()) ;

mysql_select_db("licitatie") or die(mysql_error()) ;

?>

Oferta.php

<?php require_once("sesiune.php"); ?>

<?php confirmare_logare(); ?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Editare oferta licitatie</title>

<!–<link rel="stylesheet" href="css/global.css">–>

</head>

<body>

<?php

require_once("connect.php");

error_reporting(0);

$oferta = $_POST['oferta'];

mysql_query("UPDATE oferta SET valoare={$oferta}");

if($_SERVER['REQUEST_METHOD'] == "POST")

{

echo "<center>Informatiile au fost trimise cu succes <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

else {

echo "<center>A aparut o eroare la trimiterea formularului! <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

?>

<?php header("Refresh: 2;url=index.php"); ?>

</body></html>

Oferte.php

<?php require_once('connect.php');?>

<?php require_once("sesiune.php"); ?>

<?php confirmare_logare(); ?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Oferte</title>

<style type="text/css">

body{background:url('../img/bg.png');font-family:Arial;}

#container{

width:700px;

//height:300px;

margin-top:20px;

margin-left:auto;

margin-right:auto;

background:#FFF;

border:5px solid #000;

padding:20px;

}

td,th{border:2px solid #000;padding:2px 10px 2px 10px;text-align:center;}

tr:hover{background:gray;cursor:auto;}

</style>

</head>

<body>

<div id="container">

<a href="index.php">Inapoi</a><a style="float:right;"href="pdf.php" target="_blank">Descarca PDF</a><hr />

<?php

$data = mysql_query("SELECT * FROM utilizator ORDER BY id DESC") or die(mysql_error());

echo "<table align='center'><tr><th>#</th><th>Nume</th><th>Prenume</th><th>Telefon</th><th>Adresa</th><th>Oferta</th><th>Sterge</th></tr>";

while($info = mysql_fetch_array( $data ))

{

echo "<tr>";

echo "<td>" . $info['id'] . "</td>";

echo "<td>" . $info['nume'] . "</td>";

echo "<td>" . $info['prenume'] . "</td>";

echo "<td>" . $info['telefon'] . "</td>";

echo "<td>" . $info['adresa'] . "</td>";

echo "<td>" . $info['oferta'] . "</td>";

echo "<td><form action='sterge-oferta.php' method='post'><input type='hidden' name='id' value='{$info['id']}' /><input type='image' src='delete.png' /></form></td>";

}

echo "</tr></table>";

?>

</div>

</body>

</html>

Sterge-oferta.php

!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Stergere oferta licitatie</title>

<!–<link rel="stylesheet" href="css/global.css">–>

</head>

<body>

<?php

require_once("connect.php");

error_reporting(0);

$oferta = $_POST['id'];

mysql_query("DELETE FROM utilizator WHERE id={$oferta}");

if($_SERVER['REQUEST_METHOD'] == "POST")

{

echo"<center>Oferta a fost stearsa <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

else {

echo "<center>A aparut o eroare la stergerea ofertei! <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

?>

<?php header("Refresh: 2;url=oferte.php"); ?>

</body></html>

Data-inchidere.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Editare data incheiere licitatie</title>

<!–<link rel="stylesheet" href="css/global.css">–>

</head>

<body>

<?php

require_once("connect.php");

error_reporting(0);

$ziua = $_POST['ziua'];

$luna = $_POST['luna'];

$an = $_POST['an'];

mysql_query("UPDATE final SET luna={$luna}");

mysql_query("UPDATE final SET zi={$ziua}");

mysql_query("UPDATE final SET an={$an}");

if($_SERVER['REQUEST_METHOD'] == "POST")

{

echo "<center>Informatiile au fost trimise cu succes <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

else {

echo "<center>A aparut o eroare la trimiterea formularului! <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

?>

<?php header("Refresh: 2;url=index.php"); ?>

</body></html>

Descriere.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Editare descriere</title>

<!–<link rel="stylesheet" href="css/global.css">–>

</head>

<body>

<?php

require_once("connect.php");

error_reporting(0);

$descriere=$_POST['descriere'];

mysql_query("UPDATE descriere SET text='{$descriere}'");

if($_SERVER['REQUEST_METHOD'] == "POST")

{

echo "<center>Descrierea a fost modificata cu succes <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

else {

echo "<center>A aparut o eroare la trimiterea formularului! <img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' /><br />Veti fi redirectionat imediat inapoi.</center>";

echo "<br /><center><img src='../img/3.gif' /></center>";

}

?>

<?php header("Refresh: 2;url=index.php"); ?>

</body></html>

Pdf.php

<?php require_once("sesiune.php"); ?>

<?php confirmare_logare(); ?>

<?php

require("fpdf.php");

class PDF extends FPDF {

function BuildTable($header,$data) {

$this->SetFillColor(0,0,0);

$this->SetTextColor(255);

$this->SetDrawColor(0,0,0);

$this->SetLineWidth(.3);

$this->SetFont('','B');

$w=array(13,30,30,30,60,20);

for($i=0;$i<count($header);$i++)

$this->Cell($w[$i],7,$header[$i],1,0,'C',1);

$this->Ln();

$this->SetFillColor(175);

$this->SetTextColor(0);

$this->SetFont('');

$fill=true;

foreach($data as $row)

{

$this->Cell($w[0],6,$row[0],'LR',0,'C',$fill);

$this->Cell($w[1],6,$row[1],'LR',0,'C',$fill);

$this->SetTextColor(0);

$this->SetFont('');

$this->Cell($w[2],6,$row[2],'LR',0,'C',$fill);

$this->Cell($w[3],6,$row[3],'LR',0,'C',$fill);

$this->Cell($w[4],6,$row[4],'LR',0,'C',$fill);

$this->Cell($w[5],6,$row[5],'LR',0,'C',$fill);

$this->Ln();

$fill =! $fill;

}

$this->Cell(array_sum($w),0,'','T'); }}

$connection = mysql_connect("localhost","root", "");

$db = "licitatie";

mysql_select_db($db, $connection)

or die( "Could not open $db database");

$sql = "SELECT * FROM utilizator ORDER BY id DESC";

$result = mysql_query($sql, $connection)

or die( "Could not execute sql: $sql");

While($row = mysql_fetch_array($result)) {

$data[] = array($row['id'], $row['nume'], $row['prenume'], $row['telefon'], $row['adresa'], $row['oferta'] );

}

$pdf = new PDF();

$header=array('#','Nume','Prenume','Telefon','Adresa','Oferta');

$pdf->SetFont('Arial','',12);

$pdf->AddPage();

$pdf->Cell(160,10,'Oferte licitatie');

$pdf->Ln(10);

$pdf->BuildTable($header,$data);

$pdf->Ln(5);

$pdf->SetFont('Arial','B',18);

$pdf->SetTextColor(128,128,128);

//$query = "SELECT * FROM utilizator ORDER BY id DESC";

//$result = mysql_query($query) or die(mysql_error());

$pdf->Output();

?>

Functii.php

<?php

function redirectare( $locatie = NULL ) {

if ($locatie != NULL) {

header("Location: {$locatie}");

exit;

}

}function confirmare_interogare($result_set) {

if (!$result_set) {

die("Interogare baza de date esuata: " . mysql_error());

}

}

?>

Inchidere.php

<?php

// Închidere conexiune MySql

//mysql_close($conexiune);

?>

Sesiune.php

<?php require_once("functii.php"); ?>

<?php

session_start();

function logat() {

return isset($_SESSION['user_id']);

}

function confirmare_logare() {

if (!logat()) {

redirectare("login.php");

}

}

function userLogat() {

if (logat()) {

redirectare("index.php");

}

}

?>