Internet Si Aplicatii Web

Informatica

Internet Si Aplicatii Web

Byadmin ianuarie 1, 2024

Cuprins

Cuprins 1

Introducere 3

Capitolul 1 Noțiuni generale despre internet și aplicații web 5

1.1. Noțiuni introductive 5

1.1.1. Utilizare 6

1.1.2. Caracteristici tehnice 6

1.1.3. Istoric 7

1.1.4. Aplicații internet 7

1.2. World Wide Web (WWW) 8

1.2.1. Istoric 9

1.2.2. Funcționare 10

1.2.3. Standarde Web 11

1.3. Aplicații Web 12

1.3.1. Istoric 12

1.3.2. Interfața 14

1.3.3. Structură 14

1.3.4. Exemple de aplicații web 14

Capitolul 2 Tehnologii Folosite 18

2.1. Sisteme de gestiune a bazelor de date: MySql 18

2.1.1. Structura unei baze de date 18

2.1.2. Crearea unei baze de date MySql și a unui tabel 20

2.2. PHP 20

2.2.1. Ce este PHP ? 20

2.2.2. Scrierea scripturilor PHP 21

2.2.3. Variabile și funcții PHP 23

2.2.4. Utilizare formulare HTML cu PHP, $_GET și $_POST 25

2.3. Javascript 26

2.3.1. Sintaxa JavaScript 26

2.3.2. Funcții JavaScript 28

2.3.3. Ajax 29

2.3.4. jQuery 30

2.4. HTML 32

2.4.1. Ce este HTML ? 32

2.4.2. HTML 5 33

2.5. CSS 34

2.5.1. Ce este CSS ? 34

2.5.2. Obiectele (regulile) CSS 35

Capitolul 3 Studiu de caz – Tehnologii Web utilizate în implementarea unui test de evaluare 36

3.1. Structura bazei de date 36

3.1.1. Diagrama Entitate – Legătură 36

3.2. Prezentarea soluției 39

3.2.1. Scop și exigențe funcționale 39

3.2.2. Identificarea actorilor și a cazurilor de utilizare 39

3.2.3. Diagrama cazurilor de utilizare 40

3.3. Implementare secțiune administrare 40

3.3.1. Înregistrarea 40

3.3.2. Logarea 41

3.3.3. Securitate 42

3.3.4. Administrare întrebări 42

3.4. Implementare secțiune test 47

3.4.1. Formular date studenți 47

3.4.2. Pagina domeni 48

3.4.3. Interfață test 49

3.4.4. Modul de notare 50

Concluzii 51

Glosar de termeni 52

Bibliografie 53

Anexe 54

Introducere

În prezent, datorită dezvoltării tot mai accentuate a soluțiilor Open Source, oricine își poate permite realizare de aplicații web.

Din acest motiv am considerat că este foarte utilă alegerea unei asemenea teme, la care se adaugă provocarea de a învăța/utiliza tehnologiile web și creativitate în ceea ce privește design-ul paginilor web.

Tehnologiile web reprezintă acele limbaje de programare utilizate în general la crearea de site-uri web complexe sau mai puțin complexe, interactive, al căror concept presupune stăpânirea cât mai detaliată a unor limbaje de scripting sau de programare și baze de date.

În categoria tehnologii Web se pot include:

Limbaje de programare: PHP, Javascript, etc;

Pentru baze de date pot fi utilizate: MySQL, MsSQL, Access, ORACLE, etc;

Limbaje de marcare și design: HTML 5, CSS 3, Xhtml;

Aplicații web întâlnite mai des sunt: portal-urile, forum-urile, magazinele virtuale, rețele de socializare, etc.

La începutul apariției lor, tehnologiile Web erau folosite doar de marile companii și acest fapt se datora în principal, costurilor ridicate ale licențelor programelor de dezvoltare.

Așadar, fie că este vorba de platformele pe care dorim să dezvoltăm aplicațiile, fie că este vorba de bazele de date, de mediile și uneltele software utilizate, de algoritmii, funcțiile și procedurile pe care le gândim, sau de standardele pe care trebuie să le respectăm pentru dezvoltarea acestora – toate acestea țin de tehnologiile web.

Se pot enumera o serie de tehnologii folosite mai des în programarea aplicațiilor web dinamice, și anume:

HTML – Apărut la începutul anilor '90, datorită lipsei unui limbaj universal care să permită publicarea informației la nivel global, html a determinat dezvoltarea spectaculoasă a Internetului;

Xhtml – reprezintă prescurtarea de la Extensible HyperText Markup Language (denumirea oficiala a standardului). Practic este un înlocuitor modern al mai vechiului limbaj html;

CSS – Fișierul CSS (cascading style sheet-foide stil în cascadă). Un fișier CSS este un fișier text cu extensia ".css" definind stiluri pentru paginile html. Fișierele CSS permit stilizare în bloc a documentelor html cu un efort semnificativ mai mic decât în cazul stilizării elementelor de pagină în cadrul fiecărui document html în parte, prin intermediul atributelor tagurilor;

JAVASCRIPT – este un limbaj de scripting dezvoltat la origine de Netscape permițând scrierea de secvențe de program care se execută la apariția unui eveniment utilizator;

MYSQL – este un sistem de gestiune a bazelor de date relaționale, fiind o componentă cheie a limbajului PHP;

PHP – Hypertext Preprocessor. Folosit inițial la creearea de pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web.

În acest sens, studiul este organizat în trei capitole care tratează această temă.

Primul capitol "Noțiuni generale despre internet și aplicații web" oferă informații despre ceea ce înseamnă internetul și aplicațiile web. Este realizat și un istoric despre evoluția internetului, a felului în care internetul este folosit de către diferite societăți. Acest capitol se încheie prin prezentarea unor aplicații web des întâlnite.

"Tehnologii folosite" este tematica tratată de al doilea capitol, aici sunt prezentate tehnologiile utilizate pentru dezvoltarea aplicației, punându-se accent pe componentele/funcțiile utilizate în aplicație. Prezentarea unor noțiuni CSS încheie acest capitol.

Capitolul al treilea reprezintă ideea principală a lucrării, aici sunt prezentate cele mai importante aspecte ale aplicației, etapele nesesare de creeare a unei astfel de aplicație, prezentarea modului de notare încheie acest capitol.

Noțiuni generale despre internet și aplicații web

Noțiuni introductive

Termenul Internet provine din împreunarea artificială și parțială a două cuvinte englezești: interconnected = interconectat și network = rețea.

Cuvântul are două sensuri care sunt strâns înrudite, în funcție de context:

Substantivul propriu „Internet” (scris cu majusculă) desemnează o rețea mondială unitară de calculatoare și alte aparate cu adrese computerizate, interconectate conform protocoalelor (regulilor) de comunicare „Transmission Control Protocol” și „Internet Protocol”, numite împreună „stiva TCP/IP”. Precursorul Internetului datează din 1965, când Agenția pentru Proiecte de Cercetare Înaintate de Apărare – a Ministerului Apărării, Department of Defense sau DoD din SUA (Defence Advanced Research Projects Agency,en: DARPA) a creat prima rețea de computere interconectate sub numele ARPAnet.

Super-rețeaua Internet din zilele noastre, care de mult a împânzit întreg globul pământesc, a rezultat din extinderea permanentă a acestei rețele inițiale Arpanet. Azi pe glob există un singur Internet, care însă este uriaș; el oferă utilizatorilor săi o multitudine de informații și servicii precume-mail, www, FTP [4], Găzduire web (web hosting) și multe altele, unele dintre ele fiind numai contra cost.

Termenul „Internet” nu trebuie confundat cu serviciul internet World Wide Web (www). Acesta este doar unul din multele servicii oferite pe Internet, vezi secțiunea „Aplicații Internet” mai jos.

Substantivul comun „internet” (scris cu minusculă) desemnează rețele speciale ce interconectează 2 sau mai multe rețele autonome aflate la mare depărtare unele față de altele. Un exemplu de 2 rețele mari, interconectate printr-un internet pentru care folosința acestui nume este justificată: rețelele SiprNet și FidoNet. Rețelele de tip internet nu trebuie confundate cu super-rețeaua „Internet” de mai sus.

Utilizare

Potrivit unui comunicat de presă al fundației ECDL în 2008 aproximativ 83 % din populația globală nu folosea Internetul.

Potrivit unui studiu întocmit de firma de cercetare on-line InternetWorldStats, în noiembrie 2007 rata de penetrare a Internetului în România a atins nivelul de 31,4 % din totalul populației, estimată la 22,27 milioane de locuitori, iar numărul de conexiuni broadband era de 1.769.300.

Între 2007 – 2011 numărul conexiunilor la Internet în gospodăriile românești a crescut de la 22 % la 47 %; cifrele corespunzătoare la nivelul Uniunii Europene au fost 54 % și 73 % [1]

Caracteristici tehnice

În ziua de astăzi Internetul este susținut și întreținut de o mulțime de firme comerciale. El se bazează pe specificații tehnice foarte detaliate, ca de exemplu pe așa-numitele „protocoale de comunicație”, care descriu toate regulile și protocoalele de transmitere a datelor în această rețea. Vezi și articolul despre Modelul de Referință OSI.

Protocoalele fundamentale ale Internetului, care asigură interoperabilitatea între orice două calculatoare care le implementează, sunt Internet protocol (IP), Transmission Control Protocol (TCP) și User Datagram Protocol (UDP).

Aceste trei protocoale reprezintă însă doar o parte din nivelul de bază al sistemului de protocoale Internet, care mai include și protocoale de control si aplicative, cum ar fi: DNS, PPP, SLIP, ICMP, PO3, IMAP, SMTP, HTTP, HTTPS, SSH, Telnet, FTP, LDAP, SSL, WAP și SIP.

Din cauza multelor fuziuni dintre companiile de telefonie mobilă și cele de Internet (Internet Service Providers, prescurtat ISP) au apărut o serie de probleme în sensul că sarcinile acestora nu erau clar delimitate.

Rețeaua regională a ISP-ului este formată prin interconectarea ruterelor din diverse orașe pe care le deservește compania. Dacă pachetul este destinat unui calculator-gazdă deservit direct de către rețeaua ISP, pachetul va fi livrat direct lui. Altfel el este predat mai departe operatorului (firmei) care furnizează companiei ISP servicii de comunicare prin backbone-ul rețelei. (In engleză backbone înseamnă in general șira spinării, iar în informatică înseamnă rețeaua de bază pentru interconectarea rețelelor). În partea superioară a acestei ierarhii se găsesc operatorii principali de la nivelul backbone-ului rețelei, companii cum ar fi AT&T sau SPRINT. Aceștia răspund de backbone-uri mari cu mii de rutere conectate prin fibră optică, cu bandă largă de transfer.

Istoric

