Creare scripturi avansate – Javascript si PHP 15
Codul PHP este executat pe server iar datele de iesire sunt transmise la navigatorul web.
Codul scriptului JavaScript este executat de browser pe calculatorul utilizatorului.
Combinand aceste doua limbaje de programare web, se pot obtine scripturi JavaScript dinamice, cu rezultate in functie de datele primite si procesate de server. Astfel, aceeasi pagina de site poate contine un cod JavaScript pentru un utilizator si alt cod JS in cazul altui utilizator.
– Sunt 2 modalitati de a combina JavaScript cu PHP ca sa se obtina un rezultat dinamic sau personalizat:
- 1. Prin scrierea intregului script JS in codul PHP si adaugarea acestuia in pagina web cu functia PHP „echo” (sau „print”).
<?php
echo ‘<script type=”text/javascript”> // Cod JS </script>’;
?>
– Atentie, trebuie sa tineti cont de modul de lucru al ghilimelelor din cod, astfel incat ceea ce va fi returnat de „echo” sa fie un script JS ca si cum a fost scris in codul HTML.
- 2. Prin adaugarea in scriptul JS din codul HTML doar a variabilelor PHP necesare scriptului JavaScript (returnand valoarea cu „echo”).
<script type=”text/javascript”>
var var_js = <?php echo $var_php; ?>;
</script>
– Ambele variante de cod trebuie scrise in fisiere php ca sa poata fi procesate de modulul PHP.
In continuare sunt explicate cateva exemple practice din care sa intelegeti modul de combinare PHP-JavaScript si utilitatea acestuia (Trebuie sa cunoasteti deja, macar la nivel incepator, PHP si JavaScript, si HTML).
1. Alert cu nume utilizator
De exemplu, intr-o pagina web cu sistem de autentificare sa fie afisata o fereastra Alert cu numele utilizatorului dupa ce s-a autentificat.
In acest caz presupunem ca numele de utilizator e stocat intr-o variabila de sesiune: $_SESSION[‘nume’].
Folosind prima metoda, codul PHP ar fi urmatorul:
<?php
session_start(); // Aceasta functie trebuie scrisa la inceputul fisierului php
// Cod php …
echo ‘<script type=”text/javascript”>alert(„Bine ai venit ‘. $_SESSION[‘nume’]. ‘”);</script>’;
?>
Sau a doua varianta:
<?php session_start(); // La inceputul paginii html ?>
<!– Cod HTML –>
<script type=”text/javascript”>
alert(„Bine ai venit <?php echo $_SESSION[‘nume’]; ?>„);
</script>
– O astfel de fereastra Alert poate fi utila in cazul notificarii utilizatorului despre date ce pot fi extrase de PHP dintr-o baza de date sau fisier, cum ar fi instiintarea unui nou mesaj privat.
2. Ceas cu ora serverului
Un ceas facut si afisat in pagina cu JavaScript va afisa ora de la calculatorul vizitatorului. Daca se doreste afisarea unei aceleasi date (de pe server) pentru toti vizitatorii, cum ar fi in cazul unor jocuri, trebuie adaugat in scriptul JS timpul serverului, dupa cum e si in urmatorul exemplu:
<div id=”tag_ora”></div>
<script type=”text/javascript”>
<!–
// Script ora server-time, de la http://www.discant.net
// Preia data serverului prin PHP
var serverdate = new Date(<?php echo date(‘y,n,j,G,i,s’); ?>);
// Defineste variabilele JS de lucru
var ore = serverdate.getHours() // Preia ora
var minute = serverdate.getMinutes() // Preia minutele
var secunde = serverdate.getSeconds() // Preia secundele
// Functia de prelucrare si afisare a datelor
function ceas() {
secunde++;
if (secunde>59) {
secunde = 0;
minute++;
}
if (minute>59) {
minute = 0;
ore++;
}
if (ore>23) {
ore = 0;
}
var output = „<font size=’4′><b><font size=’1′>Ora server</font><br />”+ore+”:”+minute+”:”+secunde+”</b></font>”
document.getElementById(„tag_ora”).innerHTML = output;
}
// Apeleaza functia la incarcarea paginii si la fiecare secunda
window.onload = function(){
setInterval(„ceas()”, 1000);
}
//–>
</script>
– Testati singuri pt. a vedea rezultatul
3. Afisare date cu JavaScript de la PHP, in functie de o adresa URL
Ati vazut in site-urile pt. trafic sau afisare banner ca e necesar adaugarea in pagina a unui mic cod JS cu o anume adresa URL la atributul „src”.
Acestea folosesc acelasi principiu, de combinare PHP cu JavaScript.
Adresa din codul ce trebuie adaugat in pagina apeleaza un script PHP, acesta preia cu $_GET parametri din adresa URL primita si in functie de acestia prelucreaza datele pe server si construieste pentru returnarea rezultatului un cod JavaScript si HTML (fara tagul <script>) care va determina afisarea in pagina (cu document.write, sau innerHTML intr-un anume tag) a unui cod HTML pt. banner, trafic, top, … etc.
Ca sa intelegeti mai bine, experimentati urmatorul exemplu:
a) Creati pe server un fisier php, cu denumirea „phpjs_test.php”, si adaugati urmatorul cod:
<?php
// Exemplu test, de la http://www.discant.net
// Creaza o matrice cu denumiri
$ids = array(1=>’php-mysql’, 2=>’javascript’, 3=>’html’);
// Preia id-ul de la adresa URL
// Va returna cu echo un link (cu denumirea asociata din matrice) intr-un cod specific JavaScript (document.write)
if (isset($_GET[‘id’])) {
if ($sir = $ids[$_GET[‘id’]]) {
// Va determina afisarea unui link in pagina apelanta
echo ‘document.write(„<a href=\’http://www.discant.net/’. $sir. ‘\’>Curs ‘. $sir. ‘</a>”);’;
}
}
?>
b) In acelasi director de pe server creati un fisier html (ex. „test_jsphp.html”) in care adaugati urmatorul cod:
<script type=”text/javascript” src=”phpjs_test.php?id=2″></script>
– Apelati acest fisier html de pe server. Rezultatul va fi afisarea (determinata de „document.write()”) in pagina a unui link ce a fost definit in scriptul php in functie de ‘id’ din adresa de la „src”.
Similar se pot determina spre afisare banere sau orice altceva construit cu html in interiorul comezii „document.write()”.
– Trebuie acordata atentie la imbricarea ghilimelelor in codul php de returnare a rezultatului. Rezultatul transmis de „echo” trebuie sa fie o comanda corecta JS ce poate fi recunoscuta si executata de JavaScript.
Creare si utilizare clase in JavaScript
JavaScript nu e un limbaj de programare OOP (bazat pe clase si obiecte, precum C++, sau partial ca PHP), este un limbaj de script-uri (bazat pe functii) executat in browser. Dar se pot crea un fel de „clase” in JavaScript, care pot fi baza unui Obiect (definit cu „new”).
O clasa in JavaScript se creaza folosind cuvantul: function , cu aceasta sintaxa:
numeClasa = function() {
// codul clasei numeClasa
}
O clasa contine variabile (denumite „proprietati”) si functii (denumite si metode) care pot fi publice sau private.
Functiile si variabilele private sunt definite in clasa folosind cuvantul „var”. Acestea pot fi accesate doar in codul clasei.
Variabilele si functiile publice se creaza folosind cuvantul: „this”. Ele pot fi accesate in interiorul, si in exteriorul clasei.
Sintaxa completa de creare a unei clase in JavaScript:
numeClasa = function() {
var variabilaPrivata = 'valoare_privata';
var functiePrivata = function(/* parametrii */) {
// cod JS
}
this.variabilaPublica = 'valoare_publica';
this.functiePublica = function(/* parametrii */) {
// cod ...
}
}
Apoi, codul care creaza un obiect ce foloseste aceasta clasa poate fi asa:
myObject = new numeClasa();
Accesare proprietati si functii ale clasei
Dupa ce „clasa” e creata si e setat un obiect cu ea, se pot accesa /utiliza functiile si proprietatile (variable) definite in clasa, utilizand numele obiectului.
Sintaxa:
myObject = new numeClasa();
// seteaza valoare la o proprietate publica
myObject.variabilaPublica = 'valoare';
// apeleaza o functie publica din clasa
var method = myObject.functiePublica(/* parametrii */);
– Variabilele si functiile publice create in clasa (cu „this”) pot fi accesate in interiorul clasei tot prin cuvantul „this” (asa cum au fost definite).
Iata un exemplu concret (vedeti comentariile din cod).
<script type="text/javascript"><!--
// se creaza clasa
getSum = function() {
var nr1 = 0; // privat
this.nr2 = 0; // public
// functie privata, ce va seta valoarea lui nr1
var setNr1 = function(nr) {
nr1 = nr;
}
// functie publica
// returneaza suma lui nr1 si nr2 (utilizand "this." deoarece a fost definit cu acest cuvant)
this.sum = function(nr) {
setNr1(nr); // apeleaza functia privata setNr1() care seteaza valoarea lui nr1
return nr1 + this.nr2;
}
}
// seteaza un obiect cu clasa getSum
var obSum = new getSum();
// acceseaza proprietatea publica
alert(obSum.nr2); // 0
// seteaza o alta valoare pt nr2, si preia suma
obSum.nr2 = 6;
var sum64 = obSum.sum(4);
alert(sum64); // 10
// test pt. a vedea daca nr1 (privat) poate fi accesat
alert(obSum.nr1); // undefined
//-->
</script>
• La definirea clasei se pot adauga si parametrii, astfel, cand se creaza un obiect cu acea clasa trebuie adaugata si valoare pentru parametru.
Sintaxa:
numeClasa = function(parametru) {
// codul clasei numeClasa
}
myObject = new numeClasa('valoare');
Iata un alt exemplu, cu o clasa care are un parametru.
<script type="text/javascript"><!--
// creaza clasa getSum cu un parametru
getSum = function(nr) {
var nr1 = 0;
this.nr2 = 0;
// seteaza valoarea proprietatii nr1
var setNr1 = function(nr) {
nr1 = nr;
}
// returneaza suma lui nr1 (privat) si nr2 (folosind "this." fiindca a fost definit cu acest cuvant)
this.sum = function() {
return nr1 + this.nr2;
}
setNr1(nr); // apeleaza functia setNr1() cand se creaza obiectul cu aceasta clasa
}
// seteaza un obiect cu clasa getSum
var obSum = new getSum(3);
alert(obSum.nr2); // 0
// seteaza o alta valoare pt nr2, si preia suma
obSum.nr2 = 5;
var sum35 = obSum.sum();
alert(sum35); // 8
//-->
</script>
Inlantuire mai multe metode de obiect in JavaScript
In aceasta lectie puteti invata cum se pot accesa mai multe metode inlantuite in JavaScript.
Inlantuirea metodelor inseamna accesarea mai multor metode, sau functii ale unui obiect, intr-o singura instructune.
obiect.metoda_1().metoda_2()
Cerinta prin care se pot accesa metode inlantuite este ca metodele (functiile) sa fie definite folosind cuvantul special this (ca sa poata fi accesate in exterior), iar metoda precedenta (aici metoda_1() ) sa returneze instanta de obiect.
• Sintaxa:
var NumeClasa = function() {
var thisob = this; // retine instanta de obiect
this.metoda_1 = function(){
// un cod JavaScript
return thisob; // returneaza instanta de obiect
}
this.metoda_2 = function(){
// instructiuni JavaScript
}
}
– Iata un exemplu, un obiect JavaScript prin care se pot calcula aria si perimetrul dreptunghiului (vedeti comentariile din cod si testati-l).
<script>
var Rectangle = function() {
var thisob = this; // retine instanta de obiect
var a = 0;
var b = 0;
// seteaza valorile pt. a si b
this.setAB = function(a1, b1){
a = a1;
b = b1;
return thisob; // returneaza instanta de obiect
}
// returneaza aria
this.area = function(){
return a * b;
}
// returneaza perimetru
this.perimeter = function(){
return 2 * (a + b);
}
}
// creaza o instanta de obiect a clasei
var obR = new Rectangle();
// seteaza valorile laturilor si obtine aria si perimetru
var area = obR.setAB(7, 8).area();
var perimeter = obR.setAB(7, 8).perimeter();
// test
alert(‘Aria = ‘+ area +’\nPerimetru = ‘+ perimeter);
</script>
• Se pot apela mai mult de doua metode inlantuite, tehnica e aceeasi, metodele sa fie definute folosind cuvantul „this”, si toate metodele accesate precedent trebuie sa returneze instanta de obiect.
– Iata un exemplu de inlantuire trei metode. Un obiect JavaScript ce poate crea un tag HTML, cu ID, atribut „class” si continut (studiati codul si testati-l).
<script>
var setTag = function() {
var thisob = this; // retine instanta de obiect
var id = ”; // atributul id
var cls = ”; // atributul class
// seteaza id-ul
this.setId = function(id1){
id = ‘ id=”‘+ id1 +'”‘;
return thisob; // returneaza instanta de obiect
}
// seteaza atributul class
this.setClass = function(cls1){
cls = ‘ class=”‘+ cls1 +'”‘;
return thisob; // returneaza instanta de obiect
}
// returneaza tag-ul HTML si continutul
this.getTagCnt = function(tag, cnt){
return ‘<‘+ tag + id + cls +’>’+ cnt +'</’+ tag+ ‘>’;
}
}
// creaza o instanta de obiect a clasei
var obTag = new setTag();
// variabile cu tipul tag-ului si continut
var tag = ‘div’;
var cnt = ‘http://www.discant.net’;
// apeleaza metodele inlantuite pt. setare ID, „class”, si obtine un <div> cu aceste atribute si continut
var getTag = obTag.setId(‘some_id’).setClass(‘a_class’).getTagCnt(tag, cnt);
// test
alert(getTag); // <div id=”some_id” class=”a_class”>http://www.discant.net</div>
</script>
Instructiunea cu metodele inlantuite din codul de mai sus:
var getTag = obTag.setId(‘some_id’).setClass(‘a_class’).getTagCnt(tag, cnt);
E la fel cu acest cod:
// seteaza pe rand ID-ul, „class”, apoi obtine tag-ul cu continutul
obTag.setId(‘some_id’);
obTag.setClass(‘a_class’);
var getTag = obTag.getTagCnt(tag, cnt);