WEB WORD PROCESSOR                                               Fabio Gadaleta                                           ...
1- PREMESSA__________________________La necessità di far fronte alla vastità degli utenti che ormai dilaga nellutilizzare ...
2- ANALISI__________________________Lapplicativo web “Web Word” è realizzato tramite linguaggi di mark-up e linguaggiodi s...
formatautentiNOME CAMPO             TIPO VALORE           GRANDEZZA              CHIAVE PRIMARIAname                   CHA...
3- PROGETTAZIONE__________________________Per una questione di funzionamento, il sito ha bisogno di un appoggio per il ser...
disconnettersi da esso, oppure verrà visualizzato un messaggio di benvenuto con ilriferimento alla pagina di login.A quest...
4- TEST__________________________I test, misurati su casi ideali dellapplicativo, senza che ci fossero errori nellacompila...
Versione misera e poco utile. Qui, lutente potrebbe procedere alla registrazione di unnuovo utente:Un form semplice, con s...
Alla premuta del tasto “ANNULLA” cancelleremo quello che nei campi abbiamoscritto, mentre con il click su “CONFERMA”, pass...
Ora, dopo la registrazione, sicuramente vorremmo provare lapplicativo. Per primacosa faremo un login nel sistema:dove potr...
allhomepage, ma stavolta resterà il nostro nome stampato in alto a destra e con lapossibilità di logout:Volendo ora utiliz...
utente dalla sessione attiva. Basterà quindi selezionare lopzione di logout in alto adestra:Togliendo la sessione attiva, ...
5- CASI LIMITE__________________________Abbiamo parlato prima, nel test fatto, che ci potrebbero essere dei casi limite.Qu...
Così facendo, esso restituirà un errore catturato dallo script e reindirizzerà lutentenuovamente alla pagina di registrazi...
2) Registrazione: inserimento di tutti i campi ma con nome utente giàesistente nel database. Poiché esso deve essere unico...
database, restituirà un errore permettendo allutente di inserire nuovamente i      dati.Lerrore che genererà sarà gestito ...
Verrà restituito il messaggio di errore di mancanza di uno dei due campi e riporteràlattenzione alla pagina di autenticazi...
6- CLIENT-SIDE | SERVER-SIDE__________________________Nellesecuzione dei vari script potremmo imbatterci in situazioni di ...
Sempre allinterno dello stesso file utente.php troveremo unaltra porzione di codice:       if (!session_is_registered(aute...
Qui si utilizza una caratteristica client-side in quanto la scrittura nella textarea noncomporta nessun cambiamento, aggio...
La porzione di codice che lo gestisce è il body che lo contiene: <div style="width:1200px; text-align:left; margin-bottom:...
del form di registrazione e autenticazione il codice html è simile tranne per il campodel nome dellutente che nella pagina...
Per prima cosa, lo script, prevede un controllo sui campi nulli, ovvero se allinternodel form essi siano vuoti, restituend...
esistono e non sono nulli. Proseguendo con il codice quindi avremmo:      else      {              $username = trim(filter...
7- CONSIDERAZIONI FINALI__________________________Prima di concludere possiamo parlare del progetto dal punto di vista pro...
Upcoming SlideShare
Loading in...5
×

Programmazione per il web - WebWord

507

Published on

L\'analisi del problema di avere un rich-text editor con permessi di login/logout dell\'utente

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
507
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Programmazione per il web - WebWord

  1. 1. WEB WORD PROCESSOR Fabio Gadaleta matr. 500879 Informatica e tecnologie per la produzione del software Programmazione per il web
  2. 2. 1- PREMESSA__________________________La necessità di far fronte alla vastità degli utenti che ormai dilaga nellutilizzare ilweb, ci pone di fronte a delle esigenza da soddisfare per permettere un intelligenteuso della semplicità e, dellormai insostituibilità, di internet: nella ricerca, nellasocialità, nel lavoro, nella vita quotidiana insomma. Lutilità del web diventanecessaria quando anche per una semplice domanda che ci poniamo, non utilizziamopiù il dizionario, lenciclopedia o fonti di una biblioteca: infatti la nostra biblioteca èvirtuale. Ci capita spesso di utilizzare Google per cercare un animale di cuiconosciamo solo il nome ma non laspetto, utilizziamo Wikipedia per arricchirciculturalmente su una ricerca di un argomento trattato in modo libero da altri utenticome 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 cheappartenga 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 (odi link).
  3. 3. 2- ANALISI__________________________Lapplicativo web “Web Word” è realizzato tramite linguaggi di mark-up e linguaggiodi scripting quali XHTML/DHTML, il PHP e il JavaScript mentre il CSS (CustomStyle Sheet) è utilizzato per rendere il formato delle pagine del sito tutte di unadefinizione grafica stabilita uguale per tutte.Lanalisi principale è quella di stabilire oltre ad una veste grafica dellapplicativo,poco importante ai fini didattici, laspetto funzionale dellutilità in modo da garantireuna diversa funzionalità a seconda che lutenza sia registrata/loggata correttamente aldatabase o meno. Da questo aspetto quindi dobbiamo evincere che i due tipi di utentiavranno funzioni simili ma qualcuna in più e meglio gestita, ovviamente, per lutenteautenticato.La differenza sostanziale tra lutility per gli utenti registrati e autenticati e quelli chenon lo sono è il poter disporre di una versione base per questi ultimi mentre gli altripotranno 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 lutility 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 allautenticazione.Essa prevede una registrazione iniziale, che servirà per il collocamento in databasedei dati per una futura autenticazione. I dati che serviranno saranno il nomedellutente che servirà per una funzione successiva del sito, il nome utente(“username”) che insieme al campo criptato della password (“password”) servirannoanche per la successiva autenticazione dellutente. Questi dati verranno memorizzatiin un database che associerà ad ogni utente una chiave primaria univoca basata sulnome utente.Così questi dati memorizzati nel database “webword”, nella tabella “utenti” così
  4. 4. formatautentiNOME CAMPO TIPO VALORE GRANDEZZA CHIAVE PRIMARIAname CHAR 30username VARCHAR 30 Xpassword VARCHAR 2000Dalla tabella si evince che il campo password ha una grandezza esagerata rispettoagli 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 campousername è la chiave primaria del database in modo che esso sia univoco per ogniutente.
  5. 5. 3- PROGETTAZIONE__________________________Per una questione di funzionamento, il sito ha bisogno di un appoggio per il serverper la memorizzazione dei dati del database. Da qui si è scelto di optare, almeno perle 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 suddettitool, passiamo ora a formalizzare lo studio delle pagine create.Il sito comporterà lapertura di una pagina principale webword.html che fa uso di unframeset per la visualizzazione del sito. Il frameset è stato scelto per comodità inquanto: primo il menù principale restava lo stesso nella navigazione delle pagine;secondo il menù di riconoscimento dellutente ha un meccanismo di aggiornamentoautomatico periodico (3 secondi) e quindi non si voleva evitare di aggiornare ognivolta la pagina intera; infine la dimostrazione che tutti i browser supportano lafunzione html del frameset.Da questultima affermazione, quindi, è doveroso dire che il sito è stato provato etestato 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 righedi grandezza uguale sono il menù di riconoscimento dellutente con il collegamentoalla pagina di login o logout, mentre il secondo frame è il menù di navigazione contarget di riferimento al terzo frame più grande (denominato navigazione) che sarà ilframe di riferimento per il cambiamento delle pagine allinterno del sito.La pagina principale è stata realizzata senza far uso di specifiche particolari ma solodi un frameset che inizialmente caricherà il menù dellutente, il menù del sito e lahomepage principale con delle linee guida sullutilizzo del sito (solo dimostrativo).Continuando quindi con altre pagine dalle caratteristiche simili possiamo prendere inconsiderazione il menù del sito che ha semplicemente dei link per le altre pagine delsito con target il frame di navigazione andando quindi ad aggiornare solo il framesottostante.Il menù dellutente, invece, realizzato con script in PHP permette la visualizzazionedel nome dellutente qualora fosse autenticato nel server con la possibilità di
  6. 6. disconnettersi da esso, oppure verrà visualizzato un messaggio di benvenuto con ilriferimento alla pagina di login.A questo proposito dunque potremo parlare delle pagine di registrazione e di logindellutente, simili nella forma, diverse per lazione che i form attiveranno al loroinvio.Entrambe avranno un form da sottomettere, con nome utente e password (e del nomenel caso della registrazioni) dove allinvio dei dati verranno trattati diversamentetranne per il reindirizzamento, finale, alla home page.La pagina di registrazione invierà i dati, nome, nome utente e password alla paginainsert.php che tratterà i dati inviati inserendoli tramite una query di inserimento neldatabase che si trova nel server locale, memorizzando il nome, il nome utente, ecriptando la password.La pagina di login, invece, sempre per mezzo di un form con i soli campi del nomeutente e della password, invierà con il metodo POST alla pagina authentication.phpla 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, nellapossibilità che entrambi siano corretti, restituisce una sessione autenticata eprelevando il nome dellutente che verrà aggiornato nella pagina del controllodellutente (utente.php).La pagina di logout, molto semplice, permetterà semplicemente di disconnetterelutente aprendo la sua sessione, distruggerla e dopo chiudere la sessionereindirizzando lutente verso la pagina principale.Passando, infine, allutility, facendo un click dal menù, essa indirizzerà lutente versoil controllo del tipo di utenza, se base o autenticata, portandolo verso una pagina conuna semplice textarea in cui scriverci nel primo caso o in una pagina DHTML confunzioni javascript di modifica del font nel secondo.In questultima pagina, ci sarà un body che caricherà inizialmente una funzionejavascript che definirà il carattere, grandezza e colore iniziale delliframe in modalitàeditabile. E di unaltra funzione che permetterà il cambio degli stessi al click dipulsanti nella pagina stessa sul testo selezionato.
  7. 7. 4- TEST__________________________I test, misurati su casi ideali dellapplicativo, senza che ci fossero errori nellacompilazione dei campi o delle procedure. La prima cosa da fare è eseguire unaconnessione al server con i parametri “root” al nome utente e “admin” comepassword di esso, nellhost “localhost”. Questi sono i campi utilizzati nel test. Da quiinoltre, 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 nonriuscirà a formulare correttamente le query formulate negli script. I test sono statieffettuati 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 servizidel sito. Potremmo usare la versione base e di prova dellutilità, priva di qualsiasiformattazione del testo:
  8. 8. Versione misera e poco utile. Qui, lutente potrebbe procedere alla registrazione di unnuovo 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:
  9. 9. Alla premuta del tasto “ANNULLA” cancelleremo quello che nei campi abbiamoscritto, mentre con il click su “CONFERMA”, passeremo il controllo ad uno scriptphp, che allutente permetterà solo la visualizzazione del seguente messaggio:e dopo una durata di 3 secondi (per permettere la lettura del messaggio), lanavigazione si sposterà di nuovo alla home page iniziale.
  10. 10. Ora, dopo la registrazione, sicuramente vorremmo provare lapplicativo. Per primacosa faremo un login nel sistema:dove potremo semplicemente inserire i dati, precedentemente inseriti nella pagina diregistrazione:Come possiamo notare, oltre allaccesso, il menù dellutente segna il nome con cuiprecedentemente ci siamo registrati. Dopo 3 secondi verremmo riportati
  11. 11. allhomepage, ma stavolta resterà il nostro nome stampato in alto a destra e con lapossibilità di logout:Volendo ora utilizzare il nostro word online, troveremo una versione differente daquella di prima, con pulsanti e opzioni per la formattazione del testo:Infine dopo aver utilizzato il tutto, vorremmo magari voglia di disconnettere il nostro
  12. 12. utente dalla sessione attiva. Basterà quindi selezionare lopzione di logout in alto adestra:Togliendo la sessione attiva, avremo il risultato di non essere più loggati nel servercon il nostro nome, e torneremo alle impostazioni iniziali. Il logout, infine ci porteràalla home page iniziale dopo 3 secondi.
  13. 13. 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 sbadatagginedellutente nella compilazione dei form di registrazione e di autenticazione. Nel casodi mancata connessione al database o al server, sono situazioni che restituirannolerrore senza che esso verrà gestito in quanto il sito è solo fruibile e utilizzato inversione locale.Studiamo quindi i diversi casi limite: 1) Registrazione: potremmo provare a non inserire il nome, il nome utente o la password:
  14. 14. Così facendo, esso restituirà un errore catturato dallo script e reindirizzerà lutentenuovamente alla pagina di registrazione:
  15. 15. 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
  16. 16. database, restituirà un errore permettendo allutente di inserire nuovamente i dati.Lerrore 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 dellinserimento di dati non corretti.
  17. 17. Verrà restituito il messaggio di errore di mancanza di uno dei due campi e riporteràlattenzione alla pagina di autenticazione:
  18. 18. 6- CLIENT-SIDE | SERVER-SIDE__________________________Nellesecuzione 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 nellesecuzione della pagina “fulcro”. Contiene solo tre frame conle diverse porzioni di “oggetti” da utilizzare. Il target Menù è praticamente statico,mentre la dinamicità del target Login sarà data dalla possibilità di presentare un nomein caso di autenticazione dellutente. Lultimo target sarà, diciamo, la parte visuale delsito, quella a cui ogni collegamento cambierà il contenuto.Nellesecuzione della pagina iniziale, la prima connessione al server e al database,effettuata dal menù dellutente è 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 unaconnessione al server e alla selezione del database che si troverà su un server (inquesto caso locale), sfrutta azioni che lutente non dovrà gestire e che per luisembreranno “non visibili”. Solo lerrore di connessione, nel caso di mancataconnessione o di inesistenza del database avrà leffetto di far percepire la funzionalitàallutente. Questa porzione di codice è praticamente uguale per quasi tutte le paginephp che necessitano una connessione al server/database per le loro azioni e query daeseguire (le pagine sono insert.php, authentication.php, controlloVersione.php e lostesso utente.php).
  19. 19. Sempre allinterno dello stesso file utente.php troveremo unaltra 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 comeautenticato, avremo un messaggio con un collegamento per la pagina di Log in,altrimenti avremo il nome dellutente 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, senzaaggiornare tutta la pagina ma solo il frame contenente il menù dellutente attraverso iltarget a fine tag.Una pagina simile a quella del menù utente è quella che fa collegamento allutility.Infatti prima di riferirsi al word online, essa farà il controllo sulla sessioneautenticato per verificare se lutente è abilitato ad utilizzare la versione base o quellaavanzata 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à lutente a navigare tra una delle due paginedellutility, 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 unatextarea per poterci scrivere dentro <center> <textarea style="resize: none;" rows="20" cols="100" ></textarea> </center>
  20. 20. Qui si utilizza una caratteristica client-side in quanto la scrittura nella textarea noncomporta nessun cambiamento, aggiornamento, creazione di dati allinterno deldatabase o del server.- Versione avanzata: utility.html è una pagina più complessa rispetto a quellaprecedente. Essa gestisce, ugualmente, dal lato client i cambiamenti dello stiledelliframe 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 allinizio della pagina con levento onLoadnel tag body. Esso prende dal “documento”, attraverso i loro id, i parametri fonts, sizee color selezionando dalle rispettive opzioni quelle con lindice pari a 0.Unaltra funzione realizzata in javascript per lutility è: 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 deipulsanti o delle opzioni nella pagina. Praticamente modifica liframe di nometextEditor eseguendo la funzione predefinita execCommand() dove la “x” rappresentail comando (stringa) da eseguire e la “y” il valore, numerico o letterale, da utilizzare.Il metodo focus(), infine, restituisce lattenzione alloggetto stesso.Oltre alle funzioni che vengono richiamate dagli eventi, abbiamo lapertura del frameinterno in modalità di scrittura libera, e con la possibilità di modifica e infine quelladi 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 dellescelte opzionali che permettono di modificare la porzione di testo evidenziatonelliframe. Ogni pulsante o ogni scelta permette lesecuzione di un comandorichiamando la funzione fontEdit(x, y) che modificherà il testo selezionato conlevento collegato al pulsante o opzione scelta.
  21. 21. 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> <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>La gestione degli eventi, permesso dallHTML dinamico (DHTML) è unacaratteristica che non presenta modifiche a livello server.Per poter utilizzare lutility completa ci serve innanzitutto la registrazione esuccessivamente unautenticazione con i dati che sono stati memorizzati. Se parliamo
  22. 22. del form di registrazione e autenticazione il codice html è simile tranne per il campodel nome dellutente che nella pagina autenticazione.html non è presente. A partequesta similarità, i form indirizzeranno i risultati in due script diversi, gestitidiversamente. Innanzitutto mostriamo il form per la creazione di un nuovo utente neldatabase: <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 allinterno deldatabase. Questo form permette allutente di specificare il nome, il nome utente e lapassword che intende usare e dopo aver confermato non avrà nulla da fare se nonattendere un messaggio di avvenuto successo o di errore, specificato di che genere.Linserimento nel database è fatto automaticamente dallo script dal lato serverprelevando, grazie al metodo POST i dati inseriti nei campi del form per poterli“stringare” e scriverli con una query mySQL allinterno del database che avremoselezionato (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 dellutente inseriti correttamente! Attendere il reindirizzamento alla pagina principale."; mysql_close(); header(Refresh: 3; url=./mainpage.html); }
  23. 23. Per prima cosa, lo script, prevede un controllo sui campi nulli, ovvero se allinternodel form essi siano vuoti, restituendo il controllo alla pagina di registrazione con ilmessaggio del campo mancante.Se tutti i campi controllati non sono vuoti, la password inserita viene crittografata conun algoritmo hash, di tipo sha1. Questo solo per non permettere di essere “chiara” neldatabase quando verrà salvata. Ricordando allinizio che la tabella aveva la grandezzamassima del campo password di 2000 caratteri proprio perché questalgoritmo creadei valori molto più grandi rispetto al valore inizialmente inserito. Questo è fatto alfine di proteggere almeno un campo chiave della privacy dellutente.Successivamente viene scritta sotto forma di stringa con la formattazione correttaattraverso il comando sprintf() della query da utilizzare per linserimento neldatabase. 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 sarannoinseriti correttamente con la visualizzazione del messaggio e con il ritorno alla homepage del sito.Tornando quindi allautenticazione, il form, che abbiamo detto molto simile a quellodi 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 passatoad un altro script (authentication.php). Come nel caso precedente il form è lacompilazione 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
  24. 24. 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."; header(Refresh: 3; url=./mainpage.html); } 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) esuccessivamente si scrive la query di estrazione dei dati.Nella condizione dellif, la query viene viene divisa in un array con campi indicizzati(mysql_fetch_row()). Se vengono trovati corrispondenze del nome utente e dellapassword nel database, essa registrerà una sessione autenticato che verrà utilizzataper il controllo della versione dellutility da utilizzare e il tipo di utente nella barrautente, imposterà nella sessione il nome del campo 0 (ovvero il primo della tabellautenti, ovvero nome) che servirà al menù utente per scrivere il nome dellutente a cuicorrispondono le credenziali, e dopo tornerà alla home page. In caso negativo, equindi le credenziali di acceso non restituiscono risultati, significherà che il nomeutente o la password sono errati.Infine la pagina logout.php che gestisce dal lato server la distruzione della sessionecreata, semplicemente aprendola e dopo chiuderla, facendo tornare il controllodellutente alla pagina principale. session_start(); session_destroy(); echo ("Disconnessione avvenuta con successo. Attendere il reindirizzamento alla pagina principale."); header(Refresh: 3; url=./mainpage.html); session_close();
  25. 25. 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 allutilizzo di unframeset per il controllo simultaneo e separato di essi, senza comportare che il refreshcontinuo della pagina utente.php desse problemi alle altre componenti.Superato questo primo problema, un secondo ripensamento è stato fatto sullutilizzodi MYSQL e di un server. Questa scelta “comoda” è stata fatta in base al principio delPHP di interfacciarsi facilmente con le funzioni MYSQL.Passando, infine, allutility vera e propria, si poteva optare per rich-text editordisponibili gratuitamente sul web che avrebbero realizzato meglio la funzione dieditor, ma dal punto di vista della programmazione non sarebbe servita a capire iconcetti degli eventi dellHTML, optando proprio sullutilizzo dei javascript e deglieventi per gestire uneditor di testo.

×