Proiectarea Siturilor Web

Informatica

Proiectarea Siturilor Web

Byadmin ianuarie 1, 2024

LUCRARE DE LICENTĂ

PROIECTAREA SITURILOR WEB

CUPRINS

Cuprins

Lista figurilor

Cap. 1 – Introducere

Cap. 2 – Limbajul HTML

2.1. Structura generală a unui document HTML

2.2. Paragrafe

2.3. Liste

2.4. Tabele

2.5. Imagini

2.6. Legaturi

2.7. Specificatia XHTML 1.0

Cap. 3 – Limbajul JavaScript

3.1. Prezentarea limbajului JavaScript

3.2. Aspecte fundamentale ale limbajului JavaScript

Cap. 4 – Limbajul PHP

4.1. Introducere

4.2. Sintaxa PHP

4.3. Variabile si Stringuri PHP

4.4 Instructiuni PHP

4.5 Tablouri PHP

Cap. 5 – Prezentarea unui site personal

Concluzii

Bibliografie

LISTA FIGURILOR

CAPITOLUL 1 INTRODUCERE

In secolul XX,cel mai mare eveniment tehnologic și social in acelasi timp a fost apariția Internetului .Drăgănescu afirma că „ în esență societatea informațională este societatea care se bazează pe Internet ”. Web-ul a devenit un nou mediu de publicare a informației.Site-urile web sunt folosite pentru pentru a promova companiile și produsele sale,presta servicii și informații ,facilita comunicarea.

In capitolele urmatoare voi prezenta tehnologiile si limbajele care pot fi folosite la construirea unui site (HTML,XHTML,XML,JavaScript,PHP).

CAPITOLUL 2 LIMBAJUL HTML

Limbajul HTML – HyperText Markup Language – este un limbaj de marcare utilizat pentru crearea paginilor Web.Un marcator (sau tag) este cuprins intre caracterele <si>.Majoritatea tagurilor au un tag de sfarsit,acesta avand acelasi nume insa precedat de simbolul /.

Exemplu de marcatori:

Marcatorul b are tag de sfarsit ,iar br este de sine statator.

In cazul in care avem deschise mai multe taguri,acestea se inchid in oridine inversa fata de cum au fost deschise (ultimul tag deschis va fi primu inchis).

Corect: Gresit:

<p><b>Text corect</b></p> <p><b>Text incorect </p></b>

Un tag poate sa contina unul sau mai multe atribute .Acestea sunt perechi de forma nume=”valoare”

Exemple de atribute:

<p align=”center”>paragraf centrat</p>

Comentariile sunt cuprinse intre <! – – si – ->

Exemplu de comentariu <! – – comentariu – – >

2.1.Structura generala a unui document HTML

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0Transitional//EN”

”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>Unitiled Document</title>

</head>

<body>

Lucrare de Licenta

</body>

</html>

Mai intai se defineste tipul documentului ( cu DOCTYPE),in cazul nostru este vorba de XHTML 1.0.Informatiile sunt cuprinse intre marcatorul html,iar acesta contine doua sectiuni : head si body.In partea de head vor fi cuprinse informatiile utile pentru navigatorul Web sau pentru ale aplicatii,cum ar fi motoarele de cautare.Marcatorul title va contine un text care va fi afisat pe bara de titlu a navigatorului Web.De regula, sectiunea body va cuprinde informatiile care vor fi vizibile in suprafata de afisare a ferestrei navigatorului.

2.2 Paragrafe

Pentru inserarea de paragrafe avem la dispozitie urmatoarele taguri:

Dintre atributele suportate mentionam:

Paragrafele (si in general documentele care introduc informatiile vizibile celor care viziteaza paginile Web) vor fi scrise in sectiune body a documentului HTML.

Exemple de paragrafe :

<p align=”justify”>Pargraf aliniat la stanga si la dreapta </p>

<h1 align=”center”>Titlu aliniat centrat</h1>

<h5 align=”right”>Titlu 5 aliniat la dreapta<h5>

2.3 Liste

Pentru definirea de liste nenumerotate putem utuliza marcatorul ul, iar pentru numerotate ol.

Ambele poseda tag de sfarsit .Un element ail listei este cuprins in interiorul tagului li.

Elementele liste nenumerotate sunt precedate de un anumit simbol.Pentru a stabili simbolul dorit se va utiliza atributul type pentru marcatorul ul,cu una din valorile:disc(pentru buline,care este implicita),square(pentru patrat) si circle(pentru cercuri).

Exemplu de lista nenumeroatata care utilizeaza patratele:

<li>trandafiri</li>

<li>lalele</li>

<li>narcise</li>

</ul>

Pentru liste numerotate atributul type poate lua una din valorile:

