Web Engineering & Design

Librerie Javascript - JQuery

2012-01-15T17:48:00.001+01:00

Probabilmente molti di voi avranno sentito parlare di "librerie" ma non hanno mai saputo di cosa esattamente si stesse parlando.

Che cos'è una libreria?
Vi rispondo con un esempio:
Fate finta che dobbiate animare un div per spostarlo da sx a dx con un movimento fluido (non netto). Una opzione è quella di dedicare ore e ore per inventarsi sul momento una sequenza di istruzioni in javascript rischiando però di creare un algoritmo funzionante ma molto pesante e non funzionale. L'altra opzione è cercare su internet una libreria ideata proprio per questo. Se siete fortunati troverete una libreria (per esempio) dedicata all'animazione degli oggetti in javascript.
Non dovrete fare altro che salvare il file che vi viene presentato (es. libreriaAnima.js) sul vostro sito. Il file contiene tutte le funzioni che si occupano dello spostamento degli oggetti. Così facendo avete risparmiato ore e ore di lavoro e siete sicuri inoltre di avere un codice flessibile e ben studiato (sempre che la libreria sia di buona qualità). Molto probabilmente per spostare il vostro mitico blocco non dovrete fare altro che scrivere blocco.MiaLibAnim.sposta("destra").

Oltre al fatto che si risparmia molto tempo nella programmazione perché effettivamente si copiano degli "algoritmi" già fatti, bisogna anche sottolineare che le librerie sono famose perché molto spesso offrono delle funzionalità molto complesse, che non si traducono in qualche decina di riga di codice nativo. La libreria jquery si può dire che quasi sostituisce il linguaggio javascript nativo; infatti oltre a riproporre tutte le funzioni native, mette a disposizione una quantità enorme di funzioni aggiuntive davvero eccezionali.

Non bisogna sentirsi degli approfittatori oppure dei mezzi incapaci se si utilizzano le librerie, anzi. Utilizzare una libreria è da professionisti, intanto perché se ne conosce l'esistenza, e poi sarebbe davvero da stupidi perdere una quantità abnorme di tempo per crearsi autonomamente il codice per ogni situazione, quando ogni tanto si può fare riferimento a chi ci ha già preceduti facendo per giunta un'ottimo lavoro.

Riassumendo le caratteristiche delle librerie:

Possono essere scaricate gratuitamente da internet ed utilizzate senza nessuna licenza (il più delle volte).
Offrono funzioni davvero complesse senza dover scrivere neanche una virgola del codice nativo che ne permette il funzionamento.
Diminuzione della quantità di codice da scrivere (vedi jquery --> "Write less, Do More")

Quali sono le librerie più conosciute?

In assoluto la più conosciuta, usata e potente è jquery (link alla documentazione ufficiale). Proprio come dice il suo slogan "Write less, Do more", permette di eseguire azioni anche molto complesse scrivendo un numero davvero limitato di istruzioni, molto spesso addirittura in una sola.

Da ricordare anche MooTools (link), script.aculo (link), yahooUI (link).

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Log Visite - Tracciare i movimenti degli utenti

2012-01-15T16:33:00.002+01:00

Da poco ho iniziato ad utilizzare un sistema di log che mi ha davvero soddisfatto.

Che cos'è?
In pratica è un insieme di funzioni php (o qualsiasi altro linguaggio server-side) che interagendo con il database tengono monitorati tutti gli utenti, registrando qualsiasi loro azione nel sito che mi interessi.

In pratica ho inserito in ogni pagina potenzialmente accessibile la chiamata ad una funzione php che memorizza nel database la visita. Nel mio caso memorizzo indirizzo IP, nome utente (se ha fatto il login), data e ora, pagina di provenienza.
In questo modo si può avere una completa tracciabilità dei visitatori, che si traduce sia in controllo per garantire la sicurezza del portale che in enormi quantità di dati utilizzabili a fini statistici.

Nel mio sito ho creato anche un sistema di log specifico per il login, in modo da tenere tracciati tutti gli accessi riusciti o meno per avere un maggiore controllo sui tentati furti di account.

Google pare che faccia un uso massiccio di log, registrando qualsiasi nostra azione. Proprio grazie a questo riesce a presentarci sempre degli annunci straordinariamente mirati.

