Creare scripturi avansate - Javascript si PHP

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:

- 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.marplo.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.marplo.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.marplo.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.
createElement si insertBefore <<-- Anterior ----------- Urmator -->> Creare si utilizare clase ...

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canciĆ³n.
- Ea nu canta acel cantec.
Creare scripturi avansate Javascript - PHP - Tutoriale JavaScript