1 pentru numerotarea cu cifrea arabe(care este si implicit),

a pentru litere mici,

A pentru litere mari,

i pentru cifre romane mici,

I pentru cifre romane mari.

In plus listele numerotate poseda atributul de start care poate lua o valoare numerica.Aceasta indica valoarea de la care se incepe numerotarea.

Exemplu de lista numerotata cu cifre romane mari:

<li> Frozen</li>

<li> Planes</li>

</ol>

2.4 Tabele

Un tabel se defineste prin intermediul marcatorului table. Acesta poseda urmatoarle atribute importante:

Marcatorul tr stabileste o linie din tabel (eng. table row), iar in cadru acesteia pot aparea celule pentru capul de tabel (eng. table head), prin intermediul marcatorului th, sau /si celule cu date(eng. table data),caz in care se utulizeaza marcatorul td.

Exemplu de tabel aliniat centrat:

<th>Nume si prenume</th><!–definim capul de tabel –>

<th>Nr.absente</th>

</tr><!–s-a terminat prima linie–>

<td>Apetri Elisei</td><!–completam cu date–>

</tr>

<td> Mircea Constantin</td>

</tr>

<!–s.am.d –>

Marcatorii tr si td pot avea urmatoarele atribute: a

Un alt exemplu de tabel:

<th>Grupa 1</th>

<th>Grupa 2</th>

</tr>

<tr>

<td colspan=”2” align=”center”>Limba germana</td>

</tr>

<tr>

<td>Informatica</td>

</tr>

<tr>

<td>Istorie</td>

</tr>

</table>

Tabelele sunt utilizate si in cazul in care se doreste scrierea pe mai multe coloane sau,in general,cand se doresc diverse alinieri.

2.5 Imagini

Imaginile sunt stocate in fisiere separate cum ar fi cele in format GIF,JPEG sau mai nou PNG. Marcatorul utilizat este img, iar acesta nu poseda tag de sfarsit. Principalele atribute sunt:

De regula, sunt specificate dimensiunile reale ale imaginilor. Marirea acestora nu este recomandata deoarece se pierde in calitatea acesteia, iar miscorarea se poate realiza intr-un editor grafic, astfel miscorandu-se dimensiunea fisierului (ceea ce duce la o incarcare mai rapida a intregii pagini Web).

Exemplu de utilizarea a imaginilor:

<!– specificarea adresei absolute–>

<!– specificarea adresei relative si a dimensiunilor reale a imaginilor–>

<img src=”messi.jpg” alt=”fotbalist (Messi)” height=”300” width=”100”

2.6 Legaturi

Pentru a stabili (hiper) legaturi intre paginile Web (sau in cadrul aceleiasi pagini) se utilizeaza marcatorul a. Acesta poseda atributul href, iar ca valoarea aceasta are o adresa relativa sau absoluta. Astfel se pot crea trimiteri la documente de diferite tipuri (de exemplu: PDF,GIF,ZIP,XML,VRML).

Exemple de legaturi:

<!– referinte relative –>

<a href=”prezentare.zip”>Laborator 1</a>

<a href=” maybach.jpg”>Prototip Maybach</a>

<!– referinte absolute –>

<a href=”http://www.infoiasi.ro”>Facultatea de Informatica</a>

2.7.Specificatia XHTML 1.0

XHTML (sau Voyager) este numele de cod al HTML reformulat ca aplicatie a XML-ului, definind profilele documentelor ca spatii de nume,avind fiecare propria sa adresa (data de un URL)

Documentele XHTML pot fi etichetate atit ”text/html” cit si ”text/xml”, elementul radacina fiind<html>. Spatiile de nume XHTML sint definite la adresa

http://www.w3.org/1999/xhtml si vor putea fi incluse in documentul XHTML prin atributul xmlns.

Declararea tipului de documente XHTML se va face prin intermediul constructiei DOCTYPE, ca in SGML, existind trei tipuri de definitii de documente conform specificatiei.

HTML 4: tipul strict, tranzitional si pentru cadre (frames), ca in exemplul urmator:

<!DOCTYPE html

PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”DTD/xhtml1-strict.dtd”

Modelul procesarii

Documentele XHTML sint procesate in urmatorii pasi:

1. decodificarea datelor preluate (via protocol HTTP) de pe server;

2. descompunerea in atomi lexicali XML 1.0;

3. analiza sintactica XML, rezulind un arbore sintactic ulterior accesat si manipulat prin DOM (Document Object Model);

4. validarea optionala;

5. formatarea, folosind foi de stiluri si alte semantici specificate (pentru formulare si applet-uri), pentru a produce o ierarhie a obiectelor formatate;

6. reprezentarea (pe un anumit suport) a obiectelor formatate.

