Il documento discute come creare applicazioni gestionali in ambiente Android utilizzando HTML, PHP, AJAX e JSON, focalizzandosi sulla necessità di ripensare le interfacce utente per dispositivi mobili. Si sottolinea che un sito web progettato per PC deve essere adattato per smartphone, insufficienti per schermi più piccoli. Inoltre, si introduce l'utilizzo della variabile globale $_SERVER di PHP per riconoscere il tipo di dispositivo e gestire il contenuto di conseguenza.

1. Stefano Floris,
Versione gennaio 2016
Realizzare programmi gestionali in ambiente
Android con HTML e PHP, Ajax, Json
Pubblicato su
www.troppocurioso.altervista.org
La navigazione in internet da
parte degli utenti avviene, per
semplificare, utilizzando tre
categorie di dispositivi:
computer, tablet e smartphone.
Le dimensioni dello schermo e la
presenza del touchscreen
comportano una notevole
differenza d'uso.
PHP, riconoscere i dispositivi mobili
Smartphone e Tablet

2. Per vedere una copia del testo della licenza visita il sito
http://www.creativecommons.it/Licenze
Stefano Floris, 2015
www.troppocurioso.altervista.org
Questa opera è sotto licenza creativa
(di tipo copyleft)
Attribuzione-Non commerciale-
Condividi allo stesso modo Generico.

3. Le applicazioni realizzate con HTML e
PHP viste fin qui erano pensate per
girare su pc, dotato di un monitormonitor.
La progettazione della loro
interfaccia era come illustrato nella
pagina seguente.
PHP, per dispositivi mobili
Smartphone e Tablet

4. dd
E' la “vecchia” gestione che abbiamo
studiato nel capitolo 4: una pagina html che
chiama una pagina php che interroga il db,
prende il recordset e lo visualizza.
PHP, per dispositivi mobili
Smartphone e Tablet

5. Ma un utente che usa un
dispositivo mobile ha uno schermo
piu' piccolo.E allora, il sito web
progettato per essere visto e usato
su un monitor di un pc va bene
anche per un dispositivo mobile?
La risposta è no!
PHP, per dispositivi mobili
Smartphone e Tablet

6. Un sito WEB
realizzato per essere
fruito da un pc deve
essere
TOTALMENTE
ripensato se deve
poter essere visitato
anche da uno
smartphone.
PHP, per dispositivi mobili
Smartphone e Tablet
Gli attuali strumenti
per realizzare
applicazioni web
multi-piattaforma
consentono di
progettare una unico
programma che si
adatta al dispositivo
dal quale viene
utitilizzato.

7. Ecco cosa cambia. La
prima pagina, quella html
conterrà anche il codice js
per gestire il risultato.
Sarà la CPU del client a
preoccuparsi di
visualizzare i dati.
Come vedete la seconda pagina è quasi
vuota. Il codice Php sarà ridotto: svolgerà
solo l'interrogazione al db ma non gestirà
piu' la parte di visualizzazione dei risultati.
La gestione dell'interfaccia non è piu'
appannaggio del php ma del javascript sul
client.
Il server lavorerà solo
sull'interrogazione al db.
Manderà il risultato al
client.
PHP, Ajax-Json e MYSQL

8. dd
E' la “vecchia” gestione che abbiamo
studiato nel capitolo 4: una pagina html che
chiama una pagina php che interroga il db,
prende il recordset e lo visualizza.
PHP, per dispositivi mobili
Smartphone e Tablet

