home_site

Lab05 - Serwis WWW [ lab:10.03.2023, ver. SPN.2023.03.10.003 ]

Zawartość strony

Serwis WWW, HTML5, CSS, JavaScript i php

Tematyka zajęć:

W ramach zajęć poznamy możliwości realizacji aplikacji internetowych wykorzystujących HTML5, CSS i JavaScript po stronie klienta i php po stronie serwera.

  1. Zadania
  2. Grafika SVG w języku HTML5
  3. Obsługa stanu w serwisie WWW
  4. Obsługa ciasteczek w JavaScript
  5. Sesje w serwise WWW
  6. Technologia AJAX
  7. Miniportal do obsługi ocen semestralnych

  1. Zadania

    2. Opracować prostą stronę zawierającą listę uczniów i oceny z danego przedmiotu (język html i element <table>).
    Tworzymy plik zadanie1.html, zawierający informację o uczniach zformatowany z wykorzystaniem elementu <table>. Przykładowy ekran.
    Opracować stronę zawierającą listę ocen z wykorzystaniem języka php. Lista ocen w pliku csv.
    Tworzymy dwa pliki. Pierwszy plik zadanie2.php czyta dane z drugiego pliku zawierającego dane ucznia ( nazwisko, imię i ocenę ) - zadanie2.csv. Plik php zawiera polecenie czytające plik oraz formatujący odpowiedź. Plik zadanie2.csv zawiera informację o uczniach. Ponieżej szablony pliku zadanie2.php i pliku zadanie2.csv. Poniżej inna wersja pliku php umożliwiającego posortowanie pobranych danych z pliku po nazwisku. 
    // szablon pliku zadanie2.php
$uchwyt = fopen($nazwa,"r") ;   // otwarcie pliku
print "<table><tr><th>Lp.</th><th>Nazwisko</th><th>Imie</th><th>Ocena</th></tr>";
$lp = 0 ;
while ( false !== ($linia = fgets($uchwyt)) )  // odczyt rekordów pliku
   {  
      $lp++ ;
      list($imie,$nazwisko,$ocena) = explode(":",$linia) ;
      print "<tr><td>".$lp."</td><td>".$nazwisko."</td> ... ; // należy dokończyć                            
   }       
print "</table>" ;

    Adam:Abacki:4:
Bogdan:Zazadzki:3
...

    // szablon pliku zadanie2.php
$uchwyt = fopen($nazwa,"r") ;   // otwarcie pliku
print "<table><tr><th>Lp.</th><th>Nazwisko</th><th>Imie</th><th>Ocena</th></tr>";
$lp = 0 ;
while ( false !== ($linia = fgets($uchwyt)) )  // odczyt rekordów pliku
   {  
      $lp++ ;
      list($imie,$nazwisko,$ocena) = explode(":",$linia) ;
      print "<tr><td>".$lp."</td><td>".$nazwisko."</td> ... ; // należy dokończyć                            
   }       
print "</table>" ;
    Opracować formularz dodający ucznia do pliku z listą ocen.
    Tworzymy dwa pliki. Pierwszy plik zadanie3.html jest formularzem ( lab4, zadanie A ), drugi jest plikiem php który czyta przesłane dane ( lab4, zadanie A ) i zapisuje do pliku z zadanie 2 ( lab4, zad C ). Ponieżej szablon pliku zadanie3.php. 
      $imie      = $_POST['imie'] ;
  ...
  $record    = "\n".$nazwisko.":".$imie.":".$ocena.":" ;
  fwrite($uchwyt,$record) ;

  2. Grafika SVG w języku HTML5

    1. Trójkąt i okrąg w grafice SVG, pliki "lab5_B01.html" i "lab5_B01.css".

      Plik lab5_B01.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

         <!DOCTYPE html >
<html>
   <head>
      <meta charset="ISO-8859-2" />
      <title>Trojkat</title>
      <link rel="stylesheet" href="lab5_B01.css" type="text/css" media="all" />
  </head>
  <body>
      <div class="trojkat_svg_box">
      <svg encoding="ISO-8859-2"  id="svg" width="100%" height="100%" style="background-color:#000000;"  xmlns="http://www.w3.org/2000/svg">
         <!-- prostokat points = ( x1,y1, x1,y2, y2,x2, x2,y1 ) -->
         <polygon id ="tlo" points="0,0,0,500,500,500,500,0"  class="tlo"/>
         <!-- trojkat points = ( x1,y1, x2,y2, x3,y3 ) -->
         <polygon id ="trojkat" points="50.00,50.00,350.00,150.00,100.00,300.00" class="trojkat"/>
         <!-- kolo  cx = x, cy = y, R = r -->
         <circle id="kolo" cx="200" cy="200" r="141.42" fill="none" stroke="blue" stroke-width="1" class="kolo" />
         <circle id ="K" cx="200.00" cy="200.00" r="2" stroke="black" stroke-width="1" fill="black"/>
      </svg>
      </div>
  </body>
</html>

      Plik lab5_B01.css - ( [listing dokumentu] [link do dokumentu] ) 

      /* lab4_7a */
.trojkat_svg_box {
    text-align: center;
    width: 500px;
    height: 500px;
    border: none;
    float: left;
    margin: 10px;
}
.tlo{
		pointer-events: none;
		fill:white;
		stroke:none
}
.trojkat{
		fill:#cccccc;
		stroke:#000000;
		stroke-width:1;
}
.punkt{
		stroke:black;
		stroke-width:2;
		fill:black;
		pointer-events:all;
		cursor: pointer;
}

/*
.trojkat_svg {
    text-align: center;
    width: 500px;
    height: 500px;
    border: black solid 1px;
    float: left;
}
.xyz_input {
    width: 30px;
}
.naviation_panel {
    float: left;
    width: 200px;
    margin: 10px;
}
.legend {
    float: left;
    width: 700px;
    margin: 10px;
}
.opis {
    float: left;
    width: 700px;
    margin: 10px;
}
.wysokosci{
  	visibility: hidden;
		stroke:green;
		stroke-width:1;
}
.srodkowe{
		visibility: hidden;
		stroke:blue;
		stroke-width:1;
}
.symetralne{
		visibility: hidden; 
		stroke:rgb(99,99,99);
		stroke-width:1;
}
*/
    2. Okrąg opisany na trójkącie, grafika SVG, pliki "lab5_B02.html" i "lab5_B02.js". W ramach zadania zostanie zrealizowana strona WWW w której poprzez formularz wprowadzamy wierzchołki trójkąta. Skrypt w Javascript sprawdzi czy wprowadzone punkty tworzą trójkąt, a następnie wyznaczy parametry okręgu opisanego na tym trójkącie.

      Plik lab5_B02.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE html >
<html>
   <head>
      <meta charset="ISO-8859-2" />
      <title>Trojkat</title>
      <link rel="stylesheet" href="lab5_B01.css" type="text/css" media="all" />
      <script type="text/javascript" src="lab5_B02.js" >
      </script>
  </head>
  <body onload="javascript: load_img();"> 
      <div class="trojkat_svg_box">
      <svg encoding="ISO-8859-2"  id="svg" width="100%" height="100%" style="background-color:#000000;"  xmlns="http://www.w3.org/2000/svg">
         <polygon id ="tlo" points="0,0,0,500,500,500,500,0"  class="tlo"/>
         <polygon id ="trojkat" points="50.00,50.00,350.00,150.00,100.00,300.00" class="trojkat"/>
         <circle id="kolo" cx="200" cy="200" r="141.42" fill="none" stroke="blue" stroke-width="1" class="kolo" />
         <circle id ="K" cx="200.00" cy="200.00" r="2" stroke="black" stroke-width="1" fill="black"/>
      </svg>
      </div>
      <div class="naviation_panel">
	    <fieldset>
	       <legend>Wierzcholki trojkata</legend>
    	   <label for="x1">X1:</label>
	       <input type="text" name="x1" id="x1" class="xyz_input" value="50"/>
	       <label for="y1">Y1:</label>
	       <input type="text" id="y1" name="y1" class="xyz_input" value="50"/>
         <br />
	       <label for="x2">X2:</label>
	       <input type="text" name="x2" id="x2" class="xyz_input" value="350"/>
	       <label for="y2">Y2:</label>
	       <input type="text" name="y2" id="y2" class="xyz_input" value="150"/>
         <br />
	       <label for="x3">X3:</label>
	       <input type="text" name="x3" id="x3" class="xyz_input" value="100"/>
	       <label for="y3">Y3:</label>
	       <input type="text" name="y3" id="y3" class="xyz_input" value="300"/>
	       <br /><br />
         <input type="button" value="Rysuj" onclick="load_img();" />
	    </fieldset>
      </div>
  </body>
