Inserire dati con Dreamweaver usando più elementi form

Nell'articolo odierno, invece, espanderemo il form e ci mettiamo qualche elemento in più. Ci avvarremo, infatti, di altri elementi che in un form troviamo quotidianamente e cioè: select e pulsanti di scelta, oltre alle classiche textbox e textarea.

Ho pensato di realizzare un form molto molto semplice per questo esempio e di immaginare, visto che siamo in periodo estivo e vacanziero, una ipotetica registrazione di potenziali clienti per una struttura alberghiera. Ovviamente verrà mostrata solo la pagina con il form ma senza nessuna possibilità di inserimento dati.

Cominciamo con il prevedere la tabella del database Access; essa conterrà i campi:

• nome
• cognome
• email
• il mese
• la settimana
• tipologia di camera (singola, doppia ecc...)
• una eventuale nota da lasciare

La tabella vera e propria, realizzata con Access, dovrebbe avere i campi come quella di seguito riportata:

Per quanto riguarda il nome da dare al database, io l'ho chiamato: prenotazioni.mdb. Fatti questi 2 passaggi, possiamo passare a lavorare con Dreamweaver. Per prima cosa si deve creare la connessione tra lo stesso programma ed Acess. Non mi soffermo in quanto ne ho discusso in un altro articolo.

Si crei una pagina dinamica e si inserisca un elemento form al suo interno. Su come formattare e realizzare il form, è una scelta personale. Io l'ho realizzato con qualche elemento grafico come quello della pagina di esempio.

La suddivisione in "aree" o raggrupamento di elementi, in un form, aiuta l'utente a capire quali informazioni inserire, a cosa si riferiscono e per fare questo si dispone di un elemento all'interno del form: il fieldset. All'interno di quest'ultimo, saremme opportuno accompagnare il nome dell'area; nel caso proposto abbiamo:

• le generalità
• la scelta del periodo (mese ed anno)
• la tipologia di camera
• eventuali note aggiuntive
• i pulsanti di invio e reset

Ovviamente, a seconda delle esigenze, queste "aree" possono essere incrementate; quello che interesa vedere adesso è il codice appropriato da inserire. Per i nomi da assegnare agli elementi, come ho avuto modo di scrivere altre volte, devono essere uguali ai nomi dati ai campi della tabella del database, ena il mancato inserimento nella stessa.

Mi soffermo un attimo sull'area periodo e camere.

Se si rivede la tabella del database messa all'inizio, troviamo un campo, appunto, che ha lo stesso nome. Qui dentro verrà inserito il valore che si sceglierà dalla select:

Luglio

Stessa cosa vale per la scelta del periodo. Per semplificare ho suddiviso il mese in 5 settimane ma potrebbe essere realizzato in maniera più completa tipo: settimana dal ... al...

Per quanto concerne i radiobutton, attraverso i quali scegliere la tipologia della camera, l'impostazione è un pò diversa in quanto, si veda l'immagine della tabella del database, oltre ad eserci perfetta uguaglianza tra i nomi, non è possibile scrivere il value con uno spazio ma deve essere trattato come se fosse un un unico termine. Ho scritto, quindi, le due parole con un underscore e così facendo non ho avuto nessun tipo di problema in fase di inserimento.

In ultimo, ma è stato già trattato, la textarea la quale raccoglie dei commenti inviati da parte del cliente. Fatto tutto questo, inseriamo il pulsante di invio, selezioniamolo in vista progettazione di dreameaver dal pannello Applicazione selezioniamo Comportamenti server. Fare click sul segno + e dal menu a tendina selezionare Inserisci record. Nella wizard selezionare il nome della connessione, la tabella entro la quale inserire i dati, la pagina alla quale rimandare l'utente dopo l'invio, il nome del form (nel caso nella pagina ce ne fosse più di uno) e nell'ultimo riquadro gli elementi del modulo; qui fare attenzione che siano inseriti con i giusti valori e nella colonna appropriata.

Premere OK al termine di questi passaggi e salvare la pagina. Possiamo richiamarla dal browser per poter testare la nostra applicazione.

Questo è tutto