home_site

Lab01 - Plik vs baza danych - przykład aplikacji [ lab:10.03.2023, ver. SPN.2023.03.29.005 ]

Zawartość strony

Przykładowe serwisy obsługujące dane

W ramach przykładów zostaną zaprezentowane dwie strony WWW obsługujące przetwarzanie danych w serwise internetowym.

  1. Serwis z wykorzystaniem pliku tekstowego.

    1. Główny plik aplikacji - plik.html.

      Skrypt plik.html ( [listing dokumentu] [link do dokumentu]

         <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Ajax</title>
      <script src="plik.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" bgcolor="gray">
         <tr><th><big>Serwis danych - plik tekstowy.</big></th></tr>
       </table>
       <br />
       <form action="#">
          <table><tr>
          <td><input type="button" value="Pobranie danych z pliku" onclick="_list()"/></td>
          <td><input type="button" value="Dodanie rekordu do pliku" onclick="_ins_form()"/></td>
          </tr></table>
       </form>
     </div>
     <div id="data"></div>
     <div id="result"></div>
    </body>
</html>
    2. Plik z skryptem javascript i obsługą obiektu XHR plik.js.

      Skrypt plik.js ( [listing dokumentu] [link do dokumentu]

      var request;
var objJSON;
var id_mongo;
const xhr = new XMLHttpRequest();
var url = "http://orion.fis.agh.edu.pl/~antek/spn_2022/bd01/";


// Lista rekordow w bazie
function _list() {    
   var url_list = url + "plik_read.php" ;
   xhr.open("GET", url_list, true);   
   xhr.responseType = 'html';
   xhr.addEventListener("load", e => {
      if (xhr.status == 200)    {
         //objJSON = JSON.parse(request.response);
		 res = xhr.response ;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
      }
   })
   xhr.send(null);
}

// Wstawianie rekordow do bazy
function _ins_form() {
   var form1 = "<form name='add'><table>" ;
   form1    += "<tr><td>Nazwisko</td><td><input type='text' id='nazwisko' value='nazwisko' ></input></td></tr>";
   form1    += "<tr><td>Imie</td><td><input type='text' id='imie' value='imie' ></input></td></tr>";
   form1    += "<tr><td>Ocena</td><td><input type='text' id='ocena' value='ocena' ></input></td></tr>";  
   form1    += "<tr><td></td><td><input type='button' value='wyslij' onclick='_insert(this.form)' ></input></td></tr>";
   form1    += "</table></form>";
   document.getElementById('data').innerHTML = form1;
   document.getElementById('result').innerHTML = ''; 
}

function _insert(form)  {
  var nazwisko = document.getElementById('nazwisko').value ;    
  var imie     = document.getElementById('imie').value ; 
  var ocena    = document.getElementById('ocena').value ;   
  var url_insert = url + "plik_insert.php" ;
  var data = encodeURI("nazwisko=" + nazwisko + "&imie=" + imie + "&ocena=" + ocena) ;
 
  xhr.open("POST", url_insert, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
    }
  })
  xhr.send(data);
  
}
    3. Odczyt danych z pliku danych data.csv przez skrypt w językuu php plik_read.php.

      Skrypt plik_read.php ( [listing dokumentu] [link do dokumentu]

      <table><tr><th>Lp.</th><th>Nazwisko</th><th>Imie</th><th>Ocena</th></tr>

<?php
$nazwa = "dane.csv" ;
if (file_exists($nazwa)) 
 {       
    //echo "Plik $nazwa istnieje"
    $uchwyt = fopen($nazwa,"r");
    $lp = 0 ;
	$table = array() ;
    while ( false !== ($linia = fgets($uchwyt)) )
     {
       list($table[$lp]['nazwisko'],$table[$lp]['imie'],$table[$lp]['ocena']) = explode(":",$linia) ;
	   $lp++ ;
	 }
    $nazwisko = array() ;
	foreach ( $table as $key => $row )	{	
	   $nazwisko[$key] = $row['nazwisko'] ;
	}   
	array_multisort($nazwisko, SORT_ASC, $table ) ;
    // print_r ( $table ) ;
	$lp = 0 ;
	foreach ( $table as $key => $row )	{	
       $lp++ ;
       print "<tr><td>".$lp."</td><td>".$row['nazwisko']."</td><td>".$row['imie']."</td><td>".$row['ocena']."</td></tr>" ;
	}   
  }     
?>
</table>
    4. Zapis danych do pliku data.csv przez skrypt w języku php plik_insert.php.

      Skrypt plik_insert.php ( [listing dokumentu] [link do dokumentu] )

       
<?php
$nazwa = "dane.csv"  ;
 if (file_exists($nazwa)) 
   { echo "Plik $nazwa istnieje <br/>"; $uchwyt = fopen($nazwa,"a");  } 
 else 
   { echo "Plik $nazwa nie istnieje <br />"; $uchwyt = fopen($nazwa,"w"); }  
/*
 *  Zapis danych do pliku
 *  $tekst - zmienna zawiera dane do zapisu
 *  - funkcja fwrite() zapisuje dane do pliku
 */
  $imie      = $_POST['imie'] ;
  $nazwisko  = $_POST['nazwisko'] ;
  $ocena     = $_POST['ocena'] ;
  $record    = "\n".$nazwisko.":".$imie.":".$ocena.":" ;
  fwrite($uchwyt,$record) ; 
  print  "Dane zostaly zapisane do pliku."
?>
    5. Działający przykład na serwerze Orion.

  2. Serwis z wykorzystaniem relacyjnej bazy danych.

    1. Główny plik aplikacji - baza.html.

      Skrypt baza.html ( [listing dokumentu] [link do dokumentu]

        <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Ajax</title>
      <script src="baza.js" type="text/javascript"></script>
   </head>
   <body>
     <div style="text-align:center" >
       <table border="1" bgcolor="gray">
         <tr><th><big>Serwis danych - baza danych PostgreSQL.</big></th></tr>
       </table>
       <br />
       <form action="#">
          <table><tr>
          <td><input type="button" value="Pobranie danych z pliku" onclick="_list()"/></td>
          <td><input type="button" value="Dodanie rekordu do pliku" onclick="_ins_form()"/></td>
          </tr></table>
       </form>
     </div>
     <div id="data"></div>
     <div id="result"></div>
    </body>
</html>
    2. Plik z skryptem javascript i obsługą obiektu XHR plik.js.

      Skrypt baza.js ( [listing dokumentu] [link do dokumentu]

        var request;
var objJSON;
var id_mongo;
const xhr = new XMLHttpRequest();
var url = "http://orion.fis.agh.edu.pl/~antek/spn_2022/bd01/";


// Lista rekordow w bazie
function _list() {    
   var url_list = url + "baza_read.php" ;
   xhr.open("GET", url_list, true);   
   xhr.responseType = 'html';
   xhr.addEventListener("load", e => {
      if (xhr.status == 200)    {
         //objJSON = JSON.parse(request.response);
		 res = xhr.response ;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
      }
   })
   xhr.send(null);
}

// Wstawianie rekordow do bazy
function _ins_form() {
   var form1 = "<form name='add'><table>" ;
   form1    += "<tr><td>Nazwisko</td><td><input type='text' id='nazwisko' value='nazwisko' ></input></td></tr>";
   form1    += "<tr><td>Imie</td><td><input type='text' id='imie' value='imie' ></input></td></tr>";
   form1    += "<tr><td>Ocena</td><td><input type='text' id='ocena' value='ocena' ></input></td></tr>";  
   form1    += "<tr><td></td><td><input type='button' value='wyslij' onclick='_insert(this.form)' ></input></td></tr>";
   form1    += "</table></form>";
   document.getElementById('data').innerHTML = form1;
   document.getElementById('result').innerHTML = ''; 
}

function _insert(form)  {
  var nazwisko = document.getElementById('nazwisko').value ;    
  var imie     = document.getElementById('imie').value ; 
  var ocena    = document.getElementById('ocena').value ;   
  var url_insert = url + "baza_insert.php" ;
  var data = encodeURI("nazwisko=" + nazwisko + "&imie=" + imie + "&ocena=" + ocena) ;
 
  xhr.open("POST", url_insert, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
    }
  })
  xhr.send(data);
  
}
    3. Odczyt danych z relacyjnej bazy danych DBaaS ElephantSQL - RBD PostgreSQL przez skrypt w języku php baza_read.php.

      Skrypt baza_read.php ( [listing dokumentu] [link do dokumentu]

        <?php

include 'baza_config.php' ;

$dsn  = "pgsql:host=$host;port=5432;dbname=$db;";
$db = new PDO($dsn, $user, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) ; 

//if ($bd) {
//  echo "Connected to the $db database successfully!";
//} 

$sth = $db->prepare('SELECT * FROM lab01.osoba ORDER BY nazwisko') ;
$sth->execute() ;
$resultset = $sth->fetchAll() ;
?>

<table><tr><th>Lp.</th><th>Nazwisko</th><th>Imie</th><th>Ocena</th></tr>

<?php 

$lp = 0;
foreach ( $resultset as $row ) {
  $lp ++; 
  echo '<tr><td>'.$lp.'</td><td>'.$row['nazwisko'].'</td><td>'.$row['imie'].'</td><td>'.$row['ocena'].'</td></tr>' ; }
?> 
</table>
    4. Zapis danych do relacyjnej bazy danych DBaaS ElephantSQL - RBD PostgreSQL przez skrypt w języku php baza_insert.php.

      Skrypt baza_insert.php ( [listing dokumentu] [link do dokumentu] )

       
<?php

include 'baza_config.php' ;

$dsn  = "pgsql:host=$host;port=5432;dbname=$db;";
$db = new PDO($dsn, $user, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) ;

$imie      = $_POST['imie'] ;
$nazwisko  = $_POST['nazwisko'] ;
$ocena     = $_POST['ocena'] ;

$sth = $db->prepare('INSERT INTO lab01.osoba VALUES ( :nazwisko, :imie, :ocena ) ') ;
$sth->bindValue(':nazwisko',$nazwisko,PDO::PARAM_STR) ; 
$sth->bindValue(':imie',$imie,PDO::PARAM_STR) ; 
$sth->bindValue(':ocena',$ocena) ; 
$resp = ( $sth->execute() ? 'true' : 'false' ) ;
if ( $resp )
{ print  "Dane zostaly zapisane do bazy." ; }


?>
    5. Działający przykład na serwerze Orion.

  3. [ ZADANIE ] Serwis obsługujący tabelę KSIAZKA udostępnioną w relacyjnej bazie danych w serwisie DBaaS ElephantSQL .

    1. W ramach zadania należy utworzyć w katalogu swoim katalogu public.www katalog bd01. Wewnątrz niego należy umieścić poniższe pliki.
      • Plik index.html - zawierający skrypt startowy strony w języku html.
      • Plik zadanie.js - zawierający logikę serwisu, przełącząnie pomiędzy panelami i komunikacja z serwerem WWW (wymagana modyfikacja).
      • Plik zadanie_config.php - zawierający parametry konfiguracyjne do połączenia z bazą ElephantSQL (wymagana modyfikacja).
      • Plik zadanie_read.php - zawierający skrypt php odczytujący tabelę ksiazka z bazy PostgreSQL.
      • Plik zadanie_insert.php - zawierający skrypt php zapisujący dane do tabeli ksiazka w bazie PostgreSQL.
      • Plik zadanie.css - przykładowy plik zawierający style dla serwisu.
    2. Główny plik serwisu - index.html.

      Skrypt index.html ( [listing dokumentu] [link do dokumentu]

        <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Ajax</title>
      <script src="zadanie.js" type="text/javascript"></script>
	  <link rel="stylesheet" href="zadanie.css"  />
   </head>
   <body>
     <div style="text-align:center" >
       <table >
         <tr><th><big>Serwis danych - baza danych PostgreSQL.</big></th></tr>
       </table>
       <br />
       <form action="#">
          <table><tr>
          <td><input type="button" value="Pobranie danych z pliku" onclick="_list()"/></td>
          <td><input type="button" value="Dodanie rekordu do pliku" onclick="_ins_form()"/></td>
          </tr></table>
       </form>
     </div>
     <div id="data"></div>
     <div id="result"></div>
    </body>
</html>
    3. Plik z skryptem javascript i obsługą obiektu XHR zadanie.js.

      Skrypt zadanie.js ( [listing dokumentu] [link do dokumentu]

        var request;
var objJSON;
var id_mongo;
const xhr = new XMLHttpRequest();
// URL zgony z Państwa serwisem 
var url = "http://orion.fis.agh.edu.pl/~n2nazwisko/bd01/";


// Lista rekordow w bazie
function _list() {    
   var url_list = url + "zadanie_read.php" ;
   xhr.open("GET", url_list, true);   
   xhr.responseType = 'html';
   xhr.addEventListener("load", e => {
      if (xhr.status == 200)    {
         //objJSON = JSON.parse(request.response);
		 res = xhr.response ;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
      }
   })
   xhr.send(null);
}

// Wstawianie rekordow do bazy
function _ins_form() {
   var form1 = "<form name='add'><table>" ;
   form1    += "<tr><td>ISBN</td><td><input type='text' id='isbn' placeholder='isbn' ></input></td></tr>";
   form1    += "<tr><td>Tytul</td><td><input type='text' id='tytul' placeholder='tytul' ></input></td></tr>";
   form1    += "<tr><td>Autor</td><td><input type='text' id='autor' placeholder='autor' ></input></td></tr>";  
   form1    += "<tr><td>Rok wydania</td><td><input type='text' id='rok_wydania' placeholder='rok_wydania' ></input></td></tr>";
   form1    += "<tr><td>Wydawnictwo</td><td><input type='text' id='wydawnictwo' placeholder='wydawnictwo' ></input></td></tr>";
   form1    += "<tr><td>Cena</td><td><input type='text' id='cena' placeholder='cena' ></input></td></tr>";    
   form1    += "<tr><td></td><td><input type='button' value='wyslij' onclick='_insert(this.form)' ></input></td></tr>";
   form1    += "</table></form>";
   document.getElementById('data').innerHTML = form1;
   document.getElementById('result').innerHTML = ''; 
}

function _insert(form)  {
  var isbn         = document.getElementById('isbn').value ;    
  var tytul        = document.getElementById('tytul').value ; 
  var autor        = document.getElementById('autor').value ; 
  var rok_wydania  = document.getElementById('rok_wydania').value ;    
  var wydawnictwo  = document.getElementById('wydawnictwo').value ; 
  var cena         = document.getElementById('cena').value ;  
  var url_insert   = url + "zadanie_insert.php" ;
  var data = encodeURI("isbn="+isbn + "&tytul="+tytul + "&autor="+autor + "&rok_wydania="+rok_wydania + "&wydawnictwo="+wydawnictwo + "&cena="+cena) ;
 
  xhr.open("POST", url_insert, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         response = xhr.response;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
    }
  })
  xhr.send(data);
  
}
    4. Plik z danymi uwierzytalniającymi do serwisu DBaaS ElephantSQL zadanie_config.php.

      Skrypt zadanie_config.php ( [listing dokumentu] [link do dokumentu]

        <?php
// Poniżej należy wprowadzić dane, które były wprowadzane już do aplikacji DBeaver.
$host     = ' -- host -- ' ;
$db       = ' -- database name -- ' ;
$user     = ' -- database user -- ' ;
$password = ' -- password -- ' ;
?>
    5. Odczyt danych z relacyjnej bazy danych DBaaS ElephantSQL - RBD PostgreSQL przez skrypt w języku php zadanie_read.php.

      Skrypt zadanie_read.php ( [listing dokumentu] [link do dokumentu]

        <?php

include 'zadanie_config.php' ;

$dsn  = "pgsql:host=$host;port=5432;dbname=$db;";
$db = new PDO($dsn, $user, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) ; 

//if ($bd) {
//  echo "Connected to the $db database successfully!";
//} 

$sth = $db->prepare('SELECT * FROM lab01.ksiazka') ;
$sth->execute() ;
$resultset = $sth->fetchAll() ;
?>
<table class="xhr">
<thead class="xhr">
<tr class="xhr"><th class="xhr">Lp.</th><th class="xhr">ISBN</th><th class="xhr">Tytul</th><th class="xhr">Autor</th>
                <th class="xhr">Rok wydania</th><th class="xhr">Wydawnictwo</th><th class="xhr">Cena</th></tr>
</thead class="xhr">
<tbody class="xhr">
<?php 

$lp = 0;
foreach ( $resultset as $row ) {
  $lp ++; 
  echo '<tr class="xhr"><td class="xhr">'.$lp.'</td><td class="xhr">'.$row['isbn'].'</td><td class="xhr">'.$row['tytul']
                .'</td><td class="xhr">'.$row['autor'].'</td><td class="xhr">'.$row['rok_wydania']
				.'</td><td class="xhr">'.$row['wydawnictwo'].'</td><td class="xhr">'.$row['cena'].'</td></tr>' ; }
?>    
</tbody>
</table>
    6. Zapis danych do relacyjnej bazy danych DBaaS ElephantSQL - RBD PostgreSQL przez skrypt w języku php zadanie_insert.php.

      Skrypt zadanie_insert.php ( [listing dokumentu] [link do dokumentu] )

       
<?php

include 'zadanie_config.php' ;

$dsn  = "pgsql:host=$host;port=5432;dbname=$db;";
$db = new PDO($dsn, $user, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) ;

$isbn         = $_POST['isbn'] ;
$tytul        = $_POST['tytul'] ;
$autor        = $_POST['autor'] ;
$rok_wydania  = $_POST['rok_wydania'] ;
$wydawnictwo  = $_POST['wydawnictwo'] ;
$cena         = $_POST['cena'] ;

$sth = $db->prepare('INSERT INTO lab01.ksiazka ( isbn, tytul, autor, rok_wydania, wydawnictwo, cena ) VALUES ( :isbn, :tytul, :autor, :rok_wydania, :wydawnictwo, :cena ) ') ;
$sth->bindValue(':isbn',$isbn,PDO::PARAM_STR) ; 
$sth->bindValue(':tytul',$tytul,PDO::PARAM_STR) ; 
$sth->bindValue(':autor',$autor,PDO::PARAM_STR ) ; 
$sth->bindValue(':rok_wydania',$rok_wydania,PDO::PARAM_STR) ; 
$sth->bindValue(':wydawnictwo',$wydawnictwo,PDO::PARAM_STR) ; 
$sth->bindValue(':cena',$cena ) ; 
$resp = ( $sth->execute() ? 'true' : 'false' ) ;
if ( $resp )
{ print  "Dane zostaly zapisane do bazy." ; }


?>
    7. Plik zawierający przykładowe style CSS zadanie.css.

      Skrypt zadanie.css ( [listing dokumentu] [link do dokumentu] )

       
table.xhr { border-collapse:collapse; width: 60% }
table.xhr, td.xhr, th.xhr { border:1px solid blue; }
table.xhr tr.xhr:nth-child(even) { background: #D0E4F5; }
thead.xhr { background-color: #00ffff; text-align:center; }
tbody.xhr { background-color: #f0f8ff; font-style:italic; text-align:right }
tfoot.xhr { background-color: red; font-weight:bold; text-align:right }
    8. Działający przykład na serwerze Orion.

  4. [ SERVIS ] Serwis CRUD obsługujący tabelę KSIAZKA udostępnioną w relacyjnej bazie danych w serwisie DBaaS ElephantSQL .

    1. W ramach projektu przedstawiony został serwis WWW umożliwiający realizację wszystkich operacji na danych w bazie danych tj. operacji wstawiania danych, modyfikacji danych, usuwania danych i ich odczytu. Jeżeli serwis lub aplikacja obsługuje wszystkie powyższe funkcjonalności to mówimy, że obsługuje operacje CRUD.
      • [C] - CREATE - wstawianie danych do bazy danych, polecenie INSERT w relacyjnej bazie danych
      • [R] - READ - odczyt danych z bazy danych, polecenie SELECT w relacyjnej bazie danych
      • [U] - UPDATE - poprawa danych w bazie danych, polecenie UPDATE w relacyjnej bazie danych
      • [D] - DELETE - usunięcie danych z bazy danych, polecenie DELETE w relacyjnej bazie danych
    2. Przedstawiony projekt zawiera cztery pliki (pięć z plikiem CSS), które umieszczamy w katalogu public.www katalog bd01.
      • Plik book.html - zawierający skrypt startowy strony w języku html.
      • Plik book.js - zawierający logikę serwisu, przełącząnie pomiędzy panelami i komunikacja z serwerem WWW (wymagana modyfikacja).
      • Plik book_config.php - zawierający parametry konfiguracyjne do połączenia z bazą ElephantSQL (wymagana modyfikacja).
      • Plik book.php - zawierający skrypt php odczytujący tabelę ksiazka z bazy PostgreSQL.
    3. Główny plik serwisu - book.html.

      Skrypt book.html ( [listing dokumentu] [link do dokumentu]

        <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Serwis BOOK</title>
      <script src="book.js" type="text/javascript"></script>
	  <link rel="stylesheet" href="book.css"  />
   </head>
   <body>
     <div style="text-align:center" >
       <table >
         <tr><th><big>Serwis BOOK - baza danych PostgreSQL.</big></th></tr>
       </table>
       <br />
       <form action="#">
          <table><tr>
          <td><input type="button" value="Pobranie danych z bazy" onclick="_list()"/></td>
          <td><input type="button" value="Dodanie rekordu do bazy" onclick="_ins_form()"/></td>
          <td><input type="button" value="Usuniecie rekordu z bazy" onclick="_del_list()"/></td>
          <td><input type="button" value="Poprawa rekordu w bazy" onclick="_upd_list()"/></td>		  
          </tr></table>
       </form>
     </div>
     <div id="data"></div>
     <div id="result"></div>
    </body>
</html>
    4. Plik z skryptem javascript i obsługą obiektu XHR zadanie.js.

      Skrypt book.js ( [listing dokumentu] [link do dokumentu]

        var request;
var objJSON;
var id_mongo;
const xhr = new XMLHttpRequest();
// URL zgony z Państwa serwisem 
var url = "http://orion.fis.agh.edu.pl/~n2nazwisko/bd01/";


// Lista rekordow w bazie
function _list() {    
   var url_list = url + "book.php?action=read" ;
   xhr.open("GET", url_list, true);   
   xhr.responseType = 'html';
   xhr.addEventListener("load", e => {
      if (xhr.status == 200)    {
		 res = xhr.response ;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
      }
   })
   xhr.send(null);
}

// Wstawianie rekordow do bazy
function _ins_form() {
   var form1 = "<form name='add'><table>" ;
   form1    += "<tr><td>ISBN</td><td><input type='text' id='isbn' placeholder='isbn' ></input></td></tr>";
   form1    += "<tr><td>Tytul</td><td><input type='text' id='tytul' placeholder='tytul' ></input></td></tr>";
   form1    += "<tr><td>Autor</td><td><input type='text' id='autor' placeholder='autor' ></input></td></tr>";  
   form1    += "<tr><td>Rok wydania</td><td><input type='text' id='rok_wydania' placeholder='rok_wydania' ></input></td></tr>";
   form1    += "<tr><td>Wydawnictwo</td><td><input type='text' id='wydawnictwo' placeholder='wydawnictwo' ></input></td></tr>";
   form1    += "<tr><td>Cena</td><td><input type='text' id='cena' placeholder='cena' ></input></td></tr>";    
   form1    += "<tr><td></td><td><input type='button' value='wyslij' onclick='_insert(this.form)' ></input></td></tr>";
   form1    += "</table></form>";
   document.getElementById('data').innerHTML = form1;
   document.getElementById('result').innerHTML = ''; 
}

function _insert(form)  {
  var isbn         = document.getElementById('isbn').value ;    
  var tytul        = document.getElementById('tytul').value ; 
  var autor        = document.getElementById('autor').value ; 
  var rok_wydania  = document.getElementById('rok_wydania').value ;    
  var wydawnictwo  = document.getElementById('wydawnictwo').value ; 
  var cena         = document.getElementById('cena').value ;  
  var url_insert   = url + "book.php?action=insert" ;
  var data = encodeURI("isbn="+isbn + "&tytul="+tytul + "&autor="+autor + "&rok_wydania="+rok_wydania + "&wydawnictwo="+wydawnictwo + "&cena="+cena) ;
 
  xhr.open("POST", url_insert, true);
  xhr.responseType = 'html';
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.addEventListener("load", e => {
    if ( xhr.status == 200 )  {
         res = xhr.response;
		 document.getElementById('data').innerHTML = '';
         document.getElementById('result').innerHTML = res;
    }
  })
  xhr.send(data); 
}

// Usuwanie rekordow z bazy danych
function _del_list() {    
   var url_action = url + "book.php?action=delete" ;
   xhr.open("GET", url_action, true);   
   xhr.responseType = 'html';
   xhr.addEventListener("load", e => {
      if (xhr.status == 200)    {
		  res = xhr.response ;
		  document.getElementById('data').innerHTML = '';
          document.getElementById('result').innerHTML = res;
      }
   })
   xhr.send(null);
}

function _delete(form) {
   var url_action = url + "book.php?action=delete" ;	
   var rec = form.del.selectedIndex;
   var id = document.getElementsByTagName('option')[rec].value;   
   var data = encodeURI("record="+id);
   xhr.open("POST", url_action, true);
   xhr.responseType = 'html';
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
   xhr.addEventListener( "load", e => {
      if (xhr.status  == 200 )    {
		  res = xhr.response ;
		  document.getElementById('data').innerHTML = '';
          document.getElementById('result').innerHTML = JSON.stringify(xhr.response);
      }
   }) 
   xhr.send(data);
}

// Poprawa rekordow w bazie danych
function _upd_list() { 
   var url_action = url + "book.php?action=update" ;
   xhr.open("GET", url_action, true);   
   xhr.responseType = 'html';
   xhr.addEventListener("load", e => {
      if (xhr.status == 200)    {
		  res = xhr.response ;
		  document.getElementById('data').innerHTML = '';
          document.getElementById('result').innerHTML = res;
      }
   })
   xhr.send(null);
  }

function _upd_form(form) {
   var url_action = url + "book.php?action=update" ;	
   var rec = form.upd.selectedIndex;
   var id = document.getElementsByTagName('option')[rec].value;   
   var data = encodeURI("record="+id+'&form=set');
   xhr.open("POST", url_action, true);
   xhr.responseType = 'html';
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
   xhr.addEventListener( "load", e => {
      if (xhr.status  == 200 )    {
		  res = xhr.response ;
		  document.getElementById('data').innerHTML = '';
          document.getElementById('result').innerHTML = res ;
      }
   }) 
   xhr.send(data);
}


function _update(form) {
    var url_action = url + "book.php?action=update" ;
    isbn        = form.isbn.value;
    autor       = form.autor.value;
    tytul       = form.tytul.value;
    rok         = form.rok.value;
    wydawnictwo = form.wydawnictwo.value;
    cena        = form.cena.value;
	var data = encodeURI("record="+isbn+'&autor='+autor+'&tytul='+tytul+'&rok='+rok+'&wyd='+wydawnictwo+'&cena='+cena);
    xhr.open("POST", url_action, true);
    xhr.responseType = 'html';
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    xhr.addEventListener( "load", e => {
       if (xhr.status  == 200 )    {
	 	  res = xhr.response ;
		  document.getElementById('data').innerHTML = '';
          document.getElementById('result').innerHTML = res ;
      }
    }) 
    xhr.send(data);
}
    5. Plik z danymi uwierzytalniającymi do serwisu DBaaS ElephantSQL book_config.php.

      Skrypt book_config.php ( [listing dokumentu] [link do dokumentu]

        <?php
// Poniżej należy wprowadzić dane, które były wprowadzane już do aplikacji DBeaver.
$host     = ' -- host -- ' ;
$db       = ' -- database name -- ' ;
$user     = ' -- database user -- ' ;
$password = ' -- password -- ' ;
?>
    6. Plik obsługujący wszystkie operacje CRUD w relacyjnej bazy danych DBaaS ElephantSQL - RBD PostgreSQL.

      Skrypt book.php ( [listing dokumentu] [link do dokumentu]

        <?php

include 'book_config.php' ;

$dsn  = "pgsql:host=$host;port=5432;dbname=$db;";
$db = new PDO($dsn, $user, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) ; 


//   Czytanie danych z bazy danych dla ksiazki
if ( isset($_GET['action']) && $_GET['action'] == 'read' ) {
   $sth = $db->prepare('SELECT * FROM lab01.ksiazka') ; 
   $sth->execute() ;
   $resultset = $sth->fetchAll() ;
   print '
     <table class="xhr">
     <thead class="xhr"> 
     <tr class="xhr"><th class="xhr">Lp.</th><th class="xhr">ISBN</th><th class="xhr">Tytul</th><th class="xhr">Autor</th>
                <th class="xhr">Rok wydania</th><th class="xhr">Wydawnictwo</th><th class="xhr">Cena</th></tr>
     </thead class="xhr">
     <tbody class="xhr"> ' ;
   $lp = 0;
   foreach ( $resultset as $row ) {
      $lp ++; 
      echo '<tr class="xhr"><td class="xhr">'.$lp.'</td><td class="xhr">'.$row['isbn'].'</td><td class="xhr">'.$row['tytul']
                .'</td><td class="xhr">'.$row['autor'].'</td><td class="xhr">'.$row['rok_wydania']
				.'</td><td class="xhr">'.$row['wydawnictwo'].'</td><td class="xhr">'.$row['cena'].'</td></tr>' ; }
   print '
      </tbody>
      </table> ';
}	  
// Wprowadzanie rekordu do bazy danych	  
if ( isset($_GET['action']) && $_GET['action'] == 'insert' ) {
   $isbn         = $_POST['isbn'] ;
   $tytul        = $_POST['tytul'] ;
   $autor        = $_POST['autor'] ;
   $rok_wydania  = $_POST['rok_wydania'] ;
   $wydawnictwo  = $_POST['wydawnictwo'] ;
   $cena         = $_POST['cena'] ;

   $sth = $db->prepare('INSERT INTO lab01.ksiazka ( isbn, tytul, autor, rok_wydania, wydawnictwo, cena ) VALUES ( :isbn, :tytul, :autor, :rok_wydania, :wydawnictwo, :cena ) ') ;
   $sth->bindValue(':isbn',$isbn,PDO::PARAM_STR) ; 
   $sth->bindValue(':tytul',$tytul,PDO::PARAM_STR) ; 
   $sth->bindValue(':autor',$autor,PDO::PARAM_STR ) ; 
   $sth->bindValue(':rok_wydania',$rok_wydania,PDO::PARAM_STR) ; 
   $sth->bindValue(':wydawnictwo',$wydawnictwo,PDO::PARAM_STR) ; 
   $sth->bindValue(':cena',$cena ) ; 
   $resp = ( $sth->execute() ? 'true' : 'false' ) ;
   if ( $resp )
      { print  "Dane zostaly zapisane do bazy." ; }
}
// Usuwanie rekordu z bazy danych 
if ( isset($_GET['action']) && $_GET['action'] == 'delete' ) { 
   if ( isset($_POST['record'] ) ) {
	 $rec = $_POST['record'] ;
	 //print $rec;
     $sth = $db->prepare('DELETE FROM lab01.ksiazka WHERE isbn = :isbn') ;
     $sth->bindValue(':isbn',$rec,PDO::PARAM_STR) ; 
     $resp = ( $sth->execute() ? 'true' : 'false' ) ;
     if ( $resp )
       { print  "Rekord został usuniety z bazy." ; }    	 
   } else {
     $sth = $db->prepare('SELECT * FROM lab01.ksiazka') ; 
     $sth->execute() ;
     $resultset = $sth->fetchAll() ;
	 print '<form name="data"><select name="del" size="10">' ;
	 foreach ( $resultset as $row ) {
	   //print_r( $row) ;	 
       print '<option value="' .$row['isbn']. '" >'  
             .$row['isbn'].','.$row['tytul'].','.$row['autor'].','.$row['rok_wydania'].','.$row['wydawnictwo'] 
	         .'</option>' ;
	 }  
     print '</select><br/><input type="button" value="Usun" onclick="_delete(this.form)"/></form>' ;
   }
} 
// Poprawa rekordu w bazie danych  
if ( isset($_GET['action']) && $_GET['action'] == 'update' ) { 
  if ( isset($_POST['record'])) {
    if ( isset( $_POST['form'] ) && $_POST['form'] == 'set')  {
	  $rec = $_POST['record'] ;
	  // print $rec.' TUTAJ';
      $sth = $db->prepare('SELECT * FROM lab01.ksiazka WHERE isbn = :isbn' ) ;
      $sth->bindValue(':isbn',$rec,PDO::PARAM_STR) ; 	
	  $sth->execute() ;
      $rec = $sth->fetch() ; 
      $form1  = '<form name="upd"><table>' ;
      $form1 .= '<tr><td>ISBN</td><td><input type="hidden" name="isbn" value="'.$rec['isbn'].'" ></input></td></tr>';
      $form1 .= '<tr><td>Tytul</td><td><input type="text" name="tytul" value="'.$rec['tytul'].'" ></input></td></tr>';
      $form1 .= '<tr><td>Autor</td><td><input type="text" name="autor" value="'.$rec['autor'].'" ></input></td></tr>';  
      $form1 .= '<tr><td>Rok wyd.</td><td><input type="text" name="rok" value="'.$rec['rok_wydania'].'" ></input></td></tr>';
      $form1 .= '<tr><td>Cena</td><td><input type="text" name="cena" value="'.$rec['cena'].'" ></input></td></tr>';	  
      $form1 .= '<tr><td>Wydawnictwo</td><td><input type="text" name="wydawnictwo" value="'.$rec['wydawnictwo'].'" ></input></td></tr>';
      $form1 .= '<tr><td></td><td><input type="button" value="wyslij" onclick="_update(this.form)" ></input></td></tr>';
      $form1 .= '</table></form>';	
	  print $form1 ;
	} else {
	  $rec          = $_POST['record'] ;
      // $isbn         = $_POST['isbn'] ;
      $tytul        = $_POST['tytul'] ;
      $autor        = $_POST['autor'] ;
      $rok          = $_POST['rok'] ;
      $wyd          = $_POST['wyd'] ;
      $cena         = $_POST['cena'] ;	  
      $sth = $db->prepare('UPDATE lab01.ksiazka SET ( tytul, autor, rok_wydania, wydawnictwo, cena ) = ( :tytul, :autor, :rok, :wyd, :cena) WHERE isbn = :isbn' ) ;
      $sth->bindValue(':isbn',$rec,PDO::PARAM_STR) ; 
      $sth->bindValue(':tytul',$tytul,PDO::PARAM_STR) ; 
      $sth->bindValue(':autor',$autor,PDO::PARAM_STR ) ; 
      $sth->bindValue(':rok',$rok,PDO::PARAM_STR) ; 
      $sth->bindValue(':wyd',$wyd,PDO::PARAM_STR) ; 
      $sth->bindValue(':cena',$cena ) ; 
      $sth->execute() ;
    }
  } else {
    $sth = $db->prepare('SELECT * FROM lab01.ksiazka') ; 
    $sth->execute() ;
    $resultset = $sth->fetchAll() ;
	print '<form name="data"><select name="upd" size="10">' ;
	foreach ( $resultset as $row ) {
	  print_r( $row) ;	 
      print '<option value="' .$row['isbn']. '" >'  
             .$row['isbn'].','.$row['tytul'].','.$row['autor'].','.$row['rok_wydania'].','.$row['wydawnictwo'] 
	         .'</option>' ;
	}  
    print '</select><br/><input type="button" value="Popraw" onclick="_upd_form(this.form)"/></form>' ;
  }
}
    7. Plik zawierający przykładowe style CSS book.css.

      Skrypt book.css ( [listing dokumentu] [link do dokumentu] )
    8. Działający przykład na serwerze Orion.