Programmazione per il web - WebWord

WEB WORD PROCESSOR

Fabio Gadaleta
matr. 500879
Informatica e tecnologie per la produzione del software
Programmazione per il web

1- PREMESSA

__________________________

La necessità di far fronte alla vastità degli utenti che ormai dilaga nell'utilizzare il
web, ci pone di fronte a delle esigenza da soddisfare per permettere un intelligente
uso della semplicità e, dell'ormai insostituibilità, di internet: nella ricerca, nella
socialità, nel lavoro, nella vita quotidiana insomma. L'utilità del web diventa
necessaria quando anche per una semplice domanda che ci poniamo, non utilizziamo
più il dizionario, l'enciclopedia o fonti di una biblioteca: infatti la nostra biblioteca è
virtuale. Ci capita spesso di utilizzare Google per cercare un animale di cui
conosciamo solo il nome ma non l'aspetto, utilizziamo Wikipedia per arricchirci
culturalmente su una ricerca di un argomento trattato in modo libero da altri utenti
come noi, controlliamo Amazon per comprare un libro a noi di interesse.

Partendo da questo presupposto, la mia realizzazione punta ad avere una utilità
primaria come il Word, strumento che tutti usiamo. Realizzare un applicativo che
appartenga al mondo virtuale, una macchina da scrivere con qualche aggiunta in più
che garantisce la portabilità.

Questa mia realizzazione quindi mira ad avere una utility sempre a portata di mano (o
di link).

2- ANALISI

__________________________

L'applicativo web “Web Word” è realizzato tramite linguaggi di mark-up e linguaggio
di scripting quali XHTML/DHTML, il PHP e il JavaScript mentre il CSS (Custom
Style Sheet) è utilizzato per rendere il formato delle pagine del sito tutte di una
definizione grafica stabilita uguale per tutte.

L'analisi principale è quella di stabilire oltre ad una veste grafica dell'applicativo,
poco importante ai fini didattici, l'aspetto funzionale dell'utilità in modo da garantire
una diversa funzionalità a seconda che l'utenza sia registrata/loggata correttamente al
database o meno. Da questo aspetto quindi dobbiamo evincere che i due tipi di utenti
avranno funzioni simili ma qualcuna in più e meglio gestita, ovviamente, per l'utente
autenticato.

La differenza sostanziale tra l'utility per gli utenti registrati e autenticati e quelli che
non lo sono è il poter disporre di una versione base per questi ultimi mentre gli altri
potranno usufruire dei comandi di formattazione del testo.

Possiamo quindi ora illustrare i due tipi di versioni:

 VERSIONE BASE (per gli utenti non registrati): un Block Notes semplice, come
l'utility di Windows, con uno spazio per poter scrivere in maniera lineare . Una
versione di prova, se la si vuole intendere diversamente.

 VERSIONE AVANZATA (per gli utenti autenticati): più simile ad una versione di
Word o del Writer di OpenOffice, darà la possibilità di eseguire un
allineamento del carattere, la definizione di un font, colore e grandezza diversi
da quello predefinito oltre alle funzioni base come la sottolineatura, il corsivo o
il grassetto per il testo.

Ora possiamo passare all'autenticazione.
Essa prevede una registrazione iniziale, che servirà per il collocamento in database
dei dati per una futura autenticazione. I dati che serviranno saranno il nome
dell'utente che servirà per una funzione successiva del sito, il nome utente
(“username”) che insieme al campo criptato della password (“password”) serviranno
anche per la successiva autenticazione dell'utente. Questi dati verranno memorizzati
in un database che associerà ad ogni utente una chiave primaria univoca basata sul
nome utente.

Così questi dati memorizzati nel database “webword”, nella tabella “utenti” così

formata

utenti
NOME CAMPO TIPO VALORE GRANDEZZA CHIAVE PRIMARIA
name CHAR 30
username VARCHAR 30 X
password VARCHAR 2000

Dalla tabella si evince che il campo password ha una grandezza esagerata rispetto
agli altri due campi in quanto, utilizzando una codifica di tipo sha1 per criptare i dati,
avrà una grandezza variabile del campo, non calcolabile a priori. Inoltre il campo
username è la chiave primaria del database in modo che esso sia univoco per ogni
utente.

3- PROGETTAZIONE