Punctul de pornire în dezvoltarea Internetului a fost rivalitatea între cele două mari puteri ale secolului al XX-lea: Statele Unite ale Americii și Uniunea Sovietică. În 1957, URSS (Uniunea Republicilor Sovietice Socialiste) lansează în spațiul cosmic primul satelit artificial al Pământului denumit Sputnik. Acest fapt a declanșat o îngrijorare deosebită în Statele Unite ale Americii, astfel președintele Eisenhower înființează o agenție specială subordonată Pentagonului: Advanced Research Projects Agency (www.darpa.mil). Această agenție a Ministerului de Apărare (Department of Defense, prescurtat DOD) este condusă de oameni de știință, are o birocrație redusă, și are ca misiune: „Menținerea superiorității tehnologice a armatei Statelor Unite și prevenirea surprizei tehnologice în domeniul securității naționale prin sponsorizarea celor mai noi și revoluționare descoperiri științifice și prin investirea de fonduri teoretic nelimitate pentru realizarea unei legături între cercetarea științifică și implementarea tehnologică militară a acesteia.”.

În 1959 John McCarthy, profesor la Universitatea Stanford, al cărui nume va fi asociat cu inteligența artificială, găsește soluția de a conecta mai multe terminale la un singur calculator central: time-sharing (partajarea timpului).

Aplicații internet

