Corso di Progettazione di Siti e Applicazioni Web

Transcript

1 UNIVERSITA' CATTOLICA DEL SACRO CUORE CORSO DI LAUREA IN INFORMATICA Corso di Progettazione di Siti e Applicazioni Web Moretti Stefano Bettini Angela Fernando Ishan Monselice Diego

2 INTRODUZIONE Il nostro lavoro vuole, più che realizzare un reale progetto, dimostrare come l'intereazione fra diverse tecnologie, quali html, css, sqllite, python, javascrit, web server, django, svn, può aiutare nella realizzazione di grandi piani di lavoro dove altrimenti sarebbe difficile organizzarsi. Esso si presenta all'utente come un sito web dinamico, di ricette culinarie, dove gli users possono partecipare attivamente alla popolazione del database che necessariamente, anche se indirettamente deve sostenerlo. FUNZIONALITA' DEL SITO Aprendo la homepage del sito ci si presenta come divisa in zone: - selezione stile pagina; - login; - menu a sinistra; - menu a destra; - corpo della pagina. La possibilità di cambiare manualmente lo stile della pagina l'abbiamo inserita come dimostrazione del funzionamento dei fogli di stile associati alle pagine; in una eventuale pubblicazione sul Web il cambio di stile verrà effettuato automaticamente in base alla stagione. La zona di login si presenta inizialmente come un form in cui inserire username e password, una volta che un'utente registrato si è loggato il form verrà sostituito con un messaggio di benvenuto che conferma l'avvenuto login. Vediamo in dettaglio i menu di sinistra: - ricerca ricetta: aprendo il link nella zona centrale della pagina appare un form dove inserire i criteri di ricerca (come ad esempio una parola chiave da ricercare, oppure il limite calorico o il tempo di preparazione ecc). Premendo il tasto "Trova ricetta" verrà restituita una lista delle ricette che corrispondono ai criteri definiti nel form; - genera menu: questa funzione consente di generare e visualizzare un menu casuale selezionando la stagione e l'area geografica desiderate; - iscriviti: questo link porta a visualizzare nella zona centrale un form da compilare per effettuare l'iscrizione al sito; - inserisci ricetta: questa funzionalità è riservata agli utenti iscritti e quindi loggati, e permette di compilare un form con le informazioni per una nuova ricetta; da notare che gli ingredienti sono da inserire uno alla volta; Per quanto riguarda i menu di destra, rappresentano i link a particolari ricette (topten e ricetta del mese) o particolari menu (del giorno o di stagione). Il corpo centrale della pagina è l'unica zona il cui contenuto varia durante la navigazione del sito. La pagina di visualizzazione di una singola ricetta presenta la possibilità di aggiungere il proprio commento alla ricetta e di votarla, naturalmente queste funzioni sono riservate agli utenti loggati. HTML Il codice html l'abbiamo utilizzato per definire i contenuti da visualizzare, senza introdurre elementi di grafica come colori, posizionamento degli elementi e formattazione del testo. Abbiamo separato le varie zone della pagina identificandole con tag <div> e nominandoli per poterli gestire separatamente nei fogli di stile. Il richiamo al foglio di stile associato di volta in volta alla pagina è codificato come: <link rel="stylesheet" type="text/css" href="style">