__________________________

Per una questione di funzionamento, il sito ha bisogno di un appoggio per il server
per la memorizzazione dei dati del database. Da qui si è scelto di optare, almeno per
le prove locali, di due strumenti:
1. Apache: un server virtuale e locale necessario per il funzionamento delle
funzioni dal lato server delle query al database.
2. MySQL: un RDBMS, open source che ha funzioni native con il PHP 5.x in
modo tale da poter sfruttare al meglio le caratteristiche di entrambi i linguaggi.

Premettendo dunque che tutte le funzionalità provate sono state fatte con i suddetti
tool, passiamo ora a formalizzare lo studio delle pagine create.

Il sito comporterà l'apertura di una pagina principale webword.html che fa uso di un
frameset per la visualizzazione del sito. Il frameset è stato scelto per comodità in
quanto: primo il menù principale restava lo stesso nella navigazione delle pagine;
secondo il menù di riconoscimento dell'utente ha un meccanismo di aggiornamento
automatico periodico (3 secondi) e quindi non si voleva evitare di aggiornare ogni
volta la pagina intera; infine la dimostrazione che tutti i browser supportano la
funzione html del frameset.
Da quest'ultima affermazione, quindi, è doveroso dire che il sito è stato provato e
testato su 3 diversi browser quali Internet Explorer, Mozilla Firefox, Google Chrome.

Il frameset della pagina principale divide quindi in 3 righe il sito. Le prime due righe
di grandezza uguale sono il menù di riconoscimento dell'utente con il collegamento
alla pagina di login o logout, mentre il secondo frame è il menù di navigazione con
target di riferimento al terzo frame più grande (denominato navigazione) che sarà il
frame di riferimento per il cambiamento delle pagine all'interno del sito.

La pagina principale è stata realizzata senza far uso di specifiche particolari ma solo
di un frameset che inizialmente caricherà il menù dell'utente, il menù del sito e la
homepage principale con delle linee guida sull'utilizzo del sito (solo dimostrativo).

Continuando quindi con altre pagine dalle caratteristiche simili possiamo prendere in
considerazione il menù del sito che ha semplicemente dei link per le altre pagine del
sito con target il frame di navigazione andando quindi ad aggiornare solo il frame
sottostante.

Il menù dell'utente, invece, realizzato con script in PHP permette la visualizzazione
del nome dell'utente qualora fosse autenticato nel server con la possibilità di

disconnettersi da esso, oppure verrà visualizzato un messaggio di benvenuto con il
riferimento alla pagina di login.

A questo proposito dunque potremo parlare delle pagine di registrazione e di login
dell'utente, simili nella forma, diverse per l'azione che i form attiveranno al loro
invio.
Entrambe avranno un form da sottomettere, con nome utente e password (e del nome
nel caso della registrazioni) dove all'invio dei dati verranno trattati diversamente
tranne per il reindirizzamento, finale, alla home page.
La pagina di registrazione invierà i dati, nome, nome utente e password alla pagina
insert.php che tratterà i dati inviati inserendoli tramite una query di inserimento nel
database che si trova nel server locale, memorizzando il nome, il nome utente, e
criptando la password.
La pagina di login, invece, sempre per mezzo di un form con i soli campi del nome
utente e della password, invierà con il metodo POST alla pagina authentication.php
la quale, per prima cosa farà un controllo sul nome utente e sulla password,
rifiutandoli nel caso di inesistenza o di compilazione errati dei due campi e, nella
possibilità che entrambi siano corretti, restituisce una sessione autenticata e
prelevando il nome dell'utente che verrà aggiornato nella pagina del controllo
dell'utente (utente.php).

La pagina di logout, molto semplice, permetterà semplicemente di disconnettere
l'utente aprendo la sua sessione, distruggerla e dopo chiudere la sessione
reindirizzando l'utente verso la pagina principale.

Passando, infine, all'utility, facendo un click dal menù, essa indirizzerà l'utente verso
il controllo del tipo di utenza, se base o autenticata, portandolo verso una pagina con
una semplice textarea in cui scriverci nel primo caso o in una pagina DHTML con
funzioni javascript di modifica del font nel secondo.
In quest'ultima pagina, ci sarà un body che caricherà inizialmente una funzione
javascript che definirà il carattere, grandezza e colore iniziale dell'iframe in modalità
editabile. E di un'altra funzione che permetterà il cambio degli stessi al click di
pulsanti nella pagina stessa sul testo selezionato.

