Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python

Creazione di una Web App da zero utilizzando Python Flask e MySQL : Parte 4

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 3
Creating a Web App From Scratch Using Python Flask and MySQL: Part 5

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

Nella parte precedente di questa serie di tutorial, abbiamo implementato la funzionalità richiesta per un utente loggato aggiungere un desiderio. Abbiamo anche visto come visualizzare i desideri inseriti da un utente, nella sua home page 

In questa parte implementeremo la funzionalità per la modifica e la cancellazione dei desideri inseriti da un utente.

Incominciamo

Iniziamo copiando la parte precedente del tutorial da GitHub.

Una volta copiato il codice sorgente, navigate tra le directory del progetto e avviate il web server.

Puntate il browser su http://localhost:5002 e dovreste vedere partire l'applicazione.

Modifichiamo la Lista dei desideri.

Step 1 : Visualizziamo l'icona Modifica

Siamo già vincolati, i dati ricevuti usano jQuery nel nostro HTML. Modificheremo il codice ed utilizzeremo un modello jQuery per facilitare il vincolo dei dati. Aggiungeremo anche un icona modifica al nostro HTML per consentire l'aggiornamento dei desideri. Aprite userHome.html ed inserite una referenza al modello jQuery.

Rimuovete il div list-group esistente e rimpiazzatelo con il seguente codice HTML:

All'interno del tag UL con la classe list-group assoceremo i nostri dati. Definite un modello listTemplate come mostrato nel corpo dell' HTML :

Modificate la corretta callback jQuery AJAX per associare i tati a listTemplate.

Inoltre, includete gli stili nel file userHome.html:

Salvare tutte le modifiche e riavviare il server. Puntate il browser a http://localhost:5002 ed accedete utilizzando un email ed una password validi. Una volta effettuato l'accesso, dovreste essere in grado di vedere i desideri creati dall'utente.

User Home with Edit Icon

Step 2 : Visualizzare il popup di Modifica

Useremo il Bootstrap per mostrare un popup che fornisca un'interfaccia per modificare i desideri. Includete la referenza al Bootstrap nel file userHome.html

Una volta inclusa la referenza , aggiungete il seguente HTML al file userHome.html.

Il codice HTML sopra citato servirà come popup. Quando l'utente fa clic sull'icona modifica verrà visualizzato il popup. Abbiamo già aggiunto gli attributi data-target e data-toggle che faranno scattare il popup modale.

Salvare le modifiche e riavviare la app. Una volta effettuato l'accesso all'applicazione, cliccate sull'icona di modifica e dovreste essere in grado di visualizzare il popup.

Edit Wish Popup

Step 3: Popolare il Popup di modifica

Quando l'utente seleziona l'icona di modifica, vi mostreremo il popup di aggiornamento con il titolo e la descrizione per l'aggiornamento. Per iniziare, in primo luogo abbiamo bisogno l'ID del desiderio per recuperare i dettagli di un particolare desiderio, una volta che l'utente seleziona l'icona modifica. Quindi modificare il codice del modello di jQuery per includere un attributo supplementare dati-id nell'elemento di ancoraggio alla modifica.

Abbiamo anche attaccato un evento onclick per chiamare il metodo Edit. All'interno della funzione di modifica, faremo una chiamata AJAX a un metodo di python chiamato getWishById che restituirà i dettagli di desiderio.

Successivamente, aprite app.py e create un metodo denominato getWishById. Utilizzando questo metodo, otterremo i dettagli di un particolare desiderio dal database.

Come si può vedere nel metodo di cui sopra, vi sono passati nel desiderio che ID per questo metodo e ottiene i dati dal database utilizzando l'ID utente e ID desiderio. Una volta che i dati sono stati recuperati, converte i dati in un elenco e quindi li restituisce come dati JSON.

Avanti, andiamo a creare la Stored Procedure MySQL per   recuperare i dati memorizzati dal database.

Il codice mostrato sopra è la stored procedure per ottenere dettagli del desiderio particolare utilizzando  l' ID desiderio e ID utente.

Salvare le modifiche e riavviare il server. Una volta eseguito l'accesso all'applicazione, e selezionata l'icona di modifica dovreste avere i dettagli registrati nella console del vostro browser.

