Tesi

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

2

3

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

Analisi di Progetto ................................................................................................... 11 2.1

Vincoli ............................................................................................................ 11

2.2

Requisiti espressi in linguaggio naturale ....................................................... 11

2.3

Use Case View .............................................................................................. 12

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

5

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

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

6

Applicazione in esecuzione ........................................................................... 37

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

2.1

Vincoli

•

DBMS Informix 10.0

•

Linguaggio Server side PHP

•

Applicazione web Intranet

2.2

Analisi di Progetto

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

Testata

Intestazione Distinta Base

Semilavorato

Componente della Distinta Base, a propria volta Distinta Base Materiale, componente finale nella Distinta Base Descrizione della lavorazione sulla Distinta Base

Componente Lavorazione

Collegamenti Semilavorato, Componente, Lavorazione Testata, Componente, Lavorazione Testata, Semilavorato Testata

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à Articolo

Testata Lavorazione

Descrizione Descrizione delle Distinte Base e dei componenti Intestazione Distinta Base Descrizione delle lavorazioni sulle Distinte Base

Attributi

Identificatore

sigla, descrizione, codice a barre

sigla

id, sigla, in uso

id

sigla, descrizione, macchina

sigla

Tabella 2: Dizionario dei dati (entity)

16

Capitolo 3 – Progettazione della base dati

Dizionario dei dati (relationship) Relazioni Composizione Lavorazioni

Descrizione

Componenti

Righe della Distinta Base Lavorazioni sulla Distinta Base

Attributi

Testata, Articolo Testata, Lavorazione

data

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 clientserver 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 Script.aculo.us v1.7.0 TafelTree v.1.9.1 TableOrderer v.1.2.20090611 LiveValidation 1.3 Ajax Autocomplete v.1.0.3 JSON

Framework JavaScript Libreria JavaScript che estende gli effetti grafici Struttura ad albero Struttura tabellare; implementa l’ordinamento per colonna, il filtro delle righe e la paginazione dei risultati Validazione dei form Autocompletamento tramite Ajax di campi text dei form html 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' ); controllo_elemento.add( Validate.Presence );

// Istanza

// 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 caratteristiche articolo, caratteristiche dell’elemento nella Distinta Base

Materia prima

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

Prodotto finito

Distinta Base

Semilavorato

Dettagli Lavorazioni Distinta Base

Materia prima

Dettagli Lavorazioni Distinta Base

Elementi accessibili Intestazione Distinta Base Componenti Distinta Base Form componente selezionato Dettaglio Articolo Lavorazioni distinta base Relazione con Distinta Base padre Intestazione Distinta Base Componenti Distinta Base Form componente selezionato Dettaglio Articolo Lavorazioni Distinta Base Relazione con Distinta Base padre Form componente Dettaglio Articolo

Dettagli

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 Albero

Elemento Input text "filtro” div TafelTree link Distinta base link Dettagli link Lavorazioni

Menu

Descrizione Casella di testo per il filtro sulle distinte base Contenitore per l’albero TafelTree Attiva la scheda Distinta base Attiva la scheda Dettagli Attiva la scheda Lavorazioni

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

Scheda

Elemento

Distinta Base

Form Distinta Base Tabella righe Distinta Form azioni Tabella Form elemento

Dettagli Lavorazioni

Form Articolo Tabella lavorazioni Form azioni lavorazioni Form Lavorazione

Descrizione campi della tabella DII ( Intestazione Distinta Base ) campi della tabella DIR (Righe della distinta base ) pulsanti di azione sugli elementi della tabella righe Form di modifica dell’elemento selezionato nella tabella: campi della tabella DIR campi della tabella ART ( Articoli ) campi della tabella LAV ( Lavorazioni ) pulsanti di azione sugli elementi della tabella lavorazioni 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 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 };

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

31

Capitolo 5 – Applicazione Web

Funzione

Azione

myOpenPopulate

open branch

mydrop myOnDelete edit_branch branch_padre

drag & drop tasto CANC edit branch branch click

Descrizione Apre la struttura del branch e visualizza il livello inferiore dell’albero Gestione delle azioni di drag and drop del branch Gestione eliminazione del branch selezionato Gestione della modifica del nome del branch - 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 3 4 5 6 7 8 9 10 11 12 13

14 15 16 17 18 19 20 21 22 23 24


34

Capitolo 5 – Applicazione Web

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

$vettore_dati[$i]['editable'] = true; $vettore_dati[$i]['ondropajax'] = "mydrop"; $vettore_dati[$i]['droplink'] = "drop_branch.php"; $vettore_dati[$i]['acceptdrop']=true; $vettore_dati[$i]['canhavechildren']= true; $vettore_dati[$i]['onopenpopulate'] = myOpenPopulate; $vettore_dati[$i++]['openlink']= "interrogazione_figli.php?id=".$num_art; } } // Elemento contenitore $vettore_finale[0]['txt'] = ""; $vettore_finale[0]['id'] = 0; $vettore_finale[0]['items'] = $vettore_dati; $json = new Services_JSON(); // oggetto json $spedisci_browser = $json->encode( $vettore_finale ); die($spedisci_browser); // spedisci oggetto con Ajax response ?>

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 3 4 5 6

7 8 9 10 11 12 13 14 15 16


35

Capitolo 5 – Applicazione Web

17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

$vettore_dati[$i]['onedit'] = "edit_branch"; $query2="select id_num_d_b, id_descrizione from dii where id_art_dist='".$line['rd_art_com']."'"; $res2=ifx_db_sel($query2); if($line2 = ifx_fetch_row($res2)){ $id_num_d_b = $line2['id_num_d_b']; $vettore_dati[$i]['txt'] = $desc_art; $vettore_dati[$i]['id'] = $id_num_d_b; $vettore_dati[$i]['id_num_d_b'] = $id_num_d_b; $vettore_dati[$i]['descrizione'] = $line2['id_descrizione']; $vettore_dati[$i]['acceptdrop'] = true; $vettore_dati[$i]['canhavechildren'] = true; $vettore_dati[$i]['onopenpopulate'] = myOpenPopulate; $vettore_dati[$i++]['openlink'] = "interrogazione_figli.php?id = ".$id_num_d_b."&riga=".$line['rd_num_riga']; }else{ $vettore_dati[$i]['id'] = $rd_num_d_b."_".$line['rd_num_riga']; $vettore_dati[$i++]['id_num_d_b'] = $rd_num_d_b; } } $json = new Services_JSON(); // oggetto json $spedisci_browser = $json->encode( $vettore_dati ); die($spedisci_browser); // spedisci oggetto con Ajax response ?>

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 crossplatform, 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