giovedì 29 gennaio 2009

Caricare markers da un database con MySQL e PHP (prima parte)

Una possibilità davvero interessante è quella di poter visualizzare su una Google Map dei markers le cui coordinate ed altri elementi siano caricati da un database esterno.
Questo ci consente di poter utilizzare insiemi molto grandi di coordinate lasciando sempre inalterato il codice javascript di richiamo della mappa.
In questo articolo non concluderemo il nostro lavoro, ci limiteremo a capire come costruire il nostro database, popolarlo e creare scripts Php per l'interrogazione dei dati e la realizzazione di un output XML. Ci ritroveremo dunque nella stessa situazione del precedente post: un file XML da dare "in pasto" al codice javascript affinchè i markers vengano visualizzati sulla mappa.

Questo post e il successivo fanno ampio riferimento al materiale, opportunamente semplificato e integrato nella parte divulgativa, contenuto nel bellissimo articolo (in inglese) che trovate su Google Code.

Definiamo il progetto da realizzare: una sorta di "curriculum geografico", cioè una Google Map dove vengono visualizzati tutti i luoghi dove ho studiato o lavorato, le cui informazioni sono contenute in un database.

Essendo un progetto didattico, i dati in realtà sono molto pochi. Le potenzialità invece sono infinite, poichè potremmo inserire nel database grandi quantità di dati realizzate da terze parti e, con le opportune conoscenze tecniche, filtrarli nella maniera che più ci interessa.

Di cosa abbiamo bisogno:
1) Uno spazio web con supporto MySQL e PHP
2) Alcuni cenni su come si costruisce un database relazionale
3) Piccole conoscenze di PHP e Javascript


PUNTO 1
Ci sono due possibilità: la prima è quella di registrarsi su Internet ad un servizio di spazio web gratuito con le caratteristiche cui sopra. Vi ho già citato ilbello.com hosting, ma i servizi di questo tipo sono innumerevoli. Una selezione ai altri servizi gratuiti e ad free potete trovarla in questo post.

La seconda possibilità è lavorare in locale, cioè utilizzare il proprio PC come fosse un server web. A questo scopo potete utilizzare pacchetti software come XAMPP o EasyPHP. Per la corretta installazione potete far riferimento ai link in calce all'articolo.

PUNTO 2
Ci affideremo a un database relazionale, strutturato in tabelle (a noi ne serve solo una). Il nostro spazio web, sia esso reale o virtuale, ci consentirà di creare e popolare (inserire dati) un database attraverso il linguaggio di amministrazione PhpMyAdmin.

Per quanto riguarda il servizio ilbello.com si accederà all'interfaccia PhpMyAdmin all'indirizzo http://sql.ilbello.com/, inserendo username e password fornitici al momento della registrazione. Per gli altri servizi, cambierà ovviamente l'indirizzo di accesso ma le modalità saranno identiche.




Per creare e popolare la tabella del database si posono utilizzare diversi metodi:

1) Inserendo ciascun elemento attraverso l'interfaccia di PhpMyAdmin
2) Importando in PhpMyAdmin opportuni files sql come ad esempio questo:


CREATE TABLE `markers`(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`denom` VARCHAR( 60 ) NOT NULL ,
`indirizzo` VARCHAR( 60 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`long` FLOAT( 10, 6 ) NOT NULL,
`tipomarker` VARCHAR( 30 ) NOT NULL ,
) ENGINE = MYISAM ;

Cosa dico attraverso questo set di istruzioni?

crea una tabella con 6 campi: il campo id è un indice che si autoincremente; il secondo campo, denom, ha al massimo 60 caratteri; lo stesso dicasi per il campo indirizzo; lat e long sono campi numerici, al massimo di 10 cifre di cui 6 decimali; tipomarker ha al massimo 30 caratteri; MYISAM è il motore di indicizzazione del database.


3) Importando opportuni files in formato CSV (ottenuti da terze parti o dal nostro foglio elettronico).



PUNTO 3
Attingiamo adesso ad alcuni elementi di PHP per accedere ai dati del database ed elaborarli in modo da formare un documento XML. Per motivi di sicurezza si sceglie di creare due script distinti, uno con le credenziali di autenticazione e l'altro che riceve le credenziali, accede al database e forma il documento XML. Ecco i listati dei due file, credenziali.php e creaxml.php. Notate che cliccando su quest'ultimo link non viene visualizzato lo script bensì il suo risultato, cioè il file XML con i dati che visualizzeremo sulla mappa.


<?
//Ovviamente $username, $password e $database conterranno i valori comunicati dal
vostro fornitore del servizio di hosting o scelti a piacere se utilizzate un server
web in locale
$host="localhost";
$username="vostrousername";
$password="vostrapassword";
$database="vostrodatabase";
?>



<?php

// richiede i dati di accesso contenuti in credenziali.php
require("credenziali.php");

