Pagine web e modali
Come creare nuove pagine e finestre modali nelle applicazioni web
Il passo più importante nella creazione della maggior parte delle applicazioni web è l'organizzazione del lavoro con il database. Come ottenere i dati dal database, come visualizzarli sullo schermo dell'utente e come gestire e cancellare questi dati.
È a queste domande che è dedicato il nuovo modulo del corso. Nel terzo modulo abbiamo creato un database e progettato modelli per registrare informazioni su città e paesi. Ora organizzeremo il lavoro con questo database. Dobbiamo fare quanto segue:
- Creare una tabella per ottenere informazioni dal database
- Imparare ad aggiungere dati al database e a cancellarli.
- Imparare come funzionano le finestre modali per creare un'interfaccia facile da usare
- Capire come funzionano le tabelle collegate
Le pagine
Iniziamo con la parte preparatoria. La nostra applicazione sta diventando sempre più grande e sta stretta in una sola pagina. Dobbiamo crearne almeno un'altra. Aggiungiamola al menu di sinistra.
Chiamiamo la pagina creata "World" e impostiamo l'icona e un URL chiaro.
Finestre modali
Dobbiamo avere la possibilità di aggiungere nuovi Paesi alla pagina creata. Per farlo, abbiamo bisogno di una finestra modale in cui inserire i dati necessari e di un pulsante che apra questa finestra modale.
La finestra modale è un componente speciale. Non occupa un posto specifico nella pagina e, allo stesso tempo, combina le proprietà del componente (con impostazioni specifiche per i componenti) e della nuova pagina (con il proprio canvas per l'aggiunta di altri componenti). Il posto più appropriato per posizionare un modal è l'area in fondo alla pagina. È evidenziato in verde, così come il componente modale stesso.
È necessario assegnargli un nome adeguato e, premendo il pulsante, assegnare un'azione semplice: visualizzare la finestra modale.
Il passo successivo consiste nell'inserire i dati richiesti. Abbiamo già fatto un'operazione simile nel modulo precedente, quando abbiamo passato i valori di X e Y. Ora dobbiamo fare la stessa cosa, solo che il tipo di dati è diverso e i campi di input sono in una finestra modale.
Il database registra le informazioni di base sui paesi. Si tratta del nome (tipoString ) e della descrizione generale (Text). Questi sono i campi di input da aggiungere.