4- TEST

__________________________

I test, misurati su casi ideali dell'applicativo, senza che ci fossero errori nella
compilazione dei campi o delle procedure. La prima cosa da fare è eseguire una
connessione al server con i parametri “root” al nome utente e “admin” come
password di esso, nell'host “localhost”. Questi sono i campi utilizzati nel test. Da qui
inoltre, ci deve essere già realizzato il database “webword” con la tabella “utenti”
come detto in precedenza altrimenti verrà restituito errori di connessione al server
(nel primo caso, in cui non ci sia un server attivo), mentre nel secondo caso non
riuscirà a formulare correttamente le query formulate negli script. I test sono stati
effettuati sul browser “Google Chrome”.

Avviando quindi il server e raggiungendo il percorso http://localhost/webword.html,
si avvierà il sito completo delle sue parti:

Qui disporremo quindi della possibilità di leggere i passi su come utilizzare i servizi
del sito. Potremmo usare la versione base e di prova dell'utilità, priva di qualsiasi
formattazione del testo:

Versione misera e poco utile. Qui, l'utente potrebbe procedere alla registrazione di un
nuovo utente:

Un form semplice, con soli tre campi da riempire. I casi limite li vedremo più tardi,
per ora pensiamo alla compilazione di tutti i campi correttamente:

Alla premuta del tasto “ANNULLA” cancelleremo quello che nei campi abbiamo
scritto, mentre con il click su “CONFERMA”, passeremo il controllo ad uno script
php, che all'utente permetterà solo la visualizzazione del seguente messaggio:

e dopo una durata di 3 secondi (per permettere la lettura del messaggio), la
navigazione si sposterà di nuovo alla home page iniziale.

Ora, dopo la registrazione, sicuramente vorremmo provare l'applicativo. Per prima
cosa faremo un login nel sistema:

dove potremo semplicemente inserire i dati, precedentemente inseriti nella pagina di
registrazione:

Come possiamo notare, oltre all'accesso, il menù dell'utente segna il nome con cui
precedentemente ci siamo registrati. Dopo 3 secondi verremmo riportati

all'homepage, ma stavolta resterà il nostro nome stampato in alto a destra e con la
possibilità di logout:

Volendo ora utilizzare il nostro word online, troveremo una versione differente da
quella di prima, con pulsanti e opzioni per la formattazione del testo:

Infine dopo aver utilizzato il tutto, vorremmo magari voglia di disconnettere il nostro

utente dalla sessione attiva. Basterà quindi selezionare l'opzione di logout in alto a
destra:

Togliendo la sessione attiva, avremo il risultato di non essere più loggati nel server
con il nostro nome, e torneremo alle impostazioni iniziali. Il logout, infine ci porterà
alla home page iniziale dopo 3 secondi.

5- CASI LIMITE

__________________________

Abbiamo parlato prima, nel test fatto, che ci potrebbero essere dei casi limite.
Questi casi limite sono stati “gestiti” nei casi di dimenticanza o di sbadataggine
dell'utente nella compilazione dei form di registrazione e di autenticazione. Nel caso
di mancata connessione al database o al server, sono situazioni che restituiranno
l'errore senza che esso verrà gestito in quanto il sito è solo fruibile e utilizzato in
versione locale.

Studiamo quindi i diversi casi limite:

1) Registrazione: potremmo provare a non inserire il nome, il nome utente o la
password:

Così facendo, esso restituirà un errore catturato dallo script e reindirizzerà l'utente
nuovamente alla pagina di registrazione:

2) Registrazione: inserimento di tutti i campi ma con nome utente già
esistente nel database. Poiché esso deve essere unico, non può avere duplicati,
restituirà un errore riportando il controllo alla pagina di registrazione:

3) Login: inserimento dei dati di login errati. Non trovando corrispondenze nel

database, restituirà un errore permettendo all'utente di inserire nuovamente i
dati.

L'errore che genererà sarà gestito con il solito messaggio di errore:

4) Login: il non inserimento del nome utente o della password, come nel caso
della registrazione, sarà gestita allo stesso modo dell'inserimento di dati non
corretti.