Navigatoarele executa acesti pasi intr-o mainiera concurenta.

Documentele HTML pot fi convertite in documente XHTML de Tidy, aplicatie dezvoltata si pusa gratuit la dispozitie de Consortiul WWW.

Modulele XHTML

XHTML ofera mai mult decit o reformulare a HTML-ului in XML, modularizind HTML printr-o colectie de multimi de tag-uri, blocuri de constructie a produselor Web.

In prezent, modularizarea limbajului HTML este in derulare, in urmatoarele luni dindu-se publicitatii varianta finala.

Modulul de baza

specifica tipurile de date si modelele de baza XHTML, impreuna cu setul minimal de elemente pentru scrierea unui document HTML: html, head, title, base, meta, link, body, h1-h6, p, br, a, span, div.

Modul Tranzitional

specifica acele elemente din HTML 4.0 – profilul tranzitional, dar excluse din profilul strict al HTML: basefont, font, center, s, u, continind si definitiile unor atribute ca border, align, noshade.

Modulul de stiluri

ofera elementul style, atributul style si defineste utilizarea elementului link.

Modulul script

specifica elementele script si noscript.

Modulul de fonturi

specifica elementele relative la fonturi existente in HTML 4.0 – varianta stricta: tt, b, i, big, small.

Modulul de frazare

defineste elemente care ofera informatii despre anumite adnotari ale autorului, in cadrul frazei: abbr, acronym, address, blockquote, q, cite, code, dfn, kbd, samp, var.

Modulul de inflexiune

specifica acele elemente frazale care nu ofera informatii referitoare la un domeniu ci doar o indicatie despre intentia autorului: em, pre, strong, sub, sup, hr.

Modulul de editare

ofera elemente referitoare la editarea documentelor, ca del si ins.

Modulul liste

specifica elementele dl, dt, dd, ul, ol, li.

Modulul de formulare

specifica elementele referitoare la scrierea formularelor:form, input, textarea, select, optgroup, option, label, button, fieldset, legend, isindex.

Modulul de tabele

contine elementele table, caption, col, colgroup, thead, tbody, tr, th, td.

Modulul de applet-uri

Contine applet si param pentru suportul applet-urilor Java

Modulul obiecte

specifica elemente ca object si param.

Modulul cadre

specifica elementele referitoare la utilizarea cadrelor: frameset, frame, iframe, noframes.

XHTML fiind bazat pe XML este case-sensitive, tag-urile trebuie sa fie scrise cu caractere mici. Daca agentul-utilizator (browserul) nu recunoaste un element, va prelua continutul lui aflat intre tag-urile de inceput si de sfirsit. Un atribut nerecunoscut va fi, de asemeni, ignorat , iar o valoare necunoscuta a unui atribut va fi inlocuita cu valoarea implicita a acestuia.

Atributul de tip ID ( identificatorul in XML) va fi considerat ca fragment de document.

De remarcat faptul ca referitoare la utilizarea cadrelor: frameset, frame, iframe, noframes.

XHTML fiind bazat pe XML este case-sensitive, tag-urile trebuie sa fie scrise cu caractere mici. Daca agentul-utilizator (browserul) nu recunoaste un element, va prelua continutul lui aflat intre tag-urile de inceput si de sfirsit. Un atribut nerecunoscut va fi, de asemeni, ignorat , iar o valoare necunoscuta a unui atribut va fi inlocuita cu valoarea implicita a acestuia.

Atributul de tip ID ( identificatorul in XML) va fi considerat ca fragment de document.

De remarcat faptul ca toate valorile atributelor (chiar si cele numerice) vor trebui incluse intre ghilimele. Astfel, constructii precum <table width=600 align=right> sint eronate.

Anumite atribute in HTML puteau fi scrise fara a le asocia valori (asa-numitele atribute booleene) i.e. noshade, readonly, noresize, compact ori checked, succedate.

In XHTML vor trebui scrise valorile lor , ca in exemplu urmator:

<hr

size=”2” align=”right” noshade=”noshade”/>.

Situatia s-a schimbat odata cu aparitia XML-ului, standardizat in mare parte de Consortiul Web si sprijinit de multe companii si organizatii, in prezent intr-o dezvoltare fara precedent. XML a dovedit punctele slabe a limbajului HTML: lipsa de adaptabilitate si flexibilitate si de suport pentru programe si modularizare, necesitatea rescrierii conform filosofiei XML fiind vitala pentru proiectantii de aplicatii Web. XHTML 1.0 este doar inceputul unui proces complex de schimbari, modalitatile alternative de accesare a Internetului fiind deja intrevazute de futurologii spatiului virtual. Familia XHTML a fost gindita sa sprijine interoperabilitatea navigatoarelor Web multi-platforma care vor trebui sa se adapteze unei piete mondiale electronice in plin dinamism. Cert este ca epoca HTML- ului clasic este la final.