Per associare i dati ricevuti al popup HTML, prima di rimuovere gli attributi dei data-target e dati-toggle dal tag di ancoraggio dell'icona modifica. Quindi aggiungete il codice seguente per la callback di successo di funzione JavaScript modifica  per popolare il popup e attivarlo.

Salvare le modifiche e riavviare il server. Una volta ottenuto l'accesso all'applicazione, provate a selezionare l'icona modifica e avvierete il popup con titolo e descrizione.

Populated Edit Pop Up

Step 4 : Aggiornamento dettagli desideri

Per implementare la funzionalità di aggiornamento, create innanzitutto una store procedure MySQL.

Come mostrato nella stored procedure sopra citata, per modificare i dettagli nel database passeremo il titolo e la descrizione modificati insieme all' ID del desiderio e l'utente 

Successivamente, create un nuovo metodo chiamato updateWish per aggiornare i dettagli Ecco il metodo di updateWish:

Come si vede nel codice precedente, dopo la convalida per una sessione valida, abbiamo raccolto i dati inseriti e chiamato la stpred procedure sp_updateWish per aggiornare i dettagli.

Per chiamare il metodo updateWish, abbiamo bisogno di associare un evento sul pulsante dell'aggiornamento. Così, denominare l'aggiornamento pulsante btnUpdate e fissare un evento onclick come indicato:

Come si vede nel codice precedente, abbiamo raccolto le editId da localStorage, così all'interno della funzione modifica salvate l'ID in localStorage.

Inserite la chiamata AJAX getWish in una funzione, in modo che si possa chiamarla ancora una volta che i dati sono stati aggiornati.

Chiamate la funzione GetWishes nel callback dell'aggiornamento eseguito con successo della chiamata AJAX.

Salvare tutte le modifiche e riavviare il server. Una volta effettuato l'accesso all'applicazione, provare a modificare i desideri disponibili creati dall'utente.

L'eliminazione di un desiderio

Step 1: Visualizza un Popup di conferma

Aggiungete il seguente codice HTML al userHome.html.

Aggiungete un'icona di eliminazione all'interno il listTemplate aggiungendo il seguente codice HTML:

Facendo clic sull'icona Elimina sopra, che chiameremo una funzione JavaScript chiamata ConfirmDelete dove avrai attiviamo il popup di conferma.

Salvare le modifiche e riavviare il server. Una volta effettuato l'accesso, fare clic sull'icona Elimina nella lista dei desideri e si dovrebbe essere in grado di vedere il popup di conferma.

Delete Confirmation Popup

Step 2: Eliminare un desiderio

Per implementare la funzionalità di eliminazione del desiderio, prima creeremo la stored procedure MySQL di eliminazione.

La procedura sopra descritta accetta  l'ID desiderio e l'ID utente ed Elimina il desiderio corrispondente dal database.

Successivamente, create un metodo dentro app.py che richiami la procedura sp_deletewish.

Creeremo un metodo denominato deleteWish per l'eliminazione del desiderio.

Nel metodo di cui sopra, in primo luogo abbiamo convalidato la sessione. Una volta abbiamo convalidato la sessione dell'utente, utilizzando l'ID desiderio e l'ID utente abbiamo chiamato la stored procedure sp_deleteWish.

Per chiamare il metodo deleteWish sopra, è possibile aggiungere un evento onclick per il pulsante Elimina nella finestra popup di conferma di eliminazione.

Create una funzione JavaScript chiamata Elimina e all'interno di Elimina effettuare una chiamata AJAX per il metodo di python deleteWish .

Con il callback di successo alla funzione elimina di cui sopra, controlleremo lo stato restituito, e se va bene ci nasconderemo il popup modale e ricaricaremo i desideri.

Salvare le modifiche e riavviare il server. Una volta effettuato l'accesso all'applicazione, provare a eliminare un desiderio dalla home page dell'utente.

Conclusione

In questa parte della serie, abbiamo visto come implementare la funzionalità di modifica ed Elimina desiderio per la nostra applicazione Lista dei desideri. Nella parte successiva di questa serie, implementaremo l'impaginazione per la nostra lista nella home utente e implementaremo anche un paio di funzioni.

Codice sorgente da questo tutorial è disponibile su GitHub.

Fateci sapere i vostri pensieri nei commenti qui sotto!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.