Con l'evoluzione tecnologica gli oggetti stanno diventando sempre di più parte integrante della nostra vita.

In queste lezioni proverò a spiegarvi, in parole semplici, che cosa sono gli oggetti, i campi di applicazionei e soprattutto perché è diventato così importante pensare ad oggetti.

Per capire che cosa sono gli oggetti è molto semplice, basta osservare con maggiore attenzione il mondo che vi circonda per scoprire che intorno a voi ci sono tanti tipi di oggetti, come mostra l'immagine seguente.

Gli oggetti in genere sono le cose che vedete intorno a voi,  come ad esempio: gli alberi, i mobili di una stanza, le persone, le macchine, gli elettrodomestici, gli apparecchi elettronici e le applicazioni software.

Le parti che compongono gli oggetti si chiamano componenti.

Anche le applicazioni software sono composte da componenti, basta osservare la struttura che hanno le interfacce (GUI) degli smartphone:

La novità è che oggi gli oggetti possono anche comunicare tra loro attraverso Internet oppure attraverso il cellulare, come avviene nel campo della Domotica, dell'RFID (identificazione a radiofrequenza) e dell'IOT (Internet delle cose).

Avreste mai immaginato che un giorno la vostra auto vi potesse comunicare la posizione dove l'avete parcheggiata per farsi trovare? Oggi con l'IOT questo è possibile!

Grazie alla tecnologia RFID, oggi si possono creare etichette capaci di comunicare con il vostro smartphone, ad esempio per fornire la data di scadenza ed il prezzo dei prodotti che state acquistando oppure per descrivere la filiera di produzione di un prodotto alimentare.

Tutto questo naturalmente ci pone di fronte al problema di  gestire le grosse quantità di dati trasmesse dagli oggetti, per questo stanno nascendo nuove professionalità nel campo della gestione delle grosse quantità di dati, ovvero  i Big Data.

Le figure più emergenti nel settore dei  Big Data sono gli esperti di Data Wharehouse e Business Intelligence oppure i Data Scientist.

Per iniziare a comprendere gli oggetti da un punto di vista logico, dovete ricordare che per definire un  oggetto sono importanti le seguenti caratteristiche:

• il Ruolo
• le Proprietà
• le Azioni

ed i componeti di cui e formato.

Ad esempio un Auto ha le seguenti caratteristiche:

ed è formata dai seguenti componenti:

Anche i componenti sono oggetti e quindi alcuni di loro possono essere divisi in componenti, ad esempio il motore dell'auto è formato dalle seguenti parti:

Nella prossima lezione vedremo l'importanza che hanno gli oggetti ed i componenti nel campo degli apparecchi elettronici e delle applicazioni software sviluppate con linguaggi ad oggetti.

Lezione successiva >>

Laboratori di Logica di Programmazione in C

La particolarità di quest'anno è che inizia di lunedì, spero che sia di buon auspicio per il lavoro e per tutti coloro che sono in cerca di un'occupazione.
L'altra cosa importante è che il "Progetto Skill Factory" compie 20 anni (1998-2017), durante i quali, soprattutto anche grazie ai fondi Forma.Temp, abbiamo formato gratuitamente circa 5000 ragazzi disoccupati, permettendo ad almeno il 30% di loro di trovare un'occupazione presso un nostro JOB Partner IT.

Le novità di quest'anno sono principalmente 3:

1) La partnership con la Major Bit Academy che  ci permette di introdurre anche nelle aziende il modello Skill Factory, con l'obiettivo di tenere sempre aggiornato il personale dipendente e riqualificare i profili non più competitivi, attraverso un modello molto più flessibile della formazione tradizionale.

2) Lo start up della "Scuola d'Esperienza Skill Factory", per i giovani diplomati o laureandi, che vogliono acquisire in modo semplice, flessibile e senza vincoli di spazio e di tempo, le competenze e l'esperienza necessarie per entrare nel mondo del lavoro.

3) La partnership con le scuole per orientare gli studenti al mondo del lavoro e favorie l'acquisizione delle competenze di base durante il percorso scolastico, attraverso la condivisione di progetti di tipo Skill Facotory.

PER CHI VUOLE SAPERNE DI PIÙ SULL'OFFERTA FORMATIVA DELLA MAJOR BIT ACADEMY

L'offerta formativa della Major Bit Academy si contraddistingue per l’alto livello di modularità che la rende adattabile a qualunque esigenza formativa. In questo modo diventa più semplice per tutti costruire il proprio Profilo professionale e tenerlo aggiornato nel tempo.

Il CATALOGO contiene SEMINARI, CORSI e CORSI PER CERTIFICAZIONI VUE che possono essere erogati nelle seguenti modalità:

