Realizarea unei carti de oaspeti (GuestBook)
12.11.2008
In acest tutorial vom invata cum sa modificam un fisier XML folosind serverul PHP si atunci nu va mai trebui nici macar sa editam fisierul XML pentru adaugarea unei noi persoane, toate acestea fiind posibile de realizat dintr-o interfata WEB.
7501 afisari 1 Rating (7 voturi) 30 min

Necesita instalarea unui program auxiliar.

Cand ne vom construi situl vom dori sa permitem utilizatorilor sa ne lase
diverse mesaje. De asemenea aceasta mini-aplicatie poate fi privita si ca un
jurnal online (blog).

Unde va fi situata cartea de oaspeti ?

Un raspuns evident pentru aceasta intrebare este ca pe un server web.Serverul web este o aplicatie ce ruleaza pe un calculator care are rolul de a raspunde cererilor diverselor persoane care vor sa viziteze o anumita pagina. Astfel, in momentul in care dumneavoastra tastati in browserul pe care il folositi o anumita adresa (de exemplu http://www.actionscript.org) nu faceti decat sa cereti unei astfel de aplicatii anumite informatii (in acest caz prima pagina a sitului actionscript.org). Browserul dumneavoastra se numeste client pentru ca se comporta ca unul - el cere niste informatii, iar o anumita aplicatie care ii furnizeaza aceste informatii se numeste server.

Serverul poate rula sub diverse sisteme de operare. Deoarece Flash-ul este distribuit doar pentru Windows si MacOS (pentru Linux exista doar player) si deoarece majoritatea persoanelor care citesc aceasta carte (din Romania) au instalat Windows, vom folosi un server care sa ruleze sub acest sistem de operare. Un astfel de server web este Apache si versiunea de windows se numeste Apache2Triad. Situl de unde puteti descarca (gratuit) acest server este: http://sourceforge.net/projects/apache2triad/.

Dupa instalarea serverului (lucru pe care nu-l explic aici deoarece consta in apasarea repetata a unor butoane de tip "next") veti gasi in radacina partitiei C de pe calculatorul dumneavoastra un director "apache2triad" sau asemanator (asta in cazul in care nu ati schimbat calea in timpul instalarii; daca acest director nu este vizibil va trebui sa permiteti vizualizarea fisierelor ascunse). In Directorul "c:apache2triad" cautati directorul htdocs: aici vor fi pastrate toate documentele care vor fi servite de catre server clientului si in acest director creati un director propriu de exemplu "guestbook".

Deschideti browserul pe care il utilizati si tastati ca adresa urmatorul sir de caractere:http://localhost/guestbook/, aceasta fiind calea catre directorul creat. De fapt browserul va face o cerere serverului (care se afla tot pe calculatorul dumneavoastra - de aici "localhost" care ii va furniza o pagina web ce momentan nu contine nimic si furnizeaza informatii despre directorul guestbook.

Documentele ce pot fi trimise catre dumneavoastra de catre server sunt de cele mai variate: imagini, filme, MP3-uri, documente word, pdf. Browserul, totusi, pentru a intelege si a formata corect informatiile pe care vreti sa le puneti in pagina de web are nevoie de un format anume de document si anume (x)html. Toate documentele enumerate mai sus inclusiv cele html) sunt de obicei documente statice - adica nu sunt generate de fiecare data. Intr-un guest-book avem nevoie ca pagina furnizate de server sa se modifice de fiecare data cand cineva introduce un mesaj. Din acest motiv pe langa apache (serverul web) apache2triad a mai instalat un interpretor de scripturi si anume PHP6-ul.

Vom crea un fisier de test "index.php" care va contine urmatorul script:

<?PHP
phpinfo();
?>

Fisierul va fi copiat in directorul guestbook dupa care incercati sa accesati din nou adresa. Daca ati putut vizualiza mesajul atunci totul a decurs corect - puteti sterge fisierul "index.php".

Daca vizitatorii vor dori sa semneze in cartea dumneavoastra de oaspeti atunci va trebui ca mesajele ce sunt trimise de catre ei sa fie "memorate" undeva. Flash-ul nu poate scrie pe masina clientului fisiere (de fapt nu are voie sa modifice nici un fel de parametru de pe masina client care ar putea periclita buna-functionare a acesteia) si chiar daca ar gasi o metoda de a memora aceste informatii pe calculatorul local, nimeni nu va putea accesa aceasta informatie. Din acest motiv informatiile trimise de un vizitator trebuie sa fie pastrate pe calculatorul pe care ruleaza serverul si de fiecare data cand cineva intra, serverul trebuie sa stie sa construiasca o pagina care sa contina toate mesajele.