3 CSS Arricchiscono l'aspetto visuale ed estetico di una pagina e separano il contenuto dalla presentazione. Chi conosce un minimo di HTML è pienamente consapevole dei limiti di questo linguaggio sul lato della pura presentazione. A dire il vero, non è giusto parlare di limiti: HTML non è nato per questo. E' stato però piegato a fare cose che intrinsecamente non era in grado di fare. Bene: quasi tutto quello che con HTML non potete realizzare, riuscirete a farlo con i fogli di stile. Se quel bellissimo disegno di prima vi stufa, non dovrete più andare a modificare una per una 300 pagine! I CSS sono separati dal documento. Aprite un foglio di stile, cambiate l'immagine e il gioco è fatto. Il risultato sono pagine più leggere e facili da modificare. Milioni di byte di banda risparmiati per la gioia degli utenti. Se poi avete a cuore l'accessibilità i CSS sono uno strumento portentoso, anche grazie al fatto di poter essere gestiti con linguaggi di scripting avanzati in grado di modificare con un solo click l'aspetto di una pagina. Abbiamo sfruttato la potenzialità dei fogli di stile per creare stili differenti per ogni stagione gestendo separatamente l'aspetto del sito dai suoi contenuti. Oltre ai cambi di stagione l'utilizzo più importante è sicuramente la creazione di uno stile per ipovedenti, con colori ad altro contrasto, caratteri ingranditi e tutta una serie di aggiustamenti per consentirne una buona visualizzazione. Chiaramente abbiamo voluto farlo provare ad una persona ipovedente per valutarne l'efficacia. UTILIZZO DI JAVASCRIPT Abbiamo utilizzato la tecnologia Javascript per gestire alcune funzionalità del sito. Prima di tutto la possibilità di cambiare lo stile della pagina, alternando le stagioni, ma soprattutto consentendo di visualizzarla senza stile o con lo stile per ipovedenti è permessa da un piccolo script inserito nel codice html della home page: <html> <head> <title>...</title> <link rel="stylesheet" type="text/css" href="/media/css/ style.css"> <script language="javascript">  </script> </head> Lo script contiene una funzione che consente il cambio di stile, controllato attraverso il valore del tasto di selezione. In particolare se la selezione è impostata sul valore "0" non verrà effettuato nessun cambio di stile, cioè non verrà modificato il riferimento nel tag <link>. Se invece il tasto di selezione assume altri valori lo script si occuperà di associare il valore selezionato al foglio di stile appropriato e di cambiare il riferimento nel tag <link>, consentendo l'immediata modifica nella visualizzazione della pagina. Nel codice html della pagina di inserimento di una nuova ricetta, inoltre, abbiamo inserito un altro piccolo script che ci è servito per la gestione dell'inserimento degli ingredienti.

4 <script type="text/javascript">  </script> Grazie a Javascript acquisiamo gli ingredienti direttamente nella textarea senza dove ricaricare la pagina ad ogni inserimento; il contenuto della textarea viene salvato tutto in una stringa che alla pressione del tasto Aggiungi verrà splittata per ricavarne i dati che popoleranno il database. Infine un ulteriore utilizzo della tecnologia Javascript, nella pagina di inserimento dei dati dell'utente: <script language="javascript"> <!-- function checkpass() if (document.registrazione.username.value) if ((document.registrazione.password.value!= "") && (document.registrazione.password.value == document.registrazione.ripassword.value)) return true; else alert("la password non puo' essere vuota e dev'essere ripetuta correttamente\n\nriprova!"); document.registrazione.password.style.backgroundcolor = 'red'; document.registrazione.ripassword.style.backgroundcolor = 'red'; document.registrazione.username.style.backgroundcolor = ''; return false; else

5 alert("e' necessario inserire un nome utente"); document.registrazione.password.style.backgroundcolor = ''; document.registrazione.ripassword.style.backgroundcolor = ''; document.registrazione.username.style.backgroundcolor = 'red'; return false; //--> </script> Questo script consente di gestire più efficacemente gli errori in inserimento sia del nome utente che della password e della ripetizione della password. DJANGO: STRUMENTO REALIZZATIVO Django è un framework open source per lo sviluppo di applicazioni Web, scritto in linguaggio Python, seguendo il pattern Model-View-Controller. Facilita la realizzazione di siti web dinamici, dove per sito web dinamico non si intende il semplice collegamento tra documenti html posizionati su un server; al contrario, ogni pagina è generata da una applicazione web creata dallo sviluppatore. Django si occupa principalmente di: associare quale codice viene eseguito per ogni richesta url (ad esempio per questo url "/users/tom/" esegui il codice che mostra il profilo dell'utente Tom); facilitare la visualizzazione, gestione e ricaricamento nell'html (gestione dei form); convertire i dati di input inviati dall'utente in strutture che possono essere manipolate più appropriatamente; attraverso il sistema dei template separare l'html che varia frequentemente da quello che permane in ogni pagina; integrarsi perfettamente con i database anche se non è strettamente necessario utilizzarli. rendere il lavoro molto produttivo alzando il livello di astrazione, senza però impedire l'utente di gestire parti di codice con i metodi tradizionali. L'orientamento che ha Django nella gestione dei siti è evidente nel suo design, poiché fornisce un certo numero di funzionalità che facilitano lo sviluppo rapido di applicazioni per la gestione di contenuti. Per esempio, invece che richiedere sviluppatori per la realizzazione di controllers e views per aree di amministrazione di un sito, Django fornisce una soluzione integrata di amministrazione dei contenuti che può essere inclusa come parte di ogni sito basato su Django e che può gestire molti siti Django da una unica installazione. L'applicazione per l'amministrazione permette di creare, aggiornare e eliminare contenuti rappresentati da oggetti tenendo traccia di tutte le operazioni effettuate e fornisce un'interfaccia per la gestione di utenti e gruppi di utenti (inclusa la gestione dei permessi). Altre funzionalità incluse: astrazione del database relazionale ad oggetti; possibilità di installare funzionalità "plug-in"; una robusta API per la gestione del database; un sistema di "view generiche" che permette di saltare la stesura di codice per determinati casi comuni; un sistema di template basato su tag con ereditarietà dei template; un gestore di URL basate su espressioni regolari; un sistema "middleware" per lo sviluppo di funzionalità aggiuntive; ad esempio, componenti middleware che forniscono caching, compressione dell'output, normalizzazione dell'output, protezione CSRI e supporto per la sessione sono inclusi nella distributione principale di Django; supporto per internazionalizzazione, incluse traduzioni della interfaccia amministrativa in svariate lingue; documentazione accessibile dall'interfaccia amministrativa (compresa documentazione automaticamente generata dai modelli e librerie template aggiunte dalle applicazione). Per quanto riguarda il server Django è supportato dal server HTTP Apache se questo include mod_python, o sotto qualsiasi server web WSGI. Django include la possibilità di lanciare un server FastCGI, permettendone l'uso da qualsiasi server che supporta FastCGI. I seguenti database sono supportati ufficialmente da Django:

6 PostgreSQL MySQL SQLite Il supporto per Microsoft SQL Server e Oracle è sperimentale e in via di sviluppo. MODEL VIEW CONTROLLER L'architettura MVC consente al codice di accesso ai dati di rimanere separato dal codice di gestione e dal codice dell'interfaccia utente. Il Model è il cuore dell'applicazione: definisce i dati e le operazioni che possono essere eseguiti su essi. Può inoltre avere la responsabilità di notificare eventuali modifiche dei dati ad altri componenti software registrati. La View è la rappresentazione grafica dei dati a video (GUI). Registrandosi presso il Model, la View può mantenere la rappresentazione dei dati sempre aggiornata. Il Controller ha la responsabilità di gestire l'input prodotto dall'utente e interpretarlo eseguendo azioni sul Model e/o sulla View (il Controller, in altre parole, implementa la logica di controllo dell'applicazione). Django è influenzato pesantemente dalla filosofia di sviluppo Model-View-Controller, ma segue un particolare paradigma di sviluppo: ad esempio, ciò che sarebbe chiamato il "controller" in un "vero" framework MVC è chiamato, in Django, "view", e ciò che dovrebbe essere chiamato "view" è chiamato "template". SCHEMA GENERALE DEL NOSTRO PROGETTO Dallo schema generale in copertina si possono vedere tutti i componenti del progetto, che interagiscono attraverso Django. Una volta installato, Django deve essere configurato attraverso la specificazione nel file "settings.py" di tutti i parametri necessari al corretto funzionamento del programma, come ad esempio i riferimenti al database di supporto utilizzato. Il database utilizzato nel progetto è "sqlite3" e Django si occupa automaticamente della gestione delle tabelle; l'unico compito dell'utente è quello di creare delle classi contenenti le specifiche dei campi e salvarle in un file chiamato "models.py". Vediamo un esempio: class Recipe(models.Model): name = models.charfield(maxlength = 100) user = models.foreignkey(user) category = models.foreignkey(category) time_required = models.integerfield() easy = models.integerfield() calories = models.integerfield() rates = models.integerfield() preparation = models.textfield() wine = models.charfield(maxlength = 150) cuisine = models.foreignkey(cuisine) class Admin: pass def str (self): return self.name Questa classe definisce l'oggetto Ricetta elencando i vari campi e la loro tipologia, in particolare notiamo la definizione delle chiavi esterne "models.foreignkey(category)" con il riferimento alla classe da relazionare. Per quanto riguarda le chiavi primarie esse sono definite automaticamente da Django. Per generare le tabelle nel database partendo appunto dalle classi create in "models" è necessario eseguire il comando: :~$ python manage.py syncdb La componente "models" dello schema di Django quindi contiene tutte le classi relative alla gestione del database, e infatti si interfaccia con "sqlite3". Inoltre fa da collegamento con un'altra importante componente, chiamata "views", che viene gestita nel file "view.py". Esso contiene tutta una serie di funzioni che vengono invocate richiamando l'url alla quale sono associate. La lista delle associazioni è contenuta nel file "urls.py".