1. Modalità Frontale (docente + aula);
2. Modalità FAD (formazione a distanza):  attraverso Skillbook l’SRM (Skill Realationship Management) che permette di gestire online qualunque attività di un progetto di formazione.

Per ricevere maggiori informazioni sull'offerta formativa della Major Bit Academy consultate il sito www.majorbit.com.

PER CHI VUOLE SAPERNE DI PIÙ SULLA SCUOLA D'ESPERIENZA SKILL FACTORY

La "Scuola d'Esperienza Skill Factory", per giovani diplomati o laureandi, nasce per favorire l'incontro tra domanda ed offerta di lavoro. Attraverso gli indirizzi professionali proposti, permette agli studenti di acquisire le competenze che servono per entrare nel mondo del lavoro. Un modello innovativo di Scuola/Azienda, che prevede anche il coinvolgimento dei principali STAKEHOLDERS dell'Istruzione, della Formazione e del Lavoro, con l'obiettivo di facilitare la crescita professionale dei giovani.

La "Scuola d'Esperienza Skill Factory" rappresenta un'alternativa ai percorsi di Skill Factory Forma.Temp ed rivolta a:

a) giovani che non hanno ancora le competenze richieste per partecipare ai corsi specialistici Forma.Temp;
b) giovani che a causa degli impegni di lavoro oppure universitari non possono partecipare a percorsi di formazione a tempo pieno, in presenza, come invece viene richiesto dai corsi Forma.Temp;
c) giovani che vogliono scegliere un'indirizzo professionale innovativo per la loro carriera ed intendono adattare il percorso di formazione alle proprie esigenze, anche studiando a distanza, attraverso la piattaforma Skillbook.

Per ricevere maggiori informazioni sugli indirizzi professionali della "Scuola d'Esperienza Skill Factory"  clicca qui.
 

Buon Anno a tutti!!!

Benvenuti alla quindicesima lezione, in questa lezione impareremo a fare chiamate AJAX (Asynchronous JavaScript and XML) per creare applicazioni Web interattive.
Per capire che cos'è la tecnica AJAX  dobbiamo comprendere il significato del termine Asincrono  e le caratteristiche fondamentali del linguaggio XML.

Sincrono e Asincrono
Un'applicazione, una funzione oppure un task applicativo si dicono sincroni quando durante la loro esecuzione non è possibile fare altre operazioni.
Ad esempio un'applicazione Web che utilizza le classiche pagine Html è sincrona, perché durante l'invio di una richiesta, l'utente resta in attesa delle risposta del server e fin quando non viene caricata la nuova pagina Html non può fare altro.
Di base anche i metodi di applicazioni Java oppure C# vengono eseguiti in modalità sincrona; il metodo chiamante resta in attesa fino a quando il metodo chiamato non termina.
Naturalmente questo comportamento può creare dei colli di bottiglia nelle applicazioni, per migliorare la risposta generale delle applicazioni bisogna utilizzare la programmazione multithreading o asincrona.

