WEB WORD PROCESSOR

Fabio Gadaletamatr. 500879

Informatica e tecnologie per la produzione del softwareProgrammazione 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

utentiNOME CAMPO TIPO VALORE GRANDEZZA CHIAVE PRIMARIAname CHAR 30username VARCHAR 30 Xpassword 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

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

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).

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());

<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>

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

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:

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

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

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>');

}

<meta http-equiv="refresh" content="3;url=utente.php" target=Login>

if (!session_is_registered('autenticato')){

header('Refresh: 0.1; url=./utilityUnregistered.html');}else{

header('Refresh: 0.1; url=./utility.html');}

<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:

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 è:

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.

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.

function define(){

document.getElementById("fonts").selectedIndex=0;document.getElementById("size").selectedIndex=0;document.getElementById("color").selectedIndex=0;

}

function fontEdit(x, y){

textEditor.document.execCommand(x,"",y);textEditor.focus();

}

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();

La porzione di codice che lo gestisce è il body che lo contiene:

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

<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><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</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>

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:

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.");header('Refresh: 3; url=./registrazione.html');

}elseif($_POST['password'] == NULL){

echo ("Nessuna password inserita.");header('Refresh: 3; url=./registrazione.html');

}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");header('Refresh: 3; url=./registrazione.html');die();

}echo "Dati dell'utente inseriti correttamente! Attendere il reindirizzamento alla pagina principale.";mysql_close();header('Refresh: 3; url=./mainpage.html');}

<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>

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.

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.

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

<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>

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');}

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

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.

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.";header('Refresh: 3; url=./mainpage.html');

}else{

echo "Nome utente o password errati! Riprova o, nel caso, registrati.";header('Refresh: 30; url=./autenticazione.html');

} }

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

pagina principale.");header('Refresh: 3; url=./mainpage.html');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.