Luca e Andrea » js

Inseriamo una mappa con le API 3

Luca — Wed, 21 Jul 2010 21:33:38 +0000

Con l’introduzione della versione 3 delle API di Google map non è più necessario generare una chiave univoca per ogni sito dove dobbiamo inserire le nostre mappe e questo semplifica molto le cose quando procediamo alla pubblicazione di un sito dall’area di sviluppo in produzione perché non ci dobbiamo preoccupare di generare una nuova chiave.

Ma ora andiamo più nello specifico e vediamo come iniziare da markup della nostra pagina dove inseriamo un div con ID map.




   Contatti - Sport 62

Nel nostro documento abbiamo definito un di contenitore largo 900px e il div map che conterrà la nostra mappa di google. Nell’head del documento c’è la chiamata alle api di google dove gli passiamo come parametro sensor=true e la localizzazione della lingua tramite il parametro language=it così la nostra mappa “parlerà italiano”.

Ora andiamo a scrivere la nostra funzione che ci permetterà di visualizzare la mappa.

In questa funzione per prima cosa andiamo ad inizializzare l’oggetto google.maps.Map nel nostro div, poi gli impostiamo il centro della mappa con le coordinate, in questo esempio è la stazione ferroviaria di Treviso ed impostiamo il livello di zoom a 15, l’ultima impostazione della mappa è la tipologia che corrisponde a Mappa quando utilizziamo le Google Maps.
Fatto questo creiamo un nuovo marker posizionandolo nel nostro centro della mappa ed è molto semplice perché nell’inizializzazione gli passiamo un oggetto con la mappa da utilizzare e la posizione.
Impostato il marker creiamo il fumetto attracerso l’oggetto InfoWindows() dove gli facciamo scrivere del testo di prova e lo associamo al marker creato prima.
L’ultima azione che facciamo è associare al click sul marker l’apertura del fumetto.

Ora è sufficiente richiamare la funzione initialize() all’apertura della pagina ed abbiamo la nostra mappa.

$(document).ready(function(){
    initialize();
})

Per tutte le opzioni che si possono utilizzare vi rimando alla documentazione ufficiale di google Map.

L’esempio di questo post lo potete trovare qui.

Come sempre aspetto commenti / critiche / approvazioni

Recuperare la password con ajax

Luca — Wed, 05 May 2010 22:00:07 +0000

Oggi vi spiego come poter creare una piccola richiesta di password smarrita utilizzando Jquery e una chiamata ajax.

ipotizziamo di avere una tabella degli utenti così strutturata che memorizza le password in chiaro (solo a scopo didattico e per questo articolo).

CREATE TABLE user(
    id bigint AUTO_INCREMENT,
    username varchar(50) NOT NULL,
    password varchar(30) NOT NULL,
    nome varchar(80) NOT NULL,
    cognome varchar(80) NOT NULL,
    ins_date datetime,
    upd_date datetime,
    lastlogin datetime,
    status tinyint(1) DEFAULT 1
    PRIMARY KEY (`id`),
    KEY `username` (`username`,`password`)
) ENGINE=MyISAM

Ora Creaiamo la nostra pagina base come mostrato qui sotto





    
    






Ora inziamo ad inserire Jquery nell’head della pagina


Fatto questo possiamo iniziare a creare la base della form per il recupero della password fornendo l’indirizzo email dell’utente registrato.

Se hai perso la password digita nella casella di testo la tua email e clicca su "RECUPERA PASSWORD", ti verrà inviata la password.

    email 

    

    

    



L’html, come possiamo vedere è molto semplice abbiamo un input text dove inseriremo la nostra email, il button che  richiamerà la funzione recupera() per fare la chiamata ajax, infine c’è uno span per mostrare gli errori. All’interno dell’head del nostro documento dove ho messo il commento //qui andremo ad inserire la nostra funzione scriviamo la funzione riportata qui sotto.
La funzione è molto banale ma molto efficace perché è il cuore della  chiamata ajax all’inizio fa un primo controllo sulla presenza di  qualche valore nell’input dove inseriamo l’email e poi possa in POST  l’email alla nostra pagina PHP recupera_password.php, l’ultimo parametro  passato a $.post() è il dataType che nel nostro caso JSON in  modo da poter utilizzare un array come risposta e non una solo valore.
function recupera(){
    var email = $('#email').val();
    if(email != ''){
        $('#errore').html('');
        $.post(
        '/recupera_password.php',
        'email='+email,
        function(m){
            $('#errore').html(m.messaggio);
            $('#email').val('');
        },
        'json'
        );
     } else
        $('#errore').html("Non è stata inserita l'email");
}