</html>

      Plik lab5_B02.js - ( [listing dokumentu] [link do dokumentu] ) 

      top.eulerLine = EulerLine; 
            
function load_img()  {
   var x1=document.getElementById("x1").value;
   var x2=document.getElementById("x2").value;
   var x3=document.getElementById("x3").value;
   var y1=document.getElementById("y1").value;
   var y2=document.getElementById("y2").value;
   var y3=document.getElementById("y3").value;

   var trojkat=[];
       trojkat[0]=[];
       trojkat[1]=[];
       trojkat[2]=[];

       trojkat[0][0]=parseFloat(x1);
       trojkat[0][1]=parseFloat(y1);
       trojkat[1][0]=parseFloat(x2);
       trojkat[1][1]=parseFloat(y2);
       trojkat[2][0]=parseFloat(x3);
       trojkat[2][1]=parseFloat(y3);

   window.eulerLine(trojkat);
}
        
       
function EulerLine(trojkat)  {
                                    
   //sprawdzamy czy sie da zbudowac trojkat
   var czy_sie_da=0;
   var d=[];
       d[0]=Math.sqrt( (trojkat[0][0]-trojkat[1][0])*(trojkat[0][0]-trojkat[1][0]) + (trojkat[0][1]-trojkat[1][1])*(trojkat[0][1]-trojkat[1][1]) );
	   d[1]=Math.sqrt( (trojkat[1][0]-trojkat[2][0])*(trojkat[1][0]-trojkat[2][0]) + (trojkat[1][1]-trojkat[2][1])*(trojkat[1][1]-trojkat[2][1]) );
	   d[2]=Math.sqrt( (trojkat[2][0]-trojkat[0][0])*(trojkat[2][0]-trojkat[0][0]) + (trojkat[2][1]-trojkat[0][1])*(trojkat[2][1]-trojkat[0][1]) );

   if(d[0]+d[1]<=d[2]) czy_sie_da=1;
   if(d[1]+d[2]<=d[0]) czy_sie_da=1;
   if(d[0]+d[2]<=d[1]) czy_sie_da=1;

   if(czy_sie_da==1) {
       alert("Z podanych punktow nie mozna zbudowac trojkata");
	   return 0;
	} else {
	   var srodek=[];
	       srodek[0]=[];
	       srodek[1]=[];
	       srodek[2]=[];
	   for(i=0;i<3;i++)  {
		   if(i==2)
		       sasiad = 0;
		   else
		       sasiad = i+1;
		   srodek[i][0]=(trojkat[sasiad][0]+trojkat[i][0])/2;
		   srodek[i][1]=(trojkat[sasiad][1]+trojkat[i][1])/2;
	   }

	   //obliczamy wspolczynniki rownania prostych dla symetralnych bokow
	   var a_symetr=[];
	   var b_symetr=[];
	   for(i=0;i<3;i++)  {
		   if(i==2)
		       sasiad = 0;
		   else
		       sasiad = i+1;
		   var A = trojkat[sasiad][1] - trojkat[i][1];
		   var B = trojkat[sasiad][0] - trojkat[i][0];
		   var C = trojkat[sasiad][0]*trojkat[i][0] - (trojkat[sasiad][1]*trojkat[i][0]);

		   a_symetr[i] = -1*(1/(A/B)); // z warunku na prostpadlosc prostych
		   b_symetr[i] = srodek[i][1] - a_symetr[i]*srodek[i][0];

	   }

	   var U=[];
	   var R=0;
    
       //wyznaczamy punkt przeciecia symetralnych, czyli srodek okregu opisanego
	   U[0]= (b_symetr[1]-b_symetr[0])/(a_symetr[0]-a_symetr[1]);
	   U[1]= a_symetr[1]*U[0]+b_symetr[1];
    
       //wyznaczamy promien okregu opisanego
	   R = (trojkat[1][0] - U[0])*(trojkat[1][0] - U[0]) ;
       R = R + (trojkat[1][1] - U[1])*(trojkat[1][1] - U[1] ) ;
       R = Math.sqrt(R) ;

	   var polyTrojkat = document.getElementById('trojkat');
	   var kolo = document.getElementById('kolo');
	   var k = document.getElementById('K');

       polyTrojkat.setAttribute('points',''+trojkat[0][0]+', '+trojkat[0][1]+', '+trojkat[1][0]+' '+trojkat[1][1]+', '+trojkat[2][0]+', '+trojkat[2][1]);
       kolo.setAttribute('cx',U[0]);
       kolo.setAttribute('cy',U[1]);
       kolo.setAttribute('r',R);

	   k.setAttribute('cx',U[0]);
	   k.setAttribute('cy',U[1]);
	}
}
    Zadanie B.

    Opracować skrypt prezentujący flagę olimpijską wykorzystując w pierwszym przypadku technologię "canvas" a w drugim przypadku "svg".

  3. Obsługa stanu w serwisie WWW

    4. lab5_state
    Rys.2 Obsługa stanu w serwisie WWW.

    Protokół http jest bezstanowy. Standardowo po zakończeniu obsługi żądania http przez serwer, serwer nie zapisuje danych dotyczących klienta, a przeglądarka po wyświetleniu informacji, nie posiada danych umożliwiających utrzymanie interakcji z serwerem. Jednak, jeżeli tworzymy spersonalizowany serwis, dostępny poprzez logowanie, oczekujemy od serwisu, aby zarówno przeglądarka jak i serwer pamiętały interakcje pomiędzy serwerem i przeglądarką.

    Do realizacji tego zadania opracowano dwie technologie:

    • przechowywanie danych przez przeglądarkę na dysku - http cookie,
    • przechowywanie danych przez serwer - przechowywanie danych sesyjnych.

  4. Obsługa ciasteczek w języku JavaScript

    5. lab5_cookie
    Rys.3 Cookie w serwisie WWW.

    HTTP Cookie umożliwiają przechowanie tymczasowych danych pomiędzy kolejnymi wizytami na konkretnej stronie na komputerze klienta. Ciasteczka ustawia serwer i przesyła do klienta w nagłówku protokołu http, po stronie klienta informacja jest zapisyna na dysku i przy kolejnych wywołaniach do serwisu klient dodaje ciasteczka do nagłówka żądania http. Ciasteczka używamy np. do obsługi logowania ( zapamiętanie sesji ), personalizowania strony ( zapamiętanie preferencji użytkownika ) czy badania preferencji użytkownika ( ankiety ). Maksymalna wielkość ciasteczka to 4 kB, przeglądarka może zapisac 300 plików cookie ale dla danego serwera (ścieżki) maksymalnie 20.

    Wysyłając ciasteczko z serwera ustawiamy następujące parametry (atrybuty):
    Set-Cookie: nazwa=wartość; expires=DATA; path=¦CIEŻKA; domain=DOMENA; secure

    • (wymagane dane) nazwa i przypisana jej wartość.
    • (opcjonalne dane) expires - czas ważności danego ciasteczka (po jego upłynięciu przeglądarka przestanie je wysyłać i powinna je usunąć z komputera klienta), przykładowy format daty: Tuesday, 03-Jan-2019 18:30:00 GMT. Brak parametru oznacza, że ciasteczko zostanie usunięte po zamknięciu przeglądarki.
    • (opcjonalne dane) Parametry ograniczające widoczność ciasteczka:
      • path - parametr podany w celu ograniczenia widoczności ciasteczka do danej ścieżki dostępu do katalogu (liczy się ścieżka widoczna w URL-u pliku, a nie rzeczywiste położenie na dysku serwera.
      • domain - parametr określa dokąd ciateczko może być wysłane, przy czym serwer może określić tylko swoją domenę lub domeny niższego stopnia. W momencie wywołania przez użytkownika adresu URL, przeglądarka sprawdza czy ma ważne ciasteczka dla tej domeny.
      • secure - parametr nie posiada wartości, jeżli zostanie podany, to ciasteczko będzie widoczne (wysłane) tylko wtedy gdy połączenie będzie szyfrowane (użycie protokołu HTTPS).
    1. Sprawdzamy ciasteczka umieszczone dla witryny www.fis.agh.edu.pl wykonując kod javascript umieszczony w pliku "lab5_D01.html"

      Plik lab5_D01.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!doctype html>
<html>
<head>
  <title>Lista zmiennych Cookie</title>
  <meta charset="ISO-8859-2">
  <script language="JavaScript" >
     window.onload = showCookies ;
     function showCookies() {
       var outMsg = '';
       if (document.cookie.length = 0 ) 
         { outMsg = " Brak ciasteczek "  ; }
       else  {
          outMsg += "<table><tr><th>Nazwa ciasteczka</th><th>Zawartos ciasteczka</th></tr>" ;
          var thisCookie = document.cookie.split(";");
          for ( var i=0; i<thisCookie.length; i++ )
            {
               outMsg += "<tr><td>" + thisCookie[i].split("=")[0] + "</td>";
               outMsg += "<td>" + thisCookie[i].split("=")[1] +"</td></tr></tr>";
            }
          outMsg += "</table>";
       }
       document.getElementById("cookieData").innerHTML = outMsg ; 
     }       
  </script>
</head>
<body>
    <h3>Lista ciasteczek</h3>
    <p id="cookieData"> </p>
</body>
</html>
    2. W kolejnym skrypcie tworzymy nowe ciasteczko, które umożliwi wypełnienie pola po wczytaniu ponownym skryptu, plik "lab5_D02.html"

      Plik lab5_D02.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!doctype html>
<html>
<head>
  <title>Zmiana elementw graficznych</title>
  <meta charset="ISO-8859-2">
  <script type="text/javascript">
     window.onload = nameFieldInit ;
     function nameFieldInit() {
       var userName = '';
       if (document.cookie.length > 0 )   {
          var dimCookie = document.cookie.split(";") ; 
          for ( var i=0; i<dimCookie.length; i++ )  {
            dataCookie = dimCookie[i].split("=") ;
            // alert ( dataCookie[0]+" => "+dataCookie[1]) ;
            if ( "userName" == dataCookie[0] )  { 
                userName = dataCookie[1] ;
                document.getElementById("nameField").value = userName;
                document.getElementById("nameField").onblur = setCookie;
            }
          }
       }
     }
     
     function setCookie() {
       var expireDate = new Date();
       expireDate.setMonth(expireDate.getMonth()+6);
       var userName = document.getElementById("nameField").value;
       document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString();
     }  
        
  </script>
</head>
<body>
  <form onsubmit="setCookie()" >
    <p>Podaj swoje imi: <input type="text" id="nameField" /> </p>
    <input type="submit" />
  </form>
</body>
</html>
    3. Przechowywanie ustawiania styli na stronie www w ciasteczkach, plik "lab5_D03.html"

      Plik lab5_D03.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!doctype html>
<html>
<head>
  <title>Zmiana koloru tla</title>
  <meta charset="ISO-8859-2">
  <style type="text/css">
    body { background-color:white; }
  </style>
  <script type="text/javascript">
  function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
      offset = document.cookie.indexOf(search)
      // if cookie exists
      if (offset != -1) { 
        offset += search.length
        // set index of beginning of value
        end = document.cookie.indexOf(";", offset);
        // set index of end of cookie value
        // -- alert ( "[ offset = "+offset+", end = "+end+" ]" );
        if (end == -1) end = document.cookie.length;
        returnvalue=unescape(document.cookie.substring(offset, end))
      }
    }
    return returnvalue;
  }

  function setcolor(what){
    document.body.style.backgroundColor=what
    document.cookie="bgcolor="+what
  }

  function setcolor1(){
    if (get_cookie("bgcolor") != "") {
      var bgcolor = get_cookie("bgcolor");
      document.body.style.backgroundColor = bgcolor;
     }
  }

  </script>
  </head>
  <body onload="setcolor1();">
    <form name="a1">
    <p><select name="a2" size="1">
         <option value="white">Select background color </option>
         <option value="#F0F0F0">Light gray</option>
         <option value="#80FFFF">Sky blue</option>
         <option value="#C6C6FF">Purple</option>
         <option value="white">White</option>
       </select>
    <input type="button" value="Go" onClick="setcolor(document.a1.a2.options[document.a1.a2.selectedIndex].value)"></p>
    </form>
  </body>