Attenti a non fare confusione tra programmazione multithreading  e asincrona, nel primo caso intendiamo metodi (gruppi d'istruzioni) che girano contemporaneamente in memoria ciascuno all'interno di un thread, come se fossero tanti programmini in esecuzione allo stesso tempo, nel secondo caso si tratta di funzioni (gruppi d'istruzioni) registrate in una coda (streaming) che vengono eseguite, indipendentemente dal programma principale, all'interno dello stesso thread.

La programmazione asincrona è più performante di quella multithread perchè utilizza un solo thread, senza creare sovracarico (overhead), in termini di risorse,

Linguaggi come Java e C# possono sia usare la programmazione multithreading, associando i task o i metodi a più thread, sia usare la programmazione asincrona, se fanno uso di code.
Javascript non può gestire la programmazione multithreading perché è single-thread,  quindi per migliorare le performance delle applicazioni usa la programmazione asincrona.

Fondamentali per gestire la programmazione asincrona con JavaScript sono le funzioni di callback.

Che cos'è una funzione di callback
Le funzioni di callback sono degli ascoltatori che rilevano la fine di un task asincrono oppure di un evento.
In JavaScript le funzioni di callback possono essere passate come argomenti ad altre funzioni, come se fossero variabili ed essere eseguite quando è richiesto.

Nell'esempio seguente la funzione mandaMessaggioAsincrona  riceve come argomento una funzione di callback anonima; quando arriva la risposta, la funzione di callback visualizza il messaggio di risposta.

messaggio = preparaRichiesta();  
mandaRichiestaAsincrona(messaggio, function (risposta) {  
visualizza(risposta);});  
visualizza("Siamo in attesa di risposta dal server ...");  

Il programma JavaScript seguente mostra il comportamento di una funzione sincrona ed una asincrona.

Che cos'è l'XML
L'XML (eXtensible Markup Language) è un metalinguaggio che si usa per descrivere strutture di dati.
Qualunque documento, modello o tabella si può rappresentare attraverso una struttura ad albero che inizia sempre con una radice, può avere uno o più rami (nodi), che possono contenere una o più foglie, che contengo dati.

Con linguaggio XML, attraverso l'uso di tag personalizzati, si possono creare gli alberi che descrivono una stuttura di dati, come mostra l'esempio successivo.

Immaginate di avere un curriculum così strutturato:

L'albero seguente descrive la struttura del curriculum:

Il documento seguente descrivere il curriculum in linguaggio XML, i Tag personalizzati sono stati creati facendo riferimento agli elementi dell'albero:

Un documento XML si dice ben formato se i tag sono tutti aperti a chiusi <tag>...</tag>, i nomi dei tag non devono contenere spazi e in nessun caso si crea la condizione seguente:  <tag>...<tag1></tag>...</tag1>.

La potenzialità dei documenti XML è quella di essere interpretati dai principali software per la gestione e la visualizzazione dei dati. Ad esempio guardate cosa accade se salviamo il nostro documento XML con il nome curriculum.xml e successivamente lo apriamo con un brawser qualunque:

Il browser interpreta la struttura del documento XML curriculum.xml e con le frecce a sinistra ci permette di chiudere ed aprire i nodi per leggere le informazioni contenute nelle foglie.

Anche JavaScript può interpretare il contenuto di un documento XML, il programma seguente trasforma il file curriculum.xml in un oggetto JavaScript e ne visualizza il contenuto.

Che cosa sono gli schemi XML
Gli schemi sono documenti che servono per descrivere la struttura di un documento XML.
Principalmente si usano due tipi di schemi i DTD e gli XML Schema (XSD).
Inizialmente gli schemi più diffusi erano i DTD (Document Type Definition), documenti di tipo testo che attraverso l'uso di un metalinguaggio permettevano d'impostare le regole fondamentali da rispettare per la formattazione del documento XML, un contratto da rispettare durante la sua composizione, altrimenti non è valido.
In presenza di uno schema un documento XML oltre ad essere ben formato, deve essere anche valido.
Un programma che interpreta un documento XML e lo schema associato si chiama Parser.

Il DTD seguente descrive lo schema da rispettare per comporre il nostro curriculum.

<!ELEMENT curriculum (anagrafica,hobby, competenze, esperienze)>
<!ELEMENT anagrafica (nome,cognome,data_nascita, luogo_nascita,titolo_studio+)>
<!ELEMENT nome (#PCDATA)>
<!ELEMENT cognome (#PCDATA)>
<!ELEMENT data_nascita (#PCDATA)>
<!ELEMENT luogo_nascita (#PCDATA)>
<!ELEMENT titolo_studio (#PCDATA)>
<!ELEMENT hobby (sport,musica)>
<!ELEMENT sport (#PCDATA)>
<!ELEMENT musica(#PCDATA)>
<!ELEMENT competenze (competenze_tecniche*,competenze_relazionali*)>
<!ELEMENT competenze_tecniche (#PCDATA)>
<!ELEMENT competenze_relazionali (#PCDATA)>
<!ELEMENT esperienze (esperienza*)>
<!ELEMENT esperienza (azienda,anno,descrizione)>
<!ELEMENT azienda (#PCDATA)>
<!ELEMENT anno (#PCDATA)>
<!ELEMENT descrizione (#PCDATA)>

!ELEMENT permette di definire i nomi dei tag usati per indicare i nodi e le foglie all'interno del documento XML
Le foglie si distinguono dai nodi perché finiscono con la parola chiave #PCDATA.

Se nell'impostazione della struttura del documento travate i somboli seguenti: ?, + ed * hanno il significato seguente:

?=L'elemento può essere indicato 0 oppure 1 volta;
+=L'elemento può essere indicato 1 oppure più volte;
*=L'elemento può essere indicato 0 oppure più volte.

Per associare il DTD appena creato al nostro curriculum, bisogna aggiungere al documento XML la riga seguente:

<!DOCTYPE curriculum SYSTEM "curriculum.dtd"> 

dove

<!DOCTYPE elemento-radice SYSTEM "nome-file-dtd">

L'esempio seguente mostra dove inserire la riga con l'indicazione del DTD:

Gli XML schema sono anch'essi documenti XML, non sono sostitutivi dei DTD, ma prevedono la possibilità di creare dei modelli dati fortemente tipati e sono molto usati in ambienti di sviluppo dove si usano linguaggi di programmazione tipo C, Java o linguaggi di specifica tipo SQL.

L'esempio seguente mostra uno XML schema complesso:

<?xml version="1.0"?>
<xsd:schema xmlns:xsd="https://www.w3.org/2001/XMLSchema">
    <xsd:element name="DIPENDENTE" type="TipoDipendente"/>
    <xsd:complexType name="TipoDipendente">
        <xsd:sequence>
            <xsd:element name="NOME" type="xsd:string"/>
            <xsd:element name="COGNOME" type="xsd:string"/>
            <xsd:element name="MATRICOLA" type="xsd:string"/>
            <xsd:element name="DATA_NASCITA" type="xsd:date"/>
            <xsd:element name="LUOGO_NASCITA" type="xsd:string"/>
            <xsd:element name="STIPENDIO" type="xsd:double"/>
            <xsd:element name="AZIENDA" type="xsd:string"/>
            <xsd:element name="TITOLO_STUDIO" type="xsd:string"/>
        </xsd:sequence>
    </xsd:complexType>
</xsd:schema>

La tabella seguente descrive i tipi dati disponibili per creare XML Schema:

Tipo di dato         Descrizione
xs:string                 Stringa di caratteri
xs:integer              Numero intero
xs:decimal             Numero decimale
xs:boolean            Valore booleano
xs:date                  Data
xs:time                  Ora
xs:uriReference   URI

Che cos'è AJAX
AJAX non è un linguaggio di programmazione, ma una tecnica che impiega JavaScript ed XML in modo Asincrono per creare applicazioni Web Interattive, l'acronimo è:

AJAX = Asynchronous JavaScript And XML

Quando l'utente che usa una pagina HTML genera un evento predefinito, la funzione JavaScript associata, crea un oggetto di tipo XMLhttpsRequest() con i dati da inviare al Server in modo asincrono.

In Microsoft Internet Explorer, l'oggetto XMLhttpsRequest viene istanziato come ActiveX.

Nell'esempio seguente valutiamo la tipologia di browser utilizzato per selezionare il tipo di oggetto da creare:

if (window.XMLhttpsRequest) {
xmlhttpsReq = new XMLhttpsRequest();
}
else if (window.ActiveXObject) {
xmlhttpsReq = new ActiveXObject("Microsoft.XMLhttps");
}

Per inviare la richiesta si utilizza la funzione open, come mostra l'esempio seguente:

xmlhttpsReq.open('POST', strURL, true);

Dopo l'invio della richiesta viene attivata una funzione di callback allo scopo di gestire la risposta del server.

xmlhttpsReq.onreadystatechange = function() {
//Se lo stato è completo
if (this.readyState == 4 && this.status == 200) {
/* Aggiorno la pagina con la risposta ricevuta dalla precendete richiesta dal web server.
Quando la richiesta termina il risultato è disponibie come responseText.*/
aggiornaPagina(this.xmlhttpsReq.responseText);
}
}

La proprietà readystate della richiesta, permette di controllare gli stati della richiesta, di seguito gli stati possibili:

• 0 (UNINITIALIZED), la richiesta è stata inizializzata (prima di chiamare open());
• 1 (LOADING), la richiesta è in stato di caricamento, non è ancora stata inviata (prima di chiamare send());
• 2 (LOADED), la richiesta è stata inviata e sarà processata(solitamente a questo punto si può prendere il content headers dalla risposta);
• 3 (INTERACTIVE), la richiesta è processata, il server non ha ancora inviato tutta la risposta, ma ne possono essere disponibili alcune parti;
• 4 (COMPLETE), la risposta è completa, può essere presa e utilizzata.

La proprietà status della richiesta, permette di controllare se si sono verificati errori, di seguito i valori possibili:

• 200 Risposta ottenuta con successo
• 404 Pagina non trovata
• 500 S'è verificato un errore sul Server

Laboratorio
Per svolgere questo Laboratorio serve Visual Studio Code oppure un IDE equivalente e node.js.
Inoltre si devono installare nella cartella /node/app-autocompletamento, dove sono stati salvati i file scheda.html e AppAutoCompletamento.js, i moduli express e body-parser, con i comandi seguenti:

1. npm install express --save
2. npm install body-parser

L'obiettivo del Laboratorio è quello di creare una scheda dove inserire un nome e visualizzarlo.

L'applicazione utilizza AJAX per suggerire all'utente dei nomi. L'utente per scegliere il primo nome della lista, può premere la freccia giù, come mostra l'immagine seguente;

Creiamo la scheda (scheda.html):

Creiamo l'applicazione (AppAutoCompletamento.js):

Per avviare l'applicazione, procedete come indicato di seguito:

1. portatevi nella cartella: /node/app-autocompletamento;
2. avviate l'applicazione con il comando: node appautocompletamento;
3. avviate il Browser;
4. inserite l'url seguente: https://localhost:8090/app-autocompletamento/rest/scheda.html.

Arrivederci alla prossima lezione

<< Lezione precedente

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress

Danzare insieme, guidati da un programma scritto dagli studenti con Scratch, è l'originale iniziativa organizzata dagli insegnanti dell'Istituto d'Istruzione Superiore Marconi di Torre Annunziata (NA), per promuovere la settimana europea del CODING!

Il brano, ballato da tutti gli studenti, seguendo le indicazioni del computer, era l'inno ufficiale dell'evento "Ode the Code!" (clicca qui per ascoltarlo).

Dopo la danza, gli studenti e gli insegnanti, hanno comunicato la partecipazione ufficiale all'evento con progetti molti interessanti, sviluppati anche durante le attività di Alternanza Scuola Lavoro, come il "POPPEA PROJECT" realizzato in collaborazione con il MiBACT.

Per vedere il video a schermo intero spostate il puntatore del mouse sul frame e cliccate su youtube.
 

All'evento siamo stati invitati anche noi, per parlare agli studenti di "Internet delle cose", con l'obiettivo di far comprendere l'importanza del coding nell'ambito dei Big Data.
Anche se l'argomento da trattare non era  semplice, con il supporto di Excel ed un semplice esempio pensiamo di essere riusciti a trasmettre almeno i concetti fondamentali dell'IoT.  

Anche per l’edizione 2017 di Europe Code Week la Commissione Europea ha deciso di riconoscere il contributo straordinario delle scuole che riescono a coinvolgere almeno la metà dei loro alunni, rilasciando un certificato di eccellenza.  Se il tasso di partecipazione sarà superiore al 50% la scuola riceverà il certificato di eccellenza dalla Commissione Europea.

Se volete maggiori informazioni per la partecipare cliccate qui.

Per conoscere le iniziative avviate dalle altre scuole europe oppure per registrare il vostro progetto, collegativi al sito: https://events.codeweek.eu/

Inoltre vi segnaliamo anche un'altra iniziativa molto importante per le scuole, a cui vi invitiamo a partecipare:

"Firmare la petizione per chiedere all'UNESCO di riconoscere gli Algoritmi come patrimonio dell’umanità"

Per ricevere maggiori informazioni clicca qui.

Benvenuti alla quattordicesima lezione, in questa lezione completeremo il Server Web Dinamico creato nella lezione precedete aggiungendo la gestione di request di tipo POST ed i Cookies.
Come già accennato nelle lezioni precedenti, i parametri, inviati dal Browser al Server Web, con una request di tipo POST, non sono visibili nell'URL, perché vengono inseriti nella richiesta come dati.

E' importane ricordare che le richieste di tipo POST si possono creare solo con un tag <form>, impostando l'attributo method con il valore post e sono più sicure, perché i parametri non sono visibili nella barra degli indirizzi del Browser.

Le funzioni JavaScript seguenti, vi mostrano come leggere i parametri da una richiesta di tipo GET o da una di tipo POST.

Che cosa sono i Cookies

I cookies (in inglese, "biscotti") sono piccoli file di testo, creati sul disco del Browser (Client) da applicazioni web oppure da siti Internet. Si usano per registrare sui Client, informazioni utili all'applicazione, come ad esempio il nome utente oppure l'identificativo della sessione corrente.

Una response oltre a contenere la pagina HTML da visualizzare sul Browser, può contenere anche i cookies da registrare sul disco del Client.

i cookies registrati sui dischi del Client, vengono organizzati in base al dominio d'origine. Quando l'utente si ricollega alla stesso dominio, il Browser li inserisce nelle request e li trasmette di nuovo ai Server Web che li ha registrati.

Purtroppo, ormai troppo spesso, i cookies vengono usati per obiettivi commerciali, perché permettono di taracciare l'attività sul web di un utente per profilarne le abitudini ed i comportamenti, quindi è opportuno configurare il propio Browesr per decidere in che modo gestire i cookies che ricevete, come mostra l'esempio seguente:

Per maggiori informazioni su come abilitare o disabilitare i cookie sul proprio Browser clicca qui.

Come si creano i cookie con node.js

Per creare i cookies con Node.js bisogna installare il modulo cookies con il comando seguente:

npm install cookies

e successivamente richiederlo nell'applicazione con il comando:

var Cookies = require( "cookies" )

Per impostazione predefinita, i cookies sono condivisi da tutte le pagine di uno stesso dominio, per limitare la presenza di cookies a determinate sottocartelle di un sito Web bisogna impostare la proprietà Path, se questa la proprietà dei cookies non viene impostata, valgono le impostazioni predefineite.

I cookies sono cancellati automaticamente dal computer dell'utente allo scadere della sessione di lavoro, per farli vivere più a lungo bisogna impostare la proprietà expires.

La proprietà expires permette d'indicare la data di scadenza di un cookie, come mostra l'esempio seguente:

expires: new Date(Date.now() + 900000)

dove new Date crea un oggetto di tipo Data, con valore uguale alla data odierna (Data.now) più 900.000 secondi (circa dieci giorni).

Il testo di un cookie, non può superare i 4 KByte e può contenere solo valori alfanumerici. Simboli diversi, come ad esempio spazi, virgole e punti, devono essere sostituiti dai corrispondenti codici di escape.

Per trasformare valori non alfanumerici in codici escape si usa la funzione escape(stringa), come mostra l'esempio seguente:

Per trasformare i codici escape nei caratteri corrispondenti si usa la funzione unescape(stringa),  come mostra l'esempio seguente:

Un client può contenere al massimo 300 cookie, 20 per server (dominio).

Se per motivi di sicurezza volete impostare la trasmissione dei cookie  con il protocollo https (crittografia SSL), dovete impostare la proprietà del cookies secure a true.

Implementiamo e Testiamo il ServerWeb

Gli steps seguenti mostrano come implementare il Server Web:

1) Aprite il prompt del vostro Sistema Operativo e create la directory ServerWeb;
2) Copiate il codice del programma JavaScript (Appendice) StartServerWeb nel blocco note e salvatelo nella directory ServerWeb con il nome StartServerWeb.js;
3) Nella directory ServerWeb create la sottodirectory public;
4) Copiate il codice della pagina Html (Appendice) index nel blocco note e salvatelo nella sottodirectory public con il nome index.html;
5) Copiate il codice della pagina Html (Appendice) form nel blocco note e salvatelo nella sottodirectory public con il nome form.html;
6) Copiate il codice della pagina Html (Appendice) scheda nel blocco note e salvatelo nella sottodirectory public con il nome scheda.html;
7) Copiate il codice della pagina Html (Appendice) bandiere nel blocco note e salvatelo nella sottodirectory public con il nome bandiere.html;
8) Copiate il codice della pagina Html (Appendice) bandieraItalia nel blocco note e salvatelo nella sottodirectory public con il nome bandieraItalia.html;
9) Copiate il codice della pagina Html (Appendice) bandieraFrancia nel blocco note e salvatelo nella sottodirectory public con il nome bandieraFrancia.html;
10) Copiate il codice della pagina Html (Appendice) bandieraBelgio nel blocco note e salvatelo nella sottodirectory public con il nome bandieraBelgio.html;

node StartServerWeb

Se il Server Web non parte, installate i moduli richiesti, ad esempio:

npm install querystring.

npm install cookies

Gli steps seguenti mostrano come testare il Server Web:

1) Collegatevi al server con il comando localhost:8090
2) Dal menu principale scegliete Accedi ed inserite il vostro nome e cognome, come mostra l'esempio seguente:

3) Quando cliccate su accedi, vengono creati i due cookies nome e cognome e attraverso la response vengono registrati sul vostro client.
Dopo l'oprazione appare il messaggio seguente:


4) Successivamente se provate ad accedere di nuovo, appare il messaggio seguente:

5) Tornate alla home e cliccate su esci, questa operazione cancella i due cookies, l'operazione è confermata dal messaggio seguente:

5) Tornate alla home e riprovate ad accedere, questa volta potete eseguire di nuovo l'accesso:

A P P E N D I C E

StartServerWeb.js

var https = require('https');
var url = require('url');
var fs = require('fs');
var qs = require('querystring');
var Cookies = require( "cookies" )
var server = https.createServer(function(request, response){
    var path = url.parse(request.url).pathname;
    var pattern=/.html/i;
    if (path=='/'){
        // Se la risorsa richiesta è /
        leggiIndexHtml(response);
    } else if (path=='/set') {
        setCookies(request, response);
    } else if (path=='/esci') {
        clearCookies(request, response);
    } else if (pattern.test(path)) {
        // Se la risorsa richiesta è una pagina html
        if(path=='/form.html'){
            var trovati=parseCookies (request);
            if(trovati.length==2){
              giaConnesso(trovati,response);         
            } else {
              leggiHtml(path,response);
            }
        } else {
        leggiHtml(path,response);
        }
    } else if(path=='/bandiera') {
        // Se la risorsa richiesta è replica
               var inizio='';
               var queryData;
               queryData = url.parse(request.url, true).query;
               var scelta=parseInt(queryData.scelta);
               switch (scelta){
                   case 1:
                        leggiHtml("/bandieraItalia.html",response);
                        break;
                   case 2:
                        leggiHtml("/bandieraFrancia.html",response);
                        break;
                   case 3:
                        leggiHtml("/bandieraBelgio.html",response);
                        break;
               }
               
               //var scelta=queryData.
    } else       // Se il path non corrisponde a nessuno dei casi previsti viene visualizzato un messaggio d'errore
      {
        if (request.method == 'GET'){
            if(/\?/.test(request.url)){
                doGet(request,response);
            } else
           {
               send404(response);               
           }
               
         } else    if (request.method =='POST'){
             doPost(request,response);
         }
    }
});