Verrà restituito il messaggio di errore di mancanza di uno dei due campi e riporterà
l'attenzione alla pagina di autenticazione:

6- CLIENT-SIDE | SERVER-SIDE

__________________________

Nell'esecuzione dei vari script potremmo imbatterci in situazioni di entrambi i casi.
La pagina che caricherà il frameset webword.html

<frameset rows="13, 13, 200" frameborder="no">
<frame name="Login" src="utente.php" noresize="" />
<frame name="Menù" src="menù.html" noresize="" />
<frame name="Navigazione" src="mainpage.html" noresize="" />
</frameset>

Nulla di particolare nell'esecuzione della pagina “fulcro”. Contiene solo tre frame con
le diverse porzioni di “oggetti” da utilizzare. Il target Menù è praticamente statico,
mentre la dinamicità del target Login sarà data dalla possibilità di presentare un nome
in caso di autenticazione dell'utente. L'ultimo target sarà, diciamo, la parte visuale del
sito, quella a cui ogni collegamento cambierà il contenuto.

Nell'esecuzione della pagina iniziale, la prima connessione al server e al database,
effettuata dal menù dell'utente è una caratterizzazione di una funzione server-side

session_start();

$host = "localhost";
$username = "root";
$password = "admin";
$database = "webword";
$table = "utenti";

mysql_connect($host, $username, $password) or die ("Impossibile connettersi al server");
mysql_select_db($database) or die (mysql_error());

Questo primo script, inizialmente avvierà una sessione e, dopo, attraverso una
connessione al server e alla selezione del database che si troverà su un server (in
questo caso locale), sfrutta azioni che l'utente non dovrà gestire e che per lui
sembreranno “non visibili”. Solo l'errore di connessione, nel caso di mancata
connessione o di inesistenza del database avrà l'effetto di far percepire la funzionalità
all'utente. Questa porzione di codice è praticamente uguale per quasi tutte le pagine
php che necessitano una connessione al server/database per le loro azioni e query da
eseguire (le pagine sono insert.php, authentication.php, controlloVersione.php e lo
stesso utente.php).

Sempre all'interno dello stesso file utente.php troveremo un'altra porzione di codice:

if (!session_is_registered('autenticato'))
{
echo ('<div align="right">Utente non registrato. (<a href="autenticazione.html"
target="Navigazione">Log in</a>)</div>');
}
else
{
echo ('<div align="right">Benvenuto '. $_SESSION['name'].'. (<a href="logout.php"
target="Navigazione">Log out</a>)</div>');
}

Possiamo notare un caso di scelta: se non avremo una sessione registrata come
autenticato, avremo un messaggio con un collegamento per la pagina di Log in,
altrimenti avremo il nome dell'utente loggato al momento del login con la possibilità
di disconnettersi.

Un ultimo sguardo a questa pagina ci mostra un metadata di una pagina html:
<meta http-equiv="refresh" content="3;url=utente.php" target=Login>

Questo semplice meta ci permette di aggiornare il frame ogni 3 secondi, senza
aggiornare tutta la pagina ma solo il frame contenente il menù dell'utente attraverso il
target a fine tag.

Una pagina simile a quella del menù utente è quella che fa collegamento all'utility.
Infatti prima di riferirsi al word online, essa farà il controllo sulla sessione
autenticato per verificare se l'utente è abilitato ad utilizzare la versione base o quella
avanzata
if (!session_is_registered('autenticato'))
{
header('Refresh: 0.1; url=./utilityUnregistered.html');
}
else
{
header('Refresh: 0.1; url=./utility.html');
}

Come nel caso precedente esso porterà l'utente a navigare tra una delle due pagine
dell'utility, a seconda se non sia autenticata la sessione o se lo sia.

Possiamo ora mostrare la differenza tra le due versioni:
- Versione base: il codice di utilityUnregistered.html è una semplice pagina con una
textarea per poterci scrivere dentro
<center>
<textarea style="resize: none;" rows="20" cols="100" ></textarea>
</center>

Qui si utilizza una caratteristica client-side in quanto la scrittura nella textarea non
comporta nessun cambiamento, aggiornamento, creazione di dati all'interno del
database o del server.