CAPITOLUL 3 LIMBAJUL JAVASCRIPT

3.1 Prezentarea limbajului JavaScript

Initial, JavaScript a fost dezvoltat de Netscape sub denumirea LiveScript, un limbaj de scriptare care intentiona sa extinda capacitatile HTML si sa ofere o alternativa partiala unui numar mare de scripturi CGI pentru prelucrarea informatiilor din formulare si pentru a adauga dinamism in paginile utilizatorilor. Dupa lansarea limbajului Java, Netscape a inceput sa lucreze impreuna cu firma Sun pentru a oferi un limbaj de scriptare a carui sintaxa si semantica erau strans legate de Java – motiv pentru care denumirea a fost schimbata in JavaScript. Dupa finalizarea limbajului, Netscape si Sun l-au lansat impreuna.

Una dintre motivatiile care au stat la baza limbajului JavaScript a fost recunoasterea necesitatii ca logica si inteligenta sa existe si pe partea de client, nu doar pe partea de server. Daca toata logica este pe partea de server, intreaga prelucrare este dirijata de server, chiar si pentru sarcini simple, asa cum este validarea datelor. Asigurarea de logica in interiorul browserului il inzestreaza pe client si face ca relatia sa fie cu adevarat sistem client – server.

Dupa lansarea sa, in decembrie 1995, JavaScript si-a atras sprijin din partea principalilor distribuitori din domeniu, printe care Apple, Borland, Sybase, Informix, Oracle, Digital, HP si IBM. Situatia s-a complicat insa atunci cand a intervenit Microsoft. Intelegand importanta scriptarii Web, Microsoft a dorit sa ofere suport si pentru JavaScript. Cand Netscape a preferat sa acorde licenta de tehnologie companiei Microsoft in loc sa o vanda, Redmond a analizat JavaScript, bazandu-se pe documentatia publica, si a creat propria sa implementare, JScript 1.0, care este recunoscuta de Microsoft Internet Explorer versiunile 3.0 si ulterioare. JScript 1.0 este aproximativ compatibil cu JavaScript 1.1 care este recunoscut in Netscape Navigator 3.0 si browserele ulterioare.

Pe langa JScript, Microsoft are propriul sau concurent pentru JavaScript, numit VBScript, realizat pentru patrunderea pe Web a actualilor programatori VB. In esenta, VBScript este un subset al limbajului Visual Basic. Deoarece Netscape nu recunoaste VBScript, principalele sale utilizari sunt pentru intraneturile ( sau siturile Internet ) unde se inregistraza o abundenta de utilizatori Microsoft Internet Explorer.

In prezent,JavaScript este stadardizat de o organizatie internationala de standardizare, ECMA. Desi standardul ECMA este util, atat Netscape cat si Microsoft au propriile lor implementari ale limbajului (JavaScript si JScript) si continua sa extinda limbajul dincolo de standardul de baza.

3.2. Aspecte fundamentale ale limbajului JavaScript

a) JavaScript poate fi incorporat in HTML

De obicei, codul JavaScript este gazduit in documente HTML si executat din interiorul lor. Cele mai multe obiecte JavaScript au etichete HTML pe care le reprezinta, astfel incat programul este inclus la nivelul esential, pe partea de client, al limbajului. Pentru a fi un programator JavaScript eficient, trebuie sa cunoastem caracterisiticile HTML.

JavaScript foloseste HTML ca modalitate de a sari in cadrul de lucru al aplicatiilor pentru Web si-i extinde capacitatile normale, asigurand evenimente pentru etichetele HTML si permitand acestui cod condus de evenimente sa se execute din interiorul sau.

b) JavaScript este dependent de mediu

JavaScript este un limbaj de scriptare, nu un instrument in sine si pentru sine. Software-ul care ruleaza de fapt JavaScript este motorul de de interpretare din mediu – Netscape Navigator, Microsoft Internet Explorer sau unul din motoarele pe partea din server. Cand este inclus intr-un document HTML, JavaScript depinde de browser pentru a fi recunoscut. Daca browser-ul nu-l recunoaste, programul va fi ignorat, ba chiar mai rau – daca nu tinem seama de browserele neacceptate – programul JavaScript in sine poate fi afisat ca text pe pagina HTML.

c) JavaScript este un limbaj interpretat

