Progetto ittorario Anno scol

Transcript

1 PROGETTO ittorario Scopo: Creazione di una pagina web che mostri l orario di un docente, della classe della materia o dell aula a discrezione dell utente. Sviluppatori: Progetto sviluppato dalla classe 4IT-A dell Istituto Tecnico Tecnologico M. Buonarroti Trento con la supervisione dei docenti Michele Boschello e Gianvittorio Dal Prà. Data di inizio progetto: ottobre 2013 Data di fine progetto: marzo 2014 SOMMARIO: 1. Progettazione della base di dati e fasi preliminari; 2. Creazione database Access di appoggio e query di normalizzazione; 3. Creazione dell interfaccia web; 4. Formattazione dell interfaccia web tramite foglio di stile. Indice delle figure: FIGURA 1: CREAZIONE DELLA FONTE DATI (DNS) PER CONNETTERSI AL SERVER LOCALE. PAG. 2 FIGURA 2: MACRO DI AUTOMATIZZAZIONE DEL PROCESSO DI CREAZIONE E POPOLAZIONE TABELLE. PAG. 3 FIGURA 3: LA MASCHERA DA CUI L'UTENTE SI INTERFACCIA AD ACCESS PER IMMETTERE I NUOVI DATI. PAG. 3 FIGURA 4: SCHEMA DELLA PAGINA WEB DI RICERCA. PAG. 4 FIGURA 5: VERSIONE DEFINITIVA DELLA PAGINA WEB DI RICERCA. PAG. ERRORE. IL SEGNALIBRO NON È DEFINITO. 1

2 1. Progettazione della base di dati e fasi preliminari Per prima cosa abbiamo analizzato il problema propostoci e abbiamo individuato tramite modello E/R una prima bozza di base di dati che abbiamo in seguito implementato tramite modello logico e relazionale. La struttura della base di dati per quanto riguarda il modello E/R è una stella al cui centro viene messa la relazione insegnamento a cui sono collegate tutte le altre relazioni dello schema. Nel modello logico quindi la relazione insegnamento diventa una tabella i cui campi sono chiavi esterne che vengono messe in relazione con le chiavi primarie di tutte le altre tabelle. Una volta reso definitivo lo schema principale abbiamo creato lo script MySQL di creazione del database creando le tabelle giorno, orario, materia, docente classe, aula e insegnamento. In seguito è stato scritto lo script di popolazione delle relazioni giorno e orario, poiché i campi di queste ultime due tabelle contengono dati che sono costanti durante tutto l anno, come il giorno e le ore di inizio lezione. Figura 1: Schema relazionale del database 2. Creazione database Access di appoggio e query di normalizzazione Durante la fase iniziale dello sviluppo, la base di dati è stata creata appoggiandosi al server locale (localhost), per poi esser in seguito spostata su server remoto. Per quanto riguarda l importazione, la manipolazione e l esportazione su server remoto dei dati abbiamo utilizzato il Software Access, molto utile poiché permette di lavorare sui dati in maniera relativamente semplice anche quando si eseguono procedure molto complesse. Tramite Access abbiamo prima riordinato i dati in maniera tabellare e in seguito tramite alcune Figura 2: Creazione della fonte dati (DNS) per connettersi al server 2 locale.

3 query di normalizzazione abbiamo organizzato le informazioni in modo da poter essere caricate sulla base dati remota. Per fare ciò abbiamo utilizzato un driver ODBC specifico per MySQL, tramite esso abbiamo potuto così collegare le nostre tabelle in Access con quelle sul database remoto. Dopodiché per poter realmente connetterci al server abbiamo creato una fonte dati (DNS) che si connette all indirizzo IP del database remoto che contiene gli estremi per connettersi al db scuola su MySQL. Per finire abbiamo creato in successione una macro che automatizzasse il processo di creazione e popolazione delle tabelle in Access e in seguito una maschera da cui il software s interfaccia con l utente da cui si sceglie il file sorgente e che in automatico riprende le operazioni della macro mostrando una barra di avanzamento. In questo caso il file da importare è un documento di testo che viene esportato da EDT, il software utilizzato dall istituto per creare l orario scolastico. Figura 2: Macro di automatizzazione del processo di creazione e popolazione tabelle Figura 3: La maschera da cui l'utente si interfaccia ad Access per immettere i nuovi dati 3. Creazione dell interfaccia web Dopo aver progettato, costruito e popolato il database siamo passati alla progettazione dell interfaccia utente della pagina web per la ricerca dell orario in base al tipo di ricerca: docente, aula, classe e materia. Per fare ciò abbiamo utilizzato i linguaggi HTML e PHP. 1 Per quanto riguarda la pagina principale abbiamo previsto un intestazione con il logo della scuola e relativo collegamento ipertestuale di rimando all home page dell istituto. Per quanto riguarda il tipo di ricerca abbiamo preferito un menù a tendina con le possibilità di ricerca e sotto un apposito spazio per inserire la chiave di ricerca. Dietro questa parte grafica abbiamo creato il codice PHP che in base al tipo di ricerca interroga il server sulla base di una richiesta in SQL, i dati ricevuti vengono poi sempre tramite HTML e PHP organizzati in una tabella che rispecchia un orario cartaceo in cui vengono inseriti 1 N.B.: Per motivi di sicurezza la parte di codice PHP è stata omessa, per maggiori informazioni rivolgersi al professor Michele Boschello. 3

4 nome e cognome del docente, la materia insegnata, la classe e l aula. Ogni dato inserito è un link ad un altra pagina che mostra nel caso di un docente l orario della settimana di quel insegnante. Per fare ciò i dati forniti dal server vengono inseriti in un array sul quale si lavora tramite opportune procedure per arrivare al risultato finale, ovvero la stampa a video della pagina orario. Figura 4: Schema della pagina web di ricerca ES. clic INSEGNATE > inserimento della stringa BR > uso CERCA>compaiono i vari risultati es.: Briani, Brio, Broilo ecc. > clicco BRIANI> compare il suo orario> clicco su una classe> compare l orario settimanale della classe ecc. 4. Formattazione dell interfaccia web tramite foglio di stile Dopo aver creato l interfaccia di base tramite HTML E PHP, abbiamo formattato le varie parti tramite un foglio di stile editato in CSS (Cascading Style Sheets). Questo linguaggio permette per l appunto di definire la formattazione di documenti HTML, XHTML e XML. L introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice e una sua più facile manutenibilità. Nel nostro caso il foglio di stile è stato usato per migliorare la grafica dell interfaccia, in particolare la pagina di ricerca ha ricevuto un restyling significativo nella maschera. In un secondo momento sono state apportate delle modifiche grafiche anche alla parte di visualizzazione degli orari. 4

5 Figura 5: Versione finale dell applicazione 5