// Imposta il Server in ascolto sulla porta 8090
server.listen(8090, function() {
console.log("Listening...8090");
});

// Funzione che legge i parametri da una richiesta di tipo get
function doGet(request,response){
               var body='';
               var queryData;
               queryData = url.parse(request.url, true).query;
               response.end(JSON.stringify(queryData));
               }

// Funzione che legge i parametri da una richiesta di tipo post
function doPost(request,response){
        var body='';
        var post;
        request.on('data',function (data){
        body+=data;
        });
        request.on('end',function(){
              post= qs.parse(body);
              response.end(JSON.stringify(post));
          });
        }

// Funzione che legge i cookies dalla richiesta        
function parseCookies (request) {
    var list = {},trovati=[], rc = request.headers.cookie, inizio=0;
        list=rc.split(';');
        for(var x=0;x<list.length;x++){
           if(list[x].indexOf('nome')!=-1){
              inizio=list[x].indexOf('nome');
              trovati.push(list[x].substr(inizio+5));
           } else if(list[x].indexOf('cognome')!=-1){
              inizio=list[x].indexOf('cognome');
              trovati.push(list[x].substr(inizio+8));
           }   
        }
    return trovati;
}

// Funzione che legge le pagine html
function leggiHtml(path, response){
        fs.readFile("public" + path, function(error, data){
            if (error){
               send404(response);
            }
            else {
                response.writeHead(200, {"Content-Type": "text/html"});
                response.write(data, "utf8");
            }
            response.end();
        });    
}

