Utilizarea Internetului in Afaceri Fsega

7/31/2019 Utilizarea Internetului in Afaceri Fsega

http://slidepdf.com/reader/full/utilizarea-internetului-in-afaceri-fsega 1/20

Următorul exemplu prezintă mecanismul de bază al comunicării asincrone.

Utilizarea internetlui in afaceri fsega 2012

Se creează un formular ce solicită adresa poştală a utilizatorului. Imediat după ce codul poştal e tastat, la

momentul trecerii în următoarea casetă, codul poştal e trimis la server, care răspunde cu strada şi

celelalte detalii pe care le are stocate despre acel cod poştal.

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. Pregătim câmpul text și zona de afișare 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>


<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. Formatăm lista de sugestii pentru a putea fi afișată sub forma unui meniu.

div#sugestii ul

{



list-style-type:none;

margin:0px;

padding:0px;

}

Și eliminăm chenarul de la elementele listei:

div#sugestii ul li

{ cursor:pointer}

Chenarul DIVului îl lăsăm vizibil.

Pas3. Creăm scriptul server provizoriu

<?php

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

?>

Salvăm fișierul cu numele sugestii.php. Observați 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ă încărcarea paginii. Alternativ, ar

putea fi generat printr-un eveniment ONFOCUS sau ONCLICK (când se intră cu mouseul în textbox) sau

prin alte evenimente.



Adăugați mai întâi liniile de apel al funcțiilor 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 asociați 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 rămâne:

<body onload="initializare()">


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

<div id="sugestii"></div>

</body>



Pas5. Poziționarea cu bug

O dezactivăm cu

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

O altă metodă de depășire a bugului este să dezactivăm poziționarea automată oferită de Scriptaculous,

caz în care va trebui să facem manual poziționarea (să ne asigurăm că sugestiile și textboxul sunt

grupate în același DIV, unul după altul sau poziționat cu CSS). Dezactivarea clonării de poziție are loc

dacă DIVul de sugestii primește poziționare relativă (nu o faceți în acest exemplu, aplicați cealaltă

măsură):

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

Pas6. Modificarea scriptului server pentru a face căutare.

În acest moment, scriptul server livrează o listă oarecare. Această listă, însă, trebuie obținută dintr-o

sursă de date din care se selectează acele valori ce încep cu litera tastată în textbox!

În prima fază, inițializăm 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 asigurăm că textboxul

trimite date la server, adăugându-i un atribut NAME:

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

Apoi, să capturăm această valoare la server (nu avem nevoie de Submit, Autocompleterul se ocupă de

trimiterea asincronă a conținutului din textbox, după fiecare tastă apăsată sau cu o frecvență pe care o

putem modifica prin opțiunile suplimentare de la instanțierea Autocompleter!):

Preluăm la server conținutul textboxului:

$litere=$_POST['litere'];

Construim o expresie regulată care să verifice dacă un string începe cu literele sosite prin POST (case-

insensitive):

$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 (mânerul care se trage

de-a lungul șinei). Pentru a simplifica poziționarea lor, ideal este ca:

șina să conțină mânerul;

fiecare să aibă lățime și înălțime convenabilă;

fiecare să aibă un fundal sugestiv – în acest exemplu le vom colora fundalul ca să creeze

impresia de bară și mâner dar în practică li se pune pe background câte 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>

Observați dimensiunile convenabil setate – lungime mare pentru șină, cu înălțime mică,respectiv un

pătrățel mic, egal cu înălțimea șinei, pentru mâner. 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 influențează alte elemente din

pagină. În cazul cel mai simplu, gama de valori va fi pur și simplu afișată într-un textbox:

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

Pentru a lega Sliderul de textbox, trebuie să definim o funcție pentru evenimentul onSlide, funcție ce

primește obligatoriu valoarea curentă a Sliderului – pe care noi trebuie să o transferăm prin cod mai

departe, spre textboxul cu ID=valori:


{

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

}



<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 modificăm funcția de legătură cu Sliderul, adăugând operații de ajustare a mărimii de font (pt

primul paragraf) și de ajustare a poziției verticale (pentru al doilea) în funcție de valoarea curentă:

function afiseaza(valoare)

{

$('valori').setValue(valoare)

Element.setStyle('tinta1',{fontSize:valoare+'px'})

Element.setStyle('tinta2',{position:'relative',top:valoare+'px'})

}

Observați:

cum este concatenată valoarea Sliderului la proprietățile CSS;

faptul că numele proprietăților CSS e puțin diferit: nu am folosit font-size, ci fontSize (deoarece e

acoladele acelea nu sunt cod CSS, ci cod JavaScript, iar în JavaScript toate proprietățile cu

cratimă în nume suferă această mică conversie);

faptul că atât dimensiunea cât și poziția suferă modificări în intervalul 10-50.



Dacă dorim ca modificarea aplicată în pagină să nu fie EXACT modificarea Sliderului, ci o valoare

proporțională, înmulțim valoarea cu proporția 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, poziția î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 funcții:

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

- atașăm textboxului o funcție care să se apeleze la apăsarea tasteri Enter

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

- definim funcția respectivă, în care testăm dacă tasta apăsată este Enter (codul 13):

function seteaza(v,e)

{

eveniment=e||window.event

if (eveniment.keyCode==13)

sld.setValue(v)

}



Observații:

onkeypress este un eveniment ce se apelează indiferent ce tastă apăsăm; în consecință, trebuie

să-i dăm un al doilea argument, event, prin care se va putea verifica despre ce tastă e vorba;

în interiorul funcției, nu e sigur că argumentul event ajunge! Internet Explorer nu recunoaște

acel argument, în schimb oferă obiectul window.event cu același 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 verificăm proprietatea keyCode a evenimentului (Enter are codul 13), apoi cu setValue

aplicăm o setare de valoare Sliderului.

Codurile tuturor tastelor le găsiți aici:

http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-

Key-Codes.aspx

Tot acest mecanism cu tasta Enter poate fi ocolit:

dacă folosim evenimentul onblur (dar atunci mutarea mânerului se va face la apăsarea lui Tab)

dacă punem alături și un buton la apăsarea căruia să mutăm mânerul.

Totuși î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ă creăm și un

buton.

În plus, am folosit acest exemplu ca pretext pentru a arăta cum se capturează evenimentul de apăsare a

unei taste anume.

În sfârșit, putem desena Sliderul și vertical dacă:

punem axis:’vertical’ in opțiunile suplimentare (inainte de range);

redesenăm DIVurile astfel încât șina să fie înaltă și nu lată.

Utilizarea Internetului in Afaceri Fsega

Documents

Transcript of Utilizarea Internetului in Afaceri Fsega