</html>
    4. Personalizowanie wyglądu strony z wykorzystaniem styli CSS, plik "lab5_D04.html"

      Plik lab5_D04.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <html>
  <head>
    <title>Test cookie</title>
    <script>
    function changeColor() {
      var ind_poz_wyb = document.getElementById('sel').options.selectedIndex;
      var klucz_poz_wyb = document.getElementById('sel').options[ind_poz_wyb].value;
      document.getElementById('div_b').style.border='5px solid '+klucz_poz_wyb;
      cookieHandler.setCookie('color', klucz_poz_wyb, 1 );
      cookieHandler.setCookie('index', ind_poz_wyb, 1 );
      console.log(klucz_poz_wyb) ;      
    }     

    function setColor() {
      if ( cookieHandler.isValidCookie('color') ) { 
        var marg_color = cookieHandler.getCookieValue('color');
        var ind_color = cookieHandler.getCookieValue('index');
        document.getElementById('div_b').style.border='5px solid ' + marg_color;
        document.getElementById('sel').options.selectedIndex=ind_color;
        console.log(marg_color) ;
        console.log(ind_color);
      } else {
        document.getElementById('div_b').style.border='5px solid blue';
        document.getElementById('sel').options.selectedIndex=0;        
      }
    } 

    function unSetCookie() {
      cookieHandler.deleteCookie('color');
      cookieHandler.deleteCookie('index');
    }
    
    function listCookie() {
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      var text = "<table><tr><th>Nazwa ciasteczka</th><th>Zawartosc ciasteczka</th></tr>" ;;
      for(var i = 0; i < ca.length; i++) {
        text += "<tr><td>" + ca[i].split("=")[0] + "</td>";
        text += "<td>" + ca[i].split("=")[1] +"</td></tr></tr>";
      }
      text += "</table>";
      document.getElementById('div_cookie').innerHTML = text ;
    }    
    
    
    var cookieHandler = {};
    cookieHandler.isValidCookie = function (cookieName) {
      var cookieValue = cookieHandler.getCookieValue(cookieName);
      return (cookieValue == '') ? false : true;
    }; 
    cookieHandler.setCookie = function (cookieName, cookieValue, nDays) {
      var d = new Date();
      //d.setTime(d.getTime() + (nDays*24*60*60*1000));
      d.setTime(d.getTime() + (60*1000));
      var expires = "expires="+ d.toUTCString();
      document.cookie = cookieName + "=" + cookieValue +
        ";" + expires + ";path=/";
    }    
    cookieHandler.getCookieValue = function (cookieName) {
      var name = cookieName + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
      }
      return '';
    } 
    cookieHandler.deleteCookie = function (cookieName) {
      cookieHandler.setCookie(cookieName,'',-730);
    }
   

    window.onload = setColor;  
</script>
<style>
  #div_b { border: 5px solid blue ; width: 250px; margin: 10px; padding: 10px; }
</style>
  </head>
  <body>
    <div id='div_b'>
      <p><b>Test serwisu z ciateczkami</b> <br/>
         obsluga po stronie klienta w JS</p>
      <p>Wybierz kolor ramki</p>
      <form>
        <select id='sel' onchange='changeColor()'>
          <option value='blue'>Niebieska</option>
          <option value='red'>Czerwona</option>
          <option value='green'>Zielona</option>         = 
          <option value='yellow'>Zolta</option>
        </select><br/><br/>
        <input type='button' id='del' value='Usun cookie' onclick='unSetCookie()'></input>
        <br/><br/>
        <input type='button' id='list' value='Lista cookie' onclick='listCookie()'></input>
        <br/><br/>
        <input type='button' id='rel' value='Przeladuj strone' onclick='location.reload();'></input>
      </form>
    </div>
    <div id="div_cookie"></div>
  </body>
</html>
    5. Personalizowanie informacji na stronie, plik "lab5_D05.php"

      Plik lab5_D05.php ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <?php