// Funzione che legge la pagina index.html
function leggiIndexHtml(response){
        fs.readFile("public" + '/index.html', function(error, data){
            if (error){    
               send404(response);
            }
            else {
                response.writeHead(200, {"Content-Type": "text/html"});
                response.write(data, "utf8");
            }
            response.end();
        });    
}

// Funzione che verificare se l'utente è già connesso
function giaConnesso(trovati, response){
        response.write("<html>");
        response.write("<head>");
        response.write("<meta charset='UTF-8' />");
        response.write("</head>");
        response.write("<body>");
        response.write("Sei già connesso come:"+trovati[1]+" "+trovati[0]+"<br/>");
        response.write("<a href='/'>Torna alla home</a><br/>");
        response.write("</body>");
        response.write("</html>");
        response.end();
}
// Funzione per creare i cookies
function setCookies(request, response){
        var body='';
        var post;
        request.on('data',function (data){
        body+=data;
        });
        request.on('end',function(){
        post= qs.parse(body);
        var cookies1 = new Cookies( request, response);
        cookies1.set('nome',post.nome,{expires: new Date(Date.now() + 900000)});
        var cookies2 = new Cookies( request, response);
        cookies2.set('cognome',post.cognome,{expires: new Date(Date.now() + 900000)});
        response.write("<html>");
        response.write("<head>");
        response.write("<meta charset='UTF-8' />");
        response.write("</head>");
        response.write("<body>");
        response.write("Accesso effettuato con successo!<br/>");
        response.write("<a href='/'>Torna alla home</a><br/>");
        response.write("</body>");
        response.write("</html>");
        response.end();
        });
}
 