- Versione avanzata: utility.html è una pagina più complessa rispetto a quella
precedente. Essa gestisce, ugualmente, dal lato client i cambiamenti dello stile
dell'iframe interno attraverso due codici javascript:

function define()
{
document.getElementById("fonts").selectedIndex=0;
document.getElementById("size").selectedIndex=0;
document.getElementById("color").selectedIndex=0;
}

Questa funzione javascript verrà caricata all'inizio della pagina con l'evento onLoad
nel tag body. Esso prende dal “documento”, attraverso i loro id, i parametri fonts, size
e color selezionando dalle rispettive opzioni quelle con l'indice pari a 0.

Un'altra funzione realizzata in javascript per l'utility è:

function fontEdit(x, y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}

E' una funzione che prende come parametri in input 2 valori passati con gli eventi dei
pulsanti o delle opzioni nella pagina. Praticamente modifica l'iframe di nome
textEditor eseguendo la funzione predefinita execCommand() dove la “x” rappresenta
il comando (stringa) da eseguire e la “y” il valore, numerico o letterale, da utilizzare.
Il metodo focus(), infine, restituisce l'attenzione all'oggetto stesso.

Oltre alle funzioni che vengono richiamate dagli eventi, abbiamo l'apertura del frame
interno in modalità di scrittura libera, e con la possibilità di modifica e infine quella
di chiusura.
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-
size:14px; }</style> </head>');
textEditor.document.close();

Come ultima parte da descrivere, c'è il corpo della pagina. Ci sono dei pulsanti e delle
scelte opzionali che permettono di modificare la porzione di testo evidenziato
nell'iframe. Ogni pulsante o ogni scelta permette l'esecuzione di un comando
richiamando la funzione fontEdit(x, y) che modificherà il testo selezionato con
l'evento collegato al pulsante o opzione scelta.

La porzione di codice che lo gestisce è il body che lo contiene:
<div style="width:1200px; text-align:left; margin-bottom:10px; font-size:20px ">
<input type="button" id="bold" style="height:30px; width:30px; font-weight:bold;" value="G" onClick="fontEdit('bold')"
title="Grassetto" />
<input type="button" id="italic" style="height:30px; width:30px; font-style:italic;" value="C" onClick="fontEdit('italic')"
title="Corsivo" />
<input type="button" id="underline" style="height:30px; width:30px; text-decoration:underline;" value="S"
onClick="fontEdit('underline')" title="Sottolineato" /> | |
<label>ALLINEAMENTO</label>
<input type="button" style="height:30px; width:30px;"value="S" onClick="fontEdit('justifyleft')" title="Allineamento a
sinistra" />
<input type="button" style="height:30px; width:30px;"value="C" onClick="fontEdit('justifycenter')" title="Allineamento
centrato" />
<input type="button" style="height:30px; width:30px;"value="D" onClick="fontEdit('justifyright')" title="Allineamento a
destra" />
<input type="button" style="height:30px; width:30px;"value="G" onClick="fontEdit('justifyfull')" title="Allineamento
giustificato" /> | |
<label>FONT</label>
<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype Corsiva</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times new Roman</option>
</select> | |
<label>GRANDEZZA</label>
<select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
</select> | |
<label>COLORE</label>
<select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option style="color:black;" value="black">Nero</option>
<option style="color:red;" value="red">Rosso</option>
<option style="color:yellow;" value="yellow">Giallo</option>
<option style="color:blue;" value="blue">Blu</option>
<option style="color:green;" value="green">Verde</option>
<option style="color:pink;" value="pink">Rosa</option>
<option style="color:brown;" value="brown">Marrone</option>
<option style="color:cyan;" value="cyan">Celeste</option>
<option style="color:orange;" value="orange">Arancione</option>
<option style="color:purple;" value="purple">Porpora</option>
<option style="color:magenta" value="magenta">Magenta</option>
<option style="color:gre;" value="grey">Grigio</option>
<option style="color:white" value="white">Bianco</option>
</select> | |
<input type="button" style="text-align: center; height:30px; width:30px;"value="1)" onClick="fontEdit('insertorderedlist')"
title="Lista ordinata" />
<input type="button" style="text-align: center; height:30px; width:30px;"value="-)" onClick="fontEdit('insertunorderedlist')"
title="Lista non ordinata" />
<input type="button" style="text-align: center; height:30px; width:30px;"value="<]" onClick="fontEdit('outdent')"
title="Indentazione a sinistra" />
<input type="button" style="text-align: center; height:30px; width:30px;"value="[>" onClick="fontEdit('indent')"
title="Indentazione a destra" />
</div>