Ritengo abbastanza inutile postare dei listati per far vedere come creare un sistema del genere perchè è abbastanza scontato. Si tratta di creare una tantum una tabella nel database e in ogni pagina inserire un: <?php funzioneLog(); ?> che prenda i dati necessari e con un INSERT li inserisca nel database. Nulla di più facile.

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Struttura base per login

2012-01-13T15:35:00.001+01:00

Oggi voglio spiegarvi come costruire un sistema (base) di login molto efficiente e sicuro. In breve tempo pubblicherò post più dettagliati ed approfonditi su idee e tecniche per aumentare la sicurezza del nostro login.

Cercando un po' in giro, il primo modo per impostare un login che trovai consisteva nel creare un file login.php, all'interno del quale erano contenuti username e password degli utenti registrati sotto forma di array. Le credenziali dell'utente che eseguiva il login venivano confrontate con l'array stesso e veniva riportato l'esito del confronto. Paradossalmente la sicurezza di questo metodo è abbastanza alta, perché per aggirarlo bisognerebbe entrare in possesso del sorgente php (leggendo così l'array), il che però implica di dover accedere illegalmente al server dove è hostato il sito, cosa non molto semplice.
Comunque sia è una soluzione ovviamente da escludere, sotto tutti i punti di vista. Il metodo che vi propongo io è il seguente.

Creare una tabella nel database inserendo quanti parametri si vuole (nel mio sito ho: id,nome,password,email,tipo,premium,domanda,risposta ecc...)
Creare un file login.php (o se si ha un file del tipo utility.php che contiene tutte le funzioni php del sito, inserire gli algoritmi al suo interno) che semplicemente riceve i dati di login (per esempio username,password), esegue i controlli fondamentali (mancato inserimento dei dati + "escape" generale usando htmlspecialchars ) ed infine li confronta con gli utenti registrati. In caso di riscontro setta i valori di sessione che si desidera ed esegue il redirect alla home, oppure riporta gli errori riportati.

E' d'obbligo utilizzare i prepared statement (link) per difendersi dalle sql injection (link).

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Prepared statement

2012-01-13T15:35:00.000+01:00

Per evitare il problema delle sql injections (link), ci vengono in aiuto i prepared statement.
Che cosa sono? I prepared statement sono un nuovo metodo di far eseguire una query sql tramite php. Tecnicamente varia leggermente solo il modo in cui vengono dichiarate le query, un piccolo cambiamento che provoca un aumento esponenziale della sicurezza.
Originariamente si componeva la query, inserendo il testo base (comandi sql) che veniva poi completato con i dati degli utenti che arrivavano via get/post.
Esempio (mysql).

$result = mysql_query ("UPDATE members SET contenuto = '".$testo."' WHERE username = '".$username."'");

In questo modo prima venivano integrati nella query i dati inviati e solo dopo la query veniva interpretata. Il risultato era cioè una stringa di testo normalissima che veniva letta da una funzione apposta (mysql__query) che la faceva eseguire come query dal database (vedi esempio sopra).
In questo modo chiunque con un po' di conoscenze in materia poteva in qualsiasi momento inserire delle istruzioni sql al posto (per esempio) dell'username al momento del login, questo sarebbe andato ad integrarsi al resto della query scritta dal programmatore modificandone completamente gli effetti.

I prepared statement sono stati concepiti in modo che il programmatore possa stabilire in partenza (in fase di programmazione appunto) la query da eseguire sostituendo ai valori che dovrà inserirà l'utente con dei "?". La query viene così interpretata e costituita. Solo dopo, quando viene eseguita, andrà a prendere i dati che occorrono come indicato dal programmatore.
In questo modo la query non potrà essere alterata, perché i dati vengono interpretati come puro testo da inserire nel database, non a caso vengono richiesti dopo " l'interpretazione" della query.

Ecco alcuni listati per farvi capire per bene il funzionamento. Segue commento conclusivo.
Attenzione, nei seguenti listati è utilizzata l'estensione mysqli.

INSERT

$db = new mysqli('[hostname]', '[username]', '[password]', '[database]'); #creo istanza
$stmt = $db->stmt_init(); #si collega al database

$stmt->prepare("INSERT INTO utenti (username,password) VALUES (?, ?)"); #prepara la query
$stmt->bind_param('ss', $username, $password); #inserisce i parametri al posto dei "?"

#dichiaro le variabili indicate sopra come dati

$username=$_POST['username'];
$password=$_POST['password'];