Ca majoritatea limbajelor de scriptare, JavaScript este interpretat de browser inainte de a fi executat. JavaScript nu este compilat in binar – ca un fisier EXE -, ci ramane parte a documentului HTML la care este atasat. Dezavantajul unui limbaj interpretat este ca executarea programului dureaza mai mult, deoarece browserul compileaza instructiunile in timpul rularii, chiar inainte sa le execute. Avantajul consta in faptul ca este mult mai usor de actualizat codul sursa.

d) JavaScript este un limbaj felxibil in privinta tipului de date

JavaScript difera mult de limbajele stricte in privinta tipului de date, ca Java sau C++, in care trebuiesc declarate toate variabilele de un anumit tip inainte de a le utiliza. Spre deosebire de ele, JavaScript este mult mai flexibil. Putem declara varibilele de un anumit tip, dar nu suntem obligati sa facem aceasta declarare; putem lucra cu o variabila, desi nu-i cunoastem tipul specific inainte de rulare.

Exempluin care declaram o variabila numita myVal, ii atribuim o valoare de tip sir si apoi o afisam intr-o caseta de marcaje:

function flexible()

{

var myVal;

myVal =”Hello World!”;

alert(myVal);

}

In exemplul urmator nu vom mai declara variabila myVal inainte de folosire, lucru perfect valid in JavaScript, dar nu inacceptabil intr-un limbaj strict in privinta tipului de date:

function flexible()

{

myVal =”Hello World!”;

alert(myVal);

}

Pentru a ilustra mai bine flexibilitatea limbjului JavaScript, vom modifica si tipul valorii pe care o reprezinta variabila.

function flexible()

{

var myVal =”Hello world!”;

alert(myVal);

myVal = 123;

alert(myVal);

}

e) JavaScript este un limbaj bazat pe obiecte

Netscape si altii se refera la JavaScript ca la un limbaj de programare orientat spre obiecte (OOP), dar acesta este o deformare a adevaratului inteles a sintagmei OOP. JavaScript este un limbaj bazat pe obiecte. Cu alte cuvinte vom lucra cu obiecte predefinite care incapsuleaza date (proprietati) si comportamente (metode), dar nu le vom putea subclasa.

f) JavaScript este condus de evenimente

Mare parte din codul JavaScript va raspunde la evenimente generate de utilizator sau sistem. In sine, limbajul JavaScript este echipat pentru a trata evenimente. Obiectele HTML sunt imbunatatite pentru a accepta handlere de evenimente.

g) JavaScript nu este Java

Cele doua limbaje au fost create de companii diferite, iar motivul principal pentru simultitudinea denumirilor este legat exclusiv de marketing. Cateva diferente dintre cele doua limbaje ar fi

JavaScript este strans integrat in HTML, pe cand o miniaplicatie Java este legata la un document HTML prin eticheta <applet>.

Java este un limbaj mai robust si mai complet, fiind mai strict in privinta tipului de date, realemente orientat spre obiecte si detinand un compilator.

Java este folosit pentru miniaplicatii sau pentru aplicatii complete, pe cand JavaScript este folosit in primul rand pentru scripturi.

h) JavaScript este multifunctinal

Principalele sale scopuri sunt:

Infrumuseteaza si anima paginile HTML statice prin efecte speciale si animatie

Valideaza date fara a trece totul serverului

Dezvolta aplicatii pe partea de client

i) JavaScript evolueaza

Datorita evolutiei rapide a limbajului, va trebui sa ne intrebam nu numai daca browserul recunoaste JavaScript, ci si care versiune anume o recunoaste. In acest moment exista sase versiuni de JavaScript, de la 1.0 la 1.5.

j) JavaScript acopera diferite contexte

Programarea in JavaScript se indreapta mai ales spre scriptarea pe parte de client, dar se poate folosi si pe partea de server in Netscape Enterprise Server si in cadrul de lucru Active Server Pages de la Microsoft. In plus, versiunile recente de Microsoft Windows accepta JavaScript in mediul Windows Script Host (WSH).

JavaScript este un limbaj de programare simplu, de tip script, pentru definirea comportamentului elementelor dintr-o pagina Web. Nu este acelasi lucru cu mult mai complexul libaj de programare Java.

JavaScript poate specifica, in mod obisnuit in doar cateva randuri, raspunsurile la actiuni sau evenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului intr-un anumit punct sau stergerea unui anumit camp dintr-un formular.

Cea mai simpla aplicatie JavaScript este accea care determina aparitia si derularea unui mesaj:

<html>

<! –

alert (”Apasati OK !”)

–>

</script></head>

<body> O fereastra cu mesaj !!! </body>

</html>

Scriptul este incadrat de marcaje <script>..</script> si totul este inglobat intr-un comentariu astfel incat prgramele de navigare care nu interpreteaza JavaScript nu sunt derulate de scriptul in sine.

Multe evenimente pot fi gestionate cu JavaScript.