// Funzione per la cancellazione dei cookies
function clearCookies(request, response){
    var cookies1 = new Cookies( request, response);
    var cookies2 = new Cookies( request, response);
    cookies1.set('nome','',{maxAge: -1});
    cookies2.set('cognome','',{maxAge: -1});
        response.write("<html>");
        response.write("<head>");
        response.write("<meta charset='UTF-8' />");
        response.write("</head>");
        response.write("<body>");
        response.write("Utente disconnesso!<br/>");
        response.write("<a href='/'>Torna alla home</a><br/>");
        response.write("</body>");
        response.write("</html>");
        response.end();
}
// Funzione per la gestione dell'errore 404
function send404(response) {
    response.writeHead(404, {'Content-Type': 'text/plain'});
    // Scrive nella response il messaggio "Error 404: not found"
    response.write("Error 404: not found");
    // Invia la risposta al Client
    response.end();
}

// Funzione per la gestione dell'errore 500
function send500(response) {
    response.writeHead(500, {'Content-Type': 'text/plain'});
    // Scrive nella response il messaggio "Error 500: internal server error"
    response.write("Error 500: internal server error");
    // Invia la risposta al Client
    response.end();
}

index.html

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Home Page</title>
    </head>
<body>
<h4>*** MENU DI SCELTA ***</h4>
<a href="form.html">A c c e d i</a><br/>
<a href="bandiere.html">B a n d i e r e</a><br/>
<a href="scheda.html">T e s t - P O S T</a><br/>
<a href="esci">E s c i</a></br>
</body>
</html>