if( isset($_COOKIE["thema"]) ) {
    // echo print_r($_COOKIE) ;
    $thema = $_COOKIE["thema"];
} else {
    $thema = 0;
    setcookie("thema", "0", time()+60, "/");
}
$thema_val = array ( "Wybierz temat serwisu", "Flora i fauna", "Podroze", "Technologia", "Nauka" ) ;
$option = '' ;
$max = count($thema_val) ;
for ( $i=0; $i < $max; $i++ ) {
    if ( $i == $thema ) {
       $option .= "<option value='".$i."' selected >".$thema_val[$i]."</option>" ;
    } else {
       $option .= "<option value='".$i."'>".$thema_val[$i]."</option>" ;
    }
}
switch ($thema) {
     case 0:
       $content_title = 'Strona tytulowa' ;

       break ;
     case 1:
       $content_title = 'Flora i fauna' ;
       $content='
          <figure>
          <img src="../images/flora_fauna.jpg" alt="flora_fauna" />
	      <figcaption style="text-align:center; width:70%">Rys.1 Flora.</figcaption>
          </figure> ';        
       break ;     
     case 2:
       $content_title = 'Podroze' ;
       $content='
          <figure>
          <img src="../images/podroze.jpg" alt="podroze" />
	      <figcaption style="text-align:center; width:70%">Rys.1 Podroze.</figcaption>
          </figure> ';        
       break ;
     case 3:
       $content_title = 'Technologia' ;
       $content='
          <figure>
          <img src="../images/technologia.jpg" alt="technologia" />
	      <figcaption style="text-align:center; width:70%">Rys.1 Technologia.</figcaption>
          </figure> ';        
       break ;
     case 4:
       $content_title = 'Nauka' ;
       $content='
          <figure>
          <img src="../images/nauka.jpg" alt="nauka" />
	      <figcaption style="text-align:center; width:70%">Rys.1 Nauka.</figcaption>
          </figure> ';        
       break ;       
}
  
?>
<html>
  <head>
    <title>Test cookie</title>
    <script>
    function changeThema() {
      var ind_poz_wyb = document.getElementById('sel').options.selectedIndex;
      console.log(ind_poz_wyb) ;
      cookieHandler.setCookie('thema', ind_poz_wyb, 1 );
    }     
    function unSetCookie() {
      cookieHandler.deleteCookie('thema');
    }  
    function listCookie() {
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      var text = "<table><tr><th>Nazwa ciasteczka</th><th>Zawartosc ciasteczka</th></tr>" ;;
      for(var i = 0; i < ca.length; i++) {
        text += "<tr><td>" + ca[i].split("=")[0] + "</td>";
        text += "<td>" + ca[i].split("=")[1] +"</td></tr></tr>";
      }
      text += "</table>";
      document.getElementById('div_cookie').innerHTML = text ;
    }      
    
    var cookieHandler = {};
    cookieHandler.isValidCookie = function (cookieName) {
      var cookieValue = cookieHandler.getCookieValue(cookieName);
      return (cookieValue == '') ? false : true;
    }; 
    cookieHandler.setCookie = function (cookieName, cookieValue, nDays) {
      var d = new Date();
      d.setTime(d.getTime() + (nDays*24*60*60*1000));
      var expires = "expires="+ d.toUTCString();
      document.cookie = cookieName + "=" + cookieValue +
        ";" + expires + ";path=/";
    }    
    cookieHandler.getCookieValue = function (cookieName) {
      var name = cookieName + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
      }
      return '';
    } 
    cookieHandler.deleteCookie = function (cookieName) {
      cookieHandler.setCookie(cookieName,'',-730);
    }
 

</script>
<style>
  #nav { border: 1px solid blue ; width: 300px; margin: 10px; padding: 10px; float:left; }
  #content { width: 500px; float:left; }
</style>
  </head>
  <body>
    <div id='nav'>
      <p>Test serwisu z ciasteczkami, <br/>
         dostarczanie wybranej tresci z serwisu.</p>
      <br/>
      <form>
        <select id='sel' onchange='changeThema();'>
          <?php echo $option ; ?>
        </select><br/><br/>        
        <input type='button' id='del' value='Usun cookie' onclick='unSetCookie();'></input>
        <br/><br/>
        <input type='button' id='list' value='Lista cookie' onclick='listCookie()'></input>
        <br/><br/>
        <input type='button' id='rel' value='Przeladuj strone' onclick='location.reload();'></input>
    </div>
    <div id='content'>
      <h2><?php echo $content_title ; ?></h2>
      <?php echo $content; ?>
    </div>
    <div id="div_cookie"></div>
  </body>
</html>

  5. Obsługa sesji w serwisie WWW

    6. lab5_session
    Rys.4 Obsługa sesji w serwisie WWW.
    1. Sprawdzamy zawartość globalnych tablic $_COOKIE i $_SESSION na serwerze, skrypt w pliku lab5_E01.php".

      Plik lab5_E01.php ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <?php

print '<br/><br/>' ;
print 'Tablica $_COOKIE<br/>';
print '=================<br/>';
foreach ( $_COOKIE as $key => $value ) {   
  print '$_COOKIE['.$key.'] = '.$value.'<br/>' ;
}

print  '<br/>' ; 
print  'Tablica $_SESSION</br>';
print  '==================<br/>';
foreach ( $_SESSION as $key => $value )  {
        print '$_SESSION['.$key.'] = '.$value.'<br/>' ;
}

?>
    2. W kolejnym skrypcie ustawiamy sesję i ponownie sprawdzamy tablice $_COOKIE i $_SESSION, skrypt w pliku "lab5_E02.php".

      Plik lab5_E02.php ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <?php

session_start();
print "Sesssion ID = ".session_id();

print '<br/><br/>' ;
print 'Tablica $_COOKIE<br/>';
print '=================<br/>';
foreach ( $_COOKIE as $key => $value ) {   
  print '$_COOKIE['.$key.'] = '.$value.'<br/>' ;
}

print  '<br/>' ; 
print  'Tablica $_SESSION</br>';
print  '==================<br/>';
foreach ( $_SESSION as $key => $value )  {
        print '$_SESSION['.$key.'] = '.$value.'<br/>' ;
}

?>
    3. Ustawiamy zmienną sesyjną w tablicy $_SESSSION, plik "lab5_E03.php".

      Plik lab5_E03.php ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <?php

session_start();
print "Sesssion ID = ".session_id().'<br/>';
print "Session name - ".session_name().'<br/>';

print "Ustawiamy zmienna sesyjna 'USER' <br/>" ;

$_SESSION['user'] = 'Kowalski' ;

print '<br/>' ;
print 'Tablica $_COOKIE<br/>';
print '=================<br/>';
foreach ( $_COOKIE as $key => $value ) {   
  print '$_COOKIE['.$key.'] = '.$value.'<br/>' ;
}

print  '<br/>' ; 
print  'Tablica $_SESSION</br>';
print  '==================<br/>';
foreach ( $_SESSION as $key => $value )  {
        print '$_SESSION['.$key.'] = '.$value.'<br/>' ;
}

?>
    4. Ustawienie parametrów ciasteczek do przesyłania identyfikatora sesji, plik "lab5_E04.php".

      Plik lab5_E04.php ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <?php

$lifetime=300;
session_start();
setcookie(session_name(),session_id(),time()+$lifetime,'/');

print "Sesssion ID = ".session_id().'<br/>';
print "Session name - ".session_name().'<br/>';

print "Ustawiamy zmienna sesyjna 'USER' <br/>" ;
$_SESSION['user'] = 'Kowalski' ;

print '<br/>' ;
print 'Tablica $_COOKIE<br/>';
print '=================<br/>';
foreach ( $_COOKIE as $key => $value ) {   
  print '$_COOKIE['.$key.'] = '.$value.'<br/>' ;
}

print  '<br/>' ; 
print  'Tablica $_SESSION</br>';
print  '==================<br/>';
foreach ( $_SESSION as $key => $value )  {
        print '$_SESSION['.$key.'] = '.$value.'<br/>' ;
}

?>
    5. Usunięcie zmiennych sesyjnych i sesji na serwerze, plik "lab5_E05.php"

      Plik lab5_E05.php ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <?php

session_start();
print "Sesssion ID = ".session_id().'<br/>';
print "Session name - ".session_name().'<br/>';