In urmatorul exemplu folosim evenimentul click.

Acest exemplu citeste numele si il saluta:

<HTML>

<HEAD>

<! –

function Udvozol(){

var name = document.forms[0].elements[0].value; alert(”Salut” +name);}

–>

</SCRIPT>

</HEAD>

Numele:<INPUT TYPE=”text NAME=”nume”>

<INPUT TYPE=”button”

VALUE=”Scrie numele si apsa!”

onClick=”Udvozol()”>

</FORM>

</BODY>

</HTML>

Un alt exemplu care modifica culoarea de fond a paginii:

<HTML>

<HEAD>

<!–

function galben(){

document.bgColor=”#FFFF00”;

}

function albastru(){

document.bgColor=”#0000FF”;

}

function initial(){

document.bgColor=”#FFFFFF”;

}

–>

</SCRIPT>

</HEAD>

<BODY>

<P>

<FORM>

</FORM>

</P>

</CENTER>

</BODY>

</HTML>

In exemplul urmator modificam o imagine atunci cand cursorul este pozitionat pe aceasta.

Elementul cheie este acela ca exista doua versiuni ale fiecarei imagini:imaginea”on”

(corespunzatoare cursorului pozitionat deasupra imaginii) si o imagine”off” (corespunzatoare cursorului pozitionat in exteriorul imaginii).

<html>

img_on=new Image();

img_off=new Image();

img1_on=new Image();

img1_off=new Image();

img2_on=new Image();

img2_off=new Image();

img1_on.src=”../../images/maideparte-off.gif”;

img1_off.src=”../../images/maideparte.gif”;

img2_on.src=”../../images/inapoi-off.gif”;

img2_off.src=”../../images/inapoi.gif”;

function activeaza(image) {

imagesrc=eval(image+’_on.src’);

document[image].src=imagesrc;

}

function dezactiveaza(image) {

imagesrc=eval(image+’_off.src’);

document[image].src=imagesrc;

}

</script>

</head>

<body>

<h3>Link-uri realizate cu doua imagini ai cu functii Javascript…</h3>

< A HREF=”../../stiluri.php” onmouseover=”activeaza(’img2 ’)”

onmouseout=”dezactiveaza(’img2’)”><imgsrc=../../images/inapoi.gif” NAME=’img2 ’

border=0></a>

< A HREF=”../../taguri.php” onmouseover=”activeaza(’img1’)”

onmouseout=”dezactiveaza(’img1’)”><imgsrc=”../../images/maideparte.gif” NAME=’img1’ border =0></a>

</center>

</body>

</html>

Elementul esential in acest exemplu este modul in care se pun in corespondenta evenimentele de activare si dezactivare cu evenimente specifice: OnMouseOver si OnMouseOut. Primul invoca procedura Javascript activate atunci cand mouse-ul este plasat deasupra imaginii, iar ce de-al doilea comuta imaginiea la situatia initiala atunci cand mouse-ul este in exteriorul acesteia.

Urmatorul exemplu este putin mai complicat. Este un ceas digital:

<html>

<h4>Un ceas digital……</h4>

<SPAN id=liveoclock style=”LEFT: 150px; POSITION: absolute; TOP: 17px; color:

blue”></SPAN>

<!–

function show5(){

if(!document.layers&&!document.all)

return

var Digital=new Date()

var hours=Digital.getHours()

var minutes=Digital.getMinutes()

var seconds=Digital.getSeconds()

if(hours>12){

dn=”PM”

hours=hours-12

}

if(hours==0)

hours=12

if(minutes<=9)

seconds=”0”+seconds

//change font size here to your desire

myclock=”<b>”+hours+”:”+minutes + ”:”+seconds+”</b>”

if(document.layers){

document.layers.liveclock.document.write(myclock)

document.layers.liveclock.document.close()

}

else if(document.all)

liveclock.innerHTML=myclock

setTimeout(”show5()”,1000)

}

//–>

</SCRIPT>

</body>

</html>

CAPITOLUL 4 LIMBAJUL PHP

4.1.Introducere

PHP este un limbaj de programare puternic ce ruleaza pe server cu care se

pot crea pagini web dinamice și interactive, este potrivit pentru dezvoltare web si poate fi inclus in codul HTML, este folosit pe scara larga si este gratuit, alternativa eficienta ASP de la Microsoft.

Un fișsier PHP poate conține text, taguri HTML si scripturi. Scripturile PHP sunt executate pe server, trebuie cunoscut HTML, limbaje script (browser side).

PHP suporta multe baze de date (MySQL, Informix, Oracle, Sybase,Solid, PostgreSQL,Generic ODBC etc.), si este open source.

