1015330 - DATABASES AND WEB PROGRAMMING M - Z
Modulo 1015332 - WEB PROGRAMMING

Il modulo tratta gli strumenti metodologici per la progettazione dei moderni sistemi informativi basati su web, che collegano le basi di dati ai processi elaborativi di tipo interattivo. A questo fine, vengono trattati, in un contesto laboratoriale, gli strumenti per lo sviluppo di un sistema che comprenda la parte di back-end (programmazione lato server) e di front-end (programmazione lato client), quest'ultima con particolare riferimento ad applicazioni web "responsive". Verranno successivamente trattate tecniche di progettazione e di implementazione più avanzate basate sul pattern architetturale Model-View-Controller (MVC).

Si daranno infine cenni su tecniche di progettazione e di implementazione avanzate per la realizzazione di GUI interattive (per esempio, React).

Gli obiettivi formativi del corso, declinati secondo i descrittori di Dublino, sono:

Conoscenza e capacità di comprensione

• Comprendere i principali concetti di progettazione di sistemi informativi per il web
• Comprendere concetti e strumenti per la realizzazione di back-end efficienti e front-ent funzionali a supportare le esigenze degli utenti
• Comprendere concetti e strumenti per la separazione delle responsabilità, dei ruoli e per il riuso del codice nello sviluppo di una web application

Conoscenze applicate e capacità di comprensione

• Essere in grado di progettare ed implementare una web application multipiattaforma e multidispositivo sia lato server che lato client
• Essere in grado di implementare servizi web che gestiscano l'interazione con i dati (DBMS) e l'integrazione con altri sistemi web (REST API)
• Essere in grado di progettare e realizzare la user experience in una web application

Autonomia di giudizio

• Analizzare i requisiti funzionali e non-funzionali
• Comprendere le implicazioni di scelte progettuali relative a software stack alternativi, lato server e lato client
• Comprendere le implicazioni di scelte progettuali relative alla gestione dei cambiamenti e della manutenzione di software stack alternativi
• Comprendere le problematiche prestazionali associate a software stack alternativi

Abilità comunicative

• Redigere un documento di specifiche per una web application, facendo riferimento agli aspetti che le contraddistinguono da altre tipologie di software
• Spiegare oralmente le proprie scelte di progetto

Capacità di apprendimento

• Imparare a utilizzare le tecnologie per lo sviluppo di una applicazione web complessa
• Imparare a confrontare schemi di progetto alternativi da diverse prospettive
• Imparare a riconoscere i principi di progetto alla base dei diversi stili architetturali, meccanismi di trasmissione dei dati e tecnologie di sviluppo

Lezioni frontali, esercitazioni, laboratorio e seminari.

Qualora l'insegnamento venisse impartito in modalità mista o a distanza potranno essere introdotte le necessarie variazioni rispetto a quanto dichiarato in precedenza, al fine di rispettare il programma previsto e riportato nel syllabus.

Conoscenze di base di programmazione e di reti di calcolatori.

Fortemente consigliata.

Fondamenti di web programming e sviluppo lato server

• HTML, CSS e Document Object Model (DOM)
• Il linguaggio PHP
• HTML con PHP: form, sessioni e cookies
• Interazione tra PHP e DBMS

Progettazione di Web Information System e Sviluppo di applicazioni web lato client

• Il linguaggio JavaScript: funzioni, modello ad oggetti (oggetti window, document, form), eventi
• Responsive Web Design: selettori CSS, selettori di posizione e operazioni su oggetti (navigazione e manipolazione DOM)
• AJAX: richieste asincrone, risposte testuali, HTML e JSON
• Il pattern architetturale MVC: esempi di strutturazione del software in un framework basato su MVC

Tecniche di Web Programming avanzate

• Design e implementazione di GUI interattive (e.g., React)

Dispense del docente e documentazione da Mozilla Developer Network e PHP.net

Il corso offre due modalità di esami.

Svolgimento di homework durante il corso

Per ogni macro-argomento del corso, verrà assegnato un progetto individuale da svolgere a casa ("homework"), tramite il quale lo studente dovrà dimostrare la padronanza dell'argomento in questione. Previo completamento di tutti gli homework assegnati, l'esame di fine corso consisterà nella discussione dello svolgimenti degli stessi.

Progetto unico

Qualora non si segua la modalità di superamento della materia tramite homework, l'esame di verifica dell'apprendimento consisterà nello svolgimento in un progetto unico che racchiuda tutti gli argomenti studiati nel corso, e nella discussione dello stesso.

---

A prescindere dalla modalità scelta, la discussione dell'elaborato verterà su scelte progettuali, aspetti implementativi, domande teoriche e domande pratiche (si vedano gli esempi di domande). La sufficienza sarà raggiunta attraverso Il rispetto delle specifiche minime di progetto e la consapevolezza delle scelte implementative effettuate. Sarà ulteriormente valutata la capacità dello studente di utilizzare funzionalità e tecniche avanzate che esulino dalle specifiche minime.

Discussione delle implementazioni degli elaborati. Esempi di domande (lista non esaustiva):

- cosa fa questa riga di codice?

- quale funzione gestisce questo evento?

- quale funzione gestisce questa richiesta lato server?

- in che altro modo si può implementare questa funzionalità?

Domande teoriche. Esempi (lista non esaustiva):

- cosa sono i selettori in CSS?

- che valori può assumere la proprietà display in CSS e cosa significano?

- come si controlla la distanza tra un elemento HTML e gli elementi circostanti, o tra il contenuto di un elemento e il bordo dell'elemento?

- come si gestisce un evento in JavaScript?

- come si leggono in PHP dei dati trasmessi da un form?

- come si effettua una richiesta asincrona in JavaScript?

Domande pratiche. Esempi (lista non esaustiva):

- scrivere il codice di due div annidati i cui bordi distino 20 pixel;

- scrivere il codice JavaScript per leggere il contenuto testuale di tutti gli span di classe C contenuti in un div con id D;

- scrivere il codice PHP per leggere una variabile passata come parametro GET.