You are on page 1of 41

UNIVERSITÀ DEGLI STUDI DI TRIESTE

FACOLTÀ DI INGEGNERIA

Corso di laurea in Ingegneria Informatica

PROGETTAZIONE APPLICAZIONE WEB


PER LA GESTIONE DI DISTINTE BASE

LAUREANDO: RELATORE:
Marco Cella Prof. Maurizio Fermeglia

Anno Accademico 2008/2009


Sommario

Introduzione .......................................................................................................................... 6
Azienda ....................................................................................................................... 7

1 Programmazione della produzione ............................................................................. 9


1.1 Distinta Base ..................................................................................................... 9

2 Analisi di Progetto ................................................................................................... 11


2.1 Vincoli ............................................................................................................ 11
2.2 Requisiti espressi in linguaggio naturale ....................................................... 11
2.3 Use Case View .............................................................................................. 12

3 Progettazione della base dati ................................................................................ 13


3.1 Glossario dei termini ...................................................................................... 13
3.2 Requisiti ......................................................................................................... 14
3.3 Analisi dei requisiti ......................................................................................... 14
3.4 Operazioni sui dati ......................................................................................... 15
3.5 Schema Concettuale ..................................................................................... 16
3.5.1 Modello Entity-Relationship ................................................................ 16
3.5.2 Analisi delle entità .............................................................................. 17
3.6 Progettazione Logica ..................................................................................... 18
3.6.1 Ristrutturazione dello schema concettuale ........................................ 18
3.6.2 Traduzione delle entità e relazioni in modello logico .......................... 18
3.6.3 Modello Logico ................................................................................... 19

4 Strumenti ...................................................................................................................... 21
4.1 Framework Javascript ..................................................................................... 21
4.2 Prototype Framework ...................................................................................... 22

3
Sommario

4.3 Librerie e Script ............................................................................................... 23


4.3.1 Scriptaculous .................................................................................... 23
4.3.2 TafelTree .......................................................................................... 23
4.3.3 TableOrderer .................................................................................... 24
4.3.4 LiveValidation ................................................................................... 24
4.3.5 Ajax autoComplete ........................................................................... 25
4.4 JSON .............................................................................................................. 25
4.5 Pattern MVC ................................................................................................... 26

5 Applicazione Web ................................................................................................. 27


5.1 Interfaccia ...................................................................................................... 27
5.2 Elementi html ................................................................................................. 28
5.3 Implementazione degli script ......................................................................... 30
5.3.1 TafelTree ............................................................................................ 31
5.3.2 TableOrderer ...................................................................................... 32
5.3.3 LiveValidation ..................................................................................... 33
5.3.4 Ajax autoComplete ............................................................................. 33
5.4 Script PHP ..................................................................................................... 33
5.4.1 interrogazione.php ............................................................................. 34
5.4.2 interrogazione_figli.php ...................................................................... 35
5.5 Applicazione in esecuzione ........................................................................... 37

6 Conclusioni .............................................................................................................. 40

Bibliografia ............................................................................................................................ 41

4
5
Introduzione

Nell’ambito della programmazione della produzione il problema della gestione delle


Distinte Base svolge un ruolo importante, di particolare rilievo per le fasi di programmazione
dei materiali e di produttività della produzione.

Ogni azienda che intende affrontare un problema di produzione, sia questa


un’azienda di commercializzazione o un’azienda che offre servizi, deve affrontare
l’argomento della programmazione della produzione. Nell’ambito della produttività della
produzione, ampio interesse viene rivolto alla contabilità dei costi, in altri termini del make or
buy dei componenti, in relazione le aspettative del cliente finale. Uno dei tool di raccolta dei
dati nella contabilità dei costi è costituito dalla Distinta Base, grazie alla quale l’azienda
colloca ed individua i materiali necessari per la fabbricazione di un particolare lavoro.
A tal proposito sono spesso richiesti strumenti in grado di visualizzare e gestire la struttura
della Distinta Base. In commercio esistono vari tool per la gestione delle Distinte Base; in
questa tesi si è cercato di verificare se le tecnologie web rappresentino un’alternativa adatta
e conveniente per la gestione delle Distinte Base.