Fisierele sunt returnate browser-ului ca fisiere ce contin doar cod HTML, au extensia ”.php”, ”.php3”, ”.php4”, sau ”.phtml”.

PHP este simplu de invatat și ruleaza eficient pe partea de server.

PHP este un limbaj de programare slab tipizat.

4.2 Sintaxa PHP

Sintaxa PHP este similara cu cea a limbajului C, este folosit adesea impreună cu

serverul web Apache pe diferite sisteme de operare si poate fi folosit si cu IIS pe sisteme Microsoft, nu se poate vedea prin ”View Source” pentru ca limbajul PHP este transformat pe server in HTML.

Codul PHP trebuie delimitat de <?php … ?>

Exemplu:

<html>

<body>

<?php echo ”Hello World”; ?>

</body>

</html>

Fiecare linie trebuie sa se termine cu ; ; este separator de instructiuni, textul se afiseaza folosind intructiuni de tipul: echo si print.

4.3.Variabile si Stringuri PHP

Variabilele se folosesc pentru a stoca numere, stringuri, valori întoarse din funcții

pentru a fi folosite ulterior, toate numele de variabile incepand cu $.

Exemplu: $val= valoare.

Rolul string-urilor este de a gestiona textul:

<?php

$txt=”Hello World”;

echo $txt;

?>

Operatorul de concatenare:

<?php

$txt1=”Hello World”;

$txt2=”1234”;

echo $txt1 . ” ”. $txt2;

?>

4.4. Instructiuni PHP

Instructiunea if…else

if (conditie)

cod ce se executa cand conditia e true;

else

cod ce se executa cand conditia e fals;

<?php

$d=date(”D”);

if ($d==”Fri”)

echo ”Have a nice weekend!”;

else echo ”Have a nice day!”;

?>

</body> </html>

Instructiunea else…if

<?php

$d=date(”D”);

if ($d==”Fri”)

echo ”Have a nice weekend! ”;

elseif ($d==”Sun”)

echo ”Have a nice Sunday!”;

else echo ”Have a nice day!”;

?>

</body> </html>

Instructiunea swich

switch (expr) {

case label1:

cod care se execută când expr = label1;

break;

case label2:

cod care se execută când expre = label2;

break;

default:

cod;

}

Exemplu: <html> <body>

<?php

switch ($x) {

case 1:

echo ”Number 1”; break;

case 2:

echo ”Number 2”; break;

case 3:

echo ”Number 3”; break;

default:

echo ”No number between 1 and 3”;

}

?>

</body> </html>

Instructiuni repetitive

while;

do – while;

for;

for – each;

4.5. Tablouri PHP

Fiecare element al unui tablou are un ID.

Tipuri de tablouri:

Numerice (ID numeric);

Asociative (fiecare ID este asociat cu o valoare);

Multidimensionale;

Tablouri numerice:

$names = array(”Peter”,”Quagmire”,”Joe”);

ID-ul numeric este generat automat.

ID-ul numeric generat manual.

$names[0] = ”Peter”;

$names[1] = ”Quagmire”;

$names[2] = ”Joe”;

<?php

echo $names[1] . ” and ” . $names[2] . ” are ”.

$names[0] . ”’s neighbors”;

?>

Tablouri asociative

Fiecare element este o pereche (cheie,valoare)

Exemplu:

$ages = array(”Peter”=>32,

”Quagmire”=>30,

”Joe”=>34);

<?php

echo ”Peter is ” . $ages[’Peter’] . ” years old. ”;

?>

Tablouri multidimensionale

Fiecare element al tabloului poate fi un tablou

$families = array (

”Griffin”=>array (”Peter”, ”Lois”, ”Megan”),

”Quagmire”=>array (”Glenn”),

”Brown”=>array (”Cleveland”, ”Loretta”)

);

echo ”Este ” . $families[’Griffin’][2] . ” membru al

familiei”;

Daca este afisat…

Validarea datelor de intrare se poate face pe client pentru a reduce incarcarea serverului dar se poate si pe server(recomandat daca se interactioneaza cu baze

de date).

Recomandat ca postarea unui formular sa se faca pe aceeasi pagina.

Daca formularul contine date eronate utilizatorului ii sunt prezentate erorile pe

aceeasi pagina.

CAPITOLUL 5 PREZENTAREA UNUI SITE PERSONAL

Site-ul contine un sistem protect auto-bot,pentru a putea fi accesat doar de oameni.

Fig 5.1.Interfata securizata auto-bot

Apasand pe butonul Enter Website esti redirectionat automat pe interfata site-ului.

Pagina principala a site-ului contine in partea de sus un meniu, care poate fi accesat de utilizatori, un buton de search in online (redirectionat automat pe un site partener) in partea stanga un logo tip GIF, iar dedesubt un simplu calendar de evenimente.