9. Ci sono casi però in cui
non è possibile realizzare
una unica applicazione
che (grazie al css, al
javascript e all'ajax) si
adatta al dispositivo e
cambia il suo aspetto (e le
sue funzioni).
Lo so. Qualche programmatore purista
storgerà il naso rispetto a quello che sto per
dirvi. Ma penso sia giusto affrontare il caso
in cui si decida di scrivere pagine diverse
dell'applicazione: alcune dedicate alla
navigazione da pc altre da dispositivo
mobile.
Quando si sceglie questa strada per un
progetto informatico si disegnano pagine
diverse per le medesime funzioni. Nel
progetto potrebbero esserci alcuni doppioni:
pagine con la stessa funzione ma disegnate
in maniera diversa. Mi spiego con un
esempio.
PHP, per dispositivi mobili
Smartphone e Tablet

10. Qui a fianco un
esempio di pagina
web dove si
richiedono diverse
informazioni.
Potete osservare
svariati campi di
input.
PHP, per dispositivi mobili
Smartphone e Tablet

11. Se la pagina è
visitata tramite
uno smartphone,
non sarà visibile
interamente.
PHP, per dispositivi mobili
Smartphone e Tablet

12. L'utente dovrà
scorrere con il dito
la maschera per
cercare i campi
dove inserire i
dati.
PHP, per dispositivi mobili
Smartphone e Tablet

13. Non è necessariamente
negativo non vedere tutti
i dati nella stessa
schermata.
E' UNA SCELTA.
E' il progettista che deve
decidere quale aspetto
devono avere le
maschere di input in
ciascun dispositivo.
PHP, per dispositivi mobili
Smartphone e Tablet

14. In questa lezione
impareremo a creare
pagine web dello stesso
applicativo diversificate
per ciascun tipo di
dispositivo.
PHP, per dispositivi mobili
Smartphone e Tablet
Si tratta di una
soluzione tecnica poco
diffusa, ma molto utile
dal punto di vista
didattico per imparare a
gestire questo tipo di
problema.

15. Qui accanto
potete notare
che la pagina
web che
appare nello
schermo
dello
smartphone
è stata
ridisegnata.
PHP, per dispositivi mobili
Smartphone e Tablet

16. La pagina
grande è
stata
suddivisa in
piu' pagine.
PHP, per dispositivi mobili
Smartphone e Tablet

17. Se la pagina web
originale si chiamava
inserimento.php,
quelle realizzate per
lo smartphone
potrebbero essere
ins1_mob.php,
ins2_mob.php,
ins3_mob.php,
ins4_mob.php,
ins5_mob.php.
PHP, per dispositivi mobili
Smartphone e Tablet

18. La pagina
inserimento.php non
viene cancellata. Il
nostro progetto
prevederà la presenza
sia di questa pagina
che delle altre cinque.
PHP, per dispositivi mobili
Smartphone e Tablet

19. Rimane da capire
come far si che
all'utente appaia o la
prima pagina oppure
in sequenza le altre
cinque (con un input
dei dati in piu' parti)
se accede tramite
smartphone.
PHP, per dispositivi mobili
Smartphone e Tablet

20. L'utente del
dispositivo mobile,
dovrà fare piu'
passaggi per inserire
le informazioni.
PHP, per dispositivi mobili
Smartphone e Tablet

21. L'utente del
dispositivo mobile,
dovrà fare piu'
passaggi per inserire
le informazioni.
PHP, per dispositivi mobili
Smartphone e Tablet

22. Se la pagina web
originale si chiamava
inserimento.php,
quelle realizzate per
lo smartphone
potrebbero essere
ins1_mob.php,
ins2_mob.php,
ins3_mob.php,
ins4_mob.php,
ins5_mob.php.
PHP, per dispositivi mobili
Smartphone e Tablet

23. Per risolvere questo problema
useremo una variabile globale di
PHP: $_SERVER.
$_SERVER è un array, un vettore. In particolare è un
vettore associativo. Per semplificare, le posizioni
degli elementi del vettore associativo non si
raggiungono tramite un indice numerico ma tramite
il nome del dato.
PHP, per dispositivi mobili
Smartphone e Tablet

24. PHP, per dispositivi mobili
Smartphone e Tablet
Quando spiego i vettori uso
l'esempio dei grattacieli con i
piani (gli elementi) e
dell'ascensore (l'indice).

25. PHP, per dispositivi mobili
Smartphone e Tablet
Se $_SERVER fosse un
vettore normale si userebbe
così: echo $_SERVER[5]. In
questo modo avrei in output
il contenuto della posizione 5
del vettore $_SERVER
5° - Medici----->
4° - Bruno------>
3° - Vespucci-->
2° - Alighieri-->
1° - Buonarroti>

26. PHP, per dispositivi mobili
Smartphone e Tablet
Siccome $_SERVER è un
vettore associativo si usa
così: echo
$_SERVER[“SERVER_AD
DR”]. Al posto dell'indice ho
il nome del dato che
desidero mandare in output.
5° - Medici----->
4° - Bruno------>
3° - Vespucci-->
2° - Alighieri-->
1° - Buonarroti>

27. PHP, per dispositivi mobili
Smartphone e Tablet
Per i vettori associativi dico
che è come se l'ascensore
avesse, invece che i pulsanti
con i numeri, i nomi di chi
abita al piano.
5° - Medici----->
4° - Bruno------>
3° - Vespucci-->
2° - Alighieri-->
1° - Buonarroti>

28. PHP, per dispositivi mobili
Smartphone e Tablet
L'elenco dei nomi si trova, ad
esempio, nel manuale
ufficiale di PHP:
http://php.net/manual/en/rese
rved.variables.server.php.
5° - Medici----->
4° - Bruno------>
3° - Vespucci-->
2° - Alighieri-->
1° - Buonarroti>

29. PHP, per dispositivi mobili
Smartphone e Tablet
Alcune posizioni sono:
“SERVER_ADDR” che contiene
l'indirizzo IP del pc client, oppure
“HTTP_USER_AGENT” che
contiene le informazioni del
software che sta accedendo alla
pagina (Internet
Explore/Mozilla/Chrome ecc.).
5° - Medici----->
4° - Bruno------>
3° - Vespucci-->
2° - Alighieri-->
1° - Buonarroti>

30. Vediamo
quindi quali
sono i
contenuti del
vettore
$_SERVER
che servono
a noiLa posizione
$_SERVER[“SERVER_ADDR”] contiene i
dati dell'agent, cioè del client che sta
accedendo alla pagina. Ecco un esempio di
per generare un output usando $_SERVER.
PHP, per dispositivi mobili
Smartphone e Tablet

31. <HTML>
<HEAD>
<TITLE> Uso della variabile globale di sistema $_SERVER</TITLE>
</HEAD>
<BODY>
Esempio di uso di $SERVER
<?PHP
Echo "SERVER_ADDR: ". $_SERVER['SERVER_ADDR']."<br>";
Echo "HTTP_USER_AGENT: ". $_SERVER['HTTP_USER_AGENT']."<br>";
Echo "SERVER_NAME: ". $_SERVER['SERVER_NAME']."<BR>";
?>
</BODY>
</HTML>
Un semplice
programma PHP
per visualizzare
alcuni dati che il
server riceve dal
client. Se provate a
collegarvi alla
pagina usando
browser diversi o
computer diversi
avrete risposte
diverse.
PHP, per dispositivi mobili
Smartphone e Tablet

32. E' quindi la posizione
'HTTP_USER_AGENT' che a noi
interessa. Ci permette di capire da
quale dispositivo l'utente si sta
collegando. Dal sistema operativo
possiamo dedurlo.
PHP, per dispositivi mobili
Smartphone e Tablet

33. Se provate ad accedere alla pagina
per tramite di un tablet o di uno
smartphone vedrete i cambiamenti
dell'output.
PHP, per dispositivi mobili
Smartphone e Tablet

34. $user_agent=$_SERVER['HTTP_USER_AGENT'];
$host=$_SERVER['HTTP_HOST'];
// Controllo del dispositivo
//
$iphone=strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android=strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre=strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry=strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod=strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$ipad=strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
// Se una delle variabili contiene VERO
// significa che il client naviga da disp. mobile
//
// Ridireziono alla pagina
//
if (($iphone==true)||($android==true)||($palmpre==true)||
($berry==true)||($ipod==true)||($ipad==true)) {
header('Location: Controllo_dispositivo_mobile.php?browser='.
$browser.'&host='.$host);
} else {
header('Location: Controllo_dispositivo_web.php?browser='.
$browser.'&host='.$host);
}
?>
// Preso spunto dal lavoro di Alessandro Ristori
Questo invece è un
programma che,
individuato il
dispositivo dal
quale naviga il
client, ridireziona
ad una pagina
specifica.
Guardate il
funzionamento
della funzione
HEADER().
PHP, per dispositivi mobili
Smartphone e Tablet

35. Abbiamo terminato.
Il prossimo passo è la realizzazione di APP
con accesso a DB.
Seguiteci su
www.altervista.troppocuriso.org
PHP, per dispositivi mobili
Smartphone e Tablet