<center>
<iframe id="textEditor" name="textEditor" style="width:1000px; height:400px;">
</iframe>
</center>

La gestione degli eventi, permesso dall'HTML dinamico (DHTML) è una
caratteristica che non presenta modifiche a livello server.

Per poter utilizzare l'utility completa ci serve innanzitutto la registrazione e
successivamente un'autenticazione con i dati che sono stati memorizzati. Se parliamo

del form di registrazione e autenticazione il codice html è simile tranne per il campo
del nome dell'utente che nella pagina autenticazione.html non è presente. A parte
questa similarità, i form indirizzeranno i risultati in due script diversi, gestiti
diversamente. Innanzitutto mostriamo il form per la creazione di un nuovo utente nel
database:
<form name="Registrazione dati" action="insert.php" method="POST">
<table>
<tr><td><label>Nome: </label></td>
<td><input type="text" name="name" /></td></tr>
<tr><td><label>Nome utente: </label></td>
<td><input type="text" name="username" /></td></tr>
<tr><td><label>Password: </label></td>
<td><input type="password" name="password" /></td></tr>
</table>
<hr/>
<br/>
<button type="submit" >CONFERMA</button>
<button type="reset">ANNULLA</button>
</form>

I risultati saranno inviati alla pagina insert.php per inserire i dati all'interno del
database. Questo form permette all'utente di specificare il nome, il nome utente e la
password che intende usare e dopo aver confermato non avrà nulla da fare se non
attendere un messaggio di avvenuto successo o di errore, specificato di che genere.
L'inserimento nel database è fatto automaticamente dallo script dal lato server
prelevando, grazie al metodo POST i dati inseriti nei campi del form per poterli
“stringare” e scriverli con una query mySQL all'interno del database che avremo
selezionato (in questo caso webword).
if($_POST['name'] == NULL)
{
echo ("Nessun nome inserito.");
header('Refresh: 3; url=./registrazione.html');
}
elseif($_POST['username'] == NULL)
{
echo ("Nessun nome utente inserito.");
}
elseif($_POST['password'] == NULL)
{
echo ("Nessuna password inserita.");
}
else
{
$password = sha1($_POST['password']);
$mysql = sprintf("INSERT INTO %s(name, username, password) VALUES ('%s', '$_POST[username]', '%s')", $table,
$_POST['name'], $password);

if(!mysql_query($mysql))
{
echo ("Nome utente già esistente. Inserirne uno nuovo");
die();
}
echo "Dati dell'utente inseriti correttamente! Attendere il reindirizzamento alla pagina principale.";
mysql_close();
header('Refresh: 3; url=./mainpage.html');
}

Per prima cosa, lo script, prevede un controllo sui campi nulli, ovvero se all'interno
del form essi siano vuoti, restituendo il controllo alla pagina di registrazione con il
messaggio del campo mancante.
Se tutti i campi controllati non sono vuoti, la password inserita viene crittografata con
un algoritmo hash, di tipo sha1. Questo solo per non permettere di essere “chiara” nel
database quando verrà salvata. Ricordando all'inizio che la tabella aveva la grandezza
massima del campo password di 2000 caratteri proprio perché quest'algoritmo crea
dei valori molto più grandi rispetto al valore inizialmente inserito. Questo è fatto al
fine di proteggere almeno un campo chiave della privacy dell'utente.
Successivamente viene scritta sotto forma di stringa con la formattazione corretta
attraverso il comando sprintf() della query da utilizzare per l'inserimento nel
database. Se la sua esecuzione non va a buon fine vorrà dire che il nome utente è già
esistente e si tornerà alla pagina di registrazione. In caso negativo i dati saranno
inseriti correttamente con la visualizzazione del messaggio e con il ritorno alla home
page del sito.

Tornando quindi all'autenticazione, il form, che abbiamo detto molto simile a quello
di registrazione, presenta solo un campo in meno.

