Lezione dal corso Web Development
Abbiamo il nostro sito pubblicato.
Quello che ci resta da fare é collegare la nostra forma di contatti l'abbiamo creata strutturalmente completa, però ancora non invia dati.
Dicevamo nelle precedenti elezioni che servirà una parte server.
In questo caso la parte serve del salvataggio dei dati ce la fornisce Netflix.
E adesso che abbiamo completato il deploy sui loro sistemi su questo servizio, possiamo quindi agg la nostra forma alla funzionalità di salvataggio forme di Nedley.
Prima di passare a vedere la documentazione di Netflix su come generare la nostra forma, inviare dati, io andrei un attimo a fare qualche altro piccolo fine tuning sulla forma.
Innanzitutto c' è qualcosa che ancora non mi convince.
Ovvero l'utente potrà in inviare i suoi dati, ma fondamentalmente potrà scrivere un po', quello che vuole in questi campi in questi campi di input, quindi è buona norma cercare di validare quello che è l'input dell'utente e cercare di forzare un formato di di vincolare quella che può essere l'inserimento dati dell'utente per guidarlo meglio e anche noi ricevere dei dati più puliti.
Quindi cosa posso utilizzare HTML cinque a da diverso tempo introdotto degli attributi da associare ai campi di input per poter vincolare per stabilire delle regole di validazione riguardo agli input che l'utente può inserire nei campi.
Esiste una documentazione molto chiara, completa per esempio tra le pagine della documentazione di mozilla, dove illustra i differenti attributi con le varie proprietà.
É quello che è possibile quindi andare a validare.
Io utilizzero' soltanto alcuni.
Torno sul codice, comincerei proprio dal primo campo, quindi abbiamo il nome che sicuramente un campo obbligatorio.
In questo caso inserirò un attributo required per indicare che è qualcosa che va necessariamente inserito.
Stessa cosa farei per il campo i may è un campo obbligatorio e, perché no, anche il subject.
Per quanto riguarda la tec star invece la lascio libera per chi, come abbiamo visto, è opzionale.
Salvo ricarica la pagina e vediamo cosa accade se prova a cliccare sand baths, ecco che compare un piccolo pop-up questo papà mi avvisa e lo stesso browser a mostrarlo mi avvisa che il mi avvisa che il campo full-time obbligatorio per cui io dovrò necessariamente inserirlo.
Provo a fare un altro summit, vediamo cosa accade.
Ok anche il campo, ma era appunto obbligatorio.
Inserisco però in questo caso una stringa caso.
Ecco che già mentre digito compare un pop-up, in questo caso l'aver utilizzato a codice.
Il typ email per questo campo, sebbene visivamente, lo rende simile a un campo testuale.
In realtà il browser riesce a riconoscere quello che un indirizzo e-mail valido, per cui adesso proverò a inserire filippo chiocciola buljanoff punto carriers e vediamo che l'errore è sparito.
Problemi al rinvio ok c' è ancora da settare.
Logge inseriro' non lo so richiesta info perfetto ora prima di fare un summit si è vero il messaggio obbligatorio però potrei anche decidere di limitare la quantità di testo che l'utente possa inviare al server, quindi potrei decidere di vincolare il numero di caratteri che l'utente può scrivere all'interno del campo massaggi come di qualunque altro campo.
Però in particolare qui dentro vorrei lì limitare un po' questa capacità facciamo una piccola prova.
Torno quindi sul codice e utilizzero' un attributo che è chiamato max length con il quale potrò specificare un limite massimo di caratteri inseribili in un campo di test.
In questo caso facciamo una prova con dieci giusto per fare una prova salviamo, ricarichiamo e scrivendo adesso un messaggio a caso vediamo che oltre dieci caratteri non potrò più inserire.
Per cui io adesso magari estende Ray un po'.
Questo limite la metterei Non lo so, magari facciamo cinquecento e perché no? Magari nella Labour specifichiamo anche max cinquecento lanz, giusto per dare un'indicazione all'utente, così capisce come mai non riesce a inserire piu' altro testo.
Ok, quindi in questo momento io potrò inserire fino a cinquecento caratteri.
Bene, abbiamo introdotto la validazione html cinque.
A questo punto potro' inviare i miei dati al server.
Guardiamo adesso la documentazione di Netflix fa in merito alle forme.
Ci suggerisce come sia facile creare delle forme funzionanti istantaneamente e ci suggerisce come sia come basti soltanto aggiungere al nostro markup è attributo Thrifty, un attributo custom a livello di tag form e assegnando poi un nome sia la forma che hai ai singoli campi.
Ora attributo name è molto importante perché determina la chiave con cui l'informazione che arriva con la form viene identificata dal server.
Questo lo faremo con Netflix, ma vale anche nel caso in cui vi invia assim oh, dati a un server esterno e un server nostro.
Quindi torno mi sposto sulla form nel nostro html aggiungero' Netflix al tag form é un suo nome che potrei chiamare del contact.
Adesso aggiungo il nome ai singoli campi.
Ho inserito in ogni campo per cui farei adesso un deploy online e dopo facciamo un test.
Torno sulla mia cyber.
Aggiungo il file che ho modificato in stage.
Inserisco un commento potrebbe essere nei tuoi form, salvo il mio commit e faccio un pusher.
Bene, abbiamo pisciato le modifiche su GitHub.
Andiamo a vedere se il nostro codice è stato deplorato correttamente.
Torno in dashboard su Netflix.
Ritorno sul mio sito dal per che mi ha mi ha dato e scrollo dritto alla parte dei contatti.
A questo punto faccio un test di invio.
Metto tutti i campi obbligatori.
Filippo Mail metto una fittizia facciamo filippo chiocciola testa punto com Richiesta di info come sagge e ciao richiedo invio messaggio di te anch'io da parte di Netflix che ci conferma l'invio dei nostri dati e clicco su Back to oversight.
Ok, sono ritornato sul sito verifichiamo il dashboard su Netflix se i dati sono arrivati correttamente, quindi torno sulla dashboard, seleziono la voce forms dal menu di navigazione e vediamo come già c' è un come già ci indica che tra le forme attive, cioè la nostra forma di contatto, clicco e al suo interno.
Vediamo le le vedremo l'elenco di tutti i messaggi ricevuti dal dal contact form online sulla nostra pagina e qui c' è la mia richiesta di contatto.
Clicchiamo vedo comparire tutti i dati come come avevo detto prima, l'importanza di assegnare un nome a ogni campo ci consente di poter definire le chiavi con cui identificheremo poi i rispettivi valori, quindi full name, emails e massaggi.
In questo modo ho creato in pochissimo tempo un sistema di contatto con cui poi posso andare a recuperare tutti i messaggi ricevuti dalla dashboard di Netflix.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.