Tutorial 2 - Interfete web

Bine ati venit la tutorialul 2 de interfete web!
Va voi prezenta o mica aplicatie ce combina Ajax,Html,PHP si MySQL, care insereaza intr-un camp select anumite optiuni aflate intr-o baza de date.
Codul sursa il poti lua de la un link specificat de:
www.interfete-w3b.com/index.php?option=com_content&view=article&id=46&Itemid=34
(luati de acolo numele arhivei pentru fiecare tutorial)

Va recomand sa folositi un editor ce va arata numarul liniei, deoarece pentru a nu incarca in mod inutil tutorialul voi specifica mai mult numarul liniei decat codul sursa.(aveti grija doar sa nu modificati textul)

1. MySQL
Pentru tutorialele ce urmeaza va voi ruga sa faceti o baza de date intitulata 'test', prin faptul ca vom lucra doar cu ea.
In cadrul acesti baze de date va trebui sa creati un tabel intitulat 'tutorial2', cu un camp varchar (dimensiunea o alegeti voi in functie de necesitate, la mine este de 33), ce poate avea orice nume va doriti.
Inserati cateva informatii in noul tabel (nume, spre exemplu).

2. Html
Rolul html-ului va fi doar acela de a afisa select-ul cu informatiile luate din baza de date, sa includa codul javascript si sa il apeleze.

3. PHP-ul
In fisierul interogare.php, va trebui sa modificati liniile 2 si 3, astfel incat sa puteti avea o conexiune valida la baza de date (eu am folosit default...localhost,root,fara parola)
Explicatie:
Programul ia toate informatiile din baza de date si le memoreaza in variabila $query.
Pentru fiecare rand valid, voi afisa informatia din acel rand separata de ";". Folosesc acest simbol, prin faptul ca atunci cand Javascript(Ajax) va primi informatia de la server sa stie unde anume se termina o optiune si unde incepe o alta optiune (astfel incat in datele inserate in tabelul tutorial2 nu trebuie sa existe acest caracter special).
Desigur ca am fi putut insera direct informatia in HTML, folosind php-ul, dar acest tutorial foloseste avantajele AJAX, acela de a putea modifica dinamic informatia (scopul fiind cel care face diferenta, in aplicatia pe care o veti dezvolta ulterior).

4.Ajax (Javascript)
Functia ajax() este cea care ne va oferi informatiile necesare pentru campurile din select-ul nostru.
Initial (incepand cu randul 3 si pana la randul 26), se incearca initializarea variabilei xmlHttp. Primul try, incearca sa o initializeze pentru Opera,Safari,Firefox, urmatoarele incercari (ce folosesc ActiveXObject) de initializare sunt specifice pentru Windows Explorer.
Ulterior va fi atasat acestui obiect o functie ce trebuie sa se execute atunci cand starea obiectului se modifica (atunci cand primim informatii de la server). Ne intereseaza apoi ca readyState sa fie 4, adica informatia sa fie trimisa complet de catre server. Dupa ce stim ca server-ul a trimis toata informatie, o putem parsa pentru a o adauga select-ului din html.
Luam elementul select din html, folosind un id, spargem in atomi raspunsul de la server (in functie de caracterul ";", specificat anterior). Acum avand informatia in variabila 'vectorul', putem incepe sa o parcurgem si sa o adaugam. In primul rand, cream un nou nod cu tag-ul 'option' (linia 38), ii setam textul si valoarea ca fiind informatia din vector de pe pozitia corespunzatoare (liniile 39,40) si in final il adaugam in select (tinand cont din nou, de diferentele intre browsere).

Sper ca acest cod sursa sa va fie de folos!
Va astept si la urmatorul tutorial de interfete web.