Flash-ul stie sa preia de pe server informatii in diverse formate: txt, xml, jpg, swf, flv etc. Se pot folosi foarte bine fisiere in format txt dar pentru a structura datele transmise intre client si server ne vom folosi de un fisier in format XML. Pentru acest exemplu informatiile din XML vor contine numele persoanei ce a introdus mesajul, mesajul propriu-zis, data la care a fost introdus mesajul respectiv adresa IP a calculatorului de la care a fost transmis mesajul (eventual o adresa de mail si una de web). Cu exceptia ultimei informatii, datele vor fi transmise de catre Flash-ul ce ruleaza pe masina clientului (am fi putut obtine data de pe server prin anumite comenzi PHP dar scopul nostru este de a exemplifica utilitatile Flash-ului si nu a PHP-ului).

Pentru acest exemplu vom folosi modulul domxml care vine deja instalat in cadrul Apache2Triad. Totusi in unele cazuri acesta nu este activat. Pentru a verifica daca acest modul este instalat deja, studiati continutul documentului rezultat in urma executarii comenzii phpinfo (exemplul precedent). In cazul in care modulul domxml nu este activat, cautati fisierul php.inf pe partitia C (cel mai probabil in directorul windowsului dar uneori in windowssystem si in interiorul acestuia decomentati linia:

extension=php_domxml.dll

copiati in continuare fisierul php_domxml.dll si iconv.dll in directorul system32 din directorul in care este instalat windowsul (ambele fisiere le veti gasi dand search in directorul in care a fost instalat apache-ul).

Ne vom abate putin de la Flash pentru a vedea cum construim un documewnt XML in PHP, cum adaugam in acest document o noua inregistrare si cum putem citi o anumita inregistrare (sau mai multe cu aceeasi caracteristica) din acest document. Toate fisierele din acest exemplu vor fi puse in directorul c:apache2htdocsguestbook. Documentul XML va avea un format simplu, conceput pentru a retine mesajele introduse de un vizitator (nu trebuie sa tastati acest document, el este doar pentru a exemlifica formatul):

<?xml version="1.0" ?>
<mesaje>
    <mesaj>
        <nume>Marian Tarpescu</nume>
        <msg>Imi place acest guestbook</msg>
        <data>09:19:47 [02.07.2006]</data>
        <identificare>
            <ip>193.226.24.84</ip>
            <mail>mariano@yahoo.com</mail>
            <web>http://www.marian.xhost.ro</web>
        </identificare>
    </mesaj>
    <mesaj>
        <nume>Amarie Alex</nume>
        <msg>Deoarece nu am macromedia Flash player instalat pe calculator a trebuit sa astept putin pentru incarcarea sitului. Nu se poate elimina acest inconvenient ?</msg>
        <data>16:23:51 [03.07.2006]</data>
        <identificare>
            <ip>191.122.43.6</ip>
            <mail>aalex@hotmail.com</mail>
            <web>http://www.alexx.ro</web>
        </identificare>
    </mesaj>
.......................
</mesaje>

Acest XML va trebui sa fie construit din datele transmise de catre Flash. Vom omite pentru inceput modul de transmitere a datelor din flash si vom incerca sa adaugam un nod nou obiectului XML aflat in formatul de mai sus. Nodul nou ce va fi adaugat va fi de fapt un nou continut de tip .... adica exact ce este transmis de catre o persoana.

Pentru a deschide orice script PHP vom pune tag-ul de inceput dupa care vom initializa variabilele care teoretic ar trebui sa fie transmise de catre Flash (vom vedea ulterior cum sunt transmise aceste variabile):

<?PHP
$nume = "Marian";
$msg = "Mesaj de adaugat guestbookului";
$mail = "marian@yahoo.com";
$web = "http://www.marian.ro";
$ip = getenv("REMOTE_ADDR"); // prea adresa IP a
 
//calculatorului vizitatorului
$data = date("H:i:s [d.m.Y]"); // data postarii mesajului

In continuare trebuie sa verificam daca fisierul in care stocam mesajele (care se va numi "mesaje.xml") exista deja pe hard-disk si in caz contrar sa cream acest fisier in format XML:

<?php if (!file_exists("mesaje.xml")){
    $doc = new_xmldoc('1.0');
    $root = $doc->add_root('mesaje');
    $filename="mesaje.xml";
    $fp = @fopen($filename,'w');
    if(!$fp) {
        die(mesaj_eroare=Nu pot crea fisierul XML');
    }
    fwrite($fp,$doc->dumpmem());
    fclose($fp);
}?>

Dupa acest pas fiserul va fi gasit si va putea fi deschis (fie din cauza ca tocmai a fost creat fie din cauza ca deja exista).Pentru a deschide fisierul trebuie sa ne folosim de comanda
domxml_open_file care din pacate necesita calea completa catre fisier. Din
acest motiv avem nevoie sa definim valoarea PATH ca mai jos. In cazul in
care calea unde ati stocat dumneavoastra „mesaje.xml” nu corespunde cu
cea data mai jos, modificati-o pentru a pointa spre locul unde este stocat
fisierul dumneavoastra:

<?php
define ("PATH", 'c:apache2htdocsguestbook');
if (!$doc = domxml_open_file(PATH . "mesaje.xml")) {
    echo " mesaj_eroare=Eroare la deschidere XML";
    exit;
}?>

Acum vom adauga o variabila care sa pointeze spre radacina documentului, variabila prin intermediul careia vom putea adauga noile valori:

<?php
$root = $doc->document_element(); //acum $root va pointa
// spre "mesaje"

Ne vom folosi în continuare de "new_child" pentru a adăuga un nod nou (respectiv un nod cu numele "mesaj" dar a cărui conţinut va fi format din alte noduri pe care le vom adăuga de asemenea folosind "new_child":

<?php
$mesaj_nou = $root->new_child('mesaj','');
<br />// în continuare adaugam nodul "nume" nodului "mesaj":
$nume_ = $mesaj_nou->new_child('nume',$nume);
<br />// adaugam nodul "msg" nodului mesaj:
$mesaj_ = $mesaj_nou->new_child('msg',$msg);
<br />// memoram ora transmiterii mesajului:
$data_=$mesaj_nou->new_child('data',$data);
<br />// adaugam nodul "identificare" nodului "mesaj":
$identificare_= $mesaj_nou->new_child ('identificare','');
<br />// adaugam nodul "IP" nodului "identificare":
$ip_ = $identificare_->new_child('ip',$ip);
$mail_ = $identificare_->new_child('mail',$mail);
$web_ = $identificare_->new_child('web',$web);
?>

Acum, in variabila $doc vor fi retinute tot arborele XML. Pentru a-l putea vizualiza sau scrie pe HardDisk ne vom folosi de functia dumpmem(). Modul de scriere a fisierului pe HDD este clasic si nu insistam asupra functiilor implicate, in final vom inchide scriptul PHP prin utilizarea marcajului final "?>":

<?php
$filename="mesaje.xml";$fp = @fopen($filename,'w');
if(!$fp) {
    die(' mesaj_eroare=Nu pot crea fisierul XML');
}
fwrite($fp,$doc->dumpmem());
fclose($fp);
echo "mesaj_eroare=OK";
?>

Salvati scriptul de mai sus cu numele "adauga.PHP" si copiati-l in directorul in guestbook din htdocs. Executati acest PHP de mai multe ori, scriind in browser: http://localhost/guestbook/adauga.PHP si apasând repetat "refresh". In acest mod veti crea un XML ce va contine mai multe norudi.

Dupa fiecare executie ar trebui sa obtineti o pagina care sa contina "mesaj=OK" si sa gasiti in directorul guestbook un fisier XML "mesaje.xml" care sa contina variabilele definite la inceputul PHP-ului (eventual de mai multe ori).

Scriptul PHP va rula pe server dar avem nevoie de o aplicatie de tip client care sa comunice datele (numele, mesajl, etc.). Aplicatia de pe client poate fi un formular HTML (caz in care aplicatie este mult spus) sau poate fi un obiect Flash.

Obiectul Flash va fi construit in trei parti (nu vom adauga un preloader la acest flash deorece este destul de mic si mesajele nu sunt - in general - foarte multe). Prima parte este cea care va afisa toate mesajele si este cea care va apare atunci când Flash-ul va fi deschis in browser. Partea a doua este constituita dintr-un formular care are rolul de a transmite datele catre PHP-ul construit mai devreme iar cea de-a treia parte va afisa un mesaj de confirmare (sau de eroare).

Vom construi guest-book-ul incercând sa folosind atât script cât si constructii grafice.

Drept constructii grafice veti realiza trei imagini reprezentând un plic, un glob pamântesc respectiv un cursor pentru scroll. Primele doua imagini vor reprezenta legaturi catre e-mailul respectiv pagina web a celui ce a postat mesajul (daca au fost introduse). Dupa ce au fost redimensionate la 12x12 pixeli, imaginile vor fi transformate in MovieClip (indiferent ca sunt imagini scalare - importate in Flash sau imagini vectoriale) si li se vor da ca nume de legatura valorile "pictograma_mail", "pictograma_web" respectiv "cursor_scroll".

Pentru inceput vom incarca fisierul XML (cel ce contine mesajele) si-l vom afisa. Urmatorul cod este cel mai banal atunci când vrem sa incarcam un obiect XML dintr-un fisier extern (nu vom incerca sa interpretam inca datele ci doar sa afisam continutul. Flashul pe care il veti crea va fi salvat in acelasi director in care este si fisierul XML si se va numi "guestbook.fla". Initial vom defini doar obiectul XML si vom afisa continutul sau.

Fisierul XML nu se va incarca instant de pe server; orice persoana care a utilizat vreodata internetul stie ca in anumite momente datele se incarca mai repede, alte dati mai incet. Dupa ce am dat comanda catre server sa ne trimita fisierul ce contine mesajele nu ne putem astepta ca la instructiunea imediat urmatoare informatiile sa fie deja la client. Din acest motiv ne vom folosi de evenimente - cum ar fi eventimentul incarcarii XML-ului in memorie. Codul (care va fi pus in primul cadru al unui nou document Flash) este urmatorul:

var mesaje = new XML();
mesaje.ignoreWhite = true;
mesaje.onLoad = function() {
trace (mesaje.toString());
};
mesaje.load("mesaje.xml");

In prima linie de cod se aloca memorie pentru obiectul XML, se ignora spatiile albe din cadrul XMLului (unui om ii este mai usor sa inteleaga continutul unui fisier XML daca este structurat asa cum este structurat mai sus... calculatorul nu are nevoie ca datele sa fie aliniate, mai mult spatiile albe precum tab-ul sau spatiul dauneaza interpretarii corecte a obiectului XML - acest lucru este valabil in Flash). In momentul incarcarii complete a XMLului in memorie se va executa (automat) functia "onLoad" care va afisa continutul obiectului XML. In finalul codului mai trebuie sa dam comanda serverului sa ne trimita fisierul XML: mesaje.load("mesaje.xml");

Ceea ce vrem noi sa facem este mai mult decât doar sa afisam XMLul. Trebuie sa formatam informatia sa apara cum ne place noua. Ştergeti codul initial (el a fost pus doar pentru a testa daca fisierul XML se incarca corect) si sa incercam sa scriem codul pentru adevaratul guestbook. Pentru inceput vom face câteva initializari:

_root._lockroot = true;
 
//dimensiunea scenei:
_root.maxx = Stage.width-1;
_root.maxy = Stage.height-1;
 
// tipurile de text cu care vom scrie in guestbook:
var textformat = new TextFormat("tahoma", 11, 0, false);
textformat.color = 0x003366;
var textformat_nume = new TextFormat("tahoma", 11, 0, true);
textformat_nume.color = 0x003333;
var textformat_data = new TextFormat("tahoma", 11, 0, false);
textformat_data.color = 0x003333;
 
//un obiect XML si o functie asociata incarcarii:
var mesaje = new XML();
mesaje.ignoreWhite = true;

In aceasta portiune din cod am setat proprietatea lockroot a scenei ca fiind adevarata. Aceasta proprietate este necesara pentru ca player-ul Flash sa stie unde trebuite sa incarce datele. Daca Flash-ul pe care tocmai il construiti va fi ulterior atasat (prin intermediul comenzii loadMovie) altui obiect Flash exista pericolul ca cele doua "root-uri" (al Flash-ului ce incarca respectiv din cel incarcat) sa se confunde. Prin blocarea radacinii8 obiectului Flash se evita aceasta problema.

Preluam dimensiunile scenei pentru ca guestbook-ul sa poata fi afisat corect indiferent de dimensiunea scenei (deci ulterior veti putea altera dimensiunea scenei fara a strica guestbook-ul) - pentru ca guestbookul sa fie totusi conform standardului deja folosit in exemplele anterioare, puteti seta dimensiunile scenei de pe acum la 640x480. Portiunea desenabila va fi asadar de la 0 la maxx pe axa X si de la 0 la maxy pe axa Y. In continuare setam trei tipuri de formatari ale textului: modul in care va fi afisat mesajul, numele respectiv data. Ultimele doua comenzi le recunoasteti din codul anterior. In continuare vom construi functia de afisare (de fapt afisarea se va produce in momentul incarcarii XMLului in memorie deci este normal ca aici sa postam toate comenzile care vor formata mesajele.

Vom construi aceasta functie in cativa pasi: primul pas este cel al construirii unui MovieClip in care vom afisa guestbook-ul:

mesaje.onLoad = function() {
//construim un background de culoare deschisa
_root.createEmptyMovieClip("guestbook", 0);
_root.guestbook.lineStyle(1, 0x000000, 50);
_root.guestbook.beginFill(0xffffff, 80);
_root.guestbook.moveTo(0, 0);
_root.guestbook.lineTo(maxx, 0);
_root.guestbook.lineTo(maxx, maxy);
_root.guestbook.lineTo(0, maxy);
_root.guestbook.lineTo(0, 0);
// atentie ! codurile ce vor urma se vor pune in
// continuare ca facand parte din aceeasi functie

Guestbook-ul va contine doua parti: cea in care vor fi afisate mesajele si cea in care se introduce un mesaj nou. Deocamdata construim prima parte - MovieClip-ul "guestbook" are rolul de a afisa mesajele. Atunci cand vom introduce datele acesta va fi in intregime ascuns. Constructia backgroundului foloseste functii deja folosite (in exemplul cu puzzle-ul) si din acest motiv nu le vom mai explica.

Mesajele vor depasi la un moment dat dimensiunea scenei. Din acest motiv vom construi un MovieClip care sa contina toate mesajele dar care va putea fi deplasat pe axa Y in cadul MovieClip-ului "guestbook" (ulterior acest MovieClip va fi mascat pentru a nu strica aspectul GuestBook-ului).

// construim un tabel ce se va putea deplasa sus-jos:
// in acest tabel vor fi "aninate" posturile
// si acest tabel va fi mascat de o masca
_root.guestbook.createEmptyMovieClip("tabel", 0);
//pozitia afisarii unui mesaj
poz_curent = 30;
//un sir continand toate inregistrarile:
var vector = this.firstChild.childNodes;

variabila "poz_curent" indica locul de unde se va incepe afisarea mesajelor in cadrul MovieClip-ului "tabel". In sirul "vector" vom regasi pe rand nodurile XMLului ce contin mesajele, numele, datele etc. Va trebui ca pentru fiecare element din acest sir sa construim o metoda "frumoasa" de afisare. Vom folosi o structura repetitiva pentru afisarea consecutiva a mesajelor si preluam datele din XML (nume, mesaj, data, mailul, adresa web):

for (i=vector.length-1; i>-1; i--) {
//preluam textul din nodul "nume"
nume_din_xml=vector[i].childNodes[0].firstChild.nodeValue;
//preluam textul din nodul "msg"
mesaj_din_xml=vector[i].childNodes[1].firstChild.
nodeValue;
data_din_xml=vector[i].childNodes[2].firstChild.nodeValue;
mail_din_xml=vector[i].childNodes[3].childNodes[1].
firstChild.nodeValue;
web_din_xml=vector[i].childNodes[3].childNodes[2].
firstChild.nodeValue;

Calculam spatiul ce va fi ocupat de fiecare mesaj:

var metrics:Object = textformat.getTextExtent
(mesaj_din_xml, _root.maxx-80);

Parametrii functiei getTextExtent sunt mesajul respectiv spatiul pe care vrem sa-l ocupe pe axa X (pe o linie vrem sa avem text care sa ocupe maxim _root.maxx-80 pixeli). De inaltimea pe axa Y returnata de getTextExtent ne vom ocupa ulterior. Deocamdata fiecarui mesaj ii vom desena o bara ce va contine numele celui ce a introdus mesajul, data si eventual doua legaturi catre adresa de mail si pagina web a celui ce a postat (in caz ca acestea au fost introduse):

_root.guestbook.tabel.lineStyle(1, 0x999999, 10);
_root.guestbook.tabel.beginFill(0xffffff, 30);
_root.guestbook.tabel.moveTo(25, poz_curent+20);
_rot.guestbook.tabel.lineTo(_root.maxx-50, poz_curent+20);
_root.guestbook.tabel.lineTo(_root.maxx-50, poz_curent);
_root.guestbook.tabel.lineTo(25, poz_curent);
_root.guestbook.tabel.lineTo(25, poz_curent+20);
_root.guestbook.tabel.endFill();

Dupa care vom desena inca un dreptunghi ce va constitui un fundal pentru mesaj dreptunghi a carui inaltime va varia de la mesaj la mesaj.

_root.guestbook.tabel.lineStyle(1, 0x333355, 10);
_root.guestbook.tabel.beginFill(0xffffff, 40);
_root.guestbook.tabel.moveTo(25, poz_curent);
_root.guestbook.tabel.lineTo(_root.maxx-50, poz_curent);
_root.guestbook.tabel.lineTo(_root.maxx-50,
poz_curent+metrics.textFieldHeight+25);
_root.guestbook.tabel.lineTo(25,
poz_curent+metrics.textFieldHeight+25);
_root.guestbook.tabel.lineTo(25, poz_curent);
_root.guestbook.tabel.endFill();

De remarcat este modul in care am calculat inaltimea mesajului folosind obiectul metrics: metrics.textFieldHeight+25.

In continuare vom construi (si acest lucru are loc pentru fiecare mesaj - inca suntem in structura repetitiva "for") un textField in care vom afisa mesajul:

_root.guestbook.tabel.createTextField("txt"+i, i+10, 30,
poz_curent+20, _root.maxx-80, metrics.textFieldHeight);
_root.guestbook.tabel["txt"+i].multiline = true;
_root.guestbook.tabel["txt"+i].wordWrap = true;
_root.guestbook.tabel["txt"+i].html = true;
_root.guestbook.tabel["txt"+i].selectable = false;
_root.guestbook.tabel["txt"+i].htmlText = mesaj_din_xml;
_root.guestbook.tabel["txt"+i].setTextFormat(textformat);

Proprietatea multiline indica faptul ca campul textual este capabil sa afiseze mai multe linii, wordWrap permite obiectului de tip textField sa treaca textul pe urmatorul rand atunci cand nu mai incape pe randul curent, proprietatea html va permite textField-ului sa "proceseze" putinele formatari HTML disponibile pentru acest obiect. De asemenea nu vom permite selectarea textului, vom atribui textField-ului textul preluat din XML (care a fost anterior copiat in variabila "mesaj_din_xml"), iar in final vom formata textul conform regulilor stabilite la inceputul documentului.

Intr-un mod aproape similar vom adauga (pe bara construita pentru fiecare mesaj) numele celui ce a introdus mesajul si data la care a fost introdus:

_root.guestbook.tabel.createTextField("txt_nume"+i,
i+10010, 30, poz_curent+1, 300, 25);
_root.guestbook.tabel.createTextField("txt_data"+i,
i+20010, 30, poz_curent+1, 300, 25);
_root.guestbook.tabel["txt_data"+i]._x = _root.maxx-90-
textformat_data.getTextExtent(data_din_xml).
textFieldWidth;
_root.guestbook.tabel["txt_data"+i].text = data_din_xml;
_root.guestbook.tabel["txt_data"+i].
setTextFormat(textformat_data);
_root.guestbook.tabel["txt_data"+i].selectable = false;
_root.guestbook.tabel["txt_nume"+i].selectable = false;
_root.guestbook.tabel["txt_nume"+i].text = nume_din_xml;
_root.guestbook.tabel["txt_nume"+i].
setTextFormat(textformat_nume);

In cazul in care adresa de mail si cea pentru pagina web sunt introduse vom adauga fiecarui mesaj cate o pictograma reprezentand legatura atre acestea:

if
((mail_din_xml.length>5)&&(mail_din_xml.indexOf("@">0)))
{
_root.guestbook.tabel.attachMovie("pictograma_mail",
"plic"+i, i+30010);
_root.guestbook.tabel["plic"+i]._y = poz_curent+4;
_root.guestbook.tabel["plic"+i]._x = _root.maxx-85;
_root.guestbook.tabel["plic"+i].mail = mail_din_xml;
_root.guestbook.tabel["plic"+i].onPress = function()
{
getURL("mailto:"+mail_din_xml);
};
}
if (web_din_xml.length>10) {
_root.guestbook.tabel.attachMovie("pictograma_web",
"webpage"+i, i+40010);
_root.guestbook.tabel["webpage"+i]._y = poz_curent+4;
_root.guestbook.tabel["webpage"+i]._x = _root.maxx-65;
_root.guestbook.tabel["webpage"+i].web = web_din_xml;
_root.guestbook.tabel["webpage"+i].onPress = function()
{
getURL(web_din_xml, "_blank");
};
}

In aceasta portiune de cod ne folosim de obiectele din biblioteca cu numele de legatura (linkage) pictograma_mail respectiv pictograma_web. Acestea au fost construite la inceputul exercitiului. In cazul in care pozitionarea pictogramelor nu este corecta (ar trebui sa apara in partea dreapta a barei pe care este afisat numele respectiv data) atunci puteti modifica paramterii _x, _y (adaugand sau scazand o constanta) pentru a le deplasa in pozitia dorita.

In finalul buclei nu vom uita sa incrementam valoarea pozitiei curente - altfel toate mesajele vor aparea suprapuse:

poz_curent += metrics.textFieldHeight+30;
} // aceasta paranteza termina "for"-ul

Am construit MovieClip-ul tabel. El are rolul de a afisa mesajele si precum am zis, in cazul in care acestea sunt mai multe decat incapea in ecran va trebui sa avem posibilitatea de a deplasa in sus sau jos acest tabel. Pentru aceasta avem nevoie - evident - de o bara de scroll. Bara de scroll va fi construita atunci cand vom apela urmatoarea functie (care apare inca in interiorul eventimentului onLoad asociat incarcarii XMLului):

function create_scroll_bar(lungime_tabel) {
    _root.guestbook.createEmptyMovieClip("cursor", 1);
    _root.guestbook.cursor._x = _root.maxx-30;
    _root.guestbook.cursor._y = 30;
    _root.guestbook.cursor.attachMovie("cursor_scroll","cursor_scroll", 2);
    _root.guestbook.cursor.onPress = function() {
    _root.onMouseMove = function() {
    _root.guestbook.tabel._y =
    _(_root.guestbook.cursor._y-30)*(lungime_tabel-
    _root.maxy+50)/(_root.maxy-60);
    updateAfterEvent();
};
this.startDrag(false, _root.maxx-30, 30,
    _root.maxx-30, _root.maxy-30);
};
    _root.guestbook.cursor.onRelease = function() {
        this.onMouseMove = null;
        this.stopDrag();
};
    _root.guestbook.cursor.onRollOut = function() {
        this.onMouseMove = null;
        this.stopDrag();
};
    _root.guestbook.cursor.onReleaseOutside = function(){
        this.onMouseMove = null;
        this.stopDrag();
};
}

Functia de mai sus are ca parametru de intrare dimensiunea MovieClipului "tabel" (de fapt atributul _height al acestui MovieClip). Dupa crearea unui MovieClip intitulat "cursor" - de care vom "apuca" cu mouseul atunci cand vrem sa deplasam tabelul respectiv pozitionarea lui in partea dreapta a guestbook-ului, ii atasam imaginea din biblioteca care are ca linkage id-ul "cursor_scroll" (element grafic construit sau adaugat odata cu pictogramele pentru mail si web). In continuare vom construi permite acestui cursor sa fie "apucat" si mutat - lucru destul de facil care seamana cu metoda de atasare a unui pointer nou mouse-ului (tutorial precedent). In acelasi timp cu repozitionarea cursorului de scroll, de fiecare data se recalculeaza pozitia pe axa y a MovieClip-ului "tabel" folosind regula de trei simpla.

Dunctia de mai sus va fi apelata doar daca dimensiunea tabelului depaseste dimensiunea scenei:

if (_root.guestbook.tabel._height>_root.maxy-50) {
    create_scroll_bar(_root.guestbook.tabel._height);
}

In finalul functiei ce trateaza eventimentul "onLoad" pentru XML trebuie sa construim o masca (pentru ca Movie-Clip-ul "tabel" sa nu atinga marginile superioara/inferioara a scenei):

    _root.guestbook.createEmptyMovieClip("masca", -100);
    _root.guestbook.masca.lineStyle(1);
    _root.guestbook.masca.beginFill(1, 100);
    _root.guestbook.masca.moveTo(25, 30);
    _root.guestbook.masca.lineTo(_root.maxx-50, 30);
    _root.guestbook.masca.lineTo(_root.maxx-50,
    _root.maxy-20);
    _root.guestbook.masca.lineTo(25, _root.maxy-20);
    _root.guestbook.masca.lineTo(25, 30);
    _root.guestbook.tabel.setMask(_root.guestbook.masca);
   // finalul functiei "onLoad"
    _root.mesaje.load("mesaje.xml?NoCache="+(new
    Date().getTime()));

Ultima linie trimite o cerere catre server pentru a descarca obiectul XML continut in "mesaje.xml". Ceea ce urmaeaza dupa numele fisierului nu este altceva decat o metoda de a convinge browserul sa nu furnizeze fisierul "mesaje.xml" din memoria chache ci sa ceara din nou serverului acest fisier.

Credeati ca daca ati afisat mesajele ati scapat ? Nici vorba ! Mai trebuie sa construiti un modul prin intermediul caruia sa adaugati un mesaj nou. Acest lucru desi nu este foarte complicat este important pentru ca aici "se observa" cel mai bine modul in care comunica Flash-ul cu PHP-ul. Vom construi pentru inceput (din script) un buton care va avea rolul de a ascunde MovieClip-ul "guestbook" - adica toate mesajele si va afisa altul "mesaj_nou" care va contine cateva campuri: nume, mesaj, adresa de email respectiv adresa web. Sa construim butonul:

 
_root.createEmptyMovieClip("buton_introdu_date", 1);
_root.buton_introdu_date.onRelease = function() {
    _root.buton_introdu_date._visible = false;
    _root.guestbook._visible = false;
    _root.mesaj_nou._visible = true;
};
with (_root.buton_introdu_date) {
    lineStyle(1,0xffffff,50);
    beginFill(0xffffff, 40);
    moveTo(0, 0);
    lineTo(85, 0);
    lineTo(85, 15);
    lineTo(0, 15);
    lineTo(0, 0);
    _x=_root.maxx-_width-50;
    _y=10;
    createTextField
    createTextField("btn_text",0,0,0,100,18);
    btn_text.text="Adaugam; mesaj"
    btn_text.setTextFormat(textformat_nume);
}

Am adaugat un nouMovieClip in radacina ("buton_introdu_date") si i-am atasat functia onRelease (ce va fi executata im momentul apasarii butonului). In aceasta functie vom ascunde butonul, guestbook-ul si vom afisa MovieClip-ul "mesaj_nou". Desenarea efectiva a butonului nu ridica o problema, gruparea "with" indica faptul ca urmatoarele comenzi sunt asociate MovieClip-ului _root.buton_introdu_date.

Afisarea continutului XMLului este partea cea mai anevoioasa, n cauza ca fiecare mesaj are o dimensiune proprie si backgroundul pentru fiecare dintre mesaje se intainde sub tot mesajul. Partea de introducere a datelor, insa, este statica si va contine mereu aceleasi campuri (care trebuie sa fie completate de utilizator). Din acest motiv vom crea aceasta portiune din guestbook folosindu-ne doar de instrumentele (Tools - bara din dreapta a Flash-ului) disponibile in Flash. Initial creati un dreptunghi destul de mare in care sa incapa cele patru campuri textuale si convertiti-l in MovieClip. Dati noului MovieClip numele de instanta "mesaj_nou". El va fi afisat in momentul in care veti apasa butonul de introducere a detalor. In acest MovieClip construiti patru campuri textuale statice - ele vor reprezenta etichetele: "Nume:", "Mail:", "Web:", "Mesaj:". Creati inca patru campuri dar de aceasta data de tip input, setati-le afisarea border-ului (din fereastra de proprietati) si numele de variabila ce identifica fiecare camp. Mai ramane sa creati trei butoane cu etichetele "Trimite", "Anuleaza" si "Reseteaza". In final, MovieClip-ul ar trebui sa semene cu cel din imaginea urmatoare:


Mai ramane sa atasati fiecarui buton cate un script (acest lucru il realizati efectuand click pe buton si completand in fereastra "Actions").

Butonului "Trimite" ii veti atasa un script care trimite variabilele din campurile textuale catre server:

on (release) {
    loadVariables ("adauga.php",this,"POST");
}

Comanda loadVariables are un rol dublu: pe de o parte transmite toate variabilele din MovieClip-ul curent - cel in care este situat butonul - catre fisierul PHP si in acelasi timp incarca variabila "mesaj_eroare" generata de catre scriptul PHP. Multe persoane trec cu vederea aceasta comanda si nu isi dau seama ca aceasta este de fapt baza comunicarii intre Flash si PHP (si daca tinem cont ca in ziua de azi nu putem fara sa comunicam intr-un fel cu serverul va veti da seama de importanta acestei comenzi). Asadar variabilele care sunt transmise fac parte din MovieClip-ul identificat prin "this" - adica MovieCLip-ul curent, datele sunt trimise la "adauga.php" si metoda de transmitere este "POST" - orice formular web are nevoie de o metoda de transmitere (GET este cealalta metoda dar care este folosita de obicei pentru a cere ceva de la server nu pentru a modifica starea serverului - noi vrem sa completam un XML deci vom folosi POST).

Butonului "Anuleaza" ii veti atasa un script care va va returna la mesajele guestbook-ului:

on (release) {
    this._visible = false;
    _root.guestbook._visible = true;
    _root.buton_introdu_date._visible = true;
}

Butonul "Reseteaza" are rolul de a sterge toate campurile formularului pentru a fi re-completate:

on (release) {
    this.nume = "";
    this.mail = "";
    this.web = "";
    this.mesaj = "";
}

In plus, revenind la scena principala, veti atasa MovieClip-ului "mesaj_nou" urmatorul cod (atasarea codului se face identic - selectare si scrierea codului in fereastra "Actions"):

onClipEvent (data) {
    if (this.mesaj_eroare == "OK") {
        this._visible = false;
        _root.guestbook._visible = true;
        _root.buton_introdu_date._visible = true;
        _root.mesaje.load("mesaje.xml?NoCache="+(new
        Date().getTime()));
}
}
    onClipEvent (load) {
    this._visible = false;
}

La inceputul acestui exemplu am convenit ca in cadrul PHP-ului sa fixam numele, mailul, pagina web si mesajul transmis. Pnetru ca informatiile sa fie primite corect de la Flash ar trebui sa inlocuim urmatoarele linii din codul PHP:

<?php
$nume = "Marian";
$msg = "Mesaj de adaugat guestbookului";
$mail = "marian@yahoo.com";
$web = "http://www.marian.ro";
?>

Dupa modificare, liniile vor arata astfel:

<?php
$nume=$_POST['nume'];
$msg=$_POST['mesaj'];
$mail=$_POST['mail'];
$web=$_POST['web'];
?>

Adica valorile variabilelor nu sunt fixate ci sunt primite prin metoda POST.

Atentie! In cazul in care datele ajung pe server (acesta salveaza datele) dar guestbook-ul nu se intoarce la pagina principala de afisare a mesajelor (dupa ce ati apasat butonul "Trimite") eroarea cea mai des intalnita este lasarea catorva spatii albe dupa scriptul PHP din fisierul "adauga.php". (De exemplu daca dupa terminarea php-ului mai aveti doua spatii mesajul de eroare nu va fi "OK" ci "OK" si conditia de returnare la pagina ce afiseaza mesajele nu va fi satisfacuta). Desi exista si alte mesaje de eroare acestea nu au fost tratate - vom lasa aceasta parte ca exercitiu pentru dumneavoastra (nu aveti decat de completat ramura "else" a conditiei "if (this.mesaj_eroare == "OK") ".

Copyright © 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.