Dopo la scorsa lezione di Bootstrap, oggi siamo qui per proseguire con voi il percorso di questo corso con un’altra nuova lezione arrivando a bene a 4 lezioni totali affrontate fino ad ora. Inoltre come sempre vi ricordiamo che questo corso è nato da una collaborazione tra i due blog di tecnologia e informatica, Falco96 e WorldTecno.
Iniziamo! In questa lezione andremo a vedere come si implementano i form con il nostro caro framework Bootstrap. Vedremo di conseguenza quali classi vanno impiegate, come devono essere implementate e il loro funzionamento. Sempre inerenti ai form, vedremo anche il funzionamento e l’implementazione delle classi di input che vanno inserite all’interno dei form, e che permettono quindi al form di “prendere vita” diciamo così, in verità quello che vogliamo dire e che senza questi elementi di input un form non avrebbe molto senso! ;-P Un esempio di queste, e che vedremo anche in questa lezione, sono le textarea. Come ultima parte della lezione, andremo invece a vedere, cosa sono e come si implementano i Modal, vedremo quindi, sempre inerente a quest’ultimo argomento appena citato, un esempio pratico per capire meglio il loro funzionamento e come devono essere implementati.
Implementazione dei form con Bootstrap
Partendo con ordine, quindi parliamo dei form e della loro implementazione. I form sono degli elementi molto diffusi all’interno di siti web o applicazioni web (es. Social Network), forse i più diffusi, i quali servono all’utente per interagire con alcune sezioni del sito, e consentendogli, ad esempio, di inserire dei dati che poi dovranno essere eleborati per restituire un risultato e memorizzati per poi restituire sempre risultati diversi ai vari utenti che hanno registrato dei dati in un qualche database che si trova su un’altro PC, detto “server”, dislocato nella rete globale, che per tutti gli utenti non esperti di sistemi e reti si chiama semplicemente Internet. Inoltre i form sono molto utili anche per poter instaurare una comunicazione e un passaggio dei dati tra uno script(codice sorgente) php e un’altro, che magari si trovano in directory(cartelle) separate. Per capire più nel dettaglio il funzionamento dei form, vi consiglio di leggervi la lezione dedicata nel corso php di Falco96.
Quindi ora andiamo a vedere un esempio di implementazione classica di un form senza utilizzare il framework bootstrap, in modo da farvi capire le sostanziali differenze di implementazione e ovviamente anche quella dei risultati finali di entrambe.
Ecco come viene visualizzato all’utente finale
Possiamo vedere che con questo metodo, i form vengono visualizzati secondo lo standard HTML di rappresentazione su qualsiasi browser voi stiate usando. Questo vuol dire, che, a seconda dello standard del linguaggio utilizzato, la visualizzazione di un semplice form può cambiare leggermente(es. HTML5 renderà il form diverso da quello visto qui sopra)!
Vediamo ora lo stesso form implementato però con l’utilizzo di Bootstrap
Dal codice, possiamo notare, che abbiamo usato la classe form-control, per permettere al framework bootstrap, di poter gestire ogni componente del form e adattarlo anche al proprio CSS in modo da avere una visualizzazione grafica degli elementi al suo interno oltre che una parametrizzazione grafica differente del form stesso. Abbiamo poi usato la classe btn btn-primary, per creare un pulsante principale, i pulsanti sono i protagonisti della lezione precedenti ricordi? Altrimenti ti consigliamo di vederti prima la scorsa lezione!
Vediamo come viene visualizzato questo form
Come possiamo notare da quest’ultimo screen, ogni elemento di testo occupa l’intera pagina, ma niente panico, ci siamo qui noi! Per regolare le dimensioni dei componenti del form, dobbiamo andare ad agire sul sistema di layout della pagina o del form stesso. Ad esempio se noi andiamo ad impostare un layout a griglia, con la classe container, e gli andassimo, con il css, ad impostare una determinata larghezza, tutti gli elementi contenuti all’interno del layout verranno adattati di conseguenza! Visto come è flessibile e potente Bootstrap? 😀
Vediamo ora un esempio pratico di implementazione del codice
In seguito alla modifica apportata al codice standard, eccovi il risultato previsto
Come possiamo notare, di default, quando andiamo ad impostare una larghezza molto bassa, in questo caso solo 400 pixel, il framework sposta e adatta tutti gli elementi al centro della pagina, ma se noi invece li volessimo allineati verso il bordo sinistro, per esempio, non dobbiamo fare altro che specificarlo nel nostro CSS andando ad impostare dei parametri diversi! Tutto qui niente di più semplice, no?
Continuando con la lezione, passiamo a vedere un’esempio di implementazione pratica dei vari elementi di un form.
Le Textarea
Le textarea dei form non sono altro che quelle “aree di testo” in cui un utente può inserire del testo, immagini, ecc…, ma in particolare quando si parla di textarea di un form in genere si fa riferimento ad un area in cui si inserisce il messaggio che un utente(mittente) vuole spedire ad un altro utente(destinatario).
Detto ciò, vediamo come prima cosa, come si presenta una textarea di un form, senza applicare alcuna classe del framework bootstrap,
Ecco quindi come viene visualizzata all’interno della nostra pagina html,
Ora vediamo invece come implementare la stessa textarea, ma applicandovi il framework bootstrap,
Possiamo notare che la classe utilizzata, anzi le classi utilizzate, in questo caso per la textarea sono: form-control custom-control.
Vediamo infine come viene visualizzata dopo aver utilizzato su di essa le classi del framework boostrap,
Direi che la parte riguardante i form sia conclusa, per il momento! Successivamente, in particolare nelle prossime lezioni di questo corso tratteremo tutti gli altri elementi di un form analizzandone tutte le caratteristiche.
Modal(detti in italiano modali)
I Modal possono essere visti come dei pulsanti che una volta premuti generano dei veri e propri box-contenitori di elementi attraverso un effetto “pop-up over“(effetto di caricamento di un elemento su un pannello invisibile al di sopra della pagina in cui ci si trova), questi ultimi sono gestiti dal framework bootstrap attraverso il linguaggio Javascript, e consentono di mostrare per l’appunto dei contenitori di altri elementi, e ciò avviene proprio quando l’utente cliccando su un determinato pulsante o link, richiama attraverso l’azione appena effettuata la funzione onClick del linguaggio Javascript la quale raccoglie l’evento generato dal click del mouse o di un pressione su schermo(se si utilizza un dispositivo di tipo touchscreen) sul pulsante e quindi attiva la classe css che costruisce il componente modal su un pagina trasparente sovrapposta a quella in utilizzo(siamo stati ripetitivi in questa parte perchè vogliamo farvi comprendere a pieno come avviene la creazione del modale una volta implementato il suo codice). Come già detto, quindi, questa determinata funzione Javascript controlla se l’utente ha premuto un determinato pulsante o link, se lo ha fatto, allora genera un evento, chiamato per convenzione, elemento click, che fa eseguire ad un programma creato in linguaggio Javascript, una determinata operazione o una serie di operazioni, che in questo caso portano alla visualizzazione di un modal, il quale può essere usato come ulteriore contenitore dove poter comunicare all’utente un qualche messaggio o avviso, o poter far compiere una determinata operazione ad un utente, come ad esempio l’inserimento di alcuni dati o settaggi da salvare per visualizzare ad esempio la propria area utente nel modo voluto. Possiamo quindi chiudere qui il discorso generale sui modal, dicendo che in essi è possibile inserire qualsiasi cosa uno sviluppatore voglia inserire, quindi potete d’ora in poi dare sfogo alla vostra creatività!
Vediamo ora un esempio pratico,
Innanzi tutto possiamo notare che nel codice abbiamo dovuto inserire un pulsante, in questo caso un link che tramite la classe btn btn-primary diventa un pulsante come uno di quelli visti nelle lezioni precedenti. Successivamente, in questo pulsante, bisogna inserire il data-toggle, specificando, con la parola chiave modal, che ci si sta riferendo ad un modal. Poi in data-target, specificare il nome del modal, che sarà poi l’ID del modal che dovrà apparire sullo schermo dell’utente che l’ha attivato. Il modal, gestito da svariate classi bootstrap, deve avere obbligatoriamente lo stesso nome specificato nel data-target del pulsante di chiamata! Altrimenti aspettatevi brutte sorprese! ;-P
Nella live, che troverai in fondo all’articolo, vedrai più nel dettaglio questo esempio. Troverai qui tutta la documentazione, che ti può servire.
In conclusione
Questa che hai appena letto era tutta la carrellata di argomenti che abbiamo trattato nella quarta lezione. Speriamo che questa nuova lezione ti sia piaciuta e ci auguriamo di averti aiutato a conoscere e ad imparare a padroneggiare nuovi aspetti utili di questo framework che potrai utilizzare per i tuoi progetti! Inoltre speriamo di avere suscitato ulteriore interesse nel proseguire questo corso insieme a noi! Se questa lezione ti è veramente piaciuta faccelo sapere con un bel like al video e all’articolo! 😉 e lascia un commento per qualsiasi cosa tu voglia farci sapere! 😀 Prima di salutarti vogliamo ricordarti che qui di seguito ti lasciamo una serie di esercizi da svolgere per apprendere più velocemente questi nuovi argomenti e accrescere sempre di più le tue competenze con questo potente framework! Eccoti gli esercizi che proponiamo con questa lezione:
- Realizza un form, con le rispettive classi bootstrap, dove poni un semplice questionario in cui l’utente dovrà inserire qualche dato personale, quale il nome, il cognome, e altri dati simili. Accetta questi dati tramite il metodo post (visto nel corso php), e stampali all’utente all’interno di un avviso di info (quindi usando alert-info);
- Realizza un piccolo form, con una textarea, simulando la sezione commenti in un blog. Segnala che il commento è stato ricevuto, una volta inviato, usando il metodo post (seguendo il corso php), con un messaggio di conferma (quindi usando alert-success);
- Realizza un pulsante, chiamato “clicca qui”. Una volta cliccato, mostra un modal, con all’interno un messaggio a tua scelta.
Con questo è tutto! Vi aspettiamo alla prossima lezione, ciao! ;-D