7 Vediamo un esempio di view: def view_recipe(request, pk): r = Recipe.objects.get(pk=pk) ingres_obj = Ingredient.objects.filter(recipe=pk) comment_obj = Comment.objects.filter(recipe=pk) ingredienti = [] comments = [] media = 0 for i in ingres_obj: ingredienti.append("quantity": i.quantity, "name": i.name) for i in comment_obj: comments.append("date": i.date, "user": i.user, "text": i.text) context = 'nomericetta': r.name, 'nomeautore': r.user, 'categoriaricetta': r.category, 'areageografica': r.cuisine, 'ingredients': ingredienti, 'preparazione': r.preparation, 'tempo': r.time_required, 'facilita': r.easy, 'calorie': r.calories, 'vino': r.wine, 'voti': r.rates, 'media': media, 'comments': comments return render_to_response('view_recipe.htm', context) Osservando anche la riga relativa a questa funzione nel file "urls.py": (r'^view_recipe/(?p<pk>\w+)/?$', 'cookland.ricettario.views.view_recipe') si capisce l'associazione tra la pagina html "view_recipe" invocata dall'utente durante la visualizzazione del sito, e la funzione "view_recipe", che consente di visualizzare i dati di una determinata ricetta, indentificata da "pk". Inizialmente viene assegnato alla variabile "r" l'intero oggetto "Recipe" (la cui chiave primaria coincide con "pk") presente nel database; si creano poi altre due variabili di tipo vettore contenenti rispettivamente la lista di ingredienti e di commenti associati alla ricetta attraverso la foreign key. Queste due liste vengono trasformate in dizionari per riuscire a gestire più efficacemente i dati. L'output restituito dalla funzione, cioè i dati della ricetta da visualizzare, viene restituito attraverso la variabile "context" di tipo dizionario; essa contiene tutti i campi presenti nell'oggetto "r" a cui vanno aggiunti i due dizionari creati dalle tabelle correlate "ingredienti" e "commenti". La funzione predefinita di Django "render_to_response" restituisce la pagina "view_recipe.html" completandola con i dati presenti in "context". Ogni singolo campo del dizionario viene interpretato come una variabile il cui valore verrà sostituito nell'apposito spazio definito nel codice html della pagina. Questa è una delle potenzialità maggiori di Django, e ci introduce ad un'altra componente fondamentale: i "templates". La gestione dei template avviene inserendo nel codice html delle pagine del sito dei blocchi o delle variabili che Django interpreterà automaticamente sostituendovi il valore corretto per la situazione specifica. Nel caso delle variabili ne abbiamo appena visto l'utilità con la funzione "view_recipe": nel codice html della pagina restituita sono presenti le variabili identificanti i dati della ricetta, che Django si occuperà di individuare e di assegnar loro il valore passato dalla funzione "render_to_response". Vediamo un estratto di codice html della pagina "view_recipe.html": <h1> Nome Ricetta:</h1> nomericetta <h4> Nome autore:</h4> <a href="/account/profile/ username "> nomeautore </a> <h4>categoria:</h4> categoriaricetta le variabili identificate dalle doppie parentesi graffe sono gli identificativi del dizionario "context". Django sostituirà nell'html al posto di --- il valore associato all'identificativo, e poi