$rc = $stmt->execute(); #eseguo la query. memorizzo in $rc l'esito

if ( false===$rc ) { echo "Errore di sistema: ".$stmt->error;} #la query ha generato un errore

$stmt->close(); #chiude la connessione al database

SELECT

$db = new mysqli('localhost', 'projectFede', '', 'my_projectfede'); #creo istanza
$stmt = $db->stmt_init(); #si collega al database
$stmt->prepare("SELECT id FROM utenti WHERE email = ?"); #prepara la query
$stmt->bind_param('s', $email); #inserisco i dati richiesti
$email=$_POST['email']; #dichiaro le variabili che servono
$stmt->execute(); #eseguo la query
$stmt->bind_result($id); #organizzo i dati sotto forma di array

#metodo consigliato per ciclare tutti i risultati

while($stmt->fetch()) {
  echo "Id: ".id.". <br/>";
}

$stmt->close(); #chiude la connessione al database

Come avrete quindi notato, quando nella query deve intervenire un dato esterno si mette un punto interrogativo "?". Successivamente, si indica attraverso la funzione bind_param, a cosa fanno riferimento quei punti interrogativi. La dichiarazione viene fatta seguendo l'ordine fisico dei punti interrogativi. Prima di tutto bisogna dichiarare se il dato è di tipo numero o stringa (i = integer, s=string); successivamente si elencano (separate da virgola), le variabili dove trovare i dati.

Esempio:

$stmt->prepare("SELECT username FROM utenti WHERE id = ? AND username = ?");
$stmt->bind_param('is', $identificatore, $email);

Come mostra l'esempio, abbiamo inserito "i" nel primo caso perchè l'id è una dato di tipo integer, successivamente "s" perchè l'username è una stringa di testo. Al seguito poi abbiamo segnalato le variabili a cui fare riferimento (l'id verrà presto dalla variabile $identificatore e l'email dalla variabile $email).

Per concludere quindi, come si è potuto vedere la sintassi rimane praticamente invariata ma la sicurezza aumenta in maniera esponenziale! D'obbligo quindi imparare le novità della sintassi per aumentare il livello di sicurezza dei propri servizi.

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Segnalazione automatica errori Sql

2012-01-12T21:22:00.001+01:00

Come dicevo nel post sulle sql injections (link), personalmente utilizzo un sistema di segnalazione automatica degli errori sql.

Che cos'è?
In pratica è un sistema automatico per tenere traccia di tutti gli errori sql verificatosi durante la navigazione da parte degli utenti nel nostro sito senza però mostrarli pubblicamente.

Come funziona?

Niente di più facile. Semplicemente ogni volta che faccio eseguire una query tramite php, attribuisco un nome preciso alla situazione (es. $situazione = inserimento_dati_registrazione) e, dopo l'esecuzione della query, verifico che sia andata a buon fine o meno. In caso di fallimento catturo l'errore generato e, insieme ad altri dati che mi sono utili (es. nome della situazione, nome dell'utente, orario e indirizzo IP), memorizzo il tutto in una tabella dedicata del database. Nel frattempo mi viene inviata un'email che segnala l'errore avvenuto, riportandomi tutti i dati che mi servono.

Questo meccanismo può essere ovviamente arricchito e gestito come si vuole, per esempio si può evitare di farsi mandare una email decidendo di consultare periodicamente il database (sconsigliato), oppure se si ha realizzato un pannello di amministrazione del sito si può decidere di far comparire un'avviso relativo agli errori generati.

In questo modo si ha una visione molto dettagliata degli errori generati. Questo aiuta sia per continuare ad avere un debug attivo del sito senza disturbare l'utente che per scoprire tentativi di intrusione nel database. In più, potendoli tenere archiviati quanto si vuole nel database, si possono realizzare per esempio anche delle statistiche.

Ognuno poi dia sfogo alla propria fantasia...questo è lo spunto :)

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Sql Injections

2012-01-12T21:12:00.003+01:00

Le sql injections sono un argomento importantissimo ma purtroppo non sempre conosciuto da tutti i webmaster.

Cosa sono?
Il concetto delle sql injections è molto semplice, si inviano dei dati al server studiati in modo da interagire illegalmente con il database del sito. Questo avviene senza operare una violazione propriamente detta del sistema, ma l'effetto è uguale, infatti si entra in possesso di informazioni che non sarebbero dovute "fuori-uscire" dal database. Vediamo un esempio per capire meglio.