print "Usuwamy zmienne sesyjne <br/>" ;
unset($_SESSION['user']) ;

print "Usuwamy sesje <br/>" ;
setcookie( session_name(), session_id(), time()-42000, '/' ) ;
session_destroy();


print "Sprawdzamy Sesssion ID = ".session_id().'<br/>';



print '<br/>' ;
print 'Tablica $_COOKIE<br/>';
print '=================<br/>';
foreach ( $_COOKIE as $key => $value ) {   
  print '$_COOKIE['.$key.'] = '.$value.'<br/>' ;
}

print  '<br/>' ; 
print  'Tablica $_SESSION</br>';
print  '==================<br/>';
foreach ( $_SESSION as $key => $value )  {
        print '$_SESSION['.$key.'] = '.$value.'<br/>' ;
}

?>
    Zadanie E.

    Opracować skrypty obsługujące serwis WWW z dostępem do wybranych stron po uzyskaniu uwierzytelnienia z wykorzystaniem sesji i cookie. Do realiacji zadania wykorzystać skryptu z laboratorium 3.

  6. Technologia AJAX

    7. W ramach tego punktu zostanie przedstawiona technologia AJAX. Zadania zostaną zrealizowane z wykorzystaniem HTML5 i języka Javascript po stronie przeglądarki i skryptów php działających po stronie serwera.

    lab5_AJAX
    Rys.5 Technologia AJAX
    1. Pierwsza aplikacja AJAX, pliki klienta: "lab5_F01.html" i "lab5_F01.js" oraz na serwerze "lab5_F01.php".

      Plik lab5_F01.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 1</title>
      <script src="lab5_F01.js" type="text/javascript" ></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Pierwszy skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
     </div>
    </body>
</html>

      Plik lab5_F01.js - ( [listing dokumentu] [link do dokumentu] ) 

      var xhr;
function sendRequest()      {
  if (window.XMLHttpRequest)  {
    xhr = new XMLHttpRequest()  ;
    xhr.onreadystatechange = handleResponse ;
    xhr.open("GET", "lab5_F01.php", true);
    xhr.send(null); 
  } else {
    return (null) ;
  }
}

function handleResponse()      {
  if (xhr.readyState == 4)    {
    alert(xhr.responseText) ;
  }
}

      Plik lab5_F01.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php
print "Hello, AJAX" ; 
?>
    2. Status żądania aplikacji AJAX, pliki klienta: "lab5_F02.html" i "lab5_F02.js" oraz na serwerze "lab5_F01.php" (poprzednie ćwiczenie).

      Plik lab5_F02.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 2</title>
      <script src="lab5_F02.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Drugi skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

      Plik lab5_F02.js - ( [listing dokumentu] [link do dokumentu] ) 

      var xhr;
function sendRequest()      {
  if (window.XMLHttpRequest)  {
    xhr = new XMLHttpRequest()  ;
    xhr.onreadystatechange = handleResponse ;
    xhr.open("GET", "lab5_F01.php", true);
    xhr.send(null); 
  } else {
    return (null) ;
  }
}

function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xhr.readyState == 1) {
           myDiv.innerHTML += "Status zadania: 1 (laduje)<br/>" ;
    } 
    else if (xhr.readyState == 2) {
           myDiv.innerHTML += "Status zadania: 2 (zaladowany)<br/>" ;
    }
    else if (xhr.readyState == 3) {
           myDiv.innerHTML += "Status zadania: 3 (interaktywny)<br/>" ;
    }
    else if (xhr.readyState == 4) {
         if ( xhr.status == 200 )  {
             response = xhr.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response ;
         }
    }  
}
    3. Nagłówki żądania aplikacji AJAX, pliki klienta: "lab5_F03.html" i "lab5_F03.js" oraz na serwerze "lab5_F01.php" (poprzednie ćwiczenie).

      Plik lab5_F03.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 3</title>
      <script src="lab5_F03.js" type="text/javascript"></script>
   </head>
   <body>				
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Trzeci skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

      Plik lab5_F03.js - ( [listing dokumentu] [link do dokumentu] ) 

      var xhr;
function sendRequest()      {
  if (window.XMLHttpRequest)  {
    xhr = new XMLHttpRequest()  ;
    xhr.onreadystatechange = handleResponse ;
    xhr.open("GET", "lab5_F01.php", true);
    xhr.send(null); 
  } else {
    return (null) ;
  }
}

function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xhr.readyState == 1) {
           myDiv.innerHTML += "Status zadania: 1 (laduje)<br/>" ;
    } 
    else if (xhr.readyState == 2) {
           myDiv.innerHTML += "Status zadania: 2 (zaladowany)<br/>" ;
    }
    else if (xhr.readyState == 3) {
           myDiv.innerHTML += "Status zadania: 3 (interaktywny)<br/>" ;
    }
    else if (xhr.readyState == 4) {
         if ( xhr.status == 200 )  {
             response = xhr.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xhr.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}
    4. Przesłanie danych z formularza w technologii AJAX, metoda GET http, pliki klienta: "lab5_F04.html" i "lab5_F04.js" oraz na serwerze "lab5_F04.php".

      Plik lab5_F04.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 4</title>
      <script src="lab5_F04.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Czwarty skrypt</th></tr>
       </table>
       <br />
       <form action="#">
          Dowolny tekst: <input id="info" name="info" /><br />  
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

      Plik lab5_F04.js - ( [listing dokumentu] [link do dokumentu] ) 

      var xhr;
function sendRequest()      {
  if (window.XMLHttpRequest)  {
    xhr = new XMLHttpRequest()  ;
    var info = document.getElementById('info').value ;    
    var url = "lab5_F04.php" ;
    url += "?info=" + info;
    xhr.onreadystatechange = handleResponse ;
    xhr.open("GET", url, true);
    xhr.send(null); 
  } else {
    return (null) ;
  }
}
    
function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xhr.readyState == 4) {
         if ( xhr.status == 200 )  {
             response = xhr.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xhr.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

      Plik lab5_F04.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php
    $info                         = $_GET['info'] ;
    $request_method = $_SERVER['REQUEST_METHOD'] ;
    $query_string         = $_SERVER['QUERY_STRING'] ;
    echo  "<p>Env:</p>" ;
    echo "<table>" ;
    echo "<tr><td>REQUEST_METHOD: </td><td>".$request_method."</td></tr>" ;
    echo "<tr><td>QUERY_STRING: </td><td>".$query_string."</td></tr>" ;
    echo "<tr><td> Wartosc zmiennej 'info': </td><td>".$info."</td></tr>" ;
    echo "</table>" ;
?>
    5. Przesłanie danych z formularza w technologii AJAX, metoda POST http, pliki klienta: "lab5_F05.html" i "lab5_F05.js" oraz na serwerze "lab5_F05.php".

      Plik lab5_F05.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!DOCTYPE html>
<html>
   <head>
      <title>Ajax: Przyklad 5</title>
      <script src="lab5_F05.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" >
         <tr><th>Ajax: Piaty skrypt</th></tr>
       </table>
       <br />
       <form action="#"  >
          Dowolny tekst: <input id="info" name="info" /><br />  
          <input type="button" value="Pokaz informacje" onclick="sendRequest()"/>
       </form>
       <div id="MyDivElement"></div>
     </div>
    </body>
</html>

      Plik lab5_F05.js - ( [listing dokumentu] [link do dokumentu] ) 

      var xhr;
function sendRequest()      {
  if (window.XMLHttpRequest)  {
    xhr = new XMLHttpRequest()  ;
    var info = document.getElementById('info').value ;    
    var url = "lab5_F05.php" ;
    var data = "info=" + encodeURIComponent(info) ;
    xhr.onreadystatechange = handleResponse ;
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
    xhr.send(data);
  } else {
    return (null) ;
  }
}

function handleResponse()      {
    myDiv = document.getElementById("MyDivElement");
    if (xhr.readyState == 4) {
         if ( xhr.status == 200 )  {
             response = xhr.responseText;
             myDiv.innerHTML += "Status zadania: 4 (zakonczony)<br/>" ;
             myDiv.innerHTML += response + "<br/>" ;
             myDiv.innerHTML += "<pre>" + xhr.getAllResponseHeaders() + "</pre><br />" ;
         }
    }  
}

      Plik lab5_F05.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php
    $info                         = $_POST['info'] ;
    $request_method = $_SERVER['REQUEST_METHOD'] ;
    $query_string         = $_SERVER['QUERY_STRING'] ;
    echo  "<p>Env:</p>" ;
    echo "<table border='1'>" ;
    echo "<tr><td>REQUEST_METHOD: </td><td>".$request_method."</td></tr>" ;
    echo "<tr><td>QUERY_STRING: </td><td>".$query_string."</td></tr>" ;
    echo "<tr><td> Wartosc zmiennej 'info': </td><td>".$info."</td></tr>" ;
    echo "</table>" ;
?>
    Zadanie F1.

    Opracować aplikację realizującą kalkulator wykonujący obliczenia po stronie serwera w języku php. Wysyłamy typ operacji (dodawanie, odejmowanie, mnożenie i dzielenie) oraz dwie wartości a następnie odbieramy wynik. Aplikację realizujemy z wykorzystaniem technologii AJAX.

    Skrypt należy nazwać "lab5_zadanie_F.html".

    Rozwiązanie:

    Plik lab5_F.html ( [listing dokumentu] [link do dokumentu] )

    <script >
function send_xhr() {
   var xhr = new XMLHttpRequest() ;
   var x1 = document.getElementById('x1').value ; 
   var x2 = document.getElementById('x2').value ; 
   var op = form.op.value ;  
 
   var url = "lab5_F.php" ;
   url += "?x1=" + x1 + "&x2=" + x2 + "&op=" + op;
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
        if ( xhr.status == 200 )  {
             res = xhr.responseText.split(':') ;
             document.getElementById('wynik').innerHTML = '' ;
             document.getElementById('info').innerHTML = '' ;
             if ( res[0] == 'OK') {
               document.getElementById('wynik').innerHTML = res[1] ; }
             else {
               document.getElementById('info').innerHTML = "<span style='color:red'>Nie dzielimy przez zero ! </span>" ;  }                
        }
     } 
   } 
   xhr.open("GET", url, true);
   xhr.send(null);
} 
</script>
<!-- form action="zad04.php" method="get" name="form" -->
<form name="form">
   <table>
     <tr><td>Wartosc 1 </td><td><input type="text" name="x1" id="x1" value="" /></td><td></td></tr>
     <tr><td>Wartosc 2 </td><td><input type="text" name="x2" id="x2" value="" /></td><td id="info"></td></tr>
     <tr><td>Operacja  </td><td>( [+] <input type="radio" name="op"  value="S" />,
                                  [-] <input type="radio" name="op"  value="O" />,
                                  [*] <input type="radio" name="op"  value="M" />,
                                  [/] <input type="radio" name="op"  value="D" /> )</td><td></td></tr>
     <tr><td>Wynik </td><td id="wynik"> </td><td></td></tr>
     <tr><td></td><td><input type="button" value="Wyslij" onclick="send_xhr()" /></td><td></td></tr>
   </table> 
 </form>

    Plik lab5_F.php ( [listing dokumentu] [link do dokumentu] )

    <?php
  $x1 = $_GET['x1'];
  $x2 = $_GET['x2'];
  $op = $_GET['op'];
  $info = 'OK';
  switch ($op) {
     case 'S':
        $w = $x1 + $x2 ;
        break ;
     case 'O':
        $w = $x1 - $x2 ;
        break ;
     case 'M':
        $w = $x1 * $x2 ;
        break ;
     case 'D':
        if ( $x2 == 0 ) { $info = 'ERROR' ;}
        else { $w = $x1 / $x2 ; }
        break ;                          
  }