//Sostituisce alcuni caratteri speciali con il relativo codice entita'
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}

// Si connette al database
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die('Non connesso : ' . mysql_error());
}

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('database non selezionato : ' . mysql_error());
}

// Seleziona tutte le righe della tabella con i markers
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Query invalida: ' . mysql_error());
}

header("Content-type: text/xml");

// Genera il nodo principale del file XML
echo '<markers>';

// Ciclo che crea il resto del documento XML sulla base dei dati della tabella
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'denom="' . parseToXML($row['denom']) . '" ';
echo 'indirizzo="' . parseToXML($row['indirizzo']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'long="' . $row['long'] . '" ';
echo 'tipomarker="' . $row['tipomarker'] . '" ';
echo '/>';
}

// Genera il tag di chiusura del nodo principale
echo '</markers>';

?>

Per adesso abbiamo finito, nel prossimo articolo vedremo come integrare il tutto all'interno nella Google Map, utilizzando istruzioni di cui ormai conosciamo il significato.


Linkografia per chi desidera installare un server in locale

Per installare XAMPP
@ Corso Joomla su Second Life (consultare le slide dalla 6 alla 22)
@ Slideshare (consultare le slide dalla 6 alla 22)
@ XAMPP step by step
@ Installare XAMPP su Windows

Per installare Easy PHP
@ Guida PHP su Windows
@ Installare e configurare Php e MySQL

14 commenti:

  1. complimenti per il lavoro e per gli interessanti argomenti trattati

    RispondiElimina
  2. Il tuo commento mi ha fatto molto piacere, sia per i complimenti sia per la possibilità che mi hai dato di sfogliare il tuo sito. Grazie!

    RispondiElimina
  3. ciao non mi è chiaro il punto 2.3. importo il file csv con le coordinate (log/lat) delle città interessate.. ma se devo marcare una cinquantina di città, come faccio a crearmi il file csv in maniera automatica o quasi?

    grazie

    RispondiElimina
  4. Puoi dare una occhiata alla sezione della API Reference di Google Maps dedicata al Geocoding:

    http://code.google.com/intl/it/apis/maps/documentation/geocoding/

    La richiesta è in formato REST e la risposta può avvenire in formato JSON, KML, XML e anche CSV.

    Spero di esserti stato utile

    RispondiElimina
  5. sto leggendo e studiando tutto questo tutorial ed è davvero ben fatto e ben spiegato...tantissimi complimenti devi essere davvero in gamba.

    RispondiElimina
  6. Complimenti, ottima guida, ma...
    ...io ricevo questo errore:

    errore interpretazione XML:non well formed
    linea numero 1 colonna 18
    markers marker

    ---------------^

    RispondiElimina
  7. l'errore lo dà prima del (br \) che nel commento non compare!

    RispondiElimina
  8. risolto! avevo commentato la funzione per convertire i caratteri!

    RispondiElimina
  9. io invece vorrei capire come gestire l'overlap,
    ad esempio, nel mio db ho una serie di coordinate, molte di queste coincidono tra di essi, ottengo così una sovrapposizione dei marker.
    Idee su come risolvere?

    RispondiElimina
  10. domanda forse stupida eda profano. Ma in che posizione vanno salvati i tue file php all'interno delle cartelle del sito? grazie

    RispondiElimina
  11. Come vedi dagli esempi i file php sono tutti nella root del mio spazio web. E' naturalmente possibile mettere i file in altre posizioni modificando opportunamente i listati

    RispondiElimina
  12. ciao trovo questo blog utile a titolo informativo
    erano mesi che cercavo un modo per integrare uno script lato amministratore di questo tipo:
    -ho degli iscritti ad un circolo con un'anagrafica caricabile via web o via csv
    -voglio vederli distribuiti su maps
    mi pare che tu risponda a questo secondo punto ma il primo ? come posso fare una maschera di inserimento dati accessibile solo all'amministratore del sito?
    grazie ciao

    RispondiElimina
  13. salve, ho un problema di connessione
    il mio dbase è su server remoto

    al punto


    POI LO RITROVO QUI

    // Si connette al database
    $connection=mysql_connect (localhost (DEVO SOSTITUIRE ANCHE QUI?), $username, $password);
    if (!$connection) {
    die('Non connesso : ' . mysql_error());
    }

    HO PROVATO, NON GENERA l'XML in nessuno dei due casi, risultato: pagina bianca

    la connessione al db è corretta e verificata
    ogni aiuto è benedetto, ho una scadenza a brevissimo...grazie

    RispondiElimina
  14. scusa non ha postato il codice dopo
    AL PUNTO

    $host="localhost"; QUESTO LO HAI INSERITO TE, NON C'E' NEL FILE ORIGINALE
    $username="vostrousername";
    $password="vostrapassword";
    $database="vostrodatabase";

    RispondiElimina