Fig 5.2. Pagina principala a site-ului

Accesand fiecare buton din meniu intri automat in fiecare ramura a meniului.

In partea de jos a site-ului este pus la dispozitie pentru utilizatorii inregistrati un chat.

Fig 5.3. Chat discutii utilizatori

Doar utilizatorii cei inregistrati pot avea acces la chat-ul site-ului, acestia isi pot alege numele si iconita potrivita.

In aceasta ramura a site-ului este prezentata fereastra de inregistrare utilizator.

Fig 5.4. Fereastra Inregistrare

Aici utilizatorii isi pot alege numele de utilizator si parola, imediat dupa inregistrare acestia pot beneficia de previlegiile de utilizator spre deosebire de cei care sunt doar musafiri.

Odata creat contul, utilizatori pot accesa fereastra logare pentru autentificare.

Fig 5.5 Fereastra Autentificare

In acesta ramura utilizatorii isi folosesc numele si parola persoana pentru a se putea autentifica.

In aceasta fereastra utilizatorii pot comunica cu admin-ul site-ului.

Fig 5.6. Fereastra contact

In aceasta rubrica utilizatorii care au probleme cu parola contului , sau informatii ce nu pot fi divulgate pe site, pot conversa cu administratorul site-ului.

Rubrica dedicata regulilor.

Fig 5.7. Fereastra Reguli

In aceasta rubrica sunt prezentate cateva reguli simple si destul de clare adresate utilizatorilor inregistrati cat si celor care se afla in vizita, reguli pentru toata lumea indiferent de privilegiile acestora.

Aceastra rubrica este dedicata profilului .

Fig 5.8. Rubrica despre

In aceast loc administratorul site-ului si-a rezervat dreptul de a face cateva precizari, poate principalele motive care au stat la baza inceperii acestui site dedicat domeniului auto.

Fereastra program, limbajul cod folosit pentru interfata site-ului, html,php si putin css.

Fig 5.9 (1) Limbaj cod interfata

Fereastra program, limbajul cod folosit pentru interfata site-ului.

Fig 5.9. (2) Interfata site

Fereastra program, limbaj cod folosit la pagina de inregistrare e site-ului.

Fig 5.10. Pagina inregistrare

Fereastra program, limbaj cod folosit la pagina de logare a site-ului.

Fig 5.11. Logare site

Fereastra program, limbaj folosit la interfata principala a site-ului.

Fig 5.12. (1)Interfata site

Fereastra program , limbaj cod folosit la pagina principala a site-ului.

Fig 5.12 (2) Pagina principala

Fereastra program, limbaj cod folosit in pagina ”reguli” de pe site.

Fig 5.13. (1) Pagina reguli

Fereastra program, limbaj cod folosit in pagina ”reguli” de pe site

Fig 5.13. (2) Pagina reguli

Fereastra program, limbaj cod folosit in pagina ”despre” de pe site.

Fig 5.14. (1) Ramura despre

Fereastra program, limbaj cod folosit in pagina ”despre” de pe site.

Fig 5.14. (2) Ramura despre

Fereastra program, limbaj cod folosit la rubrica contact a site-ului.

Fig 5.16. (1) Contact site

Fereastra program, limbaj cod folosit la rubrica contact a site-ului.

Fig 5.16. (2) Contact admin

CONCLUZII

BIBLIOGRAFIE

www.vwblog.ro

www.adobe.com

Sabin Buraga – „ Proiectarea siturilor web”, Editia A II-a, Editura Poliriom, 2005

Sabin Buraga – „ Aplicatii web la cheie”, Editura Polirom, 2003

Sabin Buraga – „ Situri web la cheie”, Editura Polirom, 2004

Horea Oros – „ Dezvoltarea aplicatiilor web”,

BIBLIOGRAFIE

www.vwblog.ro

www.adobe.com

Sabin Buraga – „ Proiectarea siturilor web”, Editia A II-a, Editura Poliriom, 2005

Sabin Buraga – „ Aplicatii web la cheie”, Editura Polirom, 2003

Sabin Buraga – „ Situri web la cheie”, Editura Polirom, 2004

Horea Oros – „ Dezvoltarea aplicatiilor web”,

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: Proiectarea Siturilor Web (ID: 150231)

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.

Proiectarea Siturilor Web

Copyright Notice

Sistem Informatic Pentru Managementul Flotelor din Domeniul Auto

Bazele de Date

Crearea Unei Aplicații Web Resonsive Folosind Cms

Portal Dezvoltat pe Baza Framework Ului WordPress

World Wide Web Si Internet

Retele Virtuale Private

Copyright Notice

Similar Posts