Questo lavoro di tesi ha l’obiettivo di presentare il progetto di una applicazione web


aziendale per la gestione di distinte base su un database di forniture di mobili per navi da
crociera. Il lavoro di tesi riprende il progetto di tirocinio svolto nell’azienda S.b.s. Servizi
Professionali s.r.l. (PN).

Nel primo capitolo si presenta il contesto economico-aziendale del progetto, quindi la


programmazione della produzione e le Distinte Base. Il capitolo 2 sarà dedicato all’analisi del
progetto; nel capitolo 3 si procede con la progettazione della base dati; nel capitolo 4 si
definiscono gli strumenti software utilizzati dall’applicativo; nel capitolo 5 si illustra la
realizzazione del progetto, separando la parte relativa l’interfaccia da quella relativa
l’implementazione; infine il capitolo 6 contiene le conclusioni al lavoro di tesi.

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.

Per comprendere le scelte ed i vincoli che hanno caratterizzato l’applicativo è


necessario inquadrare il contesto in cui si muove l’azienda.

“In un mercato in costante evoluzione, la visione dell’azienda si basa sul continuo


aggiornamento e nella ricerca di soluzioni specifiche ed adeguate.” (http://www.sbssrl.it/)

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.

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

Per programmazione della produzione si intende un processo di predeterminazione


degli obiettivi, delle politiche e delle attività da compiere entro un determinato periodo di
tempo; nella realtà aziendale, questa si è affermata come una metodologia razionale
impiegata nella gestione dell’impresa. il tema centrale dell’attività di programmazione risiede
nell’esigenza di armonizzare le richieste del mercato, espresse da una previsione della
domanda e consolidate in un portafoglio ordini e tramite gli obiettivi di budget, con le
potenzialità del sistema produttivo. La programmazione viene attuata tramite la definizione di
una serie di documenti programmatici relativi alle varie attività gestionali dell’azienda
(marketing, produzione, finanza, ricerca, ecc.).
La programmazione della produzione può essere strutturata in più fasi: pianificazione
strategica della produzione, programmazione aggregata della produzione, programmazione
principale della produzione, programmazione operativa e controllo della produzione,
suddivise per livello di accuratezza dei dati ed il livello di competenza aziendale.

1.1 Distinta base


La Distinta Base (BOM – Bill Of Material) si definisce come un elenco di tutte le
singole parti e componenti che entrano nella fabbricazione di un prodotto, compreso il
numero di ciascuna delle materie prime. Questo documento viene utilizzato per l’acquisto e
poi l’assemblaggio dei pezzi per la produzione di una determinata quantità di prodotti finiti.
Questo documento consente di definire la composizione di un prodotto in termini di
semilavorati e materie prime, per mezzo di una struttura a livelli gerarchici. Le distinte base
sono strumenti necessari per la programmazione della produzione riguardo le scelte
operative, i schemi di produzione ( diagrammi di Gantt e PERT ), la programmazione dei
materiali ( MRP - material requirement planning ).

9
Capitolo 1 – Programmazione della Produzione

Il modo universalmente usato per rappresentare graficamente la distinta base è


quello del diagramma ad albero; l’albero è composto a sua volta da una sequenza di livelli; il
livello corrisponde alla posizione verticale nella distinta base, ovvero la distanza verticale dal
prodotto finito.

La distinta base non è un semplice elenco dei componenti a domanda dipendente,


ma piuttosto una lista strutturata che descrive anche le sequenze operazionali necessarie
per la produzione di un determinato articolo. I diversi livelli presenti nella distinta base
rappresentano le diverse fasi di realizzazione. Ogni livello definisce una delle fasi della
produzione: dalla trasformazione delle materie prime in sottoassiemi al livello più basso, si
prosegue verso le fasi superiori, di solito correlate con la costruzione degli assiemi sino
all'assemblaggio del prodotto finito. Vi sono differenti tipi di distinte basi: si parla, a seconda
dell'uso che se ne fa, di distinta base di progettazione o di pianificazione o, ancora, di produ-
zione.
A seconda del tipo di azienda, si avranno distinte base molto orizzontali, cioè con
pochi livelli ma molti componenti (classico è il caso dei prodotti realizzati su una linea di
assemblaggio), oppure molto verticale, come nelle aziende di processo: cartiere, industrie
chimiche e simili.

10
2 Analisi di Progetto

2.1 Vincoli
• DBMS Informix 10.0
• Linguaggio Server side PHP
• Applicazione web Intranet

2.2 Requisiti espressi in linguaggio naturale


La raccolta dei requisiti del sistema da realizzare è stata effettuata per mezzo di
interviste sul campo degli utenti utilizzatori del sistema.
Già dalle prime interviste è stato stabilito che l’applicazione deve essere localizzata
nell’azienda, non accessibile dall’esterno, inoltre gli utenti che accedono al sistema sono gli
impiegati dell’ufficio; è stato inoltre stabilito che l’applicativo non necessita di implementare
uno strumento di autenticazione: ogni utente avente le credenziali per accedere al web
server ed al database ha accesso all’applicazione, inoltre tutti gli utenti devono avere gli
stessi privilegi.

Di seguito vengono elencati gli altri requisiti.

• L’architettura di riferimento è un modello multi-tier con database, web server e client


interni all’azienda.
• L’applicativo web deve essere cross-browser e multipiattaforma.
• La base dati deve strutturare la gerarchia delle distinte base.
• La distinta base è composta dalla testata (o intestazione) e dalle informazioni
riguardanti il prodotto da descrivere. Prodotti finiti e semilavorati presentano
caratteristiche descrittive simili.
• L’applicativo deve presentare inoltre un filtro sulle distinte base.

11
Capitolo 2 – Analisi di Progetto

2.3 Use case view


Il modello generale che descrive l’interazione degli utenti con l’applicazione può
essere rappresentato dal seguente diagramma.

Figura 1: Use Case View

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.1 Glossario dei termini


Termine Descrizione Collegamenti
Testata Intestazione Distinta Base Semilavorato, Componente,
Lavorazione
Semilavorato Componente della Distinta Base, a Testata, Componente,
propria volta Distinta Base Lavorazione
Componente Materiale, componente finale nella Testata, Semilavorato
Distinta Base
Lavorazione Descrizione della lavorazione sulla Testata
Distinta Base

Tabella 1: glossario dei termini

3.2 Requisiti
Attraverso una serie di interviste, i requisiti sono stati strutturati in frasi, suddivise per
concetti:

Frasi relative le Distinte Base

Per ogni distinta base si devono memorizzare le informazioni della testata.

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.

Frasi relative i Semilavorati

I semilavorati possiedono le stesse caratteristiche delle Distinte Base.


I semilavorati sono componenti di Distinte Base.
Ogni semilavorato deve essere univocamente determinabile nella Distinta Base.
Ogni tipologia di semilavorato può essere presente in più Distinte Base ed in più
occorrenze nella stessa Distinta Base.

Frasi relative le materie prime

Le materie prime sono componenti di Distinte Base.


I componenti devono essere univocamente determinabili nella Distinta Base.
Ogni tipologia di componente può essere presente in più Distinte Base ed in più
occorrenze nella stessa Distinta Base.

Frasi relative le lavorazioni

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.

3.3 Analisi dei requisiti


Una volta conclusa la fase di aquisizione dei requisiti, andiamo a valutare quali sono
le entità che entrano in gioco nel problema e le relazioni tra le varie entità, studiando le varie
frasi definite nei requisiti.

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.

3.4 Operazioni sui dati


1. Visualizzare testata della distinta base, dato l’id
2. Visualizzare le righe della distinta base
3. Inserire, modificare, eliminare la distinta base
4. Inserire, modificare, eliminare i semilavorati
5. Inserire, modificare, eliminare le materie prime
6. Visualizzare i dettagli dell’articolo ( distinta base, componente)
7. Inserire, modificare, eliminare i dettagli dell’articolo
8. Visualizzare le lavorazioni sulla distinta base
9. Inserire, modificare, eliminare la lavorazione sulla distinta base

15
Capitolo 3 – Progettazione della base dati

3.5 SCHEMA CONCETTUALE


Lo schema concettuale è stato ricavato utilizzando una strategia di progettazione
mista: si parte da uno schema scheletro e si prosegue per raffinamenti successivi. Viene
riportato di seguito il modello entità-relazione finale ed il dizionario dei dati.

3.5.1 Modello Entity-Relationship

Figura 2: Modello Entity-Relationship

Sono riportati nello schema solo gli attributi, delle entità e delle relazioni, utili per
comprendere la soluzione adottata.

Dizionario dei dati (entity)

Entità Descrizione Attributi Identificatore


Articolo Descrizione delle sigla, descrizione, sigla
Distinte Base e dei codice a barre
componenti
Testata Intestazione Distinta id, sigla, in uso id
Base
Lavorazione Descrizione delle sigla, descrizione, sigla
lavorazioni sulle macchina
Distinte Base

Tabella 2: Dizionario dei dati (entity)

16
Capitolo 3 – Progettazione della base dati

Dizionario dei dati (relationship)

Relazioni Descrizione Componenti Attributi


Composizione Righe della Distinta Testata, Articolo
Base
Lavorazioni Lavorazioni sulla Testata, Lavorazione data
Distinta Base

Tabella 3: Dizionario dei dati (relationship)

Vincoli di integrità sui dati


(a) La sigla di ogni testata deve essere associata ad una ed una sola sigla della tabella
Articolo.

Tabella 4: Vincoli di integrità sui dati

3.5.2 Analisi delle entità

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

3.6 PROGETTAZIONE LOGICA


Passiamo alla traduzione dello schema concettuale in schema logico.

3.6.1 Ristrutturazione dello schema concettuale


Questa fase della progettazione è rivolta a semplificare il lavoro di traduzione nel
modello logico, e prevede una ottimizzazione sotto il punto di vista delle prestazioni dello
schema concettuale.

Innanzitutto si elimina la generalizzazione dall’entità Articolo, accorpando tutte


informazioni provenienti dalle entità Distinta Base e Componente. Non risulta necessario
separare le entità Distinta Base e Componente in quanto entrambe le entità presentano gli
stessi attributi.

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.

Partizionamento/accorpamento entità e relazioni


Si è già provveduto a separare l’intestazione della distinta base dalle informazioni sulla
distinta base: un ulteriore partizionamento delle entità presenti non sembra necessario.

3.6.2 Traduzione delle entità e relazioni in modello logico

Testata (id, articolo, in_uso, descrizione )


Righe_distinta ( id_testata, num_riga, articolo, quantita )
Articolo ( sigla, descrizione, codice_barre )
Lavorazioni ( id_testata, num_riga, lavorazione )
Lavorazione ( sigla, descrizione, macchina )

18
Capitolo 3 – Progettazione della base dati

3.6.3 Modello Logico

Figura 3: Modello Logico 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.

4.1 Framework Javascript


I framework si presentano come collezioni di librerie e mettono a disposizione
raccolte di strumenti ed elementi utili per lo sviluppo. I framework sono utili per aumentare la
produttività del lavoro, adottando soluzioni a problemi comuni ed offrono compatibilità cross
browser, inoltre permettono scalabilità ed un migliore approccio per la manutenzione del
software; il controllo del flusso applicativo infatti è a carico del framework, il quale invoca il
codice applicativo dello sviluppatore.

Il compito principale di un framework JavaScript è quello di porre delle regole precise


all'interno del vasto universo di Javascript e di utilizzare un'unica sintassi che valga per
qualsiasi browser.
Avendo a disposizione delle API ben definite e soprattutto collaudate in una moltitudine di
software client, gli sviluppatori non devono più preoccuparsi della resa cross-browser, ma
sono liberi di concentrarsi sulle applicazioni vere e proprie.

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

La scelta di non utilizzare un framework PHP è motivata da alcune osservazioni:


• carico nel client: l’applicazione non deve caricare il browser dell’utente di una
infrastruttura pesante, la soluzione deve invece premiare una comunicazione veloce
con il server e soprattutto un carico client minimale.
• Ajax: i framework javascript permettono di gestire appieno la comunicazione client-
server attraverso il set di API XMLHttpRequest, ed i formati XML e JSON.

4.2 Prototype framework


Prototype è un framework JavaScript sviluppato da Sam Stephenson; si distingue per
la stabilità e l’ottima compatibilità cross browser, inoltre offre supporto per l’utilizzo di Ajax e
la programmazione orientata agli oggetti in JavaScript, per sfruttare appieno le potenzialità di
Web 2.0. In merito l’aspetto cross browser dell’applicativo, Prototype e Scriptaculous
permettono al programmatore di tralasciare le specifiche relative la compatibilità con i diversi
browser.
A seguire vengono descritti alcuni metodi della classe prototype utilizzati dall’applicativo.

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”

Tabella 5: principali metodi della classe Prototype

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

4.3 Librerie e Script


A seguire verranno presentate le librerie a supporto del framework Prototype e gli
script che verranno implementati nell’applicazione e che si appoggiano sul framework
Prototype e sulla libreria Scriptaculous.

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

Tabella 6: librerie JavaScript / PHP utilizzate nell’applicativo

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

Lo script permette di gestire il comportamento ed i nodi dell’albero a seguito di eventi


sull’albero; di particolare importanza per l’applicazione sono gli eventi OnOpenPopulate,
onClick, onDrop, onEdit sui nodi dell’albero TafelTree.

Principali proprietà dei nodi dell’albero ( branch )


Id Identificativo univoco del nodo nell’albero
txt Etichetta del nodo
items array degli elementi figli
acceptdrop Valore booleano per l’operazione di drag & drop
canhavechildren Valore booleano per abilitare il livello inferiore

Tabella 7: principali proprietà dei nodi dell’albero

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

Tabella 8: parametri dello script TableOrderer

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.

Esempio di controllo LiveValidation associato ad un elemento del form:

var controllo_elemento = new LiveValidation( 'id_elemento' ); // Istanza


controllo_elemento.add( Validate.Presence ); // Controllo presenza

4.3.5 Ajax autoComplete


Questo script implementa il completamento automatico su un campo di testo di un
form. Inserendo parte del testo da cercare nell’elemento input text, verrà visualizzata una
tendina con i suggerimenti pertinenti al testo digitato. I suggerimenti vengono acquisiti
mediante l’esecuzione di uno script PHP che effettua una query sul database, avendo settato
il parametro POST con il testo digitato.

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

4.5 Pattern MVC


Lo schema di progettazione MVC (Model-View-Controller) è un metodo di
progettazione delle applicazioni web comunemente utilizzato. In termini semplici separa la
presentazione dell’applicazione dalla logica dell’applicazione corrispondente.

Le tre parti dello schema funzionano come descritto in seguito.

• Modello: rappresenta la logica dell’applicazione. Esegue la parte più importante del


lavoro dell’applicazione, come l’interazione con il database, l’elaborazione delle
transazioni. In questa applicazione corrisponde agli script PHP localizzati nel server.
• Visualizzazione: rappresenta l’interfaccia utente. Nel caso di questa applicazione, si
tratta di codice HTML, elementi DOM (Document Object Model) ed i fogli di stile.
• Controller: unisce la visualizzazione al modello, il che significa che risponde agli
eventi, come nel caso in cui l’utente invii un form web, potenzialmente aggiornando lo
stato dell’applicazione con il modello. In questa applicazione è il caso del codice
JavaScript e del framework Prototype.

La figura seguente mostra come si legano le parti dello schema MVC in un’applicazione web
comune.

25
Capitolo 4 – Strumenti

Figura 4: Collegamento tra le parti dello schema di progettazione MVC nell’applicazione

26
5 Applicazione Web

In questo capito vengono analizzate le fasi di realizzazione dell’applicativo web. Le


fasi si suddividono in interfaccia ed implementazione.

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.

Concettualmente una distinta base è rappresentata da una struttura ad albero, al cui


vertice compare il prodotto finito ed i vari livelli sono costituiti da semilavorati e materie
prime. Si deve studiare se risulta necessario integrare ulteriori strutture a supporto della
struttura ad albero.

Riguardo la struttura ad albero, quella che meglio si presta al problema è la struttura


verticale: lista verticale dei nodi ed estensione orizzontale dei livelli.

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

Prodotto finito intestazione Distinta Base, caratteristiche articolo, lista elementi


Semilavorato intestazione Distinta Base, caratteristiche articolo, caratteristiche
dell’elemento nella Distinta Base, lista elementi
Materia prima caratteristiche articolo, caratteristiche dell’elemento nella Distinta
Base

Tabella 9: informazioni associate ad ogni nodo dell’albero

La soluzione adottata propone di creare una struttura a schede affiancata all’abero,


costituita in una sezione “menu” ed una sezione “contenuto”. In questo modo l’utente può
selezionare la vista di interesse dalla sezione “menu”, che a sua volta attiverà i componenti
html appropriati nella sezione “contenuto”; questa soluzione propone un front-end semplice
ed in particolare rispondente ai requisiti richiesti (Figura 5).

L’utente può inoltre avere la necessità di scorrere velocemente la struttura dell’albero,


quindi si devono implementare filtri per le Distinte Base e per le righe delle Distinte Base. Un
filtro per le Distinte Base è presente nella sezione “Albero”, mentre il filtro per le righe della
Distinta Base è presente nella tabella “righe distinta” nella sezione “Distinta Base” della
struttura a schede.

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

Caratteristiche nodo Schede Elementi accessibili


Prodotto finito Distinta Base Intestazione Distinta Base
Componenti Distinta Base
Form componente selezionato
Dettagli Dettaglio Articolo
Lavorazioni Lavorazioni distinta base
Semilavorato Distinta Base Relazione con Distinta Base padre
Intestazione Distinta Base
Componenti Distinta Base
Form componente selezionato
Dettagli Dettaglio Articolo
Lavorazioni Lavorazioni Distinta Base
Materia prima Distinta Base Relazione con Distinta Base padre
Form componente
Dettagli Dettaglio Articolo

Tabella 10: elementi accessibili per ogni scheda

Figura 5: Disposizione Sezioni nella pagina del browser

29
Capitolo 5 – Applicazione Web

5.2 Elementi html


Di seguto vengono elencati gli elementi html presenti nelle sezioni della schermata
iniziale dell’applicazione.

Sezione Elemento Descrizione


Albero Input text "filtro” Casella di testo per il filtro sulle distinte base
div TafelTree Contenitore per l’albero TafelTree
Menu link Distinta base Attiva la scheda Distinta base
link Dettagli Attiva la scheda Dettagli
link Lavorazioni Attiva la scheda Lavorazioni

Tabella 11: elementi html delle sezioni “Albero” e “menu”

Scheda Elemento Descrizione


Distinta Base Form Distinta Base campi della tabella DII ( Intestazione Distinta Base )
Tabella righe Distinta campi della tabella DIR (Righe della distinta base )
Form azioni Tabella pulsanti di azione sugli elementi della tabella righe
Form elemento Form di modifica dell’elemento selezionato nella
tabella: campi della tabella DIR
Dettagli Form Articolo campi della tabella ART ( Articoli )
Lavorazioni Tabella lavorazioni campi della tabella LAV ( Lavorazioni )
Form azioni pulsanti di azione sugli elementi della tabella
lavorazioni lavorazioni
Form Lavorazione Form di modifica della lavorazione selezionata

Tabella 12: elementi html della sezione “Contenuto”

5.3 Implementazione degli script

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.

<script type = "text/javascript">


var tree = new TafelTree("idTree", myJSONstruct, {
"generate" : true,
"imgBase" : "imgs/",
"onClick" : “branch_padre”,
"onEditAjax" : [ edit_branch, "edit_branch.php" ],
"onDropAjax" : [ mydrop, "drop_branch.php" ],
"multiline" : true,
"cookies" : true,
"showSelectedBranch" : true
});

TafelTreeManager.setKeys( array_tasti_azione );
</script>

<script type = "text/javascript">


var branch = {
"id" : "branch ID",
"txt" : "nome branch",
"items" : { vettore branch figli },
"acceptdrop" : true,
"editable" : true,
"last" : true,
"open" : true,
"onopenpopulate" : myOpenPopulate,
"openlink" : "interrogazione_figli.php?id=id_distinta",
"canhavechildren" : true
};
</script>

Sono riportate nella Tabella 13 le funzioni JavaScript richiamate dagli eventi sull’albero
TafelTree.

31
Capitolo 5 – Applicazione Web

Funzione Azione Descrizione


myOpenPopulate open branch Apre la struttura del branch e visualizza il livello
inferiore dell’albero
mydrop drag & drop Gestione delle azioni di drag and drop del branch
myOnDelete tasto CANC Gestione eliminazione del branch selezionato
edit_branch edit branch Gestione della modifica del nome del branch
branch_padre branch click - Apre scheda “Distinta Base” nella sezione
“Contenuto”
- Seleziona id del nuovo branch padre in modalità
“drag&drop da form” per semilavorati e materie
prime

Tabella 13: funzioni richiamate dagli eventi sull’albero

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.

5.3.4 Ajax autoComplete


L’autocompletamento è stato utilizzato per il campo “filtro distinta base” nella sezione
“Albero”, per agevolare la ricerca della distinta base. La ricerca può essere effettuata sulla
sigla della distinta base oppure sulla sua descrizione.

5.4 Script PHP


Gli script PHP implementati nell’applicazione effettuano le interrogazioni al database
e l’aggiornamento delle tabelle, a seconda dei parametri POST o GET passati come
parametri. A seguire sono elencati e descritti gli script PHP.

Script PHP Descrizione


interrogazione.php Definizione dell’albero TafelTree relativo la Distinta Base
interrogazione_figli.php Definizione figli del branch dell’albero
aggiungi_riga.php Inserimento di un nuovo componente alla Distinta Base
drop_branch.php Spostamento del nodo dell’albero
edit_branch.php Modifica del nodo dell’albero
elimina_righe.php Elimina righe dalla Distinta Base
elimina_righe_lav.php Elimina righe alla tabella Lavorazioni
lista_lavorazioni.php Lista delle lavorazioni associate alla Distinta Base

33
Capitolo 5 – Applicazione Web

lavorazione.php Caratteristiche della lavorazione


modifica_articolo.php Aggiornamento campi della tabella Articolo
modifica_lavorazione.php Aggiornamento campi della tabella Lavorazione
remove_branch.php Elimina nodo dell’albero

Tabella 14: script PHP

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

5.5 Applicazione in esecuzione

Nel seguito verranno proposti alcuni screenshots dell’applicazione in esecuzione.

Figura 6: Albero, scheda “Distinta Base” ed autocompletamento

37
Capitolo 5 – Applicazione Web

Figura 7: Elemento selezionato dalla tabella “righe distinta base” nella scheda “Distinta Base”

Figura 8: scheda Lavorazioni ed esempio di filtro nella tabella lavorazioni

38
6 Conclusioni

Il progetto presentato nella seguente tesi deve essere considerato un prototipo di


applicazione web e si propone di essere una soluzione al problema relativo la gestione delle
Distinte Base. L’applicativo è stato realizzato in accordo ai vincoli ed i requisiti espressi in
fase di Analisi del problema.

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.

Il progetto ha evidenziato la necessità di dover usufruire di un IDE più completo, ad


esempio un Framework PHP, nella situazione in cui sia richiesto di ampliare il contesto
operativo dell’applicativo, per quanto riguarda la manutenzione del codice e l’estensione del
progetto.

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

Levy G., La logistica nei sistemi ERP, Franco Angeli, Milano.


P. Gopalakrishnan, Purchasing and Materials Management, Tata McGraw-hill.
Quentin Zervaas, Sviluppare applicazioni Web 2.0 con PHP, Apogeo.

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

You might also like