Laborator 3. HTML - formatare & PHP - arrays


Responsabil: Popovici Matei <pdmatei@gmail.com>

Data publicarii: 06-03-2009

Data ultimei modificari: 08-03-2009 (lamuriri suplimentare la task-uri)


1. HTML


1.1. Prezentare generala


HTML a aparut ca un raspuns la necesitatea de a descrie un set de informatii intr-un document, delimintand anumite sectiuni precum: titluri, paragrafuri, liste, legaturi cu alte documente si suplimentandu-le cu formulare interactive, imagini si alte obiecte specifice (ex: animatii swf, etc).


Pe langa acestea, HTML poate descrie modul de afisare si semantica unui document, si poate include cod "client-side" embedded (ex: JavaScript), cod interpretat de Browserul Web.


HTML are o structura arborescenta al carei radacini este tag-ul <html>. Cei mai importanti copii ai acestuia sunt tagurile: <head> si <body>.


Tagul <head> contine informatii generale despre document (meta-informatii) si continutul acestuia. (Meta-informatii = "informatii despre informatii")


Tagul <body> contine informatia efectiva asociata paginii web.


Pentru detalii despre tag-urile <html> si modalitatea de a redacta o pagina web consultati:

http://www.w3schools.com/html/default.asp


Fiecare tag html are o serie de proprietati.

(pentru lista completa de proprietati pentru tagurile html consultati:

http://msdn.microsoft.com/en-us/library/aa155110.aspx)


Acestea pot fi grupate in cateva categorii. Categoriile cele mai importante pentru noi sunt:


Proprietati generale: specifica proprietati particulare ale tag-ului. Exemple:

- proprietatea href asociata tag-ului <a> - specifica adresa documentului catre care "point"-eaza un link.

- proprietatea face asociata tagului <font> - specifica tipul fontului folosit pentru formatare.

- proprietatea name asociata tagului <input> - specifica numele asociat valorii introduse de utilizator.


Events (ex: onclick, onblur, onchange): Sunt utile pentru "embedding"-ul unui limbaj "client-side" si permit specificarea de actiuni particulare pentru diverse evenimente. Pot fi comparate cu listener-i.


Styles(ex: bgcolor, size, background): Utile pentru formatarea vizuala a elementului curent.


O obsevatie importanta este ca, desi nu toate obiectele impart aceleasi proprietati, la cea mai mare parte dintre ele, ultimele doua proprietati de baza se regasesc.

1.2. Formatarea uniforma a stilurilor

Limbajul HTML nu a fost conceput initial pentru formatarea-text a documentului. Tag-uri precum <p> - asociat cu un paragraf sau <h1> asociat cu un titlu, desi formateaza textul continut intr-un mod special, nu aveau decat functia de a delimita portiuni logice ale documentului.

Incepand cu specificatia HTML 3.2. au fost introduse tag-urile <font> si intregul set de atribute de formatare (culori, dimensiuni, font-uri, etc), provocand un haos la nivelul dezvoltatorilor de site-uri. Pentru a obtine formatarea dorita, fiecare portiune de document trebuia sa primeasca atributele necesare (de culoare, de font, etc), chiar daca ele erau deseori aceleasi.

Rezolvarea la aceasta problema a fost introducerea unui "nivel de prezentare" care sa izoleze elementele de formatare/stil si sa le elimine din documentul HTML propriu-zis. Acest lucru s-a realizat prin introducerea CSS (Cascading Style Sheets)

CSS permite definirea stilurilor in fisiere separate (*.css) si asocierea acestor stiluri cu elemente din HTML.

Exemplu:

.content {

padding-left:15px;
padding-top:50px;
font-family:Tahoma;
color:#333333;
font-size:11px;
font-weight:bold;

}

Stilul content formateaza un tag HTML astfel: impune o margine-sus de 15 pixeli si una stanga de 50 pixeli (in raport cu alte elemente HTML existente); apoi seteaza font-ul default pentru acel tag, culoarea acestuia, dimensiunea font-ului, si in final specifica in plus ca fontul redat sa fie bold.


Tagul HTML definit astfel:

<p class="content"> Text-ul meu <p>

va formata textul continut dupa specificatiile de mai sus.


Un fisier CSS poate contine unul sau mai multe stiluri, definite in maniera de mai sus.

Includerea unui fisier de stiluri .css intr-un document HTML se face cu tag-ul:


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


Acesta trebuie introdus in interiorul tagului <head> al documentului HTML.


Exista 3 metode de a specifica stiluri/formatari folosind CSS. Prima este cea utilizata mai sus (se observa prefixul .) Ea asociaza o formatare cu o "clasa".

Toate tag-urile ce au setata proprietatea class="content" vor fi formatate in consecinta. A doua metoda este asocierea unui stil direct elementului HTML care-l intrebuinteaza. Codul CSS

p {

width:750px;

font-family:Tahoma;

}


daca este inclus intr-o pagina HTML, va formata TOATE tagurile <p> la fel, si anume: cu lungimea fixa de 750 pixeli si avand fontul interior Tahoma.

A treia metoda este folosind "id"-uri. Ea este aparent similara cu prima varianta si functioneaza astfel:


#noLine {

text-decoration:none;

}

iar codul asociat:

<a id="noLine"> Link fara subliniere</a>


Se observa similiaritatea cu prima metoda: proprietatea id inlocuieste class, iar prefixul . este inlocuit cu #.


Pe langa aceste variante, stilurile se pot defini si mixt, astfel:

a .myClass {


}


Acest stil va fi aplicat tuturor tag-urilor <a> ce au clasa "myClass".

