Aplikacja internetowa napisana z wykorzystaniem HTML, CSS, PHP i MySQL finalnie nie przypomina swym funkcjonowaniem zwykłego programu, z którego możemy korzystać np. w systemie Windows. Jest to związane z naturą protokołu HTTP (Hypertext Transfer Protocol) odpowiedzialnego za wymianę danych na stronach internetowych. Wysyłanie żądań i odbieranie odpowiedzi z serwera wiąże się nieodłącznie z koniecznością ponownego wczytania strony. Wyobraźmy sobie teraz, że nasz zwyczajny program zainstalowany w systemie operacyjnym zachowuje się podobnie... W przypadku stron WWW jest to akceptowane ale bywa uciążliwe, nieefektywne i niewygodne dla użytkownika. Można temu przeciwdziałać za pomocą technologii Ajax

, która sprawia, że przeglądarka może skutecznie współpracować z serwerem bez ponownego wczytywania stron. W rezultacie aplikacja internetowa „zachowuje się” podobnie do zwykłego programu.

W celu zademonstrowania możliwości opisywanej technologii napisałem prosty program integrujący wiele technologii: takich jak wspomniany Ajax, jQuery(jQuery Foundation)/Javascript, PHP, HTML, MySQL.

Idea programu jest prosta, ma zapewnić użytkownikowi możliwość wyboru z listy rozwijanej jednego z czterech państw i zapisanie nazwy wybranego kraju w bazie oraz późniejsze odczytanie z niej wprowadzonej zawartości, co dodatkowo połączone będzie z usuwaniem starszych informacji dodanych w opisywany sposób.

Aby taki program stworzyć konieczny jest dostęp do Serwera WWW i bazy danych typu MySQL.

Pierwszy krok, to zaplanowanie struktury tabeli w bazie danych, w której będą przechowywane informacje o wyborach dokonanych przez użytkownika. Tabela będzie posiadała następujące kolumny: id, nazwa_kraju, timestamp. Pierwsza z nich to unikalny identyfikator nadawany automatycznie (nalezy wybrac opcję auto_increment) każdemu nowemu wpisowi (rekordowi); nazwa kraju jest zwykłym ciągiem znaków (varchar), timestamp – to znacznik czasu, który przechowa informacje o dacie dopisania nowego rekordu. Taką tabelę najprościej jest utworzyć w programie phpMyAdmin dostępnym w panelu wielu usług hostingowych, czy też np. w programie XAMPP.

Następnie potrzebny jest plik PHP, który zapewni nam połączenie z bazą danych – plik ten będzie załączany do innych plików PHP za pomocą funkcji require_once().

 

Kod baza.php

<?php

/*Definiowanie zmiennych z danymi niezbędnymi do połączenia z bazą danych*/
$serwer = 'adres serwera';
$uzytkownik = 'nazwa_uzytkownika_danych';
$haslo = 'haslo';
$nazwa_bazy = 'nazwa_bazy';
 
/*Połączenie z bazą*/
$db = mysqli_connect($serwer, $uzytkownik, $haslo, $nazwa_bazy);

/*Komunikat o błędzie w przypadku problemów z połączeniem*/
if (mysqli_connect_errno()) 
{
	echo 'Błąd';
	exit;	
}
else {
}

?>

Następnie konieczne jest utworzenie pliku index.php, gdzie należy zawrzeć formularz z listą wyboru, konieczne przyciski oraz blok div, w którym wyświetlane będą pobrane z bazy danych informacje.

 

Kod index.php

<!doctype html>
<html>
<?php

/*Załączenie pliku odpowiadającego za połączenie z bazą danych.*/
require_once('error.php');
require_once('baza.php');

?>

<head>
<meta charset="utf-8">
<title>Ajax, PHP, Mysql</title>

<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/skrypt.js"></script>
<link rel="stylesheet" href="/css/styl.css" />

</head>

<body>

<br/>
	
    <!--Uproszczony formularz z listą rozwijaną i przyciskami-->
	<form>
        <select id="lista">
          <option value="Polska">Polska</option>
          <option value="Węgry">Węgry</option>
          <option value="Czechy">Czechy</option>
          <option value="Austria">Austria</option>
        </select> 
        <br/>
        <br/>
        <button id="wyslij" type="button">Wyślij</button> 
        <br/>
        <br/>
        <button id="pobierz" type="button">Pobierz wykaz</button> 
    </form>
    
    <br/>
    <br/>
    
    <!--Blok przeznaczony na przechowanie informacji pobieranych z bazy-->
    <div id="wykaz">
	</div>

