FACOLTÀ DI INGEGNERIA
LAUREANDO: RELATORE:
Marco Cella Prof. Maurizio Fermeglia
Introduzione .......................................................................................................................... 6
Azienda ....................................................................................................................... 7
4 Strumenti ...................................................................................................................... 21
4.1 Framework Javascript ..................................................................................... 21
4.2 Prototype Framework ...................................................................................... 22
3
Sommario
6 Conclusioni .............................................................................................................. 40
Bibliografia ............................................................................................................................ 41
4
5
Introduzione
6
Introduzione
Azienda
La società S.b.s. Servizi Professionali nasce nel 1980 su iniziativa del Gruppo Savio
come società di gestione servizi (SGS) per tutte le Aziende del gruppo; nel 1998 si è resa
autonoma dal gruppo Savio.
L’estratto precedente riassume i concetti chiave che l’azienda vuole proporre ai propri clienti;
in particolare esprime la necessità per l’azienda di adattarsi alle esigenze di mercato,
proponendo soluzioni adeguate ad ogni richiesta: queste caratteristiche impongono di dover
spaziare tanto nel campo delle tecnologie proprietarie, quanto nel mondo delle tecnologie
open-source.
La scelta di una linea di strumenti open source è motivata dalla necessità di essere
svincolati, per la parte client, dalla piattaforma di implementazione delle procedure create. La
scelta può essere anche motivata dalla necessità di non caricare il cliente di spese
aggiuntive riguardanti le licenze di prodotti di terze parti, inoltre dalla possibilità di effettuare
un lavoro di ricerca sui difetti che l’approccio open source può comportare.
• Prodotti software
Gli strumenti di navigazione fra risorse, come nel caso del progetto della gestione delle
Distinte Base, meno sono vincolati all’ambiente di utilizzo, più facilmente possono essere
utilizzati e riproposti in qualsiasi ambiente cliente, in modo da poter soddisfare le richieste
provenienti da un mercato molto vario.
7
1 Programmazione della produzione
9
Capitolo 1 – Programmazione della Produzione
10
2 Analisi di Progetto
2.1 Vincoli
• DBMS Informix 10.0
• Linguaggio Server side PHP
• Applicazione web Intranet
11
Capitolo 2 – Analisi di Progetto
12
3 Progettazione della base dati
Si vuole realizzare una base dati per la gestione di distinte base relative a forniture di
mobili per navi da crocera.
Le distinte base sono costituite dalla testata e dalla descrizione dell’articolo; i semilavorati
possiedono le caratteristiche delle distinte base ed inoltre sono componenti di una distinta
base; le materie prime sono componenti della distinta base. Distinte base e componenti
hanno associata la descrizione dell’articolo corrispondente.
3.2 Requisiti
Attraverso una serie di interviste, i requisiti sono stati strutturati in frasi, suddivise per
concetti:
13
Capitolo 3 – Progettazione della base dati
Per ogni distinta base si devono memorizzare le caratteristiche del prodotto: i costi,
le date e le informazioni necessarie ai vari operatori.
Ogni Distinta Base presenta una serie di lavorazioni, caratterizzate ognuna da una
sigla, una descrizione, una macchina, ed ulteriori dati necessari per descrivere la
lavorazione.
14
Capitolo 3 – Progettazione della base dati
1. Predisporre una o più entità per la raccolta dei dati relativi le distinte base e i componenti.
Si possono raccogliere gli attributi comuni delle entità Distinta Base e Componente, e
procedere alla definizione di una generalizzazione chiamata Articolo.
2. Le informazioni della distinta base non contenute nell’entità Articolo sono contenute
nell’entità Testata. Le righe della distinta base sono definite dalla relazione N-M tra
l’entità Testata e l’entità Articolo; lo stesso articolo può presentare più occorrenze nella
relazione.
3. Si definisce l’entità Lavorazione, che raccoglie le classi di lavorazioni sulle distinte base;
si definisce inoltre una relazione N-M tra l’entità Testata e l’entità Lavorazione: ogni
Distinta Base può subire più lavorazioni e lo stesso tipo di Lavorazione può essere
associato a più Distinte Base.
15
Capitolo 3 – Progettazione della base dati
Sono riportati nello schema solo gli attributi, delle entità e delle relazioni, utili per
comprendere la soluzione adottata.
16
Capitolo 3 – Progettazione della base dati
Articolo
sigla Identificativo dell’articolo, in formato stringa
descrizione Descrizione dell’articolo
codice_barre Stringa corrispondente al codice a barre
Testata
Id Identificativo della distinta base
sigla Sigla della distinta base
In_uso Booleano che indica se la distinta base è attiva
Lavorazione
sigla Identificativo della lavorazione, in formato stringa
descrizione Descrizione della lavorazione
macchina Stringa corrispondente la macchina usata
17
Capitolo 3 – Progettazione della base dati
Forme di ridondanza
Sembra utile prevedere l’inserimento di un attributo “sigla” nell’entità Testata, in modo
che si realizzi una relazione 1-N tra l’entità Articolo e l’entità Testata; come si può prevedere
ci si troverà in presenza di un ciclo, in quanto è già presente una relazione N-M tra le entità
Testata ed Articolo; questo attributo permetterà di semplificare le interrogazioni tra l’entità
Testata e l’entità Articolo.
18
Capitolo 3 – Progettazione della base dati
19
4 Strumenti
Lo studio degli strumenti da utlizzare per l’applicativo ha portato alla scelta di PHP
come linguaggio Server side e, nella parte client è stato utilizzato il Framework JavaScript
Prototype. JavaScript è un linguaggio compatibile con la maggior parte dei browser, standard
e di facile utilizzo, ma allo stesso tempo orientato agli oggetti.
Gli script stand-alone portano con se’ il vantaggio di essere più leggeri rispetto i
framework, con la possibilità di inserire nella pagina solo le funzionalità strettamente
necessarie; per contro tuttavia non sono presenti funzionalità avanzate ed una compatibilità
coss-browser completa.
I framework permettono invece performance di alto livello ed una maggiore scelta di
funzionalità pronte per l’uso.
20
Capitolo 4 – Strumenti
Metodo Descrizione
$ usato come alias di document.getElementById, permette di
accedere all’elemento html
$(‘elemento_html’).setStyle Modifica le proprietà dello stile CSS dell’elemento html
Ajax.Updater(‘container’, url) Gestisce l’interazione Ajax con il server, rendendo
trasparente allo sviluppatore l’oggetto XMLHttpRequest
Ajax.Request Permette di gestire appieno i dati scambiati e le callbacks
Ajax; prototype mette a disposizione la funzione evalJSON
che permette di valutare il contenuto di
Ajax.Response#responseText quando il content-type del
documento ritornato dal server è impostato in
“application/json”
Protoype estende Javascript nella gestione degli Array, le Classi, gli Eventi applicati agli
oggetti e alla pagina, i Form e gli Eventi sui Form, gli Oggetti, i Tipi di dati.
Dal sito ufficiale di prototype è reperibile la documentazione completa delle API.
21
Capitolo 4 – Strumenti
Libreria Descrizione
Prototype 1.6.1 Framework JavaScript
Script.aculo.us v1.7.0 Libreria JavaScript che estende gli effetti grafici
TafelTree v.1.9.1 Struttura ad albero
TableOrderer Struttura tabellare; implementa l’ordinamento per colonna, il
v.1.2.20090611 filtro delle righe e la paginazione dei risultati
LiveValidation 1.3 Validazione dei form
Ajax Autocomplete v.1.0.3 Autocompletamento tramite Ajax di campi text dei form html
JSON Libreria PHP che implementa le funzioni di encoding e
decoding per il formato JSON
4.3.1 Scriptaculous
Scriptaculous è una libreria JavaScript che permette di estendere la funzionalità della
user interface del sito web, in particolare gestisce effetti grafici quali fade e drag and drop,
applicati agli oggetti DOM della pagina web. La libreria si appoggia al framework JavaScript
Prototype. Scriptaculous non è composto da un’unico file JavaScript monolitico, ma permette
di scegliere i moduli della libreria da caricare: rapidità e leggerezza le caratteristiche di
questa modalità.
4.3.2 TafelTree
TafelTree è uno script JavaScript open source che implementa la visualizzazione e la
gestione di una struttura ad albero. Caratteristica dello script è la possibilità di usufruire del
formato dati JSON nella fase di creazione dell’albero; rende disponibili funzioni quali drag
and drop, edit ed eliminazione dei nodi dell’albero in run-time, inoltre permette il caricamento
asincrono dei livelli dell’albero tramite la tecnologia web Ajax.
22
Capitolo 4 – Strumenti
4.3.3 TableOrderer
Lo script TableOrderer permette di creare una struttura tabellare tramite request Ajax
ad uno script PHP che restituisce i dati in formato JSON.
Lo script implementa l’ordinamento delle righe per colonna, il filtro globale o per colonna e la
paginazione dei risultati. Lo script è corredato di un foglio di stile.
Opzioni
Data Array di dati
url Indirizzo dello script PHP che restituisce i dati
unsortedColumn: [ ] Array di colonne in cui non deve essere implementato il sort
paginate Mostra paginazione. Opzioni: false | top | bottom
pageCount Numero di righe per pagina
search Mostra il campo ricerca. Opzioni: false | top | bottom
23
Capitolo 4 – Strumenti
4.3.4 LiveValidation
Questo script permette di validare a livello JavaScript i form; consente perciò di
verificare i dati del form prima di procedere con la richiesta Ajax. Attraverso il metodo
“massValidate” della classe LiveValidation è possibile testare se tutti i campi del form
rispettano le regole stabilite.
Le regole, specificatamente per gli elementi Input Text, comprendono il controllo della
presenza ed il formato della stringa, inoltre la verifica del tipo di dato Number e della
lunghezza della stringa.
4.4 JSON
JSON è un semplice formato per lo scambio di dati, si basa su un sottoinsieme del
Linguaggio di Programmazione JavaScript, Standard ECMA-262 Terza Edizione - Dicembre
1999.
JSON è un formato di testo completamente indipendente dal linguaggio di programmazione,
ma utilizza convenzioni conosciute dai programmatori di linguaggi della famiglia del C; JSON
è basato su due strutture: un insieme di coppie nome/valore ed un elenco ordinato di valori,
realizzato come una struttura array. In PHP è necessario includere una libreria che metta a
disposizione le funzioni di encode e decode per gli oggetti JSON.
24
Capitolo 4 – Strumenti
JSON viene spesso utilizzato in sostituzione di XML nelle Ajax Request in Javascript,
per la comunicazione tra server e client. Quando viene inviata la response del server al
client, è necessario settare il parametro content-type della pagina come “application/json”,
nel qual caso il corpo del documento passato al client (body) contiene l’oggetto JSON, in
caso contrario è l’Header della pagina a contenere l’oggetto JSON. Il campo Header non
supporta lo scambio di notevoli quantità di informazioni, è necessario dunque usufruire del
campo body del documento.
Il Framework Prototype offre supporto per encoding e parsing degli oggetti JSON: i metodi
toJSON() ed evalJSON() supportano oggetti e tipi di dati (Number, String, Array, Hash,
Date).
La figura seguente mostra come si legano le parti dello schema MVC in un’applicazione web
comune.
25
Capitolo 4 – Strumenti
26
5 Applicazione Web
5.1 Interfaccia
Prima di entrare nei dettagli dell’implementazione del software è necessario definire il
layout adottato, in accordo con i requisiti stabiliti a priori riguardo l’applicativo.
Organizzare i dati provenienti dalle distinte base in una struttura ad albero permette
l’utente di reperire agevolmente le informazioni, spostarsi nei livelli dell’albero ed effettuare
operazioni sulla struttura (drag and drop, modifica, cancellazione). Tuttavia una struttura ad
albero risulta funzionale quando le informazioni visualizzate per ogni nodo sono limitate; ciò
vuol dire che ogni nodo dell’albero dovrà avere un contenuto minimale, rendendo quindi
necessario l’uso di una maschera separata per tutte le altre informazioni. Questo nuovo
requisito impone dunque una scelta per organizzare i vari elementi nella pagina. Per rendere
il software accessibile è necessario implementare una struttura a schede in una sezione
separata, contenente le informazioni relative i nodi dell’albero.
Nella Tabella 9 vengono riportate le informazioni richieste per ogni nodo dell’albero,
catalogate per tipologia di nodo.
27
Capitolo 5 – Applicazione Web
Nodo Informazioni
La tabella 10 illustra gli elementi da rendere visibili, per ogni scheda, a seconda del nodo
selezionato; le schede devono essere accessibili dalla sezione “menu”.
28
Capitolo 5 – Applicazione Web
29
Capitolo 5 – Applicazione Web
5.3.1 TafelTree
La classe TafelTree viene istanziata ad ogni refresh della pagina iniziale. L’oggetto
TafelTree viene inizializzato con la stringa JSON contenente la struttura dell’albero, definito
tramite response Ajax da uno script PHP su server. La stringa JSON a livello PHP viene
creata applicando il metodo encode della classe JSON al vettore dati contenente le proprietà
dei nodi, chiamati branch.
30
Capitolo 5 – Applicazione Web
Vengono elencate di seguito le strutture delle istanze a livello JavaScript, con le relative
proprietà, per l’albero TafelTree e per i nodi (branch) dell’albero.
TafelTreeManager.setKeys( array_tasti_azione );
</script>
Sono riportate nella Tabella 13 le funzioni JavaScript richiamate dagli eventi sull’albero
TafelTree.
31
Capitolo 5 – Applicazione Web
Una precisazione sulla funzione “branch_padre”: nella situazione in cui dalla scheda “Distinta
Base” si selezioni una riga della tabella “righe distinta base”, viene attivato il form di modifica
dell’elemento della distinta base. Nel form è presente un checkbox con cui è possibile
abilitare la selezione dell’id di una nuova distinta base, selezionando il branch opportuno
dall’albero TafelTree.
5.3.2 TableOrderer
Questo script viene utilizzato nella scheda “Distinta Base” per visualizzare le righe
della distinta base e nella scheda “Lavorazioni” per visualizzare le lavorazioni associate alla
distinta base.
Lo script deve ricevere come parametro il nome dello script php che restituisce la
stringa JSON contenente la descrizione del contenuto della tabella da creare.
Lo script implementa l’ordinamento delle righe per colonna, il filtro globale o per
colonna e la paginazione dei risultati. Per entrambe le tabelle è stata inserita una colonna
“Seleziona”, in cui per ogni riga è presente una checkbox per l’operazione di selezione delle
righe della tabella da eliminare; inoltre è stata abilitata l’operazione di selezione di tutte le
checkbox della tabella tramite l’evento click nell’intestazione della colonna “Seleziona”.
32
Capitolo 5 – Applicazione Web
Lo script è stato esteso per associare l’evento di ordinamento delle colonne della
tabella alle righe della distinta base dell’albero TafelTree.
5.3.3 LiveValidation
Questo script è stato utilizzato per la validazione dei form “intestazione distinta base”,
“elemento della distinta base”, “articolo relativo la distinta base”, “lavorazione della distinta
base”. Per ogni form sono stati inseriti diversi controlli, in particolare il controllo di presenza
della stringa nel campo di testo, la lunghezza della stringa ed il controllo relativo il formato
numerico.
33
Capitolo 5 – Applicazione Web
Nel seguito vengono riportati gli script PHP relativi le interrogazioni al database per la
definizione della struttura ad albero TafelTree.
5.4.1 Interrogazione.php
Questo script restituisce la stringa JSON contenente i dati relativi l’albero TafelTree.
Nel seguito viene riportato il relativo codice.
1 <?
2 header("Content-Type: application/json"); // tipo di documento
3 include_once ('JSON.php');
4 include_once('lib/lib.inc.php'); // libreria di connessione al database
5 $query="select id_num_d_b, id_descrizione, id_art_dist from dii where
id_in_uso='S' and id_art_dist like '".$_POST['s']."%'";
6 $res=ifx_db_sel($query);
7 $i=0;
8 while($line = ifx_fetch_row($res)) {
9 $query2 = "select count(*) as tot from dir where
rd_art_com='".$line['id_art_dist']."'";
10 $res2=ifx_db_sel($query2);
11 $line2 = ifx_fetch_row($res2);
12 if($_POST['s']!="") {
13 $query_n = "select count(*) as tot from dii, dir where
rd_art_com='".$line['id_art_dist']."' and id_num_d_b=rd_num_d_b
and id_art_dist like '".$_POST['s']."%'";
14 $res_n = ifx_db_sel($query_n);
15 $line_n = ifx_fetch_row($res_n);
16 }
17 if($line2['tot']==0){
18 $num_art = trim($line['id_num_d_b']);
19 $desc_art = trim($line['id_art_dist']);
20 $vettore_dati[$i]['id']=$num_art;
21 $vettore_dati[$i]['descrizione']=$line['id_descrizione'];
22 $vettore_dati[$i]['id_num_d_b']=$num_art;
23 $vettore_dati[$i]['txt'] = $desc_art;
24 $vettore_dati[$i]['value']=$desc_art;
34
Capitolo 5 – Applicazione Web
25 $vettore_dati[$i]['editable'] = true;
26 $vettore_dati[$i]['ondropajax'] = "mydrop";
27 $vettore_dati[$i]['droplink'] = "drop_branch.php";
28 $vettore_dati[$i]['acceptdrop']=true;
29 $vettore_dati[$i]['canhavechildren']= true;
30 $vettore_dati[$i]['onopenpopulate'] = myOpenPopulate;
31 $vettore_dati[$i++]['openlink']=
"interrogazione_figli.php?id=".$num_art;
32 }
33 }
34 // Elemento contenitore
35 $vettore_finale[0]['txt'] = "";
36 $vettore_finale[0]['id'] = 0;
37 $vettore_finale[0]['items'] = $vettore_dati;
38 $json = new Services_JSON(); // oggetto json
39 $spedisci_browser = $json->encode( $vettore_finale );
40 die($spedisci_browser); // spedisci oggetto con Ajax response
41 ?>
Nella riga 5 è presente la query di interrogazione al database per la ricerca di tutte le Distinte
Base, mentre alla riga 13 viene verificato, attraverso una seconda query, se la Distinta Base
è un semilavorato. In caso affermativo, questo componente non deve essere presente nel
primo livello della struttura ad albero.
5.4.2 interrogazione_figli.php
Lo script restituisce la stringa JSON contenente i dati relativi i figli della Distinta Base
passata come parametro POST.
1 <?
2 header("Content-Type: application/json"); // tipo di documento
3 include_once ('JSON.php');
4 include_once('lib/lib.inc.php'); // libreria di connessione al database
5 $rd_num_d_b = $_GET['id'];
6 $query="select rd_art_com, rd_num_riga, rd_quantita from dir where
rd_num_d_b=".$rd_num_d_b." order by rd_num_riga";
$res=ifx_db_sel($query);
7 $i=0;
8 while($line = ifx_fetch_row($res)) {
9 $desc_art = trim($line['rd_art_com']);
10 $vettore_dati[$i]['txt'] = $desc_art;
11 $vettore_dati[$i]['value']=$desc_art;
12 $vettore_dati[$i]['rd_num_riga'] = $line['rd_num_riga'];
13 $vettore_dati[$i]['rd_quantita'] = $line['rd_quantita'];
14 $vettore_dati[$i]['editable'] = true;
15 $vettore_dati[$i]['last'] = true;
16 $vettore_dati[$i]['ondrop'] = "mydrop";
35
Capitolo 5 – Applicazione Web
17 $vettore_dati[$i]['onedit'] = "edit_branch";
18 $query2="select id_num_d_b, id_descrizione from dii where
id_art_dist='".$line['rd_art_com']."'";
19 $res2=ifx_db_sel($query2);
20 if($line2 = ifx_fetch_row($res2)){
21 $id_num_d_b = $line2['id_num_d_b'];
22 $vettore_dati[$i]['txt'] = $desc_art;
23 $vettore_dati[$i]['id'] = $id_num_d_b;
24 $vettore_dati[$i]['id_num_d_b'] = $id_num_d_b;
25 $vettore_dati[$i]['descrizione'] = $line2['id_descrizione'];
26 $vettore_dati[$i]['acceptdrop'] = true;
27 $vettore_dati[$i]['canhavechildren'] = true;
28 $vettore_dati[$i]['onopenpopulate'] = myOpenPopulate;
29 $vettore_dati[$i++]['openlink'] = "interrogazione_figli.php?id =
".$id_num_d_b."&riga=".$line['rd_num_riga'];
30 }else{
31 $vettore_dati[$i]['id'] = $rd_num_d_b."_".$line['rd_num_riga'];
32 $vettore_dati[$i++]['id_num_d_b'] = $rd_num_d_b;
33 }
34 }
35 $json = new Services_JSON(); // oggetto json
36 $spedisci_browser = $json->encode( $vettore_dati );
37 die($spedisci_browser); // spedisci oggetto con Ajax response
38 ?>
Nella riga 6 è presente la query di interrogazione per ricavare le informazioni dei figli della
Distinta Base specificata nel paramentro GET. Alla riga 18 invece si verifica se ogni
componente è un semilavorato oppure una materia prima; nel primo caso si deve rendere
noto alla struttura ad albero della necessità di prevedere un livello inferiore.
36
Capitolo 5 – Applicazione Web
37
Capitolo 5 – Applicazione Web
Figura 7: Elemento selezionato dalla tabella “righe distinta base” nella scheda “Distinta Base”
38
6 Conclusioni
Il problema della gestione delle Distinte Base può essere risolto in modo certamente
più veloce e performante senza l’utilizzo di una piattaforma web; l’applicazione ha tuttavia
evidenziato dei buoni risultati in termini di utilizzabilità e di risposta. Riguardo gli strumenti
utilizzati, alcuni script hanno richiesto un lavoro di adattamento al problema considerato.
In questo lavoro di tesi si è cercato di accentuare quali siano i vantaggi e gli svantaggi
dello sviluppo di un progetto web riguardante nello specifico il problema della gestione delle
distinte base. Punto a favore della tecnologia web deve essere considerato l’aspetto cross-
platform, inoltre la possbilità di usufruire di tecnologie già integrate nell’elaboratore:
JavaScript, Browser web. Gli svantaggi più evidenti riguardano la maggiore complessità del
progetto, la mancanza di IDE completi e la riduzione delle performance, associato all’uso del
protocollo HTTP e del linguaggio PHP.
40
Bibliografia
Riferimenti bibliografici
Riferimenti web
www.json.org
www.prototypejs.org
http://script.aculo.us/
http://tafel.developpez.com
http://prototools.negko.com/demo/tableorderer/
www.livevalidation.com
www.html.it
41