Front-end: Guide for developers - Edit by Lorenzo Stacchio
1. Banca Unicam:
Front-End Guide for Developers
1 Introduction
Questo documento esplora i vari file che formano il lato front-end dell’applicazione
web Banca Unicam. Ci`o comprende:
• Files html;
• Files css;
• Files javascript.
Il lato front-end dell’applicazione `e stato costruito basandosi su 3 pilastri fon-
damentali:
• Html, per creare la struttura o scheletro della pagina;
• Angular JS, frawework di javascript utilizzato per gestire creare dinamicit`a
tra i vari elementi che compongono la pagina e per gestire l’interazione tra
lato front-end e back-end.
• Css, per creare la grafica delle varie pagine, componente per componente.
2 The body of web application: HTML
La nostra applicazione web `e strutturalmente formata da 3 pagine principali:
1
2. • index.html;
• indexUser.html;
• indexAdmin.html;
Ognuna di queste conterr`a molte altre pagine html, questo fenomeno `e possibile
grazie al servizio di injection fornito dal servizio di routing di angular js. Queste
3 pagine sono tutte consultabili nel path ”./front-end/”.
2.1 index.html
La pagina index.html oltre a contenere tutte le meta informazioni ed importare
tutti i file di scripting necessari, contiene anche una navbar dalla quale sar`a
possibile cambiare il contenuto dinamico della sezione sottostante tramite il
sistema di routing fornito da angular js. Le pagine consultabili tramite routing
da index.html sono:
• Home page, che ha contenuto statico con animazioni css;
• Photo Gallery, che ha contenuto dinamico con animazioni css;
• About us, che ha contenuto statico con animazioni css;
• Contact us, che ha contenuto statico con animazioni css;
• Sign up, che contiene contenuto dinamico e interazione col server;
• Login, che contiene contenuto dinamico e interazione col server;
I vari componenti delle pagine a contenuto dinamico interagiscono con dei con-
troller definiti nel file index.js, di cui parleremo nella sezione 4. Per quanto
riguarda l’interazione col server si consulti la guida per il back-end e per il fun-
zionamento si consulti la guida per lo user. Tutte queste pagine possono essere
consultate nel path ”./front-end/html/nomePagina/nomePagina.html”.
2.2 indexUser.html
La pagina indexUser.html oltre a contenere tutte le meta informazioni ed im-
portare tutti i file di scripting necessari, contiene anche una navbar dalla quale
sar`a possibile cambiare il contenuto dinamico della sezione sottostante tramite il
sistema di routing fornito da angular js. Le pagine consultabili tramite routing
da indexUser.html sono:
• Visiona avvisi;
• Visiona movimenti bancari;
• Effettua un bonifico;
• Situazione conto tramite grafici;
2
3. • Media spese e media entrate;
Tutte queste pagine sono a contenuto dinamico e dialogano direttamente col
server e con il database. I vari componenti delle pagine a contenuto dinamico in-
teragiscono con dei controller definiti nel file indexUser.js, di cui parleremo nella
sezione 4. Per quanto riguarda l’interazione col server si consulti la guida per
il back-end e per il funzionamento si consulti la guida per lo user. Tutte queste
pagine possono essere consultate nel path ”./front-end/html/user/nomePagina/nomePagina.html”.
2.3 indexAdmin.html
La pagina indexAdmin.html oltre a contenere tutte le meta informazioni ed
importare tutti i file di scripting necessari, contiene anche una navbar dalla
quale sar`a possibile cambiare il contenuto dinamico della sezione sottostante
tramite il sistema di routing fornito da angular js. Le pagine consultabili tramite
routing da indexAdmin.html sono:
• Crea/elimina avvisi;
• Registra nuovo utente;
• Effettua un bonifico tra due utenti;
• Visiona stato di un utente;
• Abilita/disabilita conto corrente;
Tutte queste pagine sono a contenuto dinamico e dialogano direttamente col
server e con il database. I vari componenti delle pagine a contenuto dinamico
interagiscono con dei controller definiti nel file indexAdmin.js, di cui parleremo
nella sezione 4. Per quanto riguarda l’interazione col server si consulti la guida
per il back-end e per il funzionamento si consulti la guida per lo user. Tutte
queste pagine possono essere consultate nel path ”./front-end/html/admin/nomePagina/nomePagina.html”.
3 Animations and style sheets: CSS
Per lo stile e le animazioni delle varie componenti delle pagine html `e stato
utilizzato un misto di componenti bootstrap e fogli di stile scritti dagli svilup-
patori. Le componenti di bootstrap sono state importate in tutte le sezioni del
sito cos`ı come anche i fogli di stile. I fogli di stile scritti sono molteplici:
• index.css, utilizzato per lo pi`u per gestire lo stile della prima sezione del
sito (home page,photo gallery etc..);
• user.css, utilizzato per gestire lo stile dell’area privata dell’utente corren-
tista e parte dell’area privata dell’amministratore;
• errors.css, utilizzato per gestire lo stile degli errori visibili all’utente;
3
4. • loading.css, utilizzato per gestire lo stile della pagina di loading.
E’ stato importato anche il pacchetto completo di font-awesome e una cartella
con molte immagini utilizzate in varie sezioni del sito allo scopo di migliorarne
l’estetica. Tutti i file riguardanti lo stile sono consultabili dal path ”./front-
end/CSS/”.
4 Dynamism and DOM manipulation: Angular
Js
Per gestire la dinamicit`a degli elementi che compongono il front-end viene uti-
lizzato un framework di javascript: Angular Js. Questo framework consente di
manipolare il DOM, aiuta a creare siti modulari ed inoltre ha decine di fun-
zionalit`a pronte per svolgere svariati compiti (contattare il server, nascondere
oggetti, richiamare funzioni con focus/out-focus etc..). I file principali angular-
based sono 3(uno per ogni pagina principale html):
• index.js;
• indexUser.js;
• indexAdmin.js;
Tutti i file elencati contengono la configurazione di routing per gestire il cambio
di pagina evitando di ricaricarla completamente (ci`o permette di sprecare meno
tempo e di alleggerire anche il server qualora la pagina venga inizializzata con
dati provenienti da quest’ultimo). Tutti i file contengono, inoltre, un controller
per ogni pagina utilizzata in quella sezione (ovviamente tutti i controller sono
collegati ad un unico modulo di angular e vengono richiamati automaticamente
grazie al routing). I file elencati possono essere consultati dal path ”./front-
end/js/”
4.1 index.js
Il file javascript index, `e strutturato in 3 parti:
• Module, modulo definito che avr`a una sua configurazioni di routing e
controller annessi;
• Configuration, configurazione del routing
• Controllers, controller dipendenti dal modulo e che hanno il compito di
manipolare una certa pagina presente nel DOM ed eventualmente di con-
tattare il server.
4.1.1 Module
Il modulo di index.js `e denominato indexApp e importa tutte le librerie neces-
sarie tra le quali ngRoute etc...
4
5. 4.1.2 Configuration
La configurazione del modulo contiene una route per ogni pagina della prima
sezione alla quale connette sempre un certo controller. Le route sono:
• ”/”, che carica la home page;
• ”/photoGallery”, che carica la photo gallery;
• ”/about”, che carica la pagina su di noi;
• ”/contact”, che carica la pagina dei contatti;
• ”/signUp”, che carica la pagina di registrazine;
• ”/login”, che carica la pagina di login.
4.1.3 Controllers
Esiste un controller per ogni pagina html che viene utilizzata nel sito, ogni
controller importa delle funzionalit`a che serviranno durante l’attivit`a svolta
dall’utente. I controller sono sono:
• ”/homeController”, che gestisce il contenuto della home page;
• ”/photoGalleryController”, che gestisce il contenuto della gallery;
• ”/aboutUsController”, che gestisce il contenuto della pagina su di noi;
• ”/contactUsController”, che gestisce il contenuto della pagina dei contatti;
• ”/signUp”, che gestisce il contenuto della pagina di registrazine intera-
gendo anche col server;
• ”/gestisciLogin”, che gestisce il contenuto della pagina di login interagendo
anche col server.
4.2 indexUser.js
Il file javascript indexUser, `e strutturato in 3 parti:
• Module, modulo definito che avr`a una sua configurazioni di routing e
controller annessi;
• Configuration, configurazione del routing
• Controllers, controller dipendenti dal modulo e che hanno il compito di
manipolare una certa pagina presente nel DOM ed eventualmente di con-
tattare il server.
5
6. 4.2.1 Module
Il modulo di indexUser.js `e denominato indexUserApp e importa tutte le librerie
necessarie tra le quali ngRoute etc...
4.2.2 Configuration
La configurazione del modulo contiene una route per ogni pagina della seconda
sezione (quella dedicata all’utente correntista) alla quale connette sempre un
certo controller. Le route sono:
• ”/”, che carica la home page dello user;
• ”/average”, che carica la pagina delle medie;
• ”/movements”, che carica la pagina dei movimenti dell’utenet;
• ”/transaction”, che carica la pagina delle transazioni;
• ”/graph”, che carica la pagina sui grafici;
• ”/mainHome”, che permette di ritornare al sito principale;
• ”/modifyMeta”, che carica la pagina di modifica delle credenziali.
4.2.3 Controllers
Esiste un controller per ogni pagina html che viene utilizzata nel sito, ogni
controller importa delle funzionalit`a che serviranno durante l’attivit`a svolta
dall’utente. I controller sono sono:
• ”/userHomeController”, che gestisce il contenuto della home page user;
• ”/userMovementsController”, che gestisce il contenuto della pagina dei
movimenti dell’utente;
• ”/changeSite”, che gestisce il cambio di pagina;
• ”/userTransactionController”, che gestisce il contenuto della pagina dei
bonifici;
• ”/userAverageController”, che gestisce il contenuto della pagina con le
medie;
• ”/userGraphController”, che gestisce il contenuto della pagina con i grafici;
• ”/userModifyMetaController”, che gestisce il contenuto della con cui si
pu`o cambiare le proprie credenziali.
Tutti i controller elencati contattano il server, prima per prendere i dati dell’utente
per poi manipolarli a seconda di cosa l’utente sceglie di fare/vedere.
6
7. 4.3 indexAdmin.js
Il file javascript indexAdmin, `e strutturato in 3 parti:
• Module, modulo definito che avr`a una sua configurazioni di routing e
controller annessi;
• Configuration, configurazione del routing
• Controllers, controller dipendenti dal modulo e che hanno il compito di
manipolare una certa pagina presente nel DOM ed eventualmente di con-
tattare il server.
4.3.1 Module
Il modulo di indexAdmin.js `e denominato indexAdminApp e importa tutte le
librerie necessarie tra le quali ngRoute etc...
4.3.2 Configuration
La configurazione del modulo contiene una route per ogni pagina della terza
sezione (quella dedicata all’amministratore) alla quale connette sempre un certo
controller. Le route sono:
• ”/”, che carica la home page dello user;
• ”/alert”, che carica la pagina degli avvisi;
• ”/transaction”, che carica la pagina dei bonifici tra due utenti;
• ”/userStats”, che carica la pagina delle statistiche di un utente;
• ”/newCount”, che carica la pagina per registrare un nuovo conto;
• ”/activeUser”, che carica la pagina per abilitare/disabilitare utente;
• ”/mainHome”, che permette di ritornare alla pagina principale del sito.
4.3.3 Controllers
Esiste un controller per ogni pagina html che viene utilizzata nel sito, ogni
controller importa delle funzionalit`a che serviranno durante l’attivit`a svolta
dall’utente. I controller sono sono:
• ”/adminHomeController”, che gestisce il contenuto della home page ad-
min;
• ”/changeSite”, che gestisce il cambio di pagina;
• ”/adminAlertController”, che gestisce il contenuto della pagina degli avvisi;
7
8. • ”/adminBonificoController”, che gestisce il contenuto della pagina dei
bonifici;
• ”/adminUserVisionController”, che gestisce il contenuto della pagina con
la visione dello stato di un utente;
• ”/adminAbilitaController”, che gestisce il contenuto della con cui si pu`o
abilitare/disabilitare un utente;
• ”/adminRegistraUtente”, che gestisce il contenuto della con cui si pu`o
registrare un nuovo utente.
Tutti i controller elencati contattano il server, prima per prendere i dati dell’utente
per poi manipolarli a seconda di cosa l’utente sceglie di fare/vedere.
8