print $info.":".$w ;
?>
    Zadanie F2.

    Opracować aplikację obsługującą plik z ocenami studentów w oparciu o zadania z punktu A wykorzystując technoloię AJAX. Realizacja zadania wymaga opracowania trzech plików i modyfikacji jednego z zadania A. Wymagane pliki do realizacji zadania:

    Plik zadanie4.html zawierający formularz
    W ramach rtego pliku należy opracować podstawową strukturę strony naszej aplikacji, zawierającą możliwość wyświetlenia rekordów z pliku danych oraz umożliwiającą otwarcie formularza do wprowadzenia danych.
    Plik JavaScrpit z technologią AJAX
    Modyfikacja pliku wyświetlającego rekordy z pliku

  7. Miniportal do obsługi ocen semestralnych [wersja 2021.01.15.001]

    8. W ramach projektu zostanie opracowany serwis udostępniający oceny semestralne i końcowe ucznia. Serwis będzie wymagał dostępu poprzez uwierzytelnienie użytkownika. Po uwierzytelnieniu użytkownika w zależności od jego typu (autoryzacja) system udostępni stronę przeznaczoną dla nauczyciela, kiedy typ użytkownika to nauczyciel lub w przypadku kiedy typ użytkownika to uczeń stronę przeznaczoną dla ucznia. Opracowany projekt składa się z kilku plików. Poniżeej opis plików i realizowane zadania w ramach serwisu.

    1. portal_login.html - plik opracowany w języku html zawiera formularz logowania. Po wprowadzeniu nazwy użytkownika i hasła dane są przesłane do pliku "portal_sprawdz.php". Dane wysyłane są metodą "post" protokołu http.
    2. portal_sprawdz.php – plik zawierający kod opracowany w języku php. Po pobraniu danych przesłanych z formularza logowania (odczyt danych z tablicy $_POST) dane użytkownika porównywane są z danymi zapisanymi w pliku tekstowym "portal_users.txt". W przypadku poprawnej weryfikacji użytkownika system tworzy zmienne sesyjne ($_SESSION) oraz wysyła odpowiednie przekierowanie użytkownika na odpowiednią stronę. Dla nauczyciela wywoływana jest strona nauczyciela - "portal_nauczyciel.php" a przypadku ucznia strona "portal_uczen.php". W przypadku podania błędnych danych uwierzytelniających wyświetlana jest strona "portal_blad.html".
    3. portal_users.txt – plik zawiera dane użytkownika, tj. numer identyfikacyjny, imię i nazwisko, typ oraz hasło do serwisu. Dane użytkowników zapisane są w kolejnych rekordach pliku. Kolejność danych w pliku: numer identyfikacyjny (liczba naturalna), imię, nazwisko, hasło i typ. Dane są oddzielone znakiem dwukropka. Typ użytkownika reprezentują pojedyncze duże litery – N – nauczyciel i U – uczeń. Przykładowy wpis w pliku: 1:Adam:Abacki:haslo:N>
    4. portal_blad.html – plik zawiera informację o błędnym logowaniu do systemu oraz link przekierowujący na stronę logowania.
    5. portal_uczen.php - plik wyświetla dane poprawnie uwierzytelnionego w serwisie ucznia. Dane są odczytywane z pliku "portal_oceny.txt". Plik składa się z czterech części. W pierwszej części sprawdzamy czy użytkownik jest poprawnie zalogowany do serwisu – sprawdzenie czy jest ustawiona zmienna $_SESSION["log"]. W następnej części sprawdzamy czy plik został uruchomiony przez odpowiedniego użytkownika, w tym przypadku ucznia – sprawdzamy zmienną $_SESSION["typ"]. Po prawidłowej weryfikacji użytkownika w części pierwszej w drugiej skrypt odczytuje dane ucznia z pliku "portal_oceny.txt". W ostatniej części skryptu dane ucznia wyświetlane są w tabeli, która jest tworzona dynamicznie. W ramach serwisu uczeń może tylko odczytać dane przygotowane przez nauczyciela.
    6. portal_nauczyciel.php – plik umożliwia wprowadzenie danych uczniów do systemu. Podobnie jak plik "portal_uczen.php" plik można podzielić na cztery logiczne części. Tak jak w przypadku pliku "portal_uczen.php" na początku sprawdzamy poprawność uwierzytelnienia – zmienna $_SESSION["log'] oraz autoryzację użytkownika – czy plik wyświetla użytkownik typu nauczyciel – zmienna $_SESSION["typ"]. Po poprawnej weryfikacji użytkownika następuje odczyt danych zawartych w pliku "portal_oceny.txt'. W ostatniej części skryptu generowana jest tabela zawierająca dane wszystkich uczniów, którzy zostali umieszczeni w pliku "portal_oceny.txt". Utworzona w skrypcie tabela zawiera pola, które można edytować. W ramach generowanego dokumentu html wykorzystano nowy atrybut 'contenteditable” który umożliwia edycję danych w dokumencie html bez konieczności wykorzystywania elementu <input/>. Po wprowadzeniu danych dane wysyłane są poprzez funkcję opracowaną w języku Javascript umieszczoną w pliku "portal_func.js", który dołączony jest w nagłówku tworzonego dokumentu html przez skrypt umieszczony w pliku "portal_nauczyciel.php".
    7. portal_func.js – plik napisany w języku Javascript. W ramach pliku zawarte są dwie funkcje. Pierwsza z nich "fn_zapisz()" jest uruchomiana poprzez akcję onclick() w dokumencie html wygenerowanym przez skrypt zawarty w pliku "portal_nauczyciel.php". Początkowo odczytujemy dane z zamieszczone w tabeli dotyczące ocen uczniów. Po ich odpowiednim sformatowaniu w ramach funkcji wysyłamy dane do serwera WWW. Dane wysyłamy do skryptu "portal_zapisz.php" wykorzystując technologię AJAX. Wykorzystanie technologii AJAX umożliwia nam przesłanie danych na serwer bez przeładowania aktualnie wyświetlanej strony. W ramach pliku "portal_func.js" umieszczona jest jeszcze druga funkcja "Response()". Zadaniem tej funkcji jest przekazanie użytkownikowi informacji o poprawnym zapisaniu danych po stronie serwera.
    8. portal_zapisz.php – plik zawiera skrypt napisany w języku php. W ramach skryptu następuję odebranie danych opracowanych przez nauczyciela i ich zapis do pliku "portal_oceny.txt". Na początku sprawdzamy czy dane przesyła użytkownik uwierzytelniony w systemie – sprawdzenie zmiennej $_SESSION["log"]. W następnym kroku odczytujemy dane przesłane z strony nauczyciela – odczyt zmiennej $_POST["data"]. Po zdekodowaniu przesłanych danych odczytujemy pierwszy wiersz z pliku "portal_oceny.txt" zawierający informacje o przedmiotach obsługiwanych w ramach serwisu a następnie nadpisujemy plik "portal_oceny.txt" nowymi danymi.
    9. portal_oceny.txt – plik zawiera informacje o przedmiotach oraz ocenach obsługiwanych w ramach naszego sytemu. W pierwszym rekordzie umieszczamy nazwy przedmiotów rozdzielone znakiem dwukropka. W kolejnych liniach umieszczone są dane dla kolejnych uczniów. Plik należy wcześniej przygotować umieszczając w nim przedmioty i numery wszystkich uczniów, którzy będą obsługiwani w systemie.
    1. Logowanie do serwisu, plik "portal_login.html"

      Plik portal_login.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!doctype html>
<html>
  <head>
    <title>Strona logowania do serwisu</title>
    <meta charset="ISO-8859-2">
  </head>
  <body>
  <!-- prosta strona z formularzem do logowania 
  -->

<div>
   <h1>Panel logowania</h1>
   <form method="post" action="portal_sprawdz.php">
     <table> 
       <tr><td>Uytkownik:</td><td><input type="text" name="user" value="" size="15" /></td></tr>
       <tr><td>Haso: </td><td><input type="password" name="pass" size="15" /></td></tr>
       <tr><td colspan="2"><input type="submit" value="zaloguj" /></td></tr>
     </table>
   </form> 
</div>
</body>
</html>
    2. Skrypt sprawdzający poprawność logowania na podstawie pliku z danymi użytkowników, plik "portal_sprawdz.php"

      Plik portal_sprawdz.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php

error_reporting(E_ALL);

try
 {        
   $nazwisko = $_POST['user'] ;
   $haslo    = $_POST['pass']  ;
            
   /*** czytamy plik z danymi uzytkownikow ***/
   $nazwa = "portal_users.txt" ;

   if (file_exists($nazwa)) 
    {       
      //echo "Plik $nazwa istnieje"
      $uchwyt = fopen($nazwa,"r");
      $ok = 0 ;
      while ( false !== ($linia = fgets($uchwyt)) )
       {
         list($id,$imie,$user,$pass,$typ) = explode(":",$linia) ;
         if ( $user == $nazwisko and $pass == $haslo )  { 
            session_start(); 
            $_SESSION['log']    = 'ok';
            $_SESSION['id']     = $id ;
            $_SESSION['typ']    = $typ ;
            $_SESSION['user']   = $imie." ".$user ;
            $host  = $_SERVER['HTTP_HOST'];
            $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');                    
            if ( $typ == 'U' ) {
                $extra = 'portal_uczen.php';
                header("Location: http://$host$uri/$extra");
                exit;
             }
            else {
                $extra = 'portal_nauczyciel.php';
                header("Location: http://$host$uri/$extra");
                exit;
             }
          }  
       }       
      $host  = $_SERVER['HTTP_HOST'];
      $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
      $extra = 'portal_blad.html';
      header("Location: http://$host$uri/$extra");
      exit;
    }   
  else 
    {
      $host  = $_SERVER['HTTP_HOST'];
      $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
      $extra = 'portal_blad.html';
      header("Location: http://$host$uri/$extra");
      exit;  
     }         
 }
catch(Exception $e)
 {
    echo $e->getMessage();
 }
?>
    3. Plik z danymi użytkowników, plik "portal_users.txt"

      Plik portal_users.txt - ( [listing dokumentu] [link do dokumentu] ) 

      1:Adam:Abacki:aaa:U:
2:Bogdan:Babacki:aaa:U:
3:Lucjan:Cabacki:aaa:N:
4:Marek:Dadacki:aaa:U:
5:Bogdan:Kowalski:aaa:U:
    4. Plik obsługujący niepoprawne logowanie użytkownika, plik "portal_blad.html"

      Plik portal_blad.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

      <!doctype html>
<html>
  <head>
    <title>Bd logowania</title>
    <meta charset="ISO-8859-2">
  </head>
  <body>
  <div>
    <h1>Niepoprawne dane do logowania !</h1>
    <p>Podaj poprawnie identyfikator uytkownika i haso ! </p>
    <a href="portal_login.html">Powrt</a>
  </div>
</body>
</html>
    5. Plik ucznia wyświetlający dostępne oceny w systemie, plik "portal_uczen.php"

      Plik portal_uczen.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php 
session_start();

if ($_SESSION["log"]!="ok") {
   $host  = $_SERVER['HTTP_HOST'];
   $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
   $extra = 'portal_login.html';
   header("Location: http://$host$uri/$extra");
   exit;
  }
  
if ($_SESSION["typ"] != "U" ) {
   $host  = $_SERVER['HTTP_HOST'];
   $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
   $extra = 'portal_nauczyciel.php';
   header("Location: http://$host$uri/$extra");
   exit;
}  
 
$id = $_SESSION['id'] ;

?> 

<!doctype html>
<html>
<head>
  <title>Panel ucznia</title>
  <meta charset="ISO-8859-2">
  <style type="text/css">
    table { border-collapse:collapse; width: 450px; }
    table, td, th { border:1px solid blue; }
  </style> 
</head>
<body>

<?php

  $nazwa = "portal_oceny.txt" ;
  
   /**  wyswielimy oceny ucznia ktory sie zalogowal  **/
   
  echo "<h1>Oceny ucznia: ".$_SESSION['user']."  </h1>" ;               
  echo "<table border=\"1\" ><tr><th>Lp.</th><th>Nazwa przedmiotu</th>
        <th>Ocena na półrocze</th><th>Ocena roczna</th></tr>" ; 

   if (file_exists($nazwa)) 
    {       
      $uchwyt = fopen($nazwa,"r");
      $linia = fgets($uchwyt) ;
      $przedmioty = explode(":",$linia) ;
      while ( false !== ($linia = fgets($uchwyt)) )
       {
         $oceny = array() ;
         $oceny = explode(":",$linia) ; 
         // print_r($oceny) ;        
         if ( $oceny[0] == $_SESSION['id'] )  {
           for ( $ii=0; $ii<count($przedmioty);  $ii++ ) {
             $ip   = $ii+1 ;
             $txt  =  '<tr><td>'.$ip ;
             $txt .= '</td><td>'.$przedmioty[$ii] ;
             $io   = 2*$ii ;
             $txt .= '</td><td>'.$oceny[$io+1] ; 
             $txt .= '</td><td>'.$oceny[$io+2] ;                               
             $txt .= '</td></tr>';
             echo $txt ;         
           } 
         }
       } 
    }
      echo "</table>" ;                 
                        
?>

</body>
</html>
    6. Plik nauczyciela wprowadzający dane do serwisu, plik "portal_nauczyciel.php"

      Plik portal_nauczyciel.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php 
session_start();
if ($_SESSION["log"]!="ok") {
   $host  = $_SERVER['HTTP_HOST'];
   $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
   $extra = 'portal_login.html';
   header("Location: http://$host$uri/$extra");
   exit;
  }

  
if ($_SESSION["typ"] != "N" ) {
   $host  = $_SERVER['HTTP_HOST'];
   $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
   $extra = 'portal_uczen.php';
   header("Location: http://$host$uri/$extra");
   exit;
}   
//else {
//  session_destroy();
//  session_write_close();
//}

$id = $_SESSION['id'] ;
?> 
<!doctype html>
<html>                             
<head>
  <title>Panel nauczyciela</title>
  <meta charset="ISO-8859-2">
  <style type="text/css">
    table { border-collapse:collapse; width: 450px; }
    table, td, th { border:1px solid blue; }
  </style>   
  <script  src="portal_func.js" ></script>
</head>
<body >
<h1>Panel nauczyciela</h1>

<?php
  echo "<h3>Oceny kocowe na procze i koniec roku</h3>" ;
  $nazwa = "portal_users.txt" ;

  if (file_exists($nazwa)) 
    {       
      //echo "Plik $nazwa istnieje"
      $uchwyt = fopen($nazwa,"r");
      $ok = 0 ;
      while ( false !== ($linia = fgets($uchwyt)) )
       {
         list($id,$imie,$user,$pass,$typ) = explode(":",$linia) ;
         if ( $typ == 'U') {
           $uczen[$id]['imie'] = $imie ;
           $uczen[$id]['nazw'] = $user ;
         }
       }       
     }
  $l_uczniow = count($uczen) ;
  echo "<table border=\"1\" >" ;
  $nazwa = "portal_oceny.txt" ;
  if (file_exists($nazwa)) 
    {       
      $uchwyt = fopen($nazwa,"r");
      $linia = fgets($uchwyt) ;
      $przedmioty = explode(":",$linia) ;
      $txt  = "<tr><th>Lp.</th><th>ID</th><th>I.Nazwisko</th>" ;
      $txt1 = "<tr><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th>" ;
      for ( $ii=0; $ii<count($przedmioty);  $ii++ ) {
         $txt  .= "<th colspan=\"2\">".$przedmioty[$ii]."</th>" ;
         $txt1 .= "<th>sem.</th><th>kon.</th>" ;
      }
      $txt  .= "</tr>" ;
      $txt1 .= "</tr>" ;
      print $txt ;
      print $txt1 ;
      $id_uczen = 0 ;
      while ( false !== ($linia = fgets($uchwyt)) )
       {
         $oceny = array() ;
         $id_uczen = $id_uczen + 1 ;
         $oceny = explode(":",$linia) ;
         $l_przed = count($oceny)-1 ; 
           $txt  =  '<tr><td>'.$id_uczen.'</td><td id="u'.$id_uczen.'">'.$oceny[0].'</td>' ;
           $txt .=  '<td>'.$uczen[$oceny[0]]['imie'].' '.$uczen[$oceny[0]]['nazw'].'</td>' ;
           for ( $ii=0; $ii<count($oceny)-1;  $ii++ ) {             
             $ident = $oceny[0].'_'.$ii ;
             $txt .= '<td contenteditable="true" id='.$ident.'>'.$oceny[$ii+1].'</td>' ;                                      
           } 
           $txt .= '</tr>';
           echo $txt ;  
         //}
       } 
      echo "</table>\n" ;  
      echo "<p><input type=\"button\" value=\"Wyslij\" onclick=\"fn_zapisz();\" />&nbsp;&nbsp;<span id=\"ok\"></span></p>" ; 
      echo "<input type=\"hidden\" name=\"l_uczen\" id=\"luczen\" value=\"".$id_uczen."\" />\n" ;
      echo "<input type=\"hidden\" name=\"l_przed\" id=\"lprzed\" value=\"".$l_przed."\" />\n" ;
    }
?>       

</body>
</html>
    7. Plik zawierający funkcje w języku Javascript odczytujące dane z strony nauczyciela i wysyłający na serwer WWW, plik "portal_func.js"

      Plik portal_func.js - ( [listing dokumentu] [link do dokumentu] ) 

      function fn_zapisz() {
     var luczen = document.getElementById('luczen').value ;
     var lprzed = document.getElementById('lprzed').value ;
     var dane = new Array();
     var result = new Array();
     for ( var i1=0; i1<luczen; i1++ ) {
       i11 = i1+1;
       id_u = 'u'+i11 ;
       dane[i1] = new Array() ; 
       dane[i1][0]  = document.getElementById(id_u).innerHTML ;
       //alert(dane[i1][0]);
       txt = (dane[i1][0]).toString() ;
       for ( var i2=0; i2<lprzed; i2++ )
         {
          id_p = dane[i1][0].toString()+'_'+(i2).toString() ;
          i3 = i2+1 ;
          dane[i1][i3] = document.getElementById(id_p).innerHTML ;
          txt += ':'+(dane[i1][i3]).toString() ;
         } 
     result.push (txt) ;    
     }
     
     json_data = JSON.stringify(result);
     var param = "data=" + encodeURIComponent(json_data) ;
     http_request = new XMLHttpRequest(); }
     http_request.onreadystatechange = Response;
     url="portal_zapisz.php" ;
     now = new Date();
     url = url + '?time=' + now.getTime() ;
     http_request.open('POST', url, true);
     http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     http_request.setRequestHeader("Content-length", param.length);
     http_request.send(param);       
 }  
 