</body>
</html>

Potrzebne będą pliki PHP zapewniające wysłanie, pobranie i usuwanie danych:

 

Kod wyslij.php

<?php

/*Załączenie pliku odpowiadającego za połączenie z bazą danych.*/
require_once('baza.php');


/*Definicja funkcji filtrującej wywoływana na zmiennej przed jej przesłaniem do bazy. 
Utworzona ze względów bezpieczeństwa.*/

function filtrowanie($zmienna) 
{
  $zmienna = substr($zmienna, 0, 9); // Ograniczenie ciągu do pierwszych 10 znaków
  $zmienna = trim($zmienna);
  $zmienna = stripslashes($zmienna);
  $zmienna = htmlspecialchars($zmienna); 
  return $zmienna; 
}

/*Przypisanie danych wysłanych przez skrypt.js do zmiennej*/
$wartosc_z_listy_post=$_POST['klucz_ajax'];

/*Przypisanie wyniku funkcji filtrowanie do zmiennej*/
$wartosc_z_listy_post_filtr=filtrowanie($wartosc_z_listy_post);

/*Zapytanie wprowadzające do kolumny nazwa_kraju, w tabeli kraje, 
wartości ze zmiennej $wartosc_z_listy_post_filtr*/
$zapytanie_wyslij = "INSERT INTO kraje (nazwa_kraju) VALUES ('$wartosc_z_listy_post_filtr')";

/*Wykonanie zapytania wysyłającego*/
$wynik_wyslij = mysqli_query($db, $zapytanie_wyslij);
?>

 

Kod.pobierz.php

<?php

/*Nagłówek pliku informujacy o tym, że dane będą przekazywane w formacie JSON (JavaScript Object Notation) 
- jest to format transferu danych, w praktyce wyglądać będzie on finalnie w następujacy sposób: 
[["66","Austria"],["65","Polska"],["64","Czechy"]]
*/
header('Content-type: application/json');

/*Załączenie pliku odpowiadającego za połączenie z bazą danych.*/
require_once('baza.php');

/*Zapytanie typu SELECT - należy je czytać w następujacy sposób: 
pobierz z tabeli o nazwie kraje kolumny: id i nazwa kraju*/
$zapytanie_pobierz = "SELECT id, nazwa_kraju FROM kraje";
/*Wykonanie zapytania SELECT*/
$wynik_pobierz = mysqli_query($db, $zapytanie_pobierz);
/*Przygotowanie tablicy, która będzie przechowywać dane z bazy*/
$pobrane_dane = array();

/*Pętla typu "while" oparta o funkcję mysqli_fetch_row, 
wykonująca się na wyniku zapytania w celu zorganizowania pobranych danych w tabelę */
while ($wiersz = mysqli_fetch_row($wynik_pobierz)) 
{
  $pobrane_dane[] = $wiersz;
}

/*Wywołanie tabeli danych jako danych w formacie JSON. 
W istocie działania podjęte w tym pliku tworzą pakiet danych JSON, 
który będzie możliwy do zinterpretowania w pliku skrypt.js*/
echo json_encode($pobrane_dane);

?>

 

Kod.usun.php

<?php

/*Załączenie pliku odpowiadającego za połączenie z bazą danych.*/
require_once('baza.php');

/*Zapytanie usuwające rekordy z bazy wówczas, gdy od ich utworzenia upłynęło 5 minut. 
W tym wypadku czas utworzenia rekordów porównywany jest z aktualnym czasem, 
tj. z momentem wykonania zapytania*/
$zapytanie_delete = "DELETE FROM kraje WHERE czas < (NOW() - INTERVAL 5 MINUTE)";

/*Wykonanie zapytania usuwającego dane*/
$wynik = mysqli_query($db, $zapytanie_delete);

?>

Teraz przechodzimy do części zasadniczej skryptu, który za pomocą poleceń jQuery i fragmentów kodu zwykłego Javascript sprawi, że tworzony program będzie mógł działać bez konieczności ponownego ładowania strony w momencie wysyłania, pobierania i usuwania danych.

 

Kod.skrypt.js

