13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 201 CAPITOLO10 INSERIRE I DATI NEL DATABASE In questo capitolo In questo capitolo imparerai a interagire con i contenuti del database gestiti nel sito. In particolare apprenderai come acquisire le informazioni fornite dai visitatori, come realizzare i moduli di inserimento record e come gestire i dati per aggiornare il database del sito. Imparerai inoltre a modificare, ridimensionare o personalizzare l aspetto dei moduli di inserimento record. Tutti questi aspetti sono fondamentali nella progettazione e nella creazione di pagine e siti Web dinamici strutturati su un database.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 202 202 I MODULI DI INSERIMENTO DATI Nel capitolo precedente abbiamo visto come realizzare una pagina dinamica che estrapola i contenuti da un database. Dreamweaver CS3 permette di realizzare dei moduli di inserimento dati che consentono all utente di aggiungere, aggiornare ed eliminare dei record dal database del sito mediante un browser Web. Ciò significa che, attraverso un semplice modulo, è possibile acquisire le informazioni fornite dai visitatori; questi dati verranno poi inseriti automaticamente nel database e visualizzati nelle pagine dinamiche che li richiederanno. LA PAGINA DI RINGRAZIAMENTO Prima di creare la pagina che conterrà il modulo per l inserimento dei dati, vediamo come realizzare una semplice pagina di base per ringraziare l utente che invierà il proprio commento. 1. Crea una pagina HTML come quella mostrata nella figura sottostante (vedi figura 10.1). Figura 10.1 La pagina di ringraziamento. 2. Seleziona il testo I commenti dei lettori che fungerà da link per il collegamento alla pagina dei commenti (vedi figura 10.2). Figura 10.2 Selezione del testo per il link.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 203 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 203 3. Nella finestra di ispezione Proprietà fai clic sul pulsante Cerca file raffigurato da un icona di cartella e posto a destra del campo Collegamento (vedi figura 10.3). Figura 10.3 Il pulsante Cerca file. 4. Nella finestra Selezionare file fai clic sul file libro ospiti; verifica che venga inserito nel campo Nome file e fai clic sul pulsante OK (vedi figura 10.4). Figura 10.4 La finestra Selezionare file. 5. Se appare una finestra di dialogo che ti avvisa di salvare il file, fai clic sul pulsante OK per proseguire. Figura 10.5 Finestra di dialogo. 6. Il collegamento alla pagina libro ospiti.asp è così realizzato; fai clic in un punto vuoto della finestra del Documento per deselezionare il testo e vedere il link realizzato nella pagina (vedi figura 10.6).
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 204 204 Figura 10.6 Il link alla pagina dei commenti. 7. Seleziona il menu File e fai clic sulla voce Salva con nome (vedi figura 10.7). Figura 10.7 Il comando Salva con nome. 8. Nella finestra Salva con nome digita nel campo Nome file il nome grazie.htm e fai clic sul pulsante Salva per salvare il file (vedi figura 10.8). Figura 10.8 La finestra Salva con nome.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 205 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 205 9. Come puoi osservare il file grazie.htm è ora presente nel pannello File (vedi figura 10.9). Figura 10.9 Il file grazie.htm nel pannello File. 10. Premi il tasto funzione F12 per visualizzare l anteprima della pagina nel browser (vedi figura 10.10). Figura 10.10 Anteprima nel browser. 11. Nella pagina Web presente nel browser fai clic sul link per verificare il collegamento dalla pagina di ringraziamento alla pagina dei commenti (vedi figura 10.11).
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 206 206 Figura 10.11 La pagina collegata. 12. Dopo aver verificato il corretto funzionamento della pagina nel browser, chiudi il browser e la finestra del Documento facendo clic sul pulsante Chiudi posto sulla barra del titolo (vedi figura 10.12). Figura 10.12 Il pulsante Chiudi. LA PAGINADIINSERIMENTODATI Passiamo ora a creare la pagina vera e propria per l inserimento dei dati nel database. 1. Seleziona il menu File e fai clic sulla voce Nuovo (vedi figura 10.13). Figura 10.13 Il comando Nuovo.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 207 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 207 Figura 10.14 La finestra Nuovo documento. 2. Nella finestra Nuovo documento seleziona Pagina vuota e nel riquadro Tipo di messaggio seleziona la voce ASP VBScript. Nel riquadro Layout (a destra) seleziona la voce nessuno e fai clic sul pulsante Crea (vedi figura 10.14). 3. Viene aperta una nuova pagina nella finestra del Documento. Avendo impostato la pagina come pagina dinamica, è possibile ora realizzare in questa pagina un modulo collegato al database, che permetterà di inserire i commenti degli utenti direttamente nel database aggiornandolo automaticamente (vedi figura 10.15). Figura 10.15 Il nuovo documento. 4. Dalla barra Inserisci seleziona la scheda Dati e fai clic sul pulsante Inserisci record (vedi figura 10.16). Figura 10.16 Il pulsante Inserisci record. 5. All apertura del menu seleziona la voce Procedura guidata Modulo inserimento record (vedi figura 10.17).
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 208 208 Figura 10.17 Il comando Procedura guidata Modulo inserimento record. 6. Nella finestra Modulo inserimento record seleziona dal menu a comparsa del campo Connessione la voce ospiti. Nel campo Inserisci nella tabella Dreamweaver CS3 individua automaticamente la tabella nella quale andranno inseriti i nuovi dati; visualizza la voce ospiti e fai clic sul pulsante Sfoglia posto a destra del campo Dopo l inserimento vai a: (vedi figura 10.18). Figura 10.18 La finestra Modulo inserimento record. 7. All apertura della finestra di dialogo Selezionare file seleziona il file grazie.htm e fai clic sul pulsante OK (vedi figura 10.19). Figura 10.19 La finestra Selezionare file.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 209 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 209 8. All apertura della finestra di dialogo che ti avvisa di salvare il file fai clic sul pulsante OK per proseguire. Figura 10.20 Finestra di dialogo. Figura 10.21 Eliminazione del campo ID. 9. Nell area Campi modulo indica le voci per le quali creare i campi di inserimento. Lascia attive tutte le voci tranne ID in quanto il database assegnerà a ogni commento inserito un numero progressivo. Seleziona quindi il campo ID e fai clic sul pulsante per eliminare il campo (vedi figura 10.21). 10. Verifica l avvenuta eliminazione del campo ID e fai clic sul pulsante OK per inserire il modulo nella pagina (vedi figura 10.22). Figura 10.22 Verifica e conferma.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 210 210 11. Nella pagina viene inserito un modulo con i tre campi precedentemente impostati nei quali inserire il testo relativo (vedi figura 10.23). Figura 10.23 Il modulo di inserimento record. MODIFICA DEL MODULO Dopo aver creato il modulo di inserimento record, puoi facilmente modificarne l aspetto per adattarlo alle tue esigenze, per esempio aumentare la larghezza dei campi oppure aggiungere ulteriore testo e formattarlo come desideri. Vediamo come apportare al modulo appena realizzato delle piccole modifiche. 1. Per cambiare il testo sul pulsante Inserisci record fai clic sul pulsante per selezionarlo (vedi figura 10.24). Figura 10.24 Selezione del pulsante Inserisci record. 2. Nella finestra di ispezione Proprietà digita nel campo Etichetta il testo Invia il commento e premi il tasto Invio per inserire il testo digitato (vedi figura 10.25). Figura 10.25 Il campo Etichetta. Figura 10.26 Il cursore di inserimento nella cella. 3. Posiziona il puntatore del mouse sulla cella Data e fai clic per selezionare la cella e inserire il cursore di inserimento al suo interno (vedi figura 10.26).
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 211 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 211 Figura 10.27 Il campo La. 4. Nella finestra di ispezione Proprietà inserisci nel campo La il valore 150 per impostare la larghezza della cella a 150 pixel e premi il tasto Invio per confermare l operazione (vedi figura 10.27). Figura 10.28 Il testo aggiunto. 5. Fai nuovamente clic sulla cella Data e aggiungi il testo (gg/mm/aaaa) per indicare in che modo inserire la data (vedi figura 10.28). 6. Formatta il testo aggiunto specificando nel campo Dim della finestra di ispezione Proprietà il valore 2 (vedi figura 10.29). Figura 10.29 Formattazione del testo inserito.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 212 212 7. Dal menu File seleziona la voce Salva con nome (vedi figura 10.30). Figura 10.30 Il comando Salva con nome. 8. Nella finestra Salva con nome digita nel campo Nome file il nome inserimento e fai clic sul pulsante OK per salvare la pagina (vedi figura 10.31). Figura 10.31 La finestra Salva con nome. 9. Il file viene salvato ed è visibile nel pannello File con il nome inserimento.asp (vedi figura 10.32).
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 213 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 213 Figura 10.32 Il file inserimento.asp nel pannello Sito. 10. Premi il tasto funzione F12 per visualizzare l anteprima della pagina nel browser (vedi figura 10.33). Figura 10.33 Anteprima nel browser. INSERIMENTO E VISUALIZZAZIONE DEI DATI Il semplice modulo di inserimento realizzato nella pagina inserimento.asp permette ai visitatori del sito di inserire i dati nei campi e inviarli al server Web. I dati saranno inseriti automaticamente nella tabella del database ospiti.mdb e da questo estrapolati per essere visibili nella pagina libro ospiti.asp.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 214 214 Vediamo in pratica come avviene l inserimento e la visualizzazione dei dati attraverso il browser Web. Figura 10.34 I dati inseriti nel modulo. 1. Nella pagina Web visualizzata dal browser inserisci i dati nel modulo e fai clic sul pulsante Invia il commento (vedi figura 10.34). Figura 10.35 La pagina di ringraziamento. 2. Subito dopo viene visualizzata la pagina di ringraziamento al visitatore per aver inviato il commento (vedi figura 10.35). 3. Per visualizzare i commenti fai clic sul link I commenti degli ospiti (vedi figura 10.36). Figura 10.36 Il link alla pagina dei commenti.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 215 CAPITOLO 10 INSERIRE I DATI NEL DATABASE 215 4. All apertura della pagina puoi notare come i dati appena inseriti nel modulo vengano ora visualizzati nella tabella del Libro degli Ospiti; avendo impostato precedentemente un ordine per data discendente, l ultimo commento inserito sarà chiaramente visualizzato nella prima riga della tabella (vedi figura 10.37). Figura 10.37 Visualizzazione dei dati inseriti. Hai così realizzato e compreso il corretto funzionamento delle pagine dinamiche del sito. A ogni inserimento di dati nel modulo da parte dei visitatori, il database verrà aggiornato e la pagina del Libro degli Ospiti visualizzerà i dati raccolti nel database.
13-Cap10_DWCS3.qxd 18-11-2009 11:43 Pagina 216