function Response() { 
   if (http_request.readyState == 4) {
     var result = http_request.responseText;
     document.getElementById('ok').innerHTML = result ;
   }
 }
    8. Plik zapisujący dane do serwisu, plik "portal_zapisz.php"

      Plik portal_zapisz.php - ( [listing dokumentu] [link do dokumentu] ) 

      <?php

session_start();

if ($_SESSION["log"]!="ok") {
   $host  = $_SERVER['HTTP_HOST'];
   $uri   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
   $extra = 'portal_login.html';
   header("Location: http://$host$uri/$extra");
   exit;
  }
  
  
$data = $_POST['data'] ; 
$data = str_replace("\\n","",$data) ;
$dane = json_decode($data); 
$nazwa = "portal_oceny.txt" ;
if (file_exists($nazwa)) 
  {       
    $uchwyt = fopen($nazwa,"r");
    $linia = fgets($uchwyt) ;
  }  
fclose($uchwyt) ;    

$uchwyt = fopen($nazwa,"w") ;
fwrite($uchwyt, $linia) ;
for ( $i=0; $i < count($dane); $i++ )
 {  $txt = $dane[$i]."\n" ;
    fwrite($uchwyt, $txt) ; }
fclose($uchwyt) ; 
 
// print_r ($dane) ;
print "OK. Dane zapisane." ;

?>
    9. Plik portal_oceny.txt zawierający przykładowe dane. Rekord pierwszy zawiera przedmioty dostępne w serwisie, kolejne rekordy dane studentów. Każdy rekord zawiera dane dla jednego studenta. Na początku każdej linii znajduje się identyfikator ucznia zgodny z identyfikatorem użytkownika w pliku "portal_users.txt". Po numerze identyfikacyjnym należy wprowadzić znak dwukropka w licznie równej dwukrotności liczby przedmiotów (w prezentowanym przykładzie – 4 przedmioty – 8 dwukropków). Tak przygotowany plik nie zawiera ocen. Oceny zostaną wprowadzone poprzez panel nauczyciela.

      Plik portal_oceny.txt - ( [listing dokumentu] [link do dokumentu] ) 

      j.polski:matematyka:historia
1:4:3:5<br>:3:4<br>:3<br>
2:4:4:4<br>:4:3<br>:4<br>
4:5<br>:2<br>:4<br>:4<br>:4<br>:4<br>
5:3<br>:4<br>:4<br>:4<br>:4<br>:4<br>