getOneItem($sql);
    if(is_array($data)){
        $mail->SetFrom("email@email.it","Mittente");
        $nome = $data["nome"] . " " . $data["cognome"];
        $mail->AddAddress($data["email"], $nome );
        $mail->Subject = "Recupero password";
        $messaggio = str_replace(
            array("[NOME]","[USERNAME]","[PASSWORD]"),
            array($data["nome"],$data["username"],$data["password"]),
            $L_testo_mail_rec
        );

        $mail->msgHtml($messaggio);
        $mail->AltBody = strip_tags($messaggio);
        $mail->Sender = "email@email.it";
        $mail->WordWrap = 78;
        if(!$mail->Send()) {
            $str_errore = "Non è stato possibile recuperare la password ed inviare una mail, riporivare più tardi";
        } else{
            $str_errore = "Password recuperata correttamente. A breve riceverai un email";
        }
    } else     //non eisite l'username
        $str_errore = "Utente inesistente";
}

print json_encode(
    array(
        "errore"    => $errore,
        "messaggio"    => $str_errore
     )
);
?>

Il file php include un file con la configurazione del db e una classe per poter fare le query al database e la classe phpMailer per inviare la mail con la password alla persona che ne ha fatto richiesta.
Il php, che riceve in post l’email controlla l’esistenza del campo altrimenti restituisce un errore e successivamente fa una query sulla tabella user per cercare le credenziali dell’utente associato a quell’email, una volta trovato il record invia una mail.
Alcune considerazioni sul mio articolo

Sicuramente non è la miglior cosa utilizzare le passowrd in chiaro perché se siamo vittima di un attacco hacker avremmo perso tutti gli accessi al sito web.
La password andrebbe resettata, una volta che viene trovato il record nel DB, creandone una casuale di n caratteri ricordando all’utente di cambiarla il prima possibile perché è stta generata automaticamente dal sistema.
Andrebbe aggiornata la data di modifica del record relativo all’utente e incrementato il numero di richieste di password e il nostro sito web prevede un massimo di tentativi di accesso al sistema allora dovremmo azzerare quel contatore

Per oggi è tutto vi aspetto alla prossima

firebug in internet explorer

Luca — Fri, 22 Jan 2010 10:57:13 +0000

cercando un aggiornamento di firebug ho trovato questa pagina:

http://getfirebug.com/lite.html

che spiega come integrare firebug lite in IE e potrebbe essere interessante per avere un po’ più di debug in IE che è uno dei sponosi problemi di quel browser (almeno dal mio punto di vista).

per inserire firebug lite è sufficiente aggiungere questa riga di codice nell’head della vostra pagina web.

Ho potuto fare delle prove veloci e mi sembra molto utile.

Jquery 1.4

Luca — Fri, 15 Jan 2010 10:26:55 +0000

Come recita il banner nell’home page di jquery Nuovo anno, nuova versione. Infatti, ieri è uscrita la nuova versione 1.4 della libreria javascript. Per festeggiare l’evento hano creatoun nuovo sito dove possiamo trovare tutte le informazioni sul rilascio di jquery dal’ultima RC.

Sicuramente interessante è l’annucio del rilascio della nuove versione o le domande e risposte.

Tutte le novità e modifiche sono presenti qui

Riporto un elenco delle nuove funzionalità:

Ci sono delle novità anche per quanto riguarda la parte AJAX, cito solo i titoli dei paragrafic eh riguardano la sezione

Nested param serialization (jQuery.param() Documentation, Commit 1, Commit 2)

JSON and script types auto-detected by content-type (jQuery.ajax Documentation, Commit 1, Commit 2)

Etag support has been added (jQuery.ajax() Documentation, Commit)

Strict JSON parsing, using native JSON.parse (jQuery.ajax() Documentation, Commit 1, Commit 2, Commit 3)

Serialize HTML5 elements (jQuery.param() Documentation, Commit)

Context for Ajax Request (jQuery.ajax() Documentation, Commit)

Success callback receives XHR object as third argument (jQuery.ajax() Documentation, Commit)

Explicitly set a content-type (jQuery.ajax() Documentation, Commit)

Explicitly specify a JSONP callback name (jQuery.ajax Documentation, Commit)

Avoid pre-flighting cross-domain XHR (Commit)

jQuery.ajax() is now using onreadystatechange instead of a timer (Commit)

Ce n’è da imparare!