Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Utilizarea Internetului in Afaceri Fsega

    Încărcat de

    Florin Drule
    229 vizualizări20 pagini
    laboratoare UIA fsega

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    laboratoare UIA fsega

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    229 vizualizări20 pagini

    Utilizarea Internetului in Afaceri Fsega

    Încărcat de

    Florin Drule
    laboratoare UIA fsega

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 20

    Urmtorul exemplu prezint mecanismul de baz al comunicrii asincrone.

    Utilizarea internetlui in afaceri fsega 2012 Se creeaz un formular ce solicit adresa potal a utilizatorului. Imediat dup ce codul potal e tastat, la momentul trecerii n urmtoarea caset, codul potal e trimis la server, care rspunde cu strada i celelalte detalii pe care le are stocate despre acel cod potal. Pagina Client (fisier de tip HTML): <html> <head> <title>Formular</title> <script type="text/javascript">

    function schimbDate(codpostal) { xhr=creareXHR() xhr.onreadystatechange=procesare xhr.open("GET","codpostal.php?CP="+codpostal) xhr.send(null) } function creareXHR() { try {xhr=new ActiveXObject("Msxml2.XMLHTTP")} catch (e) { try {xhr=new ActiveXObject("Microsoft.XMLHTTP")} catch (e) {xhr=false}

    if (!xhr&&typeof(XMLHttpRequest)!='undefined') xhr=new XMLHttpRequest() return xhr }

    function procesare() { if (xhr.readyState == 4) if (xhr.status == 200) { raspuns=xhr.responseText date=raspuns.split(',') document.getElementById("TXoras").value=date[0] document.getElementById("TXjudet").value=date [1] document.getElementById("TXadresa").value=date [2] } else { codHTMLeroare='<span style="color:red">Eroare transfer! </span>' document.getElementById("Eroare").innerHTML =codHTMLeroare } }

    </script> </head> <body> <h1>Introduceti datele</h1> <form action="destinatie.php" method="post"> <table> <tr> <td>Nume</td> <td><input type="text" id="TXnume" ></td> </tr> <tr> <td>CodPostal</td> <td><input type="text" id="TXcodpostal" onblur="schimbDate(this.value)"></td> </tr> <tr> <td>Adresa</td> <td><input type="text" id="TXadresa" size="50"></td> </tr> <tr> <td>Oras</td> <td><input type="text" id="TXoras" ></td> </tr> <tr> <td>Judet</td> <td><input type="text" id="TXjudet" ></td>

    </tr> <tr> <td colspan="2"><input type="submit" value="Trimite formular" ></td> </tr> </table> </form> <p id="Eroare"></p> </body> </html>

    Scriptul server (salvat in asa fel incat sa fie gasit de obiectul XHR de mai sus: cu numele codpostal.php in htdocs):

    <?php if ($_GET["CP"]=="400451") print "Cluj Napoca,Cluj,Aleea Azuga"; else print "cod incorect,cod incorect,cod incorect"; ?>

    Cadre invizibile prin tehnica Pull


    <html> <head> <script type="text/javascript"> function trimite(cod) {

    cadru=document.getElementById("cadruint") cadru.src="codpostal.php?CodPostal="+cod }

    function citestedate(cdr) { documentcadru=cdr.contentWindow.document raspuns=documentcadru.body.innerHTML procesare(raspuns) }

    function procesare(rasp) { vector=rasp.split(",") document.getElementById("TXoras").value=vector[0] document.getElementById("TXjudet").value=vector[1] document.getElementById("TXadresa").value=vector[2] } </script>

    </head> <body> <iframe id=cadruint width=400 height=50 src="" onload="citestedate(this)"> </iframe> <h1>Introduceti datele</h1>

    <form > <table> <tr> <td>Nume</td> <td><input type=text id=TXnume ></td> </tr>

    <tr> <td>CodPostal</td> <td><input type=text id=TXcodpostal onblur="trimite(this.value)"></td> </tr> <tr> <td>Adresa</td> <td><input type=text id=TXadresa size=50></td> </tr> <tr> <td>Oras</td> <td><input type=text id=TXoras ></td> </tr> <tr> <td>Judet</td> <td><input type=text id=TXjudet ></td> </tr> <tr> <td></td>

    <td><input type=submit value=Trimite ></td> </tr> </table> </form> </body> </html>

    Scriptul server (salvat cu numele codpostal.php): <?php if ($_GET["CodPostal"]==400451) print "Cluj Napoca,Cluj, Aleea Azuga...(completati detaliile)"; else print "cod incorect, cod incorect, cod incorect"; ?>

    Autocompleter.HTML <!DOCTYPE html> <html> <head> <script src="ppw/librarie/scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="ppw/librarie/scriptaculous/src/scriptaculous.js" type="text/javascript"></script> <script> function initializare() { new Ajax.Autocompleter("tbox", "sugestii", "sugestii.php",{indicator:"asteapta",minChars:2})'

    } </script>

    <style>

    div#sugestii {width:250px;border:1px solid red} div#sugestii ul { list-style-type:none; margin:0px; padding:0px; }

    div#sugestii ul li.selected {background-color:#ffb;}

    div#sugestii ul li { cursor:pointer}

    </style> </head> <body onload=initializare()> Caseta de cautare:<br/> <input type="text" id="tbox" name="litere"/>

    <img id="asteapta" style="display:none" src="spinner.gif" alt="Asteapta..." /> <div id="sugestii"></div> </body> </html> SUGESTII.PHP <? mysql_connect("localhost","root",""); mysql_select_db("librarie"); echo "<ul>"; $sql = "SELECT * FROM autori WHERE nume_autor LIKE '%" . $_POST['cuvant'] . "%'"; $rs = mysql_query($sql); while($data = mysql_fetch_assoc($rs)) { echo "<li id=\"" . $data['id_autor'] . "\">" . $data['nume_autor'] . "</li>"; }

    ?> DIN LAB Pasul1. Pregtim cmpul text i zona de afiare a sugestiilor.

    <!DOCTYPE html> <html> <head> <style>

    div#sugestii

    {width:250px;border:1px solid red} div#sugestii ul {border:1px solid blue} div#sugestii ul li.selected {background-color:#ffb;} div#sugestii ul li {border:1px solid green;cursor:pointer;} </style> </head> <body> Caseta de cautare:<br/> <input type="text" id="tbox"/> <div id="sugestii"> <ul> <li class="selected">prima sugestie</li> <li>a doua sugestie</li> <li>a treia sugestie</li> </ul> </div> </body> </html>

    Pasul2. Formatm lista de sugestii pentru a putea fi afiat sub forma unui meniu. div#sugestii ul {

    list-style-type:none; margin:0px; padding:0px; }

    i eliminm chenarul de la elementele listei:

    div#sugestii ul li { cursor:pointer}

    Chenarul DIVului l lsm vizibil.

    Pas3. Crem scriptul server provizoriu

    <?php print '<ul><li>prima sugestie</li><li>a doua sugestie</li><li>a treia sugestie</li></ul>'; ?>

    Salvm fiierul cu numele sugestii.php. Observai c scriptul nu returneaz i atributul class=selected; acesta e generat AUTOMAT de Scriptaculous la MouseOver!

    Pas4. Introducem obiectul Autocompleter

    Aici trebuie s ne alegem evenimentul la care s se creeze mecanismul Autocompleter. De obicei acesta se creeaz la evenimentul ONLOAD, pentru a fi disponibil imediat dup ncrcarea paginii. Alternativ, ar putea fi generat printr-un eveniment ONFOCUS sau ONCLICK (cnd se intr cu mouseul n textbox) sau prin alte evenimente.

    Adugai mai nti liniile de apel al funciilor Scriptaculous i Prototype (n HEAD):

    <head> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

    Apoi asociai crearea lui Autocompleter cu evenimentul ONLOAD din BODY:

    <script> function initializare() { new Ajax.Autocompleter("tbox", "sugestii", "sugestii.php",{}) } </script> .............. <body onload=initializare()>

    Corpul paginii va rmne: <body onload="initializare()"> Caseta de cautare:<br/> <input type="text" id="tbox"/> <div id="sugestii"></div> </body>

    Pas5. Poziionarea cu bug

    O dezactivm cu <body onload="initializare()" style="margin:0px">

    O alt metod de depire a bugului este s dezactivm poziionarea automat oferit de Scriptaculous, caz n care va trebui s facem manual poziionarea (s ne asigurm c sugestiile i textboxul sunt grupate n acelai DIV, unul dup altul sau poziionat cu CSS). Dezactivarea clonrii de poziie are loc dac DIVul de sugestii primete poziionare relativ (nu o facei n acest exemplu, aplicai cealalt msur):

    <div id="sugestii" style="width:250px;border:1px solid red;position:relative">

    Pas6. Modificarea scriptului server pentru a face cutare.

    n acest moment, scriptul server livreaz o list oarecare. Aceast list, ns, trebuie obinut dintr-o surs de date din care se selecteaz acele valori ce ncep cu litera tastat n textbox!

    n prima faz, iniializm sursa de date cu valori oarecare:

    <?php

    $sursadate = array('Ana', 'Andrei', 'Alin','Bebe'); print '<ul>'; for ($i = 0; $i < sizeof($sursadate); $i++) print '<li>'.$sursadate[$i].'</li>'; print '</ul>';

    ?>

    Mai departe, n ciclul de parcurgere a sursei de date trebuie s punem un filtru s se extrag doar valorile care ncep cu literele tastate n textbox. Pentru aceasta, trebuie s ne asigurm c textboxul trimite date la server, adugndu-i un atribut NAME:

    <input type="text" id="tbox" name="litere"/>

    Apoi, s capturm aceast valoare la server (nu avem nevoie de Submit, Autocompleterul se ocup de trimiterea asincron a coninutului din textbox, dup fiecare tast apsat sau cu o frecven pe care o putem modifica prin opiunile suplimentare de la instanierea Autocompleter!):

    Prelum la server coninutul textboxului: $litere=$_POST['litere'];

    Construim o expresie regulat care s verifice dac un string ncepe cu literele sosite prin POST (caseinsensitive): $expreg="/^".$litere."/i";

    Includem n script testarea expresiei regulate pentru fiecare element din vectorul de pe server:

    <?php $litere=$_POST['litere']; $expreg="/^".$litere."/i"; $sursadate = array('Ana', 'Andrei', 'Alin','Bebe'); print '<ul>'; for ($i = 0; $i < sizeof($sursadate); $i++)

    if (preg_match($expreg,$sursadate[$i])==1) print '<li>'.$sursadate[$i].'</li>'; print '</ul>'; ?>

    Slider

    Mecanismul Slider este la baz un grup de 2 DIVuri unul lung (ina) i unul mic (mnerul care se trage de-a lungul inei). Pentru a simplifica poziionarea lor, ideal este ca: ina s conin mnerul; fiecare s aib lime i nlime convenabil; fiecare s aib un fundal sugestiv n acest exemplu le vom colora fundalul ca s creeze impresia de bar i mner dar n practic li se pune pe background cte o imagine sugestiv (PNG cu background transparent) folosind proprietatea background: url(..).

    <!DOCTYPE html> <html> <head> <style> #sina {background:red;width:200px;height:10px} #maner {background:blue;width:10px;height:10px} </style> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script> <script> function initializeaza() { new Control.Slider("maner","sina",{})

    } </script> </head> <body onload="initializeaza()"> <div id="sina"> <div id="maner"></div> </div> </body> </html>

    Observai dimensiunile convenabil setate lungime mare pentru in, cu nlime mic,respectiv un ptrel mic, egal cu nlimea inei, pentru mner. Repet, n proprietatea background se pot stoca i imagini care s fac Sliderul mai estetic.

    De obicei un Slider e folosit pentru a controla o gam de valori posibile ce influeneaz alte elemente din pagin. n cazul cel mai simplu, gama de valori va fi pur i simplu afiat ntr-un textbox:

    <input id="valori" type="text"/>

    Pentru a lega Sliderul de textbox, trebuie s definim o funcie pentru evenimentul onSlide, funcie ce primete obligatoriu valoarea curent a Sliderului pe care noi trebuie s o transferm prin cod mai departe, spre textboxul cu ID=valori:

    function initializeaza() { new Control.Slider("maner","sina",{onSlide:afiseaza}) }

    function afiseaza(valoare) { $('valori').setValue(valoare) }

    Se poate vedea c: valorile generate de Slider sunt n intervalul 0-1 (putem modifica intervalul cu opiunile range i values); afiarea valorii n textbox se face doar cnd tragem mnerul (drag); ar trebui s se fac actualizarea i cnd dm un simplu click undeva pe in (pentru aceasta avem evenimentul onChange).

    Modificai sliderul:

    function initializeaza() { new Control.Slider("maner","sina",{range:$R(10,50),onSlide:afiseaza,onChange:afiseaza}) }

    Acum valorile vor fi n intervalul 10-50 i e posibil i parcurgerea Sliderului cu clickuri. Obs:Alturi de range putem folosi i values:[10,20,30,40,50] care va face ca valorile sliderului s fie discrete (mnerul va sri din 10 n 10, nu va putea fi poziionat oriunde n interval).

    Mai departe, adugm consecine noi n pagin: un paragraf care s i schimbe fontul n funcie de slider; un paragraf care s i schimbe poziia vertical n funcie de slider.

    Adugm cele 2 paragrafe:

    <body onload="initializeaza()"> <div id="sina"> <div id="maner"></div> </div> <input id="valori" type="text"/> <div id="tinta1">Acest text va fi redimensionat dinamic</div> <div id="tinta2">Acest text va fi repozitionat dinamic</div> </body>

    Apoi modificm funcia de legtur cu Sliderul, adugnd operaii de ajustare a mrimii de font (pt primul paragraf) i de ajustare a poziiei verticale (pentru al doilea) n funcie de valoarea curent:

    function afiseaza(valoare) { $('valori').setValue(valoare) Element.setStyle('tinta1',{fontSize:valoare+'px'}) Element.setStyle('tinta2',{position:'relative',top:valoare+'px'}) }

    Observai: cum este concatenat valoarea Sliderului la proprietile CSS; faptul c numele proprietilor CSS e puin diferit: nu am folosit font-size, ci fontSize (deoarece e acoladele acelea nu sunt cod CSS, ci cod JavaScript, iar n JavaScript toate proprietile cu cratim n nume sufer aceast mic conversie); faptul c att dimensiunea ct i poziia sufer modificri n intervalul 10-50.

    Dac dorim ca modificarea aplicat n pagin s nu fie EXACT modificarea Sliderului, ci o valoare proporional, nmulim valoarea cu proporia dorit:

    Element.setStyle('tinta1',{fontSize:valoare*0.5+'px'}) Element.setStyle('tinta2',{position:'relative',top:valoare*2+'px'})

    Acum fontul va varia n intervalul 5-25, poziia n intervalul 20-100.

    Dac dorim s putem tasta n textbox o valoare i aceasta s mute Sliderul automat, avem nevoie de:

    - Sliderul s primeasc un nume ca s-l putem referi din alte funcii:

    sld=new Control.Slider("maner","sina",{range:$R(10,50),onSlide:afiseaza,onChange:afiseaza})

    - atam textboxului o funcie care s se apeleze la apsarea tasteri Enter

    <input id="valori" type="text" onkeypress="seteaza(this.value,event)"/>

    - definim funcia respectiv, n care testm dac tasta apsat este Enter (codul 13):

    function seteaza(v,e) { eveniment=e||window.event if (eveniment.keyCode==13) sld.setValue(v) }

    Observaii: onkeypress este un eveniment ce se apeleaz indiferent ce tast apsm; n consecin, trebuie s-i dm un al doilea argument, event, prin care se va putea verifica despre ce tast e vorba; n interiorul funciei, nu e sigur c argumentul event ajunge! Internet Explorer nu recunoate acel argument, n schimb ofer obiectul window.event cu acelai rol. De aceea folosim expresia eveniment=e||window.event, care va atribui variabilei eveniment fie argumentul event (dac exist, deci n Firefox), fie obiectul window.event (dac event nu a sosit, deci cazul IE); cu un IF verificm proprietatea keyCode a evenimentului (Enter are codul 13), apoi cu setValue aplicm o setare de valoare Sliderului.

    Codurile tuturor tastelor le gsii aici: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-CodesKey-Codes.aspx

    Tot acest mecanism cu tasta Enter poate fi ocolit: dac folosim evenimentul onblur (dar atunci mutarea mnerului se va face la apsarea lui Tab) dac punem alturi i un buton la apsarea cruia s mutm mnerul.

    Totui n practic e mai intuitiv ca valoarea tastat ntr-un textbox s fie confirmat printr-un Enter simplu, mai ales c nu e vorba de un formular care s trebuiasc trimis, deci n-are sens s crem i un buton.

    n plus, am folosit acest exemplu ca pretext pentru a arta cum se captureaz evenimentul de apsare a unei taste anume.

    n sfrit, putem desena Sliderul i vertical dac: punem axis:vertical in opiunile suplimentare (inainte de range); redesenm DIVurile astfel nct ina s fie nalt i nu lat.

    S-ar putea să vă placă și