Php: riconoscere il dispositivo del client
-
Upload
high-secondary-school -
Category
Education
-
view
301 -
download
3
Transcript of Php: riconoscere il dispositivo del client
![Page 1: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/1.jpg)
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
![Page 2: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/2.jpg)
Per vedere una copia del testo della licenza visita il sito http://www.creativecommons.it/Licenze
Stefano Floris, 2015www.troppocurioso.altervista.org
Questa opera è sotto licenza creativa (di tipo copyleft)
Attribuzione-Non commerciale-Condividi allo stesso modo Generico.
![Page 3: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/3.jpg)
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
![Page 4: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/4.jpg)
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
![Page 5: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/5.jpg)
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
![Page 6: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/6.jpg)
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.
![Page 7: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/7.jpg)
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
![Page 8: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/8.jpg)
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
![Page 9: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/9.jpg)
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
![Page 10: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/10.jpg)
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
![Page 11: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/11.jpg)
Se la pagina è visitata tramite
uno smartphone, non sarà visibile
interamente.
PHP, per dispositivi mobili Smartphone e Tablet
![Page 12: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/12.jpg)
L'utente dovrà scorrere con il dito
la maschera per cercare i campi dove inserire i
dati.
PHP, per dispositivi mobili Smartphone e Tablet
![Page 13: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/13.jpg)
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
![Page 14: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/14.jpg)
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.
![Page 15: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/15.jpg)
Qui accanto potete notare che la pagina
web che appare nello
schermo dello
smartphone è stata
ridisegnata.
PHP, per dispositivi mobili Smartphone e Tablet
![Page 16: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/16.jpg)
La pagina grande è
stata suddivisa in piu' pagine.
PHP, per dispositivi mobili Smartphone e Tablet
![Page 17: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/17.jpg)
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
![Page 18: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/18.jpg)
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
![Page 19: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/19.jpg)
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
![Page 20: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/20.jpg)
L'utente del dispositivo mobile,
dovrà fare piu' passaggi per inserire
le informazioni.
PHP, per dispositivi mobili Smartphone e Tablet
![Page 21: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/21.jpg)
L'utente del dispositivo mobile,
dovrà fare piu' passaggi per inserire
le informazioni.
PHP, per dispositivi mobili Smartphone e Tablet
![Page 22: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/22.jpg)
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
![Page 23: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/23.jpg)
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
![Page 24: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/24.jpg)
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).
![Page 25: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/25.jpg)
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>
![Page 26: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/26.jpg)
PHP, per dispositivi mobili Smartphone e Tablet
Siccome $_SERVER è un vettore associativo si usa
così: echo $_SERVER[“SERVER_ADDR”]. Al posto dell'indice ho
il nome del dato che desidero mandare in output.
5° - Medici----->4° - Bruno------>3° - Vespucci-->2° - Alighieri-->1° - Buonarroti>
![Page 27: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/27.jpg)
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>
![Page 28: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/28.jpg)
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>
![Page 29: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/29.jpg)
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>
![Page 30: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/30.jpg)
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
![Page 31: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/31.jpg)
<HTML><HEAD><TITLE> Uso della variabile globale di sistema $_SERVER</TITLE></HEAD>
<BODY>
Esempio di uso di $SERVER
<?PHPEcho "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
![Page 32: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/32.jpg)
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
![Page 33: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/33.jpg)
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
![Page 34: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/34.jpg)
$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
![Page 35: Php: riconoscere il dispositivo del client](https://reader033.fdocuments.net/reader033/viewer/2022052302/58f320711a28ab64418b45a3/html5/thumbnails/35.jpg)
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