Pentru detalii consultati:

http://www.w3schools.com/css/css_intro.asp


Diferenta intre atributele id si class

Atributele class si id, desi din punct de vedere al stilurilor sunt similare, sunt totusi diferite. Atributul class se refera intotdeauna la "o clasa de tag-uri", ce pot avea (de exemplu) acelasi stil. Atributul id se refera la un tag UNIC. Desi broswerele ignora acest aspect in afisarea paginilor web, este considerata o "eroare" a avea doua tag-uri html cu acelasi id.

Asadar, este recomandat in atribuirea de stiluri & formatari sa folosim class. Utilitatea proprietatii id va fi mai clara in laboratoarele ce urmeaza (si in legatura cu JavaScript).


1.3. XHTML

Explozia industriei web si "lejeritatea" cu care browserele parseaza si interpreteaza codul HTML (in multe situatii diferit), precum si absenta conceptului de eroare relativ la limbajul HTML (o pagina incorecta va fi totusi afisata, si in unele cazuri acceptabil sau chiar corect) au condus la o situatie (actuala) in care majoritatea paginilor web contin erori.

XHTML este o incercare de a contracara acest fenomen. Spre deosebire de ultimele versiuni HTML, XHTML ca si standard-de-limbaj are reguli stricte.

Enumeram cateva dintre ele:

- Tag-urile trebuie sa fie intr-o relatie valida parinte-copil (properly nested).

(coduri de tip <b><i>Text </b></i> nu mai sunt admise; observati intercalarea tagurilor in exemplu)

- Tag-urile trebuie sa fie intotdeauna inchise; tagurile simple trebuie inchise cu /> (spre exemplu, tagul <br> din HTML 4.0 este valid scris in XHTML astfel: <br /> )

- Toate tagurile sau proprietatile acestora trebuie scrise lowercase (tagurile <A HREF...> nu sunt valide in XHTML; varianta valida este <a href... > )

- Fiecare tag trebuie sa aiba un parinte unic


Pentru detalii consultati:

http://www.w3schools.com/xhtml/xhtml_why.asp


DOCTYPE


Un document valid html, trebuie sa specifice (inaintea tag-ului html), un tag <!DOCTYPE> Acest tag specifica browser-ului cum trebuie interpretat documentul html adiacent (ca html 4.0 ca XHTML, etc)

Pentru detalii vizavi de definirea DOCTYPE consultati:a

http://www.w3schools.com/tags/tag_DOCTYPE.asp


Folositi urmatoarea resursa pentru validarea paginilor voastre HTML (si a CSS-urilor asociate): http://validator.w3.org/ O pagina validata HTML si CSS va avea (aproape) intotdeauna o afisare stabila vizavi de browserul folosit.


2. Array-uri in PHP


Crearea unui array nou. Array-ul se creeaza specificand perechile cheie-valoare:

<?php
$arr = array("foo" => "bar", 12 => true);

echo $arr["foo"]; // bar
echo $arr[12]; // 1
?>

Modalitatea de a crea un array fara a specifica cheile. Se obseva ca acestea primesc valori implicite:


<?php
// This array is the same as ...
array(5 => 43, 32, 56, "b" => 12);

// ...this array
array(5 => 43, 6 => 32, 7 => 56, "b" => 12);
?>

Modalitatea de a crea un array vid:


<?php
$arr = array();

?>

OBS: Array-urile in PHP 5 sunt tipuri primitive, ele sunt transmise prin valoare si nu prin referinta (spre deosebire de obiecte). Asadar operatorul = intre array-uri are semnificatia copierii.


Operatii utile pe array-uri:


Parcurgerea unui array este urmatoarea:


<?php

foreach ($vector as $key => $value)

echo "$key:$value";

?>

Pentru a elimina o pereche cheie-valoare dintr-un array, folositi:

unset($row["key-name"]);


Task-uri:

Scrieti o clasa UserCollection utila pentru parcurgerea si afisarea utilizatorilor dintr-un tabel.

Membrii clasei UserCollection au urmatoarea semnificatie:

$sortBy - contine campul dupa care se face sortarea
$sortType - contine tipul sortarii (ascendenta / descendenta)
$restrictArray - contine un array care specifica eventuale restrictii dupa anumite coloane

(daca $restrictArray e de forma: ("email" => "test@email.com") atunci lista va contine doar Utilizatorii care au
campul email egal cu "test@email.com")

$result este folosit pentru a retine obiectul rezultat al query-ului (query pentru obtinerea listei)

Metoda getNextUser intoarce un obiect de tip User sau false (daca nu mai exista utilizatori de afisat);

Metoda refresh trebuie apelata daca parametrii listei sunt modificati, si dorim rularea unui nou query;



Folositi scheletul de cod asociat, si implementarea clasei User pusa la dispozitie.

Folositi index.php ca exemplu de folosire corecta a clasei UserCollection

7p

Formatati afisarea folosind tag-uri HTML imbricate in codul php. Folositi tabele, si un document .css pentru specificarea stilurilor.

Testati corectitudinea documentului vostru HTML (cat si CSS), folosind:

http://validator.w3.org/

3p

Bonus: Afisati colectia voastra pe pagini. Numarul total de inregistrari se imparte la numarul inregistrarilor pe pagina, si doar inregistrarile aferente unei pagini sunt afisate. (Pentru aceasta, stabiliti o constanta = numarul de Useri afisati pe o pagina si adaugati un membru pagina curenta, care sa afiseze doar utilizatorii de pe acea pagina.) Pentru limitare, folositi cuvantul cheie LIMIT in query-ul vostru.

3p