/*Ustawienie wykonania działań wówczas, gdy strona jest całkowicie wczytana */
$(document).ready(function(){
	
	/*WYSYŁANIE DANYCH DO BAZY*/
	$('#wyslij').click(function() { /*Zdefiniowanie zdarzenia inicjującego 
	- kliknięcie przycisku wyślij*/
	
		/*Funkcja pobierająca wartość opcji z listy, w tym przypadku nazwa kraju, 
		która następnie zapisywana jest do zmiennej*/
		var wartosc_z_listy = $('#lista').val();
		
		$.ajax({
			type:"POST", /*Informacja o tym, że dane będą wysyłane*/
			url:"wyslij.php", /*Informacja, o tym jaki plik będzie przy tym wykorzystywany*/
			data: {klucz_ajax:wartosc_z_listy}, /*Zdefiniowanie jakie dane będą wysyłane na zasadzie 
			pary klucz-wartość np: wartosc_z_listy_ajax=Polska*/
				
				/*Działania wykonywane w przypadku sukcesu*/
				success:function() {

					/*Zdefiniowanie tzw. alertu (prostej informacji) w sytacji sukcesu wysyłania. 
					Za pomocą alertów możemy diagnozować poprawne działania funkcji. 
					Jest to bardzo przydatne w sytacji problemów z dziłaniem programu.*/
					alert("Wysłano do bazy danych"); 
					
					/*Dezaktywacja na określony czas przycisku wysyłającego - ten krok można pomninąć*/
					$("#wyslij").attr("disabled", true);
					setTimeout(function(){
						$("#wyslij").attr("disabled", false); 
					}, 10000);  
			
				},

				/*Działania wykonywane w przypadku błędu*/
				error: function(blad) {
					alert( "Wystąpił błąd");
					console.log(blad); /*Funkcja wyświetlająca informacje 
					o ewentualnym błędzie w konsoli przeglądarki*/
				}
		});

	});

	/*POBRANIE DANYCH Z BAZY*/
	$('#pobierz').click(function() { /*Zdefiniowanie zdarzenia inicjującego 
	- kliknięcie przycisku pobierz*/
	
		$.ajax({
			type:"GET", /*Informacja o tym, że dane będą pobierane*/
			url:"pobierz.php", /*Informacja, o tym jaki plik będzie przy tym wykorzystywany*/
			contentType:"application/json; charset=utf-8", /*Informacja o formacie transferu danych*/
			dataType:'json', /*Informacja o formacie transferu danych*/
			
				/*Działania wykonywane w przypadku sukcesu*/
				success: function(json) { /*Funkcja zawiera parametr*/
					
					/*Pętla typu for...in języka Javascript na danych w formacie JSON*/
					for (var klucz in json)
						{
							var wiersz = json[klucz];  /*Kolejne przebiegi pętli wstawiają nowy klucz*/      
							var id = wiersz[0];
							var nazwakraju = wiersz[1];
							
							/*Ustalenie sposobu wyświetlania pobranych danych w bloku div*/
						    $("id: "+id+" nazwa: "+nazwakraju+"")
							.appendTo('#wykaz')
							.append("
") } /*Dezaktywacja na określony czas przycisku wysyłającego - ten krok można pomninąć*/ $("#pobierz").attr("disabled", true); setTimeout(function(){ $("#pobierz").attr("disabled", false); }, 10000); }, /*Działania wykonywane w przypadku błędu*/ error: function(blad) { alert( "Wystąpił błąd"); console.log(blad); /*Funkcja wyświetlająca informacje o ewentualnym błędzie w konsoli przeglądarki*/ } }); }); /*USUWANIE DANYCH Z BAZY*/ $('#wyslij, #pobierz').click(function() { /*Zdefiniowanie zdarzenia inicjującego - kliknięcie przycisku pobierz lub wyślij*/ $.ajax({ type:"POST", /*Informacja o tym, że dane będą wysyłane*/ url:"usun.php", /*Informacja, o tym jaki plik będzie przy tym wykorzystywany*/ /*Działania wykonywane w przypadku sukcesu*/ success : function() { /*Tu można przykładowo wstawić: alert( "Usuwam"), aby uzyskać potwierdzenie;*/ }, /*Działania wykonywane w przypadku błędu*/ error: function(blad) { alert( "Wystąpił błąd"); console.log(blad); /*Funkcja wyświetlająca informacje o ewentualnym błędzie w konsoli przeglądarki*/ } }); }); }); /*Klamra zamykająca $(document).ready(function(){*/

 

Odsyłacz do działającego programu