Quando si effettua il login ad un sito (utilizzando un linguaggio server-side come php), qualsiasi persona preparata potrebbe invece di inserire come username la parola "pippo" una stringa che, una volta integrata nella query sql da eseguire, cambierà il senso dell'intera query riportando magari non uno status che attesta se l'operazione è andata a buon fine o meno, bensì l'elenco completo di tutte le voci presenti nel database. Da non dimenticare anche la devastante eventualità nella quale il male intenzionato decida di eliminare completamente tutto il contenuto del database arrecandovi un danno non banale.

Come difendersi?
Molti siti impiegano tempo e risorse per inventare dei metodi di controllo dei dati in entrata e in uscita per limitare gli effetti estremamente pericolosi e dannosi delle sql injections. Non dico che tutto ciò non debba essere fatto, infatti più è "pulito" e "sicuro" il contenuto dei nostri database e meglio è, però l'unica soluzione reale per risolvere il problema consiste nell'utilizzo dei prepared statement. Per una migliore organizzazione del blog trovare il mio articolo sui prepared statement cliccando su questo link (guida utilizzando mysqli).

Infine bisogna anche ricordarsi di non mostrare mai e per nessun motivo agli utenti gli errori generati dalle query sql perché, come è ovvio che agli occhi di uno che non ne capisce niente sembrerà arabo, è ugualmente probabile che agli occhi di un'esperto siano l'indicazione di come fare per craccare il database. Ecco perché personalmente è da un po' ditempo che utilizzo un sistema di segnalazione automatica ed interna degli errori sql generati. Se siete curiosi di sapere come funziona, leggete l'articolo dedicato cliccando su questo link.

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Scelta della piattaforma Hosting

2012-01-11T23:02:00.002+01:00

Quando ho iniziato ad appassionarmi al web, decisi di cercare uno spazio gratuito di hosting sul quale iniziare a realizzare le mie prime prove. All'inizio non avevo la più pallida idea di cosa significassero le parole come "hosting", "banda mensile","database" e chi più ne ha più ne metta. Ovvio quindi che non avevo assolutamente le competenze per riconoscere un servizio di qualità da uno scadente. Indipendentemente da questo, scelsi di provare per puro caso la piattaforma di Altervista. Ora come ora sono entusiasta della mia scelta.

Il servizio che offre Altervista (link) è assolutamente eccezionale. Ti mette a disposizione gratuitamente uno spazio web perfettamente funzionante con 200 Megabytes di spazio disponibile, 1 Gb di banda mensile, un database gestibile con phpmyadmin, un numero davvero consistente di cms e anche il supporto all'ultima versione di php. Ci offre inoltre anche funzionalità automatiche come l'inserimento di un guestbook, toolbar personalizzabile, motore di ricerca interno al sito, feed rss, alias mail, newsletter, chat, favicon editor e infine "cron jobs". A tutto ciò si aggiunge la possibilità di ampliare lo spazio e la banda a disposizione e il numero di query eseguibili all'ora semplicemente pagando davvero pochissimi soldi. In aggiunta anche l'esecuzione dei "cron jobs" (visite programmate a determinate pagine eseguite dai server altervista), backup garantiti, costanti e programmabili. Infine per i meno esperti mette a disposizione diverse funzionalità wysiwyg.

Insomma, un servizio gratuito che mette a disposizione un numero enorme di funzionalità. Pagando un pochino ci fornisce funzioni ancor più avanzate, fino ad arrivare a fornire opzioni al pari di servizi professionali e molto famosi nel web.

In poche parole...un'esperienza da provare :)

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com

Il mio primo post :)

2012-01-11T22:41:00.001+01:00

Ciao a tutti miei futuri lettori :)
Mi presento, sono un grande appassionato del mondo dell'informatica in generale, attualmente mi sto dilettando nella creazione di siti web.
Questo blog vuole essere un punto di condivisione con la rete delle mie idee e dei miei progetti, un luogo per confrontarsi con altri che condividono la mia stessa passione e anche un'opportunità per mettere a disposizione le mie capacità magari aiutandovi a rendere reale una vostra idea :)
Spero che i contenuti siano di vostro gradimento e che possano anche esservi utili.

Buona lettura

_________________________________

Web Engineering & Design
ilmioprogettopassopasso.blogspot.com