8 visualizzerà la pagina html così modificata. Per quanto riguarda la gestione dei blocchi nei template facciamo un piccolo riepilogo di come è organizzato il sito: la homepage è costituita da uno scheletro di componenti che rimangono identici su qualunque pagina visualizzata, da una zona riservata al login e dal corpo della pagina in cui verrà inserito il contenuto specifico richiesto. Nel trasportare questa struttura logica in Django abbiamo creato un template base rappresentato dalla pagina "home.html", che verrà di volta in volta estesa con il codice html della pagina in quel momento richiesta. Per far ciò abbiamo identificato le componenti variabili della homepage racchiudendole in blocchi, ad esempio la zona centrale della pagina, adibita alla visualizzazione dei contenuti è diventata: <div class="bd_heart" > % block content % <p id="bd_citazione"> Il gusto, come ogni aspetto della cultura umana, e' un prodotto della storia e si modifica nel tempo, cosi' come e' diverso nello spazio. Scelte, esclusioni, preferenze (non solo in campo gastronomico) caratterizzano gli individui, i popoli, le regioni del mondo; inoltre, esse sono cambiate nel corso dei secoli. </p> % endblock % è stata racchiusa in un blocco % block content% che, richiamando direttamente la "home.html" visualizzerà ciò che contiene, altrimenti se la pagina ad essere richiamata è un'altra ciò che è incluso nel blocco verrà sostituito con il codice all'interno dello stesso blocco presente nella pagina richiesta. Questa sostituzione è resa possibile dal fatto che abbiamo definito le altre pagine come estensione della homepage, per esempio: % extends "home.htm" % % block title % Elenco Ricette % endblock % % block content % <h4> error </h4> % for i in ricette % <a href="/view_recipe/ i.id /" id=" i.id "> i.name </a><br> % endfor % % endblock % rappresenta la pagina "recipe_list.htm" invocata quando si vuole visualizzare una lista di ricette. Notiamo come non ci siano tag html al di fuori dei blocchi, quindi senza Django questa pagina non avrebbe senso. In fase di caricamento Django vede che la pagina è un'estensione di "home.htm" e quindi carica la homepage sostituendo i blocchi "title" e "content" con quelli presenti in questa pagina. Per quanto riguarda la componente "server" di Django abbiamo utilizzato un server di prova per la realizzazione del progetto, successivamente nel momento della eventuale pubblicazione ci si appoggierà a Apache. ESEMPIO DI LOGIN CHE RISPIEGA I CONCETTI SOPRA CITATI % if user.is_authenticated % <h3>welcome user.username!</h3> <div><a href="/account/logout/">logout</a></div> % endif % % if not user.is_authenticated % <form name="login" action="/account/login/" method="post"> <table>

9 <tr> name="username"> </td> </tr> <tr> name="password"> </td> </tr> <tr> type="submit" value="entra"> </tr> </table> </form> % endif % <td> Username </td> <td> <input type="text" size='10' <td> Password </td> <td> <input type="password" size='10' <td colspan="2" align="center"> <input id="button" </td> Questa porzione di codice è relativa alla gestione del form di login. Vediamone alcuni aspetti: innanzitutto si nota come sia un template di Django caratterizzato da due blocchi condizionali che discriminano il codice html da inserire nella pagina in base al fatto che l'utente che fa la richiesta sia loggato oppure no. Nel primo caso verrà inserito un messaggio di benvenuto, nel secondo apparirà il form in cui inserire username e password per autenticarsi. Una volta autenticato gli verranno forniti tutti i privilegi di utente registrato. Vediamo dunque anche la funzione di login definita nelle "views": def login_view(request): if request.post: username = request.post['username'] password = request.post['password'] user = authenticate(username = username, password = password) if user is not None: login(request, user) context = 'user': request.user return HttpResponseRedirect('/recipes/') #return render_to_response('login_form.htm', context, context_instance=requestcontext(request)) else: context = 'error': 'ERRORE: Login Errato' return render_to_response('login_form.htm', context, context_instance=requestcontext(request)) Quando l'utente inserisce la propria combinazione di username e password per loggarsi Django richiama questa funzione: dapprima vengono memorizzati i valori inseriti e tramite la funzione "authenticate" predefinita da Django si effettua una ricerca dell'utente nel database e si assegna il valore restituito alla variabile "user". Se il valore è "None" la funzione ritornerà un messaggio di errore nel login, altrimenti richiamerà una funzione predefinita di Django, "login", che andrà a settare a True il campo "is_authenticated" (anch'esso predefinito) nell'oggetto "user" individuato. Questo campo verrà poi controllato ad ogni accesso dal blocco if del template html sopra descritto, e varrà True se l'utente era stato in precedenza autenticato, False in caso contrario. Da sottolineare che Django non salva le password in chiaro ma le cripta utilizzando algoritmi di crittografia. CONCLUSIONI In conclusione, tutte queste tecnologie, superato l'assestamento del dispendioso apprendimento (in termini di tempo ed energie) e varcata la soglia del primo utilizzo, risultano considerevolmente vantaggiose. Di grande aiuto, si è rivelata la vasta documentazione disponibile sui siti ufficiali di ognuna di esse.

10 BIBLIOGRAFIA "HTML Guida per il programmatore" edizione Wrox/Apogeo