Aplicațiile Internetului sunt numeroase: în primul rând afișarea de informații mai mult sau mai puțin statice cu formă de text, imagini și sunete (așa-numitele pagini web), apoi poșta electronică e-mail, transferul de fișiere de date și informații, chat, video și video on demand, telefonie și telefonie cu imagine prin Internet, televiziune prin Internet, e-commerce, sondări de opinie, mediu pentru răspândirea știrilor, mediu pentru toate genurile de grafică și muzică, deschiderea unei sesiuni de lucru de la distanță, grupuri de discuții pe teme prestabilite, jocuri interactive prin rețea, operații bancare (Internet banking) și multe, multe altele. Printre ele, World Wide Web, prescurtat WWW, deseori numit numai "web", este la loc de vârf, deoarece este o aplicație multimedială și integrativă, cu o interfață de utilizator (Graphic User iri științifice și prin investirea de fonduri teoretic nelimitate pentru realizarea unei legături între cercetarea științifică și implementarea tehnologică militară a acesteia.”.

În 1959 John McCarthy, profesor la Universitatea Stanford, al cărui nume va fi asociat cu inteligența artificială, găsește soluția de a conecta mai multe terminale la un singur calculator central: time-sharing (partajarea timpului).

Aplicații internet

Aplicațiile Internetului sunt numeroase: în primul rând afișarea de informații mai mult sau mai puțin statice cu formă de text, imagini și sunete (așa-numitele pagini web), apoi poșta electronică e-mail, transferul de fișiere de date și informații, chat, video și video on demand, telefonie și telefonie cu imagine prin Internet, televiziune prin Internet, e-commerce, sondări de opinie, mediu pentru răspândirea știrilor, mediu pentru toate genurile de grafică și muzică, deschiderea unei sesiuni de lucru de la distanță, grupuri de discuții pe teme prestabilite, jocuri interactive prin rețea, operații bancare (Internet banking) și multe, multe altele. Printre ele, World Wide Web, prescurtat WWW, deseori numit numai "web", este la loc de vârf, deoarece este o aplicație multimedială și integrativă, cu o interfață de utilizator (Graphic User Interface, GUI) foarte atrăgătoare din punct de vedere grafic, practică și simplu de folosit. WWW a fost inventat de către Tim Berners-Lee în anul 1993.

Pentru folosirea tuturor aplicațiilor din web este nevoie în general doar de un singur program multifuncțional numit browser (cuvânt englez). Exemple: MS Internet Explorer, Mozilla Firefox (provenit din Netscape Navigator),Google Chrome, Opera, Apple Safari ș.a.

World Wide Web (WWW)

Termenul World Wide Web, abreviat WWW sau și www, numit scurt și web, care în engleză înseamnă "rețea mondială" respectiv "rețea" și se pronunță /ˌwɝːld waɪd wɛb/ respectiv /wɛb/ (v. AFI), iar pe românește [ pron. ŭeb ] , este un sistem de documente și informații de tip hipertext legate ele între ele care pot fi accesate prin rețeaua mondială de Internet. Documentele, care rezidează în diferite locații pe diverse calculatoare server, pot fi regăsite cu ajutorul unui identificator univoc numit URI. Hipertextul inclusiv imagini etc. este afișat cu un ajutorul unui program de navigare în web numit browser, care descarcă paginile web de pe un server web și le afișează pe un terminal „client” la utilizator.

WWW este numai unul din numeroasele servicii și aplicații informatice disponibile în Internet. Alte servicii sunt de exemplu: afișarea de informații cu formă de text, imagini și sunete, poșta electronică e-mail, transferul de fișiere de date și informații FTP, chat, aplicații video și video on demand, servicii telefonie și telefonie cu imagine prin Internet de tip VoIP, posturi de radio și televiziune prin Internet, e-commerce, sondări de opinie, răspândirea știrilor prin metode RSS, toate genurile de grafică și muzică, lucrul pe un calculator de la distanță prin Internet, grupuri de discuții pe diverse teme, sisteme de jocuri interactive, distribuție de software ș.a.

Browserele [2] actuale pot nu numai să afișeze pagini web, ci oferă și interfețe către celelalte servicii Internet, având astfel un efect integrator (pentru toate serviciile e suficient un singur browser). De aceea granițele dintre serviciul WWW și celelalte servicii din Internet nu sunt întotdeauna clare.

Istoric

Webul a fost inventat în 1989 la Centrul European de Cercetări Naționale [6] (CERN) din Geneva,Elveția. Propunerea inițială de creare a unei colecții de documente având legături între ele a fost făcută de Tim Bernes Lee în martie 1989. Propunerea a apărut în urma problemelor de comunicare pe care le întâmpinau echipele de cercetători ce foloseau centrul, chiar și folosind poșta electronică.

Primul prototip al acestei colecții (mai întâi în format de text simplu) a apărut nu mult înainte de decembrie 1991, când s-a făcut prima lui demonstrație publică. Studiul a fost continuat prin apariția primei aplicații grafice Mosaic, în februarie 1993, realizată de cercetătorul Marc Andreessen de la centrul universitar National Center for Supercomputing Applications (NCSA) din orașul Urbana-Champaign din statul federal Illinois, SUA.

În 1994 CERN și M.I.T. au format Consortiul World Wide Web, care are drept obiectiv dezvoltarea webului, standardizarea protocoalelor și încurajarea legăturilor dintre situri. Berners-Lee a devenit directorul acestui consortiu. M.I.T. coordonează partea americană a consorțiului, iar partea europeană este coordonată de INRIA, centrul de cercetari francez.

În 1995 Andreessen părăsește NCSA și înființează o noua companie, Netscape Communications Corp., care se ocupă cu dezvoltarea de software pentru web.

În Figură 1.1 este prezentat Primul server web folosit de Tim Berners-Lee, acum la Microcosm, muzeu al CERN.

Figura 1.1: server web folosit de Tim Berners-Lee

Funcționare

La baza funcționării webului stau 3 standarde, și anume:

(HTTP) – Hypertext Transfer Protocol, stiva de protocoale OSI prin care serverul web și browserul clientului (utilizatorului) comunică între ele;

(HTML) – Hypertext Markup Language, standard de definire și prezentare a paginilor web;

(URI) – Uniform Resource Identifier, sistem universal de identificare a resurselor din web, folosit pentru a identifica și regăsi paginile web;

Următoarele standarde sunt definite mai târziu:

Cascading Style Sheets (CSS);

JavaScript;

Hypertext Transfer Protocol Secure – HTTPS;

World Wide Web Consortium (cunoscut și sub denumirea de W3C), care astăzi este condus de Berners-Lee, dezvoltă standardele HTML și CSS; alte standarde provin de la Internet Engineering Task Force (IETF), ECMA sau producători ca Sun Microsystems.

Programul de navigare (browserul) cheamă pagina folosindu-se de URI și HTTP, o interpretează conform formatării paginii (hipertext) și o prezintă utilizatorului pe un monitor. Unul dintre principiile webului este modelul client-server, browserul fiind aplicația client, iar serverul HTTP (serverul web) fiind aplicația server. Pentru a putea interpreta și reda informațiile sub forma hipertextului, browserul apelează la standardul de limbaj HTML, definit încă de la începtul dezvoltării webului.

În perioada 2004-2005 webul a cunoscut un salt calitativ cu privință la aplicațiile de mare răspândire pe glob, care e cunoscut sub numele simbolic Web 2.0.

Standarde Web

Standardele web sunt un termen general pentru standardele formale și alte tehnici specifice care definesc și descriu aspecte ale World Wide Web. În ultimii ani termenul a fost frecvent asociat cu tendința de însușire a celor mai bune practici standardizate pentru construirea, designul și dezvoltarea paginilor Web folosind aceste metode.

Există mai multe standarde și specificații interdependente. Unele dintre ele reglementează și alte aspecte ale Internetului, nu doar World Wide Web, dar toate influențează direct sau indirect dezvoltarea și administrarea paginilor Web și a serviciilor web. În timp ce oricare dintre acestea pot fi denumite "standarde web", susținătorii mișcării standardelor Web tind să se concentreze asupra acelor standarde care se reflectă direct asupra accesibilității și utilizabilității paginilor web. Standardele Web, într-un sens mai larg, constau în următoarele:

Recomandări publicare de World Wide Web Consortium (W3C);

Standarde Internet (STD) – documente publicate de Internet Engineering Task Force (IETF);

Request for Comments (RFC) – documente publicate de Internet Engineering Task Force;

Standarde publicate de International Organization for Standardization (ISO);

Standarde publicate de Ecma International (fostă ECMA);

Standardul Unicode și numeroase alte Rapoarte tehnice Unicode (UTR) publicate de Unicode Consortium;

De obicei, când se discută despre standardele web, următoarele standarde sunt considerate fundamentale:

Recomandări făcute de W3C referitoare la limbajele hypertext (HTML sau XHTML);

Recomandări făcute de W3C referitoare la foi de stil (CSS);

Standarde dezvoltate de Ecma International referitoare la Ecmascript (cunoscut și sub denumirea de JavaScript);

Recomandări făcute de W3C referitoare la Document Object Model (DOM);

O recomamdare W3C este o specificație sau un set de indicații care, după numeroase propuneri și dezbateri, a primit aprobarea membrilor și directorului W3C.

Un standard de Internet IETF este caracterizat de un grad ridicat de maturitate tehnică și convingerea că protocolul specificat oferă beneficii semnificative comunității Internet.

O specificație care a ajuns la stadiul de standard primește un număr în seria IETF STD, păstrând în același timp numărul IETF RFC inițial.

World Wide Web (pe scurt web sau www) este un sistem hipertext care operează pe Internet. Hipertextul este vizualizat cu un program numit browser, care descarcă paginile web de pe un server web (sau sit web) și îl afișează pe ecran. Se pot accesa alte pagini prin legături (sau "linkuri") care indică altă pagină sau trimite informații pe server [5]

Aplicații Web

O aplicație web, este o aplicație care este accesată de utilizator, dintr-o rețea cum ar fi Internet-ul sau intranet-ul. Deasemenea, termenul poate însemna, o aplicație software pe calculator, care este codată într-un limbaj de programare suportat de browser (cum ar fi: JavaScript combinat cu un limbaj de marcare ca HTML) și care se bazează pe un browser web comun pentru a face aplicația executabilă.

Aplicațiile web sunt populare ca urmare a omniprezenței de browsere web, și comoditatea de a folosi un browser web ca un client. Capacitatea de a actualiza și de a menține aplicații web fără distribuirea și instalarea software-ului pe potențiale mii de computere, acesta este un motiv cheie pentru popularitatea lor, așa cum este suportul inerent pentru compatibilitate cross-platform. Aplicațiile web comune includ servicii webmail, vânzări on-line, licitații on-line, wiki-uri și multe alte funcții.

Istoric

În modelele anterioare de calcul, de exemplu, în client-server, sarcina de aplicare a fost împărțită între codul de pe server și codul instalat pe fiecare client local. Cu alte cuvinte, o aplicație a avut propriul program de client care a servit ca interfața sa cu utilizatorul și a trebuit să fie instalat separat pe computerul fiecărui utilizator. Un upgrade la codul de server-side a cererii ar necesita de obicei, de asemenea, o actualizare a codului client-side instalat pe fiecare stație de lucru, adăugând la costul de sprijin și scăderea productivității.

În contrast, aplicatiile web folosesc documente web scrise într-un format standard, cum ar fi HTML și JavaScript, care sunt susținute de o varietate de browsere web. Aplicațiile web pot fi considerate ca o variantă de software client-server în cazul în care software-ul client este descărcat pe mașina client atunci când vizitează pagina web relevantă, prin procedee standard, cum ar fi HTTP. Actualizarea software-ul se poate întâmpla de fiecare dată când pagina web este vizitată. În timpul sesiunii, browser-ul web interpretează și afișează paginile, și acționează ca un client universal pentru orice aplicație. În primele zile ale Web-ului fiecare pagină individuală a fost livrată clientului ca un document static, dar secventa de pagini poate oferi o experiența interactiva, cum datele introduse de utilizator sunt returnate prin elemente de formular web incluse in pagină.

În 1995, Netscape a introdus un limbaj de scripting client-side numit JavaScript care permite programatorilor să adauge unele elemente dinamice pentru interfața cu utilizatorul, care activează pe partea de client. Deci, în loc de a trimite date de la server, în scopul de a genera o întreagă pagină web, script-urile încorporate ale paginii descărcate pot efectua diferite sarcini, cum ar fi validare de intrare sau afișarea / ascunderea de componente ale paginii.

În 2011, HTML5 a fost finalizat, care oferă capabilități grafice și multimedia fără a fi nevoie de plugin-uri de pe partea clientului. HTML5, de asemenea, a îmbogățit conținutul semantic al documentelor. API-uri și modelul de Document Object (DOM) nu mai sunt lasate pe planul secund, dar sunt părți fundamentale ale caietului de sarcini HTML5. WebGL API a deschis calea pentru grafica 3D avansată bazate pe HTML5 si limbajul JavaScript. Acestea au o importanță semnificativă în crearea platformă adevărate și aplicatii web bogate, independente.

Interfața

Prin Java, JavaScript, DHTML, Flash, Silverlight și alte tehnologii, metode de aplicare specifice, cum ar fi desenarea pe ecran, playere audio, precum și accesul la tastatura și mouse-ul sunt toate posibile. Multe servicii au lucrat pentru a combina toate acestea intr-o interfata mult mai familiar care adoptă apariția unui sistem de operare. Tehnici de uz general, cum ar fi drag and drop sunt, de asemenea, sprijinite de aceste tehnologii. Dezvoltatorii web folosesc adesea client-side scripting pentru a adăuga funcționalitate, în special pentru a creea o experiență interactivă care nu necesită reîncărcarea paginii. Recent, tehnologii au fost dezvoltate pentru a coordona client-side scripting cu tehnologii server-side cum ar fi PHP. Ajax, o tehnică de dezvoltare web folosind o combinație de diferite tehnologii, este un exemplu de tehnologie care crează o experiență mult mai interactivă.

Structură

Aplicațiile sunt, de obicei, rupte în bucăți logice numite "niveluri", în care fiecare nivel este atribuit un rol. aplicatii traditionale consta doar din 1 nivel, care se află pe masina client, dar aplicatiile web se pretează la o abordare de n-niveluri. Deși mai multe variante sunt posibile, structura cea mai comună este aplicarea pe trei niveluri. În forma sa cea mai comuna, cele trei niveluri sunt numite prezentare, aplicare și depozitare, în această ordine. Un browser web este primul nivel (prezentare), un motor ce folosește tehnologii Web dinamice de afișare a conținutului (cum ar fi ASP, ASP.NET, CGI, ColdFusion, JSP / Java, PHP, Perl, Python, Ruby on Rails sau Struts2) este Nivelul de mijloc (logica aplicatiei), și o bază de date este al treilea nivel (de depozitare). Browser-ul web trimite cererile catre nivelul de mijloc, la care serviciile face interogări și actualizări în baza de date și generează o interfață de utilizator.

Exemple de aplicații web

În ziua de astăzi, o mare parte a siturilor web înglobeaza aplicații web complexe. Aplicații web des întâlnite:

forum (platforma open-source phpBB);

newsletter;

magazin virtual;

blog;

sistem de management al conținului – CMS;

sistem de publicare al stirilor;

Forum-ul este un site de discuții on-line, unde oamenii pot organiza conversații în funcție de mesajele postate. În funcție de nivelul de acces al utilizatorului sau de regulile forum-ului, un mesaj postat poate avea mai întai nevoie de aprobarea administratorului înainte de a fi vizibil.

În figura 1.2 de mai jos este prezentat un forum susținut de platforma open-source phpBB.

Figura 1.2 Open Source PHP BB Forum

Un newsletter este o publicație distribuită în mod regulat , în general, despre un subiect principal care este de interes pentru abonați. Ziarele și pliantele sunt tipuri de newsletter. Newsletter-ele livrate electronic sunt mai rapide și au caștigat în popularitate și sunt mai ieftine.

Aveți prezentat mai jos un exemplu de Newsletter Altex trimis în format electronic.

Figura 1.3: Newsletter Altex

Magazinul virtual este un sit web destinat vânzării de produse și servicii. În cele mai multe cazuri, o platformă pe care sunt adăugate produse oferite spre comercializare. Acestea pot fi accesate și procurate de regulă utilizând un card de credit. Pe magazinele online complexe utilizatoriul poate selecta modalitatea de plată: (card de credit, transfer bancar, cash) și modalitatea de transport: poștă, curier, etc.

Cel mai bun exemplu de magazin online este Emag.ro.

Figura 1.4

Un blog este o publicație web care conține articole periodice sau actualizate neîntrerupt și au de obicei un caracter personal. Ca regulă, actualizarea blog-urilor constă în adăugiri de citate noi, asemenea unui jurnal, toate contribuțiile fiind afișate în ordine cronologică. Acest gen de publicații web sunt în principiu accesibile publicului.

Aveți prezentat mai jos un exemplu de blog.

Figura 1.5

Un sistem de administrare a conținutului sau CMS (în engleză Content Management System, CMS) este un sistem software creat pentru automatizarea cât mai deplină a gestiunii conținutului, în special a siturilor web. Scopul este de a reduce sau elimina intervenția programatorilor la editarea și administrarea siturilor lor. CMS-ul facilitează organizarea, controlul și publicarea de documente sau alt tip de conținut, cum ar fi imagini și resurse multimedia.

În figura 1.3.2 este prezentat modul de funționare al unui CMS.

Figura 1.6: modul de funcționare al unui CMS

Tehnologii Folosite

Sisteme de gestiune a bazelor de date: MySql

Structura unei baze de date

Spre deosebire de fișiere, bazele de date prezintă mai multe avantaje, inclusiv o mai mare protecție a integrității datelor și asigurarea partajării datelor.

O bază de date stochează datele în tabele, iar fiecare tabel stochează în coloane informații despre un anumit tip de element.

În continuare puteți vedea un tabel din baza de date utilizată pentru aplicație care prezintă date despre profesorii înregistrați.

Primul rând al tabelului atribuie nume pentru fiecare coloană.

Fiecare rând al tabelului, altul decât primul rând, descrie un singur profesor. De exemplu, al doilea rând descrie profesorul cu numele Brebenel.

Fiecare coloana, descrie un anumit atribut al profesorilor, de exemplu, a doua coloana conține numele profesorilor, a treia coloana conține prenumele acestora, a patra coloană conține domeniul în care activează, iar a cincea coloană conține parola care este afișată în format MD5 [3]

Pentru a se putea face referire, mai ușor, la un anumit rând al tabelului, se obisnuiește ca fiecare tabel să conțină o coloană care identifică în mod unic fiecare rând. Această coloană se numește "cheia primară" a tabelului. În exemplul prezentat, coloana numită "id" servește drept cheie primară.

Dacă nici o coloană nu conține o valoare unică pentru fiecare rând, se pot combina valorile mai multor coloane pentru a crea o "cheie primară compusă".

Aplicația software care găzduiește o bază de date se numește "sistem de gestiune a bazelor de date" (SGBD). Există multe sisteme de gestiune a bazelor de date, printre cele mai populare asemenea sisteme se numara: DB2 , Interbase , MySQL , Oracle , Postgresql , SQL Server , Sybase .

MySQL este cel mai popular sistem de gestiune a bazelor de date destinat utilizării cu PHP, în mare masura deoarece este gratuit. Totuși, prin intermediul PHP este posibil accesul la aproape orice SGBD modern.

Bazele de date înțeleg SQL (Structured Query Language), un limbaj relativ simplu, folosit pentru solicitarea datelor. În ciuda simplității sale, SQL este un limbaj foarte puternic, care poate obține accesul la date stocate în mai multe tabele, poate filtra datele dorite si poate sorta, rezuma și afișa rezultatele.

În general, bazele de date își stochează datele într-un singur fișier sau catalog. Această caracteristică de organizare facilitează administrarea datelor, deoarece executarea copiei de siguranța, respectiv restaurarea unui singur fișier sau catalog se realizează mai usor.

Sistemele de gestiune a bazelor de date necesită mai multe cicluri de procesor pentru a satisface o cerere de date decât cele necesare pentru accesul la un fișier normal, dar oferă protecție sporită a datelor, iar pentru accesul la distanță ușurează traficul deoarece majoritatea operațiilor sunt efectuate de programul SQL, astfel singurele date transmise in rețea ar fi rezultatul cerut.

La creearea unui tabel într-o bază de date, este important să se țină cont de "cheia primară". Coloanele dintr-un tabel trebuie să se bazeze pe cheia primară în totalitatea sa.

O altă operație importantă este specificarea unui tip de date pentru fiecare coloana. Majoritatea bazelor de date acceptă urmatoarele tipuri de date generale:

Caracter;

Întreg;

Zecimal;

Data si ora;

Binar;

Crearea unei baze de date MySql și a unui tabel

La început, o bază de date nu conține tabele. Pentru a crea o baza de date și apoi un tabel într-o baza de date, am folosit un sub-limbaj SQL special, cunoscut sub numele de Data Definition Language (DDL).

Se pot emite comenzi DDL și alte comenzi SQL prin intermediul unui interpretor SQL sau prin intermediul PHP. Pentru început va fi prezentat modul de emitere a comenzilor SQL folosind un interpretor SQL.

Dupa ce am instalat MySQL, am deschis iterpretorul "MySQL Command Line Client" din WampServer în care am scris comenzile SQL (În general, SQL nu este sensibil la diferenta între majuscule si minuscule. Deci, se pot scrie comenzile cu majuscule sau minuscule).

Ca regula, dupa scrierea comenzilor, la sfarsit trebuie să fie caracterul "punct si virgula" (;)

Pentru a crea o baza de date se foloseste următoarea comanda:

CREATE DATABASE licenta;

Unde "licenta" este numele bazei de date care v-a fi creată.

Pentru a crea un tabel în baza de date se folosește comanda:

CREATE TABLE asc (coloană tip, colană tip…);

Unde "asc" este numele tabelului, "coloană" este numele unei coloane, "tip" este tipul datelor incluse în coloană, se poate specifica un număr nedefinit de coloane.

PHP

Ce este PHP ?

PHP (se pronunta pe-haș-pe) este un limbaj de programare ce ruleaza pe server, proiectat special pentru WEB.

Într-o pagină HTML puteți îngloba cod PHP care va fi executat la fiecare vizitare a paginii.

Codul dumneavoastra PHP este interpretat pe serverul WEB și generează un cod HTML care va fi vazut de Uilizator (clientului (browserului) fiindu-i transmis numai cod interpretat ca și HTML).

PHP a fost conceput in anul 1994 si a fost initial munca unui singur om,Rasmus Lerdoff.

A fost adoptat de alți oameni talentați si a trecut prin trei rescrieri importante pentru a ajunge la produsul clar si matur de astazi. In octombrie 2002, era in uz de mai mult de nouă milioane de domenii din lumea întreaga, iar acest număr este într-o continua creștere.

PHP este un produs Open Source, cu acces la codul sursa. Îl puteți folosi, modifica și redistribui, toate acestea în mod gratuit.

Inițial, PHP era acronimul de la Personal Home Page, dar a fost modificat pentru a se alinia la conversia de numire recursivă GNU (GNU = Gnu`s Not Unix) și acum este acronimul pentru PHP Hypertext Preprocessor.

Versiunea actuală a PHP este 5.1.

Pagina de baza pentru PHP este: http://www.php.net

Scrierea scripturilor PHP

Pentru a crea scripturi PHP, majoritatea programatorilor PHP folosesc un editor de texte obișnuit. Se poate folosi orice editor de text, cel utilizat de mine pentru aplicația mea este Notepad++. Totuși trebuie să se țină cont să fie un editor de text ce salvează cu format text obijnuit simplu.

Fiecare program PHP include doua linii speciale, care indica serverului PHP că textul cuprins între cele doua linii este alcătuit din instrucțiuni PHP. Practic, aceste linii pot fi asimilate copertelor unei cărți, care pastrează unitatea programului PHP. Între aceste doua linii vor fi scrise instrucțiunile PHP.

Programele PHP execută trei categorii de operații elementare:

Obțin date de la un utilizator;

Execută prelucrari ale datelor, respectiv obține accesul la datele stocate în fișiere și baze de date și le manipulează;

Afișează date astfel încat un utilizator să le poată vizualiza;

Primele doua operații sunt oarecum mai dificil de realizat decât cea de-a treia. Totuși, afișarea datelor astfel încât acestea să fie vizibile utilizatorului este o operație foarte simplă. Așa cum paragrafele unui text scris sunt compuse din propoziții, programele PHP sunt alcătuite din instrucțiuni. Regulile care controlează formarea propozițiilor se numesc sintaxă. Acelasi termen este folosit și pentru a desemna regulile care guvernează formarea instrucțiunilor PHP.

Iată un exemplu pentru crearea instrucțiunii PHP care trimite date de ieșire la un browser Web, astfel încât acestea să fie vizibile pentru un utilizator:

Această instrucțiune începe cu un cuvânt "echo" și se încheie cu un caracter punct și virgulă (;).

Construcția echo trimite datele de ieșire care vor fi afișate de browser.

Ghilimelele duble se folosesc pentru delimitarea unei expresii de tip text, în cazul acesta "A-ti finalizat testul" (se pot folosi si ghilimele simple).

Scripturile PHP pot fi incluse și în fișiere cu cod HTML, ca în exemplul dat:

Variabile și funcții PHP

În limbajul PHP variabilele sunt reprezentate prin semnul $ urmat de numele variabilei.

Numele variabilei este case sensitive, adică contează daca numele este scris cu litere mari sau mici. Întotdeuna numele variabilelor trebuie să înceapă cu o literă sau o liniuță de subliniere (_) și poate fi urmat de litere sau cifre.

Iată câteva exemple de nume de variabilă:

$nume;

$prenume;

$parola;

Pentru a asocia o valoare unei variabile, se scrie cu un semn egal, asa:

$nume = "Ion";

Semnul egal este urmat de valoarea care urmează a fi atribuita variabilei, în acest exemplu, valoarea este dată de valoarea literala "Ion". Caracterul punct si virgula (;) marchează șfarsitul instrucțiunii.

De asemenea, se poate atribui valoarea unei variabile catre o altă variabilă, prin scrierea unei instrucțiuni de atribuire astfel:

$student = $nume;

În acest caz, valoarea variabilei $nume devine valoarea variabilei $student. Acest procedeu se numeste. Astfel o modificare facută asupra lui $nume se va propaga automat și asupra variabilei $student.

Iată exemplul de mai sus așa cum va aparea într-un script PHP simplu :

Variabilele declarate mai sus sunt definite de utilizator. În PHP există și alte variabile numite "variabile predefinite" care reziduă în nucleul PHP, sunt alocate automat de către modulul PHP, și sunt accesibile în program.

În continuare voi enumera câteva dintre aceste "Variabile Superglobale" (accesibile din toate scripturile PHP):

$GLOBALS – contine referinte la variabilele globale disponibile in scriptul curent;

$_SERVER – variabile definite de server sau relative la contextul in care se executa scriptul curent;

$_GET – variabile furnizate scriptului prin adresa URL;

$_POST – variabile furnizate scriptului prin metoda HTTP POST (in general prin formulare);

$_COOKIE – variabile furnizate scriptului prin HTTP cookie;

$_FILES – furnizeaza scriptului fisierele uploadate;

$_SESSION – variabile care sunt inregistrate in sesiunea scriptului;

În afară de variabile, PHP include funcții care execută operații utile.

Majoritatea funcțiilor necesită una sau mai multe valori de intrare, cunoscute sub numele de argumente.

Unele functii, precum min() si max(), preiau un numar nedefinit de argumente. Alte funcții nu necesită nici un fel de argumente. Pentru a putea folosi o functie in mod corespunzator, trebuie cunoscut:

Numele funcției;

Acțiunea funcției și valoarea returnată de aceasta, dacă există;

Numarul argumentelor preluate de funcție;

Semnificația fiecarui argument;

Iată un exemplu simplu care folosește o funcție ce generează un cod de 6 caractere:

$key=keygen(6);

De reținut modul în care argumentul funcției este inclus între paranteze, precum și modul în care funcția și argumentul sau sunt folosite într-un mod asemanator cu o valoare literală sau o variabilă.

Utilizare formulare HTML cu PHP, $_GET și $_POST

Un formular HTML trebuie să conțină un buton de expediere, submit, pe care utilizatorul executa clic pentru a trimite datele din formular la scriptul PHP.

Formularele se crează folosind etichete specifice încadrate in tag-ul <form> </form> ca în exemplul de mai jos:

Fiecare element al formularului trebuie introdus între etichetele <form> si </form>.

Atributul "action" indică fișierul cu scriptul care va primi datele de la formular și reprezintă una dintre cele mai importante precizari.

Fiecare element, câmp dintr-un formular trebuie să aibe un nume distinct, dat prin atributul "name"; acest nume este folosit de scriptul PHP la care sunt trimise datele, astfel, scriptul PHP recunoaște datele din câmpul respectiv folosind numele acestuia.

Atributul "method" poate avea două valori : GET și POST. Diferența între metodele GET și POST constă în modul în care informația din formular este transmisă scriptului care o prelucrează.

Metoda GET trimite toate informatiile adunate ca parte a adresei URL; aceste informatii sunt vizibile pentru utilizator;

Metoda POST transmite informatia intr-o maniera invizibila pentru utilizator si poate transmite o cantitate mai mare de date decat GET;

Folosind exemplul de formular de mai sus, metoda GET va transmite serverului adresa URL domeniu.php.

În general datele din formular sunt preluate de scriptul PHP prin urmatoarea formulă:

$_POST['nume'] – daca este folosit method="post";

$_GET['nume'] – daca este folosit method="get";

– unde "nume" este valoarea atributului name al elementului din formularul HTML.

Un exemplu practic de formular HTML care trimite date (prin method="post") la un script PHP unde acestea vor putea fi vizualizate.

În afară de a expedia unui script datele printr-un formular, se pot expedia date cu ajutorul adresei URL a paginii. Pentru aceasta, se atașeaza la șfârșitul adresei URL un semn al întrebarii (?) și apoi se include o serie de perechi "nume-valoare" (separate prin &), ca în exemplu urmator:

adauga.php?nume1=valoare1&nume2=valoare2

Exemplul include numai doua perechi "nume-valoare"; cu toate acestea, se pot include oricâte asemenea perechi (separate prin caracterul &), în funcție de limita impusă de browser.

Pentru a prelua și folosi datele dintr-o astfel de adresă, se folosește în interiorul scriptului PHP expresia "$_GET['nume'], ca în exemplu urmator"

$var1 = $_GET['nume1']

$var2 = $_GET['nume2']

Unde "nume1" și "nume2" sunt numele variabilelor din adresa URL, iar "$var1" și "$var2" sunt variabilele care vor fi folosite în scriptul PHP (din "fisier.php") și a caror valori vor fi "valoare1" respectiv "valoare2" conținute în adresa URL.

Javascript

Sintaxa JavaScript

Pentru a insera JavaScript într-un document HTML deja existent, este necesară introducerea în fișier a etichetei <script> și </script>. Aceasta etichetă necesită aributul "type", sau atributul "language" (acesta din urma este depreciat in standardul XHTML) care va specifica browser-ului limbajul folosit pentru interpretarea codului inclus.

În interiorul etichetei <script> … </script> vom scrie codul nostru.

Pentru scrierea și executarea programelor JavaScript avem nevoie de un editor simplu de texte (cum ar fi Notepad++ [7]) și un browser (ex. Mozilla Firefox, Internet Explorer).

Atributul "language" (care însa nu este folosit în XHTML, ci doar in paginile web standard HTML) – va avea urmatoarea sintaxă: language="JavaScript", aceasta specifica browser-ului ce limbaj este folosit;

Atributul "type" – înlocuitorul lui "language" – va avea urmatoarea sintaxă: type="text/javascript", aceasta spune browser-ului că scriptul este scris în format plaintext;

Putem, de asemenea, să introducem instrucțiunile JavaScript într-un alt fișier, extern, care va avea extensia ".js", pentru editarea acestui fișier este nevoie la fel de un editor simplu de texte. Avantajul fiind că putem folosi același cod în mai multe pagini HTML și în cazul necesității unei modificări în codul JavaScript, modificăm doar datele dintr-un singur fișier (cel cu extensia ".js"), dezavantajul acestei metode este faptul că într-un fișier extern ".js" nu putem folosi etichete HTML, ci numai instrucțiuni JavaScript.

În cazul în care codul JavaScript se afla într-un fișier extern, eticheta <script> din pagina HTML va trebui să conțină atributul "src" a carui valoare determină locația fișierului în care se afla codul JavaScript.

În fisierul extern cu extensia "js" nu trebuie să scriem eticheta "<script>", scriem direct instrucțiunile scriptului.

Iată un exemplu de script Javascript scris în interiorul unei pagini web:

Funcții JavaScript

Funcțiile ajută la divizarea mai multor sarcini pe care trebuie să le faca un program.

O funcție poate conține mai multe instrucțiuni și comenzi care ulterior pot fi utilizate ușor și de mai multe ori prin apelarea funcției care le conține.

Dacă un program necesită multe linii de cod, folosind funcțiile putem împarti codul în părți mai mici pe care le putem utiliza separat acolo unde este nevoie.

Pot fi doua feluri de funcții:

predefinite – cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", …

Create de programator

care returneaza o valoare;

care nu returneaza o valoare;

O funcție se definește la începutul fișierului, în secțiunea head și poate fi folosită în cadrul paginii prin apelarea ei. Scriptul care conține definirea unei funcții se adaugă în secțiunea "head" pentru a fi siguri că aceasta a fost încarcată înainte de a fi apelată.

Pentru crearea unei funcții se foloseste cuvântul function urmat de numele pe care vrem să-l dăm funcției după care putem adăuga între paranteze rotunde argumentele (numite și atribute) funcției (separate prin virgula dacă sunt mai multe) și între acolade corpul funcției care conține codul care trebuie executat.

Forma generală a unei funcții este urmatoarea:

function nume_functie(argument1, argument, …) {

codul care va fi executat

}

Argumentele sunt variabile folosite de funcție și a caror valoare este preluată la apelarea funcției.

Atributele nu sunt obligatorii, o funcție poate fi definită și fara argumente, dar se pastrează parantezele rotunde, astfel sintaxa unei funcții fară argumente este urmatoarea:

function nume_functie() {

codul care va fi executat }

Ajax

Ajax este un acronim (denumirea prescurtată) de la Asynchronous JavaScript And XML.

Ajax este o combinație de mai multe limbaje (client side și server side) folosite împreuna, bazate în principal pe JavaScript.

Aceasta tehnologie își are originea în anii 1998-2000 când a fost dezvoltată și folosită de Microsoft în aplicația Outlook Web Acces [8] utilizând extensii ale proprietăților HTML incluse în Internet Explorer 5. Dar acest termen "AJAX" a fost creat în 2005, a devenit popular și a cunoscut o dezvoltare accentuată după ce a fost folosit de Google în aplicațiile sale: Google Maps, GMail.

În mod standard, înainte de Ajax, pentru fiecare interacțiune a unei aplicatii web cu serverul, pagina web trebuia complet reîncarcata. Cu tehnologia Ajax pot fi încarcate și modificate doar anumite părți din pagina, prelucrate și generarte de server, fără a reîncarca toata pagina web. Acest lucru are ca rezultat încarcarea mai rapidă a conținutului în pagina și reducerea traficului. De asemenea, pot fi trimise date la server, de la pagina web deschisă, în timp ce utilizatorul urmarește conținutul paginii, fără ca aceasta să fie afectată.

Pentru folosirea Ajax este necesară cunoașterea în primul rând a limbajelor HTML sau XHTML și Javascript, apoi CSS și a unui limbaj de programare pentru partea de server precum PHP sau ASP [9]

Pentru Ajax nu contează tipul limbajului de programare folosit pe partea de server ci răspunsul primit de la server să fie cu un Content-Type de tip text (plain, XML, HTML).

Ajax este suportat de majoritatea navigatoarelor web, Internet Explorer, Mozilla Firefox, Opera, Safarii, …., și utilizeaza în principal obiectul JavaScript XMLHttpRequest, acesta permite realizarea comunicarii cu serverul și afișarea datelor primite fară a fi necesară reîncarcarea paginii.

Având în vedere că Ajax trebuie să foloseasca JavaScript, care poate fi dezactivat de utilizator, iar motoarele de căutare înca nu știu să indexeze paginile din site care sunt generate prin JavaScript; trebuie ținut cont de aceste lucruri când se crează site-uri web care folosesc Ajax.

jQuery

jQuery este o librărie de funcții JavaScript creată de John Resig.

jQuery e centrat pe lucrul și manipularea elementelor HTML și CSS în pagina web. Are de asemenea utilități Ajax pentru transmitere de date la server, funcții pt. lucru cu obiecte, array și evenimente.

Aproape toate scripturile făcute cu jQuery funcționează la fel în principalele navigatoare web.

Lucrul cu jQuery prespune mai întâi includerea librăriei de funcții jQuery în pagina HTML ca orice fișier cu cod Javascript.

Pentru a putea interacționa cu elementele HTML în pagina, instrucțiunile script-ului trebuie executate după încarcarea paginii, astfel tot codul jQuery se scrie în interiorul unei funcții speciale "document ready", aceasta execută codul din ea după încărcarea paginii.

Sintaxa:

$(document).ready(function() {

// tot codul jQuery se scrie aici

});

În urmatorul exemplu este prezentat un script pentru cum se creează o căsuța de dialog folosind jQuery:

Elementele (X)HTML se selectează cu jQuery prin adăugarea lor în $("") (sau jQuery("") , se pot folosi ghilimele duble sau simple).

Funcția html() este o metodă jQuery care returnează conținutul HTML din elementul la care e aplicată.

Selectorii jQuery sunt foarte asemănători cu selectorii CSS, iată câteva example:

$('*') – selectează toate elementele;

$('div') – selectează toate tag-urile <div>;

$('#un_id') – selectează un tag HTML cu id="un_id";

$('.a_class') – selectează toate tag-urile HTML cu class="a_class";

$('p#un_id') – selectează tagul <p> cu id="un_id";

$('li.a_class') – toate tag-urile <li> cu class="a_class";

$('li a') – toate tag-urile <a> din elementele <li>;

$('div a.a_class') – tag-urile <a> cu class="a_class", care sunt adăugate în DIV-uri;

$('div.a_class p span') – toate tag-urile <span> din <p>-uri care sunt adăugate în <div>-uri cu class="a_class";

jQuery suportă folosirea tuturor selectorilor CSS, inclusiv cei din CSS3. Iată câteva exemple:

$('p>a') – selectează toate tag-urile <a> care sunt incluse direct în paragrafe (<p>);

$('a:first') – selectează primul tag <a>;

$('h3:last') – selectează ultimul <h3> din pagină;

$('input[type=text]') – selectează elementele input care au tipul (type) specificat la text;

$('p:odd') – selectează toate paragrafele cu număr de ordine impar;

$('li:first-child') – selectează primul <li> din fiecare listă cu tag-uri <li>;

jQuery are și câțiva selectori proprii:

$(':button') – selectează elementele de tip buton (input sau button);

$(':radio') – selectează butoanele tip radio;

$(':checkbox') – selectează checkbox;

$(':checked') – selectează elementele checkbox sau radio care sunt selectate;

$(':header') – selectează elementele de tip Header (h1, h2, h3, etc.);

$(':contains("String")') – selectează elementele care conțin textul specificat la "String";

HTML

Ce este HTML ?

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator).

HTML este folosit pentru prezentarea unui conținut (text, imagine) într-o pagină web, furnizează mijloacele prin care conținutul unui document poate fi structurat și adnotat cu diverse tipuri de metadate și indicatii de redare și afisare. Aceste indicații pot varia de la decorațiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, hărți de imagini, formulare și cod CSS sau scripturi JavaScript.

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. si informații esențiale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri.

HTML este un format text proiectat pentru a putea fi citit și editat utilizând un editor de text simplu, editarea și întelegerea paginilor în acest fel necesită cunoștințe de HTML.

Există și editoare grafice, de tip WYSIWYG (What You See Is What You Get – "ceea ce vezi este ceea ce obtii"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage, care permit ca paginile web să fie tratate asemănător cu documetele Word și generează ele cod HTML pentru conținutul paginii, dar aceste programe generează un cod HTML care este de multe ori prea încarcat și de proastă calitate.

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.

HTML 5

Noile caracteristici adăugate în HTML5 sunt bazate pe HTML, CSS, DOM, și JavaScript; și reduc necesitatea plugin-urilor externe (precum Flash).

Sintaxa HTML5 este compatibilă cu HTML4 și XHTML [10]

Se pot închide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag />, precum în XHTML; sau se pot lăsa fară să se adauge slash, <tag>;

Se pot folosi litere mici, sau /și litere mari, pentru numele tag-urilor și atribute;

Doctype in HTML5 e mai simplu:

<!doctype html>

Div-urile sunt acum folosite petru stil și design, nu mai sunt necesare pentru structura; HTML5 include mai multe elemente noi pentru structurare, care ajuta la definirea și organizarea diferitelor părti în document.

Acestea sunt principalele elemente de structură care sunt folosite mai des în HTML5:

<header> – e folosit pentru a defini titluri (si sub-titluri), sau meniu de navigare în site. Poate fi adăugat direct în BODY, sau în <article>, ori <section>;

<footer> – reprezintă subsolul paginii sau a unui <section>, ori <article>; poate contine informații despre autor, copyright, etc;

<section> – reprezintă o secțiune distinctă a documentului sau aplicației. Se foloseste pentru a grupa logic structura documentului;

Poate conține header, articles, meniu de navigare și footer;

<nav> – în acest tag se adaugă meniul de navigare în paginile site-ului. Acest element ar trebui folosit doar pentru link-uri grupate într-un meniu;

Dacă aveți un <footer> cu link-uri de navigare în site, nu mai e necesar să le adăugați și în <nav>, deoarece <footer> e suficient;

<article> – se folosește pentru a defini un element independent în pagină (sau în <section>), și poate conține articole de știri, postari de blog, comentarii, sau alt conținut cu text și imagini;

<aside> – poate fi folosit ca să definească o zonă laterală, sau alt conținut care e considerat într-un fel separat de conținutul din jurul lui. Un exemplu ar fi, banner sau publicitate;

<hgroup> – se folosește pentru a grupa un set de două sau mai multe elemente H1, H2, H3, …, când avem de exemplu un titlu si subtitluri;

CSS

Ce este CSS ?

CSS se ocupa în general cu aspectul și controlul grafic al elementelor din pagină, cum ar fi: textul, imaginile, fondul, culorile și asezarea acestora în cadrul ferestrei paginii.

CSS folosește stiluri, acestea înglobează, sub un anumit nume, atribute de formatare care se aplică asupra unui element individual din pagină, asupra unui grup de elemente sau la nivelul întregului document.

CSS funcționează cu HTML, însă nu este HTML. El extinde functionalitățile HTML, permitând redefinirea etichetelor HTML existente.

Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual din interiorul sau, poate fi controlat mult mai ușor. Stilurile pot fi aplicate asupra unui element, a unui document sau chiar asupra unui întreg site web.

Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML sunt afișate ca și cum CSS n-ar exista, dar cele mai cunoscute și utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera, si altele, sunt compatibile CSS.

Obiectele (regulile) CSS

Există trei tipuri principale de obiecte CSS: selector, clasa și identificator.

Selectorul HTML se foloseste pentru a redefini modul de afișare a conținutului etichetei HTML.

Un selector HTML reprezintă partea etichetei HTML care indică navigatorului tipul de etichetă.

Iată un exemplu:

h1 { font-family:"Arial"; font-size:15px; }

Clasa este un obiect care poate fi aplicat oricărei etichete HTML.

O clasă trebuie creată în interiorul etichetei HTML înainte de a fi definită într-un cod CSS. Crearea clasei în interiorul etichetei se face simplu, prin specificarea cuvântului class și numele clasei, ca în exemplu de mai jos:

"nume_clasa", poate fi orice nume dorim.

Apoi în interiorul codului CSS, clasa trebuie definită prin adăugarea unui caracter punct (.) înaintea numelui clasei, ca în exemplu următor:

.nume_clasa { font-family:"Arial"; font-size:15px; }

Obiectele de tip identificator (ID) sunt asemănătoare cu clasele. Pot fi aplicate oricarei etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagină.

Ca și clasa, identificatorul trebuie întâi creat în interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvântului id și numele clasei, ca în exemplu de mai jos:

În interiorul codului CSS, identificatorul este definit prin adăugarea unui caracter diez (#) înaintea numelui, ca în exemplu următor:

#nume_id { font-family:"Arial"; font-size:15px; }

Studiu de caz – Tehnologii Web utilizate în implementarea unui test de evaluare

Structura bazei de date

Diagrama Entitate – Legătură

Acest subcapitol prezintă structura tabelelor din baza de date folosită pentru aceasta aplicație, tabele create folosind comanda SQL: CREATE TABLE nume_tabel, precum și diagrama entitate – legatură.

Tabelele sunt următoarele:

ASC cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c [varchar], rezultat [varchar];

ASC_COM (pentru tipurile de întrebări cu completare de spațiu) cu următoarele atribute: id [int] (cheia primară a entității), intrebare1 [varchar], intrebare2 [varchar], a [varchar];

ASC_MULTI (pentru tipurile de întrebări cu variante multiple de răspuns) cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat1 [varchar] , rezultat2 [varchar];

RETELE cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat [varchar];

RETELE_COM (pentru tipurile de întrebări cu completare de spațiu) cu următoarele atribute: id [int] (cheia primară a entității), intrebare1 [varchar], intrebare2 [varchar], a [varchar];

RETELE_MULTI (pentru tipurile de întrebări cu variante multiple de răspuns) cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat1 [varchar] , rezultat2 [varchar];

TM cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat [varchar];

TM_COM (pentru tipurile de întrebări cu completare de spațiu) cu următoarele atribute: id [int] (cheia primară a entității), intrebare1 [varchar], intrebare2 [varchar], a [varchar];

TM_MULTI (pentru tipurile de întrebări cu variante multiple de răspuns) cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat1 [varchar] , rezultat2 [varchar];

TW cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat [varchar];

TW_COM (pentru tipurile de întrebări cu completare de spațiu) cu următoarele atribute: id [int] (cheia primară a entității), intrebare1 [varchar], intrebare2 [varchar], a [varchar];

TW_MULTI (pentru tipurile de întrebări cu variante multiple de răspuns) cu următoarele atribute: id [int] (cheia primară a entității), intrebare [varchar], a [varchar], b [varchar], c[varchar], rezultat1 [varchar] , rezultat2 [varchar];

COD_ASC cu următoarele atribute: id [int] (cheia primară a entității), cod [varchar];

COD_RETELE cu următoarele atribute: id [int] (cheia primară a entității), cod [varchar];

COD_TM cu următoarele atribute: id [int] (cheia primară a entității), cod [varchar];

COD_TW cu următoarele atribute: id [int] (cheia primară a entității), cod [varchar];

PROFESOR id [int] (cheia primară a entității), nume [varchar], prenume [varchar], domeniu [varchar], parola [varchar];

În figura 3.1: Este prezentată diagrama entitate – legătură.

Figura 3.1: Digrama Entitate – Legatură

Prezentarea soluției

Scop și exigențe funcționale

Se urmărește realizarea unui test de evaluare pentru studenți, folosind tehnologii web.

Ca această aplicație să funcționeze, v-a fi nevoie de următoarele elemente:

Calculator;

Conexiune la internet;

Identificarea actorilor și a cazurilor de utilizare

Actor extern:

Student: este cel care inițializează cazurile de utilizare în vederea satisfacerii obiectivelor;

Actori interni:

Dezvoltator: este cel ce a creeat toate elementele ce se regăsesc în aplicație și are în vedere dezvoltarea și mentenanța aplicației;

Administrator: în cazul de față, administratorul este profesorul, el generează și editează întrebările din test;

Descrierea cazurilor de utilizare:

Logare student: acest caz începe în momentul în care studentul introduce datele în formular și se termină atunci când a dat click pe butonul login;

Alege domeniu: acest caz începe atunci când s-a dat click pe un domeniu și se termină atunci când s-a introdus codul de acces la testul ales;

Începe test: acest caz are loc imediat după ce am introdus codul de acces;

Alege răspuns: acest caz are loc atunci când s-a dat click pe un răspuns la o anumită întrebare;

Finalizează test: acest caz are loc atunci când s-a dat click pe butonul finalizează test, buton ce duce la pagina cu rezultatele testului;

Administrator: aces caz aparține profesorilor care realizează întrebările testului;

Dezvoltator: acest caz aparține dezvoltatorului aplicației;

Diagrama cazurilor de utilizare

Figura 3.2: Diagrama cazurilor de utilizare

Implementare secțiune administrare

Înregistrarea

Serviciul de înregistrare presupune, în primul rând permiterea accesului pentru fiecare profesor la serviciile oferite de aplicație, de un sistem de administrare în funcție de identitatea profesorului.

În cele mai multe cazuri, înregistrarea se face pe baza unui nume de utilizator, pentru indentificarea vizitatorului si pe baza unei parole. Pentru aceasta aplicație înregistrarea se face prin adăugarea de nume si prenume, adăugarea unei parole ce poate să fie de orice dimensiune care conține atât cifre cât și litere și alegerea domeniului de activitate.

În continuare este descris formularul de înregistrare al profesorilor.

Figura 3.3: Formular înregistrare

Câmp de tip text, în care v-a trebui să introduceți numele ;

Câmp de tip text, în care v-a trebui să introduceți prenumele ;

Câmp de tip text, în care v-a trebui să introduceți parola dorită;

Câmp de tip text, în care v-a trebui să introduceți aceeași parolă ca cea din câmpul parolă, în caz că parolele nu corespund, se v-a afișa un mesaj de avertizare;

Câmp de tip select, prin care alegeți domeniul de activitate;

Buton "GO" – click pentru a vă înregistra cu datele introduse în câmpurile de mai sus;

Logarea

După ce v-ați înregistrat, sistemul de logare presupune doar să completați câmpurile formularului cu aceleași date folosite la înregistrare, numai că aici nu mai există câmpul "Confirmare parolă".

După ce a-ți introdus corect datele, sunteți redirecționat catre pagina de administrare, în caz că datele sunt introduse greșit, se v-a afișa un mesaj de avertizare.

Securitate

Această etapă ar putea reprezenta o serie de probleme pentru dezvoltator, una dintre probleme ar fi ca datele introduse de profesor să fie incorecte și acesta să întâmpine de fiecare dată mesaje de avertizare.

În acest sens, dacă profesorul și-a uitat parola, singura posibilitate de a avea din nou acces la servicul de administrare, este să își creeze un cont nou, momentat aplicația nu este prevăzută cu un sistem prin care să genereze o nouă parolă în cazul uitării celei vechi.

În momentul în care un profesor își creeză un cont nou, parolele sunt criptate în formatul MD5, este indicată folosirea unor parole cât mai lungi, pentru o criptare cât mai sigură.

Administrare întrebări

Figura 3.4: Pagina adăugă întrebări

În continuare este descrisă figura 3.4 Pagină pentru întrebările cu o singură variantă de răspuns.

Meniu: rolul acestuia este de a permite navigarea cat mai rapidă între pagini;

Câmpul "Alege tipul de întrebare" vă oferă posibiltatea de a alege un tip de întrebare ce urmează a fi adaugată în baza de date;

Câmpurile formularului ce trebuiesc completate cu datele întrebării (toate câmpurile sunt obigatorii);

În figura de mai jos sunt prezentate celelalte două pagini cu tipurile lor de întrebare pe care profesorul urmează să le introducă în baza de date.

Figura 3.5

Buton "Adauga intrebare" – click pentru a adăuga întrebarea cu datele inițiale în baza de date;

Buton "Genereaza cod" – click pentru a deschide o fereastră de dialog în care este afișat codul generat;

Numele profesorului logat, click pe nume daca doriți să părăsiți pagina de adminstrare;

În figura 3.6 este prezentată căsuța de dialog ce se deschide dacă butonul "Genereaza cod" a fost apăsat.

Figura 3.6

Pnetru generearea automată a codului s-a folosit urmatoarea funcție PHP;

<?php

function keygen($length=10)

{

$key = '';

list($usec, $sec) = explode(' ', microtime());

mt_srand((float) $sec + ((float) $usec * 100000));

$inputs = array_merge(range('z','a'),range(0,9),range('A','Z'));

for($i=0; $i<$length; $i++)

{

$key .= $inputs{mt_rand(0,61)};

}

return $key;

}

include '../conectare.php';

if(isset($_POST['submit'],$_POST['cod']))

{

$u="INSERT INTO `licenta`.`cod` (`id`,`cod`) VALUES (NULL,'".$_POST['cod']."')" ;

$result = mysql_query($u) or die (mysql_error());

header('Location:admin_asc.php');

}

echo "<form action=".$_SERVER['PHP_SELF']." method='POST'>

</form>";

?>

În continuare este descrisă pagina de editare a întrebărilor .

Figura 3.7

Tabelul unde sunt afișate întrebările cu datele acestora;

Opțiunile pentru fiecare întrebare: butoanele de editare (stânga) și ștergere (dreapta);

Câmpul "Alege tipul de întrebare" vă oferă posibiltatea de a alege un tip de întrebare ce urmează a fi adaugată în baza de date;

Meniu: rolul acestuia este de a permite navigarea cat mai rapidă între pagini;

Buton "Genereaza cod" – click pentru a deschide o fereastră de dialog în care este afișat codul generat;

Numele profesorului logat, click pe nume daca doriți să părăsiți pagina de adminstrare;

În figura 3.8 este afișată fereastra de editare ce se deschide dacă butonul de editare a fost apăsat.

Figura 3.8

Implementare secțiune test

Formular date studenți

În cele mai multe cazuri formularele HTML sunt create pentru a fi utilizate cu alte limbaje de programare sau scripturi, gen PHP, JavaScript sau altele.

Acest formular presupune doar inserarea de nume și prenume de către student, datele sunt preluate din formular prin metoda $_GET și sunt reținute într-o variabilă de sesiune pe toată durata testului, am considerat că nu este nevoie de un sistem de autentificare pentru studenți.

Pagina cu formularul date studeți are un design simplu dar atractiv, în continuare este prezentată acestă pagină figura 3.9.

Figura 3.9

Câmp de tip text în care studentul v-a trebui să introducă numele;

Câmp de tip text în care studentul v-a trebui să introducă prenumele;

Buton "Login", după ce au fost completate câmpurile de mai sus, click pe acest buton pentru a fi redirecționat către pagina cu domeni;

Logo formular;

Pagina domeni

După ce studentul a inserat datele personale, acesta este redirecționat către pagina unde v-a trebui să aleagă domeniul la care dă testul.

Aplicația este prevăzută cu patru domeni: Arhitectura Sistemelor de Calcul, Rețele de calculatoare, Tehnologii Multimedia și Tehnologii Web.

În continuare este descrisă figura 3.10 (pagina cu domeni).

Figura 3.10

Cele patru domeni ale alicației, fiecare având o copertă corespunzătoare;

Buton stânga pentru navigare cât mai rapidă în alegerea domeniului;

Buton dreapta pentru navigare cât mai rapidă în alegerea domeniului;

Numele studentului;

Logo pentru pagina domeni;

De precizat este faptul că după ce studentul a ales domeniul, se v-a deschide o căsuță de dialog în care v-a trebui sa introduca codul de acces la test, cod ce este generat de profesor din partea de administrare.

În următoarea figură este prezentată casuța de dialog.

Figura 3.11

Interfață test

Întrebările testului sunt afișate pe rând fără a fi nevoie ca pagina să se încarce, s-au folosit concepte de HTML 5 și JavaScript ca acest lucru să fie posibil.

În continuare este descrisă figura 3.12 (interfața testului).

Figura 3.12

Secțiune unde vor fi afișate întrebările testului;

Buton ce finalizează testul;

Cronometru;

Numele studentului ce susșine testul;

Butoane navigare întrebări, interfața interacționează și cu butoanele stânga – dreapta de la tastatură;

Modul de notare

Notarea se face pe baza unui calcul matematic simplu, pentru fiecare întrebare se aplică calculul: raspunsuri corecte / numărul de întrebări * 100, apoi se face media rezultatelor celor trei tipuri de întrebări si se înmultește cu 100.

Rezultatul este afișat ca în următoarea imagine:

Figura 3.13

Concluzii

Așadar, în urma celor spuse mai sus, principalul motiv în alegerea acestei teme este plăcerea de a lucra cu tehnologiile web, care este un domeniu vast, avansează rapid și oferă o mulțime de posibilități atunci când dorim să realizăm o aplicație web.

Obiectivul urmărit de mine prin alegerea aceste temei este de a realiza un test de evaluare pentru studenți, folosind tehnologii web.

Lucrarea poate fi folosită pentru a examina studenții, pe calculator, la anumite domenii (specificie aplicației), lucrare ce presunpune un test grila cu 3 tipuri de întrebări, testul este conceput de profesor din partea de administrare prevăzută în aplicație.

Tipurile de întrebări prezente în test sunt: întrebări cu o variantă de răspuns din 3 posibile, întrebări cu completare de spațiu liber, în care doar un cuvânt este corect si întrebări cu multiple variante de răspuns în care 2 raspunsuri sunt corecte din 3 posibile.

Aplicația dispune de o interfață atractivă, pentru partea de administrare s-a folostit conceputul de Metro Interface (concept folosit pentru interfața Windows 8), iar pentru partea testului s-au folosit concepte de HTML5 și CSS3, creeîndu-se astfel o interfata 3D ușor de utilizat.

În acest sens am considerat că prin folosirea de concepte noi și prin interfața user – frendly a aplicației, stundetul v-a participa cu plăcere la un asemnea test și este de menționat faptul că examinările pe calculator sunt mai rapide.

Glosar de termeni

[1] Datele au fost preluate de la adresa: http://ro.wikipedia.org/wiki/Internet

[2] Un browser sau un navigator este o aplicație software (program) ce permite utilizatorilor să afișeze text, video, muzică și alte informații situate pe o pagină din World Wide Web, dar și să comunice cu furnizorul de informații și chiar și ei între ei.

[3] MD5 (Message Digest Algorithm 5) este o funcție criptografică de tip hash unidirecțional, care livrează ca rezultat o valoare fixă ca lungime de 128 Biți.

[4] FTP (File Transfer Protocol)protocol server/client pentru schimbul de fișiere cu un computer distant.

[5] Un server este un program de aplicație care furnizează servicii altor aplicații (numite aplicații client), aflate pe același calculator sau pe calculatoare diferite.

[6] CERN este cel mai mare laborator din lume pentru cercetarea particulelor elementare. Laboratorul este situat la câțiva kilometri de Geneva la granița dintre Elveția și Franța.

[7] Notepad ++ este un editor de cod sursă și un înlocuitor al notepad-ului de Windows.

[8] Outlook Web Acess este un serviciu de webmail al Microsoft.

[9] ASP.NET este o tehnologie Microsoft pentru crearea de aplicații web și servicii web. ASP.NET este succesorul lui ASP (Active Server Pages) și beneficiază de puterea platformei de dezvoltare .NET, și de setul de instrumente oferite de mediul de dezvoltarea al aplicației „Visual Studio .NET”.

[10] XHTML, este un limbaj de marcare ce are aceleași capabilități expresive ca și HTML, dar cu o sintaxă mai strictă. XHTML poate fi considerat ca încrucișarea dintre HTML și XML în multe privințe, fiind o reformulare a HTML în XML. XHTML 1.0 a devenit o recomandare World Wide Web Consortium (W3C) pe data de 26 ianuarie 2000.

Bibliografie

Lee Babin, Begining Ajax with PHP, Editura Apress, 2007.

Andrea Tarr, PHP and MySql 24 Hour trainer, Editura Wrox, 2012.

Marplo ( http://www.marplo.net/ajax/)

Marplo ( http://www.marplo.net/curs_css/ )

Marplo (http://www.marplo.net/html/ )

Marplo ( http://www.marplo.net/javascript/jquery-elemente-baza-js )

Marplo ( http://www.marplo.net/javascript/lectii-js )

Marplo ( http://www.marplo.net/php-mysql/lectii.html )

Marplo ( http://www.marplo.net/html/tutorial-html5.html )

Valentin Ivașcu., Inițiere în PHP și MySql, Editura Oriceon, 2005.

Wikipedia ( http://ro.wikipedia.org/wiki/Internet )

Wikipedia ( http://en.wikipedia.org/wiki/Web_application )

Wikipedia ( https://ro.wikipedia.org/wiki/World_Wide_Web#cite_note-1 )

Anexe

Codul sursă pentru afișarea întrebărilor:

<?php

include 'conectare.php';

$questionNumber = 1;

$sql = "SELECT * FROM `asc`" ;

$result = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_array($result)){ ?>

<tbody>

<tr>

</tr><tr><td><div>

<input type="radio" name="answer[<?php echo $row['id'] ?>]" value="A"> <?php echo $row['a']; ?>

</div>

</td></tr><tr><td> <div>

<input type="radio" name="answer[<?php echo $row['id'] ?>]" value="B"> <?php echo $row['b']; ?>

</div></td></tr><tr>

<input type="radio" name="answer[<?php echo $row['id'] ?>]" value="C"> <?php echo $row['c']; ?>

</div></td></tr></tbody></table>

</section>

<?php

$questionNumber +=1;}

?>

<?php

include 'conectare.php';

$sql = "SELECT * FROM `asc_com`" ;

$result = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_array($result)){?>

<tbody>

<tr>

<input type='text' name="answer[<?php echo $row['id'] ?>]" id='spatiu'/>

</tr></tbody></table></section>

<?php

$questionNumber +=1;}?>

<?php

include 'conectare.php';

$sql = "SELECT * FROM `asc_multi`" ;

$result = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_array($result)){ ?>

<tbody>

<tr>

</tr><tr><td><div>

<input type="checkbox" name="answer2[<?php echo $row['id'] ?>]" value="A"> <?php echo $row['a']; ?>

</div></td></tr><tr><td><div>

<input type="checkbox" name="answer2[<?php echo $row['id'] ?>]" value="B"> <?php echo $row['b']; ?>

</div></td></tr><tr>

<input type="checkbox" name="answer2[<?php echo $row['id'] ?>]" value="C"> <?php echo $row['c']; ?>

</div></td></tr></tbody></table>

</section>

<?php

$questionNumber +=1;}

?>

setInterval(function(){ document.getElementById('dataRefreshButton').click(); }, 1500000); // every 25 minutes

</script>

</div>

</form>

Codul sursă pentru pagina de înregistrare:

<?php

include 'conectare.php';

if(isset($_POST['nume'], $_POST['prenume'], $_POST['parola'], $_POST['conf'], $_POST['domeniu']))

{

$nume = $_POST['nume'];

$prenume = $_POST['prenume'];

$parola = $_POST['parola'];

$conf = $_POST['conf'];

$domeniu = $_POST['domeniu'];

if($parola!=$conf)

{

echo '<html>

<head>

function alertare () {

alert(\'Parolele nu corespund\')}

</script>

</head>

</body>

</html>';}

else {mysql_query("INSERT INTO `licenta`.`profesor` (`id` ,`nume` ,`prenume` ,`domeniu` ,`parola`)

VALUES (NULL,'$nume','$prenume','$domeniu','".md5($parola)."')");

header('Location:inregistrare.php');

}}

?>

<h2>Inregistrare</h2><br\>

<span>pe contul de profesor</span>

</div>

<label style="margin:20px; font-family: 'Open Sans', sans-serif; color:#62cafc;" for='Domeniu'>Alegeti domeniul de activitate:</label><br>

<option VALUE="Retele calculatoare"> Retele calculatoare</option>

<option VALUE="Tehnologi multimedia"> Tehnologi multimedia</option>

<option VALUE="Tehnologi web"> Tehnologi web</option>

</select>

</form>

<h2>Pentru logare</h2><br\>

<span>Click <a style="text-decoration:none; color:#505050;" href="login.php"><strong>aici</strong></a> pentru a v-a intoarce la formular</span>

</div></div></div>

Codul sursă al modului de notare:

<?php

include 'conectare.php';

/* O varianta de raspuns */

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

$correctAnswers = 0;

$wrongAnswers = 0;

$idList = join (',', array_map('intval', array_keys($_POST['answer'])));

$sql = "SELECT `id`, `rezultat` FROM `asc` WHERE id IN ($idList) ";

$res = mysql_query($sql) or die(mysql_error());

while (list($id, $correct) = mysql_fetch_row($res)) {

if ($correct == $_POST['answer'][$id]) {

$correctAnswers +=1;}

else { $wrongAnswers +=1; }

}

$score1 = round(($correctAnswers / 3) * 100);

?>

<?php

/* Completare spatiu liber */

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

$correctAnswers = 0;

$wrongAnswers = 0;

$idList = join (',', array_map('intval', array_keys($_POST['answer'])));

$sql = "SELECT `id`, `a` FROM `asc_com` WHERE id IN ($idList) ";

$res = mysql_query($sql) or die(mysql_error());

while (list($id, $correct) = mysql_fetch_row($res)) {

if ($correct == $_POST['answer'][$id]) {

$correctAnswers +=1;

}else { $wrongAnswers +=1; }

}

} $score2 = round(($correctAnswers / 3) * 100) ?> <?php

/* Multiple variante de raspuns */

if(isset($_POST['submit1'],$_POST['answer2'])) {

$correctAnswers = 0;

$wrongAnswers = 0;

$idList = join (',', array_map('intval', array_keys($_POST['answer2'])));

$sql = "SELECT `id`, `rezultat1`, `rezultat2` FROM `asc_multi` WHERE id IN ($idList) ";

$res = mysql_query($sql) or die(mysql_error());

while (list($rezultat,$rezultat2, $correct) = mysql_fetch_row($res)) {

if ($correct == $_POST['answer2'][$rezultat]) {

$correctAnswers +=1;

}else { $wrongAnswers +=1; }

}

$score3 = round(($correctAnswers / 3) * 100); ?>

<h3 style="position:relative; left:-50%; top:-10%;">Ai finalizat testul, ai obtinut <br/> <?php $t = (($score1 + $score2 + $score3)/3) ; $t = sprintf('%0.2f', $t); echo $t; ?> puncte</h3>

Bibliografie

Lee Babin, Begining Ajax with PHP, Editura Apress, 2007.

Andrea Tarr, PHP and MySql 24 Hour trainer, Editura Wrox, 2012.

Marplo ( http://www.marplo.net/ajax/)

Marplo ( http://www.marplo.net/curs_css/ )

Marplo (http://www.marplo.net/html/ )

Marplo ( http://www.marplo.net/javascript/jquery-elemente-baza-js )

Marplo ( http://www.marplo.net/javascript/lectii-js )

Marplo ( http://www.marplo.net/php-mysql/lectii.html )

Marplo ( http://www.marplo.net/html/tutorial-html5.html )

Valentin Ivașcu., Inițiere în PHP și MySql, Editura Oriceon, 2005.

Wikipedia ( http://ro.wikipedia.org/wiki/Internet )

Wikipedia ( http://en.wikipedia.org/wiki/Web_application )

Wikipedia ( https://ro.wikipedia.org/wiki/World_Wide_Web#cite_note-1 )

Anexe

Codul sursă pentru afișarea întrebărilor:

<?php

include 'conectare.php';

$questionNumber = 1;

$sql = "SELECT * FROM `asc`" ;

$result = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_array($result)){ ?>

<tbody>

<tr>

</tr><tr><td><div>

<input type="radio" name="answer[<?php echo $row['id'] ?>]" value="A"> <?php echo $row['a']; ?>

</div>

</td></tr><tr><td> <div>

<input type="radio" name="answer[<?php echo $row['id'] ?>]" value="B"> <?php echo $row['b']; ?>

</div></td></tr><tr>

<input type="radio" name="answer[<?php echo $row['id'] ?>]" value="C"> <?php echo $row['c']; ?>

</div></td></tr></tbody></table>

</section>

<?php

$questionNumber +=1;}

?>

<?php

include 'conectare.php';

$sql = "SELECT * FROM `asc_com`" ;

$result = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_array($result)){?>

<tbody>

<tr>

<input type='text' name="answer[<?php echo $row['id'] ?>]" id='spatiu'/>

</tr></tbody></table></section>

<?php

$questionNumber +=1;}?>

<?php

include 'conectare.php';

$sql = "SELECT * FROM `asc_multi`" ;

$result = mysql_query($sql) or die(mysql_error());

while ($row = mysql_fetch_array($result)){ ?>

<tbody>

<tr>

</tr><tr><td><div>

<input type="checkbox" name="answer2[<?php echo $row['id'] ?>]" value="A"> <?php echo $row['a']; ?>

</div></td></tr><tr><td><div>

<input type="checkbox" name="answer2[<?php echo $row['id'] ?>]" value="B"> <?php echo $row['b']; ?>

</div></td></tr><tr>

<input type="checkbox" name="answer2[<?php echo $row['id'] ?>]" value="C"> <?php echo $row['c']; ?>

</div></td></tr></tbody></table>

</section>

<?php

$questionNumber +=1;}

?>

setInterval(function(){ document.getElementById('dataRefreshButton').click(); }, 1500000); // every 25 minutes

</script>

</div>

</form>

Codul sursă pentru pagina de înregistrare:

<?php

include 'conectare.php';

if(isset($_POST['nume'], $_POST['prenume'], $_POST['parola'], $_POST['conf'], $_POST['domeniu']))

{

$nume = $_POST['nume'];

$prenume = $_POST['prenume'];

$parola = $_POST['parola'];

$conf = $_POST['conf'];

$domeniu = $_POST['domeniu'];

if($parola!=$conf)

{

echo '<html>

<head>

function alertare () {

alert(\'Parolele nu corespund\')}

</script>

</head>

</body>

</html>';}

else {mysql_query("INSERT INTO `licenta`.`profesor` (`id` ,`nume` ,`prenume` ,`domeniu` ,`parola`)

VALUES (NULL,'$nume','$prenume','$domeniu','".md5($parola)."')");

header('Location:inregistrare.php');

}}

?>

<h2>Inregistrare</h2><br\>

<span>pe contul de profesor</span>

</div>

<label style="margin:20px; font-family: 'Open Sans', sans-serif; color:#62cafc;" for='Domeniu'>Alegeti domeniul de activitate:</label><br>

<option VALUE="Retele calculatoare"> Retele calculatoare</option>

<option VALUE="Tehnologi multimedia"> Tehnologi multimedia</option>

<option VALUE="Tehnologi web"> Tehnologi web</option>

</select>

</form>

<h2>Pentru logare</h2><br\>

<span>Click <a style="text-decoration:none; color:#505050;" href="login.php"><strong>aici</strong></a> pentru a v-a intoarce la formular</span>

</div></div></div>

Codul sursă al modului de notare:

<?php

include 'conectare.php';

/* O varianta de raspuns */

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

$correctAnswers = 0;

$wrongAnswers = 0;

$idList = join (',', array_map('intval', array_keys($_POST['answer'])));

$sql = "SELECT `id`, `rezultat` FROM `asc` WHERE id IN ($idList) ";

$res = mysql_query($sql) or die(mysql_error());

while (list($id, $correct) = mysql_fetch_row($res)) {

if ($correct == $_POST['answer'][$id]) {

$correctAnswers +=1;}

else { $wrongAnswers +=1; }

}

$score1 = round(($correctAnswers / 3) * 100);

?>

<?php

/* Completare spatiu liber */

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

$correctAnswers = 0;

$wrongAnswers = 0;

$idList = join (',', array_map('intval', array_keys($_POST['answer'])));

$sql = "SELECT `id`, `a` FROM `asc_com` WHERE id IN ($idList) ";

$res = mysql_query($sql) or die(mysql_error());

while (list($id, $correct) = mysql_fetch_row($res)) {

if ($correct == $_POST['answer'][$id]) {

$correctAnswers +=1;

}else { $wrongAnswers +=1; }

}

} $score2 = round(($correctAnswers / 3) * 100) ?> <?php

/* Multiple variante de raspuns */

if(isset($_POST['submit1'],$_POST['answer2'])) {

$correctAnswers = 0;

$wrongAnswers = 0;

$idList = join (',', array_map('intval', array_keys($_POST['answer2'])));

$sql = "SELECT `id`, `rezultat1`, `rezultat2` FROM `asc_multi` WHERE id IN ($idList) ";

$res = mysql_query($sql) or die(mysql_error());

while (list($rezultat,$rezultat2, $correct) = mysql_fetch_row($res)) {

if ($correct == $_POST['answer2'][$rezultat]) {

$correctAnswers +=1;

}else { $wrongAnswers +=1; }

}

$score3 = round(($correctAnswers / 3) * 100); ?>

<h3 style="position:relative; left:-50%; top:-10%;">Ai finalizat testul, ai obtinut <br/> <?php $t = (($score1 + $score2 + $score3)/3) ; $t = sprintf('%0.2f', $t); echo $t; ?> puncte</h3>

Copyright Notice

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

Acest articol: Internet Si Aplicatii Web (ID: 149940)

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

Internet Si Aplicatii Web

Copyright Notice

Terminologia Matematica din Geometrie și Trigonometrie

Detectia Fețelor Umane

Aplicatie Informatica Gestiunea Clientilor

Virtualizarea Si Instalarea Microsoft Active Directory

Managemantul Tranzactiilor In Baze de Date Relationale

Implеmеntarеa Sistеmului Еrp Sap R 3 la Еnеl Еnеrgiе Muntеnia

Copyright Notice

Similar Posts