[Tutorial JS] Creare scripturi avansate - Javascript si PHP

#1
Nume Tutorial: Creare scripturi avansate - Javascript si PHP
Descriere: Creare scripturi avansate - Javascript si PHP
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

Codul PHP este executat pe server iar datele de ieşire sunt transmise la navigatorul web.
Codul scriptului JavaScript este executat de browser pe calculatorul utilizatorului.
Combinând aceste două limbaje de programare web, se pot obţine scripturi JavaScript dinamice, cu rezultate în funcţie de datele primite şi procesate de server. Astfel, aceeaşi pagină de site poate conţine un cod JavaScript pentru un utilizator şi alt cod JS în cazul altui utilizator.

- Sunt 2 modalităţi de a combina JavaScript cu PHP ca să se obţină un rezultat dinamic sau personalizat:

1. Prin scrierea întregului script JS în codul PHP şi adăugarea acestuia în pagina web cu funcţia PHP "echo" (sau "print").

Cod: Selectaţi tot

<?php
 echo '<script type="text/javascript"> // Cod JS </script>';
 ?>
  
- Atenţie, trebuie să ţineţi cont de modul de lucru al ghilimelelor din cod, astfel încât ceea ce va fi returnat de "echo" să fie un script JS ca şi cum a fost scris în codul HTML.

2. Prin adăugarea în scriptul JS din codul HTML doar a variabilelor PHP necesare scriptului JavaScript (returnând valoarea cu "echo").

Cod: Selectaţi tot

<script type="text/javascript">
    var var_js = <?php echo $var_php; ?>;
 </script>
 
- Ambele variante de cod trebuie scrise în fişiere php ca să poată fi procesate de modulul PHP.

În continuare sunt explicate câteva exemple practice din care să înţelegeţi modul de combinare PHP-JavaScript şi utilitatea acestuia (Trebuie să cunoaşteţi deja, măcar la nivel începător, PHP, JavaScript şi HTML).

1. Alert cu nume utilizator

De exemplu, într-o pagină web cu sistem de autentificare să fie afişată o fereastră Alert cu numele utilizatorului după ce s-a autentificat.
În acest caz presupunem că numele de utilizator e stocat într-o variabilă de sesiune: $_SESSION['nume'].
Folosind prima metodă, codul PHP ar fi următorul:

Cod: Selectaţi tot

<?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 variantă:

Cod: Selectaţi tot

 <?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 fereastră Alert poate fi utilă în cazul notificării utilizatorului despre date ce pot fi extrase de PHP dintr-o bază de date sau fişier, cum ar fi înştiinţarea unui nou mesaj privat.

2. Ceas cu ora serverului

Un ceas făcut şi afişat în pagină cu JavaScript va afişa ora de la calculatorul vizitatorului. Dacă se doreşte afişarea unei aceleaşi date (de pe server) pentru toţi vizitatorii, cum ar fi în cazul unor jocuri, trebuie adăugat în scriptul JS timpul serverului, după cum e şi în următorul exemplu:

Cod: Selectaţi tot

 <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>
 
- Testaţi singuri pentru a vedea rezultatul

3. Afişare date cu JavaScript de la PHP, în funcţie de o adresă URL

Aţi văzut în site-urile pentru trafic sau afişare banner că e necesar adăugarea în pagină a unui mic cod JS cu o anume adresă URL la atributul "src".
Acestea folosesc acelaşi principiu, de combinare PHP cu JavaScript.
Adresa din codul ce trebuie adăugat în pagină apelează un script PHP, acesta preia cu $_GET parametri din adresa URL primită şi în funcţie de aceştia, prelucrează datele pe server şi construieşte pentru returnarea rezultatului un cod JavaScript şi HTML (fără tagul < script > ) care va determina afşarea în pagină (cu document.write, sau innerHTML într-un anume tag) a unui cod HTML pt. banner, trafic, top, ... etc.
Ca să înţelegeţi mai bine, experimentaţi următorul exemplu:

a) Creaţi pe server un fişier php, cu denumirea "phpjs_test.php", şi adăugaţi următorul cod:

Cod: Selectaţi tot

 <?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) În acelaşi director de pe server creaţi un fişier html (ex. "test_jsphp.html") în care adăugaţi următorul cod:

Cod: Selectaţi tot

 <script type="text/javascript" src="phpjs_test.php?id=2"></script>
  
- Apelaţi acest fişier html de pe server. Rezultatul va fi afişarea (determinată de "document.write()") în pagină a unui link ce a fost definit în scriptul php în funcţie de 'id' din adresa de la "src".

Similar se pot determina spre afişare bannere sau orice altceva construit cu html în interiorul comenzii "document.write()".

- Trebuie acordată atenţie la îmbricarea ghilimelelor în codul php de returnare a rezultatului. Rezultatul transmis de "echo" trebuie să fie o comandă corectă JS ce poate fi recunoscută şi executată de JavaScript.

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 1 vizitator