form.html

<html>
<head>
        <meta charset="UTF-8" />
</head>
<body>
<div>

SCHEDA DI ACCESSO
<div style="background-color:#B9C2CB;padding:10px;left:50px;top:50px;width:250px;height:80px;border:2px solid #000000;border-radius:6px">
<form name="0.1_scheda" method="post" action="set" >  
<table>
<tr><td>Nome:</td><td><input type="text" name="nome"></td></tr>
<tr><td>Cognome:</td><td><input type="text" name="cognome"></td></tr>
<tr><td><input type="submit" value="ACCEDI"></td><td><input type="reset" value="RESET"></td></tr>
</table>
</form>
</div>

</div>
</html>
<a href="/">Torna alla home</a>

</body>
</html>

bandiere.html

<html>
<head>
<title>Skill Factory - Impariamo a programmare con JavaScript: Lezione 14 - (Server Web)</title>
</head>
<body>
*** M E N U  B A N D I E R E ***<br/>
<br/>
<a href='bandiera?scelta=1'>I T A L I A</a><br/>
<a href='bandiera?scelta=2'>F R A N C I A</a><br/>
<a href='bandiera?scelta=3'>B E L G I O</a><br/><br/>
<a href='/'>Torna alla Home</a><br/>
</body>
</html>

scheda.html

<html>
<head>
        <meta charset="UTF-8" />
</head>
<body>
<div>

<div style="background-color:#7aa45e;padding:10px;left:50px;top:50px;width:300px;height:150px;border:2px solid #000000;border-radius:6px">
<form name="0.1_scheda" method="post" action="test" >  
<table>
<tr><td>Nome:</td><td><input type="text" name="nome"></td></tr>
<tr><td>Cognome:</td><td><input type="text" name="cognome"></td></tr>
<tr><td>Età:</td><td><input type="text" name="eta"></td></tr>  
<tr><td>e-mail:</td><td><input type="text" name="email"></td></tr>
<tr><td><input type="submit" value="SALVA"></td><td><input type="reset" value="RESET"></td></tr>
</table>
</form>
</div>

</div>
</html>
<a href="/">Torna alla home</a>

</body>
</html>
 

bandieraItalia.html

<html>
<head>
<title>Skill Factory - Impariamo a programmare con JavaScript: Lezione 12 - (Server Web Statico)</title>
</head>
<body>
<div style="width:210px;text-align: center;">
ITALIA
</div>
<div style="float:left;background-color: #009246; width:70px; height:100px; border: 1px solid #000000;" >
</div>
<div style="float:left;background-color: #ffffff; width:70px; height:100px; border: 1px solid #000000;">
</div>
<div style="float:left;background-color: #ce2b37; width:70px; height:100px; border: 1px solid #000000;">
</div>
<div style="width:210px;text-align: center;">
<a href="index.html">Torna al menu</a><br/><br/>
</div>
</body>
</html>

bandieraFrancia.html

<html>
<head>
<title>Skill Factory - Impariamo a programmare con JavaScript: Lezione 12 - (Server Web Statico)</title>
</head>
<body>
<div style="width:210px;text-align: center;">
FRANCIA
</div>
<div style="float:left;background-color: #002e7b; width:70px; height:100px; border: 1px solid #000000;" >
</div>
<div style="float:left;background-color: #ffffff; width:70px; height:100px; border: 1px solid #000000;">
</div>
<div style="float:left;background-color: #de0029; width:70px; height:100px; border: 1px solid #000000;">
</div>
<div style="width:210px;text-align: center;">
<a href="index.html">Torna al menu</a><br/><br/>
</div>
</body>
</html>

bandieraBelgio.html

<html>
<head>
<title>Skill Factory - Impariamo a programmare con JavaScript: Lezione 12 - (Server Web Statico)</title>
</head>
<body>
<div style="width:210px;text-align: center;">
BELGIO
</div>
<div style="float:left;background-color: #000000; width:70px; height:100px; border: 1px solid #000000;" >
</div>
<div style="float:left;background-color: #ffd100; width:70px; height:100px; border: 1px solid #000000;">
</div>
<div style="float:left;background-color: #e3001b; width:70px; height:100px; border: 1px solid #000000;">
</div>
<div style="width:210px;text-align: center;">
<a href="index.html">Torna al menu</a><br/><br/>
</div>
</body>
</html>

Arrivederci alla prossima lezione!!! 

<< Lezione precedente           Lezione successiva >>

T U T O R I A L S    S U G G E R I T I

• APP Mania
• Excel delle Meraviglie
• Ricominciamo ... dal Linguaggio SQL
• Come sviluppare un Sito con Wordpress