Velo Tutorial: creare un modulo per salvare i dati raccolti con gli elementi User Input in un database
Tempo di lettura: 6 min.
Visita il Centro Risorse di Velo by Wix per essere sempre aggiornato (contenuti in lingua inglese).
Questo video tutorial, ti può servire per imparare come costruire un modulo personalizzato per raccogliere i dati mediante gli elementi user input. Ti forniremo le istruzioni per impostare un modulo, per creare un database e connetterlo agli elementi user input mediante un dataset.
Alla fine, testeremo il modulo in modalità anteprima e pubblicheremo il sito in modo che i nostri visitatori possano compilare ed inviare i loro dati.
Alla fine, testeremo il modulo in modalità anteprima e pubblicheremo il sito in modo che i nostri visitatori possano compilare ed inviare i loro dati.
1. Attiva gli strumenti per gli sviluppatori
Velo by Wix crea la possibilità di utilizzare delle funzioni avanzate per creare un sito maggiormente interattivo e dinamico.
Puoi attivare gli Strumenti per gli sviluppatori selezionando l'apposita voce nella sezione Strumenti, nell'Editor.
Una volta completato questo passaggio, noterai alcuni cambiamenti nell'Editor:
- Troverai un pannello delle Proprietà. Se lo chiudi, puoi sempre riaprirlo nella sezione Strumenti del tuo editor
- Un code panel viene aggiunto nella sezione inferiore del tuo Editor
- Una sezione con la Struttura del tuo sito viene aggiunta sulla sinistra
- Molti altri elementi sono disponibili nel menu Aggiungi, come lo User Input e il Database.
2. Creare una Collezione Database
Una collezione di database è dove viene salvato il contenuto che ti serve per il tuo sito o dove raccogli le informazioni inviate dai tuoi visitatori. Quando crei una collezione, è necessario impostarne i permessi. Ciò ti permette di controllare quello che i tuoi utenti possono fare con i dati della tua collezione. Qui, aggiungiamo una collezione vuota che conterrà il contenuto che gli utenti invieranno mediante un modulo.
Per creare una collezione:
Per creare una collezione:
- Nella sezione della struttura del sito, clicca sull'icona + vicino a Database e seleziona Nuova collezione. Se appare un popup di Introduzione alla collezione di database, clicca su Inizia a creare
- Si aprirà una schermata per Creare una Collezione di database
- Attribuisci un nome alla tua collezione
- Clicca sull'icona a freccia, seleziona il tipo di utilizzo che vuoi assegnare alla tua collezione. Considera che tipo di utenti vuoi che leggano, scrivano, modifichino o cancellino i tuoi dati. Per il tuo modulo, probabilmente sceglierai Invia dati via modulo (Form Submission), che permetterà ad ognuno di inviare del contenuto ma permetterà solo a te (l'Admin) di modificarlo, dati i permessi che avrai impostato.
- Clicca su Crea Collezione.
Si aprirà un pannello dove gestire il contenuto (Content Manager).
Si tratta di un foglio elettronico, stile Excel, che ti permette di aggiungere nuovo contenuto alla tua collezione database.
Si tratta di un foglio elettronico, stile Excel, che ti permette di aggiungere nuovo contenuto alla tua collezione database.
3. Definisci le impostazioni della Collezione Database
Supponiamo che il tuo sito sta offrendo una svendita promozionale e vuoi che i tuoi visitatori siano in grado di iscriversi, inviando le loro informazioni. In questo caso, dovrai aggiungere un campo per ogni informazione che vuoi raccogliere.
Per impostare la collezione:
Per impostare la collezione:
- Nel pannello di gestione del contenuto, a destra della riga d'intestazione della prima colonna, clicca sull'icona + per aggiungere un campo alla tua collezione.
- Imposta il campo che vuoi che corrisponda all'informazione che verrà richiesta di inserire all'utente. Assicurati di selezionare il corretto tipo di dati in modo che il contenuto corrisponda.
- Definisci il campo per ogni elemento che intendi inserire nel tuo modulo.
4. Progetta il tuo modulo
Il tuo modulo dovrebbe includere elementi che permettano ai tuoi utenti di inserire le informazioni che vuoi raccogliere. Per configurarlo, hai bisogno di utilizzare l'elemento Input utente, che puoi trovare nel menu Aggiungi.
Per iniziare:
Per iniziare:
- Clicca sull'icona Aggiungi + e seleziona Input utente
- Trascina gli elementi dalla sezione Input utente nella tua pagina, per creare e dar forma al tuo modulo. Hai un'ampia scelta tra elementi input, caselle di testo, tasti opzionali (Radio buttons) e caselle con opzioni a tendina.
5. Configura i tuoi elementi
Una volta che hai aggiunto gli elementi Input utente, sarà necessario configurare ogni elemento nel proprio pannello delle impostazioni.
Le impostazioni includono la tipologia dell'input supportato, i placeholder testuali, se il campo è obbligatorio e se l'elemento è solo leggibile e non modificabile.
Configura i tuoi elementi:
Le impostazioni includono la tipologia dell'input supportato, i placeholder testuali, se il campo è obbligatorio e se l'elemento è solo leggibile e non modificabile.
Configura i tuoi elementi:
- Seleziona un elemento Input utente, clicca sull'icona delle impostazioni e utilizza le opzioni per configurarlo
- Ripeti queste azioni per ogni elemento Input utente del tuo modulo.
A questo punto, è necessario connettere l'elemento Input utente alla tua collezione. Per far ciò, è necessario utilizzare un dataset, seguendo le istruzioni a seguire.
6. Aggiungere e configurare un dataset
Un dataset connette i tuoi elementi con le tue collezioni di dati. Quando aggiungi un dataset, devi decidere anche che collezione vuoi attribuirgli, qualora tu voglia che i tuoi utenti siano in grado di leggere e/o editare la tua collezione e per abilitare altre eventuali azioni.
Per aggiungere un dataset alla tua pagina:
Per aggiungere un dataset alla tua pagina:
- Apri il menu Aggiungi +, clicca su Database e poi su Dataset. A dataset sarà aggiunto alla tua pagina
- Seleziona il dataset e clicca su Gestisci Dataset (Manage Dataset), si aprirà così il pannello delle impostazioni del dataset
- Sotto Connetti collezione (Connect a Collection), seleziona la tua collezione.
- Sotto Modalità (Mode), seleziona Scrivere solo (Write-only)
- Chiudi il pannello.
7. Connetti i tuoi elementi del modulo
Una volta configurato il dataset, puoi connettere ad esso gli elementi, che costituiscono il tuo modulo. È necessario passare tutti gli elementi del modulo e connetterli, uno ad uno, allo stesso dataset. Ogni volta che connetti un elemento, stai anche definendo a quale campo, nella tua collezione, il suo valore si connetterà.
Per connettere gli elementi Input utente
Per connettere gli elementi Input utente
- Seleziona un elemento e clicca sull'icona
Connetti a dati
- Seleziona il campo, nella tua collezione, dove l'informazione inserita dall'utente dovrà essere salvata
- Ripeti queste azioni per ogni elemento Input utente del tuo modulo.
Il prossimo passaggio, sarà creare un tasto di invio dati e lo stesso dataset gestirà i salvataggi del contenuto che l'utente ha inserito nella tua collezione.
8. Creare un tasto di invio dati
Ora che tutti gli elementi sono stati connessi alla stessa collezione attraverso lo stesso dataset, è necessario permettere agli utenti di inviare i loro dati. Basta aggiungere un tasto di invio alla tua pagina, connetterlo allo stesso dataset degli altri elementi del modulo e definire l'azione che dovrebbe avvenire una volta che il tasto è stato cliccato.
Per creare un tasto di invio dati:
Per creare un tasto di invio dati:
- Aggiungi un tasto alla tua pagina e modifica il suo testo in Invia
- Clicca sull'icona
Connetti a dati
- Nel pannello di connessione del tasto, seleziona il dataset rilevante
- Sotto I link collegano a, seleziona Invia (Submit)
- In alternativa, crea un messaggio da inviare una volta che l'utente ha inviato i dati
- Sotto Se l'invio ha avuto buon esito (When successful, navigate to) l'opzione preselezionata è Stai su questa pagina. Puoi anche scegliere Un link... per indirizzare i tuoi utenti ad un'altra pagina dopo che l'invio dei dati è stato completato.
Quando gli utenti inviano i loro dati, questi verranno validati prima di essere salvati.
9. Prova il tuo modulo
Adesso, puoi testare il tuo modulo in modalità Anteprima. Il contenuto che invierai verrà salvato nella Sandbox del tuo Database, che è usata solo nel Wix Editor ed è visibile solo in modalità Anteprima.
Per testare il tuo modulo:
Per testare il tuo modulo:
- Clicca Anteprima
- Inserisci dei dati all'interno dei campi nel modulo e clicca Invia
- Torna nell'Editor
- Seleziona la tua collezione dalla sezione dedicata alla Struttura del Sito (Site Structure)
- Vedrai le informazioni che hai inviato mediante il modulo come dati nella tua collezione.
10. Pubblica il tuo sito
Una volta testato il tuo modulo, è giunto il momento di pubblicare il tuo sito così i tuoi utenti potranno inviare il proprio contenuto.
Pubblicare il tuo sito creerà una versione vuota della tua collezione con tutti i campi della Sandbox del tuo Database. Il contenuto inviato dai tuoi utenti verrà salvato nella versione live del tuo Database, alla quale puoi accedere attraverso il Database di Wix nel pannello di controllo del tuo account.
Nell'Editor, clicca Pubblica per pubblicare il tuo sito.
Pubblicare il tuo sito creerà una versione vuota della tua collezione con tutti i campi della Sandbox del tuo Database. Il contenuto inviato dai tuoi utenti verrà salvato nella versione live del tuo Database, alla quale puoi accedere attraverso il Database di Wix nel pannello di controllo del tuo account.
Nell'Editor, clicca Pubblica per pubblicare il tuo sito.
11. Visualizza i tuoi dati live
Quando pubblichi il tuo sito, il tuo modulo sarà disponibile per i tuoi visitatori. Quando un utente invierà i propri dati mediante il modulo nel sito live, i dati verranno salvati all'interno del tuo database live.
Per visualizzare le informazioni inviate dai tuoi utenti:
Per visualizzare le informazioni inviate dai tuoi utenti:
- Vai nel pannello di controllo del tuo account. Nella sezione delle tue App, seleziona Wix Database.
- Seleziona la collezione per visualizzare i dati live.
Puoi ordinare e filtrare i tuoi dati da qui. Per esempio, puoi ordinare i dati filtrando per Data di creazione per vedere gli ultimi dati immessi.
Prossimi passaggi
Con Velo by Wix puoi aggiungere molte altre funzionalità al tuo modulo:
- Creare un modulo per editare i dati nella collezione di dati
- Migliorare la funzionalità del tuo modulo con il codice
- Aggiungere delle validazioni utilizzando hook di dataset e hook di collezioni
- Aggiungere dei componenti interattivi con l'API Velo by Wix
- Pubblica il modulo in ogni web API di terze parti utilizzando dei moduli web e hook di dataset.
Hai trovato utile questo articolo?
|