<form name="Autenticazione dati" action="authentication.php" method="POST">
<table>
<tr><td><label>Nome utente: </label></td>
<td><input type="text" name="username" /></td></tr>
<tr><td><label>Password: </label></td>
<td><input type="password" name="password" /></td></tr>
</table>
<hr/>
<br/>

<button type="submit">CONFERMA</button>
<button type="reset">ANNULLA</button>
</form>

Il form è lo stesso, ma il controllo alla premuta del tasto CONFERMA viene passato
ad un altro script (authentication.php). Come nel caso precedente il form è la
compilazione dei campi avviene tutto a livello client mentre il ritrovamento dei dati,
il confronto e il messaggio restituito avviene dal lato server.

if(!isset($_POST['username']) || $_POST['username']=="")
{
echo "Nome utente non inserito! La preghiamo di riprovare."; header('Refresh: 3;
url=./autenticazione.html');
}
elseif( !isset($_POST['password']) || $_POST['password'] =="")
{
echo "Password non inserita! La preghiamo di riprovare."; header('Refresh: 3;
url=./autenticazione.html');
}

Il primo controllo fatto è sui campi username e password per determinare se essi

esistono e non sono nulli. Proseguendo con il codice quindi avremmo:

else
{
$username = trim(filter_var($_POST['username'], FILTER_SANITIZE_STRING));
$password = trim(filter_var($_POST['password'], FILTER_SANITIZE_STRING));
$password = sha1($password);

$auth = mysql_query(sprintf("SELECT * FROM %s WHERE username = '%s' AND
password = '%s' LIMIT 0, 1", $table, $username, $password));

if($row = mysql_fetch_row($auth))
{
session_register("autenticato");
$_SESSION['name'] = $row[0];
echo "Accesso garantito.";
}
else
{
echo "Nome utente o password errati! Riprova o, nel caso, registrati.";
header('Refresh: 30; url=./autenticazione.html');
}
}

Per prima cosa si puliscono le variabili dai caratteri vuoti (lo spazio, per intenderci) e
successivamente si scrive la query di estrazione dei dati.
Nella condizione dell'if, la query viene viene divisa in un array con campi indicizzati
(mysql_fetch_row()). Se vengono trovati corrispondenze del nome utente e della
password nel database, essa registrerà una sessione autenticato che verrà utilizzata
per il controllo della versione dell'utility da utilizzare e il tipo di utente nella barra
utente, imposterà nella sessione il nome del campo 0 (ovvero il primo della tabella
utenti, ovvero nome) che servirà al menù utente per scrivere il nome dell'utente a cui
corrispondono le credenziali, e dopo tornerà alla home page. In caso negativo, e
quindi le credenziali di acceso non restituiscono risultati, significherà che il nome
utente o la password sono errati.

Infine la pagina logout.php che gestisce dal lato server la distruzione della sessione
creata, semplicemente aprendola e dopo chiuderla, facendo tornare il controllo
dell'utente alla pagina principale.

session_start();
session_destroy();
echo ("Disconnessione avvenuta con successo. Attendere il reindirizzamento alla
pagina principale.");
session_close();

7- CONSIDERAZIONI FINALI

__________________________

Prima di concludere possiamo parlare del progetto dal punto di vista progettuale.
I primi problema riscontrati è stato la gestione contemporanea dei vari componenti
(menù utente, menù di navigazione, …) che ha portato quindi all'utilizzo di un
frameset per il controllo simultaneo e separato di essi, senza comportare che il refresh
continuo della pagina utente.php desse problemi alle altre componenti.
Superato questo primo problema, un secondo ripensamento è stato fatto sull'utilizzo
di MYSQL e di un server. Questa scelta “comoda” è stata fatta in base al principio del
PHP di interfacciarsi facilmente con le funzioni MYSQL.
Passando, infine, all'utility vera e propria, si poteva optare per rich-text editor
disponibili gratuitamente sul web che avrebbero realizzato meglio la funzione di
editor, ma dal punto di vista della programmazione non sarebbe servita a capire i
concetti degli eventi dell'HTML, optando proprio sull'utilizzo dei javascript e degli
eventi per gestire un'editor di testo.

Programmazione per il web - WebWord

More Related Content

Viewers also liked (13)

Similar to Programmazione per il web - WebWord (20)

More from Alartzero (6)

Programmazione per il web - WebWord